@extends('layouts.app')

@section('title', 'Donaciones - Club Atlético Torino de Talara')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">
            <!-- Main Donation Card -->
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden donation-main-card">
                <div class="card-body p-4 p-md-5">
                    
                    <!-- Header -->
                    <div class="text-center mb-4">
                        <img src="{{ asset('img/Logo_de_Club_Atletico_Torino.png') }}" alt="Torino de Talara" style="height: 68px; object-fit: contain;" class="mb-3">
                        <h2 class="fw-bold text-white mb-1" style="font-size: 26px; letter-spacing: -0.5px;">Donar al Club Atlético Torino</h2>
                        <p class="text-white-50 small mb-0" style="font-size: 13.5px;">Haz tu aporte al instante escaneando con Yape, Plin o con tarjeta</p>
                    </div>

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show rounded-3" role="alert">
                            <i class="fa-solid fa-circle-exclamation me-2"></i>
                            {{ $errors->first() }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('donations.store') }}" id="donationForm">
                        @csrf
                        <input type="hidden" name="culqi_token" id="culqi_token" value="">

                        <!-- PASO 1: MONTO DE LA DONACIÓN -->
                        <div class="donation-step-box mb-4">
                            <label class="step-label mb-2 text-white">
                                <span class="step-badge">1</span> Elige o escribe el monto a donar
                            </label>

                            <!-- Botones Rápidos de Monto -->
                            <div class="row g-2 mb-3">
                                <div class="col"><button type="button" class="btn btn-amount-preset w-100 rounded-3 py-2" data-amount="5">S/ 5</button></div>
                                <div class="col"><button type="button" class="btn btn-amount-preset w-100 rounded-3 py-2" data-amount="10">S/ 10</button></div>
                                <div class="col"><button type="button" class="btn btn-amount-preset active w-100 rounded-3 py-2" data-amount="20">S/ 20</button></div>
                                <div class="col"><button type="button" class="btn btn-amount-preset w-100 rounded-3 py-2" data-amount="50">S/ 50</button></div>
                                <div class="col"><button type="button" class="btn btn-amount-preset w-100 rounded-3 py-2" data-amount="100">S/ 100</button></div>
                            </div>

                            <!-- Input Personalizado -->
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-white text-dark fw-bold border-end-0">S/</span>
                                <input type="number" class="form-control fw-bold fs-4 py-2 text-dark" 
                                       id="amount" name="amount" value="{{ old('amount', '20.00') }}" 
                                       min="1" step="0.50" placeholder="0.00" required>
                            </div>
                        </div>

                        <!-- PASO 2: SELECCIÓN DEL MÉTODO DE PAGO -->
                        <div class="donation-step-box mb-4">
                            <label class="step-label mb-2 text-white">
                                <span class="step-badge">2</span> Selecciona tu método de pago
                            </label>

                            <div class="row g-3">
                                <!-- Opción Yape -->
                                <div class="col-4">
                                    <label class="payment-selector-card yape-selector selected p-3 rounded-4 text-center d-block cursor-pointer">
                                        <input class="form-check-input d-none" type="radio" name="payment_method" 
                                               id="method_yape" value="yape" {{ old('payment_method', 'yape') == 'yape' ? 'checked' : '' }} required>
                                        <div class="selector-icon mb-1">
                                            <i class="fa-solid fa-mobile-screen fs-3"></i>
                                        </div>
                                        <span class="d-block fw-bold text-white fs-6">Yape</span>
                                        <small class="selector-subtext">Genera QR</small>
                                    </label>
                                </div>

                                <!-- Opción Plin -->
                                <div class="col-4">
                                    <label class="payment-selector-card plin-selector p-3 rounded-4 text-center d-block cursor-pointer">
                                        <input class="form-check-input d-none" type="radio" name="payment_method" 
                                               id="method_plin" value="plin" {{ old('payment_method') == 'plin' ? 'checked' : '' }}>
                                        <div class="selector-icon mb-1">
                                            <i class="fa-solid fa-wallet fs-3"></i>
                                        </div>
                                        <span class="d-block fw-bold text-white fs-6">Plin</span>
                                        <small class="selector-subtext">Genera QR</small>
                                    </label>
                                </div>

                                <!-- Opción Tarjeta -->
                                <div class="col-4">
                                    <label class="payment-selector-card card-selector p-3 rounded-4 text-center d-block cursor-pointer">
                                        <input class="form-check-input d-none" type="radio" name="payment_method" 
                                               id="method_card" value="card" {{ old('payment_method') == 'card' ? 'checked' : '' }}>
                                        <div class="selector-icon mb-1">
                                            <i class="fa-regular fa-credit-card fs-3"></i>
                                        </div>
                                        <span class="d-block fw-bold text-white fs-6">Tarjeta</span>
                                        <small class="selector-subtext">Culqi</small>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- PASO 3: CAJA DINÁMICA DE PAGO CON CÓDIGO QR -->
                        <!-- 3.A: CAJA YAPE -->
                        <div id="yape-qr-box" class="qr-payment-container yape-theme p-4 rounded-4 mb-4 text-center">
                            <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom border-white-50">
                                <div class="d-flex align-items-center">
                                    <span class="badge-yape-icon me-2">Y</span>
                                    <span class="fw-bold text-white fs-5">Paga con Yape</span>
                                </div>
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold fs-6">
                                    Monto: S/ <span class="display-amount">20.00</span>
                                </span>
                            </div>

                            <!-- Código QR Yape -->
                            <div class="qr-canvas-wrapper mx-auto p-3 bg-white rounded-4 shadow-sm mb-3 position-relative">
                                <div id="yape-qrcode" class="d-flex justify-content-center"></div>
                                <div class="qr-center-logo yape-qr-logo">
                                    <i class="fa-solid fa-mobile-screen"></i>
                                </div>
                            </div>
                            <p class="text-white-50 small mb-2">Abre tu app Yape, pulsa <strong>Escanear QR</strong> y enfoca este código</p>

                            <!-- Datos para Yapear si no puede escanear -->
                            <div class="p-3 rounded-3 mb-3 bg-dark-translucent text-start">
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <div>
                                        <span class="d-block text-white-50 small" style="font-size: 11px;">O yapea directo al número:</span>
                                        <span class="fw-bold text-white fs-5 tracking-wide">{{ config('culqi.yape_phone', '969 852 147') }}</span>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-warning rounded-pill px-3 py-1 btn-copy-phone" data-phone="{{ preg_replace('/\s+/', '', config('culqi.yape_phone', '969852147')) }}">
                                        <i class="fa-regular fa-copy me-1"></i> Copiar número
                                    </button>
                                </div>
                                <div class="mt-2 text-white-50 small" style="font-size: 11px;">
                                    Titular: <strong class="text-white">{{ config('culqi.yape_name', 'Club Atlético Torino de Talara') }}</strong>
                                </div>
                            </div>

                            <!-- Número de Operación -->
                            <div class="text-start">
                                <label for="op_code_yape" class="form-label text-white small fw-bold mb-1">
                                    Número de Operación / Aprobación (opcional):
                                </label>
                                <input type="text" class="form-control rounded-3 py-2 input-operation-code" 
                                       id="op_code_yape" name="operation_code" placeholder="Ej: 123456 (6 dígitos que da Yape)">
                            </div>
                        </div>

                        <!-- 3.B: CAJA PLIN -->
                        <div id="plin-qr-box" class="qr-payment-container plin-theme p-4 rounded-4 mb-4 text-center" style="display: none;">
                            <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom border-white-50">
                                <div class="d-flex align-items-center">
                                    <span class="badge-plin-icon me-2">P</span>
                                    <span class="fw-bold text-white fs-5">Paga con Plin</span>
                                </div>
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold fs-6">
                                    Monto: S/ <span class="display-amount">20.00</span>
                                </span>
                            </div>

                            <!-- Código QR Plin -->
                            <div class="qr-canvas-wrapper mx-auto p-3 bg-white rounded-4 shadow-sm mb-3 position-relative">
                                <div id="plin-qrcode" class="d-flex justify-content-center"></div>
                                <div class="qr-center-logo plin-qr-logo">
                                    <i class="fa-solid fa-wallet"></i>
                                </div>
                            </div>
                            <p class="text-white-50 small mb-2">Abre tu app de Plin (BBVA, Scotiabank, Interbank), pulsa <strong>Escanear QR</strong> y enfoca este código</p>

                            <!-- Datos para Plinear si no puede escanear -->
                            <div class="p-3 rounded-3 mb-3 bg-dark-translucent text-start">
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                                    <div>
                                        <span class="d-block text-white-50 small" style="font-size: 11px;">O plinea directo al número:</span>
                                        <span class="fw-bold text-white fs-5 tracking-wide">{{ config('culqi.yape_phone', '969 852 147') }}</span>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-warning rounded-pill px-3 py-1 btn-copy-phone" data-phone="{{ preg_replace('/\s+/', '', config('culqi.yape_phone', '969852147')) }}">
                                        <i class="fa-regular fa-copy me-1"></i> Copiar número
                                    </button>
                                </div>
                                <div class="mt-2 text-white-50 small" style="font-size: 11px;">
                                    Titular: <strong class="text-white">{{ config('culqi.yape_name', 'Club Atlético Torino de Talara') }}</strong>
                                </div>
                            </div>

                            <!-- Número de Operación -->
                            <div class="text-start">
                                <label for="op_code_plin" class="form-label text-white small fw-bold mb-1">
                                    Número de Operación / Referencia (opcional):
                                </label>
                                <input type="text" class="form-control rounded-3 py-2 input-operation-code" 
                                       id="op_code_plin" placeholder="Ej: 654321">
                            </div>
                        </div>

                        <!-- 3.C: CAJA TARJETA (CULQI) -->
                        <div id="card-box" class="qr-payment-container card-theme p-4 rounded-4 mb-4 text-center" style="display: none;">
                            <div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom border-white-50">
                                <div class="d-flex align-items-center">
                                    <i class="fa-solid fa-credit-card text-warning fs-4 me-2"></i>
                                    <span class="fw-bold text-white fs-5">Tarjeta de Crédito o Débito</span>
                                </div>
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-bold fs-6">
                                    S/ <span class="display-amount">20.00</span>
                                </span>
                            </div>

                            <div class="p-3 rounded-3 text-start bg-dark-translucent mb-2">
                                <p class="text-white-50 small mb-2">
                                    Aceptamos <strong>Visa, Mastercard, American Express y Diners</strong> a través de la pasarela de pagos segura de <strong>Culqi</strong>.
                                </p>
                                <p class="text-white-50 small mb-0" style="font-size: 11.5px;">
                                    <i class="fa-solid fa-shield-halved text-success me-1"></i>
                                    Tus datos bancarios están cifrados y protegidos.
                                </p>
                            </div>
                        </div>

                        <!-- PASO 4: DATOS DEL DONANTE -->
                        <div class="donation-step-box mb-4">
                            <label class="step-label mb-2 text-white">
                                <span class="step-badge">3</span> Tus datos para la constancia
                            </label>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="donor_name" class="form-label text-white small fw-bold">Nombre o Apodo *</label>
                                    <input type="text" class="form-control rounded-3 py-2 @error('donor_name') is-invalid @enderror" 
                                           id="donor_name" name="donor_name" value="{{ old('donor_name', Auth::check() ? Auth::user()->name : '') }}" 
                                           placeholder="Ej: Juan Pérez" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="donor_email" class="form-label text-white small fw-bold">Correo Electrónico *</label>
                                    <input type="email" class="form-control rounded-3 py-2 @error('donor_email') is-invalid @enderror" 
                                           id="donor_email" name="donor_email" value="{{ old('donor_email', Auth::check() ? Auth::user()->email : '') }}" 
                                           placeholder="correo@ejemplo.com" required>
                                </div>
                                <div class="col-12">
                                    <label for="description" class="form-label text-white small fw-bold">Mensaje de aliento para el equipo (opcional)</label>
                                    <input type="text" class="form-control rounded-3 py-2" 
                                           id="description" name="description" value="{{ old('description') }}" 
                                           placeholder="¡Vamos Torino de Talara! Todo el apoyo desde...">
                                </div>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_anonymous" 
                                               name="is_anonymous" value="1" {{ old('is_anonymous') ? 'checked' : '' }}>
                                        <label class="form-check-label text-white-50 small" for="is_anonymous">
                                            Publicar mi donación como <strong>Anónimo</strong> en el muro del club
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- BOTÓN PRINCIPAL DE ACCIÓN -->
                        <div class="d-grid mb-3">
                            <button type="submit" class="btn btn-action-submit btn-lg rounded-pill fw-bold py-3 text-uppercase shadow" id="btn-submit-donation">
                                <i class="fa-solid fa-check-circle me-2"></i> <span id="submit-button-text">¡Ya Yapeé! Confirmar Donación</span>
                            </button>
                        </div>

                        <div class="text-center">
                            <span class="text-white-50" style="font-size: 11.5px;">
                                <i class="fa-solid fa-lock text-warning me-1"></i> Donación directa y segura para el Club Atlético Torino
                            </span>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Estilos generales de la tarjeta */
    .donation-main-card {
        background: linear-gradient(145deg, #3d0309 0%, #200104 100%);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
    }

    .donation-step-box {
        background: rgba(255, 255, 255, 0.04);
        padding: 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .step-label {
        font-size: 13.5px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .step-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: var(--torino-gold);
        color: #120104;
        font-size: 11px;
        font-weight: 900;
    }

    /* Botones de Monto Rápido */
    .btn-amount-preset {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #ffffff;
        font-weight: 700;
        font-size: 14px;
        transition: all 0.2s ease;
    }

    .btn-amount-preset:hover {
        background: rgba(245, 158, 11, 0.2);
        border-color: var(--torino-gold);
        color: #ffffff;
    }

    .btn-amount-preset.active {
        background: var(--torino-gold);
        border-color: var(--torino-gold);
        color: #120104;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }

    /* Selectores de Método */
    .payment-selector-card {
        background: rgba(255, 255, 255, 0.06);
        border: 2px solid transparent;
        transition: all 0.25s ease;
    }

    .payment-selector-card:hover {
        transform: translateY(-2px);
    }

    .payment-selector-card.selected {
        border-color: var(--torino-gold);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    }

    .yape-selector.selected {
        background: linear-gradient(135deg, rgba(116, 34, 132, 0.4) 0%, rgba(80, 15, 92, 0.6) 100%);
        border-color: #00d4b8;
    }

    .plin-selector.selected {
        background: linear-gradient(135deg, rgba(0, 82, 204, 0.4) 0%, rgba(0, 48, 135, 0.6) 100%);
        border-color: #00d2ff;
    }

    .card-selector.selected {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(120, 20, 30, 0.4) 100%);
        border-color: var(--torino-gold);
    }

    .selector-subtext {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        display: block;
    }

    /* Cajas temáticas de QR */
    .qr-payment-container {
        border-radius: 16px;
        transition: all 0.3s ease;
    }

    .yape-theme {
        background: linear-gradient(135deg, #742284 0%, #4b0e56 100%);
        border: 2px solid #8e2ea2;
        box-shadow: 0 10px 25px rgba(116, 34, 132, 0.35);
    }

    .plin-theme {
        background: linear-gradient(135deg, #0052cc 0%, #002b70 100%);
        border: 2px solid #1a6de8;
        box-shadow: 0 10px 25px rgba(0, 82, 204, 0.35);
    }

    .card-theme {
        background: linear-gradient(135deg, #4f0a13 0%, #290408 100%);
        border: 2px solid rgba(245, 158, 11, 0.4);
    }

    .badge-yape-icon, .badge-plin-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-weight: 900;
        font-size: 16px;
    }

    .badge-yape-icon {
        background-color: #00d4b8;
        color: #742284;
    }

    .badge-plin-icon {
        background-color: #00d2ff;
        color: #0052cc;
    }

    .bg-dark-translucent {
        background-color: rgba(0, 0, 0, 0.25);
    }

    /* Canvas del QR */
    .qr-canvas-wrapper {
        width: 220px;
        height: 220px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .qr-center-logo {
        position: absolute;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        font-size: 17px;
    }

    .yape-qr-logo {
        color: #742284;
        border: 2px solid #00d4b8;
    }

    .plin-qr-logo {
        color: #0052cc;
        border: 2px solid #00d2ff;
    }

    /* Botón Principal */
    .btn-action-submit {
        background-color: var(--torino-gold);
        color: #120104;
        transition: all 0.25s ease;
        letter-spacing: 0.5px;
    }

    .btn-action-submit:hover {
        background-color: #e59105;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4) !important;
    }

    .btn-action-submit.yape-btn-style {
        background-color: #00d4b8;
        color: #3b0643;
    }

    .btn-action-submit.yape-btn-style:hover {
        background-color: #05f0d1;
        color: #210226;
        box-shadow: 0 8px 20px rgba(0, 212, 184, 0.4) !important;
    }

    .btn-action-submit.plin-btn-style {
        background-color: #00d2ff;
        color: #00286b;
    }

    .btn-action-submit.plin-btn-style:hover {
        background-color: #33dcff;
        color: #001b47;
        box-shadow: 0 8px 20px rgba(0, 210, 255, 0.4) !important;
    }
</style>
@endsection

@section('scripts')
<!-- QR Code Library (Local Standalone) -->
<script src="{{ asset('js/qrcode.min.js') }}"></script>
<!-- Culqi Checkout JS v4 -->
<script src="https://checkout.culqi.com/js/v4"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('donationForm');
    const amountInput = document.getElementById('amount');
    const submitButton = document.getElementById('btn-submit-donation');
    const submitText = document.getElementById('submit-button-text');
    const culqiTokenInput = document.getElementById('culqi_token');

    const yapeBox = document.getElementById('yape-qr-box');
    const plinBox = document.getElementById('plin-qr-box');
    const cardBox = document.getElementById('card-box');

    const yapeQrContainer = document.getElementById('yape-qrcode');
    const plinQrContainer = document.getElementById('plin-qrcode');

    const clubPhone = '{{ config('culqi.yape_phone', '969 852 147') }}';
    const clubName = '{{ config('culqi.yape_name', 'Club Atlético Torino de Talara') }}';

    let yapeQrInstance = null;
    let plinQrInstance = null;

    // Función para generar/actualizar el código QR
    function updateQrCodes() {
        const rawAmount = parseFloat(amountInput.value) || 20;
        const formattedAmount = rawAmount.toFixed(2);

        // Actualizar todos los textos de monto en pantalla
        document.querySelectorAll('.display-amount').forEach(el => {
            el.textContent = formattedAmount;
        });

        // Payload del QR con información del club y monto exacto
        const cleanPhone = clubPhone.replace(/\s+/g, '');
        const yapeData = `YAPE: Club Atletico Torino | Monto: S/ ${formattedAmount} | Celular: ${cleanPhone}`;
        const plinData = `PLIN: Club Atletico Torino | Monto: S/ ${formattedAmount} | Celular: ${cleanPhone}`;

        // Generar QR para Yape
        if (typeof QRCode !== 'undefined') {
            if (!yapeQrInstance) {
                yapeQrContainer.innerHTML = '';
                yapeQrInstance = new QRCode(yapeQrContainer, {
                    text: yapeData,
                    width: 175,
                    height: 175,
                    colorDark: "#1f0525",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.M
                });
            } else {
                yapeQrInstance.clear();
                yapeQrInstance.makeCode(yapeData);
            }

            // Generar QR para Plin
            if (!plinQrInstance) {
                plinQrContainer.innerHTML = '';
                plinQrInstance = new QRCode(plinQrContainer, {
                    text: plinData,
                    width: 175,
                    height: 175,
                    colorDark: "#001e4a",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.M
                });
            } else {
                plinQrInstance.clear();
                plinQrInstance.makeCode(plinData);
            }
        }
    }

    // Inicializar QRs
    updateQrCodes();

    // Actualizar cuando cambie el monto
    amountInput.addEventListener('input', updateQrCodes);
    amountInput.addEventListener('change', updateQrCodes);

    // Botones rápidos de monto
    document.querySelectorAll('.btn-amount-preset').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.btn-amount-preset').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            amountInput.value = parseFloat(this.dataset.amount).toFixed(2);
            updateQrCodes();
        });
    });

    // Cambio de Método de Pago
    function handleMethodChange() {
        const selectedRadio = document.querySelector('input[name="payment_method"]:checked');
        if (!selectedRadio) return;

        const method = selectedRadio.value;

        // Actualizar tarjetas de selección
        document.querySelectorAll('.payment-selector-card').forEach(card => card.classList.remove('selected'));
        selectedRadio.closest('.payment-selector-card').classList.add('selected');

        // Resetear estilos de botón de acción
        submitButton.classList.remove('yape-btn-style', 'plin-btn-style');

        if (method === 'yape') {
            yapeBox.style.display = 'block';
            plinBox.style.display = 'none';
            cardBox.style.display = 'none';
            submitButton.classList.add('yape-btn-style');
            submitText.textContent = '¡Ya Yapeé! Confirmar Donación';
        } else if (method === 'plin') {
            yapeBox.style.display = 'none';
            plinBox.style.display = 'block';
            cardBox.style.display = 'none';
            submitButton.classList.add('plin-btn-style');
            submitText.textContent = '¡Ya Plineé! Confirmar Donación';
        } else if (method === 'card') {
            yapeBox.style.display = 'none';
            plinBox.style.display = 'none';
            cardBox.style.display = 'block';
            submitText.textContent = 'Pagar con Tarjeta de Crédito / Débito';
        }

        updateQrCodes();
    }

    document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
        radio.addEventListener('change', handleMethodChange);
    });
    handleMethodChange();

    // Copiar número al portapapeles
    document.querySelectorAll('.btn-copy-phone').forEach(btn => {
        btn.addEventListener('click', function() {
            const phone = this.dataset.phone;
            navigator.clipboard.writeText(phone).then(() => {
                const originalHtml = this.innerHTML;
                this.innerHTML = '<i class="fa-solid fa-check me-1 text-success"></i> ¡Copiado!';
                setTimeout(() => {
                    this.innerHTML = originalHtml;
                }, 2000);
            }).catch(err => {
                alert('Número: ' + phone);
            });
        });
    });

    // Sincronizar número de operación entre inputs
    const opYape = document.getElementById('op_code_yape');
    const opPlin = document.getElementById('op_code_plin');
    if (opYape && opPlin) {
        opYape.addEventListener('input', () => { opPlin.value = opYape.value; });
        opPlin.addEventListener('input', () => { opYape.value = opPlin.value; });
    }

    // Configuración Culqi si hay llaves válidas
    const culqiPublicKey = '{{ config('culqi.public_key') }}';
    const hasRealCulqi = culqiPublicKey.startsWith('pk_test_') || culqiPublicKey.startsWith('pk_live_');
    if (hasRealCulqi && typeof Culqi !== 'undefined') {
        Culqi.publicKey = culqiPublicKey;
    }

    // Submit del formulario
    form.addEventListener('submit', function(e) {
        const amount = parseFloat(amountInput.value);
        if (isNaN(amount) || amount < 1) {
            e.preventDefault();
            alert('El monto mínimo de donación es S/ 1.00');
            amountInput.focus();
            return;
        }

        const selectedMethod = document.querySelector('input[name="payment_method"]:checked').value;

        // Si es tarjeta y tiene Culqi conectado
        if (selectedMethod === 'card' && hasRealCulqi && !culqiTokenInput.value && typeof Culqi !== 'undefined') {
            e.preventDefault();
            submitButton.disabled = true;
            submitText.textContent = 'Abriendo Pasarela Culqi...';

            Culqi.settings({
                title: 'Club Atlético Torino',
                currency: 'PEN',
                amount: Math.round(amount * 100),
            });
            Culqi.options({
                lang: 'auto',
                installments: false,
                paymentMethods: {
                    tarjeta: true,
                    yape: true,
                }
            });
            Culqi.open();

            setTimeout(() => {
                submitButton.disabled = false;
                submitText.textContent = 'Pagar con Tarjeta de Crédito / Débito';
            }, 6000);

            return false;
        }

        // Si es Yape, Plin o modo demo
        submitButton.disabled = true;
        submitText.textContent = 'Registrando tu donación...';
        return true;
    });

    // Callback Culqi
    window.culqi = function() {
        if (Culqi.token) {
            culqiTokenInput.value = Culqi.token.id;
            Culqi.close();
            submitButton.disabled = true;
            submitText.textContent = 'Confirmando con Culqi...';
            form.submit();
        } else {
            alert(Culqi.error.user_message || 'No se pudo procesar la tarjeta.');
            submitButton.disabled = false;
            submitText.textContent = 'Pagar con Tarjeta';
        }
    };
});
</script>
@endsection