<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($pageTitle ?? 'Dashboard') ?> – <?= e(setting('shop_name','MJPOS')) ?></title>
<?php $favicon = setting('site_icon',''); ?>
<?php if($favicon): ?>
<link rel="icon" type="image/png" href="<?= UPLOAD_URL ?>/<?= e($favicon) ?>">
<link rel="apple-touch-icon" href="<?= UPLOAD_URL ?>/<?= e($favicon) ?>">
<?php else: ?>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%230f172a'/><text x='16' y='22' text-anchor='middle' font-size='18' font-family='Arial' font-weight='bold' fill='%233b82f6'>M</text></svg>">
<?php endif; ?>
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
:root{--sidebar-w:240px}
body{display:flex;flex-direction:column;min-height:100vh;background:#f5f6fa;font-size:.9rem}
#wrapper{display:flex;flex:1;overflow:hidden}

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:#1a2235;
  height:100vh;
  position:sticky;top:0;
  display:flex;flex-direction:column;
  transition:width .25s;
  flex-shrink:0;
  z-index:200;
}
#sidebar.collapsed{width:64px;min-width:64px}
.sidebar-brand{
  padding:16px 20px;color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.sidebar-brand i{font-size:1.4rem;flex-shrink:0}
.brand-text{white-space:nowrap;overflow:hidden}
#sidebar.collapsed .brand-text,
#sidebar.collapsed .nav-label,
#sidebar.collapsed .menu-text{display:none}

/* Nav scroll area */
.nav-section{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 0 16px;
  /* Scrollbar styling */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.nav-section::-webkit-scrollbar{width:4px}
.nav-section::-webkit-scrollbar-track{background:transparent}
.nav-section::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.nav-section::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}

/* Fade indicator at bottom of sidebar */
#sidebar::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:32px;
  background:linear-gradient(transparent, rgba(26,34,53,.95));
  pointer-events:none;
  z-index:1;
}
#sidebar.collapsed::after{display:none}

.nav-label{
  font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.28);padding:14px 20px 4px;white-space:nowrap;overflow:hidden;
}
.sidebar-link{
  display:flex;align-items:center;gap:10px;padding:8px 20px;
  color:rgba(255,255,255,.62);
  text-decoration:none;transition:all .12s;white-space:nowrap;overflow:hidden;border-radius:0;
}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-link.active{
  background:rgba(13,110,253,.28);color:#fff;
  border-left:3px solid #0d6efd;padding-left:17px;
}
.sidebar-link i{font-size:1.05rem;flex-shrink:0;width:20px;text-align:center}
#sidebar.collapsed .sidebar-link{padding:10px 22px;justify-content:center}
#sidebar.collapsed .sidebar-link.active{padding-left:22px;border-left:3px solid #0d6efd}

/* Topbar */
#topbar{background:#fff;border-bottom:1px solid #e9ecef;padding:0 20px;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;flex-shrink:0}

/* Content */
#content{flex:1;padding:24px;overflow-x:hidden;overflow-y:auto}

/* Cards */
.stat-card{border:none;border-radius:12px}
.stat-card .icon-box{width:48px;height:48px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:1.3rem}

