@php
    // Convert profile object to array if needed for consistent access
    if (isset($profile) && is_object($profile)) {
        $profileArray = $profile->toArray();
        // Handle date fields
        if (isset($profile->date_of_birth) && $profile->date_of_birth) {
            $profileArray['date_of_birth'] = $profile->date_of_birth->format('Y-m-d');
        }
        // Handle country relationships
        if (isset($profile->nationality_country_id)) {
            $profileArray['nationality'] = $profile->nationality_country_id;
        }
        if (isset($profile->requirement_country_id)) {
            $profileArray['requirement_country'] = $profile->requirement_country_id;
        }
        // Map profession to nature_of_job for form compatibility
        if (isset($profile->profession)) {
            $profileArray['nature_of_job'] = $profile->profession;
        }
        // Handle photo URL - accessors are not included in toArray(), so access directly
        if (isset($profile->photo_path) && $profile->photo_path) {
            $photoUrl = $profile->photo_url ?? asset('storage/' . $profile->photo_path);
            $profileArray['photo'] = $photoUrl;
            $profileArray['photo_url'] = $photoUrl;
        }
        $profile = $profileArray;
    } else {
        $profile = $profile ?? [];
        // Map profession to nature_of_job if profile is already an array
        if (isset($profile['profession']) && !isset($profile['nature_of_job'])) {
            $profile['nature_of_job'] = $profile['profession'];
        }
    }
    $wizardId = 'clientProfileWizard';
    $photoPreviewId = 'photoPreviewImage';
    $currentPhoto = $profile['photo_url'] ?? $profile['photo'] ?? null;
@endphp

