@extends('layouts.app')
@section('title', 'Daftar Kecamatan - ISPA Prediction')
@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>Berhasil!</strong> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>Terjadi kesalahan!</strong>
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
<div class="container">
    <h2 class="mb-4">Daftar Kecamatan</h2>

    <a href="{{ route('admin.kabupaten.create') }}" class="btn btn-success mb-3">+ Tambah Kecamatan</a>

    <!-- Card Gabungan untuk Search + Tabel -->
    <div class="card mb-4">
        <div class="card-body">
            <!-- Form Pencarian -->
            <form method="GET" action="{{ route('kabupaten.index') }}" class="mb-3">
                <div class="input-group">
                    <input type="text" class="form-control" name="search" value="{{ request()->get('search') }}" placeholder="Cari Kecamatan...">
                    <button class="btn btn-primary" type="submit">Cari</button>
                </div>
            </form>

            <!-- Tabel Kecamatan -->
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($kabupatens as $i => $k)
                    <tr>
                        <td>{{ ($kabupatens->currentPage() - 1) * $kabupatens->perPage() + $i + 1 }}</td>
                        <td>{{ $k->nama }}</td>
                        <td>{{ $k->longitude }}</td>
                        <td>{{ $k->latitude }}</td>
                        <td>
                            <a href="{{ route('admin.kabupaten.edit', $k->id) }}" class="btn btn-warning btn-sm">Edit</a>
                            <form action="{{ route('admin.kabupaten.destroy', $k->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Yakin ingin menghapus data ini?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <!-- Pagination Links -->
            <div class="d-flex justify-content-center mt-4">
                {{ $kabupatens->withQueryString()->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>
@endsection


@push('styles')
<style>
    .card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card-body {
        padding: 20px;
    }

    .table {
        border-radius: 10px;
        overflow: hidden;
    }

    .table th, .table td {
        text-align: center;
        padding: 12px;
        vertical-align: middle;
    }

    .table th {
        background-color: #f8f9fa;
        font-weight: bold;
        color: #495057;
    }

    .table-striped tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    .table-hover tbody tr:hover {
        background-color: #e9ecef;
    }

    .btn-success {
        background-color: #28a745;
        border-color: #28a745;
        padding: 8px 16px;
        font-size: 16px;
    }

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

    h2 {
        font-family: 'Arial', sans-serif;
        color: #007bff;
        font-size: 24px;
    }

    .input-group input {
        width: 300px;
    }

    .input-group button {
        font-size: 16px;
    }
</style>
@endpush