@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" uk-height-viewport>
        <div class="uk-container uk-text-center">

            <div class="titulo-final">
                <h1>¡Registro Confirmado, Docente!</h1>
                <p>Ya estás participando en el Sorteo 19° Aniversario de Grupo AUGE. Gracias por ser parte de nuestra
                    comunidad.
                    En los próximos días anunciaremos a los ganadores oficialmente.</p>
            </div>

            <div class="uk-text-center imagen-premios-final">
                <img src="{{ asset('assets/img/landinganiversario/premios.png') }}" alt="Premios" class="uk-animation-shake">
            </div>
            <p class="texto-secundario">Síguenos en nuestras redes</p>
            <div class="div-redes">
                <div class="div-red">
                    <a href="https://www.facebook.com/educaauge" target="_blank" class="uk-button-redes btnComunidad">
                        <img src="{{ asset('assets/img/landing/facebook.png') }}" alt=""> @Grupo AUGE
                    </a>
                </div>
                <div class="div-red">
                    <a href="https://www.tiktok.com/@educaauge" target="_blank" class="uk-button-redes btnComunidad">
                        <img src="{{ asset('assets/img/landing/tiktok.png') }}" alt=""> @educaauge
                    </a>
                </div>
                <div class="div-red">
                    <a href="https://www.youtube.com/@augeeduca" target="_blank" class="uk-button-redes btnComunidad">
                        <img src="{{ asset('assets/img/landing/youtube.png') }}" alt=""> @augeeduca
                    </a>
                </div>

                <div class="div-red">
                    <a href="https://www.instagram.com/auge_peru/" target="_blank" class="uk-button-redes btnComunidad">
                        <img src="{{ asset('assets/img/landing/instagram.png') }}" alt=""> @auge_peru
                    </a>
                </div>
            </div>

            <div class="contact-banner">
                <p class="uk-margin-remove">
                    Si tienes algún problema, escríbenos a <a
                        href="mailto:informes@educaauge.com">informes@educaauge.com</a> y te ayudaremos en breve.
                    También puedes comunicarte por WhatsApp al <a href="https://wa.me/51957668571" target="_blank">+51 957
                        668 571</a> o <a href="https://wa.me/51912361023" target="_blank">+51 912 361 023</a>,
                    o llamarnos a nuestro Call Center: <strong>01 709 7855</strong>.
                </p>
            </div>

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