@extends('layouts.user')

@section('sidebar-title')
    <h1 class="text-2xl font-bold text-slate-900">Healthcare Worker Dashboard</h1>
@endsection

@section('sidebar-menu')
    <a href="{{ route('user.profile.show') }}" class="block px-4 py-3 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors">
        <svg class="w-5 h-5 inline-block mr-3" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path>
        </svg>
        My Profile
    </a>
    <a href="{{ route('user.applications.index') }}" class="block px-4 py-3 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors">
        <svg class="w-5 h-5 inline-block mr-3" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 1 1 0 000-2H2a1 1 0 00-1 1v9a1 1 0 001 1h1a1 1 0 000-2H4V5z" clip-rule="evenodd"></path>
        </svg>
        My Applications
    </a>
    <a href="{{ route('user.profile.edit') }}" class="block px-4 py-3 rounded-lg text-emerald-600 bg-emerald-50 transition-colors font-medium">
        <svg class="w-5 h-5 inline-block mr-3" fill="currentColor" viewBox="0 0 20 20">
            <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
        Edit Profile
    </a>
@endsection

@section('content')
    <div class="max-w-4xl">
        <!-- Session Status -->
        @if ($errors->any())
            <div class="admin-card border-l-4 border-red-500 mb-6">
                <div class="card-body">
                    <div class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        <div>
                            <h3 class="font-semibold text-red-800">Please fix the following errors:</h3>
                            <ul class="mt-2 list-disc list-inside text-red-700 text-sm">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('user.profile.update') }}" enctype="multipart/form-data" id="profile-edit-form">
            @csrf
            @method('PATCH')

            <!-- Profile picture -->
            <div class="rounded-2xl border border-slate-200 bg-white shadow-sm p-6 mb-6" x-data="{ preview: null }">
                <h3 class="text-lg font-semibold text-slate-900 mb-4">Profile picture</h3>
                <div class="flex flex-col sm:flex-row sm:items-start gap-6">
                    <div class="flex-shrink-0">
                        <label class="block cursor-pointer group">
                            <input type="file" name="avatar" accept="image/jpeg,image/png,image/jpg,image/gif" class="sr-only" id="avatar-input" @change="preview = $event.target.files[0] ? URL.createObjectURL($event.target.files[0]) : null">
                            <div class="relative h-32 w-32 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 flex items-center justify-center overflow-hidden group-hover:border-[#1D5BBF] group-hover:bg-slate-100 transition-colors">
                                <template x-if="preview">
                                    <img :src="preview" alt="Preview" class="absolute inset-0 h-full w-full object-cover rounded-2xl">
                                </template>
                                <template x-if="!preview">
                                    <span class="block">
                                        @if($profile->avatar_url ?? null)
                                            <img src="{{ \App\Models\User::publicStorageUrl($profile->avatar_url) }}" alt="Profile" class="h-full w-full object-cover rounded-2xl">
                                        @else
                                            <svg class="w-12 h-12 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                            </svg>
                                        @endif
                                    </span>
                                </template>
                            </div>
                            <span class="mt-2 block text-center text-sm font-medium text-slate-600 group-hover:text-[#1D5BBF]">Change photo</span>
                        </label>
                        <p class="mt-2 text-xs text-slate-500">JPG, PNG or GIF. Max 2MB. Shown on your profile and in applications.</p>
                        @error('avatar')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
            <!-- Form Fields Section -->
            <div class="admin-card mb-6">
                <div class="card-body">
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Headline</label>
                            <input type="text" name="headline" value="{{ old('headline', $profile->headline ?? '') }}" class="w-full admin-input" placeholder="e.g., Critical Care Specialist">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Full Name</label>
                            <input type="text" name="full_name" value="{{ old('full_name', $profile->full_name ?? '') }}" class="w-full admin-input">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Primary Specialty</label>
                            <select name="primary_specialty" id="primary_specialty" onchange="toggleOtherInput(this, 'primary_specialty_other')" class="w-full admin-input">
                                <option value="">Select specialty</option>
                                <option value="ICU" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'ICU' ? 'selected' : '' }}>ICU</option>
                                <option value="Emergency" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Emergency' ? 'selected' : '' }}>Emergency</option>
                                <option value="Pediatrics" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Pediatrics' ? 'selected' : '' }}>Pediatrics</option>
                                <option value="Oncology" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Oncology' ? 'selected' : '' }}>Oncology</option>
                                <option value="Surgery" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Surgery' ? 'selected' : '' }}>Surgery</option>
                                <option value="Cardiology" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Cardiology' ? 'selected' : '' }}>Cardiology</option>
                                <option value="Neurology" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Neurology' ? 'selected' : '' }}>Neurology</option>
                                <option value="Orthopedics" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Orthopedics' ? 'selected' : '' }}>Orthopedics</option>
                                <option value="Mental Health" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Mental Health' ? 'selected' : '' }}>Mental Health</option>
                                <option value="Geriatrics" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Geriatrics' ? 'selected' : '' }}>Geriatrics</option>
                                <option value="Neonatal" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Neonatal' ? 'selected' : '' }}>Neonatal</option>
                                <option value="Labor & Delivery" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Labor & Delivery' ? 'selected' : '' }}>Labor & Delivery</option>
                                <option value="Operating Room" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Operating Room' ? 'selected' : '' }}>Operating Room</option>
                                <option value="Dialysis" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Dialysis' ? 'selected' : '' }}>Dialysis</option>
                                <option value="Home Health" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Home Health' ? 'selected' : '' }}>Home Health</option>
                                <option value="Other" {{ old('primary_specialty', $profile->primary_specialty ?? '') === 'Other' || (old('primary_specialty', $profile->primary_specialty ?? '') && !in_array(old('primary_specialty', $profile->primary_specialty ?? ''), ['ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health'])) ? 'selected' : '' }}>Other</option>
                            </select>
                            <input type="text" name="primary_specialty_other" id="primary_specialty_other" value="{{ !in_array(old('primary_specialty', $profile->primary_specialty ?? ''), ['', 'ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health']) ? old('primary_specialty', $profile->primary_specialty ?? '') : '' }}" placeholder="Specify specialty" class="mt-2 w-full admin-input" style="display: {{ (old('primary_specialty', $profile->primary_specialty ?? '') && !in_array(old('primary_specialty', $profile->primary_specialty ?? ''), ['', 'ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health'])) ? 'block' : 'none' }};">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Secondary Specialty</label>
                            <select name="secondary_specialty" id="secondary_specialty" onchange="toggleOtherInput(this, 'secondary_specialty_other')" class="w-full admin-input">
                                <option value="">Select specialty</option>
                                <option value="ICU" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'ICU' ? 'selected' : '' }}>ICU</option>
                                <option value="Emergency" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Emergency' ? 'selected' : '' }}>Emergency</option>
                                <option value="Pediatrics" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Pediatrics' ? 'selected' : '' }}>Pediatrics</option>
                                <option value="Oncology" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Oncology' ? 'selected' : '' }}>Oncology</option>
                                <option value="Surgery" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Surgery' ? 'selected' : '' }}>Surgery</option>
                                <option value="Cardiology" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Cardiology' ? 'selected' : '' }}>Cardiology</option>
                                <option value="Neurology" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Neurology' ? 'selected' : '' }}>Neurology</option>
                                <option value="Orthopedics" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Orthopedics' ? 'selected' : '' }}>Orthopedics</option>
                                <option value="Mental Health" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Mental Health' ? 'selected' : '' }}>Mental Health</option>
                                <option value="Geriatrics" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Geriatrics' ? 'selected' : '' }}>Geriatrics</option>
                                <option value="Neonatal" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Neonatal' ? 'selected' : '' }}>Neonatal</option>
                                <option value="Labor & Delivery" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Labor & Delivery' ? 'selected' : '' }}>Labor & Delivery</option>
                                <option value="Operating Room" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Operating Room' ? 'selected' : '' }}>Operating Room</option>
                                <option value="Dialysis" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Dialysis' ? 'selected' : '' }}>Dialysis</option>
                                <option value="Home Health" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Home Health' ? 'selected' : '' }}>Home Health</option>
                                <option value="Other" {{ old('secondary_specialty', $profile->secondary_specialty ?? '') === 'Other' || (old('secondary_specialty', $profile->secondary_specialty ?? '') && !in_array(old('secondary_specialty', $profile->secondary_specialty ?? ''), ['ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health'])) ? 'selected' : '' }}>Other</option>
                            </select>
                            <input type="text" name="secondary_specialty_other" id="secondary_specialty_other" value="{{ !in_array(old('secondary_specialty', $profile->secondary_specialty ?? ''), ['', 'ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health']) ? old('secondary_specialty', $profile->secondary_specialty ?? '') : '' }}" placeholder="Specify specialty" class="mt-2 w-full admin-input" style="display: {{ (old('secondary_specialty', $profile->secondary_specialty ?? '') && !in_array(old('secondary_specialty', $profile->secondary_specialty ?? ''), ['', 'ICU', 'Emergency', 'Pediatrics', 'Oncology', 'Surgery', 'Cardiology', 'Neurology', 'Orthopedics', 'Mental Health', 'Geriatrics', 'Neonatal', 'Labor & Delivery', 'Operating Room', 'Dialysis', 'Home Health'])) ? 'block' : 'none' }};">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Location & Country Section -->
            <div class="admin-card mb-6">
                <div class="card-body">
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Country</label>
                            <input type="text" value="United States" class="w-full admin-input bg-slate-50" readonly>
                            <input type="hidden" name="country" id="country" value="US">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Country Code (ISO)</label>
                            <input type="text" value="US" maxlength="2" class="w-full admin-input uppercase bg-slate-50" readonly>
                            <input type="hidden" name="country_code" value="US">
                                </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">City</label>
                            <input type="text" name="city" value="{{ old('city', $profile->city ?? '') }}" class="w-full admin-input" placeholder="City of residence">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Phone</label>
                            <input type="text" name="phone" value="{{ old('phone', $profile->phone ?? '') }}" class="w-full admin-input" placeholder="+1 (555) 000-0000">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Years of Experience</label>
                            <input type="number" name="years_experience" value="{{ old('years_experience', $profile->years_experience ?? $profile->experience_years ?? '') }}" class="w-full admin-input" min="0" max="60">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Licensing & Certifications Section -->
            <div class="admin-card mb-6">
                <div class="card-header">
                    <h3 class="font-semibold text-slate-900">Licenses & Certifications</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">License Type</label>
                            <select name="license_type" id="license_type" onchange="toggleOtherInput(this, 'license_type_other')" class="w-full admin-input">
                                <option value="">Select license</option>
                                <option value="RN License" {{ old('license_type', $profile->license_type ?? '') === 'RN License' ? 'selected' : '' }}>RN License</option>
                                <option value="LPN License" {{ old('license_type', $profile->license_type ?? '') === 'LPN License' ? 'selected' : '' }}>LPN License</option>
                                <option value="NP License" {{ old('license_type', $profile->license_type ?? '') === 'NP License' ? 'selected' : '' }}>NP License</option>
                                <option value="CRNA License" {{ old('license_type', $profile->license_type ?? '') === 'CRNA License' ? 'selected' : '' }}>CRNA License</option>
                                <option value="CNS License" {{ old('license_type', $profile->license_type ?? '') === 'CNS License' ? 'selected' : '' }}>CNS License</option>
                                <option value="Other" {{ old('license_type', $profile->license_type ?? '') === 'Other' || (old('license_type', $profile->license_type ?? '') && !in_array(old('license_type', $profile->license_type ?? ''), ['RN License', 'LPN License', 'NP License', 'CRNA License', 'CNS License'])) ? 'selected' : '' }}>Other</option>
                            </select>
                            <input type="text" name="license_type_other" id="license_type_other" value="{{ !in_array(old('license_type', $profile->license_type ?? ''), ['', 'RN License', 'LPN License', 'NP License', 'CRNA License', 'CNS License']) ? old('license_type', $profile->license_type ?? '') : '' }}" placeholder="Specify license type" class="mt-2 w-full admin-input" style="display: {{ (old('license_type', $profile->license_type ?? '') && !in_array(old('license_type', $profile->license_type ?? ''), ['', 'RN License', 'LPN License', 'NP License', 'CRNA License', 'CNS License'])) ? 'block' : 'none' }};">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">License Country</label>
                            <input type="text" name="license_country" value="{{ old('license_country', $profile->license_country ?? '') }}" class="w-full admin-input" placeholder="Country where licensed">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">License Expiry</label>
                            <input type="date" name="license_expiry" value="{{ old('license_expiry', $profile->license_expiry ?? '') }}" class="w-full admin-input">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">NCLEX Status</label>
                            <select name="nclex_status" class="w-full admin-input">
                                <option value="">Select status</option>
                                <option value="Passed" {{ old('nclex_status', $profile->nclex_status ?? '') === 'Passed' ? 'selected' : '' }}>Passed</option>
                                <option value="Pending" {{ old('nclex_status', $profile->nclex_status ?? '') === 'Pending' ? 'selected' : '' }}>Pending</option>
                                <option value="Not Taken" {{ old('nclex_status', $profile->nclex_status ?? '') === 'Not Taken' ? 'selected' : '' }}>Not Taken</option>
                                <option value="Scheduled" {{ old('nclex_status', $profile->nclex_status ?? '') === 'Scheduled' ? 'selected' : '' }}>Scheduled</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Language & Assessment Section -->
            <div class="admin-card mb-6">
                <div class="card-header">
                    <h3 class="font-semibold text-slate-900">Language Skills & Assessments</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Languages</label>
                            <input type="text" name="language_skills" value="{{ old('language_skills', $profile->language_skills ?? '') }}" class="w-full admin-input" placeholder="e.g., English, Spanish, Mandarin">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">IELTS Score</label>
                            <input type="number" step="0.1" name="ielts_score" value="{{ old('ielts_score', $profile->ielts_score ?? '') }}" class="w-full admin-input" placeholder="0.0 - 9.0">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">OET Score</label>
                            <input type="number" step="0.1" name="oet_score" value="{{ old('oet_score', $profile->oet_score ?? '') }}" class="w-full admin-input" placeholder="0.0 - 500.0">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Work Authorization & Preferences Section -->
            <div class="admin-card mb-6">
                <div class="card-header">
                    <h3 class="font-semibold text-slate-900">Work Authorization & Preferences</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-6 md:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Work Authorization</label>
                            <select name="work_authorization" id="work_authorization" onchange="toggleOtherInput(this, 'work_authorization_other')" class="w-full admin-input">
                                <option value="">Select authorization</option>
                                <option value="Citizen" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Citizen' ? 'selected' : '' }}>Citizen</option>
                                <option value="Permanent Resident" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Permanent Resident' ? 'selected' : '' }}>Permanent Resident</option>
                                <option value="Work Visa" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Work Visa' ? 'selected' : '' }}>Work Visa</option>
                                <option value="Work Permit" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Work Permit' ? 'selected' : '' }}>Work Permit</option>
                                <option value="Student Visa" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Student Visa' ? 'selected' : '' }}>Student Visa</option>
                                <option value="Require Sponsorship" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Require Sponsorship' ? 'selected' : '' }}>Require Sponsorship</option>
                                <option value="Other" {{ old('work_authorization', $profile->work_authorization ?? '') === 'Other' || (old('work_authorization', $profile->work_authorization ?? '') && !in_array(old('work_authorization', $profile->work_authorization ?? ''), ['Citizen', 'Permanent Resident', 'Work Visa', 'Work Permit', 'Student Visa', 'Require Sponsorship'])) ? 'selected' : '' }}>Other</option>
                            </select>
                            <input type="text" name="work_authorization_other" id="work_authorization_other" value="{{ !in_array(old('work_authorization', $profile->work_authorization ?? ''), ['', 'Citizen', 'Permanent Resident', 'Work Visa', 'Work Permit', 'Student Visa', 'Require Sponsorship']) ? old('work_authorization', $profile->work_authorization ?? '') : '' }}" placeholder="Specify work authorization" class="mt-2 w-full admin-input" style="display: {{ (old('work_authorization', $profile->work_authorization ?? '') && !in_array(old('work_authorization', $profile->work_authorization ?? ''), ['', 'Citizen', 'Permanent Resident', 'Work Visa', 'Work Permit', 'Student Visa', 'Require Sponsorship'])) ? 'block' : 'none' }};">
                        </div>
                        <div>
                            <label class="text-sm font-semibold text-slate-700 block mb-2">Preferred Shift</label>
                            <select name="preferred_shift" class="w-full admin-input">
                                <option value="">Select shift</option>
                                <option value="Day" {{ old('preferred_shift', $profile->preferred_shift ?? '') === 'Day' ? 'selected' : '' }}>Day</option>
                                <option value="Night" {{ old('preferred_shift', $profile->preferred_shift ?? '') === 'Night' ? 'selected' : '' }}>Night</option>
                                <option value="Evening" {{ old('preferred_shift', $profile->preferred_shift ?? '') === 'Evening' ? 'selected' : '' }}>Evening</option>
                                <option value="Rotating" {{ old('preferred_shift', $profile->preferred_shift ?? '') === 'Rotating' ? 'selected' : '' }}>Rotating</option>
                                <option value="Flexible" {{ old('preferred_shift', $profile->preferred_shift ?? '') === 'Flexible' ? 'selected' : '' }}>Flexible</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <div class="space-y-3">
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="willing_to_relocate" value="1" {{ old('willing_to_relocate', $profile->willing_to_relocate ?? false) ? 'checked' : '' }} class="w-4 h-4 text-sky-600 rounded border-slate-300 focus:ring-sky-500">
                                    <span class="text-sm font-medium text-slate-700">Willing to relocate</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer">
                                    <input type="checkbox" name="visa_needed" value="1" {{ old('visa_needed', $profile->visa_needed ?? false) ? 'checked' : '' }} class="w-4 h-4 text-sky-600 rounded border-slate-300 focus:ring-sky-500">
                                    <span class="text-sm font-medium text-slate-700">Visa needed</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bio Section -->
            <div class="admin-card mb-6">
                <div class="card-header">
                    <h3 class="font-semibold text-slate-900">Professional Bio</h3>
                </div>
                <div class="card-body">
                    <div>
                        <label class="text-sm font-semibold text-slate-700 block mb-2">Bio</label>
                        <textarea name="bio" rows="5" class="w-full admin-input" placeholder="Tell us about your professional experience and career goals...">{{ old('bio', $profile->bio ?? '') }}</textarea>
                        <p class="mt-2 text-xs text-slate-500">Maximum 1000 characters</p>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex flex-wrap items-center gap-3 mb-8">
                <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold text-white bg-[#1D5BBF] hover:bg-[#14499d] shadow-sm transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    Save changes
                </button>
                <a href="{{ route('user.profile.show') }}" class="inline-flex items-center px-4 py-2.5 rounded-xl text-sm font-semibold text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 transition-colors">Cancel</a>
            </div>
        </form>

        <!-- Account Management Section -->
        <div class="mt-12 pt-8 border-t border-slate-200 space-y-6">
            <h3 class="text-lg font-semibold text-slate-900">Account Settings</h3>
            
            <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
                @include('profile.partials.data-download-form')
            </div>

            <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
                @include('profile.partials.delete-user-form')
            </div>
        </div>
    </div>
@endsection