@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;
        }


        .currency {
            font-size: 1.5em !important;
            color: #333 !important;
            height: auto !important;
        }

        .price {
            justify-content: center !important
        }
    </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="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">PRODUCTOS
                                                                            </div>
                                                                            <div class="wfacp_qty_price_wrap">
                                                                                <div class="product-name">PRECIOS</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'>
                                                                                                                        {{ $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 precioUSDNormal = ;
                                                                                                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 precioPENNormal = (precioUSDNormal).toFixed(2);
                                                                                                        const precioPENPromo = (precioUSDPromo).toFixed(2);
                                                                                                        priceDisplay.innerHTML = `
                                                                                                        <del aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol">S/</span>${precioPENNormal}
                                                                                                            </span>
                                                                                                        </del>
                                                                                                        <ins aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol"><b>S/</span>${precioPENPromo}</b>
                                                                                                            </span>
                                                                                                        </ins>
                                                                                                    `;
                                                                                                    } else {
                                                                                                        const precioPENNormal = (precioUSDNormal * tasaConversion).toFixed(2);
                                                                                                        const precioPENPromo = (precioUSDPromo * tasaConversion).toFixed(2);
                                                                                                        // Si no es Perú, se muestran los precios en USD
                                                                                                        priceDisplay.innerHTML = `
                                                                                                        <del aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol">USD&#36;</span>${precioUSDNormal}
                                                                                                            </span>
                                                                                                        </del>
                                                                                                        <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>
                                                            let pedidoId = null;
                                                            let tieneEsp = null;
                                                            let publicacionId = null;
                                                            let redireccionUrl = null;
                                                            Culqi.publicKey = '{{ $llave }}';
                                                            let montoNormal = '{{ $publicacion->precio }}';
                                                            let montoPromocion = '{{ $publicacion->costo_promo }}';
                                                            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 }}');
                                                                    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', {
                                                                            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',
                                                                    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 }}'
                                                                    }),
                                                                    success: function(data) {
                                                                        console.log(data);
                                                                        if (data.success == 1) {
                                                                            //generar  orden
                                                                            createOrderCulqi(clientData);
                                                                        } else {
                                                                            // Mostrar mensaje con SweetAlert
                                                                            Swal.fire({
                                                                                title: 'Ya tienes el curso asociado',
                                                                                text: 'Te redirigiremos al inicio de sesión en 5 segundos.',
                                                                                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,
                                                                    publicacion_id: publicacionId,
                                                                    _token: '{{ csrf_token() }}',
                                                                };

                                                                fetch('/update-profile/pago', {
                                                                        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'>
                                                                            {{ $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