@extends('admin.layout')

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 max-w-7xl mx-auto">

    {{-- Header dengan aksi --}}
    <div class="px-6 py-5 border-b border-gray-200">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <h1 class="text-xl font-semibold text-gray-900">Daftar Santri {{ ucfirst($jenis) }}</h1>
                <p class="text-sm text-gray-500 mt-1">Kelola data pendaftaran santri</p>
            </div>

            {{-- Dropdown jenis --}}
            <div class="flex items-center gap-2">
                <label class="text-sm font-medium text-gray-700">Tampilkan:</label>
                <select id="jenis"
                        onchange="window.location = '/pass-2005/gerbang-rahasia/pendaftaran/' + this.value"
                        class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition cursor-pointer min-w-[120px]">
                    <option value="putra" {{ $jenis == 'putra' ? 'selected' : '' }}>Santri Putra</option>
                    <option value="putri" {{ $jenis == 'putri' ? 'selected' : '' }}>Santri Putri</option>
                </select>
            </div>
        </div>
    </div>

    {{-- Statistik dan aksi --}}
    <div class="px-6 pt-5">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
            <div class="flex items-center gap-3">
                <div class="bg-blue-50 border border-blue-100 rounded-lg px-4 py-3">
                    <span class="text-sm text-gray-600">Total Pendaftar:</span>
                    <span class="font-semibold text-blue-700 ml-2">{{ $data->count() }}</span>
                </div>
            </div>
            
            <a href="{{ route('admin.santri.export.excel', $jenis) }}"
               class="inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer">
                <i class="fa-solid fa-file-excel"></i>
                Export Excel
            </a>
        </div>

        {{-- Flash Message --}}
        @if(session('success'))
        <div class="mb-6 bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-lg">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-check"></i>
                <span>{{ session('success') }}</span>
            </div>
        </div>
        @endif

        {{-- Filter Section --}}
        <div class="mb-6">
            <div class="flex items-center gap-2 mb-3">
                <i class="fa-solid fa-filter text-gray-400 text-sm"></i>
                <h3 class="text-sm font-medium text-gray-700">Filter Data</h3>
            </div>
            
            <form method="GET" action="{{ url()->current() }}"
                x-data="filterForm()"
                class="space-y-4">

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {{-- Nama --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1.5">Nama Santri</label>
                        <input type="text" name="nama" x-model="nama"
                            @keyup.debounce.500ms="applyFilter()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
                            placeholder="Cari nama...">
                    </div>

                    {{-- Sekolah --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1.5">Sekolah Tujuan</label>
                        <select name="sekolah_tujuan" x-model="sekolah" @change="applyFilter()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition cursor-pointer">
                            <option value="">Semua Sekolah</option>
                            @foreach (config('sekolah.list') as $sekolah)
                                <option value="{{ $sekolah }}" 
                                    {{ old('sekolah_tujuan', $santri->sekolah_tujuan ?? '') === $sekolah ? 'selected' : '' }}>
                                    {{ $sekolah }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Provinsi --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1.5">Provinsi</label>
                        <select id="provinsi" name="provinsi_id" x-model="provinsi" @change="applyFilter()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition cursor-pointer">
                            <option value="">Pilih Provinsi</option>
                            @foreach ($provinsi as $prov)
                                <option value="{{ $prov->kode }}" {{ request('provinsi_id') == $prov->kode ? 'selected' : '' }}>
                                    {{ $prov->nama }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Kabupaten --}}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1.5">Kabupaten</label>
                        <select id="kabupaten" name="kabupaten_id" x-model="kabupaten" @change="applyFilter()"
                            class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition cursor-pointer">
                            <option value="">Pilih Kabupaten</option>
                        </select>
                    </div>
                </div>

                {{-- Tombol Reset --}}
                <div class="flex justify-end">
                    <a href="{{ url()->current() }}"
                       class="text-sm text-gray-600 hover:text-gray-900 px-4 py-2 hover:bg-gray-100 rounded-lg transition">
                        Reset Filter
                    </a>
                </div>
            </form>
        </div>

        {{-- Tabel Data --}}
        <div x-data="{ openModal:false, detail:{} }">
            {{-- TABLE DESKTOP --}}
            <div class="hidden md:block overflow-hidden border border-gray-200 rounded-lg">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NIK</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No Tes</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sekolah</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telepon</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse ($data as $i => $santri)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $i+1 }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-900">{{ $santri->nama_santri }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $santri->nik_santri }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $santri->nomor_tes }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $santri->sekolah_tujuan }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $santri->nomor_telepon }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <button class="text-blue-600 hover:text-blue-900 font-medium cursor-pointer transition-colors"
                                        @click="openModal=true; detail={
                                            id: '{{ $santri->id }}',
                                            nama_santri: '{{ $santri->nama_santri }}',
                                            nik_santri: '{{ $santri->nik_santri }}',
                                            tempat_lahir: '{{ $santri->tempat_lahir }}',
                                            tanggal_lahir: '{{ $santri->tanggal_lahir }}',
                                            anak_ke: '{{ $santri->anak_ke }}',
                                            jumlah_saudara: '{{ $santri->jumlah_saudara }}',
                                            nomor_tes: '{{ $santri->nomor_tes }}',
                                            sekolah_tujuan: '{{ $santri->sekolah_tujuan }}',
                                            nama_ayah: '{{ $santri->nama_ayah }}',
                                            pekerjaan_ayah: '{{ $santri->pekerjaan_ayah }}',
                                            nama_ibu: '{{ $santri->nama_ibu }}',
                                            pekerjaan_ibu: '{{ $santri->pekerjaan_ibu }}',
                                            nomor_telepon: '{{ $santri->nomor_telepon }}',
                                            provinsi: '{{ $santri->provinsiRel->nama ?? "-" }}',
                                            kabupaten: '{{ $santri->kabupatenRel->nama ?? "-" }}',
                                            kecamatan: '{{ $santri->kecamatanRel->nama ?? "-" }}',
                                            desa: '{{ $santri->desaRel->nama ?? "-" }}',
                                            created_at: '{{ $santri->created_at }}',
                                            updated_at: '{{ $santri->updated_at }}'
                                        }">
                                        Detail
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                                    <div class="flex flex-col items-center justify-center">
                                        <i class="fa-solid fa-inbox text-gray-300 text-3xl mb-2"></i>
                                        <p class="text-gray-400">Belum ada data santri</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- MOBILE CARD VIEW --}}
            <div class="md:hidden space-y-3">
                @forelse ($data as $santri)
                <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium text-gray-900">{{ $santri->nama_santri }}</h3>
                            <p class="text-xs text-gray-500 mt-0.5">{{ $santri->nik_santri }}</p>
                        </div>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ $santri->sekolah_tujuan }}
                        </span>
                    </div>
                    
                    <div class="mt-3 grid grid-cols-2 gap-2 text-sm">
                        <div>
                            <span class="text-gray-500">No Tes:</span>
                            <span class="font-medium ml-1">{{ $santri->nomor_tes }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Telepon:</span>
                            <span class="font-medium ml-1">{{ $santri->nomor_telepon }}</span>
                        </div>
                    </div>
                    
                    <button
                        @click="openModal=true; detail={
                            id: '{{ $santri->id }}',
                            nama_santri: '{{ $santri->nama_santri }}',
                            nik_santri: '{{ $santri->nik_santri }}',
                            tempat_lahir: '{{ $santri->tempat_lahir }}',
                            tanggal_lahir: '{{ $santri->tanggal_lahir }}',
                            anak_ke: '{{ $santri->anak_ke }}',
                            jumlah_saudara: '{{ $santri->jumlah_saudara }}',
                            nomor_tes: '{{ $santri->nomor_tes }}',
                            sekolah_tujuan: '{{ $santri->sekolah_tujuan }}',
                            nama_ayah: '{{ $santri->nama_ayah }}',
                            pekerjaan_ayah: '{{ $santri->pekerjaan_ayah }}',
                            nama_ibu: '{{ $santri->nama_ibu }}',
                            pekerjaan_ibu: '{{ $santri->pekerjaan_ibu }}',
                            nomor_telepon: '{{ $santri->nomor_telepon }}',
                            provinsi: '{{ $santri->provinsiRel->nama ?? "-" }}',
                            kabupaten: '{{ $santri->kabupatenRel->nama ?? "-" }}',
                            kecamatan: '{{ $santri->kecamatanRel->nama ?? "-" }}',
                            desa: '{{ $santri->desaRel->nama ?? "-" }}',
                            created_at: '{{ $santri->created_at }}',
                            updated_at: '{{ $santri->updated_at }}'
                        }"
                        class="mt-3 w-full border border-gray-300 text-gray-700 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors cursor-pointer">
                        Lihat Detail
                    </button>
                </div>
                @empty
                <div class="bg-white border border-gray-200 rounded-lg p-6 text-center">
                    <i class="fa-solid fa-inbox text-gray-300 text-3xl mb-3"></i>
                    <p class="text-gray-500">Belum ada data santri</p>
                </div>
                @endforelse
            </div>

            {{-- MODAL DETAIL --}}
            <div x-show="openModal" x-cloak
                class="fixed inset-0 bg-black/50 flex justify-center items-center z-50 p-4 transition-opacity duration-200"
                x-transition:enter="ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">

                <div class="bg-white w-full max-w-4xl rounded-xl shadow-xl max-h-[90vh] overflow-hidden flex flex-col"
                    @click.away="openModal = false"
                    x-transition:enter="ease-out duration-200"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="ease-in duration-150"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95">

                    {{-- Modal Header --}}
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-3">
                                <div class="bg-blue-100 text-blue-600 p-2 rounded-lg">
                                    <i class="fa-solid fa-user-graduate"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900">Detail Santri</h3>
                                    <p class="text-sm text-gray-500">Informasi lengkap data santri</p>
                                </div>
                            </div>
                            <button @click="openModal = false"
                                class="text-gray-400 hover:text-gray-600 p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer">
                                <i class="fa-solid fa-xmark text-lg"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Modal Content --}}
                    <div class="flex-1 overflow-y-auto p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" x-data="icons">
                            <template x-for="(val, key) in detail" :key="key">
                                <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300 transition-colors">
                                    <div class="flex items-start gap-3">
                                        <div class="flex-shrink-0">
                                            <div class="bg-gray-100 text-gray-600 p-2 rounded-lg">
                                                <i :class="`fa-solid ${map(key)} text-sm`"></i>
                                            </div>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <div class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-1"
                                                x-text="key.replace('_', ' ')">
                                            </div>
                                            <div class="text-sm text-gray-900 font-medium break-words"
                                                x-text="val || '-'">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Modal Footer --}}
                    <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
                        <div class="flex flex-col sm:flex-row justify-end gap-3">
                            <a :href="`{{ url('/pass-2005/gerbang-rahasia/pendaftaran') }}/${'{{ $jenis }}'}/${detail.id}/edit`"
                                class="inline-flex items-center justify-center gap-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer">
                                <i class="fa-solid fa-pen"></i>
                                Edit
                            </a>
                            
                            <form :action="`{{ url('/pass-2005/gerbang-rahasia/pendaftaran') }}/${'{{ $jenis }}'}/${detail.id}`"
                                method="POST"
                                onsubmit="return confirm('Yakin ingin menghapus data ini?')"
                                class="w-full sm:w-auto">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                    class="w-full inline-flex items-center justify-center gap-2 bg-red-50 border border-red-200 text-red-700 hover:bg-red-100 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer">
                                    <i class="fa-solid fa-trash"></i>
                                    Hapus
                                </button>
                            </form>
                            
                            <button @click="openModal = false"
                                class="inline-flex items-center justify-center gap-2 bg-gray-800 text-white hover:bg-gray-900 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer">
                                <i class="fa-solid fa-xmark"></i>
                                Tutup
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Script Wilayah --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const baseUrl = "{{ url('/') }}";

    function loadWilayah(parentId, type, target, selected = null) {
        fetch(`${baseUrl}/get-wilayah?id=${parentId}&data=${type}`)
        .then(res => res.json())
        .then(data => {
            target.innerHTML = `<option value="">Pilih ${type}</option>`;
            data.forEach(item => {
                let sel = selected == item.kode ? "selected" : "";
                target.innerHTML += `<option value="${item.kode}" ${sel}>${item.nama}</option>`;
            });
        });
    }

    const provinsi = document.getElementById('provinsi');
    const kabupaten = document.getElementById('kabupaten');

    if (provinsi && provinsi.value) {
        loadWilayah(provinsi.value, 'kabupaten', kabupaten, "{{ request('kabupaten_id') }}");
    }

    if (provinsi) {
        provinsi.addEventListener('change', function() {
            loadWilayah(this.value, 'kabupaten', kabupaten);
        });
    }
});

