{% extends 'convocatorias/front_postulantes/base.html.twig' %}

{% block js_document_ready %}
    $('.registrarInscripcion').click(function (e) {
        //Se limpia el los departamentos elegidos
        var selector = '#{{ form.departamentosJudiciales.vars.id }} option';
        $(selector).prop("selected", false);
        var selectorEximidos = '#{{ form.departamentosJudicialesEximidos.vars.id }} option';
        $(selectorEximidos).prop("selected", false);
        $('.listadoSeleccion').empty();
        var botones = $('.ckb_selecionados');
        for (ckb of botones) {
            if ($(ckb).prop('checked')) {
                var id = $(ckb).val(); // Obtener el valor del checkbox
                var nombreDpto = $(ckb).data('dpto-nombre'); // Obtener el nombre del departamento
                var listItem = $('<li class="collection-item"></li>').text(nombreDpto).attr('data-id-dpto', id); // Crear el elemento <li> con el id y el nombre del departamento
                $('.listadoSeleccion').append(listItem); // Agregar el elemento a la lista
                var selector = '#{{ form.departamentosJudiciales.vars.id }} option[value="' + id + '"]';
                $(selector).prop("selected", true);
                // console.debug($(selector));
            }
        }
        if ($('.listadoSeleccion').children().length == 0)
        {
            swal({
                title: "Error",
                content: {
                    element: 'p',
                    attributes: {
                        innerHTML: 'Debe seleccionar al menos una opción de territorio para registrar su Solicitud',
                    },
                },
                icon: "error"
            });
        } else {
            if( {{examen.convocatoria.resolucionesVigentes|length }} > 0) {
                $('#modal0').modal('open');
            }
            else {
                $('#modal1').modal('open');
            }
        }
    });

    $('.selectRadio').click(function (e) {
        var ckb = $(this).find("input[type='checkbox']");
        ckb.prop('checked', !ckb.prop('checked'));
    });

    {% if not form.vars.valid %}
        {# $('#modal1').modal('open'); #}
        swal({
            title: "Error",
            content: {
                element: 'p',
                attributes: {
                    innerHTML: 'Debe leer y cumplir con los requisitos para registrar solicitud',
                },
            },
            icon: "error"
        });
    {% endif %}


    $('#continuarBtn').click(function(e) {
        var eximicion = $('input[name="eximir"]:checked').val();
        $('.msjNoCumple').hide();
        if (!eximicion) {
            alert('Seleccione una opción');
            e.preventDefault(); // Prevenir el comportamiento predeterminado del botón
        }
        else{
            // Realizar la redirección según el valor seleccionado
            if (eximicion === 'no') {
                $('#modal0').modal('close');
                $('#modal1').modal('open');
            } else {
                // Actualizar el campo oculto con el valor seleccionado
                
                $('input[name="inscripcion_dpto[resolucionSeleccionada]"]').val(eximicion);

                var configResolucion = $('input[name="inscripcion_dpto[resolucionSeleccionada]"]').val(); // Obtener el valor del input
                var url = "{{ path('app_territorios_aprobados_por_cargos', {'id': examen.cargo.id, 'configResolucion': 'REPLACE_RESOLUCION_ID'}) }}";
                url = url.replace('REPLACE_RESOLUCION_ID', configResolucion);
                $("#continuarBtn").attr("disabled", true);
                $ .ajax({
                type: "POST",
                url: url,
                success: function(response) {
                    // Manejo la respuesta del controlador
                    //console.log(response.territoriosAprobados)
                    // Iterar sobre los territorios aprobados
                    var cuentaAprobados = 0;
                    
                    response.territoriosAprobados.forEach(function(territorio) {
                        // Iterar sobre los elementos en la lista
                        $('.listadoSeleccion li').each(function() {
                            // Comparar el nombre del territorio aprobado con el texto del elemento de la lista
                            if ($(this).text().startsWith(territorio.territorio)) {
                                // Creo un botón para activar o desactivar el booleano asociado a este elemento
                                cuentaAprobados++;
                                var idExaminando = territorio.idExaminando;
                                $(this).attr('data-id-examinando', idExaminando);
                                var checkbox = $('<p><label><input type="checkbox" /><span>Solicitar Eximición</span></label></p>');
                                // Agregar el checkbox al elemento de la lista
                                $(this).append(checkbox);
                            }
                        });
                    });
                    // Si no se ha aprobado ningún territorio, mostrar el mensaje de que no cumple con las condiciones
                    if (cuentaAprobados === 0) {
                        $('.msjNoCumple').show();
                        $('#modal0').modal('close');
                        $('#modal1').modal('open');
                    }
                    else{
                        $('#modal0').modal('close');
                        $('#modal2').modal('open');
                    }
                    $("#continuarBtn").attr("disabled", false);

                },
                error: function(xhr, status, error) {
                    // Manejo errores
                    $("#continuarBtn").attr("disabled", false);
                    console.error(xhr.responseText);
                }
            }); 
            }
        }
    });

    {# // Evento click para el botón btnConfirmarInscripciones
    $('.btnConfirmarInscripciones').click(function (e) {
        e.preventDefault(); 

        // Creo un array para almacenar los checkboxes marcados de los territorios a eximir
        var checkboxesMarcados = [];

        var examinandos = [];

        // Recorro cada elemento <li> dentro de .listadoSeleccion
        $('.listadoSeleccion li').each(function() {
            // Si el checkbox dentro del <li> está marcado
            var checkbox = $(this).find("input[type='checkbox']");
            if (checkbox.prop('checked')) {
                // Si está marcado,me quedo el id
                var idDepartamento = $(this).data('id-dpto');
                checkboxesMarcados.push(idDepartamento); // Agregar el ID al array
            }
        });

        $('#modal2').modal('close');
        $('#modal1').modal('open');
        // Iterar sobre los elementos de la lista
        $('.listadoSeleccion li').each(function() {
            var idDpto = $(this).data('id-dpto'); // Obtener el data-id-dpto del elemento actual
             var idExaminando = $(this).data('id-examinando'); // Obtener el id-examinando del elemento actual 

            // Verificar si el idDpto está en checkboxesMarcados
            var encontrado = checkboxesMarcados.includes(idDpto);

            if (encontrado) {
                // Establecer el valor de form.departamentosJudicialesEximidos
                var id = $(this).data('id-dpto');
                var idExaminando = $(this).data('id-examinando');
                if (idExaminando) {  // Solo agrego si tiene un id válido
                    examinandos.push(idExaminando);
                }
                var selectorEximidos = '#{{ form.departamentosJudicialesEximidos.vars.id }} option[value="' + id + '"]';
                console.log(selectorEximidos);
                $(selectorEximidos).prop("selected", true);
                $(this).show().append('<span style="color:green";>Solicito mediante Eximición</span>');
                $(this).find('input[type="checkbox"]').parent().remove();
            } else {
                $(this).find('input[type="checkbox"]').parent().remove();
                $(this).find('p').remove();
                $(this).removeAttr('data-id-examinando');
            }
        });
            var inputHiddenSelector = '#{{ form.examinandosSeleccionados.vars.id }}';
            $(inputHiddenSelector).val(examinandos.join(',')); // Asigno los IDs al campo oculto
    }); #}

    // Evento click para el botón btnConfirmarInscripciones
$('.btnConfirmarInscripciones').click(function (e) {
    e.preventDefault();

    // Objeto para almacenar los departamentos seleccionados para cada examinando
    var examinandosYDepartamentos = {};

    // Array para almacenar los checkboxes marcados de los territorios a eximir
    var checkboxesMarcados = [];

    // Recorro cada elemento <li> dentro de .listadoSeleccion
    $('.listadoSeleccion li').each(function() {
        var checkbox = $(this).find("input[type='checkbox']");
        if (checkbox.prop('checked')) {
            var idDepartamento = $(this).data('id-dpto'); // Obtener el ID del departamento
            checkboxesMarcados.push(idDepartamento); // Agregar el ID al array

            // Obtener el ID del examinando
            var idExaminando = $(this).data('id-examinando');
            if (idExaminando) {
                // Inicializar el array para el examinando si no existe
                if (!examinandosYDepartamentos[idExaminando]) {
                    examinandosYDepartamentos[idExaminando] = [];
                }
                // Agregar el departamento al array de este examinando
                examinandosYDepartamentos[idExaminando].push(idDepartamento);
            }
        }
    });

    // Cerrar modal2 y abrir modal1
    $('#modal2').modal('close');
    $('#modal1').modal('open');

    // Crear el objeto donde se guardarán los examinandos y sus departamentos
    let examinandos = {};
    // Iterar sobre los elementos de la lista
    $('.listadoSeleccion li').each(function() {
        var idDpto = $(this).data('id-dpto'); // Obtener el data-id-dpto del elemento actual
        var idExaminando = $(this).data('id-examinando'); // Obtener el id-examinando del elemento actual

        // Verificar si el idDpto está en checkboxesMarcados
        var encontrado = checkboxesMarcados.includes(idDpto);

        if (encontrado) {
            // Establecer el valor de form.departamentosJudicialesEximidos
            var selectorEximidos = '#{{ form.departamentosJudicialesEximidos.vars.id }} option[value="' + idDpto + '"]';
            $(selectorEximidos).prop("selected", true); // Marcar el departamento como seleccionado

            // Mostrar mensaje de eximición
            $(this).show().append('<span style="color:green;">Solicito mediante Eximición</span>');
            $(this).find('input[type="checkbox"]').parent().remove(); // Remover checkbox

            // Solo agrupar si el idExaminando está definido
            if (idExaminando) {
                // Si aún no existe una entrada para este examinando, crear una nueva
                if (!examinandos[idExaminando]) {
                    examinandos[idExaminando] = [];
                }
                // Verificar si el idDpto ya está en el arreglo
                if (!examinandos[idExaminando].includes(idDpto)) {
                    // Agregar el idDpto al arreglo del examinando si no está ya
                    examinandos[idExaminando].push(idDpto);
                }
            }
        } else {
            // Si no está marcado, limpiar el elemento
            $(this).find('input[type="checkbox"]').parent().remove(); // Remover checkbox
            $(this).find('p').remove(); // Remover párrafo
            $(this).removeAttr('data-id-examinando'); // Limpiar data-id-examinando
        }
    });

    // Asignar el JSON generado al input hidden del formulario
    let inputHiddenSelector = '#{{ form.examinandosSeleccionados.vars.id }}';
    $(inputHiddenSelector).val(JSON.stringify(examinandos));


    });

    $('.btnGenerarInscripciones').click(function (e) {

        $('#formulario').submit();
    });


{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('js/init.js', 'postulantes') }}"></script>
{% endblock %}

{% block dialogos_modales %}

    <div id="modal0" class="modal">
        <div class="modal-content">
            <h4 class="center-align">Resoluciones</h4>
            <br>
            <h6 class= "center-align">Seleccione si quiere solicitar eximición por alguna de las resoluciones disponibles para esta convocatoria: 
            </h6>
            <form id="eximicionForm">
                <div class="container center-align">
                    <div class = "left-align" style="margin-left: 40%;">
                        {% for resolucionVigente in examen.convocatoria.resolucionesVigentes %} 
                            <p> 
                                <label>
                                    <input class="left-align" name="eximir" type="radio" value={{resolucionVigente.id }} />
                                    <span>{{resolucionVigente.resolucion }}</span> <a href = "{{resolucionVigente.resolucion.url }}" target="_blank">    (Descargar Resolución)</a>
                                </label>
                            </p>
                        {% endfor %}
                        <p>
                            <label>
                            <input class="left-align" name="eximir" type="radio"  value="no" />
                            <span>Ninguna</span>
                            </label>
                        </p>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <div class="container">
                <a href="#!" class="modal-close waves-effect waves-green btn left red">
                    <i class="material-icons right">highlight_off</i>
                    Cancelar
                </a>
                <button id="continuarBtn" class="waves-effect waves-green btn">
                    Continuar
                    <span class="material-icons">arrow_forward_ios</span>
                </button>
            </div>
        </div>
    </div>

    <div id="modal1" class="modal">
        {{ form_start(form, { 'attr' : { 'id' : 'formulario', 'novalidate' : 'novalidate' } }) }}
            <div class="modal-content">
                <h4 class="center-align">
                    Solicitud de Inscripción a Examen
                </h4>
                <br>
                <h6 class = "msjNoCumple" style= "display: none; background-color:#ffebee;">
                    No existen exámenes aprobados que permitan realizar una eximición para el/los territorios seleccionados.  
                </h6>
                <p>
                    Enviar solicitud de inscripción para el cargo de 
                </p>
                <h6>
                    {{ examen.cargo|upper }}
                </h6>
                {% if form.departamentosJudiciales is defined %}
                    {{ form_widget(form.departamentosJudiciales) }}
                {% endif %}
                <p></p>
                <ul class="collection with-header listadoSeleccion">
                    <li class="collection-header">
                        <h5>
                            {% if form.departamentosJudiciales is defined %}
                                En el o los departamentos judiciales:
                            {% else %}
                                En la Provincia de Buenos Aires
                            {% endif %}
                        </h5>
                    </li>
                </ul>
                {% if form.departamentosJudicialesEximidos is defined %}
                    {{ form_widget(form.departamentosJudicialesEximidos) }}
                    {{ form_widget(form.examinandosSeleccionados, { 'attr': { 'id': form.examinandosSeleccionados.vars.id } }) }}
                {% endif %}
                <p>
                    <label>
                        {{ form_widget(form.leido, { 'attr': { 'class': 'filled-in' } }) }}
                        <span>
                            He Leído y cumplo con los requisitos de la presente convocatoria.
                        </span>
                        <div class="red-text">
                            {{ form.leido.vars.errors }}
                        </div>
                    </label>
                </p>
                <span style="display: none;">
                    {{ form_widget(form.eximePorProvincia, { 'attr': { 'class': 'filled-in' } }) }}
                </span>
            </div>
            <div class="modal-footer">
                <div class="container">
                    <a href="#!" class="modal-close waves-effect waves-green btn  left red">
                        <i class="material-icons right">
                            highlight_off
                        </i>
                        Cancelar
                    </a>
                    <button class="waves-effect waves-green btn btnGenerarInscripciones">
                        Enviar solicitud 
                        <span class="material-icons">
                            arrow_forward_ios
                        </span>
                    </button>
                </div>
            </div>
        {{ form_end(form) }}
    </div>
    <div id="modal2" class="modal">
       
            <div class="modal-content">
                <h4 class="center-align">
                    Seleccione de que territorio desea eximirse
                </h4>
                <br>
                <p>
                    Para el/los territorio/s que pueda eximirse pero que no seleccione eximición, se generará una inscripción tradicional, para el cargo de 
                </p>
                <h6>
                    {{ examen.cargo|upper }}
                </h6>
                <p></p>
                <ul class="collection with-header listadoSeleccion">
                    <li class="collection-header">
                        <h5>
                            {% if form.departamentosJudiciales is defined %}
                                En el o los departamentos judiciales:
                            {% else %}
                                En la Provincia de Buenos Aires
                            {% endif %}
                        </h5>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <div class="container">
                    <a href="#!" class="modal-close waves-effect waves-green btn  left red">
                        <i class="material-icons right">
                            highlight_off
                        </i>
                        Cancelar
                    </a>
                    <button class="modal-close waves-effect waves-green btn btnConfirmarInscripciones">
                        Continuar
                        <span class="material-icons">
                            arrow_forward_ios
                        </span>
                    </button>
                </div>
            </div>
    </div>
{% endblock %}

{% block contenido_principal_titulo_int %}
    <i class="material-icons medium left identidad-color-text">
        campaign
    </i>

    <h4 style="margin-top: 12px;">
        Solicitud de Inscripción a Convocatoria 
    </h4>
{% endblock %}

{% block contenido_principal_cuerpo %}

    <div class="row">
        <div class=" localidades">
            <div class="card">
                <div class="card-content ">
                    <span class="card-title">
                        Solicitud Inscripción a Convocatoria de
                    </span>
                    <span class="card-subtitle">
                        {{ examen.cargo|upper }}
                    </span>
                    <p>
                        {% if form.departamentosJudiciales is defined %}
                            Seleccione uno o varios de los Departamentos Judiciales disponibles
                        {% else %}
                            Seleccione
                        {% endif %}
                    </p>
                    <br>
                    <div class="row">
                        {% block ic_inscripcion_seleccion %}{% endblock %}
                    </div>
                    {# <p> 
                    {% for resolucionVigente in examen.convocatoria.resolucionesVigentes %} 
                        {{resolucionVigente.resolucion }}
                    {% endfor %}
                    </p> #}
                </div>
                <div class="card-action">
                    <a href="{{ path('app_convocatorias_front_postulantes_cargos', { idView : examen.convocatoria.idView }) }}" class="btn">
                        Volver
                    </a>
                    {% if form.departamentosJudiciales is defined %}
                        <a href="#modal0" class="right btn registrarInscripcion">
                    {% else %}
                        <a href="#modal0" class="right btn modal-trigger">
                    {% endif %}
                            Registrar Solicitud
                        </a>
                </div>
            </div>
        </div>
    </div>   
{% endblock %}