@extends('layouts.app')

@section('content')
<div class="page-header">
    <h1 class="page-title">Kelola Kab/Kota</h1>
    <p class="text-muted">Master Data Kab/Kota Jawa Barat</p>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>
        <strong>Berhasil!</strong> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <strong>Gagal!</strong> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<!-- Statistics -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-muted mb-2">Total Kab/Kota</p>
                        <h3 class="mb-0">{{ count($kabKota) }}</h3>
                    </div>
                    <i class="bi bi-geo-alt-fill text-primary" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-muted mb-2">Sudah Ter-mapping</p>
                        <h3 class="mb-0 text-success">{{ $kabKota->where('kcd_code', '!=', null)->count() }}</h3>
                    </div>
                    <i class="bi bi-check2-circle text-success" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-muted mb-2">Belum Ter-mapping</p>
                        <h3 class="mb-0 text-warning">{{ $kabKota->where('kcd_code', null)->count() }}</h3>
                    </div>
                    <i class="bi bi-exclamation-circle text-warning" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="text-muted mb-2">Jawa Barat</p>
                        <h3 class="mb-0">19 Kab + 9 Kota</h3>
                    </div>
                    <i class="bi bi-map-fill text-info" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Card -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Daftar Kab/Kota</h5>
            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#tambahModal">
                <i class="bi bi-plus-circle me-2"></i> Tambah Kab/Kota
            </button>
        </div>
    </div>
    <div class="card-body">
        <!-- Search -->
        <div class="mb-3">
            <input type="text" class="form-control" id="searchInput" placeholder="Cari Kab/Kota...">
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 60px;">No</th>
                        <th>Nama Kab/Kota</th>
                        <th style="width: 150px;">KCD Mapping</th>
                        <th style="width: 100px;">Status</th>
                        <th style="width: 100px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($kabKota as $idx => $item)
                    <tr>
                        <td><strong>{{ $idx + 1 }}</strong></td>
                        <td>{{ $item->name }}</td>
                        <td>
                            @if($item->kcd)
                                <span class="badge bg-primary">{{ $item->kcd->name }}</span>
                            @else
                                <span class="badge bg-secondary">Belum di-mapping</span>
                            @endif
                        </td>
                        <td>
                            @if($item->is_active)
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-secondary">Nonaktif</span>
                            @endif
                        </td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary edit-btn" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#editModal" 
                                    data-id="{{ $item->id }}" 
                                    data-name="{{ $item->name }}" 
                                    data-kcd-code="{{ $item->kcd_code }}"
                                    title="Edit">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger delete-btn" data-bs-toggle="modal" data-bs-target="#deleteModal" data-id="{{ $item->id }}" data-name="{{ $item->name }}" title="Hapus">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">Belum ada data Kab/Kota</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Tambah Kab/Kota -->
<div class="modal fade" id="tambahModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Kab/Kota</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('superadmin.kab-kota.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Kab/Kota <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nama" placeholder="Contoh: Bandung" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Mapping ke KCD</label>
                        <select class="form-select" name="kcd_code">
                            <option value="">-- Pilih KCD (Opsional) --</option>
                            @foreach($kcds as $kcd)
                                <option value="{{ $kcd->code }}">{{ $kcd->name }} ({{ $kcd->code }})</option>
                            @endforeach
                        </select>
                        <small class="text-muted">Pilih KCD untuk mengelompokkan Kab/Kota ke kawasan tertentu</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit Kab/Kota -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Kab/Kota</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nama Kab/Kota <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editName" name="nama" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Mapping ke KCD</label>
                        <select class="form-select" id="editKcdCode" name="kcd_code">
                            <option value="">-- Pilih KCD (Opsional) --</option>
                            @foreach($kcds as $kcd)
                                <option value="{{ $kcd->code }}">{{ $kcd->name }} ({{ $kcd->code }})</option>
                            @endforeach
                        </select>
                        <small class="text-muted">Pilih KCD untuk mengelompokkan Kab/Kota ke kawasan tertentu</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Perbarui</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header border-bottom bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill me-2"></i>Hapus Kab/Kota</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage" class="mb-0">Apakah Anda yakin ingin menghapus Kab/Kota ini?</p>
                <p class="text-muted small mt-2">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer border-top">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Hapus</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Handle search
    document.getElementById('searchInput').addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();
        const tableRows = document.querySelectorAll('table tbody tr');
        
        tableRows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });

    // Handle delete button clicks
    let selectedKabKotaId = null;
    let selectedKabKotaName = null;
    
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            selectedKabKotaId = this.dataset.id;
            selectedKabKotaName = this.dataset.name;
            
            // Update modal message
            document.getElementById('deleteMessage').textContent = `Apakah Anda yakin ingin menghapus "${selectedKabKotaName}"?`;
        });
    });
    
    // Handle confirm delete
    document.getElementById('confirmDelete').addEventListener('click', function() {
        if (selectedKabKotaId) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/superadmin/kab-kota/${selectedKabKotaId}`;
            form.innerHTML = `
                {{ csrf_field() }}
                @method('DELETE')
            `;
            document.body.appendChild(form);
            form.submit();
        }
    });
    
    // Handle edit button clicks
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            const kcdCode = this.dataset.kcdCode || '';
            
            // Update edit form
            document.getElementById('editForm').action = `/superadmin/kab-kota/${id}`;
            document.getElementById('editName').value = name;
            document.getElementById('editKcdCode').value = kcdCode;
        });
    });
</script>
@endsection