<style>
    .wizard-shell {
        border-radius: 18px;
        width: 100%;
        margin: 0;
    }
    .wizard-hero {
        border: 0;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 18px 22px;
    }
    .wizard-hero h3 { margin: 0; font-weight: 700; }
    .wizard-hero p { margin: 4px 0 0; opacity: 0.9; }
    .wizard-step-nav {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 10px;
        margin: 18px 0 18px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wizard-step-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        color: #374151;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.82rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .wizard-step-chip.active {
        border-color: #2563eb;
        background: #dbeafe;
        color: #1d4ed8;
        font-weight: 600;
    }
    .wizard-step-pane {
        background: #fff;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        padding: 18px 18px 16px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    }
    /* Force only the active step to be visible (overrides Bootstrap/Tailwind hidden/d-none) */
    #clientProfileWizard .wizard-step {
        display: none !important;
    }
    #clientProfileWizard .wizard-step.wizard-step-visible {
        display: block !important;
    }
    .wizard-panel-title {
        display: none;
    }
    .wizard-actions {
        border-top: 1px solid #e5e7eb;
        margin-top: 18px;
        padding-top: 16px;
    }

    .wizard-actions .btn {
        min-width: 120px;
    }

    @media (max-width: 767.98px) {
        .wizard-step-nav {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Required field indicator */
    label.required::after {
        content: " *";
        color: #dc3545;
        font-weight: bold;
        margin-left: 2px;
    }
</style>

<div class="card border-0 shadow-sm overflow-hidden wizard-shell">
    <div class="card-header wizard-hero">
        <div>
            <h3>
                @php
                    $isEdit = isset($profile) && ((is_object($profile) && property_exists($profile, 'id') && $profile->id) || (is_array($profile) && !empty($profile['id'])));
                @endphp
                @if($isEdit)
                    Edit Client Profile
                @else
                    New Client Profile
                @endif
            </h3>
            <p class="mb-0 text-sm">
                @if($isEdit)
                    Update the matrimony profile details below.
                @else
                    Create a detailed matrimony profile in a few clean, organized steps.
                @endif
            </p>
        </div>
    </div>

    <div class="card-body bg-light">
        <div class="progress mb-3" style="height: 8px;">
            <div class="progress-bar bg-primary" role="progressbar" id="wizardProgressBar" style="width: 25%;"></div>
        </div>

        <div class="wizard-step-nav">
            <button type="button" class="wizard-step-chip active" data-step-chip="1"><i class="fas fa-id-card mr-1"></i> Basic Information</button>
            <button type="button" class="wizard-step-chip" data-step-chip="2"><i class="fas fa-user mr-1"></i> Personal Information</button>
            <button type="button" class="wizard-step-chip" data-step-chip="3"><i class="fas fa-briefcase mr-1"></i> Education & Employment</button>
            <button type="button" class="wizard-step-chip" data-step-chip="4"><i class="fas fa-users mr-1"></i> Family Details</button>
            <button type="button" class="wizard-step-chip" data-step-chip="5"><i class="fas fa-heart mr-1"></i> Partner Requirements</button>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div id="{{ $wizardId }}">
                    <div class="wizard-step wizard-step-pane" data-step="1">
                        <h5 class="wizard-panel-title">Step 1 – Basic Information</h5>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="first_name" class="block text-sm font-medium text-gray-700 mb-2 required">First Name</label>
                                <input
                                    type="text"
                                    id="first_name"
                                    name="first_name"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                                    value="{{ old('first_name', $profile['first_name'] ?? '') }}"
                                    required
                                >
                            </div>
                            <div>
                                <label for="last_name" class="block text-sm font-medium text-gray-700 mb-2 required">Last Name</label>
                                <input
                                    type="text"
                                    id="last_name"
                                    name="last_name"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
                                    value="{{ old('last_name', $profile['last_name'] ?? '') }}"
                                    required
                                >
                            </div>
                            <div>
                                <label for="marital_status" class="block text-sm font-medium text-gray-700 mb-2 required">Marital Status</label>
                                <select id="marital_status" name="marital_status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('marital_status') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (['Single', 'Married', 'Divorced', 'Widowed', 'Separated'] as $option)
                                        <option value="{{ $option }}" @selected(old('marital_status', $profile['marital_status'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('marital_status') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="photo" class="block text-sm font-medium text-gray-700 mb-2">Profile Photo</label>
                                <div class="relative">
                                    <input 
                                        type="file" 
                                        id="photo" 
                                        name="photo" 
                                        accept=".jpg,.jpeg,.png,.webp" 
                                        class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary file:text-white hover:file:bg-primary-dark file:cursor-pointer @error('photo') border-red-500 @enderror"
                                    >
                                </div>
                                <p class="mt-1 text-xs text-gray-500">Allowed: JPG, PNG, WEBP (max 2MB)</p>
                                @error('photo') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                <div class="mt-3">
                                    <img
                                        id="{{ $photoPreviewId }}"
                                        src="{{ $currentPhoto ?: '#' }}"
                                        alt="Selected profile preview"
                                        class="w-full max-w-xs rounded-lg border border-gray-300 {{ $currentPhoto ? '' : 'hidden' }}"
                                        style="max-height: 220px; object-fit: cover;"
                                    >
                                    @if (! $currentPhoto)
                                        <p class="text-gray-500 text-sm mt-2" id="photoPreviewHint">No image selected yet.</p>
                                    @endif
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="gender" class="block text-sm font-medium text-gray-700 mb-2 required">Gender</label>
                                    <select id="gender" name="gender" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('gender') border-red-500 @enderror" required>
                                        <option value="">Select</option>
                                        @foreach (['Male', 'Female', 'Other'] as $option)
                                            <option value="{{ $option }}" @selected(old('gender', $profile['gender'] ?? '') === $option)>{{ $option }}</option>
                                        @endforeach
                                    </select>
                                    @error('gender') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label for="date_of_birth" class="block text-sm font-medium text-gray-700 mb-2 required">Date of Birth</label>
                                    <input
                                        type="date"
                                        id="date_of_birth"
                                        name="date_of_birth"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('date_of_birth') border-red-500 @enderror"
                                        value="{{ old('date_of_birth', $profile['date_of_birth'] ?? '') }}"
                                        required
                                    >
                                    @error('date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="name" name="name" value="{{ old('name', $profile['name'] ?? '') }}">
                    </div>

                    <div class="wizard-step wizard-step-pane d-none" data-step="2">
                        <h5 class="wizard-panel-title">Step 2 – Personal Information</h5>

                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                            <div>
                                <label for="religion" class="block text-sm font-medium text-gray-700 mb-2 required">Religion</label>
                                <select id="religion" name="religion" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('religion') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupReligions ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('religion', $profile['religion'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('religion') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="sect" class="block text-sm font-medium text-gray-700 mb-2">Sect</label>
                                <select id="sect" name="sect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('sect') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupSects ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('sect', $profile['sect'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('sect') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="caste" class="block text-sm font-medium text-gray-700 mb-2 required">Caste</label>
                                <select id="caste" name="caste" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('caste') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupCastes ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('caste', $profile['caste'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('caste') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="ethnicity" class="block text-sm font-medium text-gray-700 mb-2">Ethnicity</label>
                                <select id="ethnicity" name="ethnicity" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('ethnicity') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupEthnicities ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('ethnicity', $profile['ethnicity'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('ethnicity') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="height" class="block text-sm font-medium text-gray-700 mb-2 required">Height</label>
                                <select id="height" name="height" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('height') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupHeights ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('height', $profile['height'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('height') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="nationality" class="block text-sm font-medium text-gray-700 mb-2 required">Country of Current Residence</label>
                                <select id="nationality" name="nationality" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('nationality') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupCountries ?? []) as $countryOption)
                                        <option
                                            value="{{ $countryOption->id }}"
                                            @selected((string) old('nationality', $profile['nationality'] ?? '') === (string) $countryOption->id)
                                        >
                                            {{ $countryOption->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('nationality') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-2 required">City of Current Residence</label>
                                <select id="city" name="city" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('city') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupCities ?? []) as $cityOption)
                                        <option
                                            value="{{ $cityOption->name }}"
                                            data-country-id="{{ $cityOption->country_id }}"
                                            @selected(old('city', $profile['city'] ?? '') === $cityOption->name)
                                        >
                                            {{ $cityOption->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('city') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="house_size" class="block text-sm font-medium text-gray-700 mb-2 required">Size of House</label>
                                <select id="house_size" name="house_size" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('house_size') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupHouseSizes ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('house_size', $profile['house_size'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('house_size') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="residence_type" class="block text-sm font-medium text-gray-700 mb-2">Residence Type</label>
                                <select id="residence_type" name="residence_type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('residence_type') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    <option value="House" @selected(old('residence_type', $profile['residence_type'] ?? '') === 'House')>House</option>
                                    <option value="Flat" @selected(old('residence_type', $profile['residence_type'] ?? '') === 'Flat')>Flat</option>
                                    <option value="Portion" @selected(old('residence_type', $profile['residence_type'] ?? '') === 'Portion')>Portion</option>
                                </select>
                                @error('residence_type') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="home_ownership" class="block text-sm font-medium text-gray-700 mb-2">Home Ownership</label>
                                <select id="home_ownership" name="home_ownership" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('home_ownership') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    <option value="Own" @selected(old('home_ownership', $profile['home_ownership'] ?? '') === 'Own')>Own</option>
                                    <option value="Rent" @selected(old('home_ownership', $profile['home_ownership'] ?? '') === 'Rent')>Rent</option>
                                    <option value="Family" @selected(old('home_ownership', $profile['home_ownership'] ?? '') === 'Family')>Family</option>
                                    <option value="Other" @selected(old('home_ownership', $profile['home_ownership'] ?? '') === 'Other')>Other</option>
                                </select>
                                @error('home_ownership') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-2">Address</label>
                            <textarea
                                id="address"
                                name="address"
                                rows="2"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors resize-y @error('address') border-red-500 @enderror"
                            >{{ old('address', $profile['address'] ?? '') }}</textarea>
                            @error('address') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <div class="wizard-step wizard-step-pane d-none" data-step="3">
                        <h5 class="wizard-panel-title">Step 3 – Education & Employment</h5>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="qualification" class="block text-sm font-medium text-gray-700 mb-2 required">Education</label>
                                <select id="qualification" name="qualification" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('qualification') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupEducationLevels ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('qualification', $profile['qualification'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('qualification') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="institute" class="block text-sm font-medium text-gray-700 mb-2">Institute</label>
                                <select id="institute" name="institute" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('institute') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupInstitutes ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('institute', $profile['institute'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('institute') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="nature_of_job" class="block text-sm font-medium text-gray-700 mb-2 required">Profession</label>
                                <select id="nature_of_job" name="nature_of_job" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('nature_of_job') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupProfessions ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('nature_of_job', $profile['nature_of_job'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('nature_of_job') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="employment_status" class="block text-sm font-medium text-gray-700 mb-2 required">Employment Status</label>
                                <select id="employment_status" name="employment_status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('employment_status') border-red-500 @enderror" required>
                                    <option value="">Select</option>
                                    @foreach (($lookupEmploymentStatuses ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('employment_status', $profile['employment_status'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('employment_status') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="income" class="block text-sm font-medium text-gray-700 mb-2">Monthly Income</label>
                                <select id="income" name="income" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('income') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupMonthlyIncomes ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('income', $profile['income'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('income') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>
                    </div>

                    <div class="wizard-step wizard-step-pane d-none" data-step="4">
                        <h5 class="wizard-panel-title">Step 4 – Family Details</h5>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="father_occupation" class="block text-sm font-medium text-gray-700 mb-2">Father's Occupation</label>
                                <input
                                    type="text"
                                    id="father_occupation"
                                    name="father_occupation"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('father_occupation') border-red-500 @enderror"
                                    value="{{ old('father_occupation', $profile['father_occupation'] ?? '') }}"
                                >
                                @error('father_occupation') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="mother_occupation" class="block text-sm font-medium text-gray-700 mb-2">Mother's Occupation</label>
                                <input
                                    type="text"
                                    id="mother_occupation"
                                    name="mother_occupation"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('mother_occupation') border-red-500 @enderror"
                                    value="{{ old('mother_occupation', $profile['mother_occupation'] ?? '') }}"
                                >
                                @error('mother_occupation') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label for="siblings_count" class="block text-sm font-medium text-gray-700 mb-2">Number of Siblings</label>
                                <input
                                    type="number"
                                    id="siblings_count"
                                    name="siblings_count"
                                    min="0"
                                    max="20"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('siblings_count') border-red-500 @enderror"
                                    value="{{ old('siblings_count', $profile['siblings_count'] ?? '') }}"
                                >
                                @error('siblings_count') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="siblings_married_count" class="block text-sm font-medium text-gray-700 mb-2">Number of Siblings Married</label>
                                <input
                                    type="number"
                                    id="siblings_married_count"
                                    name="siblings_married_count"
                                    min="0"
                                    max="20"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('siblings_married_count') border-red-500 @enderror"
                                    value="{{ old('siblings_married_count', $profile['siblings_married_count'] ?? '') }}"
                                >
                                @error('siblings_married_count') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="family_background" class="block text-sm font-medium text-gray-700 mb-2">Family Background</label>
                            <textarea
                                id="family_background"
                                name="family_background"
                                rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors resize-y @error('family_background') border-red-500 @enderror"
                            >{{ old('family_background', $profile['family_background'] ?? '') }}</textarea>
                            @error('family_background') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>

                    </div>

                    <div class="wizard-step wizard-step-pane d-none" data-step="5">
                        <h5 class="wizard-panel-title">Step 5 – Partner Requirements</h5>

                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                            <div>
                                <label for="requirement_age_min" class="block text-sm font-medium text-gray-700 mb-2">Age Limit (Min)</label>
                                <input
                                    type="number"
                                    id="requirement_age_min"
                                    name="requirement_age_min"
                                    min="18"
                                    max="90"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('requirement_age_min') border-red-500 @enderror"
                                    value="{{ old('requirement_age_min', $profile['requirement_age_min'] ?? '') }}"
                                >
                                @error('requirement_age_min') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="requirement_age_max" class="block text-sm font-medium text-gray-700 mb-2">Age Limit (Max)</label>
                                <input
                                    type="number"
                                    id="requirement_age_max"
                                    name="requirement_age_max"
                                    min="18"
                                    max="90"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors @error('requirement_age_max') border-red-500 @enderror"
                                    value="{{ old('requirement_age_max', $profile['requirement_age_max'] ?? '') }}"
                                >
                                @error('requirement_age_max') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="requirement_height" class="block text-sm font-medium text-gray-700 mb-2">Height</label>
                                <select id="requirement_height" name="requirement_height" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('requirement_height') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupHeights ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('requirement_height', $profile['requirement_height'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('requirement_height') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="requirement_country" class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                                <select id="requirement_country" name="requirement_country" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('requirement_country') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupCountries ?? []) as $countryOption)
                                        <option
                                            value="{{ $countryOption->id }}"
                                            @selected((string) old('requirement_country', $profile['requirement_country'] ?? '') === (string) $countryOption->id)
                                        >
                                            {{ $countryOption->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('requirement_country') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <label for="requirement_city" class="block text-sm font-medium text-gray-700 mb-2">City</label>
                                <select id="requirement_city" name="requirement_city" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('requirement_city') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupCities ?? []) as $cityOption)
                                        <option
                                            value="{{ $cityOption->name }}"
                                            data-country-id="{{ $cityOption->country_id }}"
                                            @selected(old('requirement_city', $profile['requirement_city'] ?? '') === $cityOption->name)
                                        >
                                            {{ $cityOption->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('requirement_city') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="requirement_sect" class="block text-sm font-medium text-gray-700 mb-2">Sect</label>
                                <select id="requirement_sect" name="requirement_sect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('requirement_sect') border-red-500 @enderror">
                                    <option value="">Select</option>
                                    @foreach (($lookupSects ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('requirement_sect', $profile['requirement_sect'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('requirement_sect') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label for="requirement_marital_status" class="block text-sm font-medium text-gray-700 mb-2">Marital Status</label>
                                <select
                                    id="requirement_marital_status"
                                    name="requirement_marital_status"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors bg-white @error('requirement_marital_status') border-red-500 @enderror"
                                >
                                    <option value="">Select</option>
                                    @foreach (($lookupMaritalStatuses ?? []) as $option)
                                        <option value="{{ $option }}" @selected(old('requirement_marital_status', $profile['requirement_marital_status'] ?? '') === $option)>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('requirement_marital_status') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        <div class="mb-4 mt-2">
                            <label for="requirement_notes" class="block text-sm font-medium text-gray-700 mb-2">Additional Notes</label>
                            <textarea
                                id="requirement_notes"
                                name="requirement_notes"
                                rows="3"
                                class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-colors resize-y @error('requirement_notes') border-red-500 @enderror"
                            >{{ old('requirement_notes', $profile['requirement_notes'] ?? '') }}</textarea>
                            @error('requirement_notes') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                        </div>
                    </div>
                </div>

                <div class="flex justify-between items-center wizard-actions">
                    <button type="button" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 transition-colors font-medium" data-action="prev">
                        <i class="fas fa-arrow-left mr-1"></i> Back
                    </button>
                    <div class="flex gap-3">
                        <button type="button" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-primary-dark transition-colors font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" data-action="next">
                            Next <i class="fas fa-arrow-right ml-1"></i>
                        </button>
                        <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition-colors font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 hidden" data-action="submit">
                            <i class="fas fa-check mr-1"></i> {{ $submitLabel ?? 'Save' }}
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const wizard = document.getElementById(@json($wizardId));
        if (!wizard) return;

        const steps = Array.from(wizard.querySelectorAll('.wizard-step'));
        const nextBtn = document.querySelector('[data-action="next"]');
        const prevBtn = document.querySelector('[data-action="prev"]');
        const submitBtn = document.querySelector('[data-action="submit"]');
        const stepChips = Array.from(document.querySelectorAll('[data-step-chip]'));
        const progressBar = document.getElementById('wizardProgressBar');
        const photoInput = document.getElementById('photo');
        const previewImage = document.getElementById(@json($photoPreviewId));
        const previewHint = document.getElementById('photoPreviewHint');
        const firstNameInput = document.getElementById('first_name');
        const lastNameInput = document.getElementById('last_name');
        const fullNameInput = document.getElementById('name');
        const countrySelect = document.getElementById('nationality');
        const citySelect = document.getElementById('city');
        const requirementCountrySelect = document.getElementById('requirement_country');
        const requirementCitySelect = document.getElementById('requirement_city');
        let currentStep = 1;

        const invalidStep = steps.findIndex((step) => step.querySelector('.is-invalid'));
        if (invalidStep >= 0) {
            currentStep = invalidStep + 1;
        }

        function renderStep() {
            steps.forEach((step) => {
                const stepNumber = Number(step.dataset.step);
                if (stepNumber === currentStep) {
                    step.classList.add('wizard-step-visible');
                    step.classList.remove('hidden', 'd-none');
                } else {
                    step.classList.remove('wizard-step-visible');
                    step.classList.add('hidden', 'd-none');
                }
            });

            stepChips.forEach((chip) => {
                const chipStep = Number(chip.dataset.stepChip);
                chip.classList.toggle('active', chipStep === currentStep);
            });

            prevBtn.disabled = currentStep === 1;
            if (currentStep === 1) {
                prevBtn.classList.add('opacity-50', 'cursor-not-allowed');
            } else {
                prevBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
            nextBtn.classList.toggle('hidden', currentStep === steps.length);
            submitBtn.classList.toggle('hidden', currentStep !== steps.length);

            if (progressBar) {
                const width = (currentStep / steps.length) * 100;
                progressBar.style.width = width + '%';
            }

        }

        // Validate required fields in current step
        function validateCurrentStep() {
            const currentStepElement = steps[currentStep - 1];
            if (!currentStepElement) return true;

            const requiredFields = currentStepElement.querySelectorAll('[required]');
            let isValid = true;
            const firstInvalidField = [];

            requiredFields.forEach((field) => {
                // Remove previous error styling
                field.classList.remove('is-invalid');
                
                // Check if field is valid
                if (!field.value || (field.value && field.value.trim() === '')) {
                    isValid = false;
                    field.classList.add('is-invalid');
                    if (firstInvalidField.length === 0) {
                        firstInvalidField.push(field);
                    }
                } else {
                    // Additional validation for select fields
                    if (field.tagName === 'SELECT' && field.value === '') {
                        isValid = false;
                        field.classList.add('is-invalid');
                        if (firstInvalidField.length === 0) {
                            firstInvalidField.push(field);
                        }
                    }
                }
            });

            // Scroll to first invalid field if any
            if (!isValid && firstInvalidField.length > 0) {
                firstInvalidField[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstInvalidField[0].focus();
                
                // Show error message
                const errorMsg = document.createElement('div');
                errorMsg.className = 'alert alert-danger mt-2';
                errorMsg.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i> Please fill in all required fields before proceeding.';
                
                // Remove existing error message if any
                const existingError = currentStepElement.querySelector('.alert-danger');
                if (existingError) {
                    existingError.remove();
                }
                
                currentStepElement.insertBefore(errorMsg, currentStepElement.firstChild);
                
                // Remove error message after 5 seconds
                setTimeout(() => {
                    errorMsg.remove();
                }, 5000);
            }

            return isValid;
        }

        nextBtn?.addEventListener('click', function () {
            if (currentStep < steps.length) {
                // Validate current step before proceeding
                if (validateCurrentStep()) {
                    currentStep += 1;
                    renderStep();
                }
            }
        });

        prevBtn?.addEventListener('click', function () {
            if (currentStep > 1) {
                currentStep -= 1;
                renderStep();
            }
        });

        stepChips.forEach((chip) => {
            chip.addEventListener('click', function () {
                const targetStep = Number(chip.dataset.stepChip);
                
                // Only allow going forward if current step is valid, or allow going backward
                if (targetStep > currentStep) {
                    if (validateCurrentStep()) {
                        currentStep = targetStep;
                        renderStep();
                    }
                } else {
                    // Allow going backward without validation
                    currentStep = targetStep;
                    renderStep();
                }
            });
        });

        // Sync hidden full name from first/last
        function syncFullName() {
            if (!fullNameInput) return;
            const first = firstNameInput?.value?.trim() || '';
            const last = lastNameInput?.value?.trim() || '';
            fullNameInput.value = (first + ' ' + last).trim();
        }

        firstNameInput?.addEventListener('input', syncFullName);
        lastNameInput?.addEventListener('input', syncFullName);
        syncFullName();

        // Dependent cities based on selected country (current residence)
        const allCityOptions = citySelect
            ? Array.from(citySelect.options).filter((opt) => opt.value !== '')
            : [];

        function filterCitiesByCountry(preserveValue = false) {
            if (!citySelect) return;
            const selectedCountryId = countrySelect?.value || '';
            const currentCityValue = preserveValue ? citySelect.value : '';

            // Reset options
            citySelect.innerHTML = '<option value=\"\">Select</option>';

            allCityOptions.forEach((opt) => {
                const countryId = opt.getAttribute('data-country-id') || '';
                if (selectedCountryId && selectedCountryId === countryId) {
                    citySelect.appendChild(opt);
                }
            });

            // Restore previous value if preserving, otherwise reset
            if (preserveValue && currentCityValue) {
                citySelect.value = currentCityValue;
            } else if (!preserveValue) {
                citySelect.value = '';
            }
        }

        countrySelect?.addEventListener('change', function() {
            filterCitiesByCountry(false);
        });
        
        // On page load, filter cities but preserve the selected city value
        filterCitiesByCountry(true);

        // Dependent requirement cities based on selected requirement country
        const allRequirementCityOptions = requirementCitySelect
            ? Array.from(requirementCitySelect.options).filter((opt) => opt.value !== '')
            : [];

        function filterRequirementCitiesByCountry(preserveValue = false) {
            if (!requirementCitySelect) return;
            const selectedCountryId = requirementCountrySelect?.value || '';
            const currentCityValue = preserveValue ? requirementCitySelect.value : '';

            requirementCitySelect.innerHTML = '<option value=\"\">Select</option>';

            allRequirementCityOptions.forEach((opt) => {
                const countryId = opt.getAttribute('data-country-id') || '';
                if (selectedCountryId && selectedCountryId === countryId) {
                    requirementCitySelect.appendChild(opt);
                }
            });

            // Restore previous value if preserving, otherwise reset
            if (preserveValue && currentCityValue) {
                requirementCitySelect.value = currentCityValue;
            } else if (!preserveValue) {
                requirementCitySelect.value = '';
            }
        }

        requirementCountrySelect?.addEventListener('change', function() {
            filterRequirementCitiesByCountry(false);
        });
        
        // On page load, filter cities but preserve the selected city value
        filterRequirementCitiesByCountry(true);

        photoInput?.addEventListener('change', function (event) {
            const file = event.target.files && event.target.files[0];
            if (!file) return;

            // File label is now handled by browser default

            const reader = new FileReader();
            reader.onload = function (e) {
                const result = e.target?.result || '#';
                if (previewImage) {
                    previewImage.src = result;
                    previewImage.classList.remove('hidden');
                }
                if (previewHint) {
                    previewHint.classList.add('hidden');
                }
            };
            reader.readAsDataURL(file);
        });

        renderStep();
    })();
</script>