<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($title ?? 'Struk App') ?> — Struk App</title>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!-- DataTables core -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>

  <!-- DataTables Responsive extension -->
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

  <!-- App CSS -->
  <link rel="stylesheet" href="<?= base_url('assets/css/app.css') ?>">
</head>
<body>

<?php
$_role  = $this->session->userdata('role');
$_uname = $this->session->userdata('user_name');
$_adm   = ($_role === 'admin');
$_uri   = uri_string();
$_init  = mb_strtoupper(mb_substr($_uname ?? 'U', 0, 1));
?>

<nav class="navbar">
  <a href="<?= site_url('receipt') ?>" class="nav-brand">🧾 Struk App</a>

  <button class="nav-toggle" id="navToggle" onclick="toggleNav()">
    <span></span><span></span><span></span>
  </button>

  <div class="nav-links" id="navLinks">
    <a href="<?= site_url('receipt') ?>"
       class="<?= (strpos($_uri, 'receipt') === 0 || $_uri === '') ? 'active' : '' ?>">
      📋 Transaksi
    </a>
    <a href="<?= site_url('template') ?>"
       class="<?= strpos($_uri, 'template') === 0 ? 'active' : '' ?>">
      🎨 Template
    </a>
    <a href="<?= site_url('store') ?>"
       class="<?= strpos($_uri, 'store') === 0 ? 'active' : '' ?>">
      🏪 Toko
    </a>

    <?php if ($_adm): ?>
      <a href="<?= site_url('user') ?>"
         class="nav-admin <?= strpos($_uri, 'user') === 0 ? 'active' : '' ?>">
        👑 Kelola Akun
      </a>
    <?php endif; ?>

    <div class="nav-divider"></div>

    <div class="nav-user" id="navUser">
      <button class="nav-user-btn" onclick="toggleUserMenu(event)">
        <span class="nav-avatar"><?= $_init ?></span>
        <span class="nav-uname"><?= htmlspecialchars($_uname ?? '') ?></span>
        <span class="nav-caret">▾</span>
      </button>
      <div class="nav-user-menu" id="userMenu">
        <div class="num-header">
          <div class="num-name"><?= htmlspecialchars($_uname ?? '') ?></div>
          <div class="num-role"><?= $_adm ? '👑 Administrator' : '👤 User' ?></div>
        </div>
        <div class="num-sep"></div>
        <a href="<?= site_url('auth/logout') ?>" class="num-item num-logout">🚪 Logout</a>
      </div>
    </div>
  </div>
</nav>

<div class="container">
  <h2 class="page-title"><?= htmlspecialchars($title ?? '') ?></h2>

  <?php if ($this->session->flashdata('success')): ?>
    <div class="alert alert-ok alert-dismissible">
      <?= $this->session->flashdata('success') ?>
      <button onclick="this.parentElement.remove()" class="alert-close">×</button>
    </div>
  <?php endif; ?>
  <?php if ($this->session->flashdata('error')): ?>
    <div class="alert alert-error alert-dismissible">
      <?= $this->session->flashdata('error') ?>
      <button onclick="this.parentElement.remove()" class="alert-close">×</button>
    </div>
  <?php endif; ?>

  <?= $this->load->view($content, NULL, TRUE) ?>
</div>

<script src="<?= base_url('assets/js/rawbt.js') ?>"></script>
<script src="<?= base_url('assets/js/app.js') ?>"></script>

<script>
function toggleNav() {
  document.getElementById('navLinks').classList.toggle('open');
  document.getElementById('navToggle').classList.toggle('active');
}
function toggleUserMenu(e) {
  e.stopPropagation();
  document.getElementById('userMenu').classList.toggle('open');
}
document.addEventListener('click', function (e) {
  var um  = document.getElementById('userMenu');
  var ub  = document.getElementById('navUser');
  var nl  = document.getElementById('navLinks');
  var btn = document.getElementById('navToggle');
  if (um && um.classList.contains('open') && ub && !ub.contains(e.target))
    um.classList.remove('open');
  if (nl && nl.classList.contains('open') && !nl.contains(e.target) && !btn.contains(e.target)) {
    nl.classList.remove('open');
    btn.classList.remove('active');
  }
});
setTimeout(function () {
  document.querySelectorAll('.alert-dismissible').forEach(function (el) {
    el.style.transition = 'opacity .4s';
    el.style.opacity    = '0';
    setTimeout(function () { if (el.parentNode) el.parentNode.removeChild(el); }, 400);
  });
}, 4000);
</script>
</body>
</html>
