<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title><?= APP_NAME ?> - <?= $title ?? 'Dashboard' ?></title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="<?= APP_URL ?>/public/assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= APP_URL ?>/public/assets/favicon/favicon-16x16.png">
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        :root {
            --nis-primary: #006747;
            --nis-secondary: #00843D;
            --nis-accent: #FFD100;
            --nis-dark: #004225;
            --nis-light: #E8F0E8;
            --sidebar-width: 240px; /* Reduced from 280px */
            --sidebar-collapsed-width: 0px;
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
            min-height: 100vh;
            position: relative;
        }
        
        /* Sidebar Styles - REDUCED WIDTH ONLY */
        #sidebar {
            min-width: var(--sidebar-width);
            max-width: var(--sidebar-width);
            background: linear-gradient(180deg, var(--nis-primary) 0%, var(--nis-dark) 100%);
            color: #fff;
            transition: all 0.3s ease;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            min-height: 100vh;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 1000;
        }
        
        #sidebar.active {
            margin-left: calc(-1 * var(--sidebar-width));
        }
        
        #sidebar .sidebar-header {
            padding: 15px 10px;
            text-align: center;
            border-bottom: 2px solid var(--nis-accent);
            background: rgba(0,0,0,0.1);
        }
        
        #sidebar .sidebar-header img {
            width: 50px;
            height: 50px;
            margin-bottom: 8px;
            border-radius: 50%;
            background: white;
            padding: 5px;
        }
        
        #sidebar .sidebar-header h3 {
            color: var(--nis-accent);
            font-size: 0.9rem;
            margin: 3px 0 0;
            font-weight: 600;
            line-height: 1.2;
        }
        
        #sidebar ul.components {
            padding: 10px 0;
            list-style: none;
            margin: 0;
        }
        
        #sidebar ul li {
            margin: 1px 0;
        }
        
        #sidebar ul li a {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            color: #fff;
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
            font-size: 0.85rem;
        }
        
        #sidebar ul li a i {
            width: 22px;
            font-size: 1rem;
            margin-right: 8px;
            text-align: center;
        }
        
        #sidebar ul li a:hover {
            background: rgba(255,255,255,0.1);
            border-left-color: var(--nis-accent);
            padding-left: 20px;
        }
        
        #sidebar ul li.active a {
            background: rgba(255,255,255,0.2);
            border-left-color: var(--nis-accent);
        }
        
        #sidebar ul li a.logout-btn {
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 8px;
        }
        
        #sidebar ul li a.logout-btn:hover {
            background: #dc3545;
            border-left-color: #ffc107;
        }
        
        .sidebar-footer {
            padding: 10px;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: auto;
        }
        
        .user-info-mini {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .user-info-mini i {
            font-size: 1.8rem;
            margin-bottom: 3px;
            color: var(--nis-accent);
        }
        
        .user-info-mini span {
            font-weight: 600;
            font-size: 0.8rem;
        }
        
        .user-info-mini small {
            font-size: 0.65rem;
            opacity: 0.8;
        }
        
        /* Main Content Area */
        #content {
            width: 100%;
            padding: 15px;
            transition: all 0.3s;
            background: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* Navbar Styles */
        .navbar {
            background: white !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            border-radius: 12px;
            padding: 10px 15px;
        }
        
        .navbar .container-fluid {
            padding: 0;
        }
        
        .sidebar-toggle {
            background: var(--nis-primary);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }
        
        .sidebar-toggle:hover {
            background: var(--nis-dark);
            transform: scale(1.05);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .user-info i {
            font-size: 1.8rem;
            color: var(--nis-primary);
        }
        
        .user-info .user-details {
            line-height: 1.2;
            text-align: right;
        }
        
        .user-info .user-name {
            font-weight: 600;
            color: var(--nis-dark);
            font-size: 0.85rem;
        }
        
        .user-info .user-role {
            font-size: 0.7rem;
            color: #6c757d;
        }
        
        /* Card Styles */
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            transition: transform 0.3s ease;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,103,71,0.15);
        }
        
        .card-header {
            background: transparent;
            border-bottom: 2px solid var(--nis-light);
            padding: 12px 15px;
            font-weight: 600;
            color: var(--nis-dark);
            font-size: 0.95rem;
        }
        
        .card-header i {
            color: var(--nis-primary);
            margin-right: 6px;
        }
        
        .card-body {
            padding: 15px;
        }
        
        /* Stat Cards */
        .stat-card {
            background: linear-gradient(135deg, var(--nis-primary) 0%, var(--nis-dark) 100%);
            color: white;
            border-radius: 15px;
            padding: 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .stat-card .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 3px;
        }
        
        .stat-card .stat-label {
            font-size: 0.8rem;
            opacity: 0.9;
        }
        
        .stat-card .stat-icon {
            font-size: 2.2rem;
            opacity: 0.3;
            margin-top: 8px;
            align-self: flex-end;
        }
        
        /* Dropdown Styles */
        #sidebar .dropdown-menu {
            background: rgba(0, 0, 0, 0.3);
            border: none;
            border-radius: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative !important;
            transform: none !important;
            box-shadow: none;
        }
        
        #sidebar .dropdown-item {
            color: #fff;
            padding: 8px 15px 8px 38px;
            font-size: 0.8rem;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }
        
        #sidebar .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-left-color: var(--nis-accent);
        }
        
        #sidebar .dropdown-item i {
            width: 18px;
            margin-right: 6px;
        }
        
        /* Ensure dropdown stays within sidebar */
        #sidebar .dropdown-menu.show {
            display: block;
            position: static;
            float: none;
        }
        
        /* Remove default Bootstrap dropdown arrow */
        #sidebar .dropdown-toggle::after {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        /* Active state for parent */
        #sidebar li.active .dropdown-toggle {
            background: rgba(255, 255, 255, 0.2);
            border-left-color: var(--nis-accent);
        }
        
        /* Mobile Responsive */
        @media (max-width: 991.98px) {
            #sidebar {
                margin-left: calc(-1 * var(--sidebar-width));
                position: fixed;
                z-index: 1050;
                transition: margin-left 0.3s ease;
            }
            
            #sidebar.active {
                margin-left: 0;
            }
            
            #content {
                width: 100%;
                margin-left: 0;
            }
            
            .navbar {
                padding: 8px 12px;
            }
            
            .user-info .user-details {
                display: none;
            }
            
            .user-info i {
                font-size: 2rem;
            }
            
            .stat-card {
                margin-bottom: 12px;
            }
            
            .stat-card .stat-value {
                font-size: 1.6rem;
            }
        }
        
        @media (max-width: 767.98px) {
            h2 {
                font-size: 1.5rem;
            }
            
            .card-header {
                padding: 12px 15px;
                font-size: 1rem;
            }
            
            .card-body {
                padding: 15px;
            }
            
            .stat-card {
                padding: 15px;
            }
            
            .stat-card .stat-value {
                font-size: 1.6rem;
            }
            
            .stat-card .stat-icon {
                font-size: 2rem;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .table-responsive {
                border: 0;
                margin: 0 -15px;
                width: calc(100% + 30px);
            }
            
            .table {
                min-width: 500px;
            }
            
            .footer .row > div {
                text-align: center !important;
                margin-bottom: 5px;
            }
            
            .footer .row > div:last-child {
                margin-bottom: 0;
            }
        }
        
        @media (max-width: 575.98px) {
            h2 {
                font-size: 1.3rem;
            }
            
            .card-header {
                padding: 10px 12px;
            }
            
            .card-body {
                padding: 12px;
            }
            
            .stat-card .stat-value {
                font-size: 1.4rem;
            }
            
            .stat-card .stat-label {
                font-size: 0.8rem;
            }
            
            .badge {
                font-size: 0.7rem;
                padding: 4px 8px;
            }
            
            .form-control, .form-select {
                padding: 8px 12px;
                font-size: 0.9rem;
            }
            
            .footer {
                padding: 12px;
                font-size: 0.8rem;
            }
        }
        
        /* Buttons */
        .btn-nis, .btn-outline-nis {
            padding: 8px 16px;
            font-size: 0.9rem;
        }
        
        .btn-sm {
            padding: 5px 10px;
            font-size: 0.8rem;
            min-height: 32px;
        }
        
        /* Table Styles */
        .table th, .table td {
            padding: 10px 8px;
            font-size: 0.85rem;
        }
        
        .badge {
            padding: 4px 8px;
            font-size: 0.7rem;
        }
        
        /* Footer */
        .footer {
            padding: 12px 15px;
            font-size: 0.8rem;
        }
        
        /* Timeline */
        .timeline-icon .rounded-circle {
            width: 35px;
            height: 35px;
        }
        
        .timeline-content {
            padding: 12px;
        }
        
        /* Form Controls */
        .form-control, .form-select {
            padding: 8px 12px;
            font-size: 0.9rem;
        }
        
        /* Touch-friendly improvements */
        button, a {
            min-height: 44px;
            min-width: 44px;
        }
        
        .btn-sm {
            min-height: 36px;
            min-width: 36px;
        }
        
        /* Loading states */
        .btn-loading {
            position: relative;
            pointer-events: none;
            opacity: 0.7;
        }
        
        .btn-loading:after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid white;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spinner 0.6s linear infinite;
        }
        
        @keyframes spinner {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <?php if (isset($_SESSION['user_id']) && !strpos($_SERVER['REQUEST_URI'], '/login')): ?>
    <div class="wrapper">
        <!-- Sidebar - Now 240px wide -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src="<?= APP_URL ?>/public/assets/images/nis-logo-white.png" 
                     alt="NIS Logo"
                     onerror="this.src='https://via.placeholder.com/50x50?text=NIS';">
                <h3>NIS MIGRANT<br>e-REGISTRATION</h3>
            </div>
            
            <?php 
            $userRole = $_SESSION['role'] ?? '';
            $currentUri = $_SERVER['REQUEST_URI'];
            ?>
            
            <ul class="list-unstyled components">
                <li class="<?= strpos($currentUri, '/dashboard') !== false ? 'active' : '' ?>">
                    <a href="<?= APP_URL ?>/dashboard">
                        <i class="fas fa-tachometer-alt"></i> Dashboard
                    </a>
                </li>
                
                <?php if (in_array($userRole, ['ImmigrationOfficer', 'Admin', 'SuperAdmin'])): ?>
                <li class="<?= strpos($currentUri, '/migrants/create') !== false ? 'active' : '' ?>">
                    <a href="<?= APP_URL ?>/migrants/create">
                        <i class="fas fa-user-plus"></i> New Registration
                    </a>
                </li>
                <?php endif; ?>
                
                <li class="<?= strpos($currentUri, '/migrants/search') !== false ? 'active' : '' ?>">
                    <a href="<?= APP_URL ?>/migrants/search">
                        <i class="fas fa-search"></i> Search Migrants
                    </a>
                </li>
                
                <?php if (in_array($userRole, ['Admin', 'SuperAdmin', 'Reviewer'])): ?>
                <!-- Reviews Dropdown -->
                <li class="nav-item dropdown <?= (strpos($currentUri, '/pending') !== false || strpos($currentUri, '/approved') !== false || strpos($currentUri, '/rejected') !== false) ? 'active' : '' ?>">
                    <a class="nav-link dropdown-toggle" href="#" id="reviewsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-clipboard-check"></i> Reviews
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="reviewsDropdown">
                        <!--<li>-->
                        <!--    <a class="dropdown-item" href="<?= APP_URL ?>/pending">-->
                        <!--        <i class="fas fa-clock me-2" style="color: #ffc107;"></i> Pending-->
                        <!--    </a>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--    <a class="dropdown-item" href="<?= APP_URL ?>/approved">-->
                        <!--        <i class="fas fa-check-circle me-2" style="color: #28a745;"></i> Approved-->
                        <!--    </a>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--    <a class="dropdown-item" href="<?= APP_URL ?>/rejected">-->
                        <!--        <i class="fas fa-times-circle me-2" style="color: #dc3545;"></i> Rejected-->
                        <!--    </a>-->
                        <!--</li>-->
                    </ul>
                </li>
                <?php endif; ?>
                
                <?php if ($userRole === 'SuperAdmin'): ?>
                <li class="<?= strpos($currentUri, '/users') !== false ? 'active' : '' ?>">
                    <a href="<?= APP_URL ?>/users">
                        <i class="fas fa-users-cog"></i> User Management
                    </a>
                </li>
                <?php endif; ?>
                
                <li class="<?= strpos($currentUri, '/profile') !== false ? 'active' : '' ?>">
                    <a href="<?= APP_URL ?>/profile">
                        <i class="fas fa-user-circle"></i> My Profile
                    </a>
                </li>
                
                <li>
                    <a href="<?= APP_URL ?>/logout" class="logout-btn" onclick="return confirm('Are you sure you want to logout?');">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </a>
                </li>
            </ul>
            
            <div class="sidebar-footer">
                <div class="user-info-mini">
                    <i class="fas fa-user-shield"></i>
                    <span><?= htmlspecialchars($_SESSION['full_name'] ?? 'User') ?></span>
                    <small><?= $userRole ?></small>
                </div>
            </div>
        </nav>

        <!-- Page Content -->
        <div id="content">
            <nav class="navbar">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="sidebar-toggle d-lg-none">
                        <i class="fas fa-bars"></i>
                    </button>
                    
                    <div class="ms-auto d-flex align-items-center">
                        <img src="<?= APP_URL ?>/public/assets/images/nis-logo.png" 
                             alt="NIS" 
                             style="height: 30px; margin-right: 15px; display: none;"
                             class="d-none d-sm-block"
                             onerror="this.style.display='none'">
                        <div class="user-info">
                            <i class="fas fa-user-circle"></i>
                            <div class="user-details">
                                <div class="user-name"><?= htmlspecialchars($_SESSION['full_name'] ?? 'User') ?></div>
                                <div class="user-role"><?= $userRole ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- Alert Messages -->
            <?php if (isset($_SESSION['success'])): ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i>
                    <span><?= $_SESSION['success'] ?></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <?php unset($_SESSION['success']); ?>
            <?php endif; ?>
            
            <?php if (isset($_SESSION['error'])): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    <span><?= $_SESSION['error'] ?></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <?php unset($_SESSION['error']); ?>
            <?php endif; ?>
            
            <?php if (isset($_SESSION['warning'])): ?>
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span><?= $_SESSION['warning'] ?></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                <?php unset($_SESSION['warning']); ?>
            <?php endif; ?>

            <!-- Main Content -->
            <?= $content ?? '' ?>

            <!-- Footer -->
            <div class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 text-md-start text-center mb-2 mb-md-0">
                            <p class="mb-0">&copy; 2026 Nigeria Immigration Service. All rights reserved.</p>
                        </div>
                        <div class="col-md-6 text-md-end text-center">
                            <p class="mb-0 small">Designed and Developed by NIS Web Team</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const toggleBtn = document.getElementById('sidebarCollapse');
            
            if (toggleBtn) {
                toggleBtn.addEventListener('click', function() {
                    sidebar.classList.toggle('active');
                    
                    // Close sidebar when clicking outside on mobile
                    if (window.innerWidth <= 991.98) {
                        document.addEventListener('click', function closeSidebar(e) {
                            if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && sidebar.classList.contains('active')) {
                                sidebar.classList.remove('active');
                                document.removeEventListener('click', closeSidebar);
                            }
                        });
                    }
                });
            }
            
            // Auto-hide alerts after 5 seconds
            setTimeout(function() {
                document.querySelectorAll('.alert').forEach(function(alert) {
                    alert.style.transition = 'opacity 0.5s';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        alert.remove();
                    }, 500);
                });
            }, 5000);
        });
    </script>
    
    <?php else: ?>
        <!-- No sidebar for login page -->
        <?= $content ?? '' ?>
    <?php endif; ?>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // CSRF token for AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '<?= $_SESSION['csrf_token'] ?? '' ?>'
            }
        });
        
        // Handle responsive tables
        function makeTablesResponsive() {
            document.querySelectorAll('.table').forEach(function(table) {
                if (!table.parentElement.classList.contains('table-responsive')) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'table-responsive';
                    table.parentNode.insertBefore(wrapper, table);
                    wrapper.appendChild(table);
                }
            });
        }
        
        // Make all buttons full width on mobile
        function adjustButtons() {
            if (window.innerWidth <= 767.98) {
                document.querySelectorAll('.btn:not(.btn-sm):not(.sidebar-toggle)').forEach(function(btn) {
                    btn.style.width = '100%';
                    btn.style.marginBottom = '5px';
                });
            } else {
                document.querySelectorAll('.btn').forEach(function(btn) {
                    btn.style.width = '';
                    btn.style.marginBottom = '';
                });
            }
        }
        
        // Run on load and resize
        makeTablesResponsive();
        adjustButtons();
        window.addEventListener('resize', adjustButtons);
    
        // Initialize Bootstrap dropdowns
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize dropdowns
            var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
            var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
                return new bootstrap.Dropdown(dropdownToggleEl, {
                    autoClose: true
                });
            });
            
            // Handle dropdown clicks on mobile
            if (window.innerWidth <= 991.98) {
                document.querySelectorAll('.dropdown-toggle').forEach(function(element) {
                    element.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        // Close other open dropdowns
                        document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                            if (menu !== this.nextElementSibling) {
                                menu.classList.remove('show');
                            }
                        });
                        
                        // Toggle current dropdown
                        const dropdownMenu = this.nextElementSibling;
                        dropdownMenu.classList.toggle('show');
                    });
                });
            }
        });
    </script>
</body>
</html>