<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= esc($title ?? 'POS System') ?></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    body {
      padding-top: 56px;
      background-color: #f4f6f9;
      font-family: 'Segoe UI', sans-serif;
    }

    .navbar {
      background-color: #0d6efd;
    }

    .sidebar {
      height: 100vh;
      position: fixed;
      top: 56px;
      left: 0;
      width: 240px;
      background-color: #f8f9fa;
      padding-top: 1rem;
      overflow-y: auto;
      border-right: 1px solid #dee2e6;
      transition: transform 0.3s ease-in-out;
    }

    .sidebar a {
      color: #343a40;
      text-decoration: none;
      display: block;
      padding: 10px 20px;
      transition: all 0.2s ease;
    }

    .sidebar a:hover,
    .sidebar a.active {
      background-color: #e7f1ff;
      color: #0d6efd;
      font-weight: 500;
    }

    .sidebar .submenu a {
      padding-left: 40px;
      background-color: #f1f3f5;
    }

    .sidebar .submenu a:hover {
      background-color: #dbeafe;
    }

    .content {
      margin-left: 240px;
      padding: 20px;
      transition: margin-left 0.3s;
    }

    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
        z-index: 1050;
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .content {
        margin-left: 0;
      }

      .overlay {
        position: fixed;
        top: 56px;
        left: 0;
        width: 100%;
        height: calc(100% - 56px);
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1040;
      }

      .overlay.show {
        display: block;
      }
    }

    .modal-header.bg-info,
    .btn-outline-warning {
      background-color: #0d6efd !important;
      color: white !important;
    }

    .modal-footer .btn-danger {
      background-color: #dc3545;
    }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
  <div class="container-fluid">
    <button class="btn btn-outline-light d-md-none me-2" id="toggleSidebar">
      <i class="fas fa-bars"></i>
    </button>
    <a class="navbar-brand fw-semibold" href="<?= base_url() ?>">POS-YANDU</a>
    <div class="ms-auto">
      <button class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#logoutModal">
        <i class="fas fa-sign-out-alt"></i> Logout
      </button>
    </div>
  </div>
</nav>

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
  <?php $role = session()->get('role'); ?>

  <?php if (in_array($role, ['admin', 'superadmin'])): ?>
    <a href="<?= base_url('admin/dashboard') ?>"><i class="fas fa-home me-2"></i>Dashboard</a>
    <a href="<?= base_url('admin/supplier') ?>"><i class="fas fa-truck me-2"></i>Suppliers</a>
    <a href="<?= base_url('admin/customer') ?>"><i class="fas fa-users me-2"></i>Customers</a>

    <div class="dropdown">
      <a class="dropdown-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#productMenu">
        <i class="fas fa-boxes me-2"></i>Products
      </a>
      <div class="collapse submenu" id="productMenu">
        <a href="<?= base_url('admin/category') ?>">• Categories</a>
        <a href="<?= base_url('admin/unit') ?>">• Units</a>
        <a href="<?= base_url('admin/item') ?>">• Items</a>
      </div>
    </div>
  <?php endif; ?>

  <?php if (in_array($role, ['admin', 'superadmin', 'kasir'])): ?>
    <div class="dropdown">
      <a class="dropdown-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#transactionMenu">
        <i class="fas fa-exchange-alt me-2"></i>Transactions
      </a>
      <div class="collapse submenu" id="transactionMenu">
        <?php if (in_array($role, ['admin', 'superadmin'])): ?>
          <a href="<?= base_url('admin/product_in') ?>">• Product In</a>
          <a href="<?= base_url('admin/product_out') ?>">• Product Out</a>
        <?php endif; ?>
        <a href="<?= base_url('admin/sales') ?>">• Sales</a>
      </div>
    </div>
  <?php endif; ?>

  <?php if ($role === 'superadmin'): ?>
    <div class="dropdown">
      <a class="dropdown-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#reportMenu">
        <i class="fas fa-file-alt me-2"></i>Reports
      </a>
      <div class="collapse submenu" id="reportMenu">
        <a href="<?= base_url('admin/report/sales') ?>">• Sales</a>
        <a href="<?= base_url('admin/report/items') ?>">• Items</a>
        <a href="<?= base_url('admin/report/summary') ?>">• Summary</a>
      </div>
    </div>
    <a href="<?= base_url('admin/users') ?>"><i class="fas fa-user-cog me-2"></i>Operators</a>
  <?php endif; ?>

  <?php if (in_array($role, ['admin', 'superadmin'])): ?>
    <div class="dropdown">
      <a class="dropdown-toggle" href="#" data-bs-toggle="collapse" data-bs-target="#settingMenu">
        <i class="fas fa-cog me-2"></i>Settings
      </a>
      <div class="collapse submenu" id="settingMenu">
        <a href="<?= base_url('admin/setting/receipt') ?>">• Receipt Design</a>
        <a href="<?= base_url('admin/setting/printer') ?>">• Printer</a>
        <a href="<?= base_url('admin/setting/export') ?>">• Export DB</a>
        <a href="<?= base_url('admin/setting/tax') ?>">• Tax</a>
      </div>
    </div>
  <?php endif; ?>

  <!-- Info login -->
  <div class="px-3 py-3 border-top mt-3 small text-secondary">
    <div>Logged in as:</div>
    <strong class="text-primary fw-bold"><?= session('username') ?? '-' ?></strong><br>
    <em class="text-success"><?= ucfirst($role ?? '-') ?></em>
</div>
</div>

<!-- Overlay -->
<div class="overlay" id="sidebarOverlay"></div>

<!-- Content Area -->
<div class="content">
  <?= $this->renderSection('content') ?>
</div>

<!-- Logout Modal -->
<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title"><i class="fas fa-sign-out-alt me-2"></i>Logout Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        Apakah Anda yakin ingin keluar dari sistem?
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
        <a href="<?= base_url('logout') ?>" class="btn btn-danger">Logout</a>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const toggleSidebar = document.getElementById('toggleSidebar');
  const sidebar = document.getElementById('sidebar');
  const overlay = document.getElementById('sidebarOverlay');

  toggleSidebar?.addEventListener('click', () => {
    sidebar.classList.toggle('show');
    overlay.classList.toggle('show');
  });

  overlay?.addEventListener('click', () => {
    sidebar.classList.remove('show');
    overlay.classList.remove('show');
  });
</script>
</body>
</html>