function filterForm() {
    return {
        nama: "{{ request('nama') }}",
        sekolah: "{{ request('sekolah_tujuan') }}",
        provinsi: "{{ request('provinsi_id') }}",
        kabupaten: "{{ request('kabupaten_id') }}",

        applyFilter() {
            const params = new URLSearchParams();

            if (this.nama) params.append('nama', this.nama);
            if (this.sekolah) params.append('sekolah_tujuan', this.sekolah);
            if (this.provinsi) params.append('provinsi_id', this.provinsi);
            if (this.kabupaten) params.append('kabupaten_id', this.kabupaten);

            window.location = "?" + params.toString();
        }
    }
}

document.addEventListener("alpine:init", () => {
    Alpine.data("icons", () => ({
        map(key) {
            const icons = {
                id: "fa-hashtag",
                nama_santri: "fa-user",
                nik_santri: "fa-id-card",
                tempat_lahir: "fa-location-dot",
                tanggal_lahir: "fa-calendar-days",
                anak_ke: "fa-users",
                jumlah_saudara: "fa-people-group",
                nomor_tes: "fa-file-signature",
                sekolah_tujuan: "fa-school",
                nama_ayah: "fa-person",
                pekerjaan_ayah: "fa-briefcase",
                nama_ibu: "fa-person-dress",
                pekerjaan_ibu: "fa-briefcase",
                nomor_telepon: "fa-phone",
                provinsi: "fa-map",
                kabupaten: "fa-map-location-dot",
                kecamatan: "fa-map-pin",
                desa: "fa-location-crosshairs",
                created_at: "fa-clock",
                updated_at: "fa-clock-rotate-left",
            };
            return icons[key] || "fa-circle-info";
        }
    }));
});
</script>

<style>
[x-cloak] { display: none !important; }
</style>
@endsection