@extends('layouts.main')

@section('content')

<main class="flex-1 overflow-y-auto p-6 bg-gray-50">

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">

        <div>
            <h2 class="text-2xl font-bold text-gray-800">
                Data Desa
            </h2>

            <p class="text-gray-500 text-sm">
                Kelola data desa.
            </p>
        </div>

        <a href="{{ route('admin.desa.create') }}"
            class="inline-flex items-center gap-2 px-5 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">

            <i class="fas fa-plus"></i>
            Tambah Data

        </a>

    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200">

        <!-- Search -->
        <div class="p-5 border-b">

            <form action="{{ route('admin.desa.index') }}" method="GET">

                <div class="flex flex-col md:flex-row gap-3">

                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Cari desa..."
                        class="flex-1 border rounded-lg px-4 py-2">

                    <button
                        class="px-5 py-2 bg-blue-600 text-white rounded-lg">

                        <i class="fas fa-search mr-1"></i>
                        Cari

                    </button>

                </div>

            </form>

        </div>

        <!-- Table -->
        <div class="overflow-x-auto">

            <table class="min-w-full">

                <thead class="bg-gray-100">

                    <tr>
                        <th class="px-4 py-3 text-center">No</th>
                        <th class="px-4 py-3">Nama Desa</th>
                        <th class="px-4 py-3 text-center">Penduduk</th>
                        <th class="px-4 py-3 text-center">KK</th>
                        <th class="px-4 py-3 text-center">Laki-laki</th>
                        <th class="px-4 py-3 text-center">Perempuan</th>
                        <th class="px-4 py-3 text-center">Aksi</th>
                    </tr>

                </thead>

                <tbody>

                    @forelse($desas as $desa)

                    <tr class="border-t hover:bg-gray-50">

                        <td class="px-4 py-4 text-center">
                            {{ $loop->iteration + $desas->firstItem() - 1 }}
                        </td>

                        <td class="px-4 py-4 font-semibold">
                            {{ $desa->nama_desa }}
                        </td>

                        <td class="px-4 py-4 text-center">
                            {{ number_format($desa->jumlah_penduduk) }}
                        </td>

                        <td class="px-4 py-4 text-center">
                            {{ number_format($desa->jumlah_kk) }}
                        </td>

                        <td class="px-4 py-4 text-center">
                            {{ number_format($desa->laki_laki) }}
                        </td>

                        <td class="px-4 py-4 text-center">
                            {{ number_format($desa->perempuan) }}
                        </td>

                        <td class="px-4 py-4">

                            <div class="flex justify-center gap-2">

                                <!-- Detail -->
                                <a href="{{ route('admin.desa.show', $desa->id) }}"
                                    class="w-9 h-9 rounded-lg bg-sky-100 text-sky-600 flex items-center justify-center hover:bg-sky-200">

                                    <i class="fas fa-eye"></i>

                                </a>

                                <!-- Edit -->
                                <a href="{{ route('admin.desa.edit', $desa->id) }}"
                                    class="w-9 h-9 rounded-lg bg-yellow-100 text-yellow-600 flex items-center justify-center hover:bg-yellow-200">

                                    <i class="fas fa-edit"></i>

                                </a>

                                <!-- Hapus -->
                                <form action="{{ route('admin.desa.destroy', $desa->id) }}"
                                    method="POST"
                                    onsubmit="return confirm('Yakin ingin menghapus data ini?')">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        class="w-9 h-9 rounded-lg bg-red-100 text-red-600 hover:bg-red-200">

                                        <i class="fas fa-trash"></i>

                                    </button>

                                </form>

                            </div>

                        </td>

                    </tr>

                    @empty

                    <tr>
                        <td colspan="7" class="py-8 text-center text-gray-500">
                            Belum ada data.
                        </td>
                    </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

        <div class="px-5 py-4 border-t">

            {{ $desas->links() }}

        </div>

    </div>

</main>

@endsection