@extends('layout.master')

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

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/convocatoria.css') }}" />
@endsection

@section('content')

    <main class="page-main">
        <div class="uk-grid" data-uk-grid>
            <div class="uk-width-3-3@l">

                <div class="section_con_1 container">
                    <img src="{{ url('/assets/img/convocatoria/portada.png') }}" alt="" class="pc_image">
                    <img src="{{ url('/assets/img/convocatoria/portada_movil.png') }}" alt="" class="mobil_image">
                    <div class="section_conv_cont uk-grid uk-child-width-1-2@s">
                        <div class="section_con_11">
                            <div class="text-port">
                                <h1 class="uk-heading-medium">Tu oportunidad está aquí</h1>
                                <hr class="uk-divider-small">
                                <h4 class="uk-text-lead">Forma parte de nuestra familia</h4>
                            </div>
                        </div>

                        <div class="section_con_12">
                            <div class="form-container">
                                <h1>Regístrate para más información</h1>
                                <form id="form-postulacion" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input class="uk-input" type="text" id="nombres" name="nombres"
                                        placeholder="Nombres y Apellidos*" required>
                                    {{-- <input class="uk-input" type="text" id="apellidos" name="apellidos" placeholder="Apellidos*" required> --}}
                                    <input class="uk-input" type="email" id="email" name="email"
                                        placeholder="E-mail*" required>
                                    <input class="uk-input" type="tel" id="celular" name="celular"
                                        placeholder="Número de celular*" required>
                                    <select class="uk-select" id="area_id" name="area_id" required>
                                        <option value="" selected disabled>Selecciona tu área de interés</option>
                                        @foreach ($areas as $area)
                                            <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                                        @endforeach
                                    </select>


                                    <div class="file-upload">
                                        <p class="cvvvv">Curriculum Vitae</p>
                                        <p>Tipos de archivos admitidos: DOCX, PDF, imagen y texto</p>
                                        <label for="cv">Curriculum Vitae</label>
                                        <input type="file" id="cv" name="cv"
                                            accept=".docx, .pdf, image/*, text/*">
                                    </div>
                                    <label style="display: flex; align-items: flex-start; margin:10px 0">
                                        <input class="uk-checkbox" type="checkbox" name="terms" required
                                            style="margin: 2px 10px 0 0;">
                                        <span style="display: inline-block;">
                                            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>
                                    <button type="submit">Enviar</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="slideprincipal">
                    <div class="section_nos_3 uk-container">
                        <h1 class="uk-heading-medium uk-text-center">¡Encuentra tu próximo empleo!</h1>
                        <h4 class="uk-text-lead uk-text-center">Explora las ofertas laborales que tenemos para ti</h4>

                        <div class="uk-slider-container uk-light" uk-slider="autoplay: true; autoplay-interval: 8000">
                            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
                                <ul
                                    class="uk-slider-items uk-grid uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-3@l">
                                    <!-- Job 1 -->
                                    @foreach ($areas as $area)
                                        <li>
                                            <div class="job-card">
                                                <a href="{{ url('detalleconvocatoria/' . $area->title_rewrite) }}">
                                                    <img class="uk-width-1-1"
                                                        src="{{ env('URL_ARCHIVOS') . '/images/areas_trabajo/' . $area->baner_slider }}"
                                                        alt="{{ $area->nombre }}">
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>

                        <!-- Paginación con puntitos -->
                        <ul class="uk-dotnav uk-flex-center uk-margin">
                            @foreach ($areas as $index => $area)
                                <li uk-slider-item="{{ $index }}"><a href="#"></a></li>
                            @endforeach
                        </ul>


                    </div>
                </div>


                <div class="twocolor container ">
                    <div class="uk-container fondito">
                        <img src="{{ url('/assets/img/convocatoria/buho.png') }}" alt="">
                        <div class="section_nos_4 ">

                            <!-- Novedades 1 -->
                            <div class="novedades1 custom-5-12">
                                <h1 class="uk-heading-medium">¡Suscríbete y descubre las novedades de Augito!</h1>
                                <h5 class="uk-text-meta">
                                    Y entérate primero de las últimas oportunidades laborales que tenemos para ti.
                                </h5>
                            </div>

                            <!-- Novedades 2 -->
                            <div class="novedades2 custom-7-12">
                                <form class="formsubcri" id="form-suscripcion" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <!-- Campo de correo: 8 columnas -->
                                    <div class="custom-8-12">
                                        <input class="uk-input" type="email" name="email" placeholder="Tu correo"
                                            required>
                                        <label class="uk-margin-small-top">
                                            <input class="uk-checkbox" type="checkbox" name="terms" required>
                                            <span>
                                                Acepto las <a href="#">políticas de privacidad</a> y los
                                                <a href="#">términos y condiciones</a>
                                            </span>
                                        </label>
                                    </div>

                                    <!-- Botón: 4 columnas -->
                                    <div class="custom-4-12">
                                        <button class="uk-button uk-button-primary uk-width-1-1"
                                            type="submit">Suscribirme</button>
                                    </div>
                                </form>

                            </div>



                        </div>
                    </div>


                </div>



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

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('css/jszip.min.js') }}"></script>



    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const slider = UIkit.slider(document.querySelector('[uk-slider]'));

            // Manejar clics en los puntitos
            document.querySelectorAll('.uk-dotnav li').forEach((dot) => {
                dot.addEventListener('click', function(event) {
                    event.preventDefault(); // Prevenir el comportamiento de enlace
                    const index = this.getAttribute('uk-slider-item');
                    slider.show(index); // Mostrar el slide correspondiente
                });
            });
        });
    </script>




    <script>
        document.getElementById('cv').addEventListener('change', function() {
            var fileName = document.getElementById('cv').value.split('\\').pop();
            document.querySelector('.file-upload label').textContent = fileName ? 'Archivo: ' + fileName :
                'Elegir archivo';
        });
    </script>


    <script>
        $('#form-postulacion').on('submit', function(e) {
            e.preventDefault(); // Prevenir el envío estándar del formulario

            let formData = new FormData(this); // Recoger todos los datos del formulario

            $.ajax({
                url: '{{ route('postulacion.store') }}', // Ruta configurada en Laravel
                type: 'POST',
                data: formData,
                processData: false, // Necesario para enviar datos como FormData
                contentType: false, // No establecer content-type automáticamente
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}' // Token CSRF para seguridad
                },
                success: function(response) {
                    // Mostrar mensaje de éxito con SweetAlert2
                    Swal.fire({
                        icon: 'success',
                        title: '¡Registro exitoso!',
                        text: 'Gracias por postular, pronto nos pondremos en contacto.',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        // Opcional: Recargar la página o reiniciar el formulario
                        $('#form-postulacion')[0].reset(); // Reinicia el formulario
                        $('#cv').val(''); // Limpia específicamente el campo de archivo

                        // Reinicia el texto de la etiqueta
                        document.querySelector('.file-upload label').textContent = 'Elegir archivo';
                    });
                },
                error: function(response) {
                    let errors = response.responseJSON.errors;
                    let errorMessage = '<ul>';
                    for (const key in errors) {
                        if (errors.hasOwnProperty(key)) {
                            errorMessage += '<li>' + errors[key][0] + '</li>';
                        }
                    }
                    errorMessage += '</ul>';
                    UIkit.modal.alert('<h2>Error en el Registro</h2>' + errorMessage);
                }
            });
        });


        $('#form-suscripcion').on('submit', function(e) {
        e.preventDefault(); // Prevenir el envío estándar del formulario

        let formData = new FormData(this); // Recoger todos los datos del formulario

        $.ajax({
            url: '{{ route('suscripcion.store') }}', // Ruta configurada en Laravel
            type: 'POST',
            data: formData,
            processData: false, // Necesario para enviar datos como FormData
            contentType: false, // No establecer content-type automáticamente
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // Token CSRF para seguridad
            },
            success: function(response) {
                // Mostrar mensaje de éxito con SweetAlert2
                Swal.fire({
                    icon: 'success',
                    title: '¡Suscripción exitosa!',
                    text: 'Gracias por suscribirte, pronto recibirás noticias nuestras.',
                    timer: 2000,
                    showConfirmButton: false
                }).then(function() {
                    // Reiniciar el formulario
                    $('#form-suscripcion')[0].reset();
                });
            },
            error: function(response) {
                let errors = response.responseJSON.errors;
                let errorMessage = '<ul>';
                for (const key in errors) {
                    if (errors.hasOwnProperty(key)) {
                        errorMessage += '<li>' + errors[key][0] + '</li>';
                    }
                }
                errorMessage += '</ul>';
                UIkit.modal.alert('<h2>Error en la Suscripción</h2>' + errorMessage);
            }
        });
    });
    </script>
@endsection