<?php 
    $settingsModel = new \App\Models\SettingsModel();
    $siteLogo = $settingsModel->getSetting('site_logo');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Admin' ?> | Saanvi Infratech Dashboard</title>

    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/css/style.css') ?>">
    <link rel="stylesheet" href="<?= base_url('assets/css/admin.css') ?>">
</head>
<body class="admin-body">

    <script>
        // Check theme preference before body renders to avoid flicker
        const theme = localStorage.getItem('admin-theme') || 'light';
        if (theme === 'dark') {
            document.body.classList.add('dark-mode');
        }
    </script>

    <div class="admin-wrapper">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <a href="<?= base_url('admin') ?>" class="logo" style="display: flex; align-items: center; gap: 12px; text-decoration: none;">
                    <?php if ($siteLogo): ?>
                        <div style="background: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden; border: 2px solid var(--primary); flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05);">
                            <img src="<?= $siteLogo ?>" alt="Logo" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                        </div>
                    <?php endif; ?>
                    <div style="display: flex; flex-direction: column; line-height: 1.1;">
                        <span style="color: var(--primary); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;">Saanvi</span>
                        <span style="color: var(--text-admin-main); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;">Infratech</span>
                    </div>
                </a>
            </div>

            <nav class="sidebar-menu">
                <a href="<?= base_url('admin') ?>" class="menu-item <?= current_url() == base_url('admin') ? 'active' : '' ?>">
                    <i class="bi bi-speedometer2"></i> Dashboard
                </a>
                <a href="<?= base_url('admin/services') ?>" class="menu-item <?= strpos(current_url(), 'services') !== false ? 'active' : '' ?>">
                    <i class="bi bi-grid-3x3-gap"></i> Services
                </a>
                <a href="<?= base_url('admin/projects') ?>" class="menu-item <?= strpos(current_url(), 'projects') !== false ? 'active' : '' ?>">
                    <i class="bi bi-folder2"></i> Projects
                </a>
                <a href="<?= base_url('admin/categories') ?>" class="menu-item <?= strpos(current_url(), 'categories') !== false ? 'active' : '' ?>">
                    <i class="bi bi-tags"></i> Categories
                </a>
                <a href="<?= base_url('admin/gallery') ?>" class="menu-item <?= strpos(current_url(), 'gallery') !== false ? 'active' : '' ?>">
                    <i class="bi bi-images"></i> Gallery
                </a>
                <a href="<?= base_url('admin/banners') ?>" class="menu-item <?= strpos(current_url(), 'banners') !== false ? 'active' : '' ?>">
                    <i class="bi bi-card-image"></i> Banners
                </a>
                <a href="<?= base_url('admin/employees') ?>" class="menu-item <?= strpos(current_url(), 'employees') !== false ? 'active' : '' ?>">
                    <i class="bi bi-people"></i> Employees
                </a>
                <a href="<?= base_url('admin/attendance') ?>" class="menu-item <?= strpos(current_url(), 'attendance') !== false ? 'active' : '' ?>">
                    <i class="bi bi-calendar-check"></i> Attendance
                </a>
                <a href="<?= base_url('admin/reports') ?>" class="menu-item <?= strpos(current_url(), 'reports') !== false ? 'active' : '' ?>">
                    <i class="bi bi-file-earmark-excel"></i> Reports
                </a>
                <a href="<?= base_url('admin/registers') ?>" class="menu-item <?= strpos(current_url(), 'registers') !== false ? 'active' : '' ?>">
                    <i class="bi bi-grid-3x3"></i> Registers
                </a>
                <a href="<?= base_url('admin/proposals') ?>" class="menu-item <?= strpos(current_url(), 'proposals') !== false ? 'active' : '' ?>">
                    <i class="bi bi-file-earmark-text"></i> Proposals
                </a>
                <a href="<?= base_url('admin/settings') ?>" class="menu-item <?= strpos(current_url(), 'settings') !== false ? 'active' : '' ?>">
                    <i class="bi bi-gear"></i> Settings
                </a>
            </nav>

            <div class="sidebar-footer">
                <a href="<?= base_url('logout') ?>" class="menu-item" style="color: #ff4757;">
                    <i class="bi bi-box-arrow-right"></i> Logout
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="admin-main">
            <!-- Topbar -->
            <header class="topbar">
                <div class="topbar-left">
                    <h4 style="color: var(--text-admin-main); font-family: 'Outfit'; margin: 0;"><?= $title ?></h4>
                </div>
                
                <div class="topbar-right">
                    <!-- Theme Toggle -->
                    <button id="theme-toggle" style="background: var(--bg-admin-card); border: 1px solid var(--border-admin); color: var(--text-admin-main); padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9rem; transition: all 0.3s;">
                        <i class="bi bi-moon-stars" id="theme-icon"></i>
                        <span id="theme-text">Dark Mode</span>
                    </button>
                    
                    <div class="profile-dropdown">
                        <div class="avatar"><?= substr(session()->get('name') ?? 'A', 0, 1) ?></div>
                        <div style="display: flex; flex-direction: column;">
                            <span style="color: var(--text-admin-main); font-size: 0.9rem; font-weight: 600;"><?= session()->get('name') ?? 'Admin' ?></span>
                            <span style="color: var(--text-admin-muted); font-size: 0.7rem; text-transform: uppercase;"><?= session()->get('role') ?? 'Manager' ?></span>
                        </div>
                    </div>
                </div>
            </header>

            <div class="content-body">
                <?= $this->renderSection('content') ?>
            </div>
        </main>
    </div>

    <script>
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = document.getElementById('theme-icon');
        const themeText = document.getElementById('theme-text');

        function updateThemeUI(isDark) {
            if (isDark) {
                themeIcon.className = 'bi bi-sun';
                themeText.innerText = 'Light Mode';
            } else {
                themeIcon.className = 'bi bi-moon-stars';
                themeText.innerText = 'Dark Mode';
            }
        }

        // Initial UI check
        updateThemeUI(document.body.classList.contains('dark-mode'));

        themeToggle.addEventListener('click', () => {
            const isDark = document.body.classList.toggle('dark-mode');
            localStorage.setItem('admin-theme', isDark ? 'dark' : 'light');
            updateThemeUI(isDark);
        });
    </script>
    <script src="<?= base_url('assets/js/main.js') ?>"></script>
</body>

</html>
