@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/landingnombramiento/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/landingnombramiento/registro.css') }}" />
@endsection

@section('content')

    <!-- Banner superior -->
    <section class="banner-docentes uk-flex uk-flex-middle uk-flex-center">
        <p class="banner-text">
            ¡¡ACCESO DISPONIBLE SOLO POR TIEMPO LIMITADO!!
        </p>
    </section>

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

        <div class="uk-container texto-centrado">
            <!-- Título principal -->
            <h2 class="hero-title">
                <span>Para docentes comprometidos</span>
            </h2>

            <!-- Subtítulo -->
            <p class="hero-subtitle">
                <i>Que buscan subir su puntaje, ordenar su preparación y asegurar resultados reales en el <span>Nombramiento
                        2026,</span>
                    con una metodología clara, moderna y efectiva.</i>
            </p>

            <!-- Indicador -->
            <p class="hero-indicator">
                👇 <i>Te acompañamos a lograrlo con una ruta precisa que ya está funcionando para cientos de docentes.
                </i>👇
            </p>

            <div class="form-wrapper">

                <div class="form-box uk-grid-collapse uk-child-width-1-2@m" data-uk-grid>

                    <!-- COLUMNA IZQUIERDA -->
                    <div class="left-box">
                        <div class="left-inner">

                            <img src="{{ asset('assets/img/logo_auge.png') }}" class="logo-auge" />

                            <h3 class="left-title">
                                INDICACIONES IMPORTANTES
                                ANTES DE REGISTRARTE 👇
                            </h3>

                            <p class="left-text">
                                Estás a punto de completar una evaluación inicial, donde analizaremos tu caso para
                                determinar si
                                cumples con el perfil ideal para acceder a nuestro programa de preparación para el
                                <strong>Nombramiento Docente 2026 y Contrato 2027–2028.</strong>

                                <br>Por favor, responde con sinceridad. Estas preguntas nos permitirán entender:
                            </p>

                            <ul class="left-checklist">
                                <li>✅ tu nivel actual</li>
                                <li>✅ tu experiencia previa</li>
                                <li>✅ tu motivación real</li>
                                <li>✅ tus barreras</li>
                                <li>✅ tu compromiso</li>
                                <li>✅ tu capacidad de avanzar con una metodología guiada</li>
                            </ul>

                            <p class="left-footer">
                                Este proceso es exclusivo, por lo que solo algunos docentes serán seleccionados.
                            </p>

                        </div>
                    </div>

                    <!-- COLUMNA DERECHA -->
                    <div class="right-box">
                        <form id="form-evaluacion">
                            @csrf

                            <!-- PASO 1 -->
                            <div class="uk-form-stacked paso-1">

                                <div class="uk-grid-small" data-uk-grid>

                                    <div class="uk-width-1-2@s caja-margin">
                                        <label class="uk-form-label">Tu nombre*</label>
                                        <input class="uk-input campo" name="nombre" placeholder="Escribe aquí tu nombre">
                                    </div>

                                    <div class="uk-width-1-2@s caja-margin">
                                        <label class="uk-form-label">Tu apellido*</label>
                                        <input class="uk-input campo" name="apellido"
                                            placeholder="Escribe aquí tu apellido">
                                    </div>

                                </div>

                                <div class="caja-margin">
                                    <label class="uk-form-label">Número de Teléfono*</label>
                                    <input class="uk-input campo" name="telefono"
                                        placeholder="Escribe aquí tu número de teléfono">
                                </div>

                                <div class="caja-margin">
                                    <label class="uk-form-label">Correo electrónico*</label>
                                    <input class="uk-input campo" name="email" placeholder="Escribe aquí tu mejor E-mail">
                                </div>

                                <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>

                                <hr>

                                <!-- PREGUNTA 1 (NEUROVENTAS) -->
                                <label class="uk-form-label">
                                    ¿Cuál es la razón más poderosa por la que necesitas lograr tu nombramiento en 2026 y
                                    por qué ese resultado es innegociable para ti y tu familia?
                                </label>
                                <textarea class="uk-textarea textarea" name="motivacion"
                                    placeholder="Estabilidad, ascenso, mayor ingreso, reconocimiento, libertad familiar…"></textarea>

                                <div class="btn-wrapper">
                                    <button type="button" class="btn-siguiente" id="btn-siguiente">Siguiente</button>
                                </div>

                            </div>

                            <!-- PASO 2 -->
                            <div class="paso paso-2" style="display:none;">

                                <!-- PREGUNTA 2 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label ">¿En qué nivel educativo estás aportando hoy tu talento
                                        docente?</label>
                                    <select class="uk-select campo" name="nivel_actual">
                                        <option value="">Seleccione una opción</option>
                                        <option>Inicial</option>
                                        <option>Primaria</option>
                                        <option>Secundaria</option>
                                        <option>EBA / Rural / Intercultural</option>
                                        <option>Otra</option>
                                    </select>
                                </div>

                                <!-- PREGUNTA 3 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        ¿Ya has participado antes en procesos de nombramiento o contrato?
                                        Si tu respuesta es sí, ¿en qué año y qué resultado obtuviste?
                                    </label>
                                    <textarea class="uk-textarea campo" name="participacion_previa"
                                        placeholder="Ejemplo: Sí, en 2022 obtuve XX puntos. / No, sería mi primera vez."></textarea>
                                </div>

                                <!-- PREGUNTA 4 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">Si tuvieras que ubicar tu puntaje aproximado o desempeño
                                        actual, ¿en cuál rango te ves?</label>
                                    <select class="uk-select campo" name="puntaje_actual">
                                        <option value="">Seleccione una opción</option>
                                        <option>Menos de 60 puntos</option>
                                        <option>Entre 60 y 70</option>
                                        <option>Más de 70</option>
                                        <option>No lo conozco / Aún no he rendido examen</option>
                                    </select>
                                </div>

                                <!-- PREGUNTA 5 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        Si te guiamos con una ruta probada, ¿te comprometes a seguir un plan intensivo para
                                        lograr tu nombramiento 2026 y contrato 2027–2028, incluso si requiere esfuerzo
                                        extra?
                                    </label>
                                    <select class="uk-select campo" name="compromiso">
                                        <option value="">Seleccione una opción</option>
                                        <option>Sí, me comprometo completamente</option>
                                        <option>Sí, pero necesito apoyo para organizarme</option>
                                        <option>No estoy seguro(a) aún</option>
                                    </select>
                                </div>

                                <!-- PREGUNTA 6 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        Para avanzar necesitas internet, dispositivo y al menos 10 horas semanales.
                                        ¿Cuentas con estos recursos para hacer realidad tu objetivo?
                                    </label>
                                    <select class="uk-select campo" name="acceso_estudio">
                                        <option value="">Seleccione una opción</option>
                                        <option>Sí</option>
                                        <option>Aún no, pero puedo conseguirlo</option>
                                    </select>
                                </div>

                                <div class="btn-wrapper">
                                    <button type="button" class="btn-siguiente" id="btn-siguiente-2">Siguiente</button>
                                </div>

                            </div>

                            <!-- PASO 3 -->
                            <div class="paso paso-3" style="display:none;">

                                <!-- PREGUNTA 7 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        Si este programa te llevara a tu plaza y estabilidad laboral,
                                        ¿qué nivel de inversión estarías dispuesto(a) a asumir para hacerlo realidad?
                                    </label>
                                    <select class="uk-select campo" name="inversion">
                                        <option value="">Seleccione una opción</option>
                                        <option>Menos de S/. 500</option>
                                        <option>S/. 500–1000</option>
                                        <option>Más de S/. 1000</option>
                                    </select>
                                </div>

                                <!-- PREGUNTA 8 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        ¿Qué crees que te ha frenado hasta hoy para lograr tu nombramiento —falta de método,
                                        apoyo, tiempo, disciplina u otro factor?
                                    </label>
                                    <textarea class="uk-textarea campo" name="obstaculos" placeholder="Describe brevemente tus barreras reales"></textarea>
                                </div>

                                <!-- PREGUNTA 9 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        Tenemos solo 200 cupos.
                                        ¿Por qué tú deberías ser uno(a) de los(as) seleccionados(as)?
                                        ¿Qué te mueve de verdad y qué estás dispuesto(a) a hacer, sin excusas, para lograr
                                        tu Nombramiento Docente y transformar tu futuro profesional?
                                    </label>
                                    <textarea class="uk-textarea campo" name="por_que_tu" placeholder="Escribe aquí tu respuesta"></textarea>
                                </div>

                                <!-- PREGUNTA 10 -->
                                <div class="caja-margin">
                                    <label class="uk-form-label">
                                        ¿Estás de acuerdo en agendar una llamada o videollamada para evaluar tu caso y
                                        trazar tu ruta personalizada de nombramiento?
                                    </label>
                                    <select class="uk-select campo" name="acepta_llamada">
                                        <option value="">Seleccione una opción</option>
                                        <option>Sí, agendemos</option>
                                        <option>Quiero información antes, pero sí estoy interesado(a)</option>
                                    </select>
                                </div>

                                <div class="btn-wrapper">
                                    <button type="submit" class="btn-siguiente">Finalizar</button>
                                </div>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </section>

