@php
    use App\Http\Livewire\PengaturanKecamatan;
@endphp

<div>
    <h1>Pengaturan Kecamatan</h1>

    <div class="row">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Data Kecamatan</h5>
                <
            </div>
            <div class="card-body">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambahKecamatan">
                    Tambah Kecamatan
                </button>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th width="5%">No</th>
                            <th>Nama Kecamatan</th>
                            <th>Jumlah Desa</th>
                            <th width="20%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($kecamatans as $key => $item)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $item->nama }}</td>
                                <td>{{ $item->desa->count() }}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" wire:click="editKecamatan({{ $item->id }})">
                                        Edit
                                    </button>
                                    <button class="btn btn-sm btn-danger" wire:click="deleteKecamatan({{ $item->id }})">
                                        Hapus
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center">Tidak ada data kecamatan</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Kecamatan -->
    <div class="modal fade" id="modalTambahKecamatan" tabindex="-1" aria-labelledby="modalTambahKecamatanLabel"
        aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahKecamatanLabel">Tambah Kecamatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="nama" class="form-label">Nama Kecamatan</label>
                        <input type="text" class="form-control @error('nama') is-invalid @enderror" 
                            wire:model="nama" id="nama">
                        @error('nama')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" wire:click="simpanKecamatan" wire:loading.attr="disabled">
                        <span wire:loading.remove>Simpan</span>
                        <span wire:loading>Menyimpan...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Edit Kecamatan -->
    <div class="modal fade" id="modalEditKecamatan" tabindex="-1" aria-labelledby="modalEditKecamatanLabel"
        aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditKecamatanLabel">Edit Kecamatan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="nama_edit" class="form-label">Nama Kecamatan</label>
                        <input type="text" class="form-control @error('nama') is-invalid @enderror" 
                            wire:model="nama" id="nama_edit">
                        @error('nama')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" wire:click="simpanKecamatan" wire:loading.attr="disabled">
                        <span wire:loading.remove>Update</span>
                        <span wire:loading>Menyimpan...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Hapus -->
    <div class="modal fade" id="modalKonfirmasiHapus" tabindex="-1" aria-labelledby="modalKonfirmasiHapusLabel"
        aria-hidden="true" wire:ignore.self>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalKonfirmasiHapusLabel">Konfirmasi Hapus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Apakah Anda yakin ingin menghapus kecamatan ini?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" wire:click="confirmDelete" wire:loading.attr="disabled">
                        <span wire:loading.remove>Hapus</span>
                        <span wire:loading>Menghapus...</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert -->
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 5">
        <div id="liveAlert" class="toast align-items-center text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('livewire:load', function () {
        Livewire.on('closeModal', (modalId) => {
            var modal = bootstrap.Modal.getInstance(document.getElementById(modalId));
            if (modal) {
                modal.hide();
            }
        });

        Livewire.on('openModal', (modalId) => {
            var modal = new bootstrap.Modal(document.getElementById(modalId));
            modal.show();
        });

        Livewire.on('showAlert', (data) => {
            const toast = document.getElementById('liveAlert');
            const toastBody = toast.querySelector('.toast-body');
            
            // Set warna berdasarkan type
            if (data.type === 'success') {
                toast.classList.add('bg-success');
            } else if (data.type === 'error') {
                toast.classList.add('bg-danger');
            }
            
            toastBody.textContent = data.message;
            const bsToast = new bootstrap.Toast(toast);
            bsToast.show();
        });
    });
</script>
@endpush