<?php
require_once '../models/model_producto.php';
require_once '../models/model_categoria.php';

$producto = new ModelProducto();
$productos = $producto->leerTodos()['data'];

$categoria = new ModelCategoria();
$categorias = $categoria->leerTodas()['data'];

// === MANEJO DE PARÁMETROS URL MEJORADO: Soporte para ?cat_id=, ?cat= y ?product_id= ===

// 1. Leer todos los posibles parámetros de la URL
$param_cat_id = isset($_GET['cat_id']) ? intval($_GET['cat_id']) : 0;      // <-- NUEVO: Lee el ID de la categoría
$param_cat_name = isset($_GET['cat']) ? trim($_GET['cat']) : '';         // Renombrado para más claridad
$param_product_id = isset($_GET['product_id']) ? intval($_GET['product_id']) : 0;

// 2. Inicializar variables de destino
$target_category_id = null;
$target_product_id = null;
$target_category_slug_for_id = ''; // Este es el que usa el JS para hacer scroll

// 3. Determinar la categoría objetivo con un orden de prioridad

// Prioridad 1: Por ID de categoría (?cat_id=...)
if ($param_cat_id > 0) {
    // Simplemente validamos que el ID exista en nuestro array de categorías
    foreach ($categorias as $cat) {
        if ($cat['id_categoria'] == $param_cat_id) {
            $target_category_id = $param_cat_id;
            break;
        }
    }
} 
// Prioridad 2: Por nombre de categoría (?cat=...) si no se usó el ID
elseif ($param_cat_name) {
    $slug_buscado = strtolower(str_replace([' ', '+', '%20'], '-', urldecode($param_cat_name)));
    $slug_buscado = preg_replace('/[^a-z0-9\-]/', '', $slug_buscado);
    
    foreach ($categorias as $cat) {
        $slug_actual = strtolower(str_replace(' ', '-', $cat['nombre']));
        $slug_actual = preg_replace('/[^a-z0-9\-]/', '', $slug_actual);
        if ($slug_actual === $slug_buscado) {
            $target_category_id = $cat['id_categoria'];
            break;
        }
    }
}

// Prioridad Máxima: Si se especifica un producto, su categoría siempre tiene preferencia
if ($param_product_id > 0) {
    $target_product_id = $param_product_id;
    
    // Buscamos el producto y obtenemos su id_categoria
    foreach ($productos as $prod) {
        if ($prod['id_producto'] == $target_product_id) {
            $target_category_id = $prod['id_categoria']; // Esto anula cualquier cat/cat_id previo
            break;
        }
    }
}

// 4. Obtener el slug final para el scroll (esta lógica no cambia)
if ($target_category_id) {
    foreach ($categorias as $cat) {
        if ($cat['id_categoria'] == $target_category_id) {
            $target_category_slug_for_id = strtolower(str_replace(' ', '-', $cat['nombre']));
            $target_category_slug_for_id = preg_replace('/[^a-z0-9\-]/', '', $target_category_slug_for_id);
            break;
        }
    }
}

// === HORARIO DE PEDIDOS (sin cambios) ===
$hora_actual = date('H:i');
$hora_apertura = '16:00';
$hora_cierre = '02:00';

$pedidos_activos = false;
if ($hora_actual >= '00:00' && $hora_actual < $hora_cierre) {
    $pedidos_activos = true;
} elseif ($hora_actual >= $hora_apertura && $hora_actual <= '23:59') {
    $pedidos_activos = true;
}

$next_open = date('Y-m-d') . ' ' . $hora_apertura;
if ($hora_actual > $hora_apertura || ($hora_actual >= '00:00' && $hora_actual < $hora_cierre)) {
    $next_open = date('Y-m-d', strtotime('+1 day')) . ' ' . $hora_apertura;
}
$seconds_until_open = strtotime($next_open) - time();

// === META PIXEL MEJORADO: ViewContent para cat o product_id ===
$pixel_content_name = '';
$pixel_content_type = 'product_group';
$pixel_content_ids = [];
$pixel_value = 0.00;

