@extends('landingnombramiento.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    {{-- <link rel="stylesheet" href="{{ asset('assets/css/landing/index.css') }}" /> --}}
    <link rel="stylesheet" href="{{ asset('assets/css/landingnavidad/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/landing/index.css') }}" />
@endsection
@section('content')

    <!-- Banner superior -->
    <section class="banner-docentes uk-flex uk-flex-middle uk-flex-center">
        <p class="banner-text">
            ENTRENAMIENTO ESPECIAL GRATUITO
        </p>
    </section>

    <section class="hero-video uk-section uk-section-small uk-text-center">


        <div class="uk-container">
            <!-- Título principal -->
            <h2 class="hero-title">
                <i>RUTA AL ÉXITO 2026:</i>
            </h2>

            <!-- Subtítulo -->
            <p class="hero-subtitle">
                <i>3 Claves para Lograr tu Nombramiento Docente</i>
            </p>

            <p class="hero-indicator">
                🎁 El mejor regalo que puedes darte esta Navidad 🎁
            </p>

            <!-- Indicador -->


            <div class="para-video">

                {{-- <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
                        <iframe
                            src="https://fast.wistia.net/embed/iframe/5ite0d13wk?web_component=true&seo=false&videoFoam=true"
                            title="Maestro H Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0"
                            scrolling="no" class="wistia_embed" name="wistia_embed" width="100%" height="100%"></iframe>
                    </div>
                </div> --}}

                <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
                        <iframe src="https://fast.wistia.net/embed/iframe/yvo6q2tmm8?web_component=true&seo=false"
                            title="Limpio - GUION PROMOCIONAL WEBINAR - NOMBRAMIENTO DOCENTE Video"
                            allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no"
                            class="wistia_embed" name="wistia_embed" width="100%" height="100%"></iframe></div>
                </div>

            </div>


            <!-- Botón CTA -->
            <div>
                {{-- <a href="#" uk-toggle="target: #portada_principal" class="cta-button uk-button">
                    QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}"
                        alt="Docente" class="flecha-btn">
                </a> --}}
                <a href="https://group.wha.link/enON7a" class="cta-button uk-button" target="_blank">
                    QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}"
                        alt="Docente" class="flecha-btn">
                </a>
                <p class="cta-text">
                    ¡Cupos limitados. Prioridad para docentes que se preparan para el Nombramiento 2026!
                </p>
            </div>

        </div>

    </section>

    <section class="exclusivo-section uk-section uk-text-center">
        <div class="uk-container">
            <div class="evento-bar">

                <!-- FECHA -->
                <div class="evento-item">
                    <img src="{{ asset('assets/img/landingnavidad/item.png') }}" alt="Docente" class="imagen-item">
                </div>

                <div class="evento-divider"></div>

                <!-- HORA -->
                <div class="evento-item">
                    <img src="{{ asset('assets/img/landingnavidad/item2.png') }}" alt="Docente" class="imagen-item">
                </div>

                <div class="evento-divider"></div>

                <!-- ZOOM -->
                <div class="evento-item">
                    <img src="{{ asset('assets/img/landingnavidad/item3.png') }}" alt="Docente" class="imagen-item">
                </div>

            </div>
        </div>

    </section>

    <section class="ventaja-section uk-section">

        <div class="uk-container">

            <p class="hero-subtitle uk-text-center">
                <i>¿Qué obtendrás en este webinar?</i>
            </p>

            <p class="hero-indicator1 uk-text-center">
                <span>Un entrenamiento breve, claro y estratégico</span>
                para que conviertas el 2026 en el año donde tu nombramiento deje de ser un deseo y se convierta en un plan.
            </p>
            <br><br>

            <div class="uk-grid-large uk-child-width-1-2@s uk-grid-match" uk-grid>

                <!-- 1. Claridad de rumbo -->
                <div>
                    <div class="cuadrado">
                        <div class="icono">
                            <img src="{{ asset('assets/img/landingnavidad/icono1.png') }}" alt="Docente"
                                class="imagen-icono">
                            <h4>Claridad de rumbo:</h4>
                        </div>

                        <p>
                            Identificarás con exactitud <span>qué acciones sí te acercan al nombramiento</span>
                            y cuáles te están frenando sin que te des cuenta.
                        </p>
                    </div>
                </div>

                <!-- 2. Enfoque estratégico -->
                <div>
                    <div class="cuadrado">
                        <div class="icono">
                            <img src="{{ asset('assets/img/landingnavidad/icono2.png') }}" alt="Docente"
                                class="imagen-icono">
                            <h4>Enfoque estratégico:</h4>
                        </div>

                        <p>
                            Aprenderás a <span>ordenar tu preparación, optimizar tu tiempo y estudiar con
                                intención</span>, no por acumulación de contenido.
                        </p>
                    </div>
                </div>

                <!-- 3. Mentalidad de logro -->
                <div>
                    <div class="cuadrado">
                        <div class="icono">
                            <img src="{{ asset('assets/img/landingnavidad/icono3.png') }}" alt="Docente"
                                class="imagen-icono">
                            <h4>Mentalidad de logro:</h4>
                        </div>
                        <p>
                            Dejarás atrás la postergación y <span>activarás una actitud disciplinada y decidida</span>,
                            propia de quienes finalmente alcanzan plaza.
                        </p>
                    </div>
                </div>

                <!-- 4. Regalo navideño -->
                <div>
                    <div class="cuadrado">
                        <div class="icono">
                            <img src="{{ asset('assets/img/landingnavidad/icono4.png') }}" alt="Docente"
                                class="imagen-icono">
                            <h4>Regalo navideño:</h4>
                        </div>

                        <p>
                            Recibirás un inicio de ruta 2026 diseñado
                            <span>para que avances desde el día 1 con dirección y propósito.</span>
                        </p>
                    </div>
                </div>

            </div>


        </div>

    </section>

    <section class="section-btn ">
        <div class="uk-text-center">
            {{-- <a href="#" uk-toggle="target: #portada_principal" class="cta-button uk-button">
                QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}" alt="Docente"
                    class="flecha-btn">
            </a> --}}
            <a href="https://group.wha.link/enON7a" class="cta-button uk-button" target="_blank">
                    QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}"
                        alt="Docente" class="flecha-btn">
                </a>
            
            <p class="cta-text">
                Regálate estrategia, no improvisación.
            </p>
        </div>
    </section>

    <section class="section-ultimo ">
        <div class="uk-text-center">
            <p class="hero-subtitle uk-text-center">
                <i>Conviértete en el docente que se adelanta, no en el que espera</i>
            </p>

            <p class="hero-indicator1 uk-text-center" style="color: #Fff">
                Aprovecha este
                <span>entrenamiento gratuito</span>
                y empieza tu ruta hacia el <span>2026</span> con ventaja
            </p>
            {{-- <a href="#" uk-toggle="target: #portada_principal" class="cta-button uk-button">
                QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}" alt="Docente"
                    class="flecha-btn">
            </a> --}}
            <a href="https://group.wha.link/enON7a" class="cta-button uk-button" target="_blank">
                    QUIERO MI ACCESO AL WEBINAR <img src="{{ asset('assets/img/landingnavidad/flecha.png') }}"
                        alt="Docente" class="flecha-btn">
                </a>
            <p class="cta-text">
                Regálate estrategia, no improvisación.
            </p>
        </div>
    </section>


    <!-- Modal de registro -->
    <div id="portada_principal" uk-modal>
        <div class="uk-modal-dialog uk-modal-body uk-padding-large">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <h3 class="uk-modal-title uk-text-center">Regístrate al Webinar Navideño</h3>

            <p class="text-modal">Completa tus datos para recibir el enlace de acceso, recordatorios y materiales
                posteriores al evento.</p>

            <form class="uk-form-stacked" id="form-postulacion" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="text" name="landing_id" id="landing_id" value="4" hidden>
                <!-- Nombre completo -->
                <div class="uk-margin">
                    <label class="uk-form-label" for="nombres">Nombres completos</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="nombres" type="text" placeholder="Tu nombre completo" required>
                    </div>
                </div>

                <!-- Correo electrónico -->
                <div class="uk-margin">
                    <label class="uk-form-label" for="email">Correo electrónico</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="email" type="email" placeholder="tunombre@ejemplo.com"
                            required>
                    </div>
                </div>

                <!-- Teléfono -->
                <div class="uk-margin">
                    <label class="uk-form-label" for="celular">Número de celular</label>
                    <div class="uk-form-controls">
                        <input class="uk-input" id="celular" type="tel" placeholder="" required>
                    </div>
                </div>

                <div class="uk-margin">
                    <label class="uk-form-label" for="condicion_laboral">Condición laboral (Soy Docente)</label>
                    <div class="uk-form-controls">
                        <select class="uk-select" id="condicion_laboral" name="condicion_laboral" required>
                            <option value="" disabled selected>Seleccione...</option>
                            <option value="Nombramiento">Contratado</option>
                            <option value="Ascenso">Nombrado</option>

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

                <style>
                    .uk-select {
                        background: rgb(250, 250, 250);
                    }
                </style>

                <div class="uk-margin">
                    <label style="display: flex">
                        <input class="uk-checkbox puntito" type="checkbox" name="terms" required>
                        <span style="display: inline-block;" class="terminos">
                            He leído y Acepto las <a href="{{ url('/politicas-privacidad') }}" target="_blank"
                                rel="noopener noreferrer">políticas de
                                privacidad</a> y los
                            <a href="{{ url('/terminos-condiciones') }}" target="_blank"
                                rel="noopener noreferrer">términos y condiciones</a>
                        </span>

                    </label>
                </div>



                <!-- Botón de envío -->
                <div class="uk-margin uk-text-center">
                    <button type="submit" class="uk-button uk-button-principal uk-button-celeste uk-width-1-1"
                        style="background-color: #960B00">Enviar</button>
                </div>
            </form>
        </div>
    </div>




