@php
    $item = $item ?? null;
    $suratPenerimaanDownloadUrl = $item?->suratPenerimaanDownloadUrl();
@endphp

<div class="form-section">
    <span class="form-section__title">Informasi Kepala Desa</span>
    <div class="row">
        <div class="form-group col-md-6">
            <label for="nama_lengkap">Nama Lengkap</label>
            <input
                type="text"
                id="nama_lengkap"
                name="nama_lengkap"
                class="form-control @error('nama_lengkap') is-invalid @enderror"
                value="{{ old('nama_lengkap', $item->nama_lengkap ?? '') }}"
                placeholder="Masukkan nama lengkap kepala desa"
            >
            @error('nama_lengkap') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="form-group col-md-6">
            <label for="no_hp">No HP / WhatsApp</label>
            <input
                type="text"
                id="no_hp"
                name="no_hp"
                class="form-control @error('no_hp') is-invalid @enderror"
                value="{{ old('no_hp', $item->no_hp ?? '') }}"
                placeholder="08xxxxxxxxxx"
            >
            @error('no_hp') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Relasi Wilayah</span>
    <div class="row">
        <div class="form-group col-md-4">
            <label for="master_kabupaten_id">Kabupaten</label>
            <select
                id="master_kabupaten_id"
                name="master_kabupaten_id"
                class="form-control @error('master_kabupaten_id') is-invalid @enderror"
                data-searchable-select="true"
                data-search-placeholder="Cari kabupaten..."
            >
                <option value="">- Pilih Kabupaten -</option>
                @foreach($kabupatenOptions as $kabupaten)
                    <option value="{{ $kabupaten->id }}" {{ (int) old('master_kabupaten_id', $item->master_kabupaten_id ?? 0) === (int) $kabupaten->id ? 'selected' : '' }}>
                        {{ $kabupaten->nama_kabupaten }}@if($kabupaten->provinsi) - {{ $kabupaten->provinsi }}@endif
                    </option>
                @endforeach
            </select>
            @error('master_kabupaten_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="form-group col-md-4">
            <label for="master_kecamatan_id">Kecamatan</label>
            <select
                id="master_kecamatan_id"
                name="master_kecamatan_id"
                class="form-control @error('master_kecamatan_id') is-invalid @enderror"
                data-searchable-select="true"
                data-search-placeholder="Cari kecamatan..."
            >
                <option value="">- Pilih Kecamatan -</option>
                @foreach($kecamatanOptions as $kecamatan)
                    <option
                        value="{{ $kecamatan->id }}"
                        data-kabupaten-id="{{ $kecamatan->kabupaten_id }}"
                        {{ (int) old('master_kecamatan_id', $item->master_kecamatan_id ?? 0) === (int) $kecamatan->id ? 'selected' : '' }}
                    >
                        {{ $kecamatan->nama_kecamatan }} - {{ $kecamatan->kabupaten->nama_kabupaten ?? 'Kabupaten belum tersambung' }}
                    </option>
                @endforeach
            </select>
            @error('master_kecamatan_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="form-group col-md-4">
            <label for="master_desa_id">Desa</label>
            <select
                id="master_desa_id"
                name="master_desa_id"
                class="form-control @error('master_desa_id') is-invalid @enderror"
                data-searchable-select="true"
                data-search-placeholder="Cari desa..."
            >
                <option value="">- Pilih Desa -</option>
                @foreach($desaOptions as $desa)
                    <option
                        value="{{ $desa->id }}"
                        data-kecamatan-id="{{ $desa->kecamatan_id }}"
                        data-kabupaten-id="{{ $desa->kecamatan->kabupaten_id ?? '' }}"
                        {{ (int) old('master_desa_id', $item->master_desa_id ?? 0) === (int) $desa->id ? 'selected' : '' }}
                    >
                        {{ $desa->nama_desa }}
                        - {{ $desa->kecamatan->nama_kecamatan ?? 'Kecamatan belum tersambung' }}
                        - {{ $desa->kecamatan->kabupaten->nama_kabupaten ?? 'Kabupaten belum tersambung' }}
                    </option>
                @endforeach
            </select>
            @error('master_desa_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>
</div>

<div class="form-section">
    <span class="form-section__title">Surat Penerimaan</span>
    <div class="row">
        <div class="form-group col-md-8">
            <label for="surat_penerimaan">Upload Surat</label>
            <input
                type="file"
                id="surat_penerimaan"
                name="surat_penerimaan"
                class="form-control @error('surat_penerimaan') is-invalid @enderror"
                accept=".pdf,.jpg,.jpeg,.png"
            >
            @error('surat_penerimaan') <div class="invalid-feedback">{{ $message }}</div> @enderror
            <small class="text-muted">Format file yang didukung: PDF, JPG, JPEG, PNG. Maksimal 5MB.</small>
        </div>

        <div class="form-group col-md-4">
            <label>Dokumen Saat Ini</label>
            <div class="border rounded p-3 h-100 d-flex align-items-center">
                @if(!empty($suratPenerimaanDownloadUrl))
                    <a href="{{ $suratPenerimaanDownloadUrl }}" class="btn btn-outline-primary rounded-pill">
                        <i class="fas fa-file-alt mr-1"></i> Lihat Surat
                    </a>
                @else
                    <span class="text-muted small">Belum ada surat yang diunggah.</span>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="form-section mb-0">
    <span class="form-section__title">Status Data</span>
    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', $item->is_active ?? true) ? 'checked' : '' }}>
        <label class="custom-control-label" for="is_active">Aktif</label>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const kabupatenSelect = document.getElementById('master_kabupaten_id');
        const kecamatanSelect = document.getElementById('master_kecamatan_id');
        const desaSelect = document.getElementById('master_desa_id');

        if (!kabupatenSelect || !kecamatanSelect || !desaSelect) {
            return;
        }

        function filterOptions(select, predicate) {
            Array.from(select.options).forEach(function (option) {
                if (!option.value) {
                    option.disabled = false;
                    option.hidden = false;
                    return;
                }

                const allowed = predicate(option);
                option.disabled = !allowed;
                option.hidden = !allowed;
            });
        }

        function resetIfInvalid(select) {
            const selectedOption = select.options[select.selectedIndex];
            if (selectedOption && selectedOption.value && (selectedOption.disabled || selectedOption.hidden)) {
                select.value = '';
            }

            select.dispatchEvent(new Event('change', { bubbles: true }));
        }

        function applyKecamatanFilter() {
            const kabupatenId = kabupatenSelect.value;

            filterOptions(kecamatanSelect, function (option) {
                return !kabupatenId || option.dataset.kabupatenId === kabupatenId;
            });

            resetIfInvalid(kecamatanSelect);
        }

        function applyDesaFilter() {
            const kecamatanId = kecamatanSelect.value;

            filterOptions(desaSelect, function (option) {
                return !kecamatanId || option.dataset.kecamatanId === kecamatanId;
            });

            resetIfInvalid(desaSelect);
        }

        kabupatenSelect.addEventListener('change', function () {
            applyKecamatanFilter();
            applyDesaFilter();
        });

        kecamatanSelect.addEventListener('change', applyDesaFilter);

        applyKecamatanFilter();
        applyDesaFilter();
    });
</script>