if ($target_product_id) {
    foreach ($productos as $prod) {
        if ($prod['id_producto'] == $target_product_id) {
            $pixel_content_name = $prod['titulo'];
            $pixel_content_type = 'product';
            $pixel_content_ids = [$target_product_id];
            $pixel_value = $prod['precio'];
            break;
        }
    }
} elseif ($target_category_id) {
    foreach ($categorias as $cat) {
        if ($cat['id_categoria'] == $target_category_id) {
            $pixel_content_name = $cat['nombre'];
            break;
        }
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Menú de la Taquería</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="shortcut icon" href="imgs/logo.png" type="image/x-icon">
    <link rel="icon" href="/favicon.png" type="image/png">
    
    <!-- Meta Pixel Code MEJORADO -->
    <script>
    !function(f,b,e,v,n,t,s) {
        if(f.fbq)return;
        n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n; n.push=n; n.loaded=!0; n. version='2.0';
        n.queue=[]; t=b.createElement(e); t.async=!0;
        t.src=v; s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)
    }(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js');
    
    fbq('init', '2057411288352776');
    fbq('track', 'PageView');
    
    // Track ViewContent dinámico
    <?php if ($pixel_content_name): ?>
        fbq('track', 'ViewContent', {
            content_name: '<?php echo addslashes($pixel_content_name); ?>',
            content_category: '<?php echo $pixel_content_type === 'product' ? 'Menu Product' : 'Menu Category'; ?>',
            content_type: '<?php echo $pixel_content_type; ?>',
            <?php if (!empty($pixel_content_ids)): ?>
            content_ids: <?php echo json_encode($pixel_content_ids); ?>,
            <?php endif; ?>
            value: <?php echo $pixel_value; ?>,
            currency: 'MXN'
        });
        console.log('FB Pixel: ViewContent tracked for <?php echo $pixel_content_type; ?> - <?php echo addslashes($pixel_content_name); ?>');
    <?php endif; ?>
    
    // Función para track AddToCart (llamada desde JS)
    function trackAddToCart(productName, productId, price) {
        fbq('track', 'AddToCart', {
            content_name: productName,
            content_ids: [productId],
            content_type: 'product',
            value: price,
            currency: 'MXN'
        });
    }
    
    // Función para track Purchase (al proceder)
    function trackPurchase(total) {
        fbq('track', 'Purchase', {
            value: total,
            currency: 'MXN',
            content_type: 'product'
        });
    }
    </script>
    <noscript>
        <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2057411288352776&ev=PageView&noscript=1"/>
    </noscript>
    <!-- End Meta Pixel Code -->
    
    <!-- Scroll automático mejorado -->
    <?php if ($target_category_slug_for_id): ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Esperar a que Slick se inicialice completamente
        setTimeout(function() {
            const targetSection = document.getElementById('<?php echo $target_category_slug_for_id; ?>');
            if (targetSection) {
                targetSection.scrollIntoView({ behavior: 'smooth' });
                targetSection.style.backgroundColor = 'rgba(247, 147, 30, 0.1)';
                setTimeout(() => { targetSection.style.backgroundColor = ''; }, 3000);
                
                // Si es product_id, resaltar el producto específico después de scroll
                <?php if ($target_product_id): ?>
                    const targetProduct = document.querySelector('.item[data-id="<?php echo $target_product_id; ?>"]');
                    if (targetProduct) {
                        setTimeout(() => {
                            targetProduct.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            targetProduct.style.border = '3px solid #F7931E';
                            targetProduct.style.boxShadow = '0 0 20px rgba(247, 147, 30, 0.5)';
                            setTimeout(() => {
                                targetProduct.style.border = '';
                                targetProduct.style.boxShadow = '';
                            }, 5000);
                        }, 800); // Después del scroll a sección
                    }
                <?php endif; ?>
            }
        }, 800); // Tiempo para Slick + render
    });
    </script>
    <?php endif; ?>
</head>
</head>

