<?= $this->extend('layouts/main') ?>
<?php
/** @var array $productos */
/** @var float $descuentoPct */
/** @var array $carrito */
$productos = $productos ?? [];
$descuentoPct = $descuentoPct ?? 0.0;
$carrito = $carrito ?? [
    'items' => [],
    'subtotal' => 0.0,
    'descuento_pct' => 0.0,
    'descuento_monto' => 0.0,
    'total' => 0.0,
];
?>

<?= $this->section('title') ?>Alimentos y Bebidas<?= $this->endSection() ?>

<?= $this->section('content') ?>
<section class="confiteria-section">
    <div class="section-heading">
        <span class="eyebrow">Alimentos y bebidas</span>
        <h2>Menú de snacks y combos</h2>
    </div>

    <div class="membership-box">
        <p>Disfruta de combos irresistibles, bebidas y promociones especiales antes o después de tu función.</p>
    </div>

    <?php if ($descuentoPct > 0): ?>
        <div class="membership-box" style="background: linear-gradient(90deg, #1b5e20, #2e7d32);">
            <p>🎟️ Tienes un descuento de membresía del <?= esc((string)$descuentoPct) ?>% aplicado a los precios que ves a continuación.</p>
        </div>
    <?php endif; ?>

    <div class="confiteria-tabs">
        <button class="active" type="button" data-filter="todos">Todos</button>
        <button type="button" data-filter="combos">Combos</button>
        <button type="button" data-filter="canchita">Canchita</button>
        <button type="button" data-filter="bebidas">Bebidas</button>
    </div>

    <div class="confirm-header">
        <div>
            <p class="eyebrow">Escoge tu snack favorito</p>
            <h2>Selecciona productos y confirma tu compra</h2>
        </div>
        <p class="cta-note">Añade tus alimentos y bebidas al carrito y continúa al pago desde el panel lateral.</p>
    </div>

    <div class="card-grid">
        <?php foreach ($productos as $producto): ?>
            <?php $precioFinal = $descuentoPct > 0 ? round($producto->precio * (1 - $descuentoPct / 100), 2) : $producto->precio; ?>
            <article class="promo-card accent" data-category="<?= esc($producto->categoria) ?>" data-product-id="<?= esc($producto->id_producto) ?>" data-product-name="<?= esc($producto->nombre) ?>">
                <div class="card-img" style="background-image:url('<?= esc($producto->getImagenUrl()) ?>');"></div>
                <div class="card-body">
                    <h3><?= esc($producto->nombre) ?></h3>
                    <p><?= esc($producto->descripcion) ?></p>
                    <div class="card-footer">
                        <?php if ($descuentoPct > 0): ?>
                            <span class="price">
                                <span style="text-decoration: line-through; opacity: 0.6; font-size: 0.8em; margin-right: 4px;">S/ <?= number_format($producto->precio, 2) ?></span>
                                S/ <?= number_format($precioFinal, 2) ?>
                            </span>
                        <?php else: ?>
                            <span class="price">S/ <?= number_format($producto->precio, 2) ?></span>
                        <?php endif; ?>
                        <button class="btn-add" type="button" data-product-id="<?= esc($producto->id_producto) ?>">Agregar</button>
                    </div>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<?= view('partials/carrito_widget', ['carrito' => $carrito]) ?>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.confiteria-tabs button');
        const cards = document.querySelectorAll('.card-grid .promo-card');

        const filters = {
            todos: card => true,
            combos: card => card.dataset.category === 'combo',
            canchita: card => card.dataset.category === 'comida',
            bebidas: card => card.dataset.category === 'bebida',
            dulces: card => card.dataset.category === 'comida' && card.querySelector('h3').textContent.toLowerCase().includes('dulce')
        };

        function applyFilter(filterKey) {
            cards.forEach(card => {
                const shouldShow = filters[filterKey] ? filters[filterKey](card) : true;
                card.style.display = shouldShow ? '' : 'none';
            });
        }

        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                applyFilter(this.dataset.filter);
            });
        });

        document.querySelectorAll('.btn-add').forEach(button => {
            button.addEventListener('click', function () {
                const idProducto = this.dataset.productId;
                fetch('<?= base_url('alimentos/carrito/agregar') ?>', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
                    body: new URLSearchParams({ id_producto: idProducto, cantidad: 1 })
                })
                    .then(response => response.json())
                    .then(result => {
                        if (result.success && result.cart) {
                            window.CineCart.refresh(result.cart);
                            window.CineCart.open();
                        } else if (!result.success) {
                            alert(result.message || 'No se pudo agregar el producto.');
                        }
                    })
                    .catch(() => alert('Ocurrió un error al agregar el producto.'));
            });
        });
    });
</script>
<?= $this->endSection() ?>
