<?= $this->extend('layouts/main') ?>

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

<?= $this->section('content') ?>
<style>
    .booking-container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        margin-top: 30px;
        color: #fff;
    }
    .cinema-layout {
        flex: 1;
        min-width: 320px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 30px;
    }
    .sidebar-summary {
        width: 350px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-self: flex-start;
    }
    .screen {
        width: 80%;
        height: 8px;
        background: #fff;
        margin: 0 auto 50px auto;
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.8);
        text-align: center;
        position: relative;
    }
    .screen-text {
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8rem;
        letter-spacing: 4px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        font-weight: bold;
    }
    .seats-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        margin-bottom: 40px;
    }
    .seat-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .row-label {
        font-weight: bold;
        width: 25px;
        color: #ff9800;
        font-size: 1.1rem;
        text-align: center;
    }
    .seat {
        width: 35px;
        height: 35px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease;
        position: relative;
    }
    .seat input {
        display: none;
    }
    
    /* Seat Types & States */
    .seat.disponible.estandar {
        background-color: #1a73e8;
        color: #fff;
        border: 1px solid #155cb4;
    }
    .seat.disponible.preferencial {
        background-color: #f4b400;
        color: #fff;
        border: 1px solid #c69200;
        box-shadow: 0 0 5px rgba(244, 180, 0, 0.4);
    }
    .seat.disponible.discapacitado {
        background-color: #9c27b0;
        color: #fff;
        border: 1px solid #7b1fa2;
    }
    .seat.ocupado {
        background-color: #334155 !important;
        color: rgba(255, 255, 255, 0.5);
        border: 1px solid #1e293b;
        cursor: not-allowed;
    }
    .seat.ocupado::after {
        content: "";
    }
    
    /* Hover & Selected States */
    .seat.disponible:hover {
        transform: scale(1.15);
        filter: brightness(1.2);
    }
    .seat.seleccionado {
        background-color: #4caf50 !important; /* Verde brillante para destacar los seleccionados */
        color: #fff !important;
        border: 1px solid #2e7d32 !important;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.8);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
        100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
    }

    /* Legends */
    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 20px;
    }
    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
    }
    .legend-box {
        width: 18px;
        height: 18px;
        border-radius: 4px;
    }

    /* Summary Details */
    .sidebar-summary h3 {
        color: #ff9800;
        margin-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
    }
    .summary-info p {
        margin: 8px 0;
        font-size: 0.95rem;
        color: #ccc;
    }
    .summary-info p strong {
        color: #fff;
    }
    .selected-list {
        margin-top: 20px;
        max-height: 120px;
        overflow-y: auto;
        padding-right: 5px;
    }
    .selected-badge {
        display: inline-block;
        background: rgba(255, 152, 0, 0.2);
        border: 1px solid #ff9800;
        color: #ff9800;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.85rem;
        margin: 3px;
    }
    .price-total {
        margin: 25px 0;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price-total span {
        font-size: 1.3rem;
        font-weight: bold;
        color: #ff9800;
    }
    .btn-block {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 1.05rem;
    }

    /* Aviso de promoción de entradas durante la selección de asientos */
    .promo-seat-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        font-size: 0.9rem;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .promo-seat-banner-pending {
        background: rgba(255, 152, 0, 0.12);
        border: 1px solid #ff9800;
        color: #ffb84d;
    }
    .promo-seat-banner-active {
        background: rgba(76, 175, 80, 0.15);
        border: 1px solid #4caf50;
        color: #7be08a;
    }
    .promo-seat-banner-off {
        background: rgba(158, 158, 158, 0.1);
        border: 1px solid #757575;
        color: #bdbdbd;
    }
    .promo-seat-banner-icon {
        font-size: 1.05rem;
    }
    .promo-seat-banner-text strong {
        color: #fff;
    }
</style>

<div class="section-heading">
    <div>
        <span class="eyebrow">Paso 1 de 3</span>
        <h2>Selección de Asientos</h2>
    </div>
    <a href="<?= base_url('pelicula/' . $funcion->id_pelicula) ?>" class="text-link">Cancelar compra</a>
</div>

<form action="<?= base_url('reserva/asientos/' . $funcion->id_funcion) ?>" method="POST" id="form-asientos">
    <div class="booking-container">
        
        <!-- Left Side: Cinema Seats Layout -->
        <div class="cinema-layout">
            <div class="screen">
                <span class="screen-text">Pantalla</span>
            </div>

            <div class="seats-grid">
                <?php foreach ($asientosAgrupados as $fila => $asientos): ?>
                    <div class="seat-row">
                        <span class="row-label"><?= esc($fila) ?></span>
                        
                        <?php foreach ($asientos as $asiento): ?>
                            <?php 
                                $esOcupado = ($asiento->estado_ocupacion === 'ocupado');
                                $claseTipo = esc($asiento->tipo);
                                $claseOcupacion = $esOcupado ? 'ocupado' : 'disponible';
                                $precioBaseAsiento = $funcion->precio_base * ($asiento->tipo === 'preferencial' || $asiento->tipo === 'discapacitado' ? 0.75 : 1.00);
                                $precioFinalAsiento = $descuentoPct > 0 ? round($precioBaseAsiento * (1 - ($descuentoPct / 100)), 2) : $precioBaseAsiento;

                                // Precio si la promoción de sesión llega a aplicarse (una vez alcanzada la cantidad mínima)
                                $precioPromoAsiento = $precioFinalAsiento;
                                if ($promoInfo && $promoInfo['aplicable']) {
                                    $precioPromoAsiento = $promoInfo['tipo_descuento'] === 'PRECIO_FIJO'
                                        ? round($promoInfo['valor_descuento'], 2)
                                        : round($precioBaseAsiento * (1 - ($promoInfo['valor_descuento'] / 100)), 2);
                                }
                            ?>
                            <label class="seat <?= $claseOcupacion ?> <?= $claseTipo ?>" id="seat-label-<?= $asiento->id_asiento ?>">
                                <input 
                                    type="checkbox" 
                                    name="asientos[]" 
                                    value="<?= $asiento->id_asiento ?>" 
                                    data-codigo="<?= esc($fila) . $asiento->numero ?>"
                                    data-precio="<?= $precioFinalAsiento ?>"
                                    data-precio-promo="<?= $precioPromoAsiento ?>"
                                    <?= $esOcupado ? 'disabled' : '' ?>
                                    onchange="actualizarSeleccion(this)"
                                >
                                <?= $asiento->numero ?>
                            </label>
                        <?php endforeach; ?>
                        
                        <span class="row-label"><?= esc($fila) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Aviso de promoción de entradas (ej. "Domingo 3D") -->
            <?php if ($promoInfo): ?>
                <?php if ($promoInfo['aplicable']): ?>
                    <div id="promo-banner" class="promo-seat-banner promo-seat-banner-pending">
                        <span class="promo-seat-banner-icon">🏷️</span>
                        <span class="promo-seat-banner-text" id="promo-banner-text">
                            Promoción <strong><?= esc($promoInfo['nombre']) ?></strong> disponible: selecciona
                            <?= (int) $promoInfo['cantidad_minima'] ?> entrada(s) o más para aplicarla.
                        </span>
                    </div>
                <?php else: ?>
                    <div class="promo-seat-banner promo-seat-banner-off">
                        <span class="promo-seat-banner-icon">⚠</span>
                        <span class="promo-seat-banner-text">
                            Promoción <strong><?= esc($promoInfo['nombre']) ?></strong> no aplica aquí: <?= esc($promoInfo['motivo']) ?>
                        </span>
                    </div>
                <?php endif; ?>
            <?php endif; ?>

            <!-- Legend of seat states -->
            <?php if ($descuentoPct > 0): ?>
                <div style="background: rgba(76,175,80,0.12); border: 1px solid #4caf50; color: #4caf50; padding: 10px 15px; border-radius: 8px; margin-bottom: 15px; font-size: 0.9rem; text-align: center;">
                    🎟️ Tienes un descuento de membresía del <?= esc($descuentoPct) ?>% aplicado a los precios mostrados.
                </div>
            <?php endif; ?>
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-box" style="background-color: #1a73e8; border: 1px solid #155cb4;"></div>
                    <span>Estándar (S/ <?= number_format($descuentoPct > 0 ? $funcion->precio_base * (1 - $descuentoPct / 100) : $funcion->precio_base, 2) ?>)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-box" style="background-color: #f4b400; border: 1px solid #c69200;"></div>
                    <span>Preferencial (S/ <?= number_format($descuentoPct > 0 ? ($funcion->precio_base * 0.75) * (1 - $descuentoPct / 100) : $funcion->precio_base * 0.75, 2) ?>)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-box" style="background-color: #9c27b0; border: 1px solid #7b1fa2;"></div>
                    <span>Discapacitado / Accesible (S/ <?= number_format($descuentoPct > 0 ? ($funcion->precio_base * 0.75) * (1 - $descuentoPct / 100) : $funcion->precio_base * 0.75, 2) ?>)</span>
                </div>
                <div class="legend-item">
                    <div class="legend-box" style="background-color: #4caf50; border: 1px solid #2e7d32;"></div>
                    <span>Seleccionado</span>
                </div>
                <div class="legend-item">
                    <div class="legend-box" style="background-color: #334155; border: 1px solid #1e293b;"></div>
                    <span>Ocupado (Vendido)</span>
                </div>
            </div>
        </div>

        <!-- Right Side: Sidebar Summary -->
        <div class="sidebar-summary">
            <div>
                <h3>Resumen de Compra</h3>
                <div class="summary-info">
                    <p><strong>Película:</strong> <?= esc($funcion->pelicula_titulo) ?></p>
                    <p><strong>Cine:</strong> <?= esc($funcion->local_nombre) ?></p>
                    <p><strong>Sala:</strong> <?= esc($funcion->sala_nombre) ?> (<?= esc($funcion->sala_tipo) ?>)</p>
                    <p><strong>Fecha:</strong> <?= date('d/m/Y', strtotime($funcion->fecha)) ?></p>
                    <p><strong>Hora:</strong> <?= date('g:i A', strtotime($funcion->hora_inicio)) ?></p>
                </div>

                <div style="margin-top: 25px;">
                    <p><strong>Asientos seleccionados:</strong></p>
                    <div class="selected-list" id="lista-asientos">
                        <span style="color: #888; font-style: italic;">Ninguno seleccionado</span>
                    </div>
                </div>
            </div>

            <div>
                <div class="price-total">
                    <strong>Total a pagar:</strong>
                    <span id="txt-total">S/ 0.00</span>
                </div>

                <button type="submit" class="btn btn-primary btn-block" id="btn-submit" disabled>
                    Continuar al pago
                </button>
            </div>
        </div>
        
    </div>
</form>

<script>
    const promoInfo = <?= json_encode($promoInfo ? [
        'aplicable' => $promoInfo['aplicable'],
        'nombre' => $promoInfo['nombre'],
        'cantidad_minima' => (int) $promoInfo['cantidad_minima'],
    ] : null) ?>;

    function actualizarSeleccion(checkbox) {
        const label = document.getElementById('seat-label-' + checkbox.value);
        
        if (checkbox.checked) {
            label.classList.add('seleccionado');
        } else {
            label.classList.remove('seleccionado');
        }

        // Obtener todos los checkboxes seleccionados
        const seleccionados = document.querySelectorAll('input[name="asientos[]"]:checked');
        const containerLista = document.getElementById('lista-asientos');
        const txtTotal = document.getElementById('txt-total');
        const btnSubmit = document.getElementById('btn-submit');
        const promoBanner = document.getElementById('promo-banner');
        const promoBannerText = document.getElementById('promo-banner-text');

        if (seleccionados.length === 0) {
            containerLista.innerHTML = '<span style="color: #888; font-style: italic;">Ninguno seleccionado</span>';
            txtTotal.innerText = 'S/ 0.00';
            btnSubmit.disabled = true;
            if (promoBanner) {
                promoBanner.classList.remove('promo-seat-banner-active');
                promoBanner.classList.add('promo-seat-banner-pending');
                promoBannerText.innerHTML = 'Promoción <strong>' + promoInfo.nombre + '</strong> disponible: selecciona ' + promoInfo.cantidad_minima + ' entrada(s) o más para aplicarla.';
            }
            return;
        }

        // ¿La promoción de sesión ya alcanzó su cantidad mínima con lo seleccionado?
        const promoActiva = promoInfo && promoInfo.aplicable && seleccionados.length >= promoInfo.cantidad_minima;

        let htmlAsientos = '';
        let total = 0;
        let totalSinPromo = 0;

        seleccionados.forEach(cb => {
            const codigo = cb.getAttribute('data-codigo');
            const precioNormal = parseFloat(cb.getAttribute('data-precio'));
            const precioPromo = parseFloat(cb.getAttribute('data-precio-promo'));
            const precio = promoActiva ? precioPromo : precioNormal;

            total += precio;
            totalSinPromo += precioNormal;
            htmlAsientos += `<span class="selected-badge">${codigo}</span>`;
        });

        containerLista.innerHTML = htmlAsientos;
        txtTotal.innerText = 'S/ ' + total.toFixed(2);
        btnSubmit.disabled = false;

        if (promoBanner) {
            if (promoActiva) {
                const ahorro = (totalSinPromo - total).toFixed(2);
                promoBanner.classList.remove('promo-seat-banner-pending');
                promoBanner.classList.add('promo-seat-banner-active');
                promoBannerText.innerHTML = '✅ Estás aplicando la promoción <strong>' + promoInfo.nombre + '</strong>. Precio modificado: <strong>S/ ' + total.toFixed(2) + '</strong> (ahorras S/ ' + ahorro + ').';
            } else if (promoInfo && promoInfo.aplicable) {
                const faltan = promoInfo.cantidad_minima - seleccionados.length;
                promoBanner.classList.remove('promo-seat-banner-active');
                promoBanner.classList.add('promo-seat-banner-pending');
                promoBannerText.innerHTML = 'Promoción <strong>' + promoInfo.nombre + '</strong>: selecciona ' + faltan + ' entrada(s) más para aplicarla.';
            }
        }
    }
</script>
<?= $this->endSection() ?>
