<?php
// layout_admin.php - Pake di semua halaman admin
if(!isset($_SESSION)) session_start();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIMJEBPW - <?= $title?? 'Dashboard'?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --sidebar-width: 260px;
            --header-height: 56px;
        }
        
        body {
            font-size:.875rem;
            background: #f8f9fa;
        }
        
        /* HEADER */
       .navbar {
            height: var(--header-height);
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
        }
        
        /* SIDEBAR */
       .sidebar {
            position: fixed;
            top: var(--header-height);
            left: 0;
            width: var(--sidebar-width);
            height: calc(100vh - var(--header-height));
            background: #212529;
            overflow-y: auto;
            transition: all 0.3s;
            z-index: 1000;
        }
        
       .sidebar.nav-link {
            color: #adb5bd;
            padding: 12px 20px;
            font-weight: 500;
            border-left: 3px solid transparent;
        }
        
       .sidebar.nav-link:hover,.sidebar.nav-link.active {
            color: #fff;
            background: #343a40;
            border-left-color: #0d6efd;
        }
        
       .sidebar.nav-link i {
            width: 20px;
            margin-right: 10px;
        }
        
        /* KONTEN UTAMA */
       .main-content {
            margin-left: var(--sidebar-width);
            padding: 20px;
            padding-top: calc(var(--header-height) + 20px);
            min-height: 100vh;
            transition: all 0.3s;
        }
        
        /* RESPONSIVE HP */
        @media (max-width: 991.98px) {
           .sidebar {
                left: calc(-1 * var(--sidebar-width));
            }
           .sidebar.show {
                left: 0;
                box-shadow: 3px 0 10px rgba(0,0,0,.2);
            }
           .main-content {
                margin-left: 0;
            }
           .overlay {
                display: none;
                position: fixed;
                top: var(--header-height);
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,.5);
                z-index: 999;
            }
           .overlay.show {
                display: block;
            }
        }
        
        /* TABEL RESPONSIVE */
       .table-responsive {
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
        }
        
        /* CARD STATISTIK HP */
        @media (max-width: 767.98px) {
           .stat-card h3 { font-size: 1.5rem; }
           .btn-group.btn { padding:.25rem.5rem; font-size:.75rem; }
        }
    </style>
</head>
<body>
    <!-- HEADER + TOMBOL HAMBURGER -->
    <nav class="navbar navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <button class="btn btn-dark d-lg-none" id="sidebarToggle">
                <i class="bi bi-list fs-4"></i>
            </button>
            <a class="navbar-brand mx-auto mx-lg-0" href="dashboard.php">
                <img src="../assets/img/logo-gbi.JPG" height="30" class="me-2"> SIMJEBPW
            </a>
            <div class="dropdown">
                <a class="text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="bi bi-person-circle"></i> <?= $_SESSION['nama']?? 'Admin'?>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="profil.php"><i class="bi bi-person"></i> Profil</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="../logout.php"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- SIDEBAR -->
    <div class="sidebar" id="sidebar">
        <ul class="nav flex-column pt-3">
            <li class="nav-item">
                <a class="nav-link <?= $menu=='dashboard'?'active':''?>" href="dashboard.php">
                    <i class="bi bi-speedometer2"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='gereja'?'active':''?>" href="data_gereja.php">
                    <i class="bi bi-building"></i> Data Gereja
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='gembala'?'active':''?>" href="data_gembala.php">
                    <i class="bi bi-person-badge"></i> Data Gembala
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='jemaat'?'active':''?>" href="data_jemaat.php">
                    <i class="bi bi-people"></i> Data Jemaat
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='inventaris'?'active':''?>" href="data_inventaris.php">
                    <i class="bi bi-box-seam"></i> Inventaris DPW
                </a>
            </li>
            <li class="nav-item mt-3">
                <h6 class="text-muted px-3 text-uppercase small">Laporan</h6>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='lap_rekap'?'active':''?>" href="../api/cetak_rekap_dpw_pdf.php" target="_blank">
                    <i class="bi bi-file-earmark-pdf text-success"></i> Rekapitulasi
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='lap_gereja'?'active':''?>" href="../api/cetak_gereja_dpw_pdf.php" target="_blank">
                    <i class="bi bi-file-earmark-pdf text-primary"></i> Lap. Gereja
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='lap_gembala'?'active':''?>" href="../api/cetak_gembala_dpw_pdf.php" target="_blank">
                    <i class="bi bi-file-earmark-pdf text-warning"></i> Lap. Gembala
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link <?= $menu=='lap_inventaris'?'active':''?>" href="../api/cetak_inventaris_dpw_pdf.php" target="_blank">
                    <i class="bi bi-file-earmark-pdf text-secondary"></i> Lap. Inventaris
                </a>
            </li>
        </ul>
    </div>

    <!-- OVERLAY BUAT HP -->
    <div class="overlay" id="overlay"></div>

    <!-- KONTEN UTAMA -->
    <main class="main-content">