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

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

<?= $this->section('content') ?>
<style>
    .payment-container {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        margin-top: 30px;
        color: #fff;
        justify-content: center;
    }
    
    .checkout-form {
        flex: 1;
        min-width: 320px;
        max-width: 500px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 30px;
    }

    .booking-summary-card {
        width: 380px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 30px;
        align-self: flex-start;
    }

    /* CARD FLIP ANIMATION */
    .card-space {
        perspective: 1000px;
        width: 100%;
        max-width: 350px;
        height: 200px;
        margin: 0 auto 30px auto;
    }

    .credit-card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s ease;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    }

    .credit-card.flipped {
        transform: rotateY(180deg);
    }

    .card-front, .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        border-radius: 15px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-front {
        background: linear-gradient(135deg, #1f1c2c 0%, #928dab 100%);
    }

    .card-back {
        background: linear-gradient(135deg, #2c3e50 0%, #0f2027 100%);
        transform: rotateY(180deg);
        padding: 20px 0;
    }

    /* Front Styles */
    .card-chip {
        width: 40px;
        height: 30px;
        background: radial-gradient(circle, #f9d976 0%, #e9b646 100%);
        border-radius: 5px;
    }

    .card-logo {
        font-weight: bold;
        font-style: italic;
        font-size: 1.4rem;
        color: #ff9800;
        text-align: right;
    }

    .card-number-display {
        font-size: 1.3rem;
        letter-spacing: 2px;
        font-family: 'Courier New', monospace;
        margin: 20px 0;
    }

    .card-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        text-transform: uppercase;
        color: rgba(255,255,255,0.7);
    }

    .card-holder-display {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Back Styles */
    .card-stripe {
        width: 100%;
        height: 40px;
        background: #111;
        margin-top: 10px;
    }

    .card-signature-area {
        margin: 15px 20px 0 20px;
        background: #fff;
        height: 35px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        border-radius: 3px;
    }

    .card-cvv-display {
        color: #000;
        font-weight: bold;
        font-family: monospace;
        letter-spacing: 1px;
    }

    .card-back-text {
        font-size: 0.6rem;
        color: rgba(255,255,255,0.5);
        padding: 10px 20px;
        text-align: justify;
    }

    /* Form Fields */
    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 0.9rem;
        color: #ccc;
    }

    .form-control {
        width: 100%;
        padding: 12px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 6px;
        color: #fff;
        font-size: 1rem;
        outline: none;
        transition: border 0.3s ease;
    }

    .form-control:focus {
        border-color: #ff9800;
    }

    .row-fields {
        display: flex;
        gap: 15px;
    }

    .row-fields .form-group {
        flex: 1;
    }

    .btn-checkout {
        display: block;
        width: 100%;
        padding: 14px;
        background: #ff9800;
        border: none;
        border-radius: 6px;
        color: #000;
        font-weight: bold;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.2s ease;
        margin-top: 10px;
    }

    .btn-checkout:hover {
        background: #e68a00;
    }

    /* Summary Details */
    .booking-summary-card h3 {
        color: #ff9800;
        margin-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
    }

    .summary-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 0.95rem;
        color: #ccc;
    }

    .summary-item strong {
        color: #fff;
    }

    .selected-seats-container {
        margin: 15px 0;
    }

    .seat-badge {
        display: inline-block;
        background: rgba(255, 152, 0, 0.2);
        border: 1px solid #ff9800;
        color: #ff9800;
        padding: 3px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .summary-total {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .summary-total span {
        color: #ff9800;
    }

    .summary-subitem {
        margin: 6px 0 0 0;
        font-size: 0.9rem;
        color: #bbb;
    }
</style>

<div class="section-heading">
    <div>
        <span class="eyebrow">Paso 2 de 3</span>
        <h2>Método de Pago Simulado</h2>
    </div>
    <a href="<?= base_url('reserva/asientos/' . $compra['id_funcion']) ?>" class="text-link">Volver a asientos</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('reserva/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((float)($compra['total_final'] ?? $compra['total']), 2) ?>
            </button>
        </form>
    </div>

    <!-- Right column: Summary Card -->
    <div class="booking-summary-card">
        <h3>Detalles de la Compra</h3>
        
        <div class="summary-item">
            <span>Película:</span>
            <strong><?= esc($funcion->pelicula_titulo) ?></strong>
        </div>
        <div class="summary-item">
            <span>Cine:</span>
            <strong><?= esc($funcion->local_nombre) ?></strong>
        </div>
        <div class="summary-item">
            <span>Sala:</span>
            <strong><?= esc($funcion->sala_nombre) ?></strong>
        </div>
        <div class="summary-item">
            <span>Fecha:</span>
            <strong><?= date('d/m/Y', strtotime($funcion->fecha)) ?></strong>
        </div>
        <div class="summary-item">
            <span>Horario:</span>
            <strong><?= date('g:i A', strtotime($funcion->hora_inicio)) ?></strong>
        </div>

        <div class="selected-seats-container">
            <span style="display:block; margin-bottom:8px; font-size:0.9rem; color:#ccc;">Asientos:</span>
            <?php foreach ($compra['asientos'] as $asiento): ?>
                <span class="seat-badge">
                    <?= esc($asiento['codigo']) ?> (S/ <?= number_format($asiento['precio'], 2) ?>)
                </span>
            <?php endforeach; ?>
        </div>

        <?php if (!empty($compra['descuento_pct']) && $compra['descuento_pct'] > 0): ?>
            <div class="summary-item">
                <span>Subtotal:</span>
                <strong>S/ <?= number_format($compra['subtotal'], 2) ?></strong>
            </div>
            <div class="summary-item" style="color:#4caf50;">
                <span>Descuento membresía (<?= esc($compra['descuento_pct']) ?>%):</span>
                <strong style="color:#4caf50;">- S/ <?= number_format($compra['descuento_monto'], 2) ?></strong>
            </div>
        <?php endif; ?>

        <div class="summary-item">
            <span>Productos agregados:</span>
            <strong>S/ <?= number_format((float)($compra['productos_total'] ?? 0), 2) ?></strong>
        </div>
        <?php if (!empty($carrito_reserva['items'])): ?>
            <?php foreach ($carrito_reserva['items'] as $item): ?>
                <p class="summary-subitem">• <?= esc($item['nombre']) ?> x<?= esc($item['cantidad']) ?> · S/ <?= number_format((float)$item['subtotal'], 2) ?></p>
            <?php endforeach; ?>
        <?php endif; ?>

        <div class="summary-total">
            <span>Total a pagar:</span>
            <span>S/ <?= number_format((float)($compra['total_final'] ?? $compra['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) {
        // Formatear agrupando de a 4 números
        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;

        // Mostrar en la tarjeta
        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 || '•••';
    }

    // Evitar doble submit deshabilitando el botón
    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() ?>
