@extends('landinganiversario.layout.master')

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

@section('styles')
    <style>
        body {
            color: #fff;
            background-image: url('{{ asset('assets/img/landinganiversario/imagen.png') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        @media (max-width: 768px) {
            body {
                background-image: url('{{ asset('assets/img/landinganiversario/fondo_movilv2.jpeg') }}');
            }
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/landinganiversario/index.css') }}" />
@endsection

@section('content')
    <div class="uk-section uk-flex uk-flex-middle">
        <div class="uk-container">

            <div class="uk-text-center titulo">
                <h1><i>¡CELEBRAMOS 19 AÑOS CONTIGO!</i></h1>
                <p>Regístrate y participa por premios y beneficios exclusivos</p>
            </div>

            <div class="uk-grid-large uk-child-width-1-2@m uk-flex-middle reverso" uk-grid>
                <div class="margin-reverse">
                    <form id="form-postulacion" class="uk-form-stacked uk-light">
                        @csrf
                        <div class="uk-margin">
                            <label class="uk-form-label">Nombres completos</label>
                            <input class="uk-input" id="nombres" type="text" placeholder="Tu nombre completo">
                        </div>
                        <div class="uk-margin">
                            <label class="uk-form-label">Correo electrónico</label>
                            <input class="uk-input" id="email" type="email" placeholder="tunombre@ejemplo.com">
                        </div>
                        <div class="uk-margin">
                            <label class="uk-form-label">Número de celular</label>
                            <input class="uk-input" id="celular" type="text" placeholder="Tu número">
                        </div>
                        <div class="uk-margin">
                            <label class="uk-form-label">Condición laboral</label>
                            <select class="uk-select" id="condicion_laboral">
                                <option value="" disabled selected>Seleccione...</option>
                                <option value="Ascenso">Nombrado</option>
                                <option value="Nombramiento">Contratado</option>
                            </select>
                        </div>
                        <div class="uk-margin uk-text-small">
                            <label class="etiqueta"><input class="uk-checkbox" type="checkbox" id="acepto"> 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></label>
                        </div>
                        <button type="submit" class="uk-button uk-button-large uk-width-1-1 gold-btn"><i>ENTRAR AL
                                SORTEO</i> <span uk-icon="arrow-right"></span></button>
                    </form>
                </div>

                <div class="uk-text-center imagen-premios">
                    <img src="{{ asset('assets/img/landinganiversario/premios.png') }}" alt="Premios"
                        class="uk-animation-shake">
                </div>
            </div>

            <div class="uk-margin-large-top uk-text-center parte2">
                <h3><i> PREMIOS DE NUESTRO 19° ANIVERSARIO</i></h3>
                <p>Celebramos 19 años impulsando la formación docente… y queremos premiar a nuestra comunidad.</p>

                <div class="carousel-container">
                    <button class="carousel-arrow" id="prevBtn">❮</button>

                    <div class="carousel-wrapper">
                        <div class="carousel-track" id="track">
                            <div class="carousel-item">
                                <div class="prize-box">
                                    <div>
                                        <h4 class="uk-text-bold">4 KITS <br>GRUPO AUGE</h4>
                                        <p>- MERCH OFICIAL DEL GRUPO AUGE</p>
                                    </div>
                                    <img src="{{ asset('assets/img/landinganiversario/premio2.png') }}" alt="Kit">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="prize-box">
                                    <div>
                                        <h4 class="uk-text-bold">2 BECAS ACADÉMICAS</h4>
                                        <p>- GRUPO AUGE</p>
                                    </div>
                                    <img src="{{ asset('assets/img/landinganiversario/premio1.png') }}" alt="Beca">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="prize-box">
                                    <div>
                                        <h4 class="uk-text-bold">2 ESCUELA DE PADRES </h4>
                                        <p>- Sadith Avellaneda</p>
                                    </div>
                                    <img src="{{ asset('assets/img/landinganiversario/premio3.png') }}" alt="Kit">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="prize-box">
                                    <div>
                                        <h4 class="uk-text-bold">2 Libros DE PEDAGOGÍA</h4>
                                        <p>- Mg. Erox Quesquen</p>
                                    </div>
                                    <img src="{{ asset('assets/img/landinganiversario/premio4.png') }}" alt="Beca">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="prize-box">
                                    <div>
                                        <h4 class="uk-text-bold">2 Libros Crianza en
                                            la Era Digital</h4>
                                        <p>- Sadith Avellaneda</p>
                                    </div>

                                    <img src="{{ asset('assets/img/landinganiversario/premio5.png') }}" alt="Kit">
                                </div>
                            </div>
                        </div>
                    </div>

                    <button class="carousel-arrow" id="nextBtn">❯</button>
                </div>
            </div>

            <div class="uk-text-center uk-margin-large-top parte2">
                <p>Completa tu registro y accede a premios + descuentos especiales.</p>
                <h3><i> Últimos días para participar en nuestro 19° Aniversario</i></h3>
                <button class="uk-button uk-button-large gold-btn gold-btn1 uk-margin-top">PARTICIPAR AHORA <span
                        uk-icon="arrow-right"></span></button>

            </div>

        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const track = document.getElementById('track');
            const nextBtn = document.getElementById('nextBtn');
            const prevBtn = document.getElementById('prevBtn');
            const items = document.querySelectorAll('.carousel-item');
            let index = 0;

            function updateCarousel() {
                // En móviles (ancho <= 768) el gap es 0 por diseño flex: 0 0 100%
                const gap = window.innerWidth > 768 ? 20 : 0;
                const itemWidth = items[0].offsetWidth + gap;
                track.style.transform = `translateX(-${index * itemWidth}px)`;
            }

            nextBtn.addEventListener('click', () => {
                const visibleItems = window.innerWidth > 768 ? 2 : 1;
                if (index < items.length - visibleItems) {
                    index++;
                } else {
                    index = 0;
                }
                updateCarousel();
            });

            prevBtn.addEventListener('click', () => {
                const visibleItems = window.innerWidth > 768 ? 2 : 1;
                if (index > 0) {
                    index--;
                } else {
                    index = items.length - visibleItems;
                }
                updateCarousel();
            });

            window.addEventListener('resize', () => {
                index = 0;
                updateCarousel();
            });

            // Llamada inicial para asegurar posición
            updateCarousel();
        });
    </script>

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

                // Validar formato del celular (solo números)
                const soloNumeros = celular.replace(/\D/g, '');
                if (!(soloNumeros.length === 9 || soloNumeros.length === 11)) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Celular inválido',
                        text: 'El celular debe tener 9 dígitos (Perú) o 11 dígitos (con código 51)',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Entendido'
                    });
                    return;
                }

                // Enviar datos vía AJAX
                $.ajax({
                    url: "{{ route('landinganiversario.registro') }}",
                    method: "POST",
                    data: {
                        _token: $('input[name="_token"]').val(),
                        nombres: nombres,
                        email: email,
                        celular: soloNumeros,
                        condicion_laboral: $('#condicion_laboral').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();
                            // Redirige a la página final
                            window.location.href =
                                "{{ route('landinganiversario.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