@extends('layouts.kaiadmin.master')

@section('title', 'Realizar Pago')

<style>
    /* Estilos generales mejorados */
    body {
        background-color: #f5f7fa;
        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }

    /* Contenedor principal */
    .payment-main-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Estilos mejorados de la tarjeta con texto blanco */
    .card-preview {
        perspective: 1000px;
        margin-bottom: 2.5rem;
    }

    .card-item {
        position: relative;
        width: 100%;
        max-width: 430px;
        height: 270px;
        margin: auto;
        transform-style: preserve-3d;
        transition: transform 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    .card-item__side {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        backface-visibility: hidden;
        overflow: hidden;
        background: linear-gradient(135deg, #0a2463, #3e92cc);
        box-shadow: 0 20px 50px rgba(14, 21, 47, 0.25);
        transition: all 0.6s cubic-bezier(0.71, 0.03, 0.56, 0.85);
    }

    .card-item__side--back {
        transform: rotateY(180deg);
        background: linear-gradient(135deg, #3e92cc, #0a2463);
    }

    .card-item.is-flipped .card-item__side--front {
        transform: rotateY(-180deg);
    }

    .card-item.is-flipped .card-item__side--back {
        transform: rotateY(0);
    }

    .card-item__wrapper {
        padding: 25px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white !important;
    }

    .card-item__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-item__chip {
        width: 50px;
        height: auto;
        filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,0.3));
    }

    .card-item__type {
        font-size: 2rem;
    }

    .card-item__type i {
        color: white !important;
    }

    .card-item__number {
        font-size: 1.5rem;
        letter-spacing: 1px;
        margin: 1rem 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        color: white !important;
    }

    .card-item__content {
        display: flex;
        justify-content: space-between;
    }

    .card-item__holder {
        font-size: 0.75rem;
        opacity: 0.9;
        margin-bottom: 0.25rem;
        color: white !important;
    }

    .card-item__name {
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: white !important;
    }

    .card-item__date {
        text-align: right;
    }

    .card-item__dateTitle {
        font-size: 0.75rem;
        opacity: 0.9;
        display: block;
        color: white !important;
    }

    .card-item__dateItem {
        font-size: 1rem;
        font-weight: 500;
        color: white !important;
    }

    /* Parte trasera de la tarjeta */
    .card-item__band {
        height: 50px;
        background: rgba(0, 0, 0, 0.3);
        margin-top: 30px;
    }

    .card-item__cvv {
        margin-top: 20px;
        padding: 10px;
        background: white;
        text-align: right;
        border-radius: 4px;
        width: 80%;
        margin-left: auto;
        margin-right: 20px;
    }

    .card-item__cvvTitle {
        font-size: 0.75rem;
        color: #666 !important;
    }

    .card-item__cvvBand {
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 1px;
        color: #333 !important;
    }

    /* Resto de estilos permanecen igual */
    .payment-form {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    .floating-label {
        position: relative;
        margin-bottom: 1.75rem;
    }

    .floating-label input {
        height: 3.125rem;
        padding: 1rem 0.75rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .floating-label input:focus {
        border-color: #3e92cc;
        box-shadow: 0 0 0 0.2rem rgba(62, 146, 204, 0.25);
        outline: none;
    }

    .floating-label label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1rem 0.75rem;
        pointer-events: none;
        transform-origin: 0 0;
        transition: all 0.2s ease-in-out;
        color: #6c757d;
    }

    .floating-label input:focus ~ label,
    .floating-label input:not(:placeholder-shown) ~ label {
        opacity: 0.8;
        transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
        color: #3e92cc;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
    }

    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

    .custom-select {
        height: 3.125rem;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        font-size: 1rem;
    }

    .custom-select:focus {
        border-color: #3e92cc;
        box-shadow: 0 0 0 0.2rem rgba(62, 146, 204, 0.25);
    }

    /* Botón mejorado */
    .btn-payment {
        background: linear-gradient(135deg, #0a2463, #3e92cc);
        border: none;
        border-radius: 8px;
        padding: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        font-size: 1rem;
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .btn-payment:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #3e92cc, #0a2463);
    }

    .btn-payment:disabled {
        background: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    /* Resumen de compra mejorado */
    .summary-card {
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .summary-header {
        background: linear-gradient(135deg, #0a2463, #3e92cc);
        color: white;
        border-radius: 12px 12px 0 0 !important;
        padding: 1rem;
    }

    .summary-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
    }

    .table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .table th {
        border-top: none;
        font-weight: 600;
        color: #495057;
        background-color: #f8f9fa;
    }

    .table td {
        vertical-align: middle;
        border-top: 1px solid #e9ecef;
        padding: 0.75rem;
    }

    .table tr:first-child td {
        border-top: none;
    }

    .total-amount {
        margin-top: auto;
        padding: 1.5rem 0;
        border-top: 1px solid #e9ecef;
    }

    .total-amount h4 {
        font-weight: 600;
    }

    .payment-security {
        text-align: center;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .payment-security i {
        color: #28a745;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .payment-security p {
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    /* Títulos y encabezados */
    .payment-title {
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* Mensajes de error */
    .error-message {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }

    /* Responsividad mejorada */
    @media (max-width: 768px) {
        .card-item {
            height: 230px;
        }
        
        .card-item__number {
            font-size: 1.25rem;
        }
        
        .payment-form {
            padding: 1.5rem;
        }
    }
</style>

@section('content_header')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center py-3">
            <a href="{{ url()->previous() }}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left mr-2"></i> Regresar
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid payment-main-container py-4">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card border-0 shadow-none bg-transparent">
                <div class="card-header bg-transparent border-0 py-3">
                    <h2 class="payment-title">Proceso de Pago</h2>
                </div>
                <div class="card-body p-0">
                    <div class="row">
                        <!-- Formulario de pago con tarjeta interactiva -->
                        <div class="col-lg-7 pr-lg-4">
                            <div id="app" class="payment-form">
                                <!-- Tarjeta de pago -->
                                <div class="card-preview">
                                    <div class="card-form__inner">
                                        <div class="card-item" :class="{ 'is-flipped': isCardFlipped }">
                                            <div class="card-item__side card-item__side--front">
                                                <div class="card-item__wrapper">
                                                    <div class="card-item__top">
                                                        <img src="{{ asset('images/chip.png') }}" class="card-item__chip">
                                                        <div class="card-item__type">
                                                            <i :class="cardTypeIcon"></i>
                                                        </div>
                                                    </div>
                                                    <label class="card-item__number">[[ formattedCardNumber || '•••• •••• •••• ••••' ]]</label>
                                                    <div class="card-item__content">
                                                        <label class="card-item__info">
                                                            <div class="card-item__holder">Titular de la Tarjeta</div>
                                                            <div class="card-item__name">[[ cardName || 'NOMBRE COMPLETO' ]]</div>
                                                        </label>
                                                        <div class="card-item__date">
                                                            <label class="card-item__dateTitle">Vence</label>
                                                            <label class="card-item__dateItem">[[ cardMonth || 'MM' ]]</label> /
                                                            <label class="card-item__dateItem">[[ cardYear ? cardYear.slice(-2) : 'YY' ]]</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-item__side card-item__side--back">
                                                <div class="card-item__band"></div>
                                                <div class="card-item__cvv">
                                                    <div class="card-item__cvvTitle">CVV</div>
                                                    <div class="card-item__cvvBand">[[ cardCvv || '•••' ]]</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Formulario de pago -->
                                <form id="payment-form" @submit.prevent="submitPayment">
                                    <input type="hidden" id="payment-token" value="{{ $paymentOrder->token ?? '' }}">

                                    <div class="form-group floating-label">
                                        <input type="text" id="card-number" class="form-control" 
                                               v-model="cardNumber" @input="formatCardNumber" 
                                               v-on:focus="handleFocus('cardNumber')"
                                               :class="{'is-invalid': cardError}"
                                               placeholder=" ">
                                        <label for="card-number">Número de Tarjeta</label>
                                        <small class="text-danger error-message" v-if="cardError">[[ cardError ]]</small>
                                    </div>

                                    <div class="form-group floating-label">
                                        <input type="text" id="card-name" class="form-control" 
                                               v-model="cardName"
                                               :class="{'is-invalid': nameError}"
                                               placeholder=" ">
                                        <label for="card-name">Nombre del Titular</label>
                                        <small class="text-danger error-message" v-if="nameError">[[ nameError ]]</small>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <select id="expiry-month" class="form-control custom-select" 
                                                                v-model="cardMonth" @focus="handleFocus('cardMonth')"
                                                                :class="{'is-invalid': expiryError}">
                                                            <option value="">Mes</option>
                                                            @for($month = 1; $month <= 12; $month++)
                                                                <option value="{{ sprintf('%02d', $month) }}">{{ sprintf('%02d', $month) }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group">
                                                        <select id="expiry-year" class="form-control custom-select" 
                                                                v-model="cardYear" @focus="handleFocus('cardYear')"
                                                                :class="{'is-invalid': expiryError}">
                                                            <option value="">Año</option>
                                                            @for($year = date('Y'); $year <= date('Y') + 10; $year++)
                                                                <option value="{{ $year }}">{{ $year }}</option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <small class="text-danger error-message" v-if="expiryError">[[ expiryError ]]</small>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group floating-label">
                                                <input type="text" id="cvc" class="form-control" 
                                                       v-model="cardCvv" v-mask="'###'" maxlength="3" 
                                                       v-on:focus="handleFocus('cardCvv')" @input="validateForm"
                                                       :class="{'is-invalid': cvvError}"
                                                       placeholder=" ">
                                                <label for="cvc">CVV</label>
                                                <small class="text-danger error-message" v-if="cvvError">[[ cvvError ]]</small>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" class="btn btn-payment btn-block mt-4" 
                                            id="pay-button" :disabled="!isFormValid">
                                        <i class="fas fa-lock mr-2"></i>
                                        Realizar Pago Seguro
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Resumen de la compra -->
                        <div class="col-lg-5 mt-4 mt-lg-0">
                            <div class="summary-card">
                                <div class="card-header summary-header">
                                    <h5 class="mb-0 text-center">Resumen</h5>
                                </div>
                                <div class="summary-body">
                                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Descripción</th>
                                                    <th class="text-right">Importe</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($items as $item)
                                                    <tr>
                                                        <td>{{ $item['description'] }}</td>
                                                        <td class="text-right">{{ number_format($item['charge'], 2) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="total-amount">
                                        <h4 class="text-center mb-0">
                                            Total a Pagar:
                                            <span class="text-primary font-weight-bold">
                                                Q{{ number_format($totalAmount, 2) }}
                                            </span>
                                        </h4>
                                    </div>
                                    <div class="payment-security">
                                        <i class="fas fa-shield-alt"></i>
                                        <p class="mb-1">Pago 100% seguro</p>
                                        <p class="small">Tus datos están protegidos</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-the-mask@0.11.1/dist/vue-the-mask.min.js"></script>

<script>

    const recaptchaSiteKey = @json($recaptchaSiteKey ?? '');
  new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data() {
        return {
            cardNumber: '',
            formattedCardNumber: '',
            cardName: '',
            cardMonth: '',
            cardYear: '',
            cardCvv: '',
            isCardFlipped: false,
            isFormValid: false,
            cardError: '',
            expiryError: '',
            cvvError: '',
            nameError: '',
            touchedFields: {
                cardNumber: false,
                cardName: false,
                cardMonth: false,
                cardYear: false,
                cardCvv: false,
            }
        };
    },
    computed: {
        cardTypeIcon() {
            const cleanCardNumber = this.cardNumber.replace(/\D/g, '');
            
            // Visa
            if (/^4/.test(cleanCardNumber)) {
                return 'fab fa-cc-visa';
            }
            // Mastercard
            if (/^5[1-5]/.test(cleanCardNumber)) {
                return 'fab fa-cc-mastercard';
            }
            // American Express
            if (/^3[47]/.test(cleanCardNumber)) {
                return 'fab fa-cc-amex';
            }
            // Discover
            if (/^6(?:011|5)/.test(cleanCardNumber)) {
                return 'fab fa-cc-discover';
            }
            // Diners Club
            if (/^3(?:0[0-5]|[68])/.test(cleanCardNumber)) {
                return 'fab fa-cc-diners-club';
            }
            // JCB
            if (/^(?:2131|1800|35)/.test(cleanCardNumber)) {
                return 'fab fa-cc-jcb';
            }
            
            // Default
            return 'far fa-credit-card';
        }
    },
    mounted() {
        // Cargar reCAPTCHA cuando el componente se monte
        if (!recaptchaSiteKey) {
            console.error('No existe recaptchaSiteKey configurado.');
            return;
        }

        const recaptchaScript = document.createElement('script');
        recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=' + recaptchaSiteKey;
        document.head.appendChild(recaptchaScript);
    },
    watch: {
        cardNumber(value) {
            // Eliminar cualquier carácter que no sea número
            let cleaned = value.replace(/\D/g, '');
            
            // Limitar a 19 dígitos (actualizado para soportar más formatos)
            cleaned = cleaned.substring(0, 19);
            
            // Usar la función de formato mejorada
            let formatted = this.formatCardNumber(cleaned);
            
            // Actualizar el valor mostrado
            this.cardNumber = formatted;
            this.formattedCardNumber = formatted;
            
            this.validateForm();
        },
        cardName(value) {
            this.validateForm();
        },
        cardMonth(value) {
            this.validateForm();
        },
        cardYear(value) {
            this.validateForm();
        },
        cardCvv(value) {
            this.validateForm();
        }
    },
    methods: {
        formatCardNumber(value) {
            const groups = {
                13: [4, 4, 5],
                14: [4, 4, 6],
                15: [4, 6, 5],
                16: [4, 4, 4, 4],
                19: [4, 4, 4, 4, 3]
            };

            const length = value.length;
            const group = groups[length] || groups[16];

            let result = '';
            let currentGroup = 0;
            let currentGroupLength = 0;

            for (let i = 0; i < value.length; i++) {
                if (currentGroupLength === group[currentGroup]) {
                    result += ' ';
                    currentGroup++;
                    currentGroupLength = 0;
                }
                result += value[i];
                currentGroupLength++;
            }

            return result.trim();
        },
        async submitPayment() {
            if (this.isFormValid) {
                try {
                    // Ejecutar reCAPTCHA
                    const token = await this.executeRecaptcha();
                    
                    // Preparar los datos del formulario
                   /* const formData = new FormData();
                    formData.append('cardNumber', this.cardNumber.replace(/\D/g, ''));
                    formData.append('cardName', this.cardName);
                    formData.append('cardMonth', this.cardMonth);
                    formData.append('cardYear', this.cardYear);
                    formData.append('cardCvv', this.cardCvv);
                    formData.append('g-recaptcha-response', token);
                    */

                   const payload = {
                        payment_token: document.getElementById('payment-token').value,

                        cardNumber: this.cardNumber.replace(/\D/g, ''),
                        cardName: this.cardName.trim(),
                        cardMonth: this.cardMonth,
                        cardYear: this.cardYear,
                        cardCvv: this.cardCvv,

                        'g-recaptcha-response': token
                    };

                    // Mostrar loader
                    const button = document.getElementById('pay-button');
                    const originalText = button.innerHTML;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Procesando...';
                    button.disabled = true;

                    // Realizar la petición al servidor
                    /*const response = await fetch('/realizar-pago', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Accept': 'application/json'
                        }
                    });
                    */

                    const response = await fetch('{{ route("payments.charge") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(payload)
                    });

                    const data = await response.json();

                    console.log('HTTP STATUS:', response.status);
                    //console.log('RESPUESTA BACKEND:', data);
                    console.log('RESPUESTA BACKEND JSON:', JSON.stringify(data, null, 2));

                    if (data.success) {
                        // Mostrar mensaje de éxito
                        Swal.fire({
                            icon: 'success',
                            title: 'Pago exitoso',
                            text: 'Tu pago ha sido procesado correctamente',
                            confirmButtonText: 'Continuar'
                        }).then(() => {
                            // Redireccionar a la página de confirmación
                            window.location.href = data.redirect || '/';
                        });
                    } else {
                        // Mostrar error
                        let errorText = data.error || data.message || 'Ocurrió un error al procesar el pago';

                            if (data.errors) {
                                errorText = Object.values(data.errors).flat().join('\n');
                            }

                            if (data.neonet && data.neonet.response_code) {
                                errorText += '\nCódigo NeoNet: ' + data.neonet.response_code;
                            }

                            if (data.neonet && data.neonet.trace) {
                                errorText += '\nTrace: ' + data.neonet.trace;
                            }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error en el pago',
                            text: errorText,
                            confirmButtonText: 'Entendido'
                        });
                    }
                } catch (error) {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Ocurrió un error al procesar el pago',
                        confirmButtonText: 'Entendido'
                    });
                } finally {
                    // Restaurar el botón
                    const button = document.getElementById('pay-button');
                    button.innerHTML = '<i class="fas fa-lock mr-2"></i> Realizar Pago Seguro';
                    button.disabled = !this.isFormValid;
                }
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Formulario incompleto',
                    text: 'Por favor, complete todos los campos correctamente.',
                    confirmButtonText: 'Entendido'
                });
            }
        },
        executeRecaptcha() {
            return new Promise((resolve, reject) => {
                if (!recaptchaSiteKey) {
                    reject('reCAPTCHA site key no configurado');
                    return;
                }
                
                if (typeof grecaptcha === 'undefined') {
                    reject('reCAPTCHA no está cargado');
                    return;
                }
                
                grecaptcha.ready(function() {
                    grecaptcha.execute(recaptchaSiteKey, {action: 'submit'})
                        .then(resolve)
                        .catch(reject);
                });
            });
        },
        luhnCheck(cardNumber) {
            let sum = 0;
            let isEven = false;
            
            for (let i = cardNumber.length - 1; i >= 0; i--) {
                let digit = parseInt(cardNumber.charAt(i), 10);
                
                if (isEven) {
                    digit *= 2;
                    if (digit > 9) {
                        digit -= 9;
                    }
                }
                
                sum += digit;
                isEven = !isEven;
            }
            
            return (sum % 10) === 0;
        },
        validateCardName() {
            if (!this.cardName.trim()) {
                this.nameError = 'El nombre es requerido';
                return false;
            }
            if (this.cardName.trim().length < 3) {
                this.nameError = 'El nombre debe tener al menos 3 caracteres';
                return false;
            }
            this.nameError = '';
            return true;
        },
        validateCardNumber() {
            const cleanCardNumber = this.cardNumber.replace(/\D/g, '');
            
            if (!cleanCardNumber) {
                this.cardError = 'El número de tarjeta es requerido';
                return false;
            }
            
            const validLengths = [13, 14, 15, 16, 19];
            
            if (!validLengths.includes(cleanCardNumber.length)) {
                this.cardError = 'Longitud de tarjeta inválida';
                return false;
            }
            
            if (!this.luhnCheck(cleanCardNumber)) {
                this.cardError = 'Número de tarjeta inválido';
                return false;
            }
            
            this.cardError = '';
            return true;
        },
        validateExpiry() {
            if (!this.cardMonth || !this.cardYear) {
                this.expiryError = 'La fecha de expiración es requerida';
                return false;
            }

            const currentDate = new Date();
            const currentYear = currentDate.getFullYear();
            const currentMonth = currentDate.getMonth() + 1;

            if (this.cardYear < currentYear || 
                (this.cardYear == currentYear && this.cardMonth < currentMonth)) {
                this.expiryError = 'La tarjeta ha vencido';
                return false;
            }

            this.expiryError = '';
            return true;
        },
        validateCVV() {
            if (!this.cardCvv) {
                this.cvvError = 'El CVV es requerido';
                return false;
            }
            if (this.cardCvv.length < 3 || this.cardCvv.length > 4) {
                this.cvvError = 'CVV inválido (debe tener 3 o 4 dígitos)';
                return false;
            }
            this.cvvError = '';
            return true;
        },
        validateForm() {
            // Limpiar errores previos
            this.cardError = '';
            this.nameError = '';
            this.expiryError = '';
            this.cvvError = '';

            // Validar solo si los campos han sido tocados
            let isValid = true;

            if (this.touchedFields.cardNumber) {
                isValid = this.validateCardNumber() && isValid;
            }

            if (this.touchedFields.cardName) {
                isValid = this.validateCardName() && isValid;
            }

            if (this.touchedFields.cardMonth || this.touchedFields.cardYear) {
                isValid = this.validateExpiry() && isValid;
            }

            if (this.touchedFields.cardCvv) {
                isValid = this.validateCVV() && isValid;
            }

            // Verificar si todos los campos requeridos están llenos y son válidos
            const cleanCardNumber = this.cardNumber.replace(/\D/g, '');
            const validLengths = [13, 14, 15, 16, 19];
            
            this.isFormValid = 
                cleanCardNumber.length > 0 && 
                validLengths.includes(cleanCardNumber.length) && 
                this.cardName.trim().length >= 3 &&
                this.cardMonth && 
                this.cardYear && 
                this.cardCvv && this.cardCvv.length >= 3 &&
                isValid &&
                !this.cardError && 
                !this.nameError &&
                !this.expiryError && 
                !this.cvvError;

            return this.isFormValid;
        },
        handleFocus(field) {
            this.touchedFields[field] = true;
            if (field === 'cardCvv') {
                this.isCardFlipped = true;
            } else {
                this.isCardFlipped = false;
            }
            this.validateForm();
        }
    }
});
</script>
@stop