@if ($desa->tpsList->isNotEmpty())
<section id="tps" class="py-5 bg-white" x-data="{
    search: '',
    tpsData: {{ $desa->tpsList->map(fn ($t) => ['nomor' => $t->nomor, 'nama_lokasi' => $t->nama_lokasi, 'alamat' => $t->alamat ?? '-'])->values()->toJson() }},
    get filtered() {
        if (!this.search.trim()) return this.tpsData;
        const q = this.search.toLowerCase();
        return this.tpsData.filter(t => t.nomor.toLowerCase().includes(q) || t.nama_lokasi.toLowerCase().includes(q));
    }
}">
    <div class="container" style="max-width: 700px;">
        <h2 class="h4 text-center mb-4">Daftar TPS</h2>

        <div class="mb-3">
            <input type="text" x-model="search" class="form-control" placeholder="Cari nomor TPS atau nama lokasi...">
        </div>

        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>No. TPS</th>
                        <th>Nama Lokasi</th>
                        <th>Alamat</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-for="tps in filtered" :key="tps.nomor + tps.nama_lokasi">
                        <tr>
                            <td x-text="tps.nomor"></td>
                            <td x-text="tps.nama_lokasi"></td>
                            <td x-text="tps.alamat"></td>
                        </tr>
                    </template>
                    <tr x-show="filtered.length === 0" x-cloak>
                        <td colspan="3" class="text-center text-muted">Tidak ada TPS yang cocok.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
@endif
