<x-app-layout>
    <x-slot name="header">
        <h2 class="h4 mb-0">Data TPS</h2>
    </x-slot>

    <div class="row g-3">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header">Tambah TPS</div>
                <div class="card-body">
                    <form action="{{ route('admin-desa.tps.store') }}" method="POST">
                        @csrf
                        <div class="mb-2">
                            <x-input-label for="nomor" value="Nomor TPS" />
                            <x-text-input id="nomor" name="nomor" placeholder="01" required />
                        </div>
                        <div class="mb-2">
                            <x-input-label for="nama_lokasi" value="Nama Lokasi" />
                            <x-text-input id="nama_lokasi" name="nama_lokasi" placeholder="Balai Desa" required />
                        </div>
                        <div class="mb-2">
                            <x-input-label for="alamat" value="Alamat (opsional)" />
                            <x-text-input id="alamat" name="alamat" placeholder="Jl. Merdeka No. 1" />
                        </div>
                        <div class="mb-2">
                            <x-input-label for="urutan" value="Urutan" />
                            <input type="number" id="urutan" name="urutan" class="form-control" value="0">
                        </div>
                        <button class="btn btn-primary btn-sm">Tambah TPS</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Nama Lokasi</th>
                                <th>Alamat</th>
                                <th class="text-end">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($tpsList as $tps)
                                <tr>
                                    <td>{{ $tps->nomor }}</td>
                                    <td>{{ $tps->nama_lokasi }}</td>
                                    <td>{{ $tps->alamat }}</td>
                                    <td class="text-end">
                                        <form action="{{ route('admin-desa.tps.destroy', $tps) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus TPS ini?')">
                                            @csrf @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger">Hapus</button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted py-4">Belum ada data TPS.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
