{{-- Request Type --}}
<div class="row mb-3">
    <div class="col-md-6">
        <label class="form-label">{{ __('dashboard.request_type') }} <span class="text-danger">*</span></label>
        <select name="request_type" class="form-select" required>
            <option value="">{{ __('dashboard.select') }}</option>
            @foreach(\App\Enums\ContractRequestTypeEnum::options() as $option)
                <option value="{{ $option['value'] }}" {{ old('request_type', $contract?->request_type) == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
            @endforeach
        </select>
    </div>
</div>

{{-- Personal Info --}}
<h6 class="mb-3 mt-4 text-primary"><i class="ri-user-line me-1"></i> {{ __('dashboard.personal_info') }}</h6>
<div class="row">
    <x-forms col="4" label="{{ __('dashboard.name') }}" name="name" :value="$contract?->name ?? ''" required />
    <x-forms col="4" label="{{ __('dashboard.phone') }}" name="phone" :value="$contract?->phone ?? ''" required />
    <x-forms col="4" label="{{ __('dashboard.nationality') }}" name="nationality" :value="$contract?->nationality ?? ''" />
</div>
<div class="row">
    <x-date col="4" label="{{ __('dashboard.date_of_birth') }}" name="date_of_birth" :value="$contract?->date_of_birth ?? ''" />
    <div class="col-md-4">
        <label class="form-label">{{ __('dashboard.gender') }} <span class="text-danger">*</span></label>
        <select name="gender" class="form-select" required>
            <option value="">{{ __('dashboard.select') }}</option>
            @foreach(\App\Enums\PersonGenderEnum::options() as $option)
                <option value="{{ $option['value'] }}" {{ old('gender', $contract?->gender) == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
            @endforeach
        </select>
    </div>
    <x-forms col="4" label="{{ __('dashboard.job') }}" name="job" :value="$contract?->job ?? ''" />
</div>
<div class="row">
    <x-forms col="4" label="{{ __('dashboard.email') }}" name="email" type="email" :value="$contract?->email ?? ''" />
</div>

{{-- Address --}}
<h6 class="mb-3 mt-4 text-primary"><i class="ri-map-pin-line me-1"></i> {{ __('dashboard.address') }}</h6>
<div class="row">
    <x-forms col="4" label="{{ __('dashboard.apartment') }}" name="apartment" :value="$contract?->apartment ?? ''" />
    <x-forms col="4" label="{{ __('dashboard.area') }}" name="area" :value="$contract?->area ?? ''" />
    <x-forms col="4" label="{{ __('dashboard.governorate') }}" name="governorate" :value="$contract?->governorate ?? ''" />
</div>

{{-- Required Attachments --}}
<h6 class="mb-3 mt-4 text-primary"><i class="ri-attachment-line me-1"></i> {{ __('dashboard.required_attachments') }}</h6>
<div class="row mb-3">
    @foreach(\App\Enums\RequiredAttachmentEnum::options() as $option)
        <div class="col-md-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="attachments[]" value="{{ $option['value'] }}" id="attachment_{{ $option['value'] }}"
                    {{ in_array($option['value'], old('attachments', $contract?->attachments ?? [])) ? 'checked' : '' }}>
                <label class="form-check-label" for="attachment_{{ $option['value'] }}">{{ $option['label'] }}</label>
            </div>
        </div>
    @endforeach
</div>

{{-- Subscription --}}
<h6 class="mb-3 mt-4 text-primary"><i class="ri-vip-crown-line me-1"></i> {{ __('dashboard.subscription') }}</h6>
<div class="row">
    <div class="col-md-4">
        <label class="form-label">{{ __('dashboard.subscription_type') }} <span class="text-danger">*</span></label>
        <select name="subscription_type_id" class="form-select" required>
            <option value="">{{ __('dashboard.select') }}</option>
            @foreach($subscriptionTypes as $type)
                <option value="{{ $type->id }}" {{ old('subscription_type_id', $contract?->subscription_type_id) == $type->id ? 'selected' : '' }}>{{ $type->getTranslation('name', app()->getLocale()) }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-4">
        <label class="form-label">{{ __('dashboard.subscription_duration') }} <span class="text-danger">*</span></label>
        <select name="subscription_duration_id" class="form-select" required>
            <option value="">{{ __('dashboard.select') }}</option>
            @foreach($subscriptionDurations as $duration)
                <option value="{{ $duration->id }}" {{ old('subscription_duration_id', $contract?->subscription_duration_id) == $duration->id ? 'selected' : '' }}>{{ $duration->getTranslation('name', app()->getLocale()) }}</option>
            @endforeach
        </select>
    </div>
    <x-date col="4" label="{{ __('dashboard.submission_date') }}" name="submission_date" :value="$contract?->submission_date ?? ''" />
</div>

{{-- Status --}}
<div class="row mt-3">
    <div class="col-md-4">
        <x-boolean-input name="is_active" label="{{ __('dashboard.active') }}" :value="$contract ?? (object)['is_active' => true]" />
    </div>
</div>

{{-- Dependents --}}
<h6 class="mb-3 mt-4 text-primary"><i class="ri-group-line me-1"></i> {{ __('dashboard.dependents') }}</h6>
<div id="dependents-container">
    @php
        $dependents = old('dependents', $contract?->dependents?->toArray() ?? []);
    @endphp
    @forelse($dependents as $index => $dep)
        <div class="dependent-row card card-body mb-2">
            <div class="row align-items-end">
                <x-forms col="3" label="{{ __('dashboard.name') }}" name="dependents[{{ $index }}][name]" :value="$dep['name'] ?? ''" />
                <x-forms col="2" label="{{ __('dashboard.phone') }}" name="dependents[{{ $index }}][phone]" :value="$dep['phone'] ?? ''" />
                <x-forms col="2" label="{{ __('dashboard.relationship') }}" name="dependents[{{ $index }}][relationship]" :value="$dep['relationship'] ?? ''" />
                <div class="col-md-2">
                    <label class="form-label">{{ __('dashboard.gender') }}</label>
                    <select name="dependents[{{ $index }}][gender]" class="form-select">
                        <option value="">{{ __('dashboard.select') }}</option>
                        @foreach(\App\Enums\PersonGenderEnum::options() as $option)
                            <option value="{{ $option['value'] }}" {{ ($dep['gender'] ?? '') == $option['value'] ? 'selected' : '' }}>{{ $option['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <x-date col="2" label="{{ __('dashboard.date_of_birth') }}" name="dependents[{{ $index }}][date_of_birth]" :value="$dep['date_of_birth'] ?? ''" />
                <div class="col-md-1 text-end">
                    <button type="button" class="btn btn-sm btn-soft-danger remove-dependent"><i class="ri-delete-bin-line"></i></button>
                </div>
            </div>
        </div>
    @empty
    @endforelse
</div>
<button type="button" id="add-dependent" class="btn btn-sm btn-soft-primary mb-3">
    <i class="ri-add-line me-1"></i> {{ __('dashboard.add_dependent') }}
</button>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let dependentIndex = {{ count($dependents) }};
    const maxDependents = 4;
    const container = document.getElementById('dependents-container');
    const addBtn = document.getElementById('add-dependent');

    function updateAddButton() {
        addBtn.style.display = container.querySelectorAll('.dependent-row').length >= maxDependents ? 'none' : '';
    }

    addBtn.addEventListener('click', function() {
        if (container.querySelectorAll('.dependent-row').length >= maxDependents) return;
        const row = document.createElement('div');
        row.className = 'dependent-row card card-body mb-2';
        row.innerHTML = `
            <div class="row align-items-end">
                <div class="col-md-3"><label class="form-label">{{ __('dashboard.name') }}</label><input type="text" name="dependents[${dependentIndex}][name]" class="form-control"></div>
                <div class="col-md-2"><label class="form-label">{{ __('dashboard.phone') }}</label><input type="text" name="dependents[${dependentIndex}][phone]" class="form-control"></div>
                <div class="col-md-2"><label class="form-label">{{ __('dashboard.relationship') }}</label><input type="text" name="dependents[${dependentIndex}][relationship]" class="form-control"></div>
                <div class="col-md-2"><label class="form-label">{{ __('dashboard.gender') }}</label><select name="dependents[${dependentIndex}][gender]" class="form-select"><option value="">{{ __('dashboard.select') }}</option>@foreach(\App\Enums\PersonGenderEnum::options() as $option)<option value="{{ $option['value'] }}">{{ $option['label'] }}</option>@endforeach</select></div>
                <div class="col-md-2"><label class="form-label">{{ __('dashboard.date_of_birth') }}</label><input type="text" name="dependents[${dependentIndex}][date_of_birth]" class="form-control flatpickr-date" autocomplete="off" placeholder="{{ __('dashboard.select_date') }}..."></div>
                <div class="col-md-1 text-end"><button type="button" class="btn btn-sm btn-soft-danger remove-dependent"><i class="ri-delete-bin-line"></i></button></div>
            </div>`;
        container.appendChild(row);
        var dateInput = row.querySelector('.flatpickr-date');
        if (dateInput && typeof window.initFlatpickrDate === 'function') {
            window.initFlatpickrDate(dateInput);
        }
        dependentIndex++;
        updateAddButton();
    });

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-dependent')) {
            e.target.closest('.dependent-row').remove();
            updateAddButton();
        }
    });

    updateAddButton();
});
</script>
@endpush