@endsection

@section('scripts')

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            // Función validar campos vacíos
            function validarCampos(campos) {
                for (let selector of campos) {
                    let campo = document.querySelector(selector);
                    if (campo && campo.value.trim() === "") {
                        Swal.fire("Campo incompleto", "Por favor completa todos los campos antes de continuar.",
                            "warning");
                        return false;
                    }
                }
                return true;
            }

            // PASO 1 → PASO 2
            $('#btn-siguiente').on('click', function() {

                let camposPaso1 = [
                    "input[name='nombre']",
                    "input[name='apellido']",
                    "input[name='telefono']",
                    "input[name='email']",
                    "textarea[name='motivacion']"
                ];

                if (!validarCampos(camposPaso1)) return;

                $('.paso-1').hide();
                $('.paso-2').fadeIn();
            });

            // PASO 2 → PASO 3
            $('#btn-siguiente-2').on('click', function() {

                let camposPaso2 = [
                    "select[name='nivel_actual']",
                    "textarea[name='participacion_previa']",
                    "select[name='puntaje_actual']",
                    "select[name='compromiso']",
                    "select[name='acceso_estudio']"
                ];

                if (!validarCampos(camposPaso2)) return;

                $('.paso-2').hide();
                $('.paso-3').fadeIn();
            });

            // SUBMIT FINAL AJAX
            $('#form-evaluacion').on('submit', function(e) {
                e.preventDefault();

                let camposPaso3 = [
                    "select[name='inversion']",
                    "textarea[name='obstaculos']",
                    "textarea[name='por_que_tu']",
                    "select[name='acepta_llamada']"
                ];

                if (!validarCampos(camposPaso3)) return;

                $.ajax({
                    url: "{{ route('landingnombramiento.guardar') }}",
                    method: "POST",
                    data: $(this).serialize(),

                    beforeSend: function() {
                        Swal.fire({
                            title: 'Enviando datos...',
                            text: 'Por favor espera un momento.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            allowEnterKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    },

                    success: function(resp) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Evaluación completada',
                            text: 'Gracias por tu tiempo.'
                        }).then(() => {
                            window.location.href =
                                "{{ route('landingnombramientofinal') }}";
                        });
                    },

                    error: function(xhr) {
                        if (xhr.status === 422) {
                            Swal.fire({
                                icon: "error",
                                title: "Revisa los campos",
                                html: Object.values(xhr.responseJSON.errors).join(
                                    "<br>")
                            });
                        }
                    }
                });
            });
        });
    </script>


@endsection