<section id="cek-pemilih" class="py-5 bg-white">
    <div class="container" style="max-width: 600px;">
        <h2 class="h4 text-center mb-4">Cek Status Pemilih</h2>
        <p class="text-center text-muted small">
            Masukkan Nama (minimal 3 karakter) atau NIK (16 digit) untuk memeriksa status pendaftaran Anda sebagai pemilih.
        </p>

        <form
            @submit.prevent="
                voterLoading = true; voterError = null; voterResult = null;
                fetch('{{ route('public.voter.search', [$desa->kecamatan->kabupaten->slug, $desa->kecamatan->slug, $desa->slug]) }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content, 'Accept': 'application/json' },
                    body: JSON.stringify({ type: $refs.searchType.value, query: $refs.searchQuery.value }),
                })
                .then(async (res) => {
                    voterLoading = false;
                    if (res.status === 429) { voterError = 'Terlalu banyak percobaan. Coba lagi nanti.'; return; }
                    if (!res.ok) { const body = await res.json(); voterError = body.message || 'Terjadi kesalahan.'; return; }
                    const body = await res.json();
                    voterResult = body.data;
                })
                .catch(() => { voterLoading = false; voterError = 'Gagal terhubung ke server.'; })
            "
        >
            <div class="mb-3">
                <select x-ref="searchType" class="form-select">
                    <option value="nama">Cari berdasarkan Nama</option>
                    <option value="nik">Cari berdasarkan NIK</option>
                </select>
            </div>
            <div class="mb-3">
                <input x-ref="searchQuery" type="text" class="form-control" placeholder="Masukkan nama atau NIK" required>
            </div>

            <div class="d-grid">
                <button type="submit" class="btn btn-primary" :disabled="voterLoading">
                    <span x-show="!voterLoading">Cari</span>
                    <span x-show="voterLoading" x-cloak>Mencari...</span>
                </button>
            </div>
        </form>

        <div class="mt-4" x-show="voterError" x-cloak>
            <div class="alert alert-danger" x-text="voterError"></div>
        </div>

        <div class="mt-4" x-show="voterResult && voterResult.length === 0" x-cloak>
            <div class="alert alert-warning">Data tidak ditemukan.</div>
        </div>

        <template x-for="item in voterResult" :key="item.nik_masked + item.nama">
            <div class="card mt-3">
                <div class="card-body">
                    <div><strong>Nama:</strong> <span x-text="item.nama"></span></div>
                    <div><strong>NIK:</strong> <span x-text="item.nik_masked"></span></div>
                    <div><strong>TPS:</strong> <span x-text="item.tps"></span></div>
                    <div><strong>RT/RW:</strong> <span x-text="item.rt + '/' + item.rw"></span></div>
                    <div><strong>Status:</strong> <span x-text="item.status_terdaftar"></span></div>
                </div>
            </div>
        </template>
    </div>
</section>
