<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Pusat Data KPH III Asahan' ?></title>
    <link rel="manifest" href="<?= base_url('manifest.json') ?>">
    <meta name="theme-color" content="#198754">
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f7f6;
            overflow-x: hidden;
        }
        
        /* Sidebar Styling */
        #sidebar {
            min-width: 260px;
            max-width: 260px;
            min-height: 100vh;
            background: #198754; /* Warna Hijau KPH */
            color: #fff;
            transition: all 0.3s;
        }
        
        #sidebar.active {
            margin-left: -260px;
        }
        
        /* Mobile Bottom Nav (Disembunyikan di Desktop) */
        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #ffffff;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        
        /* Tampilan Utama */
        #content {
            width: 100%;
            min-height: 100vh;
            transition: all 0.3s;
        }
        
        /* Card & UI Panel */
        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        /* Responsif untuk HP */
        @media (max-width: 768px) {
            #sidebar {
                margin-left: -260px; /* Sembunyikan sidebar di HP */
            }
            #sidebar.active {
                margin-left: 0;
            }
            .bottom-nav {
                display: flex; /* Tampilkan menu bawah di HP */
                justify-content: space-around;
                padding: 10px 0;
            }
            .main-wrapper {
                padding-bottom: 70px; /* Memberi ruang untuk bottom nav */
            }
        }
    </style>
</head>
<body>

    <div class="d-flex main-wrapper">
        <!-- Memanggil file sidebar -->
        <?= $this->include('v_template/sidebar') ?>

        <div id="content">
            <!-- Memanggil file topbar -->
            <?= $this->include('v_template/topbar') ?>

            <!-- Konten Utama Halaman -->
            <div class="container-fluid p-4">
                <?= $this->renderSection('content') ?>
            </div>
        </div>
    </div>

    <!-- Memanggil Navigasi Bawah Khusus HP -->
    <?= $this->include('v_template/bottom_nav') ?>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Script untuk Toggle Sidebar di Desktop -->
    <script>
        document.getElementById('sidebarCollapse').addEventListener('click', function () {
            document.getElementById('sidebar').classList.toggle('active');
        });
    </script>
    <!-- Script PWA / Offline Mode -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('<?= base_url('sw.js') ?>').then(function(registration) {
                    console.log('ServiceWorker sukses didaftarkan dengan scope: ', registration.scope);
                }, function(err) {
                    console.log('ServiceWorker gagal didaftarkan: ', err);
                });
            });
        }
    </script>
</body>
</html>