<?php
// views/admin/categorias.php
session_start();

// ⚠️ Chequeo de sesión (ajusta el nombre si usas otra key)
if (empty($_SESSION['user_id'])) {
  $_SESSION['return_to'] = $_SERVER['REQUEST_URI'] ?? '/dashboard.php';
  header('Location: ../login.php'); // estamos dentro de /views/admin
  exit;
}
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Admin · Categorías</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="../css/admin-categorias.css">
</head>
<body>

  <!-- ===== Topbar igual al Dashboard, con menú móvil ===== -->
<header class="topbar">
  <div class="wrap topbar-inner">
    <div class="brand">
      <span class="logo">🌮</span>
      <strong>Taquería · Admin</strong>
    </div>

    <!-- Botón hamburguesa (móvil) -->
    <button class="btn ghost menu-toggle" type="button" aria-expanded="false" aria-controls="topbarMenu">☰ Menú</button>

    <nav class="actions" id="topbarMenu">
      <a class="btn ghost" href="../../dashboard.php">Volver al menú principal</a>
      <!-- enlaces (rutas relativas desde /views/admin) -->
      <a class="btn ghost" href="../ver_historial.php">Pedidos</a>
      <a class="btn ghost" href="../ver_historial_agenda.php">Agendas</a>
      <a class="btn ghost" href="../perfil.php">Usuarios</a>
      <a class="btn ghost" href="../menu.php" target="_blank">Ver menu publico</a>
      <form action="../logout.php" method="post" style="display:inline;">
        <button type="submit" class="btn ghost danger" title="Cerrar sesión">Cerrar sesión</button>
      </form>
    </nav>
  </div>
</header>

  <main class="wrap">
    <h1>Apartado de categorías</h1>

    <!-- CARD: Formulario -->
    <section class="card form-card">
    <div class="card-head row">
      <button type="button" class="btn back" id="btnVolver" onclick="location.href='../../dashboard.php'">Regresar</button>
        <h3 id="tituloForm">Crear producto</h3>
      </div>

      <form id="frm" class="form-grid" autocomplete="off" novalidate>
        <input type="hidden" name="id" id="id">

        <label class="field">
          <span>Nombre</span>
          <input type="text" name="nombre" id="nombre" required maxlength="60" placeholder="Ej. Tacos">
          <small class="field-note" id="err-nombre"></small>
        </label>

        <label class="field full">
          <span>Descripción</span>
          <textarea name="descripcion" id="descripcion" rows="2" maxlength="255" placeholder="Describe la categoría (opcional)"></textarea>
        </label>

        <div class="actions full">
          <button type="submit" class="btn primary" id="btnGuardar">Guardar</button>
          <button type="button" class="btn" id="btnCancelar">Cancelar</button>
        </div>
      </form>
    </section>

    <!-- CARD: Listado -->
    <section class="card">
      <div class="card-head row">
        <div class="toolbar">
          <div class="search">
            <input id="txtBuscar" type="search" placeholder="Buscar por nombre…">
            <button id="btnBuscar" class="btn">Buscar</button>
          </div>
          <div class="pill" id="pillTotal">0 categorías</div>
        </div>
      </div>

      <div class="table-wrap">
        <table id="tabla" class="table">
          <thead>
            <tr>
              <th style="width:70px">#</th>
              <th>Nombre</th>
              <th>Descripción</th>
              <th style="width:170px">Productos activos</th>
              <th style="width:200px">Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </section>
  </main>

  <!-- Toast -->
  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script>
  (function(){
    const toggle = document.querySelector('.menu-toggle');
    const menu = document.getElementById('topbarMenu');
    if (!toggle || !menu) return;
    toggle.addEventListener('click', (e)=>{
      e.stopPropagation();
      const open = menu.classList.toggle('show');
      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    });
    document.addEventListener('click', (e)=>{
      if (!menu.classList.contains('show')) return;
      if (!menu.contains(e.target) && e.target !== toggle){
        menu.classList.remove('show');
        toggle.setAttribute('aria-expanded','false');
      }
    });
    window.addEventListener('resize', ()=>{
      if (window.innerWidth > 720){
        menu.classList.remove('show');
        toggle.setAttribute('aria-expanded','false');
      }
    });
  })();
</script>


  <script src="../js/admin_categorias.js"></script>
</body>
</html>
