@extends('layout.master')

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

@section('styles')

    <link rel="stylesheet" href="{{ asset('assets/css/planes.css') }}" />
@endsection

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

        <div class="uk-section uk-container">
            <h4 class="uk-heading-line uk-text-center"><span>{{$publicacion->titulo}}</span></h4>

            <div class="uk-margin-top">
                <!-- Pestañas de Pago Mensual y Pago Paquete -->
                <ul class="uk-tab uk-flex-center" uk-switcher="animation: uk-animation-fade">
                    <li><a href="#" onclick="seleccionarTipoPago('paquete')" style="font-size: 1.2rem">Pago Paquete</a>
                    </li>
                    <li><a href="#" onclick="seleccionarTipoPago('mensual')" style="font-size: 1.2rem">Pago
                            Mensual</a></li>

                </ul>
                <!-- Contenido de las pestañas -->
                <ul class="uk-switcher uk-margin">
                    <!-- Contenido de Pago Paquete -->
                    <li>
                        <div class="uk-background-muted uk-padding uk-flex uk-flex-center">
                            <div class="uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1 uk-grid-match"
                                uk-grid>
                                <!-- Plan Básico -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan basico">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                                 S/{{ $publicacion->precio_basico ?? 0.0 }} 
                                              
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por     {{ $publicacion->dependientes->count() ?? 1 }}  meses</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">BÁSICO</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background: linear-gradient(to right, #a40c0c, #fc3a3a, #ca2020); color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">
                                                    <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 class="btn-pago">
                                                    <button class="uk-button uk-width-1-1 uk-border-rounded btncomprar"
                                                        style="background: linear-gradient(to right, #a40c0c, #fc3a3a, #ca2020); "
                                                        onclick="seleccionarPlanp('basico')">COMPRAR AHORA</button>
                                                </div>

                                            </div>

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

                                <!-- Plan Premium -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan premium">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                            S/{{ $publicacion->precio_plata ?? 0.0 }} 
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por    {{ $publicacion->dependientes->count() ?? 1 }} meses</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">PLATINUM</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background: linear-gradient(to right, #cfa944, #f7ef8a, #cfa944); color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">
                                                    <li><span class="fas fa-check"></span>
                                                        Acceso a todo el plan básico .</li>
                                                    <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 class="btn-pago">
                                                    <button onclick="seleccionarPlanp('plata')"
                                                        style="background: linear-gradient(to right, #cfa944, #f7ef8a, #cfa944); "
                                                        class="uk-button uk-width-1-1 uk-border-rounded btncomprar">COMPRAR
                                                        AHORA</button>
                                                </div>
                                            </div>

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

                                <!-- Plan Golden -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan golden">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                            S/{{ $publicacion->precio_golden ?? 0.0 }} 
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por {{ $publicacion->dependientes->count() ?? 1 }} meses meses</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">DIAMOND</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background: linear-gradient(to bottom,#321c82, #60208a); color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">

                                                    <li><span class="fas fa-check"></span>
                                                        Acceso a todo el Plan Platinum.</li>
                                                    <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 modulo.</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 Daimond
                                                    </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 class="btn-pago">
                                                    <button onclick="seleccionarPlanp('golden')"
                                                        style="background: linear-gradient(to bottom,#321c82, #60208a); "
                                                        class="uk-button uk-width-1-1 uk-border-rounded btncomprar">COMPRAR
                                                        AHORA</button>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                   
                    <li>
                    @php
                                $primerCursoDep = $publicacion->dependientes->first();
                            @endphp
                        <div class="uk-background-muted uk-padding uk-flex uk-flex-center">
                            <div class="uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1 uk-grid-match" uk-grid>
                                <!-- Plan Básico -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan basico">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                                S/ {{ $primerCursoDep->precio_basico?? 0.00}}
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por Mes</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">BÁSICO</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background: linear-gradient(to right, #a40c0c, #fc3a3a, #ca2020); color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">
                                                    <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 class="btn-pago">
                                                    <button class="uk-button uk-width-1-1 uk-border-rounded btncomprar"
                                                    o  nclick="seleccionarPlan('basico')"
                                                        style="background: linear-gradient(to right, #a40c0c, #fc3a3a, #ca2020);"
                                                        uk-toggle="target: #modal-modulos1">
                                                        COMPRAR AHORA
                                                    </button>
                                                </div>

                                            </div>

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

                                <!-- Plan Premium -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan premium">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                               S/ {{ $primerCursoDep->precio_plata?? 0.00}}
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por Mes</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">PLATINUM</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background: linear-gradient(to right, #cfa944, #f7ef8a, #cfa944); color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">
                                                    <li><span class="fas fa-check"></span>
                                                        Acceso a todo el plan básico .</li>
                                                    <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 class="btn-pago">
                                                    <button onclick="seleccionarPlan('plata')"
                                                         uk-toggle="target: #modal-modulos1"
                                                        style="background: linear-gradient(to right, #cfa944, #f7ef8a, #cfa944); "
                                                        class="uk-button uk-width-1-1 uk-border-rounded btncomprar">COMPRAR
                                                        AHORA</button>
                                                </div>
                                            </div>

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

                                <!-- Plan Golden -->
                                <div>
                                    <div class="uk-card uk-card-default uk-card-hover uk-text-center">
                                        <div class="uk-card-body header-plan golden">
                                            <h2 class="uk-margin-remove-top uk-text-bold uk-text-large">
                                               S/   {{ $primerCursoDep->precio_golden?? 0.00}}
                                            </h2>
                                            <p class="uk-text-meta uk-margin-remove">Por Mes</p>
                                            <div class="linea-dashed"></div>
                                            <h3 class="uk-text-bold uk-text-uppercase name_plan">DIAMOND</h3>
                                        </div>
                                        <div class="uk-card-body uk-background-muted body-plan"
                                            style="background:linear-gradient(to bottom,#321c82, #60208a);  color: #000;">
                                            <div class="height-plan">
                                                <ul class="uk-list height-beneficios beneficios-lista">

                                                    <li><span class="fas fa-check"></span>
                                                        Acceso a todo el Plan Platinum.</li>
                                                    <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 modulo.</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 Daimond
                                                    </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 class="btn-pago">
                                                    <button onclick="seleccionarPlan('golden')"
                                                         uk-toggle="target: #modal-modulos1"
                                                        style="background: linear-gradient(to bottom,#321c82, #60208a); "
                                                        class="uk-button uk-width-1-1 uk-border-rounded btncomprar">COMPRAR
                                                        AHORA</button>
                                                </div>
                                            </div>

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


                </ul>
            </div>


        </div>

        <!-- Modal -->
        <div id="modal-modulos1" uk-modal>
            <div class="uk-modal-dialog uk-modal-body uk-border-rounded">
                <h2 class="uk-modal-title">Elegir Módulo</h2>
                
                <!-- Lista de módulos con botones para elegir -->
                <form id="form-modulos">
                    @foreach($publicacion->dependientes as $dep)
                    <div class="uk-margin">
                        <label>
                            <input class="uk-radio" type="radio" name="modulo" value="{{ $dep->id_curso }}"
                             onclick="seleccionarModulo('{{ $dep->id_curso }}')"
                            >
                            {{$dep->titulo_web}}
                        </label>
                    </div>
                   @endforeach
                </form>

                <!-- Botón Siguiente -->
                <div class="uk-margin-top uk-text-right">
                    <button class="uk-button uk-button-primary uk-border-rounded" onclick="pagar()">Siguiente</button>
                </div>
            </div>
        </div>
        <script>
            let curso_idp = '{{ $publicacion->id_curso }}';
            let tipoPago = 'paquete'; // 'mensual' o 'paquete'
            let tipoPlan = 'plata'; // 'basico', 'premium', 'golden'
            let moduloSeleccionado = '{{ $primerCursoDep->id_curso ?? 0 }}'; // ID del módulo seleccionado


            function seleccionarTipoPago(tipo) {
                tipoPago = tipo;
                console.log(`Tipo de pago seleccionado: ${tipoPago}`);
            }

            function seleccionarPlan(plan) {
                tipoPlan = plan;
                console.log(`Plan seleccionado: ${tipoPlan}`);}


            function seleccionarModulo(id) {
                moduloSeleccionado =id;
                console.log(`modulos elelcionado: ${ moduloSeleccionado}`);
               
            }
            function pagar(){
                if (validarParametrosPago(tipoPago, tipoPlan, moduloSeleccionado)) {
                    const paymentParams = {
                        tipoPago,
                        tipoPlan,
                        moduloSeleccionado,
                        curso_idp
                    };
                    console.log(paymentParams);
                    const secureParams = btoa(JSON.stringify(paymentParams));
                    const checkoutRoute = `/checkout/${secureParams}`;
                    window.location.href = checkoutRoute;
                } else {
                    alert('No se puede proceder con el pago. Verifica los parámetros.');
                }
            }
            
            function seleccionarPlanp(plan) {
                tipoPlan = plan;
                console.log(`Plan seleccionado: ${tipoPlan}`);
                if (validarParametrosPago(tipoPago, tipoPlan, moduloSeleccionado)) {
                    const paymentParams = {
                        tipoPago,
                        tipoPlan,
                        moduloSeleccionado,
                        curso_idp
                    };
                    console.log(paymentParams);
                    const secureParams = btoa(JSON.stringify(paymentParams));
                    const checkoutRoute = `/checkout/${secureParams}`;
                    window.location.href = checkoutRoute;
                } else {
                    alert('No se puede proceder con el pago. Verifica los parámetros.');
                }
            
            }
            function validarParametrosPago(tipoPago, tipoPlan, moduloSeleccionado) {
                if (tipoPago === 'mensual') {
                    if (!moduloSeleccionado || moduloSeleccionado === 0) {
                        alert('Error: Pago mensual requiere un módulo seleccionado');
                        return false;
                    }
                    const planesMensuales = ['basico', 'plata', 'golden'];
                    if (!planesMensuales.includes(tipoPlan)) {
                        alert('Error: Plan no válido para pago mensual');
                        return false;
                    }
                } else if (tipoPago === 'paquete') {
                    const planesPaquete = ['basico', 'plata', 'golden'];
                    if (!planesPaquete.includes(tipoPlan)) {
                        alert('Selecciona  tu plan');
                        return false;
                    }
                } else {
                    alert('Error: Tipo de pago no válido');
                    return false;
                }
                return true;
            }
        </script>
    </main>
@endsection