<?php /* views/admin/productos_evento.php */ 
session_start();
if (empty($_SESSION['user_id'])) {
  $_SESSION['return_to'] = $_SERVER['REQUEST_URI'] ?? '/dashboard.php';
  header('Location: ../login.php');
  exit;
}
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Admin · Productos de Evento</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- NUEVO CSS unificado -->
  <link rel="stylesheet" href="../css/admin-productos_evento.css">
</head>
<body>

  <!-- Topbar idéntico al de Productos -->
  <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>
        <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 eventos</h1>
    <!-- Card: Formulario -->
    <section class="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 evento</h3>
      </div>

      <form id="frm" class="form-grid" enctype="multipart/form-data">
        <input type="hidden" name="id" id="id">

        <label class="field">
          <span>Título</span>
          <input type="text" name="titulo" id="titulo" required maxlength="100">
        </label>

        <label class="field">
          <span>Precio</span>
          <input type="number" step="0.01" min="0" name="precio" id="precio" required>
        </label>

        <label class="field">
          <span>Activo</span>
          <select name="activo" id="activo">
            <option value="1">Sí</option>
            <option value="0">No</option>
          </select>
        </label>

        <label class="field full">
          <span>Descripción</span>
          <textarea name="descripcion" id="descripcion" rows="3" maxlength="1000"></textarea>
        </label>

        <!-- Uploader con preview -->
        <div class="uploader">
          <div class="thumb" id="thumbPrev">IMG</div>
          <div class="up-ctrls">
            <label class="field">
              <span>Imagen</span>
              <input type="file" name="foto" id="foto" accept=".jpg,.jpeg,.png,.gif,.webp">
            </label>
            <small class="field-note">Formatos: JPG/PNG/WebP. Recomendado 800×800px.</small>
          </div>
        </div>

        <div class="full" style="display:flex; gap:8px; flex-wrap:wrap">
          <button type="submit" class="btn primary" id="btnGuardar">Guardar</button>
          <button type="button" class="btn" id="btnCancelar">Cancelar</button>
        </div>
      </form>
    </section>

    <!-- Card: Filtros + Tabla -->
    <section class="card">
      <div class="card-head row">
        <h3>Listado</h3>
        <span class="pill">Productos de evento</span>
      </div>

      <div class="form-grid full">
        <div class="toolbar">
          <div class="filters">
            <div class="search">
              <input type="search" id="txtBuscar" placeholder="Buscar por título…">
              <button class="btn" id="btnBuscar">Buscar</button>
            </div>

            <label class="chk">
              <input type="checkbox" id="chkActivos">
              <span>Solo activos</span>
            </label>

            <div class="price">
              <span>Precio:</span>
              <input type="number" id="min" placeholder="mín" step="0.01" style="width:110px">
              <span class="sep">—</span>
              <input type="number" id="max" placeholder="máx" step="0.01" style="width:110px">
              <button class="btn" id="btnPrecio">Filtrar</button>
            </div>
          </div>
        </div>
      </div>

      <div class="table-wrap">
        <table class="table" id="tabla">
          <thead>
            <tr>
              <th>#</th>
              <th>Título</th>
              <th>Precio</th>
              <th>Estado</th>
              <th>Imagen</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </section>
  </main>

  <!-- JS del menú móvil y preview de imagen -->
  <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');
        }
      });
    })();

    // Preview rápida de imagen
    (function(){
      const file = document.getElementById('foto');
      const prev = document.getElementById('thumbPrev');
      if (!file || !prev) return;
      file.addEventListener('change', ()=>{
        const f = file.files && file.files[0];
        if (!f) { prev.textContent = 'IMG'; prev.style.backgroundImage='none'; return; }
        const url = URL.createObjectURL(f);
        prev.innerHTML = '<img src="'+url+'" alt="">';
      });
    })();
  </script>

  <!-- Tu JS principal -->
  <script src="../js/admin_productos_evento.js?v=2"></script>
</body>
</html>
