@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;
    }
</style>
@endsection

@section('content')
<main class="page-main">
    <!-- <div class="fl-subnav">
            <ul class=" uk-subnav uk-subnav-pill">
                <li><a href="{{ url('/categoria') }}">Todo</a></li>
                <li><a href="{{ url('/categoria') }}">Premiunm</a></li>
                <li><a href="{{ url('/categoria') }}">Gratuito</a></li>
                <li><a href="{{ url('/categoria') }}">Gratuito con registro</a></li>
                <li><a href="{{ url('/categoria') }}">Recientes</a></li>
                <li><a href="{{ url('/categoria') }}">Programados</a></li>

            </ul>
        </div> -->

    <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">
                                                                                            <del aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol">S/</span>{{$publicacion->precio}}
                                                                                                            </span>
                                                                                                        </del>
                                                                                                        <ins aria-hidden="true">
                                                                                                            <span class="woocommerce-Price-amount amount">
                                                                                                                <span class="woocommerce-Price-currencySymbol"><b>S/</span>{{$publicacion->costo_promo}}</b>
                                                                                                            </span>
                                                                                                        </ins>
                                                                                            </div>


                                                                                        </div>
                                                                                        
                                                                                    </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>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_materno">departamento*</label>
                                                                    <select id="select_dpto" name="dep" name="departamento"
                                                                        placeholder="Departamento" required>
                                                                        <option value="">Seleccione un departamento</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">provincia *</label>

                                                                    <select id="select_prov" placeholder="Provincia"
                                                                        name="provincia" required>
                                                                        <option value="">Seleccione una provincia</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">distrito *</label>
                                                                    <select id="select_dist" placeholder="Distrito"
                                                                        name="distrito" required>
                                                                        <option value="">Seleccione un distrito</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">direccion *</label>
                                                                    <input type="text" id="direccion"
                                                                        placeholder="Dirección"
                                                                        name="direccion" 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>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="apellido_materno">departamento*</label>
                                                                    <select id="select_dpto" name="dep" name="departamento"
                                                                        placeholder="Departamento" required>
                                                                        <option value="">Seleccione un departamento</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">provincia *</label>

                                                                    <select id="select_prov" placeholder="Provincia"
                                                                        name="provincia" required>
                                                                        <option value="">Seleccione una provincia</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">distrito *</label>
                                                                    <select id="select_dist" placeholder="Distrito"
                                                                        name="distrito" required>
                                                                        <option value="">Seleccione un distrito</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="telefono">direccion *</label>
                                                                    <input type="text" id="direccion"
                                                                        placeholder="Dirección"
                                                                        name="direccion" 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>
                                                        $(document).ready(function() {

                                                            $.ajax({
                                                                url: "{{ route('dptos.get') }}",
                                                                type: "GET",
                                                                success: function(response) {
                                                                    let dptoSelect = $("#select_dpto");
                                                                    dptoSelect.empty();
                                                                    dptoSelect.append('<option value="">Seleccione un departamento</option>');
                                                                    response.forEach(function(dpto) {
                                                                        dptoSelect.append(`<option value="${dpto.iddpto}">${dpto.titulo}</option>`);
                                                                    });
                                                                },
                                                                error: function() {
                                                                    Swal.fire("Error", "No se pudieron cargar los departamentos", "error");
                                                                }
                                                            });

                                                            // Cargar provincias al seleccionar un departamento
                                                            $("#select_dpto").on("change", function() {
                                                                let dptoId = $(this).val();
                                                                if (!dptoId) return;

                                                                $.ajax({
                                                                    url: "{{ route('provincias.get') }}",
                                                                    type: "GET",
                                                                    data: {
                                                                        iddpto: dptoId
                                                                    },
                                                                    success: function(response) {
                                                                        let provSelect = $("#select_prov");
                                                                        provSelect.empty();
                                                                        provSelect.append('<option value="">Seleccione una provincia</option>');
                                                                        response.forEach(function(prov) {
                                                                            provSelect.append(`<option value="${prov.idprvc}">${prov.titulo}</option>`);
                                                                        });
                                                                    },
                                                                    error: function() {
                                                                        Swal.fire("Error", "No se pudieron cargar las provincias", "error");
                                                                    }
                                                                });
                                                            });

                                                            // Cargar distritos al seleccionar una provincia
                                                            $("#select_prov").on("change", function() {
                                                                let provId = $(this).val();
                                                                if (!provId) return;

                                                                $.ajax({
                                                                    url: "{{ route('distritos.get') }}",
                                                                    type: "GET",
                                                                    data: {
                                                                        idprvc: provId
                                                                    },
                                                                    success: function(response) {
                                                                        let distSelect = $("#select_dist");
                                                                        distSelect.empty();
                                                                        distSelect.append('<option value="">Seleccione un distrito</option>');
                                                                        response.forEach(function(dist) {
                                                                            distSelect.append(`<option value="${dist.iddist}">${dist.titulo}</option>`);
                                                                        });
                                                                    },
                                                                    error: function() {
                                                                        Swal.fire("Error", "No se pudieron cargar los distritos", "error");
                                                                    }
                                                                });
                                                            });
                                                        });

                                                        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 = 'PEN';
                                                        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/libro', {
                                                                        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 y Una Asesora te contactará. Tú N° de Orden: ${data.solicitud}`,
                                                                                        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 dep = document.getElementById('select_dpto').value;
                                                            const prov = document.getElementById('select_prov').value;
                                                            const dist = document.getElementById('select_dist').value;
                                                            const dir = document.getElementById('direccion').value;

                                                            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 (!dep) {
                                                                errores.push('Departamento es requerido.');
                                                            }
                                                            if (!prov) {
                                                                errores.push('Provincia es requerido.');
                                                            }
                                                            if (!dist) {
                                                                errores.push('Distrito es requerido.');
                                                            }

                                                            if (!dir) {
                                                                errores.push('Direccion es requerido.');
                                                            }


                                                            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,
                                                                    dep,
                                                                    prov,
                                                                    dist,
                                                                    dir
                                                                };

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

                                                        function verificarcomprar(clientData) {
                                                            createOrderCulqi(clientData);
                                                        }

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

                                                            const expirationDate = Math.floor(Date.now() / 1000) + 300; // Expira en 1 hora
                                                            
                                                            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'>S/. </span><span id="precio-producto">{{$publicacion->costo_promo }}</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">S/. </span><span id="subtotal">{{$publicacion->costo_promo }}</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">S/. </span><span id="total">{{$publicacion->costo_promo }}</span></bdi></span></strong>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </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>
</main>
@endsection