<!-- 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/incident_review.view.php -->
<div class="bg-slate-100 min-h-[calc(100vh-64px)] py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="mb-4">
            <a href="<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/incidents/pending" class="text-slate-500 hover:text-navy-900"><i class="fas fa-arrow-left"></i> Back to Pending</a>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column: Incident Data -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Top Header -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex justify-between items-center">
                    <div>
                        <h1 class="text-2xl font-bold text-navy-900">Incident #<?= htmlspecialchars(str_pad($incident['id'], 5, '0', STR_PAD_LEFT), ENT_QUOTES, 'UTF-8') ?></h1>
                        <p class="text-sm text-slate-500">Reported: <?= htmlspecialchars(date('F j, Y, g:i a', strtotime($incident['created_at'])), ENT_QUOTES, 'UTF-8') ?></p>
                    </div>
                    <div>
                        <?php if ($incident['status'] == 'pending'): ?>
                            <button id="verifyBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded shadow-md"><i class="fas fa-check-circle"></i> Verify Incident</button>
                        <?php else: ?>
                            <span class="bg-green-100 text-green-800 font-bold px-4 py-2 rounded border border-green-200"><i class="fas fa-check"></i> Verified</span>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Details & Map -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2">
                        <div class="p-6 border-r border-slate-100">
                            <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Victim Details</h3>
                            <div class="space-y-3 text-sm">
                                <p><strong class="block text-slate-500">Name</strong> <span class="text-lg"><?= htmlspecialchars($incident['victim_name'], ENT_QUOTES, 'UTF-8') ?></span></p>
                                <p><strong class="block text-slate-500">Phone</strong> <a href="tel:<?= htmlspecialchars($incident['victim_phone'], ENT_QUOTES, 'UTF-8') ?>" class="text-brandBlue-600 font-bold"><?= htmlspecialchars($incident['victim_phone'], ENT_QUOTES, 'UTF-8') ?></a></p>
                                <p><strong class="block text-slate-500">Category</strong> <span class="text-alert font-bold"><?= htmlspecialchars($incident['category_name'], ENT_QUOTES, 'UTF-8') ?></span></p>
                                <p><strong class="block text-slate-500">Description</strong> <span class="bg-slate-50 p-2 block mt-1 rounded border"><?= htmlspecialchars($incident['description'], ENT_QUOTES, 'UTF-8') ?></span></p>
                            </div>
                        </div>
                        <div class="p-6 bg-slate-50">
                            <h3 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4">Location Data</h3>
                            <div class="bg-white p-4 rounded border font-mono text-center mb-4">
                                <?= htmlspecialchars($incident['latitude'], ENT_QUOTES, 'UTF-8') ?>, <?= htmlspecialchars($incident['longitude'], ENT_QUOTES, 'UTF-8') ?>
                            </div>
                            <a href="https://www.google.com/maps/search/?api=1&query=<?= htmlspecialchars($incident['latitude'], ENT_QUOTES, 'UTF-8') ?>,<?= htmlspecialchars($incident['longitude'], ENT_QUOTES, 'UTF-8') ?>" target="_blank" class="block w-full text-center bg-slate-200 hover:bg-slate-300 text-slate-700 py-2 rounded transition-colors font-medium">
                                <i class="fas fa-map-marked-alt"></i> Open in Google Maps
                            </a>
                            <?php if ($incident['image_url']): ?>
                                <div class="mt-4">
                                    <strong class="block text-slate-500 text-xs uppercase mb-1">Evidence</strong>
                                    <a href="<?= htmlspecialchars(MEDIA_URL, ENT_QUOTES, 'UTF-8') ?>/<?= htmlspecialchars($incident['image_url'], ENT_QUOTES, 'UTF-8') ?>" target="_blank">
                                        <img src="<?= htmlspecialchars(MEDIA_URL, ENT_QUOTES, 'UTF-8') ?>/<?= htmlspecialchars($incident['image_url'], ENT_QUOTES, 'UTF-8') ?>" class="w-full h-32 object-cover rounded border">
                                    </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Dispatch & Timeline -->
            <div class="lg:col-span-1 space-y-6">
                <!-- Dispatcher Module -->
                <div class="bg-navy-950 rounded-xl shadow-lg border border-navy-800 text-white overflow-hidden">
                    <div class="p-4 border-b border-navy-800 bg-navy-900 font-bold flex items-center gap-2">
                        <i class="fas fa-satellite-dish text-brandBlue-400"></i> Active Dispatch Routing
                    </div>
                    <div class="p-4">
                        <?php if ($incident['status'] == 'pending'): ?>
                            <div class="text-center text-slate-400 py-6 text-sm">Please verify the incident first to unlock routing.</div>
                        <?php elseif ($incident['status'] == 'verified'): ?>
                            <h4 class="text-sm text-slate-300 mb-3">Nearest <?= htmlspecialchars($incident['category_name'], ENT_QUOTES, 'UTF-8') ?> Responders (Haversine)</h4>
                            <form id="dispatchForm">
                                <div class="space-y-2 mb-4 max-h-60 overflow-y-auto">
                                    <?php if (empty($nearestResponders)): ?>
                                        <div class="text-red-400 text-sm p-3 bg-red-900/30 rounded border border-red-800">No available units found.</div>
                                    <?php else: ?><?php foreach ($nearestResponders as $res): ?>
                                            <label class="flex items-start gap-3 p-3 rounded-lg border border-navy-700 bg-navy-800 hover:bg-navy-700 cursor-pointer transition-colors">
                                                <input type="radio" name="responder_id" value="<?= htmlspecialchars($res['id'], ENT_QUOTES, 'UTF-8') ?>" class="mt-1 accent-brandBlue-500" required>
                                                <div>
                                                    <div class="font-bold"><?= htmlspecialchars($res['organization_name'], ENT_QUOTES, 'UTF-8') ?></div>
                                                    <div class="text-xs text-brandBlue-300">Unit ID: #<?= htmlspecialchars($res['id'], ENT_QUOTES, 'UTF-8') ?> - <?= htmlspecialchars($res['full_name'], ENT_QUOTES, 'UTF-8') ?></div>
                                                    <div class="text-xs text-green-400 font-mono mt-1"><i class="fas fa-route"></i> <?= htmlspecialchars(number_format($res['distance'], 2), ENT_QUOTES, 'UTF-8') ?> km away</div>
                                                </div>
                                            </label>
                                        <?php endforeach; ?><?php endif; ?>
                                </div>
                                <button type="submit" id="dispatchBtn" class="w-full bg-alert hover:bg-red-600 text-white font-bold py-3 rounded shadow-lg transition-colors">
                                    DISPATCH SELECTED UNIT
                                </button>
                            </form>
                        <?php else: ?>
                            <div class="text-center py-6">
                                <i class="fas fa-check-circle text-4xl text-green-500 mb-2 block"></i>
                                <div class="font-bold">Unit Dispatched</div>
                                <div class="text-sm text-slate-300 mt-1">Assigned to: <?= htmlspecialchars($incident['responder_org'], ENT_QUOTES, 'UTF-8') ?></div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Timeline -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4">
                    <h3 class="font-bold text-navy-900 mb-4 border-b pb-2"><i class="fas fa-history mr-1 text-slate-400"></i> Event Timeline</h3>
                    <div class="space-y-4 max-h-80 overflow-y-auto">
                        <?php foreach ($timeline as $event): ?>
                            <div class="flex gap-3 text-sm">
                                <div class="mt-1 w-2 h-2 rounded-full bg-brandBlue-500 flex-shrink-0"></div>
                                <div>
                                    <div class="font-semibold text-slate-800"><?= htmlspecialchars($event['action_type'], ENT_QUOTES, 'UTF-8') ?></div>
                                    <div class="text-slate-600 text-xs"><?= htmlspecialchars($event['action_details'], ENT_QUOTES, 'UTF-8') ?></div>
                                    <div class="text-slate-400 text-[10px] mt-1"><?= htmlspecialchars(date('M d, Y h:i:s A', strtotime($event['created_at'])), ENT_QUOTES, 'UTF-8') ?> - <?= htmlspecialchars($event['actor_name'], ENT_QUOTES, 'UTF-8') ?></div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </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') ?>
