@php
    $isEdit = $record && $record->exists;
@endphp

<div class="space-y-8">
    <x-form-section title="A. Maklumat jenazah" description="Nama dan jantina mengikut rekod pengebumian.">
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div>
                <x-input-label for="nama" value="Nama *" />
                <x-text-input id="nama" name="nama" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" :value="old('nama', $record->nama)" required placeholder="Nama penuh jenazah" />
                <x-input-error :messages="$errors->get('nama')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="jantina" value="Jantina *" />
                <select id="jantina" name="jantina" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" required>
                    <option value="">Pilih</option>
                    <option value="lelaki" @selected(old('jantina', $record->jantina) === 'lelaki')>Lelaki</option>
                    <option value="perempuan" @selected(old('jantina', $record->jantina) === 'perempuan')>Perempuan</option>
                    <option value="tidak_dinyatakan" @selected(old('jantina', $record->jantina ?? 'tidak_dinyatakan') === 'tidak_dinyatakan')>Tidak dinyatakan</option>
                </select>
                <x-input-error :messages="$errors->get('jantina')" class="mt-2" />
            </div>
        </div>
    </x-form-section>

    <x-form-section title="B. Maklumat lokasi kubur" description="Pilih kawasan Barzakh dan lot yang sah.">
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div>
                <x-input-label for="barzakh_id" value="Barzakh *" />
                <select id="barzakh_id" name="barzakh_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" required data-available-lots-template="{{ route('barzakhs.available-lots', ['barzakh' => 'BARZAKH_ID']) }}">
                    <option value="">Pilih</option>
                    @foreach ($barzakhs as $b)
                        <option value="{{ $b->id }}" @selected((string) old('barzakh_id', $record->barzakh_id) === (string) $b->id)>
                            {{ $b->name }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-xs text-gray-500">Pilih kumpulan kawasan kubur.</p>
                <x-input-error :messages="$errors->get('barzakh_id')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="lot_id" value="Lot" />
                <select id="lot_id" name="lot_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" data-selected="{{ old('lot_id', $record->lot_id) }}">
                    <option value="">— Tiada —</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">Hanya lot kosong atau rizab akan dipaparkan.</p>
                <x-input-error :messages="$errors->get('lot_id')" class="mt-2" />
            </div>

            <div class="md:col-span-2">
                <x-input-label for="lot_no" value="Lot manual / rekod lama" />
                <x-text-input id="lot_no" name="lot_no" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" :value="old('lot_no', $record->lot_no)" placeholder="Contoh: A-12" />
                <p class="mt-1 text-xs text-gray-500">Untuk rekod lama yang belum dipetakan kepada lot sistem.</p>
                <x-input-error :messages="$errors->get('lot_no')" class="mt-2" />
            </div>
        </div>
    </x-form-section>

    <x-form-section title="C. Tarikh & catatan" description="Tarikh kebumi akan menentukan tahun rekod.">
        <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
            <div>
                <x-input-label for="tarikh_kebumi" value="Tarikh kebumi" />
                <x-text-input id="tarikh_kebumi" name="tarikh_kebumi" type="date" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" :value="old('tarikh_kebumi', optional($record->tarikh_kebumi)->format('Y-m-d'))" />
                <x-input-error :messages="$errors->get('tarikh_kebumi')" class="mt-2" />
            </div>

            <div>
                <x-input-label for="tahun" value="Tahun" />
                <x-text-input id="tahun" name="tahun" type="number" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500" :value="old('tahun', $record->tahun)" />
                <p class="mt-1 text-xs text-gray-500">Jika tarikh kebumi diisi, tahun akan dikemaskini secara automatik.</p>
                <x-input-error :messages="$errors->get('tahun')" class="mt-2" />
            </div>

            <div class="md:col-span-2">
                <x-input-label for="catatan" value="Catatan" />
                <textarea id="catatan" name="catatan" rows="4" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500">{{ old('catatan', $record->catatan) }}</textarea>
                <x-input-error :messages="$errors->get('catatan')" class="mt-2" />
            </div>
        </div>
    </x-form-section>
</div>

<script>
    (function () {
        const barzakhSelect = document.getElementById('barzakh_id');
        const lotSelect = document.getElementById('lot_id');
        const tarikhInput = document.getElementById('tarikh_kebumi');
        const tahunInput = document.getElementById('tahun');

        function setYearFromDate() {
            if (!tarikhInput || !tahunInput) return;
            if (!tarikhInput.value) return;
            const y = new Date(tarikhInput.value).getFullYear();
            if (!Number.isNaN(y)) tahunInput.value = y;
        }

        async function loadLots() {
            if (!barzakhSelect || !lotSelect) return;

            const id = barzakhSelect.value;
            lotSelect.innerHTML = '<option value="">— Tiada —</option>';
            if (!id) return;

            const template = barzakhSelect.getAttribute('data-available-lots-template');
            if (!template) return;

            const url = template.replace('BARZAKH_ID', id);
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            if (!res.ok) return;

            const json = await res.json();
            const selected = lotSelect.getAttribute('data-selected');

            (json.data || []).forEach((lot) => {
                const opt = document.createElement('option');
                opt.value = lot.id;
                opt.textContent = lot.status === 'rizab' ? `${lot.lot_no} (rizab)` : lot.lot_no;
                if (selected && String(selected) === String(lot.id)) opt.selected = true;
                lotSelect.appendChild(opt);
            });
        }

        if (tarikhInput) tarikhInput.addEventListener('change', setYearFromDate);
        if (barzakhSelect) barzakhSelect.addEventListener('change', function () {
            lotSelect.setAttribute('data-selected', '');
            loadLots();
        });

        setYearFromDate();
        loadLots();
    })();
</script>