@extends('layout.master')

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

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

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

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

    .payment-summary {
        display: flex;
        align-items: center;
        gap: 1rem;

        padding: 1rem;
    }

    .payment-summary .active {
        box-shadow: 0 3px 8px rgb(236, 12, 12);

    }

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

        .price{
            justify-content: center !important
        }

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

    .payment-button {
        font-size: 1.25rem;
        font-weight: bold;
        padding: 1rem 2rem;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        width: 100%;
        /* Botones ocupan el mismo ancho */
        max-width: 300px;
        border: #007bff
    }

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

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

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

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

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

        <div class="wfacp-panel-wrapper wfacp_left_right ">
            <div class="wfacp-middle-container">
                <div class="wfacp-form-panel clearfix">
                    <div class="wfacp-comm-wrapper wfacp-clearfix">
                        <div class="wfacp-left-wrapper">
                            <div class="wfacp-form">
                                <div id=wfacp-sec-wrapper>
                                    <div class=wfacp-inside>
                                        <div class="wfacp_main_form woocommerce wfacp_single_multi_form wfacp_two_step">
                                            <form class="checkout woocommerce-checkout" enctype="multipart/form-data"
                                                id="wfacp_checkout_form">
                                                <div class="wfacp-left-panel wfacp_page pre_built single_step"
                                                    data-step="single_step">
                                                    <div class="wfacp-section wfacp-hg-by-box step_0 form_section_single_step_0_layout_9 "
                                                        data-field-count="5">
                                                        <div class="wfacp_internal_form_wrap none uk-flex uk-flex-between">
                                                            <h2 class="wfacp_section_title">
                                                                Producto
                                                            </h2>
                                                            {{-- <h2 class="wfacp_section_title1">
                                                                <span style="font-weight: 600;">Mis productos</span> > Finalizar Compra
                                                            </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">CURSO
                                                                        </div>
                                                                        <div class="wfacp_qty_price_wrap">
                                                                            <!-- <div class="product-name">PLAN</div> -->
                                                                        </div>
                                                                    </div>
                                                                    <div class="wfacp_product_switcher_container">

                                                                        <fieldset class="woocommerce-cart-form__cart-item cart_item wfacp_product_row wfacp_with_qty wfacp-selected-product"
                                                                            data-item-key="wfacp_64430ca73d508"
                                                                            cart_key="75f196041abe44a2f1e056c957b665dd"
                                                                            data-id="43">
                                                                            <div class="wfacp_row_wrap ps_radio wfacp_ps_disable_hideImg1 ">
                                                                                <div class="wfacp_ps_title_wrap">
                                                                                    <div class="wfacp_product_switcher_col wfacp_product_switcher_col_1 ">
                                                                                        <img width="100" height="100"
                                                                                            src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $publicacion->imagen }}"
                                                                                            class="attachment-100x100 size-100x100"
                                                                                            sizes="(max-width: 100px) 100vw, 100px" />
                                                                                    </div>
                                                                                    <div class="wfacp_product_switcher_col">
                                                                                        <span class='wfacp_product_switcher_item'>
                                                                                            {{$publicacion->titulo}}
                                                                                        </span>
                                                                                    </div>
                                                                                </div>

                                                                                {{-- <div class="detalle_plan">
                                                                                    <br>
                                                                                    @if($tipoPlan=='basico')
                                                                                    <span>Plan Básico</span><br>
                                                                                    <a href="#modal-plan1" uk-toggle>detalle del plan</a>
                                                                                    @endif
                                                                                    @if($tipoPlan=='plata')
                                                                                    <span>Plan Platinum</span><br>
                                                                                    <a href="#modal-plan2" uk-toggle>detalle del plan</a>
                                                                                    @endif
                                                                                    @if($tipoPlan=='golden')
                                                                                    <span>Plan Diamond</span><br>
                                                                                    <a href="#modal-plan3" uk-toggle>detalle del plan</a>
                                                                                    @endif
                                                                                    </br>
                                                                                </div> --}}
                                                                            </div>
                                                                        </fieldset>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- Ventana modal -->
                                                        <div id="modal-plan1" uk-modal>
                                                            <div class="uk-modal-dialog uk-modal-body">
                                                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                                                <h2 class="uk-modal-title">Detalle del Plan Básico</h2>
                                                                <ul class="uk-list">
                                                                    <li><span class="fas fa-check"></span>
                                                                        Acceso a todas las sesiones grabadas disponibles 24/7.</li>
                                                                    <li><span class="fas fa-check"></span>
                                                                        Material exclusivo en PDF, diseñado para reforzar cada
                                                                        clase.</li>
                                                                    <li><span class="fas fa-check"></span>
                                                                        Simulacros para evaluar tu progreso y prepararte como nunca.
                                                                    </li>
                                                                    <li><span class="fas fa-check"></span>Acceso a nuestra
                                                                        plataforma virtual desde cualquier dispositivo.</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div id="modal-plan2" uk-modal>
                                                            <div class="uk-modal-dialog uk-modal-body">
                                                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                                                <h2 class="uk-modal-title">Detalle del Plan Platinum</h2>
                                                                <ul class="uk-list">

                                                                    <li><span class="fas fa-check"></span>Clases en vivo con interacción directa con los mejores
                                                                        docentes de lunes a domingo.</li>
                                                                    <li><span class="fas fa-check"></span>Soporte técnico personalizado, para que no te quedes con
                                                                        dudas.</li>
                                                                    <li><span class="fas fa-check"></span>Soporte de preguntas y respuestas.</li>
                                                                    <li><span class="fas fa-check"></span>Simulacros avanzados, diseñados para retarte y llevarte al
                                                                        siguiente nivel.
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div id="modal-plan3" uk-modal>
                                                            <div class="uk-modal-dialog uk-modal-body">
                                                                <button class="uk-modal-close-default" type="button" uk-close></button>
                                                                <h2 class="uk-modal-title">Detalle del Plan Diamond</h2>
                                                                <ul class="uk-list">
                                                                    <li><span class="fas fa-check"></span>Sesiones interactivas de preguntas y respuestas en vivo.
                                                                    </li>
                                                                    <li><span class="fas fa-check"></span>Tutorías personalizadas con docentes por módulo.</li>
                                                                    <li><span class="fas fa-check"></span>Plan de estudio personalizado de acuerdo con tus
                                                                        recursos.</li>
                                                                    <li><span class="fas fa-check"></span>Capacitación de manejo de herramientas IA</li>
                                                                    <li><span class="fas fa-check"></span>Programa de gestión del tiempo para tener una preparación
                                                                        Diamond</li>
                                                                    <li><span class="fas fa-check"></span>Programa de formación en inteligencia emocional</li>
                                                                    <li><span class="fas fa-check"></span>Programa de formación y manejo de una mentalidad
                                                                        positiva</li>
                                                                    <li><span class="fas fa-check"></span>Solucionario de los últimos exámenes PUN</li>
                                                                </ul>
                                                            </div>
                                                        </div>

                                                        <div class="wfacp_internal_form_wrap none uk-flex uk-flex-between ">
                                                            <h2 class="wfacp_section_title">
                                                                Seleccione la modalidad a pagar
                                                            </h2>
                                                        </div>