<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title ?? 'Admin Dashboard') ?> - Premium Spice Exports</title>
    <link rel="icon" type="image/png" href="<?= base_url('assets/images/logo.png') ?>">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-green: #2b5329;
            --accent-gold: #d4af37;
            --earthy-brown: #5c4033;
            --light-bg: #f8f9fa;
            --sidebar-width: 250px;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--light-bg);
            overflow-x: hidden;
        }
        #wrapper {
            display: flex;
            width: 100%;
        }
        #sidebar {
            width: var(--sidebar-width);
            background-color: var(--primary-green);
            color: #fff;
            min-height: 100vh;
            transition: all 0.3s;
        }
        #sidebar .sidebar-header {
            padding: 20px;
            background: rgba(0,0,0,0.1);
            text-align: center;
        }
        #sidebar .sidebar-header h4 {
            font-family: 'Playfair Display', serif;
            color: var(--accent-gold);
            margin: 0;
            font-weight: 700;
        }
        #sidebar ul.components {
            padding: 20px 0;
        }
        #sidebar ul p {
            color: #fff;
            padding: 10px;
        }
        #sidebar ul li a {
            padding: 12px 20px;
            font-size: 1.1em;
            display: block;
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: 0.2s;
        }
        #sidebar ul li a:hover, #sidebar ul li.active > a {
            color: #fff;
            background: rgba(255,255,255,0.1);
            border-left: 4px solid var(--accent-gold);
        }
        #sidebar ul li a i {
            margin-right: 10px;
            color: var(--accent-gold);
        }
        #content {
            width: calc(100% - var(--sidebar-width));
            min-height: 100vh;
            transition: all 0.3s;
        }
        .navbar {
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 15px 20px;
        }
        .main-content {
            padding: 30px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            font-weight: 600;
            padding: 15px 20px;
        }
    </style>
    <?= $this->renderSection('styles') ?>
</head>
<body>

<div id="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <a href="<?= base_url('admin/dashboard') ?>">
                <img src="<?= base_url('assets/images/logo.png') ?>" alt="Logo" class="img-fluid" style="max-height: 60px;">
            </a>
        </div>

        <ul class="list-unstyled components">
            <li class="<?= (url_is('admin/dashboard') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/dashboard') ?>"><i class="bi bi-speedometer2"></i> Dashboard</a>
            </li>
            <li class="<?= (url_is('admin/banners*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/banners') ?>"><i class="bi bi-images"></i> Banners</a>
            </li>
            <li class="<?= (url_is('admin/certifications*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/certifications') ?>"><i class="bi bi-patch-check"></i> Certifications</a>
            </li>
            <li class="<?= (url_is('admin/enquiries*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/enquiries') ?>"><i class="bi bi-envelope"></i> Enquiries</a>
            </li>
            <li class="<?= (url_is('admin/products*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/products') ?>"><i class="bi bi-box-seam"></i> Products</a>
            </li>
            <li class="<?= (url_is('admin/categories*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/categories') ?>"><i class="bi bi-tags"></i> Categories</a>
            </li>
            <li class="<?= (url_is('admin/gallery*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/gallery') ?>"><i class="bi bi-card-image"></i> Gallery</a>
            </li>
            <li class="<?= (url_is('admin/pages*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/pages') ?>"><i class="bi bi-file-earmark-text"></i> Pages</a>
            </li>
            <li class="<?= (url_is('admin/settings*') ? 'active' : '') ?>">
                <a href="<?= base_url('admin/settings') ?>"><i class="bi bi-gear"></i> Settings</a>
            </li>
        </ul>
    </nav>

    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-light d-lg-none">
                    <i class="bi bi-list"></i>
                </button>
                
                <div class="ms-auto d-flex align-items-center">
                    <span class="me-3 fw-semibold"><?= session()->get('admin_name') ?></span>
                    <a href="<?= base_url('admin/profile') ?>" class="btn btn-outline-secondary btn-sm me-2"><i class="bi bi-person-lock"></i> Password</a>
                    <a href="<?= base_url('admin/logout') ?>" class="btn btn-outline-danger btn-sm">Logout</a>
                </div>
            </div>
        </nav>

        <!-- Main Content Area -->
        <div class="main-content">
            <?php if (session()->getFlashdata('success')) : ?>
                <div class="alert alert-success alert-dismissible fade show">
                    <?= session()->getFlashdata('success') ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>
            <?php if (session()->getFlashdata('error')) : ?>
                <div class="alert alert-danger alert-dismissible fade show">
                    <?= session()->getFlashdata('error') ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>

            <?= $this->renderSection('content') ?>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS Bundle with Popper -->
<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>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
    $(document).ready(function () {
        $('.summernote').summernote({
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
            // Add simple logic for mobile sidebar toggle if needed
            if($(window).width() < 992) {
                if($('#sidebar').css('margin-left') == '-250px') {
                    $('#sidebar').css('margin-left', '0');
                } else {
                    $('#sidebar').css('margin-left', '-250px');
                }
            }
        });
    });
</script>
<?= $this->renderSection('scripts') ?>
</body>
</html>
