@extends('admin.layout')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    <h1 class="text-3xl font-bold text-gray-800 mb-10 text-center">
        Edit Data Santri {{ ucfirst($jenis) }}
    </h1>

    @if ($errors->any())
    <div class="bg-red-100 border border-red-300 text-red-700 px-4 py-3 rounded-lg mb-6 shadow-sm">
        <ul class="list-disc pl-5 space-y-1 text-sm">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <form action="{{ route('admin.santri.update', [$jenis, $santri->id]) }}" method="POST"
        class="space-y-10 bg-white shadow-lg rounded-xl p-8 border border-gray-100">
        @csrf
        @method('PUT')

        {{-- =================== DATA SANTRI =================== --}}
        <div>
            <h2 class="text-lg font-semibold text-gray-700 mb-4 border-l-4 border-blue-600 pl-3">
                Data Santri
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

                <x-input label="NIK" name="nik_santri" :value="$santri->nik_santri" />

                <x-input label="Nama Lengkap" name="nama_santri" :value="$santri->nama_santri" />

                <x-input label="Tempat Lahir" name="tempat_lahir" :value="$santri->tempat_lahir" />

                <x-input type="date" label="Tanggal Lahir" name="tanggal_lahir" :value="$santri->tanggal_lahir" />

            </div>

            {{-- Sekolah --}}
            <div class="mt-6">
                <label class="block mb-1 font-medium text-sm text-gray-600">Sekolah Tujuan</label>
                <select name="sekolah_tujuan"
                    class="w-full border-gray-300 rounded-xl shadow-sm px-3 py-2 focus:ring-blue-500">
                    <option disabled value>-- Pilih Sekolah Tujuan --</option>
                    @foreach (config('sekolah.list') as $sekolah)
                        <option value="{{ $sekolah }}" 
                            {{ old('sekolah_tujuan', $santri->sekolah_tujuan ?? '') === $sekolah ? 'selected' : '' }}>
                            {{ $sekolah }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- =================== DATA ORANG TUA =================== --}}
        <div>
            <h2 class="text-lg font-semibold text-gray-700 mb-4 border-l-4 border-green-600 pl-3">
                Data Orang Tua
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

                <x-input label="Nama Ayah" name="nama_ayah" :value="$santri->nama_ayah" />
                <x-input label="Pekerjaan Ayah" name="pekerjaan_ayah" :value="$santri->pekerjaan_ayah" />

                <x-input label="Nama Ibu" name="nama_ibu" :value="$santri->nama_ibu" />
                <x-input label="Pekerjaan Ibu" name="pekerjaan_ibu" :value="$santri->pekerjaan_ibu" />

            </div>

            <div class="mt-6">
                <x-input label="Nomor Telepon" name="nomor_telepon" :value="$santri->nomor_telepon" />
            </div>
        </div>

        {{-- =================== DATA ALAMAT =================== --}}
        <div>
            <h2 class="text-lg font-semibold text-gray-700 mb-4 border-l-4 border-purple-600 pl-3">
                Alamat Santri
            </h2>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {{-- Provinsi --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Provinsi</label>
                    <select id="provinsi" name="provinsi"
                        class="w-full border-gray-300 rounded-xl shadow-sm px-3 py-2 focus:ring-blue-500">
                        <option value="">-- Pilih Provinsi --</option>
                        @foreach($provinsiList as $prov)
                            <option value="{{ $prov->kode }}" {{ $santri->provinsi == $prov->kode ? 'selected' : '' }}>
                                {{ $prov->nama }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Kabupaten --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Kabupaten</label>
                    <select id="kabupaten" name="kabupaten"
                        class="w-full border-gray-300 rounded-xl shadow-sm px-3 py-2 focus:ring-blue-500">
                        @if($santri->kabupaten)
                            <option value="{{ $santri->kabupaten }}">{{ $santri->kabupatenRel?->nama }}</option>
                        @else
                            <option value="">-- Pilih Kabupaten --</option>
                        @endif
                    </select>
                </div>

                {{-- Kecamatan --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Kecamatan</label>
                    <select id="kecamatan" name="kecamatan"
                        class="w-full border-gray-300 rounded-xl shadow-sm px-3 py-2 focus:ring-blue-500">
                        @if($santri->kecamatan)
                            <option value="{{ $santri->kecamatan }}">{{ $santri->kecamatanRel?->nama }}</option>
                        @else
                            <option value="">-- Pilih Kecamatan --</option>
                        @endif
                    </select>
                </div>

                {{-- Desa --}}
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-1">Desa</label>
                    <select id="desa" name="desa"
                        class="w-full border-gray-300 rounded-xl shadow-sm px-3 py-2 focus:ring-blue-500">
                        @if($santri->desa)
                            <option value="{{ $santri->desa }}">{{ $santri->desaRel?->nama }}</option>
                        @else
                            <option value="">-- Pilih Desa --</option>
                        @endif
                    </select>
                </div>
            </div>
        </div>

        <div class="flex justify-end pt-6">
            <button type="submit"
                class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-semibold shadow transition">
                Simpan Perubahan
            </button>
        </div>

    </form>
</div>

{{-- =========================== SCRIPT =========================== --}}
<script>
    document.getElementById('provinsi').addEventListener('change', function() {
        let provinsi = this.value;
        fetch('/api/wilayah/kabupaten/' + provinsi)
            .then(res => res.json())
            .then(data => {
                let kabupaten = document.getElementById('kabupaten');
                kabupaten.innerHTML = '<option value="">-- Pilih Kabupaten --</option>';
                data.forEach(item => kabupaten.innerHTML += `<option value="${item.kode}">${item.nama}</option>`);

                document.getElementById('kecamatan').innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                document.getElementById('desa').innerHTML = '<option value="">-- Pilih Desa --</option>';
            });
    });

    document.getElementById('kabupaten').addEventListener('change', function() {
        let kabupaten = this.value;
        fetch('/api/wilayah/kecamatan/' + kabupaten)
            .then(res => res.json())
            .then(data => {
                let kecamatan = document.getElementById('kecamatan');
                kecamatan.innerHTML = '<option value="">-- Pilih Kecamatan --</option>';
                data.forEach(item => kecamatan.innerHTML += `<option value="${item.kode}">${item.nama}</option>`);

                document.getElementById('desa').innerHTML = '<option value="">-- Pilih Desa --</option>';
            });
    });

    document.getElementById('kecamatan').addEventListener('change', function() {
        let kecamatan = this.value;
        fetch('/api/wilayah/desa/' + kecamatan)
            .then(res => res.json())
            .then(data => {
                let desa = document.getElementById('desa');
                desa.innerHTML = '<option value="">-- Pilih Desa --</option>';
                data.forEach(item => desa.innerHTML += `<option value="${item.kode}">${item.nama}</option>`);
            });
    });
</script>

@endsection