@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/pasarela2.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"  id="lista-carro">
                                                                        
                                                                          
                                                                        </fieldset>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div style="text-align: -webkit-center; margin-top: 12px;">
                                                                <a id="add-more-btn" href="javascript:void(0);" style="font-size: 14px; text-decoration: underline; cursor: pointer; color:rgb(199, 42, 14);">
                                                                    + Añadir más
                                                                </a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <!-- Modal para seleccionar exámenes -->
                                                    <div id="add-more-modal" uk-modal>
                                                        <div class="uk-modal-dialog uk-modal-body">
                                                            <h2 class="uk-modal-title" style="text-align: center; color: #da291c;">¡Aprovecha nuestras promociones exclusivas!</h2>
                                                            <div style="text-align: center; margin: 20px 0; font-size: 16px; color: #555;">
                                                                <strong style="color:rgb(7, 7, 7);">5 Exámenes por <span style="color: #28a745;">S/125</span></strong> |
                                                                <strong style="color: rgb(7, 7, 7);">4 Exámenes por <span style="color: #28a745;">S/120</span></strong> |
                                                                <strong style="color: rgb(7, 7, 7);">3 Exámenes por <span style="color: #28a745;">S/105</span></strong> |
                                                                <strong style="color: rgb(7, 7, 7);">2 Exámenes por <span style="color: #28a745;">S/90</span></strong>
                                                            </div>
                                                            <ul id="associated-exams-list" class="uk-list">
                                                                @foreach ($examenesAsociados as $examen)
                                                                    <li style="margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background: #f9f9f9;">
                                                                        <label style="display: flex; align-items: center; gap: 15px;">
                                                                            <input type="checkbox" 
                                                                                class="associated-exam-checkbox" 
                                                                                data-id="{{ $examen->id_examen }}" 
                                                                                data-titulo="{{ $examen->titulo }}" 
                                                                                data-precio="{{ $examen->precio }}" 
                                                                                data-costo-promo="{{ $examen->costo_promo }}"
                                                                                data-imagen="{{ $examen->imagen }}">
                                                                            <div>
                                                                                <strong style="font-size: 16px;">{{ $examen->titulo }}</strong>
                                                                                <div>
                                                                                    <span style="color: #999; text-decoration: line-through; margin-right: 10px;">
                                                                                        Precio: S/{{ number_format($examen->precio, 2) }}
                                                                                    </span>
                                                                                    <span style="color: #28a745; font-weight: bold;">
                                                                                        Promoción: S/{{ number_format($examen->costo_promo, 2) }}
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </label>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                            <div style="text-align: right; margin-top: 20px;">
                                                                <button class="uk-button uk-button-default" type="button" onclick="UIkit.modal('#add-more-modal').hide();">
                                                                    Cerrar
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <script>
                                                        let ararray_items = []; 
                                                        let  subtotal= 0;// Array para almacenar los exámenes seleccionados
                                                        document.addEventListener('DOMContentLoaded', () => {
                                                            // Examen principal cargado inicialmente

                                                            const publicacion = {
                                                                id: '{{ $publicacion->id_examen }}',
                                                                titulo: "{{ $publicacion->titulo }}",
                                                                imagen: "{{ env('URL_ARCHIVOS') . '/images/examenes/' . $publicacion->imagen }}",
                                                                precio: '{{ $publicacion->precio }}',
                                                                costo_promo: '{{ $publicacion->costo_promo }}',
                                                                principal:1,
                                                                costo_promo_desc: '{{ $publicacion->costo_promo }}',
                                                            };
                                                         subtotal='{{ $publicacion->costo_promo }}';// Array para almacenar los exámenes seleccionados

                                                            ararray_items.push(publicacion);
                                                            agregarProductoAlListado(publicacion);
                                                            const addMoreBtn = document.getElementById('add-more-btn');
                                                            const modal = UIkit.modal('#add-more-modal');
                                                            addMoreBtn.addEventListener('click', () => {
                                                                modal.show();
                                                            });

                                                            // Manejar los checkboxes dentro del modal
                                                            document.querySelectorAll('.associated-exam-checkbox').forEach(checkbox => {
                                                                checkbox.addEventListener('change', function () {
                                                                    const idimg = this.getAttribute('data-imagen'); // Obtenemos el nombre de la imagen
                                                                                const examen = {
                                                                                    id: this.getAttribute('data-id'),
                                                                                    titulo: this.getAttribute('data-titulo'),
                                                                                    precio: this.getAttribute('data-precio'),
                                                                                    costo_promo: this.getAttribute('data-costo-promo'),
                                                                                    imagen: `{{ env('URL_ARCHIVOS') }}/images/examenes/${idimg}`,
                                                                                    principal:0,
                                                                                    costo_promo_desc:this.getAttribute('data-costo-promo'),
                                                                                };

                                                                    //actulizar el  precio  promo 
                                                                    //calcalr  el  let total_pagar
                                                                    if (this.checked) {
                                                                        ararray_items.push(examen);
                                                                        agregarProductoAlListado(examen);
                                                                        actualizarPreciosYListado();

                                                                    } else {
                                                                        eliminarProducto(examen.id);
                                                                        actualizarPreciosYListado();

                                                                    }
                                                                });
                                                            });

                                                            // Manejar la eliminación de productos desde el listado
                                                            document.addEventListener('click', (event) => {
                                                                if (event.target.closest('.eliminar-producto')) {
                                                                    const productoId = event.target.closest('.eliminar-producto').getAttribute('data-id');
                                                                    eliminarProducto(productoId);
                                                                    actualizarPreciosYListado();

                                                                }
                                                            });
                                                        });

                                                        // Función para agregar un producto al listado
                                                        function agregarProductoAlListado(producto) {
                                                            const listaCarro = document.getElementById('lista-carro');
                                                            const listadoImagenTitulo = document.getElementById('listado-2');
                                                            const listadoPrecios = document.getElementById('listado-precios');

                                                            // Verificar si el producto ya está en el listado
                                                            if (document.getElementById(`producto-${producto.id}`)) return;

                                                            const productoHTML = `
                                                               <div class="wfacp_row_wrap ps_radio wfacp_ps_disable_hideImg1" id="producto-${producto.id}">
                                                                    <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="${producto.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">
                                                                                    <span class="wfacp_product_switcher_item">
                                                                                        ${producto.titulo}
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="wfacp_product_switcher_col wfacp_product_switcher_col_3">
                                                                            <div class="wfacp_product_price_sec">
                                                                                <del aria-hidden="true">
                                                                                    <span class="woocommerce-Price-amount amount">
                                                                                        <span class="woocommerce-Price-currencySymbol">S/</span>${producto.precio}
                                                                                    </span>
                                                                                </del>
                                                                                <ins aria-hidden="true">
                                                                                    <span class="woocommerce-Price-amount amount">
                                                                                        <span id='precio-desc1-${producto.id}' class="woocommerce-Price-currencySymbol"><b>S/${producto.costo_promo}</b></span>
                                                                                    </span>
                                                                                </ins>
                                                                            </div>
                                                                        </div>
                                                                        ${producto.principal === 0 ? `
                                                                            <div class="wfacp_product_switcher_col wfacp_product_switcher_col_4">
                                                                                <button type="button" class="uk-button eliminar-producto" data-id="${producto.id}">
                                                                                    <i class="fas fa-trash" style="color: red; font-size: 20px;"></i>
                                                                                </button>
                                                                            </div>` : ''
                                                                        }
                                                                    </div>
                                                                </div>
                                                            `;
                                                            listaCarro.insertAdjacentHTML('beforeend', productoHTML);

                                                              // Actualizar las imágenes y títulos en la tabla (listado-2)
                                                                const imagenTituloHTML = `
                                                                    <div id="img-title-${producto.id}" class="product-image-titulo">
                                                                        <div class="product-image">
                                                                            <div class="wfacp-pro-thumb">
                                                                                <img src="${producto.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">
                                                                                    ${producto.titulo}
                                                                                    <strong class="product-quantity">&times;1</strong>
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                `;
                                                                listadoImagenTitulo.insertAdjacentHTML('beforeend', imagenTituloHTML);

                                                                // Actualizar los precios en la tabla (precios)
                                                                const precioHTML = `
                                                                    <div id="price-${producto.id}" class="product-price">
                                                                        <span class="woocommerce-Price-amount amount">
                                                                            <bdi>
                                                                                <span class="woocommerce-Price-currencySymbol">S/.</span>
                                                                                <span id="precio-productodes-${producto.id}">${producto.costo_promo}</span>
                                                                            </bdi>
                                                                        </span>
                                                                    </div>
                                                                `;
                                                                listadoPrecios.insertAdjacentHTML('beforeend', precioHTML);
                                                        }

                                                        function eliminarProducto(id) {
                                                            ararray_items = ararray_items.filter(item => item.id !== id);
                                                            const productoElemento = document.getElementById(`producto-${id}`);
                                                            if (productoElemento) {
                                                                productoElemento.remove();
                                                            }
                                                            const checkbox = document.querySelector(`.associated-exam-checkbox[data-id="${id}"]`);
                                                            if (checkbox) {
                                                                checkbox.checked = false;
                                                            }
                                                            // Eliminar del listado de imágenes y títulos
                                                            const productoImagenTitulo = document.getElementById(`img-title-${id}`);
                                                            if (productoImagenTitulo) {
                                                                productoImagenTitulo.remove();
                                                            }

                                                            // Eliminar del listado de precios
                                                            const productoPrecio = document.getElementById(`price-${id}`);
                                                            if (productoPrecio) {
                                                                productoPrecio.remove();
                                                            }

                                                        }
                                                        function actualizarPreciosYListado() {
                                                            const descuentos = calcularDescuentos(ararray_items.length); // Obtener descuentos dinámicos
                                                            console.log("Descuentos aplicados:", descuentos); // Ver los descuentos calculados
                                                             subtotal = 0; // Subtotal acumulado

                                                            // Actualizar cada examen con su descuento dinámico
                                                            ararray_items.forEach((item, index) => {
                                                                item.costo_promo_desc = item.costo_promo - (descuentos[index] || 0); // Aplicar descuento dinámico
                                                                subtotal += item.costo_promo_desc; // Acumular el subtotal
                                                                const precioElemento = document.getElementById(`precio-desc1-${item.id}`); // Selecciona el elemento por ID
                                                                if (precioElemento) {
                                                                    precioElemento.innerHTML = `<b>S/${item.costo_promo_desc.toFixed(2)}</b>`; // Actualiza el precio dinámico
                                                                }
                                                                
                                                                const precioElemento1 = document.getElementById(`precio-productodes-${item.id}`);
                                                                if (precioElemento1) {
                                                                    precioElemento1.textContent = item.costo_promo_desc.toFixed(2);
                                                                }
                                                            });

                                                            // Actualizar subtotal y total en la interfaz
                                                            const subtotalElement = document.getElementById('subtotal');
                                                            const totalElement = document.getElementById('total');
                                                            subtotalElement.textContent = subtotal.toFixed(2); // Subtotal
                                                            totalElement.textContent = subtotal.toFixed(2); // Total
                                                        }

                                                        function calcularDescuentos(cantidad) {
                                                                const descuentos = [];
                                                                const ciclo = 5; // Cada ciclo es de 5 exámenes
                                                                const maxDescuento = 25; // Máximo descuento por examen

                                                                let descuentoCiclo = 0; // Descuento del ciclo actual

                                                                for (let i = 0; i < cantidad; i++) {
                                                                    const posicionEnCiclo = (i % ciclo) + 1; // Posición dentro del ciclo (1 a 5)

                                                                    // Descuento progresivo dentro del ciclo
                                                                    if (posicionEnCiclo === 1) {
                                                                        descuentoCiclo = 0; // Primer examen del ciclo no tiene descuento
                                                                    } else if (posicionEnCiclo === 2) {
                                                                        descuentoCiclo = 5;
                                                                    } else if (posicionEnCiclo === 3) {
                                                                        descuentoCiclo = 15;
                                                                    } else if (posicionEnCiclo === 4) {
                                                                        descuentoCiclo = 20;
                                                                    } else if (posicionEnCiclo === 5) {
                                                                        descuentoCiclo = maxDescuento; // Último examen del ciclo tiene el máximo descuento
                                                                    }

                                                                    // Aplicar el descuento del ciclo actual a todos los exámenes del ciclo
                                                                    descuentos.push(descuentoCiclo);

                                                                    // Si llegamos al final del ciclo, reiniciar
                                                                    if (posicionEnCiclo === ciclo) {
                                                                        for (let j = i; j > i - ciclo && j >= 0; j--) {
                                                                            descuentos[j] = descuentoCiclo; // Ajustar todos en el ciclo actual al máximo descuento
                                                                        }
                                                                    }
                                                                }

                                                                // Ajustar el descuento de los exámenes que no completan el ciclo actual
                                                                const ultimoCicloInicio = Math.floor((cantidad - 1) / ciclo) * ciclo;
                                                                for (let k = ultimoCicloInicio; k < cantidad; k++) {
                                                                    descuentos[k] = descuentoCiclo;
                                                                }

                                                                return descuentos;
                                                            }

                                                    </script>
                                                    
                                                    <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 = subtotal;
                                                        let montoPromocion = subtotal;
                                                        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('carrito', JSON.stringify(ararray_items));
                                                                    formData.append('publicacionId', '{{ $publicacion->id_examen}}');
                                                                    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/examen', {
                                                                                    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_examen }}');
                                                                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/examen',
                                                                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_examen }}',
                                                                            carrito :JSON.stringify(ararray_items)

                                                                        }),
                                                                success: function (data) {
                                                                    console.log(data);
                                                                    if (data.success==1) {
                                                                        //generar  orden
                                                                        montoPromocion = subtotal;
                                                                        createOrderCulqi(clientData);
                                                                    }else {
                                                                                                                                    // Algunos exámenes ya están asignados
                                                                            const exAsignados = data.examenes.map(ex => {
                                                                                // Encuentra el título de los exámenes asignados
                                                                                const examen = carrito.find(item => item.id == ex.id_examen);
                                                                                return examen ? examen.titulo : '';
                                                                            }).join(', ');

                                                                            Swal.fire({
                                                                                title: 'Exámenes ya asignados',
                                                                                text: `Ya tienes asignados los siguientes exámenes: ${exAsignados}`,
                                                                                icon: 'info',
                                                                                timer: 5000, // 5 segundos
                                                                                showConfirmButton: false
                                                                            }).then(() => {
                                                                                // Eliminar los productos asignados del carrito
                                                                                data.examenes.forEach(asignado => {
                                                                                    const productoId = asignado.id_examen;
                                                                                    eliminarProducto(productoId);
                                                                                    actualizarPreciosYListado();  
                                                                                });
                                                                            });
                                                                    }
                                                                    
                                                                },
                                                                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/examen', {
                                                                    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"  id='listado-2'>
                                                        </td>
                                                        <td class="product-total" id='listado-precios'>
                                                        </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"></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"></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>
   <!-- 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