<body>
    <header class="header">
        <a href="../index.php" class="back-btn">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="header-title">Taqueria el Mexicano - MENU</div>
        <button class="share-btn" onclick="shareMenu()">
            <i class="fas fa-share-alt"></i>
        </button>
    </header>

    <nav class="category-nav">
        <div class="category-nav-container">
            <?php foreach ($categorias as $cat): ?>
                <a href="#<?php echo htmlspecialchars(strtolower(str_replace(' ', '-', $cat['nombre']))); ?>"
                    class="category-link"
                    data-category="<?php echo htmlspecialchars(strtolower($cat['nombre'])); ?>">
                    <?php echo htmlspecialchars($cat['nombre']); ?>
                </a>
            <?php endforeach; ?>
            <div class="category-indicator"></div>
        </div>
    </nav>

    <section class="pricing01 immersem5 cid-uSSQs9pxtz" id="product-list-1-uSSQs9pxtz">
        <div class="container-fluid">
            <?php foreach ($categorias as $cat): ?>
            <?php 
                // Generar slug seguro para ID
                $section_slug = strtolower(str_replace(' ', '-', $cat['nombre']));
                $section_slug = preg_replace('/[^a-z0-9\-]/', '', $section_slug);
                ?>
                <div class="row category-section" id="<?php echo htmlspecialchars($section_slug); ?>" data-category="<?php echo htmlspecialchars(strtolower($cat['nombre'])); ?>">                    <div class="col-12 item">
                        <div class="content-wrapper">
                            <h2 class="mbr-section-title mbr-fonts-style display-2">
                                <strong><?php echo htmlspecialchars($cat['nombre']); ?></strong>
                            </h2>
                        </div>
                    </div>
                    <div class="carousel-wrapper">
                        <div class="slick-carousel">
                            <?php
                            $catProductos = array_filter($productos, function ($prod) use ($cat) {
                                return $prod['id_categoria'] == $cat['id_categoria'];
                            });
                            foreach ($catProductos as $prod): ?>
                                <div class="item features-image col-12 col-lg-4" data-title="<?php echo strtolower(htmlspecialchars($prod['titulo'])); ?>" 
             data-id="<?php echo $prod['id_producto']; ?>"
             data-price="<?php echo $prod['precio']; ?>">
                                    <div class="item-wrapper">
                                        <div class="item-img">
                                            <?php if (!empty($prod['foto_url'])): ?>
                                                <img src="/<?php echo htmlspecialchars($prod['foto_url']); ?>" alt="<?php echo htmlspecialchars($prod['titulo']); ?>">
                                            <?php else: ?>
                                                <img src="imgs/default_image.png" alt="Imagen por defecto">
                                            <?php endif; ?>
                                        </div>
                                        <div class="item-content">
                                            <p class="card-price mbr-fonts-style display-5">
                                                <strong>$<?php echo number_format($prod['precio'], 2); ?> MXN</strong>
                                            </p>
                                            <h4 class="card-title mbr-fonts-style display-7">
                                                <strong><?php echo htmlspecialchars($prod['titulo']); ?></strong>
                                            </h4>
                                            <p class="card-desc mbr-fonts-style display-4">
                                                <?php echo htmlspecialchars($prod['descripcion']); ?>
                                            </p>
                                            <div class="counter">
                                                <div class="quantity-controls">
                                                    <button onclick="updateQuantity(this, -1)">-</button>
                                                    <span>0</span>
                                                    <button onclick="updateQuantity(this, 1)">+</button>
                                                </div>
                                                <button class="add-btn" onclick="addToCart(this)">
                                                    <i class="fas fa-cart-plus"></i> Añadir
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            <div id="cartModal" class="modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Tu Carrito</h2>
                        <span class="close-modal">&times;</span>
                    </div>
                    <div class="modal-body">
                        <ul id="cartItems" class="cart-items"></ul>
                        <div class="modal-footer">
                            <p class="total">Total: $<span id="cartTotal">0.00</span> MXN</p>
                            <button class="proceed-btn">
                                <i class="fas fa-shopping-bag"></i> Proceder con la Compra
                            </button>
                        </div>
                    </div>
                </div>
            </div>



            <div id="emptyCartModal" class="modal">
                <div class="modal-content-empty">
                    <div class="modal-header-empty">
                        <span class="close-btn-empty"><i class="fas fa-times"></i></span>
                    </div>
                    <div class="modal-body-empty">
                        <i class="fas fa-shopping-basket empty-icon"></i>
                        <h2>¡Tu carrito está vacío!</h2>
                        <p>Aún no has agregado productos a tu carrito. Explora nuestro delicioso menú y encuentra tus favoritos.</p>
                    </div>
                </div>
            </div>
            
            <!-- Modal de horario no disponible -->
<div id="hoursModal" class="modal">
    <div class="modal-content-hours">
        <div class="modal-header-hours">
            <span class="close-btn-hours"><i class="fas fa-times"></i></span>
        </div>
        <div class="modal-body-hours">
            <i class="fas fa-clock hours-icon"></i>
            <h2>¡Oops! Estamos cerrados</h2>
            <p>Nuestro horario de pedidos es de <strong>4:00 PM a 2:00 AM</strong>.</p>
            <p>Actualmente son las <strong id="current-time"><?php echo date('h:i A'); ?></strong></p>
            <div class="countdown-container">
                <p>Volvemos a abrir en:</p>
                <div class="countdown" id="countdown">
                    <span id="countdown-hours">00</span>:<span id="countdown-minutes">00</span>:<span id="countdown-seconds">00</span>
                </div>
            </div>
            <p class="fun-message">¡Los tacos más sabrosos esperan por ti! 🌮</p>
        </div>
    </div>
</div>


            <button class="cart-btn" id="openCartModal">
                <i class="fas fa-shopping-cart"></i>
                <span class="cart-count">0</span>
            </button>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="js/menu.js"></script>
    
    
    

</body>

</html>