<?= $this->extend('layouts/main') ?>
<?php
/** @var object $funcion */
/** @var array $compra */
/** @var array $productos */
/** @var array $carrito_reserva */
$funcion = $funcion ?? (object)[
    'pelicula_titulo' => '',
    'id_funcion' => 0,
];
$compra = $compra ?? [ 'total' => 0 ];
$productos = $productos ?? [];
$carrito_reserva = $carrito_reserva ?? [ 'items' => [], 'total' => 0.0 ];
?>

<?= $this->section('title') ?>Agregar productos - <?= esc($funcion->pelicula_titulo) ?><?= $this->endSection() ?>

<?= $this->section('content') ?>
<style>
    .products-step {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 28px;
        margin-top: 24px;
        color: #fff;
    }
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
    }
    .product-card {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 14px;
        padding: 16px;
    }
    .product-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
        margin-bottom: 12px;
        background: #111;
    }
    .product-card h3 {
        margin: 0 0 8px 0;
        color: #fff;
    }
    .product-card p {
        color: #ccc;
        font-size: 0.95rem;
        margin: 0 0 10px 0;
    }
    .product-card .price {
        font-size: 1.1rem;
        color: #ff9800;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .product-card form {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .product-card select {
        flex: 1;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        color: #fff;
        padding: 8px 10px;
    }
    .product-card button {
        background: #ff9800;
        color: #111;
        border: 0;
        padding: 8px 12px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
    }
    .summary-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 14px;
        padding: 20px;
        position: sticky;
        top: 20px;
        align-self: start;
    }
    .summary-card h3 {
        color: #ff9800;
        margin-top: 0;
    }
    .summary-item {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
        color: #ddd;
    }
    .summary-total {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 12px;
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        font-weight: 700;
    }
    .btn-primary {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 16px;
        padding: 12px 14px;
        background: #ff9800;
        color: #111;
        text-decoration: none;
        border-radius: 10px;
        font-weight: 700;
    }
    @media (max-width: 900px) {
        .products-step { grid-template-columns: 1fr; }
        .summary-card { position: static; }
    }
</style>

<div class="section-heading">
    <div>
        <span class="eyebrow">Paso 2 de 3</span>
        <h2>Agrega snacks y bebidas</h2>
    </div>
    <a href="<?= base_url('reserva/asientos/' . $funcion->id_funcion) ?>" class="text-link">Volver a asientos</a>
</div>

<div class="products-step">
    <div>
        <p style="color:#ccc; margin-bottom:16px;">Añade productos al total de tu compra antes de completar el pago. Después continuarás al checkout con tus entradas.</p>

        <?php if (empty($productos)): ?>
            <div class="empty-state">No hay productos disponibles por el momento.</div>
        <?php else: ?>
            <div class="product-grid">
                <?php foreach ($productos as $producto): ?>
                    <?php
                        $imagenUrl = $producto->getImagenUrl();
                    ?>
                    <div class="product-card">
                        <img src="<?= esc($imagenUrl) ?>" alt="<?= esc($producto->nombre) ?>">
                        <h3><?= esc($producto->nombre) ?></h3>
                        <p><?= esc($producto->descripcion) ?></p>
                        <div class="price">S/ <?= number_format((float)$producto->precio, 2) ?></div>
                        <form action="<?= base_url('reserva/productos/' . $funcion->id_funcion) ?>" method="post">
                            <input type="hidden" name="id_producto" value="<?= esc($producto->id_producto) ?>">
                            <select name="cantidad">
                                <option value="1">1 unidad</option>
                                <option value="2">2 unidades</option>
                                <option value="3">3 unidades</option>
                                <option value="4">4 unidades</option>
                            </select>
                            <button type="submit">Agregar</button>
                        </form>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <aside class="summary-card">
        <h3>Resumen de tu compra</h3>
        <div class="summary-item"><span>Entradas</span><strong>S/ <?= number_format((float)$compra['total'], 2) ?></strong></div>
        <div class="summary-item"><span>Productos</span><strong>S/ <?= number_format((float)$carrito_reserva['total'], 2) ?></strong></div>
        <div class="summary-total"><span>Total final</span><span>S/ <?= number_format((float)$compra['total'] + (float)$carrito_reserva['total'], 2) ?></span></div>

        <?php if (!empty($carrito_reserva['items'])): ?>
            <div style="margin-top:16px;">
                <h4 style="margin-bottom:8px; color:#ff9800;">Productos seleccionados</h4>
                <?php foreach ($carrito_reserva['items'] as $item): ?>
                    <div class="summary-item" style="align-items: flex-start; gap: 12px;">
                        <div style="flex: 1;">
                            <strong><?= esc($item['nombre']) ?></strong>
                            <form action="<?= base_url('reserva/productos/' . $funcion->id_funcion . '/actualizar') ?>" method="post" style="display:flex;align-items:center;gap:10px;margin-top:6px;">
                                <?= csrf_field() ?>
                                <input type="hidden" name="id_producto" value="<?= esc($item['id_producto']) ?>">
                                <input type="number" name="cantidad" value="<?= esc($item['cantidad']) ?>" min="1" style="width:70px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:#fff;">
                                <button type="submit" class="btn-primary" style="padding:8px 12px;font-size:0.85rem;">Actualizar</button>
                            </form>
                        </div>
                        <div style="text-align:right;">
                            <strong>S/ <?= number_format((float)$item['subtotal'], 2) ?></strong>
                            <form action="<?= base_url('reserva/productos/' . $funcion->id_funcion . '/eliminar') ?>" method="post" style="margin-top:10px;">
                                <?= csrf_field() ?>
                                <input type="hidden" name="id_producto" value="<?= esc($item['id_producto']) ?>">
                                <button type="submit" class="text-link" style="color:#ff8b8b;font-size:0.85rem;padding:0;border:none;background:none;cursor:pointer;">Eliminar</button>
                            </form>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <a href="<?= base_url('reserva/pago') ?>" class="btn-primary">Continuar al pago</a>
    </aside>
</div>
<?= $this->endSection() ?>
