@extends('layout.plantilladetalle')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/pasareladetalle.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
    <div class="uk-container">
        <section class="uk-section uk-section-default seccion-detalle">

            <div class="uk-card uk-card-default carta-principal" uk-grid>

                <!-- IZQUIERDA: 2/3 -->
                <div class="uk-width-1-2@m parte1">
                    <h2>Pagar</h2>


                    @if (!$user)
                        <div class="bloque-login" id="bloque-login">

                            <p class="lead"><strong>1. Inicia sesión o crea una cuenta</strong></p>
                            <p class="lead"> Necesitas una cuenta de Auge para acceder a los cursos que has adquirido.
                                Asegúrate de que tu dirección de correo electrónico sea correcta,
                                ya que la utilizaremos para enviarte la confirmación de tu pedido.
                                Al registrarte, aceptas nuestras <a href="#">Condiciones de
                                    uso</a> y nuestra <a href="#">Política de privacidad</a>.
                            </p>

                            <div class="uk-width-expand@s">
                                <input class="uk-input" type="email" id="correo" placeholder="Correo electrónico">
                            </div>

                            <p class="lead" id="contrasena"><i>No se necesita contraseña</i></p>

                            <button class="btn-comprar" id="btn-correo" disabled>Continuar →</button>

                            <div id="formulario-datos" class="uk-hidden">
                                <p class="lead">Porfavor completa los siguientes datos:</p>
                                <form id="form-suscrito">
                                    @csrf
                                    <input type="hidden" id="email_oculto" name="email">

                                    <div class="uk-margin">
                                        <input class="uk-input" type="text" id="nombre" placeholder="Nombre" required>
                                    </div>

                                    <div class="uk-margin">
                                        <input class="uk-input" type="text" id="apellido_paterno"
                                            placeholder="Apellido Paterno" required>
                                    </div>

                                    <div class="uk-margin">
                                        <input class="uk-input" type="text" id="apellido_materno"
                                            placeholder="Apellido Materno" required>
                                    </div>

                                    <div class="uk-margin">
                                        {{-- <input class="uk-input" type="tel" id="telefono" name="telefono"
                                            placeholder="Número de celular" required> --}}
                                        <input class="uk-input" type="tel" id="telefono_visible" name="telefono_visible"
                                            placeholder="Número de celular" required>
                                        <input type="hidden" id="telefono" name="telefono">
                                    </div>

                                    <div class="uk-margin">
                                        <select class="uk-select" name="especialidad" id="especialidad" required>
                                            <option value="">Seleccione una especialidad</option>
                                            @foreach ($especialidades as $especialidad)
                                                <option value="{{ $especialidad->id_especialidad }}">
                                                    {{ $especialidad->titulo }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button class="btn-comprar" type="submit">Continuar →</button>
                                </form>
                            </div>

                        </div>
                    @endif


                    <div class="detallecuenta {{ !$user ? 'uk-hidden' : '' }}" id="detallecuenta">
                        <p class="lead">
                            <strong>1. Detalle de la cuenta</strong>
                            @if ($user)
                                ({{ $user['email'] }})
                            @endif
                        </p>
                    </div>


                    <div class="modalidad uk-hidden" id="modalidad">
                        <p class="lead"><strong>2. Seleccione la modalidad a pagar</strong></p>
                        <div class="uk-child-width-1-2@s uk-grid-small" uk-grid>
                            <div>
                                <label class="opcion-pago">
                                    <input class="uk-radio" type="radio" name="plan_pago" value="mensual"
                                        {{ $tipoPago === 'mensual' ? 'checked' : '' }}>
                                    <p class="lead">Mensual</p>
                                    <p class="precio">S/ {{ number_format($publicacion->promo_mensual, 2) }}</p>
                                    <small>/mes, facturación mensual</small>
                                </label>
                            </div>
                            <div>
                                <label class="opcion-pago">
                                    <input class="uk-radio" type="radio" name="plan_pago" value="paquete"
                                        {{ $tipoPago === 'paquete' ? 'checked' : '' }}>
                                    <p class="lead">Paquete Completo</p>
                                    <p class="precio">S/. {{ $publicacion->pm }}</p>
                                    <small>S/ {{ $publicacion->costo_promo }} por los {{ $modulos->count() }}
                                        meses</small>
                                    @if ($publicacion->descPaquete > 0)
                                        <p class="ahorro">Te ahorras S/ {{ $publicacion->descPaquete }} </p>
                                    @endif
                                </label>
                            </div>
                        </div>
                    </div>



                    <div class="seleccion uk-hidden" id="seleccion">
                        <p class="lead"><strong>3. Selecciona el módulo que deseas comprar</strong></p>
                        <div class="uk-margin">
                            <select class="uk-select" name="modulo" id="modulo">
                                {{-- @foreach ($modulos as $modulo)
                                    <option value="{{ $modulo->id_curso }}">{{ $modulo->titulo }}</option>
                                @endforeach --}}
                                @foreach ($modulos as $modulo)
                                    <option value="{{ $modulo->id_curso }}"
                                        {{ isset($curso_bloqueado) && $curso_bloqueado == $modulo->id_curso ? 'selected' : '' }}>
                                        {{ $modulo->titulo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="ultimo-btn uk-hidden" id="ultimo-btn" style="margin-top: 20px;">
                        <button class="btn-comprar" disabled>Continuar →</button>
                    </div>

                </div>

                <!-- DERECHA: 1/3 -->
                <div class="uk-width-1-2@m">
                    <div uk-sticky="offset:100; bottom: true; media: @m" class="para-fondo-relativo">
                        <div class="resumen-pedido">
                            <h2>Resumen del pedido</h2>
                            <div class="resumen-producto">
                                @if ($publicacion->imagen)
                                    <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $publicacion->imagen }}"
                                        alt="Curso" class="producto-imagen">
                                @else
                                    <img src="{{ asset('assets/img/ultimocurso.png') }}" alt="Curso"
                                        class="producto-imagen">
                                @endif

                                <div class="producto-info">
                                    <p class="producto-titulo">{{ $publicacion->titulo }}</p>
                                </div>
                            </div>

                            <div class="resumen-precios">
                                <hr>
                                <p class="resumen-linea">
                                    <span>SubTotal:</span>
                                    <span class="resumen-monto" id="precio-subtotal">S/.
                                        {{ number_format($publicacion->promo_mensual, 2) }}</span>
                                </p>
                                <hr>
                                <p class="resumen-linea resumen-total">
                                    <span>Total (1 curso):</span>
                                    <span class="resumen-monto total" id="precio-total">S/.
                                        {{ number_format($publicacion->promo_mensual, 2) }}</span>
                                </p>
                            </div>

                            <div class="confianza-box">
                                <h4 class="confianza-titulo">Compra Con Confianza</h4>
                                <ul class="confianza-lista">
                                    <li><i class="fas fa-star confianza-icono"></i> Transacciones seguras</li>
                                    <li><i class="fas fa-star confianza-icono"></i> Soporte 24/7</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>



            </div>


        </section>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
    <script>
        let phoneInput = null;

        function initIntlTelInput() {
            const input = document.querySelector("#telefono_visible");

            if (!input) return;

            fetch('https://ipinfo.io', {
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    const countryCode = data?.country || 'PE';
                    phoneInput = window.intlTelInput(input, {
                        initialCountry: countryCode,
                        separateDialCode: true,
                        autoPlaceholder: "off",
                        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
                    });
                })
                .catch(() => {
                    phoneInput = window.intlTelInput(input, {
                        initialCountry: 'PE',
                        separateDialCode: true,
                        autoPlaceholder: "off",
                        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
                    });

                });
        }

        document.addEventListener("DOMContentLoaded", initIntlTelInput);
    </script>

    <script>
        let esnuevo = false;
        let paisDesdeBD = 'Perú';

        document.addEventListener('DOMContentLoaded', () => {

            const user = {{ $user ? 'true' : 'false' }};
            const modalidad = document.getElementById('modalidad');
            const seleccion = document.getElementById('seleccion');
            const ultimoBtn = document.getElementById('ultimo-btn');
            const btnContinuar = ultimoBtn?.querySelector('button');

            const resumenPrecio = document.getElementById('precio-total');
            const resumenPreciosub = document.getElementById('precio-subtotal');
            const radios = document.querySelectorAll('input[name="plan_pago"]');
            const detalleCuenta = document.getElementById('detallecuenta');
            const bloqueLogin = document.getElementById('bloque-login');

            const precioMensual = {{ $publicacion->promo_mensual }};
            const precioPaquete = {{ $publicacion->costo_promo }};

            const inputCorreo = document.getElementById('correo');
            const botonCorreo = document.getElementById('btn-correo');
            const formularioDatos = document.getElementById('formulario-datos');
            const contrasena = document.getElementById('contrasena');






            // Validar el formato del correo
            function validarCorreo(email) {
                const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return regex.test(email);
            }

            // Activar/desactivar el botón según validez del correo
            if (inputCorreo) {
                inputCorreo.addEventListener('input', () => {
                    if (validarCorreo(inputCorreo.value.trim())) {
                        botonCorreo?.removeAttribute('disabled');
                    } else {
                        botonCorreo?.setAttribute('disabled', 'disabled');
                    }
                });
            }

            // Manejar el clic en el botón de correo
            if (botonCorreo) {
                botonCorreo.addEventListener('click', () => {
                    const correo = inputCorreo.value.trim();

                    if (!validarCorreo(correo)) return;

                    $.ajax({
                        url: '/verificar-correo',
                        type: 'POST',
                        data: {
                            email: correo,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.status === 'existe') {
                                paisDesdeBD = data.user.pais || 'Perú';
                                // Simular login visual
                                bloqueLogin?.classList.add('uk-hidden');
                                detalleCuenta?.classList.remove('uk-hidden');
                                modalidad?.classList.remove('uk-hidden');
                                seleccion?.classList.remove('uk-hidden');
                                ultimoBtn?.classList.remove('uk-hidden');
                                btnContinuar?.removeAttribute('disabled');

                                // Mostrar correo dentro del bloque de cuenta
                                detalleCuenta.innerHTML =
                                    `<p class="lead"><strong>1. Detalle de la cuenta</strong> (${correo})</p>`;


                                document.getElementById('nombre').value = data.user.nombre;
                                document.getElementById('apellido_paterno').value = data.user
                                    .ap_pa;
                                document.getElementById('apellido_materno').value = data.user
                                    .ap_ma;
                                //document.getElementById('telefono').value = data.user.telefono;
                                document.getElementById('email_oculto').value = data.user.email;

                                document.getElementById('telefono_visible').value = data.user
                                    .telefono;
                                if (phoneInput) {
                                    phoneInput.setNumber(data.user.telefono);
                                }

                            } else {
                                // Usuario nuevo → mostrar formulario de datos
                                document.getElementById('email_oculto').value = correo;
                                UIkit.util.removeClass(formularioDatos, 'uk-hidden');
                                inputCorreo.setAttribute('readonly', 'readonly');
                                inputCorreo.classList.add('uk-disabled');
                                botonCorreo.classList.add('uk-hidden');
                                contrasena.classList.add('uk-hidden');
                                esnuevo = true;
                            }
                        },
                        error: function() {
                            alert('Error al verificar el correo. Intenta nuevamente.');
                        }
                    });
                });
            }

            $('#form-suscrito').on('submit', function(e) {
                e.preventDefault();

                const nombre = document.getElementById('nombre').value.trim();
                const ap_pa = document.getElementById('apellido_paterno').value.trim();
                const ap_ma = document.getElementById('apellido_materno').value.trim();
                const especialidad = document.getElementById('especialidad').value;
                const email = document.getElementById('email_oculto').value;

                const countryData = phoneInput.getSelectedCountryData();
                //const telefono = document.getElementById('telefono').value.trim();
                const telefono = phoneInput?.getNumber()?.replace('+' + phoneInput?.getSelectedCountryData()
                    ?.dialCode, '') || '';
                document.getElementById('telefono').value = telefono;

                const telefonoCompleto = '+' + countryData.dialCode + telefono;

                const data = {
                    nombre: nombre,
                    apellido_paterno: ap_pa,
                    apellido_materno: ap_ma,
                    especialidad: especialidad,
                    telefono: telefonoCompleto,
                    celularprefijo: countryData.dialCode,
                    pais_nombre: countryData.name,
                    email: email,
                    _token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                };

                $.ajax({
                    url: '/registrar-suscrito',
                    type: 'POST',
                    data: data,
                    beforeSend: function() {
                        Swal.fire({
                            title: 'Registrando...',
                            text: 'Espere un momento',
                            allowOutsideClick: false,
                            showConfirmButton: false,
                            didOpen: () => Swal.showLoading()
                        });
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Registro exitoso',
                            text: 'Redirigiendo...',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            // Simular login visual
                            bloqueLogin?.classList.add('uk-hidden');
                            detalleCuenta?.classList.remove('uk-hidden');
                            modalidad?.classList.remove('uk-hidden');
                            seleccion?.classList.remove('uk-hidden');
                            ultimoBtn?.classList.remove('uk-hidden');
                            btnContinuar?.removeAttribute('disabled');

                            // Mostrar correo registrado
                            detalleCuenta.innerHTML =
                                `<p class="lead"><strong>1. Detalle de la cuenta</strong> (${response.user.email})</p>`;
                        });
                    },
                    error: function(xhr) {
                        const msg = xhr.responseJSON?.message ||
                            'Ocurrió un error al registrar.';
                        Swal.fire('Error', msg, 'error');
                    }
                });
            });






            // Función para mostrar/ocultar #seleccion y cambiar el precio
            function actualizarResumenYSeleccion(plan) {
                if (plan === 'mensual') {
                    UIkit.util.removeClass(seleccion, 'uk-hidden');
                    resumenPrecio.textContent = `S/. ${precioMensual.toFixed(2)}`;
                    resumenPreciosub.textContent = `S/. ${precioMensual.toFixed(2)}`;
                    monto_pago = precioMensual; // ✅ actualizar monto aquí
                    tipopago = 'mensual';
                } else {
                    UIkit.util.addClass(seleccion, 'uk-hidden');
                    resumenPrecio.textContent = `S/. ${precioPaquete.toFixed(2)}`;
                    resumenPreciosub.textContent = `S/. ${precioPaquete.toFixed(2)}`;
                    monto_pago = precioPaquete; // ✅ actualizar monto aquí
                    tipopago = 'paquete';
                }
            }

            // Escuchar cambios de selección de plan
            radios.forEach(radio => {
                radio.addEventListener('change', () => {
                    // Estilo visual activo
                    document.querySelectorAll('.opcion-pago').forEach(label =>
                        label.classList.remove('selected')
                    );
                    if (radio.checked) {
                        radio.closest('label').classList.add('selected');
                        actualizarResumenYSeleccion(radio.value);
                    }
                });
            });

            // Activar seleccionado por defecto si lo hay
            const checked = document.querySelector('input[name="plan_pago"]:checked');
            if (checked) {
                checked.closest('label').classList.add('selected');
                actualizarResumenYSeleccion(checked.value); // ⚠️ SIN verificar user
                UIkit.util.addClass(seleccion, 'uk-hidden');
            }

            // Mostrar secciones principales si usuario está logueado
            if (user) {
                modalidad?.classList.remove('uk-hidden');
                ultimoBtn?.classList.remove('uk-hidden');
                btnContinuar?.removeAttribute('disabled');
                // seleccion?.classList.remove('uk-hidden');

                // ✅ Mostrar solo si es plan mensual
                const checkedPlan = document.querySelector('input[name="plan_pago"]:checked')?.value;
                if (checkedPlan === 'mensual') {
                    seleccion?.classList.remove('uk-hidden');
                } else {
                    seleccion?.classList.add('uk-hidden');
                }

                esnuevo = false;

            }


            // ✅ 2. Evento al hacer clic en "Continuar"
            btnContinuar?.addEventListener('click', () => {
                // ✅ Refrescar valores según selección actual
                const planSeleccionado = document.querySelector('input[name="plan_pago"]:checked')?.value;
                actualizarResumenYSeleccion(planSeleccionado);

                clientData = getClientData();

                // console.log('📦 Datos del cliente:', clientData);
                // console.log('💵 Monto:', monto_pago, '📌 Tipo:', tipopago);

                if (!clientData.email || !clientData.nombre || !clientData.telefono) {
                    Swal.fire('Faltan datos', 'Completa todos los campos antes de continuar', 'warning');
                    return;
                }

                verificarcomprar(clientData);
            });
        });
    </script>

    <script src="https://checkout.culqi.com/js/v4"></script>
    <script>
        Culqi.publicKey = '{{ $llave }}';

        let monto_pago = 0;

        let publicacion_id = '{{ $publicacion->id_curso }}';
        let cursomodulo = () => {
            const plan = document.querySelector('input[name="plan_pago"]:checked')?.value;
            return plan === 'mensual' ? document.getElementById('modulo')?.value || 0 : 0;
        };
        let currency = 'PEN';
        let clientData = {};

        // ✅ 1. Obtener datos del cliente (centralizado)
        function getClientData() {
            const nombre = document.getElementById('nombre')?.value?.trim() ||
                '{{ $user['nombre'] ?? '' }}';
            let apellido_paterno = document.getElementById('apellido_paterno')?.value?.trim() ||
                '{{ $user['ap_pa'] ?? '' }}';
            let apellido_materno = document.getElementById('apellido_materno')?.value?.trim() ||
                '{{ $user['ap_ma'] ?? '' }}';

            // 1) Si ambos apellidos vacíos, clonar nombre en ambos
            if (!apellido_paterno && !apellido_materno) {
                apellido_paterno = nombre;
                apellido_materno = nombre;
            }
            // 2) Si sólo falta el paterno
            else if (!apellido_paterno) {
                apellido_paterno = apellido_materno;
            }
            // 3) Si sólo falta el materno
            else if (!apellido_materno) {
                apellido_materno = apellido_paterno;
            }
            const email = document.getElementById('email_oculto')?.value?.trim() ||
                '{{ $user['email'] ?? '' }}';


            // Capturar el teléfono visible con intl-tel-input
            let telefono = '';
            try {
                if (phoneInput && phoneInput.isValidNumber()) {
                    telefono = phoneInput.getNumber(intlTelInputUtils.numberFormat.E164); // Ej: +51999999999
                } else {
                    // Fallback si el usuario está logueado y no se usó phoneInput
                    telefono = '{{ $user['telefono'] ?? '' }}';
                }
            } catch (error) {
                console.warn('No se pudo obtener el teléfono:', error);
                telefono = '{{ $user['telefono'] ?? '' }}'; // ✅ Fallback también aquí
            }

            const telefonoInput = document.getElementById('telefono');
            if (telefonoInput) {
                telefonoInput.value = telefono;
            }

            // Obtener solo el código ISO del país (ej. 'pe')
            let pais = 'pe';
            try {
                if (phoneInput && phoneInput.getSelectedCountryData) {
                    pais = phoneInput.getSelectedCountryData()?.iso2?.toLowerCase() || 'pe';
                }
            } catch (e) {
                pais = 'pe';
            }

            const data = {
                nombre,
                apellido_paterno,
                apellido_materno,
                email,
                telefono,
                pais,
                esnuevo
            };

            return data;
        }

        function verificarcomprar(clientData) {
            $.ajax({
                url: '/verificarcomprarpaquete',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    email: clientData.email,
                    publicacion_id: '{{ $publicacion->id_curso }}',
                    tipopago,
                    cursomodulo: cursomodulo()
                }),
                success: function(data) {
                    if (data.success == 1) {
                        // ✅ Usuario aún no compró → crear la orden
                        createCulqiOrder();
                    } else {
                        // ⚠️ Ya compró → mostrar mensaje y permitir modificar selección
                        Swal.fire({
                            title: 'Curso Adquirido con este correo',
                            text: data.message ??
                                'Puedes cambiar el módulo o el curso antes de continuar.',
                            icon: 'info',
                            confirmButtonText: 'Entendido'
                        });

                        // 🟡 Opcionalmente puedes resaltar los elementos a modificar
                        document.querySelector('#modulo')?.focus();
                        document.querySelector('#ultimo-btn button')?.removeAttribute('disabled');
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error en el servidor',
                        text: 'Ocurrió un error al contactar con el servidor.',
                        icon: 'error'
                    });
                }
            });
        }


        // ✅ 3. Crear orden Culqi
        function createCulqiOrder() {

            const orderData = {
                amount: Math.round(monto_pago * 100),
                currency_code: currency,
                id_curso: '{{ $publicacion->id_curso }}',
                description: '{{ $publicacion->titulo }}',
                order_number: '#ID-' + Date.now(),
                expiration_date: (Math.floor(Date.now() / 1000) + 300).toString(),
                client_details: {
                    first_name: clientData.nombre,
                    last_name: clientData.apellido_paterno + ' ' + clientData.apellido_materno,
                    email: clientData.email,
                    phone_number: clientData.telefono
                },
                confirm: true,
                metadata: {}
            };

            // Guardar orderNumber globalmente para /verificarpagoconorden
            orderNumber = orderData.order_number;

            fetch('{{ route('culqi.ordersNueva.create') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(orderData)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        abrirModalCulqi(data.culqi_order.id);
                    } else {
                        Swal.fire('Error', data.error || 'No se pudo crear la orden de pago', 'error');
                    }
                });
        }

        // ✅ 4. Abrir el modal de Culqi
        function abrirModalCulqi(orderId) {
            Culqi.settings({
                title: 'GRUPO AUGE',
                currency: currency,
                description: '{{ $publicacion->titulo }}',
                amount: Math.round(monto_pago * 100),
                order: orderId,
            });

            Culqi.options({
                installments: false,
                paymentMethods: {
                    tarjeta: true,
                    yape: true,
                    //billetera: true,
                    bancaMovil: true,
                    // agente: true,
                    // cuotealo: true,
                },
                style: {
                    logo: "{{ asset('assets/logoculqi.png') }}",
                    bannerColor: '#da291c',
                    buttonBackground: '#da291c',
                    buttonText: 'Pagar ahora',
                    buttonTextColor: '#ffffff',
                    priceColor: '#da291c'
                }
            });

            Culqi.client = {
                email: clientData.email
            };

            Culqi.open();
        }

        // ✅ 5. Callback global de Culqi
        function culqi() {
            console.log(Culqi);
            let interval = null;

            if (Culqi.token) {
                const tokenid = Culqi.token.id;
                const formData = new FormData();
                formData.append('token', JSON.stringify(Culqi.token));
                formData.append('tokenid', tokenid);
                formData.append('monto', monto_pago);
                formData.append('currency', currency);
                formData.append('clientData', JSON.stringify(clientData));
                formData.append('publicacionId', '{{ $publicacion->id_curso }}');
                formData.append('tipopago', tipopago);
                // formData.append('cursomodulo', cursomodulo);
                formData.append('cursomodulo', String(cursomodulo()));

                Culqi.close();
                Swal.fire({
                    title: 'Procesando pago...',
                    html: 'Por favor espera mientras procesamos tu pago.',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                        document.querySelector('.swal2-container').style.zIndex = '9999';
                    }
                });

                fetch('/pasarela/verificarpago', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        Swal.close();
                        if (data.estado === 'exito') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Pago realizado con éxito',
                                text: 'Gracias por tu compra. Tu pago se ha procesado correctamente.',
                                confirmButtonText: 'Aceptar'
                            }).then(() => {
                                window.location.href =
                                    "{{ route('nombramientoautomatico.venta') }}" +
                                    "?url_final=" + encodeURIComponent(data.url);
                            });


                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error al procesar el pago',
                                text: data.mensaje || 'Hubo un error al procesar el pago.',
                                confirmButtonText: 'Aceptar'
                            });
                        }
                    })
                    .catch(error => {
                        Swal.close();
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error al procesar el pago',
                            text: 'Ocurrió un error al intentar procesar tu pago. Por favor, inténtalo de nuevo.',
                            confirmButtonText: 'Aceptar'
                        });
                    });

            } else if (Culqi.order) {
                const formData = new FormData();
                formData.append('order', JSON.stringify(Culqi.order));
                formData.append('monto', monto_pago);
                formData.append('currency', currency);
                formData.append('clientData', JSON.stringify(clientData));
                formData.append('publicacionId', '{{ $publicacion->id_curso }}');
                formData.append('orderNumber', orderNumber);

                Swal.fire({
                    title: 'Esperando confirmación',
                    text: 'Revisa tu app (Yape, billetera, etc.) y confirma el pago.',
                    icon: 'info',
                    confirmButtonText: 'Aceptar'
                });

                interval = setInterval(() => {
                    console.log('⏳ Verificando pago...');
                    fetch('/pasarela/verificarpagoconorden', {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'paid') {
                                Culqi.close();
                                clearInterval(interval);
                                Swal.fire({
                                    title: 'Pago completado',
                                    text: 'Tu pago ha sido confirmado. Gracias por tu compra.',
                                    icon: 'success'
                                }).then(() => {
                                    window.location.href =
                                        "{{ route('nombramientoautomatico.venta') }}" +
                                        "?url_final=" + encodeURIComponent(data.url);
                                });

                            }
                        })
                        .catch(error => {
                            console.error('Error al verificar el estado del pago:', error);
                        });
                }, 5000);

            } else {
                console.error(Culqi.error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error al procesar el pago',
                    text: Culqi.error?.user_message || 'Error desconocido en la pasarela.',
                    confirmButtonText: 'Aceptar'
                });
            }
        }

        window.culqi = culqi;
    </script>




@endsection