$(document).ready(function () {
    // =================================================================
    // INICIALIZACIÓN DE PLUGINS (SLICK CAROUSEL, ETC.)
    // =================================================================
    $('.slick-carousel').slick({
    infinite: false,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    dots: true,
    variableWidth: false, // <--- ASÍ DEBE QUEDAR
    swipeToSlide: true,
    responsive: [
        { breakpoint: 992, settings: { slidesToShow: 2 } },
        { breakpoint: 768, settings: { slidesToShow: 1, variableWidth: false } },
        { breakpoint: 480, settings: { slidesToShow: 1, variableWidth: false, arrows: false } }
    ]
});

    // =================================================================
    // MANEJADORES DE EVENTOS (CLICS, SCROLL, INPUTS)
    // =================================================================

    // --- Clic en enlaces de categoría ---
    $('.category-link').on('click', function (e) {
        e.preventDefault();
        const categoryId = $(this).attr('href');
        const targetSection = $(categoryId);
        if (targetSection.length) {
            $('html, body').animate({
                scrollTop: targetSection.offset().top - 140 // Más espacio para las barras
            }, 500);
        }
    });
    
    // --- Scroll para actualizar categoría activa ---
    $(window).on('scroll', function () {
        const scrollPosition = $(this).scrollTop() + 150;
        $('.category-section').each(function () {
            const sectionTop = $(this).offset().top;
            if (scrollPosition >= sectionTop) {
                const categoryName = $(this).data('category');
                const correspondingLink = $(`.category-link[data-category="${categoryName}"]`);
                $('.category-link').removeClass('active');
                correspondingLink.addClass('active');
            }
        });
    });

    // --- Abrir el modal del carrito ---
    $('#openCartModal').on('click', function () {
        
        // Verificar si estamos en horario de pedidos
    if (!isWithinOrderHours()) {
        $('#hoursModal').css('display', 'block');
        startCountdown();
        return;
    }
        
        if (cart.length === 0) {
            $('#emptyCartModal').css('display', 'block').addClass('show-modal');
        } else {
            $('#cartModal').css('display', 'block');
        }
    });

    // --- Cerrar los modales ---
    $('.close-modal, .close-btn-empty').on('click', function () {
        $(this).closest('.modal').css('display', 'none');
    });
    $(window).on('click', function (event) {
        if ($(event.target).is('.modal')) {
            $(event.target).css('display', 'none');
        }
    });
    
    // Agrega también el evento para cerrar el modal de horario
$('.close-btn-hours').on('click', function () {
    $('#hoursModal').css('display', 'none');
});

    // --- Proceder con la compra ---
    $('.proceed-btn').on('click', function () {
        // Verificar horario antes de proceder
    if (!isWithinOrderHours()) {
        $('#cartModal').css('display', 'none');
        $('#hoursModal').css('display', 'block');
        startCountdown();
        return;
    }
        
        
        if (cart.length === 0) {
            showNotification('El carrito está vacío. ¡Agrega productos!', 'info');
            return;
        }
        const cartItems = encodeURIComponent(JSON.stringify(cart));
        const totalAmount = calculateTotal();
        window.location.href = `carrito.php?cartItems=${cartItems}&totalAmount=${totalAmount}`;
    });


    // =================================================================
    // LA MAGIA ESTÁ AQUÍ: DELEGACIÓN DE EVENTOS PARA EL CARRITO
    // =================================================================
    // Escuchamos los clics en el contenedor ESTÁTICO del carrito (#cartItems)
    
    // --- Clic en los botones de cantidad (+ y -) DENTRO del modal ---
    $('#cartItems').on('click', '.update-qty-btn', function() {
        const id = $(this).closest('.cart-item').data('id');
        const change = parseInt($(this).data('change'));
        updateCartQuantity(id, change);
    });

    // --- Clic en el botón de eliminar DENTRO del modal ---
    $('#cartItems').on('click', '.remove-item-btn', function() {
        const id = $(this).closest('.cart-item').data('id');
        removeFromCart(id);
    });

    // Activar la primera categoría al cargar la página
    $('.category-link').first().addClass('active');
    

    // Al final, fuerza activación de categoría si viene en URL


}); // <-- FIN DE $(document).ready()


