@extends('user.layouts.app')

@section('content')
    <div class="max-w-3xl mx-auto">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-slate-800">My Profile</h1>
                <p class="text-slate-500 text-sm mt-1">Complete your profile for better predictions.</p>
            </div>
        </div>

        @if(session('success'))
            <div class="bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6 flex items-center gap-2">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-100 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6">
                <ul class="list-disc list-inside text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6"
            x-data="{ 
                        maritalStatus: '{{ old('marital_status', $user->detail->marital_status ?? '') }}',
                        country: '{{ old('country_id', $user->detail->country_id ?? '') }}',
                        fetchStates() {
                            if(!this.country) return;
                            fetch('/api/states/' + this.country)
                                .then(res => res.json())
                                .then(data => {
                                    let stateSelect = document.getElementById('state_id');
                                    stateSelect.innerHTML = '<option value=\'\'>Select State</option>';
                                    data.forEach(state => {
                                        let selected = state.id == '{{ old('state_id', $user->detail->state_id ?? '') }}' ? 'selected' : '';
                                        stateSelect.innerHTML += `<option value='${state.id}' ${selected}>${state.name}</option>`;
                                    });
                                });
                        }
                    }" x-init="fetchStates()">
            @csrf
            @method('PUT')

            <!-- Basic Details Card -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
                <div class="h-24 bg-gradient-to-r from-yellow-400 to-orange-500"></div>
                <div class="px-8 pb-8 relative">
                    <div class="absolute -top-12 left-8">
                        <div class="relative w-24 h-24 rounded-2xl p-1 shadow-lg bg-white group cursor-pointer"
                            x-data="{ avatarPreview: null }" onclick="document.getElementById('avatar').click()">
                            <div
                                class="w-full h-full bg-slate-100 rounded-xl overflow-hidden flex items-center justify-center relative">
                                <!-- Default Initials or Existing Avatar -->
                                <template x-if="!avatarPreview">
                                    @if($user->avatar)
                                        <img src="{{ asset('storage/' . $user->avatar) }}" class="w-full h-full object-cover">
                                    @else
                                        <div class="text-slate-400 font-bold text-3xl uppercase">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                    @endif
                                </template>

                                <!-- Preview of New Upload -->
                                <template x-if="avatarPreview">
                                    <img :src="avatarPreview" class="w-full h-full object-cover">
                                </template>

                                <!-- Overlay Icon -->
                                <div
                                    class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                    <i data-lucide="camera" class="text-white w-6 h-6"></i>
                                </div>
                            </div>
                        </div>
                        <input type="file" name="avatar" id="avatar" class="hidden" accept="image/*"
                            @change="avatarPreview = URL.createObjectURL($event.target.files[0])">
                        <p class="text-[10px] text-slate-400 mt-2 font-bold ml-1">Change Photo</p>
                    </div>

                    <div class="mt-16 space-y-6">
                        <h3 class="text-lg font-bold text-slate-800 border-b border-slate-100 pb-2">Basic Information</h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Full
                                    Name <span class="text-red-500">*</span></label>
                                <input type="text" name="name" value="{{ old('name', $user->name) }}"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                    required>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Mobile
                                    Number <span class="text-red-500">*</span></label>
                                <input type="tel" name="mobile" value="{{ old('mobile', $user->mobile) }}"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                    required>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Email
                                    Address <span class="text-red-500">*</span></label>
                                <input type="email" name="email" value="{{ old('email', $user->email) }}"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                    required>
                            </div>

                            <div>
                                <label
                                    class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Gender</label>
                                <select name="gender"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                                    <option value="">Select Gender</option>
                                    <option value="Male" {{ old('gender', $user->detail->gender ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ old('gender', $user->detail->gender ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                                    <option value="Other" {{ old('gender', $user->detail->gender ?? '') == 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Marital
                                    Status</label>
                                <select name="marital_status" x-model="maritalStatus"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                                    <option value="">Select Status</option>
                                    <option value="Single">Single</option>
                                    <option value="Married">Married</option>
                                    <option value="Divorced">Divorced</option>
                                    <option value="Widowed">Widowed</option>
                                </select>
                            </div>

                            <!-- Spouse Details (Conditional) -->
                            <template x-if="maritalStatus === 'Married'">
                                <div
                                    class="col-span-full grid grid-cols-1 md:grid-cols-2 gap-6 bg-yellow-50 p-6 rounded-xl border border-yellow-100">
                                    <div class="col-span-full">
                                        <h4 class="text-sm font-bold text-yellow-800 mb-2">Spouse Details</h4>
                                    </div>
                                    <div>
                                        <label
                                            class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Spouse
                                            Name</label>
                                        <input type="text" name="spouse_name"
                                            value="{{ old('spouse_name', $user->detail->spouse_name ?? '') }}"
                                            class="w-full bg-white border border-yellow-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                                    </div>
                                    <div>
                                        <label
                                            class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Spouse
                                            DOB</label>
                                        <input type="date" name="spouse_dob"
                                            value="{{ old('spouse_dob', $user->detail->spouse_dob ?? '') }}"
                                            class="w-full bg-white border border-yellow-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                                    </div>
                                </div>
                            </template>

                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Current
                                    Occupation</label>
                                <select name="occupation"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                                    <option value="">Select Occupation</option>
                                    @foreach($occupations as $occupation)
                                        <option value="{{ $occupation->name }}" {{ old('occupation', $user->detail->occupation ?? '') == $occupation->name ? 'selected' : '' }}>
                                            {{ $occupation->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-span-full">
                                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">About
                                    Me</label>
                                <textarea name="about_me" rows="3"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                    placeholder="Share a bit about yourself...">{{ old('about_me', $user->detail->about_me ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Birth & Location Details -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8 space-y-6">
                <h3 class="text-lg font-bold text-slate-800 border-b border-slate-100 pb-2">Birth & Location Details</h3>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Date of
                            Birth</label>
                        <input type="date" name="dob" value="{{ old('dob', $user->detail->dob ?? '') }}"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Time of
                            Birth</label>
                        <input type="time" name="tob"
                            value="{{ old('tob', isset($user->detail->tob) ? \Carbon\Carbon::parse($user->detail->tob)->format('H:i') : '') }}"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Place of
                            Birth</label>
                        <input type="text" name="pob" value="{{ old('pob', $user->detail->pob ?? '') }}"
                            placeholder="City, Country"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Country</label>
                        <select name="country_id" x-model="country" @change="fetchStates()"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                            <option value="">Select Country</option>
                            @foreach($countries as $c)
                                <option value="{{ $c->id }}" {{ old('country_id', $user->detail->country_id ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">State</label>
                        <select name="state_id" id="state_id"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                            <option value="">Select State</option>
                            <!-- Populated by JS -->
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">City</label>
                        <input type="text" name="city" value="{{ old('city', $user->detail->city ?? '') }}"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Pincode</label>
                        <input type="text" name="pincode" value="{{ old('pincode', $user->detail->pincode ?? '') }}"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                    </div>
                    <div class="col-span-full">
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Current
                            Address</label>
                        <textarea name="current_address" rows="2"
                            class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                            placeholder="Full address for transit analysis">{{ old('current_address', $user->detail->current_address ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Family Information -->
            <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8 space-y-6">
                <h3 class="text-lg font-bold text-slate-800 border-b border-slate-100 pb-2">Family Information (Optional)
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Paternal -->
                    <div class="space-y-4">
                        <h4 class="text-sm font-bold text-slate-600 uppercase tracking-widest">Parental (Paternal)</h4>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Father
                                Name</label>
                            <input type="text" name="parental_father_name"
                                value="{{ old('parental_father_name', $user->detail->parental_father_name ?? '') }}"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Mother
                                Name</label>
                            <input type="text" name="parental_mother_name"
                                value="{{ old('parental_mother_name', $user->detail->parental_mother_name ?? '') }}"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                        </div>
                    </div>

                    <!-- Maternal -->
                    <div class="space-y-4">
                        <h4 class="text-sm font-bold text-slate-600 uppercase tracking-widest">Maternal</h4>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Father
                                Name</label>
                            <input type="text" name="maternal_father_name"
                                value="{{ old('maternal_father_name', $user->detail->maternal_father_name ?? '') }}"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                        </div>
                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Mother
                                Name</label>
                            <input type="text" name="maternal_mother_name"
                                value="{{ old('maternal_mother_name', $user->detail->maternal_mother_name ?? '') }}"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none">
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4">
                <button type="submit"
                    class="bg-yellow-500 hover:bg-yellow-600 text-slate-900 font-bold py-4 px-10 rounded-xl shadow-lg shadow-yellow-500/20 transition-all transform hover:scale-105 uppercase tracking-wider">
                    Save Profile Details
                </button>
            </div>
        </form>
    </div>
@endsection