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

<?= $this->section('title') ?>Pago de Alimentos - CinePlex<?= $this->endSection() ?>

<?= $this->section('content') ?>
<div class="section-heading">
    <div>
        <span class="eyebrow">Checkout</span>
        <h2>Pago de Alimentos y Bebidas</h2>
    </div>
    <a href="<?= base_url('alimentos') ?>" class="text-link">Volver al carrito</a>
</div>

<div class="payment-container">

    <!-- Left column: Fictional animated Credit Card and Form -->
    <div class="checkout-form">

        <!-- Fictional animated card -->
        <div class="card-space">
            <div class="credit-card" id="digital-card">
                <!-- Front Side -->
                <div class="card-front">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div class="card-chip"></div>
                        <div class="card-logo">CinePlex</div>
                    </div>
                    <div class="card-number-display" id="disp-card-number">•••• •••• •••• ••••</div>
                    <div class="card-meta">
                        <div>
                            <div style="font-size: 0.6rem; opacity: 0.7;">Titular</div>
                            <div class="card-holder-display" id="disp-card-holder">NOMBRE TITULAR</div>
                        </div>
                        <div>
                            <div style="font-size: 0.6rem; opacity: 0.7;">Vence</div>
                            <div id="disp-card-expiry">MM/AA</div>
                        </div>
                    </div>
                </div>
                <!-- Back Side -->
                <div class="card-back">
                    <div class="card-stripe"></div>
                    <div class="card-signature-area">
                        <div class="card-cvv-display" id="disp-card-cvv">•••</div>
                    </div>
                    <div class="card-back-text">
                        Esta tarjeta es puramente ficticia y se utiliza con fines de demostración académica en el sistema de CinePlex. No ingrese credenciales reales de tarjetas activas.
                    </div>
                </div>
            </div>
        </div>

        <form action="<?= base_url('alimentos/confirmar') ?>" method="POST" id="payment-form">
            <?= csrf_field() ?>

            <div class="form-group">
                <label for="numero_tarjeta">Número de tarjeta</label>
                <input
                    type="text"
                    id="numero_tarjeta"
                    name="numero_tarjeta"
                    class="form-control"
                    placeholder="4000 1234 5678 9010"
                    maxlength="19"
                    required
                    autocomplete="off"
                    oninput="handleCardNumber(this)"
                >
            </div>

            <div class="form-group">
                <label for="nombre_titular">Nombre en la tarjeta</label>
                <input
                    type="text"
                    id="nombre_titular"
                    name="nombre_titular"
                    class="form-control"
                    placeholder="JUAN PEREZ"
                    required
                    oninput="handleCardHolder(this)"
                >
            </div>

            <div class="row-fields">
                <div class="form-group">
                    <label for="fecha_vencimiento">Expiración (MM/AA)</label>
                    <input
                        type="text"
                        id="fecha_vencimiento"
                        name="fecha_vencimiento"
                        class="form-control"
                        placeholder="12/28"
                        maxlength="5"
                        required
                        oninput="handleExpiry(this)"
                    >
                </div>
                <div class="form-group">
                    <label for="cvv">CVV</label>
                    <input
                        type="password"
                        id="cvv"
                        name="cvv"
                        class="form-control"
                        placeholder="123"
                        maxlength="4"
                        required
                        onfocus="flipCard(true)"
                        onblur="flipCard(false)"
                        oninput="handleCVV(this)"
                    >
                </div>
            </div>

            <button type="submit" class="btn-checkout">
                Confirmar Pago de S/ <?= number_format($carrito['total'], 2) ?>
            </button>
        </form>
    </div>

    <!-- Right column: Summary Card -->
    <div class="booking-summary-card">
        <h3>Resumen del Carrito</h3>

        <?php foreach ($carrito['items'] as $item): ?>
            <div class="summary-item">
                <span><?= esc($item['nombre']) ?> x<?= esc($item['cantidad']) ?></span>
                <strong>S/ <?= number_format($item['subtotal'], 2) ?></strong>
            </div>
            <?php if ($carrito['descuento_pct'] > 0 && empty($item['id_promocion'])): ?>
                <p class="summary-subitem">S/ <?= number_format($item['precio_unitario'], 2) ?> → S/ <?= number_format($item['precio_final'], 2) ?> c/u</p>
            <?php endif; ?>
        <?php endforeach; ?>

        <div class="summary-item" style="margin-top:12px; padding-top:12px; border-top: 1px solid rgba(255,255,255,0.1);">
            <span>Sub-total:</span>
            <strong>S/ <?= number_format($carrito['subtotal'], 2) ?></strong>
        </div>
        <?php if ($carrito['descuento_pct'] > 0): ?>
            <div class="summary-item" style="color:#4caf50;">
                <span>Descuento membresía (<?= esc($carrito['descuento_pct']) ?>%):</span>
                <strong style="color:#4caf50;">- S/ <?= number_format($carrito['descuento_monto'], 2) ?></strong>
            </div>
        <?php endif; ?>

        <div class="summary-total">
            <span>Total a pagar:</span>
            <span>S/ <?= number_format($carrito['total'], 2) ?></span>
        </div>

        <div style="margin-top:20px; font-size:0.8rem; color:#aaa; text-align:center; line-height:1.4;">
            🔒 Simulación de entorno seguro de pago universitario. No se procesan cobros reales.
        </div>
    </div>
</div>

<script>
    const card = document.getElementById('digital-card');
    const dispNumber = document.getElementById('disp-card-number');
    const dispHolder = document.getElementById('disp-card-holder');
    const dispExpiry = document.getElementById('disp-card-expiry');
    const dispCVV = document.getElementById('disp-card-cvv');

    function flipCard(flipped) {
        if (flipped) {
            card.classList.add('flipped');
        } else {
            card.classList.remove('flipped');
        }
    }

    function handleCardNumber(input) {
        let value = input.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
        let formatted = '';
        for (let i = 0; i < value.length; i++) {
            if (i > 0 && i % 4 === 0) {
                formatted += ' ';
            }
            formatted += value[i];
        }
        input.value = formatted;
        dispNumber.innerText = formatted || '•••• •••• •••• ••••';
    }

    function handleCardHolder(input) {
        dispHolder.innerText = input.value.toUpperCase() || 'NOMBRE TITULAR';
    }

    function handleExpiry(input) {
        let value = input.value.replace(/[^0-9]/g, '');
        if (value.length > 2) {
            value = value.substring(0, 2) + '/' + value.substring(2, 4);
        }
        input.value = value;
        dispExpiry.innerText = value || 'MM/AA';
    }

    function handleCVV(input) {
        input.value = input.value.replace(/[^0-9]/g, '');
        dispCVV.innerText = input.value || '•••';
    }

    document.getElementById('payment-form').addEventListener('submit', function (e) {
        const btn = this.querySelector('.btn-checkout');
        btn.disabled = true;
        btn.innerText = 'Procesando pago simulado... Por favor espere.';
        btn.style.background = '#888';
        btn.style.cursor = 'not-allowed';
    });
</script>
<?= $this->endSection() ?>