// =================================================================
// FUNCIONES GLOBALES DEL CARRITO (Deben estar FUERA de document.ready)
// =================================================================

let cart = [];

// --- Función para actualizar la cantidad desde la tarjeta del producto ---
function updateQuantity(button, change) {
    const quantityElement = $(button).siblings('span');
    let quantity = parseInt(quantityElement.text()) + change;
    if (quantity < 0) quantity = 0;
    quantityElement.text(quantity);
}

// --- Función para añadir un producto al carrito ---
function addToCart(button) {
    
    // Verificar horario antes de añadir al carrito
    if (!isWithinOrderHours()) {
        $('#hoursModal').css('display', 'block');
        startCountdown();
        return;
    }
    
    const itemCard = $(button).closest('.item.features-image');
    const quantity = parseInt(itemCard.find('.counter span').text());

    if (quantity <= 0) {
        showNotification('Por favor, selecciona una cantidad.', 'error');
        return;
    }
    
    const id = itemCard.data('id');
    const title = itemCard.find('.card-title').text().trim();
    const priceText = itemCard.find('.card-price').text();
    const price = parseFloat(priceText.replace(/[^0-9.]/g, ''));

    const existingItem = cart.find(item => item.id == id); // Usamos '==' por flexibilidad

    if (existingItem) {
        existingItem.quantity += quantity;
    } else {
        cart.push({ id, title, price, quantity });
    }

    updateCartUI();
    showNotification(`${quantity} × ${title} añadido(s)`, 'success');
    itemCard.find('.counter span').text('0'); // Resetear contador
    
    // Track AddToCart con datos del producto
        const itemWrapper = button.closest('.item-wrapper');
        const productName = itemWrapper.querySelector('.card-title').innerText;
        const productId = itemWrapper.parentElement.dataset.id;

        if (typeof fbq !== 'undefined') {
            trackAddToCart(productName, productId, price);
        }
}

// --- Función para actualizar la cantidad DENTRO del modal ---
function updateCartQuantity(id, change) {
    const item = cart.find(item => item.id == id);
    if (item) {
        item.quantity += change;
        if (item.quantity <= 0) {
            removeFromCart(id);
        } else {
            updateCartUI();
        }
    }
}

// --- Función para eliminar un producto del carrito ---
function removeFromCart(id) {
    cart = cart.filter(item => item.id != id);
    updateCartUI();
}

// --- Función para calcular el total ---
function calculateTotal() {
    return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
}

// --- Función ÚNICA para actualizar TODA la interfaz del carrito ---
function updateCartUI() {
    const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
    $('.cart-count').text(totalItems);

    const cartItemsList = $('#cartItems');
    cartItemsList.empty();

    if (cart.length === 0) {
        if ($('#cartModal').is(':visible')) {
            $('#cartModal').css('display', 'none');
            $('#emptyCartModal').css('display', 'block');
        }
        return;
    }

    cart.forEach(item => {
        const itemElement = `
            <li class="cart-item" data-id="${item.id}">
                <div class="item-info">
                    <p class="item-title">${item.title}</p>
                    <p class="item-price">$${item.price.toFixed(2)} × ${item.quantity} = $${(item.price * item.quantity).toFixed(2)}</p>
                </div>
                <div class="quantity-controls">
                    <button class="update-qty-btn" data-change="-1">-</button>
                    <span>${item.quantity}</span>
                    <button class="update-qty-btn" data-change="1">+</button>
                </div>
                <button class="remove-item-btn"><i class="fas fa-trash"></i></button>
            </li>`;
        cartItemsList.append(itemElement);
    });

    $('#cartTotal').text(calculateTotal().toFixed(2));
}

