@extends('layout.master')

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

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

@section('content')

    <main class="page-main">
        <div class="uk-grid" data-uk-grid>
            <div class="uk-width-3-3@l">
                <h1 class="uk-heading-medium uk-text-center titulodetalle">Vacante: {{ $area->nombre }}</h1>
                <div class="section_con_1 container">

                    <div class="section_conv_cont uk-child-width-1-2@s uk-container">
                        <div class="section_con_11">
                            <div class="requisitosmovil">
                                <div class="titulotop">
                                    <h4>REQUISITOS</h4>
                                </div>
                                <div class="requisitos">
                                    {!! $area->requisitos !!}

                                </div>

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

                                    <!-- Campo oculto para el ID del área de trabajo -->
                                    <input type="hidden" id="area_id" name="area_id" value="{{ $area->id }}">

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

                                    <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">Otras Ofertas Laborales</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 ($otras_areas as $otra_area)
                                        <li>
                                            <div class="job-card">
                                                <a href="{{ url('detalleconvocatoria/' . $otra_area->title_rewrite) }}">
                                                    <img class="uk-width-1-1"
                                                        src="{{ env('URL_ARCHIVOS') . '/images/areas_trabajo/' . $otra_area->baner_slider }}"
                                                        alt="{{ $otra_area->nombre }}">
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach


                                </ul>
                            </div>
                        </div>

                        <ul class="uk-dotnav uk-flex-center uk-margin">
                            @foreach ($otras_areas as $index => $otra_area)
                                <li uk-slider-item="{{ $index }}"><a href="#"></a></li>
                            @endforeach


                        </ul>

                    </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() {
                        // Reinicia el formulario
                        $('#form-postulacion')[0].reset();
                        $('#cv').val(''); // Limpia específicamente el campo de archivo
                        document.querySelector('.file-upload label').textContent =
                            'Elegir archivo';
                    });

                    // Redirigir después de 2 segundos
                    setTimeout(function() {
                        window.location.href = '{{url('/')}}'; // Redirige a la página principal
                    }, 2000); // Espera 2 segundos antes de redirigir
                },
                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);
                }
            });
        });
    </script>
@endsection