<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="{{ asset('assets/logo_kemenpkp.png') }}">
    <title>Admin Dashboard - Sebaran RTLH</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <style>
        :root {
            --bs-primary: #295F98; /* Blue */
            --bs-secondary: #CDC2A5; /* Gold */
            --bs-body-bg: #EAE4DD; /* Off White */
            --bs-light-beige: #E1D7C6;
        }
        
        body {
            background-color: var(--bs-body-bg) !important;
            font-family: system-ui, -apple-system, sans-serif;
        }

        .text-primary { color: var(--bs-primary) !important; }
        .bg-primary { background-color: var(--bs-primary) !important; }
        .border-primary { border-color: var(--bs-primary) !important; }

        .btn-primary {
            background-color: var(--bs-primary) !important;
            border-color: var(--bs-primary) !important;
        }
        .btn-primary:hover {
            background-color: #1e4b7a !important;
        }
        
        /* Card Styles to match Dashboard */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }
        .card-header {
            background-color: white;
            border-bottom: 2px solid var(--bs-light-beige);
            padding: 1.25rem;
            border-radius: 12px 12px 0 0 !important;
        }
        
        .card-custom-blue {
            background: linear-gradient(135deg, #295F98 0%, #1e4b7a 100%) !important;
            color: white;
        }

        /* Navbar Accent from Dashboard */
        .navbar-custom {
            border-bottom: 3px solid var(--bs-secondary) !important;
        }
    </style>
</head>
<body>

    <!-- Header / Navbar (Matching Dashboard) -->
    <nav class="navbar navbar-expand-lg bg-white shadow-sm py-3 sticky-top navbar-custom">
        <div class="container px-4">
            <div class="d-flex align-items-center gap-3">
                <img src="{{ asset('assets/logo_kemenpkp.png') }}" alt="Logo KemenPKP" height="55">
                <div style="line-height: 1.1;">
                    <h2 class="mb-0 fw-bold text-primary" style="font-size: 32px;">Admin Panel</h2>
                    <div class="text-secondary fw-bold" style="font-size: 16px; letter-spacing: 0.5px;">Manajemen Data Sebaran RTLH</div>
                </div>
            </div>
            
            <div class="ms-auto d-flex align-items-center gap-3">
                <div class="text-end d-none d-md-block">
                    <span class="d-block fw-bold text-dark" style="font-size: 16px;">Halo, Admin</span>
                    <span class="d-block text-muted" style="font-size: 16px;">{{ Auth::user()->email ?? 'Administrator' }}</span>
                </div>
                <form action="{{ route('logout') }}" method="POST">
                    @csrf
                    <button class="btn btn-outline-danger btn-sm fw-bold px-3 rounded-pill">
                        Logout <i class="bi bi-box-arrow-right ms-1"></i>
                    </button>
                </form>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        
        <!-- Welcome Banner -->
        <div class="card card-custom-blue shadow mb-4">
            <div class="card-body p-4 d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="fw-bold mb-1">Selamat Datang di Dashboard Admin</h3>
                    <p class="mb-0 opacity-75">Kelola data peta sebaran RTLH dengan mudah dan aman.</p>
                </div>
                <a href="{{ route('dashboard') }}" class="btn btn-light text-primary fw-bold shadow-sm" target="_blank">
                    <i class="bi bi-eye-fill me-1"></i> Lihat Peta Utama
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success d-flex align-items-center mb-4 shadow-sm border-0 rounded-3">
                <i class="bi bi-check-circle-fill fs-4 me-3 text-success"></i>
                <div>{{ session('success') }}</div>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger d-flex align-items-center mb-4 shadow-sm border-0 rounded-3">
                <i class="bi bi-exclamation-triangle-fill fs-4 me-3 text-danger"></i>
                <div>{{ session('error') }}</div>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger shadow-sm border-0 rounded-3 mb-4">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-4">
            
            <!-- Top Section: Upload Form -->
            <div class="col-12">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="fw-bold text-primary mb-0">
                            <i class="bi bi-cloud-upload-fill me-2"></i> Upload Wilayah Baru
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <div class="alert alert-warning small border-0 shadow-sm mb-4">
                            <h6 class="fw-bold mb-2"><i class="bi bi-exclamation-triangle-fill me-1"></i> Aturan Upload (Wajib Patuh):</h6>
                            <ul class="mb-0 ps-3">
                                <li>Format Nama File <strong>HARUS</strong> sesuai standar agar fitur Drill-down Peta berfungsi:
                                    <ul class="mb-1 mt-1">
                                        <li>Kabupaten/Kota : <code>Kab_NamaWilayah.json</code> atau <code>Kota_NamaWilayah.json</code> 
                                            <br><small class="text-muted">(Penting: Gunakan format nama file yang tepat untuk membedakan wilayah dengan nama sama, misal: <strong>Kab_Tegal.json</strong> vs <strong>Kota_Tegal.json</strong>)</small>
                                        </li>
                                    </ul>
                                </li>
                                <li><strong>NamaWilayah</strong> harus sama persis pada contoh di atas.</li>
                                <li>Maksimal ukuran file <strong>100MB</strong> per file.</li>
                            </ul>
                        </div>

                        <form action="{{ route('admin.maps.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-4">
                                <label for="json_file" class="form-label fw-bold text-secondary small text-uppercase">File GeoJSON</label>
                                <input class="form-control form-control-lg" type="file" id="json_file" name="json_file" accept=".json" required>
                                <div class="form-text mt-2"><i class="bi bi-info-circle"></i> Ekstensi file wajib <code>.json</code></div>
                            </div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg fw-bold shadow-sm">
                                    <i class="bi bi-upload me-2"></i> Upload Sekarang
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer bg-light p-3 text-center border-top-0">
                        <small class="text-muted">Pastikan format data JSON sesuai standar.</small>
                    </div>
                </div>
            </div>

            <!-- Bottom Section: List Files -->
            <div class="col-12">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="fw-bold text-primary mb-0">
                            <i class="bi bi-hdd-stack-fill me-2"></i> Data Peta Tersedia
                            <span class="badge bg-secondary ms-2 rounded-pill">{{ count($files) }} File</span>
                        </h5>
                        <form action="{{ route('admin.maps.sync') }}" method="POST" onsubmit="return confirm('Proses ini akan membaca ulang semua file peta dan memperbarui database. Lanjutkan?');">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-primary fw-bold shadow-sm">
                                <i class="bi bi-arrow-repeat me-1"></i> Sinkronisasi Database
                            </button>
                        </form>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="ps-4 py-3 text-secondary small text-uppercase">Nama File</th>
                                        <th class="py-3 text-secondary small text-uppercase">Ukuran</th>
                                        <th class="py-3 text-secondary small text-uppercase">Update Terakhir</th>
                                        <th class="text-end pe-4 py-3 text-secondary small text-uppercase">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($files as $file)
                                        <tr>
                                            <td class="ps-4 fw-bold text-dark py-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="bg-warning bg-opacity-10 rounded p-2 me-3">
                                                        <i class="bi bi-filetype-json text-warning"></i>
                                                    </div>
                                                    {{ $file['name'] }}
                                                </div>
                                            </td>
                                            <td class="small text-muted fw-bold">{{ $file['size'] }}</td>
                                            <td class="small text-muted">{{ $file['modified'] }}</td>
                                            <td class="text-end pe-4">
                                                <button type="button" class="btn btn-sm btn-outline-danger rounded-pill px-3" 
                                                        onclick="confirmDelete('{{ $file['name'] }}')">
                                                    <i class="bi bi-trash-fill me-1"></i> Hapus
                                                </button>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5">
                                                <div class="opacity-50 mb-3">
                                                    <i class="bi bi-folder2-open fs-1 text-secondary"></i>
                                                </div>
                                                <h6 class="fw-bold text-secondary">Belum ada data peta</h6>
                                                <p class="small text-muted mb-0">Silakan upload file JSON di kolom sebelah kiri.</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        
        <!-- Footer -->
        <div class="text-center mt-5 mb-5 text-muted small">
            &copy; {{ date('Y') }} Sistem Informasi Geografis RTLH Jateng & DIY.
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-body p-4 text-center">
                    <div class="mb-3">
                        <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                            <i class="bi bi-exclamation-triangle-fill fs-2"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold text-dark mb-2">Hapus File Peta?</h5>
                    <p class="text-muted mb-4 small">Apakah Anda yakin ingin menghapus file <strong id="deleteFileName" class="text-dark"></strong>? <br>Tindakan ini tidak dapat dibatalkan.</p>
                    
                    <div class="d-flex justify-content-center gap-2">
                        <button type="button" class="btn btn-light fw-bold px-4 rounded-pill" data-bs-dismiss="modal">
                            Batal
                        </button>
                        <form id="deleteForm" method="POST" action="{{ route('admin.maps.destroy') }}">
                            @csrf
                            @method('DELETE')
                            <input type="hidden" name="filename" id="deleteFilenameInput">
                            <button type="submit" class="btn btn-danger fw-bold px-4 rounded-pill">
                                Ya, Hapus
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        function confirmDelete(filename) {
            // Set nama file di modal
            document.getElementById('deleteFileName').textContent = filename;
            // Set hidden input value
            document.getElementById('deleteFilenameInput').value = filename;
            // Tampilkan Modal
            var myModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            myModal.show();
        }
    </script>
</body>
</html>
