<?php 
require_once 'includes/header.php'; 
require_once 'db_conexion.php'; 

// 1. Consultar las categorías activas
$stmtCat = $pdo->query("SELECT * FROM categorias");
$categorias = $stmtCat->fetchAll();

// 2. Consultar todos los productos amarrados a su nombre de categoría
$queryProductos = "
    SELECT p.*, c.nombre AS categoria_nombre 
    FROM productos p 
    JOIN categorias c ON p.categoria_id = c.id
";
$stmtProd = $pdo->query($queryProductos);
$productos = $stmtProd->fetchAll();
?>

  <section class="menu-section" id="menu" style="padding-top: 120px;">
    <div class="section-header">
      <span class="section-tag">Nuestra Propuesta</span>
      <h2>Carta del Restaurante</h2>
      <p>Selecciona una categoría y descubre nuestros platillos</p>
    </div>

    <div class="menu-filters">
      <button class="filter-btn active" data-filter="all">Todos</button>
      <?php foreach ($categorias as $cat): ?>
        <?php 
          // Preparar los filtros para JavaScript de forma segura (minúsculas, quita tildes, espacios y prefijos)
          $filterSlug = strtolower(str_replace(['ó', 'í', '100% ', ' '], ['o', 'i', '', '-'], $cat['nombre'])); 
        ?>
        <button class="filter-btn" data-filter="<?= $filterSlug ?>"><?= htmlspecialchars($cat['nombre']) ?></button>
      <?php endforeach; ?>
    </div>

    <div class="menu-grid" id="menuGrid">
      <?php foreach ($productos as $prod): ?>
        <?php 
          // Ajustar slugs de categoría para emparejar exactamente con los botones del filtro JS
          $catSlug = strtolower(str_replace(['ó', 'í', '100% ', ' '], ['o', 'i', '', '-'], $prod['categoria_nombre'])); 
          // Si es destacado agrega la clase 'featured'
          $isFeatured = $prod['destacado'] ? 'featured' : '';
        ?>
        
        <div class="menu-card <?= $isFeatured ?>" data-category="<?= $catSlug ?>">
          <?php if ($prod['destacado']): ?>
            <div class="featured-label">⭐ Estrella</div>
          <?php endif; ?>
          
          <div class="menu-card-img">
            <img src="<?= htmlspecialchars($prod['imagen']) ?>" alt="<?= htmlspecialchars($prod['nombre']) ?>" class="dish-photo" />   
          </div>
          
          <div class="menu-card-body">
            <span class="menu-tag"><?= htmlspecialchars($prod['categoria_nombre']) ?></span>
            <h4><?= htmlspecialchars($prod['nombre']) ?></h4>
            <p><?= htmlspecialchars($prod['descripcion']) ?></p>
            
            <div class="menu-footer">
              <span class="menu-price">S/ <?= number_format($prod['precio'], 2) ?></span>
              <button class="btn-add" onclick="agregarAlCarrito('<?= htmlspecialchars($prod['nombre'], ENT_QUOTES, 'UTF-8') ?>', <?= $prod['precio'] ?>)">
                <i class="fas fa-plus"></i> Agregar
              </button>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </section>

  <div class="cart-fab" id="cartFab" onclick="toggleCarrito()">
    <i class="fas fa-shopping-basket"></i>
    <span class="cart-count" id="cartCount">0</span>
  </div>

  <div class="cart-panel" id="cartPanel">
    <div class="cart-header">
      <h3>🛒 Tu Pedido</h3>
      <button onclick="toggleCarrito()" class="cart-close"><i class="fas fa-times"></i></button>
    </div>
    
    <div class="cart-items" id="cartItems">
      <p class="cart-empty">Tu carrito está vacío 🍽️</p>
    </div>
    
    <div class="cart-total" id="cartTotal" style="display:none">
      <div class="total-row">
        <span>Total:</span>
        <strong id="totalAmount">S/ 0.00</strong>
      </div>
      <button class="btn btn-primary full-width" onclick="confirmarPedido()">
         <i class="fas fa-check"></i> Confirmar Pedido
      </button>
      <button class="btn btn-outline full-width mt-sm" onclick="vaciarCarrito()" style="margin-top: 8px;">
         <i class="fas fa-trash-alt"></i> Vaciar Carrito
      </button>
    </div>
  </div>
  <script src="js/validaciones.js?v=<?= time() ?>"></script>
<?php require_once 'includes/footer.php'; ?>