<!-- Path: app/layouts/admin_layout.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($title ?? 'Admin Command Center - ERCS', ENT_QUOTES, 'UTF-8') ?></title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], },
                    colors: {
                        navy: { 800: '#1e3a8a', 900: '#1e3a8a', 950: '#172554', },
                        brandBlue: { 500: '#3b82f6', 600: '#2563eb', },
                        alert: '#ef4444',
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <?= htmlspecialchars(Core\View::renderHead(), ENT_QUOTES, 'UTF-8') ?>

    <style>
        body { font-family: 'Inter', sans-serif; }
        
        .sidebar-scroll::-webkit-scrollbar { width: 4px; }
        .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
        .sidebar-scroll::-webkit-scrollbar-thumb { background: #1e3a8a; border-radius: 4px; }
        .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: #2563eb; }
    </style>
</head>
<body class="text-slate-800 antialiased bg-slate-50 flex h-screen overflow-hidden">

    <!-- Mobile Sidebar Overlay -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-navy-900/50 z-20 hidden lg:hidden backdrop-blur-sm transition-opacity"></div>

    <!-- Left Sidebar -->
    <aside id="sidebar" class="bg-navy-950 text-white w-64 flex-shrink-0 flex flex-col z-30 transition-transform duration-300 transform -translate-x-full lg:translate-x-0 fixed lg:relative h-full shadow-2xl lg:shadow-none">
        
        <!-- Brand/Logo -->
        <div class="h-16 flex items-center px-6 bg-navy-900 border-b border-navy-800">
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin" class="flex items-center gap-2 group w-full">
                <div class="w-8 h-8 bg-alert text-white rounded flex items-center justify-center font-bold shadow-md group-hover:scale-105 transition-transform">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <span class="font-bold text-lg tracking-tight">ERCS Admin</span>
            </a>
        </div>

        <!-- Navigation Links -->
        <nav class="flex-1 overflow-y-auto sidebar-scroll py-4 px-3 space-y-1">
            
            <div class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 px-3 mt-2">Command Center</div>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-tachometer-alt w-6 text-center text-slate-400 group-hover:text-white"></i> Dashboard
            </a>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/incidents/pending" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-exclamation-circle w-6 text-center text-alert group-hover:text-white"></i> Dispatches
            </a>

            <div class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 px-3 mt-6">Management</div>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/categories" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-tags w-6 text-center text-slate-400 group-hover:text-white"></i> Categories
            </a>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/responders" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-ambulance w-6 text-center text-slate-400 group-hover:text-white"></i> Responders
            </a>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/users" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-users w-6 text-center text-slate-400 group-hover:text-white"></i> System Users
            </a>

            <div class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 px-3 mt-6">System Data</div>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/reports" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-file-csv w-6 text-center text-slate-400 group-hover:text-white"></i> Data Exports
            </a>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/audit-logs" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-brandBlue-600 hover:text-white transition-colors group">
                <i class="fas fa-history w-6 text-center text-slate-400 group-hover:text-white"></i> Audit Logs
            </a>
        </nav>

        <!-- Bottom User/Logout Area -->
        <div class="p-4 border-t border-navy-800 bg-navy-950">
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/logout" class="flex items-center gap-2 text-sm font-medium text-slate-300 hover:text-alert transition-colors">
                <i class="fas fa-sign-out-alt"></i> Secure Logout
            </a>
        </div>
    </aside>

    <!-- Main Content Wrapper (Right Side) -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
        
        <!-- Top Header Bar -->
        <header class="h-16 bg-white shadow-sm border-b border-slate-200 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-10">
            <div class="flex items-center">
                <!-- Hamburger Menu for Mobile -->
                <button id="sidebar-toggle" class="lg:hidden text-slate-500 hover:text-navy-900 focus:outline-none mr-4">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <h2 class="text-lg font-bold text-navy-900 hidden sm:block"><?= htmlspecialchars($title ?? 'Command Center', ENT_QUOTES, 'UTF-8') ?></h2>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <span class="relative flex h-3 w-3">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                    </span>
                    <span class="text-xs font-semibold text-slate-600 hidden sm:block">System Online</span>
                </div>
                <div class="h-8 w-px bg-slate-200 mx-2"></div>
                <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/" target="_blank" class="text-sm font-medium text-brandBlue-600 hover:text-brandBlue-800 flex items-center gap-1">
                    <i class="fas fa-external-link-alt"></i> <span class="hidden sm:inline">View Site</span>
                </a>
            </div>
        </header>

        <!-- Dynamic Content Area -->
        <main class="flex-1 overflow-y-auto bg-slate-50 relative">
            <!-- Path: app/Views/admin/responders_list.view.php -->
<div class="bg-slate-50 min-h-[calc(100vh-64px)] py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-navy-900">Responder Units Directory</h1>
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/responders/create" class="bg-brandBlue-600 hover:bg-brandBlue-700 text-white px-4 py-2 rounded shadow-sm font-semibold transition-colors">
                <i class="fas fa-plus"></i> Register Unit
            </a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-slate-500 text-sm uppercase tracking-wider border-b border-slate-200">
                            <th class="p-4 font-semibold">Org Name</th>
                            <th class="p-4 font-semibold">Category</th>
                            <th class="p-4 font-semibold">User Link</th>
                            <th class="p-4 font-semibold">Status</th>
                            <th class="p-4 font-semibold text-right">Base Location</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm">
                        <?php if (empty($responders)): ?>
                            <tr><td colspan="5" class="p-8 text-center text-slate-500">No responders registered.</td></tr>
                        <?php else: ?><?php foreach ($responders as $res): ?>
                                <tr class="hover:bg-slate-50">
                                    <td class="p-4 font-bold text-navy-900"><?= htmlspecialchars($res['organization_name'], ENT_QUOTES, 'UTF-8') ?></td>
                                    <td class="p-4"><span class="bg-slate-200 text-slate-700 px-2 py-1 rounded text-xs font-bold"><?= htmlspecialchars($res['category_name'], ENT_QUOTES, 'UTF-8') ?></span></td>
                                    <td class="p-4 text-slate-600"><?= htmlspecialchars($res['full_name'], ENT_QUOTES, 'UTF-8') ?> <br><span class="text-xs"><?= htmlspecialchars($res['email'], ENT_QUOTES, 'UTF-8') ?></span></td>
                                    <td class="p-4">
                                        <?php if ($res['is_available']): ?>
                                            <span class="text-green-500 font-bold"><i class="fas fa-circle text-[10px]"></i> Active</span>
                                        <?php else: ?>
                                            <span class="text-red-500 font-bold"><i class="fas fa-circle text-[10px]"></i> Offline</span>
                                        <?php endif; ?>
                                    </td>
                                    <td class="p-4 text-right font-mono text-xs text-slate-500"><?= htmlspecialchars($res['base_latitude'], ENT_QUOTES, 'UTF-8') ?>, <br><?= htmlspecialchars($res['base_longitude'], ENT_QUOTES, 'UTF-8') ?></td>
                                </tr>
                            <?php endforeach; ?><?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
        </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            const $sidebar = $('#sidebar');
            const $overlay = $('#sidebar-overlay');
            const $toggleBtn = $('#sidebar-toggle');

            function toggleSidebar() {
                $sidebar.toggleClass('-translate-x-full');
                $overlay.toggleClass('hidden');
            }

            $toggleBtn.on('click', toggleSidebar);
            $overlay.on('click', toggleSidebar);

            $.ajaxSetup({
                error: function(jqXHR) {
                    if (this.global !== false) {
                        let msg = "An unexpected error occurred.";
                        if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                            msg = jqXHR.responseJSON.message;
                        }
                        showNotification('error', 'System Error', msg);
                    }
                }
            });
        });

        function showNotification(type, title, message) {
            Swal.fire({
                icon: type,
                title: title,
                text: message,
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 4000,
                timerProgressBar: true
            });
        }
    </script>
    <?= htmlspecialchars(Core\View::renderScripts(), ENT_QUOTES, 'UTF-8') ?>
</body>
</html>