/* Tables */
.table th{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:#6c757d;border-bottom:2px solid #dee2e6;white-space:nowrap}
.table td{vertical-align:middle}

/* ── A4 Landscape Print Styles ──────────────────────────── */
@media print {
  @page { size: A4 landscape; margin: 12mm 14mm; }

  /* Hide everything except the report content */
  #sidebar, #topbar, .btn, .card-header .btn,
  form.row, .alert, nav[aria-label="breadcrumb"],
  #sidebar-toggle, .dropdown, .no-print { display: none !important; }

  /* Reset layout — full width */
  #wrapper, #content { display: block !important; }
  #sidebar { display: none !important; }
  body, #content { background: #fff !important; padding: 0 !important; margin: 0 !important; font-size: 11px !important; }

  /* Cards become plain boxes */
  .card { border: 1px solid #ccc !important; border-radius: 0 !important; box-shadow: none !important; page-break-inside: avoid; }
  .card-header { background: #f0f0f0 !important; color: #000 !important; padding: 4px 8px !important; font-size: 11px !important; }
  .card-body { padding: 6px !important; }

  /* Tables */
  .table { font-size: 10px !important; border-collapse: collapse !important; width: 100% !important; }
  .table th, .table td { border: 1px solid #bbb !important; padding: 3px 6px !important; }
  .table thead th { background: #e8e8e8 !important; color: #000 !important; font-weight: 700 !important; }
  .table-hover tbody tr:hover { background: none !important; }

  /* Print header — hidden on screen, visible on print */
  .print-header { display: block !important; }

  /* Summary stat cards row */
  .stat-print-row { display: flex !important; gap: 8px !important; margin-bottom: 8px !important; }
  .stat-print-card { flex: 1; border: 1px solid #ccc; padding: 5px 8px; border-radius: 4px; }
  .stat-print-card .label { font-size: 9px; color: #555; text-transform: uppercase; }
  .stat-print-card .value { font-size: 14px; font-weight: 700; }

  a { color: #000 !important; text-decoration: none !important; }
  .badge { border: 1px solid #888 !important; color: #000 !important; background: #eee !important; }

  /* Page break helpers */
  .page-break-before { page-break-before: always; }
  .page-break-avoid  { page-break-inside: avoid; }
}

/* Badges */
.badge-status-active{background:#d1fae5;color:#065f46}
.badge-status-inactive{background:#fee2e2;color:#991b1b}

</style>
<?= $extraCss ?? '' ?>
</head>
<body>

<div id="wrapper">
<!-- ── Sidebar ──────────────────────────────────────────── -->
<nav id="sidebar">
  <div class="sidebar-brand">
    <?php if (!empty($_SESSION['settings']['shop_logo'])): ?>
      <img src="<?= UPLOAD_URL ?>/<?= e($_SESSION['settings']['shop_logo']) ?>"
           alt="Logo"
           style="height:32px;width:32px;object-fit:contain;border-radius:6px;flex-shrink:0">
    <?php else: ?>
      <i class="bi bi-shop"></i>
    <?php endif; ?>
    <span class="brand-text"><?= e(setting('shop_name','MJPOS')) ?></span>
  </div>

  <div class="nav-section">

    <!-- Dashboard -->
    <a href="<?= APP_URL ?>/dashboard" class="sidebar-link <?= active('dashboard') ?>">
      <i class="bi bi-speedometer2"></i><span class="menu-text">Dashboard</span>
    </a>

    <!-- ── SALES ─────────────────────────────────────────── -->
    <?php if (Auth::can('sales.create') || Auth::can('sales.view') || Auth::can('customers.view')): ?>
    <div class="nav-label">Sales</div>
    <?php endif; ?>

    <?php if (Auth::can('sales.create')): ?>
    <a href="<?= APP_URL ?>/pos" class="sidebar-link <?= active('pos') ?>">
      <i class="bi bi-cash"></i><span class="menu-text">POS / New Sale</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('sales.view')): ?>
    <a href="<?= APP_URL ?>/sales" class="sidebar-link <?= active('sales') ?>">
      <i class="bi bi-receipt"></i><span class="menu-text">Sales List</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('customers.view')): ?>
    <a href="<?= APP_URL ?>/customers" class="sidebar-link <?= active('customers') ?>">
      <i class="bi bi-people"></i><span class="menu-text">Customers</span>
    </a>
    <?php endif; ?>

    <!-- ── PURCHASING ─────────────────────────────────────── -->
    <?php if (Auth::can('purchases.view') || Auth::can('suppliers.view')): ?>
    <div class="nav-label">Purchasing</div>
    <?php endif; ?>

    <?php if (Auth::can('purchases.view')): ?>
    <a href="<?= APP_URL ?>/purchases" class="sidebar-link <?= active('purchases') ?>">
      <i class="bi bi-cart3"></i><span class="menu-text">Purchases</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('suppliers.view')): ?>
    <a href="<?= APP_URL ?>/suppliers" class="sidebar-link <?= active('suppliers') ?>">
      <i class="bi bi-truck"></i><span class="menu-text">Suppliers</span>
    </a>
    <?php endif; ?>

    <!-- ── INVENTORY ──────────────────────────────────────── -->
    <?php if (Auth::can('products.view') || Auth::can('stock.view')): ?>
    <div class="nav-label">Inventory</div>
    <?php endif; ?>

    <?php if (Auth::can('products.view')): ?>
    <a href="<?= APP_URL ?>/products" class="sidebar-link <?= active('products') ?>">
      <i class="bi bi-box-seam"></i><span class="menu-text">Products</span>
    </a>
   
    <?php endif; ?>

    <?php if (Auth::can('stock.view')): ?>
    <a href="<?= APP_URL ?>/stock" class="sidebar-link <?= active('stock') ?>">
      <i class="bi bi-layers"></i><span class="menu-text">Stock</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('products.view')): ?>
    <a href="<?= APP_URL ?>/categories" class="sidebar-link <?= active('categories') ?>">
      <i class="bi bi-tags"></i><span class="menu-text">Categories</span>
    </a>
    <a href="<?= APP_URL ?>/brands" class="sidebar-link <?= active('brands') ?>">
      <i class="bi bi-bookmark"></i><span class="menu-text">Brands</span>
    </a>
    <a href="<?= APP_URL ?>/units" class="sidebar-link <?= active('units') ?>">
      <i class="bi bi-rulers"></i><span class="menu-text">Units</span>
    </a>
    <?php endif; ?>

    <!-- ── FINANCE ────────────────────────────────────────── -->
    <?php if (Auth::can('finance.overview') || Auth::can('accounts.view') || Auth::can('expenses.view') || Auth::can('cheques.view') || Auth::can('credit_book.view')): ?>
    <div class="nav-label">Finance</div>

    <?php if (Auth::can('finance.overview')): ?>
    <a href="<?= APP_URL ?>/finance/overview" class="sidebar-link <?= active('finance/overview') ?>">
      <i class="bi bi-graph-up-arrow text-success"></i><span class="menu-text">Finance Overview</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('accounts.view')): ?>
    <a href="<?= APP_URL ?>/finance/accounts" class="sidebar-link <?= active('finance/accounts') ?>">
      <i class="bi bi-wallet2 text-success"></i><span class="menu-text">Cash & Bank Accounts</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('expenses.view')): ?>
    <a href="<?= APP_URL ?>/expenses" class="sidebar-link <?= active('expenses') ?>">
      <i class="bi bi-wallet2"></i><span class="menu-text">Expenses</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('cheques.view')): ?>
    <a href="<?= APP_URL ?>/cheques" class="sidebar-link <?= active('cheques') ?>">
      <i class="bi bi-bank"></i><span class="menu-text">Cheque Management</span>
    </a>
    <a href="<?= APP_URL ?>/cheques/pending" class="sidebar-link <?= active('cheques/pending') ?>">
      <i class="bi bi-hourglass-split text-warning"></i><span class="menu-text">Pending Cheques</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('credit_book.view')): ?>
    <a href="<?= APP_URL ?>/finance/credit-book" class="sidebar-link <?= active('finance/credit-book') ?>">
      <i class="bi bi-journal-bookmark text-info"></i><span class="menu-text">Credit Book</span>
    </a>
    <?php endif; ?>

    <?php endif; ?>

    <!-- ── REPORTS ────────────────────────────────────────── -->
    <?php if (Auth::can('reports.view')): ?>
    <div class="nav-label">Reports</div>
   >
    <a href="<?= APP_URL ?>/reports/daily" class="sidebar-link <?= active('reports/daily') ?>">
      <i class="bi bi-calendar-day"></i><span class="menu-text">Daily Report</span>
    </a>
    <a href="<?= APP_URL ?>/reports/sales" class="sidebar-link <?= active('reports/sales') ?>">
      <i class="bi bi-bar-chart-line"></i><span class="menu-text">Sales Report</span>
    </a>
    <a href="<?= APP_URL ?>/reports/profit-loss" class="sidebar-link <?= active('reports/profit-loss') ?>">
      <i class="bi bi-graph-up-arrow"></i><span class="menu-text">Profit / Loss</span>
    </a>
    <a href="<?= APP_URL ?>/reports/stock" class="sidebar-link <?= active('reports/stock') ?>">
      <i class="bi bi-archive"></i><span class="menu-text">Stock Report</span>
    </a>
    <a href="<?= APP_URL ?>/reports/customers" class="sidebar-link <?= active('reports/customers') ?>">
      <i class="bi bi-person-lines-fill"></i><span class="menu-text">Customer Due</span>
    </a>
    <a href="<?= APP_URL ?>/reports/credit-customers" class="sidebar-link <?= active('reports/credit-customers') ?>">
      <i class="bi bi-credit-card-2-front"></i><span class="menu-text">Credit Customers</span>
    </a>
    <a href="<?= APP_URL ?>/reports/suppliers" class="sidebar-link <?= active('reports/suppliers') ?>">
      <i class="bi bi-truck"></i><span class="menu-text">Supplier Due</span>
    </a>
    <a href="<?= APP_URL ?>/reports/expenses" class="sidebar-link <?= active('reports/expenses') ?>">
      <i class="bi bi-currency-dollar"></i><span class="menu-text">Expense Report</span>
    </a>
    <a href="<?= APP_URL ?>/reports/tax" class="sidebar-link <?= active('reports/tax') ?>">
      <i class="bi bi-percent"></i><span class="menu-text">Tax Report</span>
    </a>
    <a href="<?= APP_URL ?>/reports/cashier" class="sidebar-link <?= active('reports/cashier') ?>">
      <i class="bi bi-person-badge"></i><span class="menu-text">Cashier Report</span>
    </a>
    <?php endif; ?>


    <!-- ── PAYROLL ─────────────────────────────────────────── -->
    <?php
    // Payroll: visible only for admin-level and hr_manager — NEVER for cashier/stock_keeper
    $_noPayroll = ['cashier','stock_keeper'];
    $_showPayroll = !in_array(Auth::role(), $_noPayroll, true) && Auth::can('payroll.view');
    ?>
    <?php if ($_showPayroll): ?>
    <div class="nav-label">Payroll</div>
    <a href="<?= APP_URL ?>/payroll" class="sidebar-link <?= active('payroll') ?>">
      <i class="bi bi-cash-coin"></i><span class="menu-text">Payroll</span>
    </a>
    <?php if(Auth::can('payroll.employees')): ?>
    <a href="<?= APP_URL ?>/payroll/employees" class="sidebar-link <?= active('payroll/employees') ?>">
      <i class="bi bi-person-vcard"></i><span class="menu-text">Employees</span>
    </a>
    <?php endif; ?>
    <a href="<?= APP_URL ?>/payroll/fp-upload" class="sidebar-link <?= active('payroll/fp-upload') ?>">
      <i class="bi bi-upload text-warning"></i><span class="menu-text">FP Data Upload</span>
    </a>
    <a href="<?= APP_URL ?>/payroll/attendance-chart" class="sidebar-link <?= active('payroll/attendance-chart') ?>">
      <i class="bi bi-bar-chart-line text-info"></i><span class="menu-text">Attendance Chart</span>
    </a>
    <?php if(Auth::can('payroll.manage')): ?>
    <a href="<?= APP_URL ?>/payroll/advances" class="sidebar-link <?= active('payroll/advances') ?>">
      <i class="bi bi-wallet2"></i><span class="menu-text">Salary Advances</span>
    </a>
    <?php endif; ?>
    <?php if(Auth::can('payroll.reports')): ?>
    <a href="<?= APP_URL ?>/payroll/report" class="sidebar-link <?= active('payroll/report') ?>">
      <i class="bi bi-file-earmark-bar-graph"></i><span class="menu-text">Payroll Reports</span>
    </a>
    <a href="<?= APP_URL ?>/reports/daily-attendance" class="sidebar-link <?= active('reports/daily-attendance') ?>">
      <i class="bi bi-calendar-check text-success"></i><span class="menu-text">Daily Attendance</span>
    </a>
    <?php endif; ?>
    <?php endif; ?>

    <!-- ── ADMIN ──────────────────────────────────────────── -->
    <?php if (Auth::can('users.view') || Auth::can('settings.view') || Auth::can('backup.manage')): ?>
    <div class="nav-label">Admin</div>
    <?php endif; ?>

    <?php if (Auth::can('users.view')): ?>
    <a href="<?= APP_URL ?>/users" class="sidebar-link <?= active('users') ?>">
      <i class="bi bi-person-gear"></i><span class="menu-text">Users</span>
    </a>
    <a href="<?= APP_URL ?>/roles" class="sidebar-link <?= active('roles') ?>">
      <i class="bi bi-shield-lock"></i><span class="menu-text">Roles & Permissions</span>
    </a>
    <?php endif; ?>


    <?php if (Auth::role() === 'developer'): ?>
    <a href="<?= APP_URL ?>/developer" class="sidebar-link <?= active('developer') ?>"
       style="background:rgba(239,68,68,.08);border-left:3px solid #ef4444">
      <i class="bi bi-tools text-danger"></i>
      <span class="menu-text text-danger fw-bold">Developer Tools</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('settings.view')): ?>
    <a href="<?= APP_URL ?>/settings" class="sidebar-link <?= active('settings') ?>">
      <i class="bi bi-gear"></i><span class="menu-text">Settings</span>
    </a>
    <?php endif; ?>

    <?php if (Auth::can('backup.manage')): ?>
    <a href="<?= APP_URL ?>/backup" class="sidebar-link <?= active('backup') ?>">
      <i class="bi bi-database-down"></i><span class="menu-text">Backup</span>
    </a>
    <?php endif; ?>

  </div><!-- /nav-section -->
</nav>
<!-- /Sidebar -->

<div style="display:flex;flex-direction:column;flex:1;overflow:hidden;height:100vh">
<!-- ── Topbar ──────────────────────────────────────────── -->
<div id="topbar">
  <div class="d-flex align-items-center gap-3">
    <button class="btn btn-sm btn-light border-0" id="sidebar-toggle">
      <i class="bi bi-list fs-5"></i>
    </button>
    <nav aria-label="breadcrumb" class="d-none d-md-block">
      <ol class="breadcrumb mb-0 small">
        <li class="breadcrumb-item"><a href="<?= APP_URL ?>/dashboard">Home</a></li>
        <?php if (!empty($breadcrumb)): ?>
          <?php foreach ($breadcrumb as $bc): ?>
            <?php if (!empty($bc['url'])): ?>
              <li class="breadcrumb-item"><a href="<?= e($bc['url']) ?>"><?= e($bc['label']) ?></a></li>
            <?php else: ?>
              <li class="breadcrumb-item active"><?= e($bc['label']) ?></li>
            <?php endif; ?>
          <?php endforeach; ?>
        <?php endif; ?>
      </ol>
    </nav>
  </div>

  <div class="d-flex align-items-center gap-3">
    <!-- Low stock bell -->
    <?php
    try {
        $lowCount = (int) Database::fetchColumn(
            "SELECT COUNT(*) FROM products
             WHERE status='active' AND current_stock > 0 AND current_stock <= reorder_level AND reorder_level > 0"
        );
    } catch (\Throwable $e) {
        $lowCount = 0;
    }
    if ($lowCount > 0):
    ?>
    <a href="<?= APP_URL ?>/stock/low" class="btn btn-sm btn-outline-warning position-relative">
      <i class="bi bi-bell"></i>
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size:.6rem">
        <?= $lowCount ?>
      </span>
    </a>
    <?php endif; ?>

    <!-- User dropdown -->
    <div class="dropdown">
      <button class="btn btn-sm btn-light dropdown-toggle d-flex align-items-center gap-2"
              data-bs-toggle="dropdown">
        <div style="width:28px;height:28px;border-radius:50%;background:#0d6efd;color:#fff;
          display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600">
          <?= strtoupper(substr(Auth::name(), 0, 2)) ?>
        </div>
        <span class="d-none d-md-inline"><?= e(Auth::name()) ?></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><span class="dropdown-item-text text-muted small"><?= e(Auth::role()) ?></span></li>
        <li><hr class="dropdown-divider"></li>
        <li>
          <a class="dropdown-item text-danger" href="<?= APP_URL ?>/auth/logout">
            <i class="bi bi-box-arrow-right me-2"></i>Logout
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- /Topbar -->

<!-- ── Main Content ────────────────────────────────────── -->
<main id="content">
  <?= flashMessages() ?>
  <?= $content ?? '' ?>
</main>

</div><!-- /flex wrapper -->
</div><!-- /#wrapper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<?= $extraJs ?? '' ?>
<script>
// Sidebar collapse toggle
const sidebar = document.getElementById('sidebar');
document.getElementById('sidebar-toggle').addEventListener('click', () => {
  sidebar.classList.toggle('collapsed');
  localStorage.setItem('sidebar_collapsed', sidebar.classList.contains('collapsed'));
});
if (localStorage.getItem('sidebar_collapsed') === 'true') {
  sidebar.classList.add('collapsed');
}
// Scroll active nav item into view on page load
const activeLink = document.querySelector('.sidebar-link.active');
if (activeLink) {
  activeLink.scrollIntoView({ block: 'nearest', behavior: 'instant' });
}
</script>
</body>
</html>