@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            $('#form-postulacion').on('submit', function(e) {
                e.preventDefault();

                // Validación rápida antes de enviar
                const nombres = $('#nombres').val().trim();
                const email = $('#email').val().trim();
                const celular = $('#celular').val().trim();
                const checkboxes = $('#form-postulacion input[type="checkbox"]:checked').length;

                if (nombres === '' || email === '' || celular === '' || checkboxes < 1) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Campos incompletos',
                        text: 'Por favor, completa todos los campos y acepta los términos antes de continuar.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                // Enviar datos vía AJAX
                $.ajax({
                    url: "{{ route('navidad2025.registro') }}", // 🔹 Ajusta con tu ruta correcta en web.php
                    method: "POST",
                    data: {
                        _token: $('input[name="_token"]').val(),
                        nombres: nombres,
                        email: email,
                        celular: celular,
                        condicion_laboral: $('#condicion_laboral').val(),
                        landing_id: $('#landing_id').val(),
                    },

                    beforeSend: function() {
                        Swal.fire({
                            title: 'Enviando...',
                            text: 'Por favor espera un momento.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Registro exitoso',
                            text: 'Gracias por registrarte',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'Aceptar'
                        }).then(() => {
                            // 🔹 Limpia el formulario
                            $('#form-postulacion')[0].reset();
                            // 🔹 Cierra el modal de UIkit
                            UIkit.modal('#portada_principal').hide();
                            // 🔹 Redirige a la página final
                            window.location.href =
                                "{{ route('landingnavidad.final') }}";

                        });
                    },
                    error: function(xhr) {
                        let mensaje = 'Ocurrió un error inesperado. Intenta nuevamente.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            mensaje = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: mensaje,
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'Reintentar'
                        });
                    }
                });

            });
        });
    </script>
@endsection