<script>
$(document).ready(function() {
    const incidentId = <?= htmlspecialchars($incident['id'], ENT_QUOTES, 'UTF-8') ?>;

    $('#verifyBtn').on('click', function() {
        let $btn = $(this);
        let orig = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin"></i>').prop('disabled', true);
        
        $.ajax({
            url: `<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/incidents/${incidentId}/verify`,
            type: 'POST',
            success: function(res) {
                if(res.status === 'success') {
                    showNotification('success', 'Verified', res.message);
                    setTimeout(() => window.location.reload(), 1000);
                }
            },
            error: function() {
                showNotification('error', 'Error', 'Verification failed.');
                $btn.html(orig).prop('disabled', false);
            }
        });
    });

    $('#dispatchForm').on('submit', function(e) {
        e.preventDefault();
        let $btn = $('#dispatchBtn');
        let orig = $btn.html();
        $btn.html('<i class="fas fa-spinner fa-spin"></i> DISPATCHING...').prop('disabled', true);

        $.ajax({
            url: `<?= htmlspecialchars(APP_URL, ENT_QUOTES, 'UTF-8') ?>/admin/incidents/${incidentId}/dispatch`,
            type: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                if(res.status === 'success') {
                    Swal.fire('Dispatched!', res.message, 'success').then(() => window.location.reload());
                }
            },
            error: function(xhr) {
                let msg = xhr.responseJSON ? xhr.responseJSON.message : 'Dispatch failed.';
                showNotification('error', 'Error', msg);
                $btn.html(orig).prop('disabled', false);
            }
        });
    });
});
</script>
</body>
</html>