@extends('layout.master')

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

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/becas.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
@endsection

@section('content')

    <main class="page-main" style="margin-top:30px">


        <div class="uk-section uk-padding-remove section2 opcional" style="margin-top: 20px">
            <!-- Solo visible en dispositivos no móviles -->
            <div class="imagenSection21">
                <img src="{{ asset('assets/img/webinar/1.jpg') }}" alt="Imagen de fondo" style="width: 100%; height: auto;">
            </div>
            <!-- Visible solo en móviles -->
            <div class="imagenSection22">
                <img src="{{ asset('assets/img/webinar/18-fm.jpg') }}" alt="Imagen de fondo"
                    style="width: 100%; height: auto;">
            </div>

            <div class="sectionfinal">
                <div class="uk-container">
                    <p><b>LA DOCENCIA NO SE JUBILA</b></p>
                    <div class="uk-text-center">
                        <h1 class="font-titulo1">La fórmula del éxito docente para lograr
                            Tu Nombramiento o Ascenso en el 2025</h1>
                        <h2>Aprende con Estrategias Comprobadas por Más de 63,000 Docentes</h2>
                    </div>
                    <!-- Contenedor con grid: tres columnas en una sola línea -->
                    <div class="uk-child-width-1-3@m uk-grid-small" uk-grid>
                        <div class="uk-text-center">
                            <h3>. Sin Memorizar</h3>
                        </div>
                        <div class="uk-text-center">
                            <h3>. Sin Complicaciones </h3>
                        </div>
                        <div class="uk-text-center">
                            <h3>. Con Resultados Reales</h3>
                        </div>
                    </div>


                    <div class="uk-grid uk-grid-small uk-flex-middle uk-flex-right" uk-grid style="width: 100%;">
                        <div class="uk-width-1-2@m">
                            <div class="feature-item">
                                <p>Regístrate con DESCUENTO y
                                    accede a clases, simulacros y
                                    material premium sin pagar lo que
                                    todos están pagando en la web.</p>
                            </div>

                            <a href="#portada_principal" class="uk-button-amarillo uk-button-principal">Postula aquí a la
                                beca</a>
                        </div>
                    </div>



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


        <div class="section55">
            <div class="uk-container">
                <div class="uk-text-center titulo_section55">
                    <h1 class="font-titulo">ESTO ES LO QUE GANAS SI PARTICIPAS
                        EN EL <span class="color-rojo">EXAMEN DE BECAS 2025</span> </h1>
                </div>

                <div class="uk-grid uk-grid-small uk-flex-middle div_cuadro" uk-grid style="width: 100%">
                    <div class="uk-width-1-2@m mitad-cuadro">
                        <div class="cuadro">
                            <div class="icono">
                                <img src="{{ asset('assets/img/recursos/recurso1.png') }}" alt="Icono de computadora">
                            </div>
                            <p class="titulo"><b>Acceso total a 6 módulos integrales</b></p>
                            <p class="descripcion">Todo el contenido que necesitas para tu Nombramiento o Ascenso.
                            </p>
                        </div>

                    </div>

                    <div class="uk-width-1-2@m mitad-cuadro">
                        <div class="cuadro">
                            <div class="icono">
                                <img src="{{ asset('assets/img/recursos/recurso2.png') }}" alt="">
                            </div>
                            <p class="titulo"><b>Simulacros tipo MINEDU y material exclusivo</b></p>
                            <p class="descripcion">Prepárate con estrategia, contenido
                                actualizado y evaluaciones reales.
                            </p>
                        </div>
                    </div>
                    <div class="uk-width-1-2@m mitad-cuadro">
                        <div class="cuadro">
                            <div class="icono">
                                <img src="{{ asset('assets/img/recursos/recurso3.png') }}" alt="">
                            </div>
                            <p class="titulo"><b>Clases en vivo + grabaciones disponibles</b></p>
                            <p class="descripcion">Estudia con expertos en tiempo real o
                                repasa a tu ritmo.
                            </p>
                        </div>
                    </div>

                    <div class="uk-width-1-2@m mitad-cuadro">
                        <div class="cuadro">
                            <div class="icono">
                                <img src="{{ asset('assets/img/recursos/recurso4.png') }}" alt="">
                            </div>
                            <p class="titulo"><b>Acompañamiento pedagógico y asesoría constante</b></p>
                            <p class="descripcion">Nunca estarás solo. Te guiamos paso
                                a paso durante toda tu preparación.
                            </p>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="section1 fondo_color">
            <div class="uk-container">
                <div class="uk-text-center" style="margin: 10px">
                    <h1 class="color-rojo font-titulo">¿ESTÁS LISTO PARA DEJAR DE SOÑAR?</h1>
                    <h2>¡Tú tienes el poder, <b> es hora de activarlo! </b></h2>
                </div>

                <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid style="width: 100%">
                    <div class="uk-width-1-2@m section11">
                        <p class="text_section11A">Esta es tu oportunidad de <span>inspirar, crecer y liderar.</span>
                            Prepárate con los mejores del Perú y haz
                            de tu vocación un legado.

                        </p>

                        <p class="text_section11B color-rojo">¡La beca te está esperando, pero tú debes dar el primer paso!
                        </p>
                    </div>
                    <div class="uk-width-1-2@m section51img">
                        <img src="{{ asset('assets/img/recursos/laptop.png') }}" alt="prueba"
                            style="max-width: 100%; height: auto; border-radius: 10px;">
                    </div>
                </div>
            </div>
        </div>

        <div class="section55 fondo_color">
            <div class="uk-container">
                <div class="uk-text-center">
                    <h1 class="color-rojo margin-10 font-titulo">¿QUIÉNES PUEDEN PARTICIPAR?</h1>
                    <h3 class="margin-0 font_subtitulo">Docentes de TODO EL PAÍS que quieran:</h3>
                </div>

                <div class="uk-grid uk-grid-small uk-flex-middle two-section" uk-grid>
                    <div class="uk-width-1-2@m sectionvineta">
                        <div class="item">
                            <img src="{{ asset('assets/img/recursos/chec.png') }}" alt="">
                            <div class="text">
                                <h3>Alcanzar su Nombramiento Docente</h3>
                                <p>Prepárate para obtener tu plaza con una ruta alineada al examen del MINEDU.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="{{ asset('assets/img/recursos/chec.png') }}" alt="">
                            <div class="text">
                                <h3>Subir en la Escala Magisterial</h3>
                                <p>Mejora tu categoría, tus ingresos y tu perfil profesional.</p>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-1-2@m section51img">
                        <img src="{{ asset('assets/img/recursos/dariana.png') }}" alt="prueba"
                            style="max-width: 100%; height: auto; border-radius: 10px;">
                    </div>
                </div>
            </div>
        </div>


        <div class="section55">
            <div class="uk-container">
                <div class="uk-text-center">
                    <h1 class="font-titulo">¿CÓMO PARTICIPAR?</h1>
                </div>

                <div class="uk-grid uk-grid-small uk-flex-middle uk-grid-center" uk-grid style="width: 100%">
                    <div class="uk-width-1-2@m">
                        <div class="cuadro1">
                            <img src="{{ asset('assets/img/recursos/1.png') }}" alt="">
                            <div class="text">
                                <h3><b>Regístrate en el formulario </b> que se encuentra en la
                                    parte superior de esta
                                    página.</h3>
                            </div>

                        </div>
                    </div>
                    <div class="uk-width-1-2@m">
                        <div class="cuadro1">
                            <img src="{{ asset('assets/img/recursos/2.png') }}" alt="">
                            <div class="text">
                                <h3><b>Elige la modalidad de tu
                                        examen</b> (Ascenso de Escala
                                    o Nombramiento Docente)
                                    y <b>rinde tu evaluación virtual.</b> </h3>
                            </div>

                        </div>
                    </div>

                    <div class="uk-width-1-2@m">
                        <div class="cuadro1">
                            <img src="{{ asset('assets/img/recursos/3.png') }}" alt="">
                            <div class="text">
                                <h3><b>Los 3 mejores puntajes
                                        serán anunciados</b> y accederán a una beca completa,
                                    media beca o 1/4 de beca</h3>
                            </div>

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

        <div>
            <div class="uk-container">
                <div class="uk-text-center titulo-footer">
                    <h1 class="font-titulo">Solo <b>GANAN</b> los que toman <b>ACCIÓN.</b> El resto
                        mira desde la banca</h1>
                </div>
            </div>
        </div>

        <div class="section55">
            <div class="uk-container">
                <div class="uk-grid uk-grid-small uk-flex-middle sectioncontador" uk-grid>
                    <!-- Columna Izquierda: Títulos -->
                    <div class="uk-width-1-2@m">
                        <h2 class="titulo_con">¡ESTA ES TU OPORTUNIDAD!</h2>
                        <h2 class="parrafo_con">Ten presente las fechas clave del Concurso de Becas</h2>
                    </div>
                    <!-- Columna Derecha: Bloques con números o texto -->
                    <div class="uk-width-1-2@m">
                        <div class="uk-grid uk-grid-medium uk-flex-middle cuadro_general" uk-grid>
                            <!-- Bloque 1 -->
                            <div class="uk-width-1-4@m uk-text-center cuadro_contador">
                                <h1>0</h1>
                                <p>Días</p>
                            </div>
                            <!-- Bloque 2 -->
                            <div class="uk-width-1-4@m uk-text-center cuadro_contador">
                                <h1>0</h1>
                                <p>Horas</p>
                            </div>
                            <!-- Bloque 3 -->
                            <div class="uk-width-1-4@m uk-text-center cuadro_contador">
                                <h1>0</h1>
                                <p>Minutos</p>
                            </div>
                            <!-- Bloque 4 -->
                            <div class="uk-width-1-4@m uk-text-center cuadro_contador">
                                <h1>0</h1>
                                <p>Segundos</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="section55">
            <div class="uk-container">
                <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid style="width: 100%">
                    <div class="uk-width-1-3@m">
                        <div class="cuadro inscripcion">
                            <img src="{{ asset('assets/img/recursos/fecha.png') }}" alt="">
                            <h4>Inscripción:</h4>
                            <p>28 de marzo al 26 de abril</p>
                        </div>
                    </div>
                    <div class="uk-width-1-3@m">
                        <div class="cuadro inscripcion">
                            <img src="{{ asset('assets/img/recursos/fecha.png') }}" alt="">
                            <h4>Examen Virtual</h4>
                            <p><b>27 de Abril</b></p>
                        </div>
                    </div>

                    <div class="uk-width-1-3@m">
                        <div class="cuadro inscripcion">
                            <img src="{{ asset('assets/img/recursos/fecha.png') }}" alt="">
                            <h4>Resultados</h4>
                            <p>28 de abril al medio día</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section55">
            <div class="uk-container">
                <div class="uk-grid uk-grid-small uk-flex-middle cuadro_general" uk-grid style="width: 100%">
                    <div class="uk-width-1-2@m">
                        <a href="#portada_principal" class="uk-button-amarillo uk-button-principal">Postula aquí a la
                            beca</a>
                    </div>
                </div>
            </div>
        </div>



        <div class="section55">
            <div class="uk-container">
                <div class="uk-text-center titulo-final">
                    <h1>Esta es tu oportunidad de romper límites y llevar tu carrera al siguiente nivel.</h1>
                    <h2>¡Gánate tu beca y fórmate con los mejores del Perú!</h2>
                </div>
            </div>
        </div>

        <div style="padding-bottom: 40px">
            <div class="uk-container">
                <div class="uk-grid uk-grid-small uk-flex-middle cuadro_general" uk-grid style="width: 100%">
                    <div class="uk-width-1-2@m">
                        <a href="#portada_principal" class="uk-button-verde uk-button-principal">Sí, quiero asegurar mi
                            participación
                            ahora
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <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>
        let phoneInput_detalle;
        document.addEventListener('DOMContentLoaded', function() {
            initializePhoneInputdetalle();
            document.getElementById("form-postulacion").addEventListener("submit", function(e) {
                e.preventDefault(); // Evita el envío tradicional del formulari
                validarYEnviarFormulario();
            });
        });

        function initializePhoneInputdetalle() {
            const phoneInputField = document.querySelector("#celular");
            console.log(phoneInputField);
            phoneInput_detalle = window.intlTelInput(phoneInputField, {
                initialCountry: "auto",
                separateDialCode: true,
                formatOnDisplay: true,
                autoPlaceholder: "off", // Mejorar la visualización del número de teléfono
                allowDropdown: true,
                dropdownContainer: document.body,
                searchPlaceholder: 'Buscar país', // Esto añade el placeholder de búsqueda en el dropdown
                geoIpLookup: function(callback) {
                    fetch('https://ipinfo.io', {
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            const countryCode = data.country || "PE"; // Por defecto, Perú
                            callback(countryCode);
                        })
                        .catch(() => {
                            callback("PE"); // Default country as Peru
                            document.getElementById('tipo_documento').value =
                                "1"; // Selecciona DNI por defecto si falla
                        });
                },
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js" // Necesario para la búsqueda
            });
        }

        function validarYEnviarFormulario() {
            let nombres = document.getElementById("nombres").value.trim();
            let apellidos = document.getElementById("apellidos").value.trim();
            let email = document.getElementById("email").value.trim();
            let telefonoInput = document.getElementById("celular");
            let telefono = phoneInput_detalle.getNumber(); // Obtener número completo
            let examen = document.getElementById("examen").value;
            let terms = document.querySelector("input[name='terms']").checked;

            // Validación de campos vacíos
            if (nombres === "" || apellidos === "" || email === "" || telefonoInput.value === "" || examen === "") {
                Swal.fire({
                    icon: "warning",
                    title: "Campos incompletos",
                    text: "Todos los campos son obligatorios."
                });
                return;
            }

            // Validación de formato de email
            let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailRegex.test(email)) {
                Swal.fire({
                    icon: "error",
                    title: "Correo inválido",
                    text: "Ingrese un correo electrónico válido."
                });
                return;
            }

            // Validación de teléfono
            if (!phoneInput_detalle.isValidNumber()) {
                Swal.fire({
                    icon: "error",
                    title: "Número inválido",
                    text: "Ingrese un número de teléfono válido."
                });
                return;
            }

            // Validación de términos y condiciones
            if (!terms) {
                Swal.fire({
                    icon: "warning",
                    title: "Términos no aceptados",
                    text: "Debe aceptar las políticas de privacidad y los términos y condiciones."
                });
                return;
            }


            enviarFormulario(nombres, apellidos, email, telefono, examen);
        }

        function enviarFormulario(nombres, apellidos, email, telefono, examen) {
            let formData = new FormData();

            formData.append("nombres", nombres);
            formData.append("apellidos", apellidos);
            formData.append("email", email);
            formData.append("celular", telefono);
            formData.append("examen", examen);
            formData.append("_token", document.querySelector("input[name='_token']").value);
            Swal.fire({
                title: "Enviando...",
                text: "Por favor, espere mientras procesamos su solicitud.",
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });
            fetch("/registro_beca", {
                    method: "POST",
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    Swal.close();
                    if (data.success) {
                        // Según el valor recibido en data.examen, determinamos la URL de redirección
                        let redirectUrl;
                        if (data.examen === "nombramiento") {
                            redirectUrl = "/beca/nombramiento";
                        } else {
                            // Opción genérica en caso de no recibir un valor esperado
                            redirectUrl = "/beca/ascenso";
                        }
                        Swal.fire({
                            icon: "success",
                            title: "¡Enviado!",
                            text: "Su solicitud ha sido enviada con éxito.",
                            timer: 2500, // tiempo en milisegundos (2.5 segundos)
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = redirectUrl;
                        });
                        document.getElementById("form-postulacion").reset();
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Error en el envío",
                            text: data.message || "Hubo un problema al procesar la solicitud."
                        });
                    }
                })
                .catch(error => {
                    Swal.close();
                    Swal.fire({
                        icon: "error",
                        title: "Error de conexión",
                        text: "No se pudo conectar con el servidor. Intente de nuevo más tarde."
                    });
                    console.error("Error en la petición:", error);
                });
        }
    </script>

    <script>
        // Definir la fecha objetivo: 20 de abril de 2025 a las 8:00 AM
        var targetDate = new Date("Apr 27, 2025 09:00:00").getTime();

        // Función para actualizar el contador
        function actualizarContador() {
            var now = new Date().getTime();
            var distance = targetDate - now;

            // Obtener todos los elementos h1 que contienen los números
            var elementos = document.querySelectorAll('.cuadro_contador h1');

            // Si la fecha ya pasó o el contador es negativo, establecer todos los valores en 0
            if (distance <= 0) {
                clearInterval(interval);
                elementos.forEach(function(el) {
                    el.innerText = "0";
                });
                return;
            }

            // Calcular el tiempo restante en días, horas, minutos y segundos
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Actualizar los elementos HTML del contador (orden: días, horas, minutos, segundos)
            if (elementos.length >= 4) {
                elementos[0].innerText = days;
                elementos[1].innerText = hours;
                elementos[2].innerText = minutes;
                elementos[3].innerText = seconds;
            }
        }

        // Actualizar el contador inmediatamente al cargar la página
        actualizarContador();

        // Actualizar el contador cada 1 segundo
        var interval = setInterval(actualizarContador, 1000);
    </script>


@endsection