// --- Función para mostrar notificaciones (sin cambios) ---
function showNotification(message, type = 'success') {
    let icon = '', bgColor = '';
    if (type === 'success') { icon = '<i class="fas fa-check-circle"></i>'; bgColor = '#28a745'; }
    else if (type === 'error') { icon = '<i class="fas fa-exclamation-triangle"></i>'; bgColor = '#dc3545'; }
    else { icon = '<i class="fas fa-info-circle"></i>'; bgColor = '#17a2b8'; }

    const notification = $(`<div class="notification" style="background-color:${bgColor};"><div class="notification-content">${icon}<span>${message}</span></div><div class="progress-bar"></div></div>`);
    $('body').append(notification);
    notification.addClass('show');
    notification.find('.progress-bar').css('animation', 'progress-fill 3s linear forwards');
    setTimeout(() => {
        notification.removeClass('show');
        setTimeout(() => notification.remove(), 500);
    }, 3000);
}

// Función para compartir
function shareMenu() {
    if (navigator.share) {
        navigator.share({
            title: 'Menú de Taqueria el Mexicano',
            text: '¡Revisa el delicioso menú de Taqueria el Mexicano!',
            url: window.location.href
        }).then(() => console.log('Compartido con éxito'))
            .catch((error) => console.log('Error al compartir:', error));
    } else {
        showNotification('La función de compartir no está soportada en tu dispositivo.', 'info');
    }
}

// =================================================================
// FUNCIONES DE HORARIO DE PEDIDOS
// =================================================================

// Función para verificar si estamos en horario de pedidos
function isWithinOrderHours() {
    const now = new Date();
    const currentHour = now.getHours();
    const currentMinutes = now.getMinutes();
    
    // Horario: 4:00 PM (16:00) a 2:00 AM (02:00)
    if (currentHour >= 16 || currentHour < 2) {
        // Si es después de las 4pm o antes de las 2am
        if (currentHour >= 16 || currentHour < 2) {
            return true;
        }
    }
    return false;
}

// Función para calcular el tiempo hasta la apertura
function startCountdown() {
    const now = new Date();
    const openTime = new Date();
    
    // Establecer hora de apertura (4:00 PM)
    if (now.getHours() < 16) {
        // Si es antes de las 4pm, abrimos hoy a las 4pm
        openTime.setHours(16, 0, 0, 0);
    } else if (now.getHours() >= 2) {
        // Si es después de las 2am pero antes de las 4pm, abrimos hoy a las 4pm
        if (now.getHours() < 16) {
            openTime.setHours(16, 0, 0, 0);
        } else {
            // Si es después de las 4pm pero antes de medianoche, ya debería estar abierto
            // Este caso no debería ocurrir porque la función isWithinOrderHours ya lo verifica
            openTime.setDate(openTime.getDate() + 1);
            openTime.setHours(16, 0, 0, 0);
        }
    }
    
    // Actualizar el countdown cada segundo
    const countdownInterval = setInterval(function() {
        const now = new Date();
        const timeRemaining = openTime - now;
        
        if (timeRemaining <= 0) {
            clearInterval(countdownInterval);
            $('#hoursModal').css('display', 'none');
            return;
        }
        
        // Calcular horas, minutos y segundos restantes
        const hours = Math.floor(timeRemaining / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
        
        // Actualizar el display
        $('#countdown-hours').text(hours.toString().padStart(2, '0'));
        $('#countdown-minutes').text(minutes.toString().padStart(2, '0'));
        $('#countdown-seconds').text(seconds.toString().padStart(2, '0'));
        
    }, 1000);
    
    // Detener el countdown si se cierra el modal
    $('#hoursModal').on('click', '.close-btn-hours', function() {
        clearInterval(countdownInterval);
    });
}

// Actualizar la hora actual en el modal
function updateCurrentTime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const ampm = hours >= 12 ? 'PM' : 'AM';
    const formattedHours = hours % 12 || 12;
    
    $('#current-time').text(`${formattedHours}:${minutes.toString().padStart(2, '0')} ${ampm}`);
}

// Actualizar la hora cada minuto
setInterval(updateCurrentTime, 60000);
updateCurrentTime(); // Ejecutar inmediatamente al cargar