@extends('layout.master')

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

@section('styles')
<link rel="stylesheet" href="{{ asset('css/portada.css') }}" />

<link rel="stylesheet" href="{{ asset('assets/css/pasarela.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/css/pasarela1.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
<style>
    /* SweetAlert debe estar siempre encima */
    .swal2-container {
        z-index: 99999 !important;
    }

    /* Culqi modal con un z-index menor */
    .culqi-modal {
        z-index: 5000 !important;
    }

    .payment-summary {
    display: flex;
    flex-direction:  row-reverse;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
}
@media (max-width: 396px) {
    .payment-summary {
        flex-direction: column; /* Cambia a columna para pantallas pequeñas */
        align-items: flex-start; /* Alinea al inicio si es necesario */
        gap: 0.5rem; /* Reduce el espacio entre los botones */
    }
}

.payment-button {
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: 100%; /* Botones ocupan el mismo ancho */
    max-width: 300px;
    box-shadow: 0 3px 8px rgb(236, 12, 12);
}

.payment-button.red-button {
    background-color:rgb(236, 12, 12);
    color: white;
}

.payment-button.blue-button {
    background-color: #007bff;
    color: white;
}

.payment-button:hover {
    transform: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
</style>
@endsection

@section('content')
<main class="page-main">

    <div class="bodyfull">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://checkout.culqi.com/js/v4"></script>

        <div class="wfacp-panel-wrapper wfacp_left_right ">
            <div class="wfacp-middle-container">
                <div class="wfacp-form-panel clearfix">
                    <div class="wfacp-comm-wrapper wfacp-clearfix">
                        <div class="wfacp-left-wrapper">
                            <div class="wfacp-form">
                                <div id=wfacp-sec-wrapper>
                                    <div class=wfacp-inside>
                                        <div class="wfacp_main_form woocommerce wfacp_single_multi_form wfacp_two_step">
                                            <form class="checkout woocommerce-checkout" enctype="multipart/form-data"
                                                id="wfacp_checkout_form">
                                                <div class="wfacp-left-panel wfacp_page pre_built single_step"
                                                    data-step="single_step">
                                                    <div class="wfacp-section wfacp-hg-by-box step_0 form_section_single_step_0_layout_9 "
                                                        data-field-count="5">
                                                        <div class="wfacp_internal_form_wrap wfacp-comm-title none">
                                                            <h2
                                                                class="wfacp_section_heading wfacp_section_title wfacp-text-left">
                                                                Producto</h2>
                                                        </div>
                                                        <div class="payment-summary">
                                                            <!-- Botón Tipo de Pago -->
                                                            <button class="payment-button">
                                                                PAGO: {{ $tipoPago == 'mensual' ? 'MENSUAL' : 'PAQUETE' }}
                                                            </button>
                                                            
                                                            <!-- Botón Plan Seleccionado -->
                                                            <button class="payment-button ">
                                                                PLAN: {{ $tipoPlan == 'basico' ? 'BÁSICO' : ($tipoPlan == 'plata' ? 'PLATINUM' : 'DIAMOND') }}
                                                            </button>
                                                        </div>

                                                        <div class="wfacp-comm-form-detail clearfix">
                                                            <div class="wfacp-row">
                                                                <div class="wfacp_anim wfacp_pro_switch wfacp_for_desktop_tablet desk_only shop_table wfacp-product-switch-panel wfacp-col-full wfacp_not_force_all wfacp_setting_not_image_hide wfacp_setting_not_qty_hide wfacp_disable_delete_item wfacp_type_radio"
                                                                    cellspacing="0" id="product_switching_field"
                                                                    data-time="1718758134">

                                                                    <div class="wfacp-product-switch-title">

                                                                        <div class="product-remove">CURSO
                                                                        </div>
                                                                        <div class="wfacp_qty_price_wrap">
                                                                            <div class="product-name">PRECIO</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="wfacp_product_switcher_container">

                                                                        <fieldset
                                                                            class="woocommerce-cart-form__cart-item cart_item wfacp_product_row wfacp_with_qty wfacp-selected-product"
                                                                            data-item-key="wfacp_64430ca73d508"
                                                                            cart_key="75f196041abe44a2f1e056c957b665dd"
                                                                            data-id="43">
                                                                            <div
                                                                                class="wfacp_row_wrap ps_radio wfacp_ps_disable_hideImg1 ">
                                                                                <div class="wfacp_ps_title_wrap">
                                                                                    <div
                                                                                        class="wfacp_product_switcher_col wfacp_product_switcher_col_1 ">

                                                                                        <div class="product-image">
                                                                                            <div
                                                                                                class="wfacp-pro-thumb">
                                                                                                <img width="100"
                                                                                                    height="100"
                                                                                                    src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $publicacion->imagen }}"
                                                                                                    class="attachment-100x100 size-100x100"
                                                                                                    sizes="(max-width: 100px) 100vw, 100px" />
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div
                                                                                        class="wfacp_product_switcher_col wfacp_product_switcher_col_2">
                                                                                        <div
                                                                                            class='wfacp_product_switcher_description'>
                                                                                            <div
                                                                                                class="product-name product_name">
                                                                                                <div
                                                                                                    class="wfacp_product_sec">
                                                                                                    <div
                                                                                                        class="wfacp_product_name_inner">
                                                                                                        <span
                                                                                                            class="wfacp_product_choosen_label_wrap ">
                                                                                                            <span
                                                                                                                class="wfacp_product_choosen_label"
                                                                                                                for="wfacp_product_wfacp_64430ca73d508">
                                                                                                                <span
                                                                                                                    class='wfacp_product_switcher_item'>
                                                                                                                    @if($tipoPago == 'mensual') {{$modulo->titulo_web?$modulo->titulo_web.' -':''}}@endif {{$publicacion->titulo}}
                                                                                                                </span>
                                                                                                            </span>
                                                                                                        </span>
                                                                                                    </div>

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


                                                                                <div class="wfacp_product_sec_start ">
                                                                                    <div
                                                                                        class="wfacp_product_switcher_col wfacp_product_switcher_col_3  ">

                                                                                        <div
                                                                                            class="wfacp_product_price_container product-price">
                                                                                            <!-- Precio en HTML -->
                                                                                            <div class="wfacp_product_price_sec" id="price-display">

                                                                                            </div>


                                                                                        </div>
                                                                                        <script>
                                                                                            // Definir los precios en USD desde las variables de PHP
                                                                                            const precioUSDPromo = ;

                                                                                            // Función para obtener la información de la IP y el país
                                                                                            fetch('https://ipinfo.io', {
                                                                                                    headers: {
                                                                                                        'Accept': 'application/json'
                                                                                                    }
                                                                                                })
                                                                                                .then(response => response.json())
                                                                                                .then(data => updatePrices1(data.country))
                                                                                                .catch(() => updatePrices1("PE")); // Si hay error, por defecto asume Perú

                                                                                            // Función para actualizar el precio según el país
                                                                                            function updatePrices1(country) {
                                                                                                const priceDisplay = document.getElementById('price-display');

                                                                                                // Definir la tasa de conversión USD a PEN (Soles)
                                                                                                const tasaConversion = 1; // Tasa aproximada, puedes ajustarla

                                                                                                // Si el país es Perú (PE), mostrar el precio en soles, sino en dólares
                                                                                                if (country === 'PE') {

                                                                                                    const precioPENPromo = (precioUSDPromo).toFixed(2);
                                                                                                    priceDisplay.innerHTML = `
                                                                                                        
                                                                                                        <ins aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol"><b>S/</span>${precioPENPromo}</b>
                                                                                                            </span>
                                                                                                        </ins>
                                                                                                    `;
                                                                                                } else {

                                                                                                    const precioPENPromo = (precioUSDPromo * tasaConversion).toFixed(2);
                                                                                                    // Si no es Perú, se muestran los precios en USD
                                                                                                    priceDisplay.innerHTML = `
                                                                                                        
                                                                                                        <ins aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol"><b>USD&#36;</span>${precioUSDPromo}</b>
                                                                                                            </span>
                                                                                                        </ins>
                                                                                                    `;
                                                                                                }
                                                                                            }
                                                                                        </script>

                                                                                    </div>

                                                                                </div>

                                                                            </div>

                                                                        </fieldset>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="wfacp-section wfacp-hg-by-box step_1 form_section_single_step_1_layout_9"
                                                        id="registro-formpago" data-field-count="4">
                                                        <div class="wfacp_internal_form_wrap wfacp-comm-title none">
                                                            <h2
                                                                class="wfacp_section_heading wfacp_section_title wfacp-text-left">
                                                                Información de Pago </h2>
                                                        </div>
                                                        <style>
                                                            .form-group {
                                                                position: relative;
                                                                margin-bottom: 1.5em;
                                                            }

                                                            .form-group label {
                                                                position: absolute;
                                                                top: 50%;
                                                                left: 1em;
                                                                transform: translateY(-50%);
                                                                font-size: 1em;
                                                                color: #666;
                                                                transition: all 0.3s ease;
                                                                pointer-events: none;
                                                            }

                                                            .form-group input {
                                                                width: 100%;
                                                                padding: 1em;
                                                                font-size: 1em;
                                                                border: 1px solid #ccc;
                                                                border-radius: 4px;
                                                                outline: none;
                                                                box-sizing: border-box;
                                                            }

                                                            .form-group input:focus {
                                                                border-color: #666;
                                                            }

                                                            .form-group input:focus+label,
                                                            .form-group input:not(:placeholder-shown)+label {
                                                                top: 0.8em;
                                                                left: 0.8em;
                                                                font-size: 0.8em;
                                                                color: #666;
                                                            }

                                                            #telefono {
                                                                width: 100%;
                                                                /* O el ancho específico que tienen los otros campos */
                                                            }

                                                            .iti__flag-container+input {
                                                                padding-left: 100px !important;
                                                                /* Ajusta este valor según sea necesario */
                                                            }

                                                            .iti {
                                                                width: 100%;
                                                                height: 80%;
                                                                /* o una altura específica que coincida con los otros campos */
                                                            }
                                                        </style>
                                                        @if (session()->has('suscrito')&&session('suscrito')['user'])
                                                        <div class="form-group">
                                                            <label for="email">Correo electrónico *</label>
                                                            <input type="email" id="email"
                                                                name="email"
                                                                value="{{ session('suscrito')['user']->email}}"
                                                                placeholder="Correo electrónico" required>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="nombre">Nombre *</label>
                                                                    <input type="text" id="nombre"
                                                                        name="nombre"
                                                                        value="{{ session('suscrito')['user']->nombre }}"
                                                                        placeholder="Nombre" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_paterno">Apellido Paterno *</label>
                                                                    <input type="text" id="apellido_paterno"
                                                                        name="apellido_paterno"
                                                                        value="{{ session('suscrito')['user']->ap_pa }}"
                                                                        placeholder="Apellido Paterno"
                                                                        required>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_materno">Apellido Materno *</label>
                                                                    <input type="text" id="apellido_materno"
                                                                        name="apellido_materno"
                                                                        value="{{ session('suscrito')['user']->ap_ma }}"
                                                                        placeholder="Apellido Materno"
                                                                        required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">Teléfono *</label>
                                                                    <input type="tel" id="telefono"
                                                                        name="telefono"
                                                                        value="{{ session('suscrito')['user']->telefono ?? '' }}"
                                                                        required>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        @else
                                                        <div class="form-group">
                                                            <label for="email">Correo electrónico *</label>
                                                            <input type="email" id="email" name="email"
                                                                placeholder="Correo electrónico" required>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="nombre">Nombre *</label>
                                                                    <input type="text" id="nombre"
                                                                        name="nombre" placeholder="Nombre"
                                                                        required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_paterno">Apellido Paterno *</label>
                                                                    <input type="text" id="apellido_paterno"
                                                                        name="apellido_paterno"
                                                                        placeholder="Apellido Paterno"
                                                                        required>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_materno">Apellido Materno *</label>
                                                                    <input type="text" id="apellido_materno"
                                                                        name="apellido_materno"
                                                                        placeholder="Apellido Materno"
                                                                        required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">Teléfono *</label>
                                                                    <input type="tel" id="telefono"
                                                                        name="telefono" required>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                        <script>
                                                            function initializePhoneInput() {
                                                                const phoneInputField = document.querySelector("#telefono");
                                                                let pais = null;
                                                                if (!pais) {
                                                                    fetch('https://ipinfo.io', {
                                                                            headers: {
                                                                                'Accept': 'application/json'
                                                                            }
                                                                        })
                                                                        .then(response => response.json())
                                                                        .then(data => {
                                                                            pais = data.country || 'PE';
                                                                            pais = pais.toUpperCase();
                                                                            initializeIntlTelInput(phoneInputField, pais);
                                                                        })
                                                                        .catch(() => {
                                                                            initializeIntlTelInput(phoneInputField, 'PE');
                                                                        });
                                                                } else {
                                                                    initializeIntlTelInput(phoneInputField, pais.toUpperCase());
                                                                }
                                                            }

                                                            function initializeIntlTelInput(phoneInputField, initialCountry) {
                                                                phoneInput = window.intlTelInput(phoneInputField, {
                                                                    initialCountry: initialCountry,
                                                                    separateDialCode: true,
                                                                    autoPlaceholder: "off",
                                                                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
                                                                });
                                                            }
                                                            initializePhoneInput();
                                                        </script>
                                                    </div>
                                                    <div class="wfacp-two-step-erap wfacp-next-btn-wrap right initial">
                                                        <button id="button-confirmed" type="button"
                                                            class="button button-primary wfacp_next_page_button"
                                                            onclick="validateForm()" data-next-step="two_step"
                                                            data-current-step='single_step' value="Next Step"
                                                            data-text="step-2">
                                                            Continuar → </button>
                                                    </div>
                                                    <script>
                                                        //'tipoPlan','tipoPago','modulo'
                                                        let tipopago='{{$tipoPago}}';
                                                        let plan='{{$tipoPlan}}';
                                                        let cursomodulo='{{$modulo->id_curso??0}}'
                                                        let pedidoId = null;
                                                        let tieneEsp = null;
                                                        let publicacionId ='{{$publicacion->id_curso}}';
                                                        let redireccionUrl = null;
                                                        Culqi.publicKey = '{{$llave}}';
                                                        let montoNormal = '{{$publicacion->precio}}';
                                                        let montoPromocion = '{{ $precioapagar}}';
                                                        let currency = 'USD';
                                                        let clientData = {}; // Variable global para almacenar los datos del cliente
                                                        let orderNumber = null;

                                                        // Función para procesar el token generado por Culqi

                                                        function culqi() {
                                                            console.log(Culqi);
                                                            if (Culqi.token) {
                                                                let interval = null;
                                                                const tokenid = Culqi.token.id;
                                                                const formData = new FormData();
                                                                formData.append('token', JSON.stringify(Culqi.token));
                                                                formData.append('tokenid', tokenid);
                                                                formData.append('monto', montoPromocion);
                                                                formData.append('currency', currency);
                                                                formData.append('clientData', JSON.stringify(clientData));
                                                                formData.append('publicacionId', '{{ $publicacion->id_curso}}');
                                                                formData.append('tipopago', tipopago);
                                                                formData.append('plan', plan);
                                                                formData.append('cursomodulo', cursomodulo);

                                                                Culqi.close();
                                                                Swal.fire({
                                                                    title: 'Procesando pago...',
                                                                    html: 'Por favor espera mientras procesamos tu pago.',
                                                                    allowOutsideClick: false,
                                                                    showConfirmButton: false, // No mostrar botón de confirmación
                                                                    didOpen: () => {
                                                                        Swal.showLoading();
                                                                        document.querySelector('.swal2-container').style.zIndex = '9999'; // Mostrar loading
                                                                    }
                                                                });
                                                                fetch('/pasarela/pago/planes', {
                                                                        method: 'POST',
                                                                        headers: {
                                                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                                        },
                                                                        body: formData
                                                                    })
                                                                    .then(response => response.json())
                                                                    .then(data => {
                                                                        Swal.close();
                                                                        if (data.estado === 'exito') {
                                                                            //  Culqi.close(); 
                                                                            if (data.esnuevo) {
                                                                                mostrarModalActualizacion(data);
                                                                            } else {
                                                                                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 = data.url;
                                                                                });
                                                                            }
                                                                        } else {
                                                                            // Si el pago falla, mostrar un error
                                                                            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(); // Cerrar el loading spinner
                                                                        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', montoPromocion);
                                                                formData.append('currency', currency);
                                                                formData.append('clientData', JSON.stringify(clientData));
                                                                formData.append('publicacionId', '{{ $publicacion->id_curso }}');
                                                                formData.append('orderNumber', orderNumber);
                                                                interval = setInterval(() => {
                                                                        console.log('Esperando  la Confirmacion de Pago');
                                                                        fetch(`/pasarela/webhook`, {
                                                                                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 = data.url;
                                                                                    });
                                                                                }
                                                                            })
                                                                            .catch(error => {
                                                                                console.error('Error al verificar el estado del pago:', error);
                                                                            });
                                                                    },
                                                                    5000);
                                                            } else {
                                                                console.log(Culqi.error);
                                                                //alert(Culqi.error.user_message);
                                                            }
                                                        }

                                                        function validateForm() {
                                                            const countryData = phoneInput.getSelectedCountryData();
                                                            const phoneNumber = phoneInput.getNumber().replace('+' + countryData.dialCode, '');
                                                            const phonePrefix = countryData.dialCode; // Prefijo
                                                            const email = document.getElementById('email').value;
                                                            const nombre = document.getElementById('nombre').value;
                                                            const apellido_paterno = document.getElementById('apellido_paterno').value;
                                                            const apellido_materno = document.getElementById('apellido_materno').value;
                                                            const telefono = phoneInput.getNumber().replace('+' + countryData.dialCode, '');
                                                            const isValidPhone = phoneInput.isValidNumber();
                                                            const pais = phoneInput.getSelectedCountryData().iso2;
                                                            const paisNombre = phoneInput.getSelectedCountryData().name;

                                                            const errores = [];

                                                            if (!email) {
                                                                errores.push('Correo electrónico es requerido.');
                                                            } else if (!/\S+@\S+\.\S+/.test(email)) {
                                                                errores.push('Correo electrónico no es válido.');
                                                            }

                                                            if (!nombre) {
                                                                errores.push('Nombre es requerido.');
                                                            }

                                                            if (!apellido_paterno) {
                                                                errores.push('Apellido Paterno es requerido.');
                                                            }

                                                            if (!apellido_materno) {
                                                                errores.push('Apellido Materno es requerido.');
                                                            }

                                                            if (!telefono) {
                                                                errores.push('Teléfono es requerido.');
                                                            } else if (!isValidPhone) {
                                                                errores.push('Teléfono no es válido.');
                                                            }

                                                            if (errores.length > 0) {
                                                                Swal.fire({
                                                                    title: 'Error en el formulario',
                                                                    html: errores.join('<br>'),
                                                                    icon: 'error'
                                                                });
                                                            } else {
                                                                // Almacenar los datos del cliente en la variable global
                                                                clientData = {
                                                                    email,
                                                                    nombre,
                                                                    apellido_paterno,
                                                                    apellido_materno,
                                                                    telefono,
                                                                    pais,
                                                                    paisNombre,
                                                                    phonePrefix
                                                                };

                                                                // createOrderCulqi(clientData);
                                                                verificarcomprar(clientData);
                                                            }
                                                        }

                                                        function verificarcomprar(clientData) {

                                                            $.ajax({
                                                                url: '/verificarcomprar/plan',
                                                                type: 'POST',
                                                                dataType: 'json',
                                                                contentType: 'application/json',
                                                                headers: {
                                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                                },
                                                                data: JSON.stringify({
                                                                    email: clientData.email, // Envía el email tal como está
                                                                    publicacion_id: '{{ $publicacion->id_curso }}',
                                                                    tipopago,
                                                                    plan,
                                                                    cursomodulo
                                                                }),
                                                                success: function(data) {
                                                                    console.log(data);
                                                                    if (data.success == 1) {
                                                                        //generar  orden
                                                                        createOrderCulqi(clientData);
                                                                    } else {
                                                                        // Mostrar mensaje con SweetAlert
                                                                        Swal.fire({
                                                                            title: data.message,
                                                                            text: 'Te redirigiremos  a  modificar tu compra',
                                                                            icon: 'info',
                                                                            timer: 5000, // 5 segundos
                                                                            showConfirmButton: false
                                                                        }).then(() => {
                                                                            // Redirigir después del mensaje
                                                                            window.location.href ="/iniciarsesion?redirectTo=/contenido/{{ $publicacion->title_rewrite}}";
                                                                        });

                                                                        // Si deseas redirigir sin esperar a que el SweetAlert cierre, usa setTimeout
                                                                        setTimeout(function() {
                                                                            window.location.href ="/iniciarsesion?redirectTo=/contenido/{{ $publicacion->title_rewrite}}";
                                                                        }, 5000); // 5 segundos
                                                                    }
                                                                },
                                                                error: function(xhr, status, error) {
                                                                    Swal.fire({
                                                                        title: 'Error en el servidor',
                                                                        text: 'Ocurrió un error al contactar con el servidor.',
                                                                        icon: 'error'
                                                                    });
                                                                }
                                                            });

                                                        }

                                                        function createOrderCulqi(clientData) {
                                                            orderNumber = '#id-' + Date.now() + '-' + Math.floor(Math.random() * 100000);

                                                            const expirationDate = Math.floor(Date.now() / 1000) + 300; // Expira en 1 hora
                                                            if (clientData.pais === 'pe') {
                                                                currency = 'PEN';
                                                            } else {
                                                                montoNormal = montoNormal * 1;
                                                                montoPromocion = montoPromocion * 1;
                                                            }
                                                            const orderData = {
                                                                amount: Math.round(montoPromocion * 100), // Monto en céntimos
                                                                currency_code: currency,
                                                                description: "{{ $publicacion->titulo}}",
                                                                order_number: orderNumber,
                                                                expiration_date: expirationDate.toString(), // Convertir a cadena de texto
                                                                client_details: {
                                                                    first_name: clientData.nombre,
                                                                    last_name: clientData.apellido_paterno + " " + clientData.apellido_materno,
                                                                    email: clientData.email,
                                                                    phone_number: clientData.telefono
                                                                },
                                                                confirm: true,
                                                                metadata: {}
                                                            };

                                                            $.ajax({
                                                                url: '{{ route("culqi.orders.create") }}',
                                                                type: 'POST',
                                                                dataType: 'json',
                                                                contentType: 'application/json',
                                                                headers: {
                                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                                                },
                                                                data: JSON.stringify(orderData),
                                                                success: function(data) {
                                                                    if (data.success) {
                                                                        console.log(data);
                                                                        const culqiOrderID = data.culqi_order.id;
                                                                        console.log(culqiOrderID);
                                                                        llamarpasarela(culqiOrderID);
                                                                    } else {
                                                                        Swal.fire({
                                                                            title: 'Error al crear la orden',
                                                                            text: data.error || 'Hubo un problema al generar la orden.',
                                                                            icon: 'error'
                                                                        });
                                                                    }
                                                                },
                                                                error: function(xhr, status, error) {
                                                                    Swal.fire({
                                                                        title: 'Error en el servidor',
                                                                        text: 'Ocurrió un error al contactar con el servidor.',
                                                                        icon: 'error'
                                                                    });
                                                                }
                                                            });
                                                        }

                                                        function llamarpasarela(culqiOrderID) {
                                                            Culqi.settings({
                                                                title: 'GRUPO-AUGE',
                                                                currency: currency,
                                                                description: '{{$publicacion->titulo}}',
                                                                amount: Math.round(montoPromocion * 100),
                                                                order: culqiOrderID
                                                            });
                                                            Culqi.options({
                                                                installments: false,
                                                                paymentMethods: {
                                                                    tarjeta: true,
                                                                    yape: true,
                                                                    // bancaMovil: true,
                                                                    // agente: true,
                                                                    // billetera: true,
                                                                    // cuotealo: true,
                                                                },
                                                                style: {
                                                                    logo: "{{ asset('assets/logoculqi.png') }}",
                                                                    bannerColor: '#da291c',
                                                                    buttonBackground: '#da291c',
                                                                    buttonText: 'Pagar ahora',
                                                                    buttonTextColor: '#ffffff',
                                                                    priceColor: '#da291c',
                                                                }
                                                            });
                                                            Culqi.client = {
                                                                email: document.getElementById('email').value
                                                            };
                                                            // Abrir el formulario de Culqi
                                                            Culqi.open();
                                                        }

                                                        function mostrarModalActualizacion(data) {
                                                            // Asignar valores a las variables globales
                                                            pedidoId = data.pedido_id;
                                                            tieneEsp = data.tieneesp;
                                                            publicacionId = data.publicacion_id;
                                                            redireccionUrl = data.url;

                                                            // Limpiar campos del formulario
                                                            document.getElementById('tipo_documento').value = '';
                                                            document.getElementById('numero_documento').value = '';
                                                            document.getElementById('especialidad').value = '';
                                                            document.getElementById('nombrado').value = '';

                                                            // Mostrar el modal usando UIkit
                                                            UIkit.modal('#updateModal').show();
                                                        }

                                                        function guardarDatos(e) {
                                                            event.preventDefault();
                                                            // Obtener valores del formulario
                                                            const tipo_documento = document.getElementById('tipo_documento').value;
                                                            const numero_documento = document.getElementById('numero_documento').value;
                                                            const especialidad = document.getElementById('especialidad').value;
                                                            const nombrado = document.getElementById('nombrado').value;

                                                            // Validar datos antes de enviar
                                                            const errores = [];
                                                            if (!tipo_documento) {
                                                                errores.push('El tipo de documento es obligatorio.');
                                                            }
                                                            if (!numero_documento) {
                                                                errores.push('El número de documento es obligatorio.');
                                                            } else if (tipo_documento === '1' && numero_documento.length !== 8) {
                                                                errores.push('El DNI debe tener exactamente 8 dígitos.');
                                                            } else if (tipo_documento !== '1' && numero_documento.length <= 8) {
                                                                errores.push('El número de documento debe ser mayor a 8 caracteres para este tipo de documento.');
                                                            }
                                                            if (!especialidad) {
                                                                errores.push('La especialidad es obligatoria.');
                                                            }
                                                            if (!nombrado) {
                                                                errores.push('Debe indicar si es nombrado o no.');
                                                            }

                                                            if (errores.length > 0) {
                                                                Swal.fire({
                                                                    icon: 'error',
                                                                    title: 'Errores en el formulario',
                                                                    html: errores.join('<br>'),
                                                                });
                                                                return;
                                                            }

                                                            // Enviar los datos al backend
                                                            Swal.fire({
                                                                title: 'Guardando datos...',
                                                                text: 'Por favor, espera mientras se actualizan tus datos.',
                                                                allowOutsideClick: false,
                                                                didOpen: () => {
                                                                    Swal.showLoading();
                                                                },
                                                            });

                                                            const formData = {
                                                                tipo_documento,
                                                                numero_documento,
                                                                especialidad,
                                                                nombrado,
                                                                pedido_id: pedidoId,
                                                                tieneEsp,
                                                                tipopago,
                                                                plan,
                                                                cursomodulo,
                                                                publicacion_id: publicacionId,
                                                                _token: '{{ csrf_token() }}',
                                                            };

                                                            fetch('/update-profile/pago/plan', {
                                                                    method: 'POST',
                                                                    headers: {
                                                                        'Content-Type': 'application/json',
                                                                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                                                    },
                                                                    body: JSON.stringify(formData),
                                                                })
                                                                .then(response => response.json())
                                                                .then(data => {
                                                                    Swal.close();
                                                                    if (data.estado == 'exito') {
                                                                        Swal.fire({
                                                                            icon: 'success',
                                                                            title: 'Datos actualizados',
                                                                            text: 'Tus datos han sido actualizados correctamente.',
                                                                        }).then(() => {
                                                                            // Redirigir al contenido del curso
                                                                            window.location.href = redireccionUrl;
                                                                        });
                                                                    } else {
                                                                        throw new Error(data.message || 'Ocurrió un error.');
                                                                    }
                                                                })
                                                                .catch(error => {
                                                                    Swal.fire({
                                                                        icon: 'error',
                                                                        title: 'Error al guardar',
                                                                        text: error.message || 'Hubo un problema al guardar los datos. Intenta nuevamente.',
                                                                    });
                                                                });
                                                        }
                                                    </script>

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

                                <div class="wfacp_promises_0 solid div_wrap_sec">
                                    <div class="wfacp-permission-icon clearfix">
                                        <!-- PRIVACY ICONS -->
                                        <ul>
                                            <li class="wfacp-cell01 wfacp-three-cols no_border wfacp_odd">
                                                <div class="wfacp-relative-wrapper">
                                                    <img src="{{ asset('assets/img/privacy.png') }}"
                                                        alt="">
                                                    <p class="">Protegemos tu privacidad</p>
                                                </div>
                                            </li>
                                            <li class="wfacp-cell01 wfacp-three-cols no_border wfacp_odd">
                                                <div class="wfacp-relative-wrapper">
                                                    <img src="{{ asset('assets/img/ribbon.png') }}" alt="">
                                                    <p class="">Garantía de reembolso 100%</p>
                                                </div>
                                            </li>
                                            <li class="wfacp-cell01 wfacp-three-cols no_border wfacp_odd">
                                                <div class="wfacp-relative-wrapper">
                                                    <img src="{{ asset('assets/img/secure.png') }}" alt="">
                                                    <p class="">Tu información es segura</p>

                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="wfacp-right-panel wfacp_mini_cart_start_h">
                            <div class="wfacp_form_cart wfacp_min_cart_widget none div_wrap_sec"
                                data-time="1718758134">
                                <div class="wfacp_order_sec wfacp_order_summary_layout_9">
                                    <div class="wfacp_sidebar_coupon_show">
                                        <div class="wfacp_template_9_cart_item_details wfacp_min_cart_widget" data-delete-enabled="">
                                            <table class="wfacp_mini_cart_items wfacp_collapsible_summary shop_table woocommerce-checkout-review-order-table_layout_9 wfacp_order_sum layout_9" data-time="1718758134">

                                                <tbody>
                                                    <tr class="cart_item wfacp_product_row" cart_key="75f196041abe44a2f1e056c957b665dd">
                                                        <td class="product-name-area">

                                                            <div class="product-image">
                                                                <div class="wfacp-pro-thumb">
                                                                    <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $publicacion->imagen }}" alt="" width="100" height="100" />
                                                                </div>
                                                            </div>
                                                            <div class="wfacp_order_summary_item_name wfacp_summary_img_true">
                                                                <div class='wfacp_cart_title_sec'>
                                                                    <span class='wfacp_mini_cart_item_title'>
                                                                    {{$modulo->titulo_web?$modulo->titulo_web.' -':''}} {{$publicacion->titulo}}
                                                                        <strong class="product-quantity">&times;1</strong>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="product-total">
                                                            <span id='product_total' class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" id='modena-modal'>USD&#36;</span><span id="precio-producto">99</span></bdi></span><span class="wfacp_cart_product_name_h"></span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id='wfob_wrap' class='wfob_bump_wrapper wfacp_below_mini_cart_items'>
                                        </div>
                                        <table class="wfacp_mini_cart_reviews shop_table woocommerce-checkout-review-order-table_layout_9 wfacp_template_9_cart_total_details layout_9_order_summary ">
                                            <tfoot>
                                                <tr class="cart-subtotal">
                                                    <th><span>Subtotal</span></th>
                                                    <td><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" id="subtotal-currency">USD &#36;</span><span id="subtotal">99</span></bdi></span>
                                                    </td>
                                                </tr>
                                                <tr class="order-total">
                                                    <th><span>Total</span></th>
                                                    <td><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol" id="total-currency">USD &#36;</span><span id="total">99</span></bdi></span></strong>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>

                                    <script>
                                        fetch('https://ipinfo.io', {
                                                headers: {
                                                    'Accept': 'application/json'
                                                }
                                            })
                                            .then(response => response.json())
                                            .then(data => updatePrices(data.country))
                                            .catch(() => updatePrices("PE")); // Si hay error, por defecto asume Perú

                                        // Función para actualizar el precio según el país
                                        function updatePrices(country) {
                                            const tasaConversion = 1; // Tasa de conversión USD a PEN (aproximada)
                                            let precioNormal, precioPromo, currencySymbol;

                                            if (country === 'PE') {
                                                // Precios en Soles (PEN)
                                                precioPromo = (precioUSDPromo).toFixed(2);
                                                currencySymbol = 'S/'; // Moneda Sol
                                            } else {
                                                // Precios en USD
                                                precioPromo = (precioUSDPromo * tasaConversion).toFixed(2);
                                                currencySymbol = 'USD &#36;'; // Moneda USD
                                            }

                                            // Actualizar los precios en la página
                                            document.getElementById('precio-producto').innerText = precioPromo;
                                            document.getElementById('subtotal').innerText = precioPromo;
                                            document.getElementById('total').innerText = precioPromo;

                                            // Actualizar los símbolos de moneda
                                            document.getElementById('modena-modal').innerHTML = currencySymbol;
                                            document.getElementById('subtotal-currency').innerHTML = currencySymbol;
                                            document.getElementById('total-currency').innerHTML = currencySymbol;
                                        }
                                    </script>

                                </div>
                            </div>
                            <!--   Benefit Section-->
                            <div class="wfacp_benefits_0 none div_wrap_sec">
                                <div class="wfacp-list-panel">
                                    <h2 class="wfacp-list-title wfacp_section_title wfacp-text-left ">
                                        Compra Con Confianza </h2>
                                    <ul class="wfacp-sidebar-list clearfix">
                                        <li>
                                            <div class="wfacp-sidebar-list-txt">
                                                <span class='loop_head_sec wfacp-normal'>
                                                    <i class="fas fa-star"></i> Garantía de reembolso 100%
                                                </span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="wfacp-sidebar-list-txt">
                                                <span class='loop_head_sec wfacp-normal'>
                                                    <i class="fas fa-star"></i>Transacciones seguras</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="wfacp-sidebar-list-txt">
                                                <span class='loop_head_sec wfacp-normal'>
                                                    <i class="fas fa-star"></i>Soporte 24/7</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!--   Benefit Section Closed-->
                        </div>
                    </div>
                </div>
                <!-- wfacp-form panel close-->
            </div>
        </div>

    </div>
    <!-- Modal para Actualizar Datos -->
    <div id="updateModal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
            <h2 class="uk-modal-title">Pago Aceptado-Actualiza tus datos </h2>
            <form id="updateForm">
                @csrf
                <!-- Tipo de Documento -->
                <div class="uk-margin">
                    <label for="tipo_documento" class="uk-form-label">Tipo de Documento</label>
                    <select class="uk-select" id="tipo_documento" name="tipo_documento" required>
                        <option value="">Selecciona</option>
                        <option value="1">DNI</option>
                        <option value="2">Cédula</option>
                    </select>
                </div>
                <!-- Número de Documento -->
                <div class="uk-margin">
                    <label for="numero_documento" class="uk-form-label">Número de Documento</label>
                    <input class="uk-input" type="text" id="numero_documento" name="numero_documento" required>
                </div>
                <!-- Especialidad -->
                <div class="uk-margin">
                    <label for="especialidad" class="uk-form-label">Especialidad</label>
                    <select class="uk-select" id="especialidad" name="especialidad" required>
                        @foreach($especialidades as $especialidad)
                        <option value="{{ $especialidad->id_especialidad }}">{{ $especialidad->titulo }}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Es Nombrado -->
                <div class="uk-margin">
                    <label for="nombrado" class="uk-form-label">¿Eres Nombrado?</label>
                    <select class="uk-select" id="nombrado" name="nombrado" required>
                        <option value="">Selecciona</option>
                        <option value="1">Sí</option>
                        <option value="2">No</option>
                    </select>
                </div>
                <!-- Botón Guardar -->
                <div class="uk-margin">
                    <button onclick="guardarDatos(event)" class="uk-button uk-button-primary uk-width-1-1">Guardar</button>
                </div>
            </form>
        </div>
    </div>


</main>
@endsection