@extends('portal.layouts.app', [
    'class' => '',
    'elementActive' => ''
])
@section('title','Edit Candidate Profile')

@section('css')
<style>
    .profile-photo {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid #ddd;
    }
</style>
@endsection

@section('content')
<div id="content-page" class="content-page">
    <div class="container-fluid">
        <div class="iq-card">
            <div class="iq-card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Edit Candidate Profile</h4>
            </div>
            <div class="iq-card-body">
                <form
                    action="{{ route('updatecandidate', $candidate->uuid) }}"
                    method="POST"
                    enctype="multipart/form-data"
                    class="autosubmit"
                >
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <!-- Left side: photo -->
                        <div class="col-md-4 text-center mb-3">
                            <label for="passport_photo" class="form-label d-block">Passport Photo</label>

                            <!-- Current photo -->
                            <img
                                id="photoPreview"
                                src="{{ $candidate->passport_photo ? asset('storage/'.$candidate->passport_photo) : asset('portal/images/default-avatar.png') }}"
                                alt="Passport Photo"
                                class="profile-photo mb-2"
                            >

                            <!-- Upload input -->
                            <input
                                type="file"
                                name="passport_photo"
                                id="passport_photo"
                                class="form-control mt-2"
                                accept="image/*"
                                onchange="previewPhoto(event)"
                            >
                            @error('passport_photo')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- Right side: details -->
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Full Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ old('name', $candidate->user->name) }}" required>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">National ID</label>
                                    <input type="text" name="national_id" class="form-control" value="{{ old('national_id', $candidate->user->national_id) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control" value="{{ old('email', $candidate->user->email) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Phone</label>
                                    <input type="text" name="phone" class="form-control" value="{{ old('phone', $candidate->user->phone) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Passport Number</label>
                                    <input type="text" name="passport_number" class="form-control" value="{{ old('passport_number', $candidate->passport_number) }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Has Good Conduct</label>
                                    <select name="has_good_conduct" class="form-control select2">
                                        <option value="">Choose Option</option>
                                        @foreach (['yes' => true, 'no' => false] as $label => $value)
                                            <option value="{{ $label }}" {{ $candidate->has_good_conduct == $value ? 'selected' : '' }}>
                                                {{ ucfirst($label) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Gender</label>
                                    <select name="gender" class="form-control select2">
                                        <option value="">Choose Gender</option>
                                        @foreach (['male', 'female', 'prefer not to say'] as $gender)
                                            <option value="{{ $gender }}" {{ $gender == $candidate->gender ? 'selected' : '' }}>
                                                {{ ucfirst($gender) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Date of Birth</label>
                                    <input type="date" name="dob" class="form-control" value="{{ old('dob', $candidate->dob) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Country</label>
                                    <select name="country" class="form-control select2">
                                        <option value="">Choose Country</option>
                                        @foreach(\App\Models\Country::orderBy('name')->select('name')->get() as $country)
                                            <option value="{{$country->name}}" {{$country->name == $candidate->country ? 'selected' : ''}}>{{$country->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">County</label>
                                    <select name="county" class="form-control select2">
                                        <option value="">Choose County</option>
                                        @foreach(\App\Models\County::orderBy('name')->select('name')->get() as $county)
                                            <option value="{{$county->name}}" {{$county->name == $candidate->county ? 'selected' : ''}}>{{$county->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Sub County</label>
                                    <input type="text" name="sub_county" class="form-control" value="{{ old('sub_county', $candidate->sub_county) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Address</label>
                                    <input type="text" name="address" class="form-control" value="{{ old('address', $candidate->address) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Languages</label>
                                    <input type="text" name="languages" class="form-control" value="{{ old('languages', $candidate->languages) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Skills</label>
                                    <input type="text" name="skills" class="form-control" value="{{ old('skills', $candidate->skills) }}">
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Job Title</label>
                                    <select name="title" class="form-control select2">
                                        <option value="">Choose Job Title</option>
                                        @foreach(\App\Models\JobTitle::orderBy('name')->select('name')->get() as $title)
                                            <option value="{{$title->name}}" {{$title->name == $candidate->job_title ? 'selected' : ''}}>{{$title->name}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Choose Site (This is for those from specified partners)</label>
                                    <select name="partner_id" class="form-control select2">
                                        <option value="">Choose Partner</option>
                                        @foreach(\App\Models\Partner::orderBy('name')->select('name','id','uuid')->get() as $partner)
                                            <option value="{{$partner->uuid}}" {{$partner->id == $candidate->partner_id ? 'selected' : ''}}>{{$partner->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="control-label col-sm-2 align-self-center mb-0">Financing Partner:</label>
                                        <select type="text" name="financing_partner" class="form-control select2">
                                            <option value="">Select Financing Partner</option>
                                            @foreach(\App\Models\FinancingPartner::orderBy('name')->get() as $fp)
                                                <option value="{{$fp->uuid}}" {{$fp->id == $candidate->financing_partner_id ? 'selected' : ''}}>{{$fp->name}}</option>
                                            @endforeach
                                        </select>
                                </div>
                            </div>

                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary">Save Changes</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('portal/js/formsubmission.js') }}"></script>
<script>
    // Preview passport photo instantly
    function previewPhoto(event) {
        const output = document.getElementById('photoPreview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src); // free memory
        }
    }
</script>
@endsection