{% extends 'base.html.twig' %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('cronograma_entrevistas') }}"> Cronograma </a></li>
        {% set fecha = cronograma.fechaEntrevista %}
        <li><a class="active">Entrevista del {{fecha|format_datetime(pattern='EEEE', timezone='America/Argentina/Buenos_Aires')|capitalize ~ ' ' ~ fecha|date('d/m/Y') }}</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left icono-primario identidad-color-text">today</i>
    {% set fecha = cronograma.fechaEntrevista %}
    <h4 style="margin-top: 12px;">Entrevista del {{ fecha|format_datetime(pattern='EEEE', timezone='America/Argentina/Buenos_Aires')|capitalize ~ ' ' ~ fecha|date('d/m/Y') }}
        {% set color = constant('App\\Entity\\Entrevistas\\CronogramaEntrevistas::VIEW_ESTADO')[cronograma.estado]['color'] %}
        <span style="margin-top: 15px;margin-left: 5px;"> 
            <i><sub style="color:{{color}}">
            { {{ constant('App\\Entity\\Entrevistas\\CronogramaEntrevistas::VIEW_ESTADO')[cronograma.estado]['show_name'] }} }
            </sub></i>
        </span>
    </h4>
    <blockquote>
        <h5> {{ cronograma.cargo }} 
        {% if cronograma.territorialidad is not null %} 
        - {{ cronograma.territorialidad }}</h5>    
        {% endif %}</h5>
    </blockquote>
    {# Videos de lecturas #}
    {% if cronograma.lecturaNotas and cronograma.lecturaNotas.estado == 'Publicado' %}
        <h6> 
            {% if cronograma.lecturaNotas.video1 %}  
                <a href="{{cronograma.lecturaNotas.video1}}"> 
                <i class="material-icons">voice_chat</i> Lectura de Notas - Video 1 
                </a> &nbsp;&nbsp;&nbsp;
               
            {% endif %}
            {% if cronograma.lecturaNotas.video2 %}
                <a href="{{cronograma.lecturaNotas.video2}}"> 
                  <i class="material-icons">voice_chat</i> Lectura de Notas - Video 2 
                </a>  &nbsp;&nbsp;&nbsp;
            {% endif %}
            {% if cronograma.lecturaNotas.video3 %}
                <a href="{{cronograma.lecturaNotas.video3}}"> 
                  <i class="material-icons">voice_chat</i> Lectura de Notas - Video 3 
                </a>  &nbsp;&nbsp;&nbsp;
            {% endif %}
        </h6>
    {% endif %}
{% endblock  %}

{% block titulo_acciones_body %}
    {% if is_granted('ROLE_ENTREVISTAS_ADMIN') %}
        {% if (cronograma.estado == 'ResultadosPublicados') or (cronograma.lecturaNotas and cronograma.lecturaNotas.estado == 'Publicado') %}
            {% if cronograma.lecturaNotas and cronograma.lecturaNotas.estado == 'Publicado' %}
                <button class="btn convocatoria darken-2 waves-effect waves-light col s12" style="margin-top:6%;" onclick="clickModificar(event)">
                    <i class="material-icons medium right">add</i>
                    <i class="material-icons medium right">how_to_reg</i>
                    Modificar
                </button>
            {% else %}
                <a href="{{ path('cronograma_entrevistas_resultado_despublicar', {'idView': cronograma.idView }) }}" class="btn convocatoria darken-2 waves-effect waves-light col s12" style="margin-top:6%;">
                    <i class="material-icons medium right">add</i>
                    <i class="material-icons medium right">how_to_reg</i>
                    Despublicar y Modificar
                </a>
            {% endif %}
        {% elseif (cronograma.estado != 'WebPublicado') %}
            <a id="edit" href="{{ path('cronograma_entrevistas_edit', {'idView': cronograma.idView }) }}" 
                class="btn oscuro darken-2 waves-effect waves-light col s12"
                style="margin-top: 12px; float:right">
                <i class="material-icons right">edit</i>
                <i class="material-icons right">today</i>
                Editar Cronograma
            </a>
        {% endif %}
        <br><br><br>
    {% endif %}
{% endblock %}

{% block javascripts_base %}
    function clickEliminar(e) { 
        $url_eliminar=e.currentTarget.dataset.url;
        var $li = $(e.currentTarget.closest('li'));
        swal({
            title: "Eliminar",
            text: "¿Está seguro que quiere eliminar este detalle de Entrevista?",
            icon: "warning",
            buttons: true,
            })
            .then((aceptar) => {
                if (aceptar) {
                    $.ajax({
                        url: $url_eliminar,
                        method: 'POST',
                        success: function (data) {
                            M.toast({html: 'Se eliminó el detalle con éxito'});
                            $li.remove();
                        },
                        error: function (error) {
                            swal({
                                icon: 'error',
                                title: 'Error',
                                text:  error.getResponseHeader('mensaje') ?  error.getResponseHeader('mensaje').replaceAll(".", ".\n").replaceAll("&atilde", "á") : 'Error del servidor, intente más tarde.',
                            });
                        },
                        complete: function(html) {
                        }
                    });
                } 
        });
    }

    function clickEliminarPrimero(e) {
        $url_eliminar=e.currentTarget.dataset.url;
        var $lista = $(e.currentTarget).parents("#listaDetalles").children(); 
        var $texto="¿Está seguro que quiere eliminar este detalle de Entrevista? En consecuencia se eliminarán las demás notas cargadas para el postulante";
        {% if cronograma.lecturaNotas %}
            if ($('ul > li.avatar').length == 1) {
                $texto="¿Está seguro que quiere eliminar este detalle de Entrevista? En consecuencia se eliminarán las demás notas cargadas para el postulante y también la Lectura de Notas asociada."
            }
        {% endif %}
        swal({
            title: "Eliminar",
            text: $texto,
            icon: "warning",
            buttons: true,
            })
            .then((aceptar) => {
                if (aceptar) {
                    $.ajax({
                        url: $url_eliminar,
                        method: 'POST',
                        success: function (data) {
                            M.toast({html: 'Se eliminaron las notas con éxito'});
                            var $div =$(e.target).parents(".collapsible-body").find("i")[0].closest("div");
                            var $anchor = $(e.target).parents(".collapsible-body").find("i")[0].closest("a");
                            var cardListado=$lista.parents('.collapsible-body').find('.card.card-default');
                            if ($anchor != null){
                                $anchor.remove();
                                $($div).html('<a class="waves-effect waves-light btn-small grey"><i class="material-icons">voice_chat</i> Sin cargar</a>');  
                               
                            } else {
                                $div.children[2].remove();
                            }
                            $(e.target).parents(".collapsible-body").siblings(".collapsible-header").find('button').prop('disabled',false);
                            $lista.remove();
                            cardListado.hide();
                        },
                        error: function (error) {
                            swal({
                                icon: 'error',
                                title: 'Error',
                                text:  error.getResponseHeader('mensaje') ?  error.getResponseHeader('mensaje').replaceAll(".", ".\n").replaceAll("&atilde", "á") : 'Error del servidor, intente más tarde.',
                            });
                        },
                        complete: function(html) {
                        }
                    });
                } 
        });
    }

     function clickEliminarPostulante(e) {
        e.stopPropagation();
        swal({
            title: "Eliminar",
            text: "¿Está seguro que quiere eliminar este postulante de la Entrevista? En consecuencia se eliminarán las demás notas cargadas para el postulante",
            icon: "warning",
            buttons: true,
            })
            .then((aceptar) => {
                if (aceptar) {
                    $url_eliminar=e.target.parentElement.dataset.url;
                    var data = {};
                    data['confirmacion'] = true;
                    $.ajax({
                        url: $url_eliminar,
                        method: 'POST',
                        data: data,
                        success: function (data) {
                            $(e.target).parents('li').remove();
                        },
                        error: function (error) {
                            swal({
                                icon: 'error',
                                title: 'Error',
                                text:  error.getResponseHeader('mensaje') ?  error.getResponseHeader('mensaje').replaceAll(".", ".\n").replaceAll("&atilde", "á") : 'Error del servidor, intente más tarde.',
                            });
                        },
                        complete: function(html) {
                        }
                    });
                } 
        });
    }

    $('#modalResultado').on('keypress', function(e) {
        // Verifica si la tecla presionada es Enter
        if (e.which === 13) {
            // Previene el comportamiento predeterminado (submit)
            e.preventDefault();
            // Devuelve false para detener la propagación del evento
            return false;
        }
    });

    function clickModificar(e) {
        swal({
            title: "Despublicar y Modificar",
            text: "Usted no puede modificar el Resultado ya que tiene asociada una Lectura de Notas publicada.",
            icon: "warning",
            buttons: {
                confirm: {
                    text: "OK",
                    value: true,
                    visible: true,
                    className: "btn btn-success",
                    closeModal: true
                }
            },
        });
    }
{% endblock %}

{% block js_document_ready %}
{% endblock %}

{% block javascripts %}
    {{ parent()}}
    <script>
        var botonClick=null;
        $(".modalResultado").on("click", function (event) {
            event.stopPropagation();
            event.preventDefault();
            botonClick = event.currentTarget;
            //Hago una solicitud AJAX al controller
            $.ajax({
                url: event.currentTarget.dataset.url ,
                method: 'GET',
                success: function (data) {
                    // Insertor el contenido en el div del modal
                    $("#modalResultado .modal-content").html(data);
                    $("#modalResultado").modal('open');
                    $("select").formSelect();
                },
                error: function (error) {
                    swal({
                        title: "Error",
                        text: error.responseText,
                        icon: "warning",
                        //buttons: true,
                        })
                    //console.log(error);
                }
            });
        });

        function handleImageError(img) {
            var defaultImageUrl = "{{ asset('img/user.jpeg', 'portal') }}";
            img.src = defaultImageUrl;
        }

        function botonBuscar(event){
            var textoNombre = $('#input_nombre_apellido').val().toLowerCase().trim();
            var textoDNI = $('#input_dni').val().trim();
            
            const listItems = document.querySelectorAll('.collapsible-header');
            listItems.forEach(function(li) {
                const nameInHeader = li.textContent.trim().toLowerCase();
                const dniInContent = $(li).siblings('.collapsible-body').find('p:contains("DNI")').text();
                var nombreApellidoMatch = nameInHeader.includes(textoNombre);
                var dniMatch = dniInContent.includes(textoDNI);
                if (nombreApellidoMatch && dniMatch) {
                    $(li).parent().show();
                } else {
                    $(li).parent().hide();
                }
            });
            $('#boton_limpiar').show();
        }

        function botonLimpiar(event){
            const listItems = document.querySelectorAll('.collapsible-header');
            listItems.forEach(function(li) {
                $(li).parent().show();
            });
            $('#input_nombre_apellido').val(null);
            $('#input_nombre_apellido').siblings('label').removeClass('active');
            $('#input_nombre_apellido').removeClass('valid');
            $('#input_dni').val(null);
            $('#input_dni').siblings('label').removeClass('active');
            $('#input_dni').removeClass('valid invalid');
            $('#boton_limpiar').hide();
        }
    </script>
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-content">
            <div class="row">   
                <div class="col l12 m10 s10">
                    <div class="input-field col l3 m6 s6">
                        <input id="input_nombre_apellido" type="text" class="validate">
                        <label for="input_nombre_apellido">Nombre o Apellido</label>
                    </div>

                    <div class="input-field col l3 m6 s6">
                        <input id="input_dni" type="text" class="validate">
                        <label for="input_dni">DNI</label>
                    </div>

                    <div class="input-field col m2 s12 l2">
                        <button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" onclick="botonBuscar(event)">Buscar<i class="material-icons right">search</i></button>
                    </div>

                    <div class="input-field col m2 s12 l2">
                        <button id="boton_limpiar" class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="button" style="display: none;" onclick="botonLimpiar(event)">Limpiar<i class="material-icons right">close</i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col l12 m10 s10">
            {% for indice, postulante in postulantes %}
                <ul class="collapsible popout">
                    <li class="active">
                        <div class="collapsible-header"> 
                            <i class="material-icons left identidad-color-text">person</i>
                            {{postulante['presentacionAntecedentes'].datosPersonales.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}{{postulante['presentacionAntecedentes'].datosPersonales.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}
                            {% if ((cronograma.estado != 'ResultadosPublicados') and (cronograma.estado != 'WebPublicado')) and (cronograma.lecturaNotas is null or cronograma.lecturaNotas.estado != 'Publicado') %}
                                <button type="button" class="waves-effect waves-light btn btn-small modalResultado tooltipped" style="margin-left:auto;" name="action" data-position="top" data-tooltip="Agregar nota" 
                                    {{ postulante['form'].vars.value.presente is same as(false) ? 'disabled' : ''}} 
                                    data-url="{{path('cronograma_new_resultado_modal', { 'idView': postulante['presentacionAntecedentes'].idView , 'cr_id': cronograma.idView }) }}"> 
                                    Agregar <i class="material-icons right">add</i>
                                </button>
                                <a type="button" onclick="clickEliminarPostulante(event)" data-url="{{path('eliminar_postulante_entrevista', { 'idViewCronograma': cronograma.idView, 'idViewRia': postulante['presentacionAntecedentes'].idView}) }}" title="Eliminar Postulante">
                                    <i class="material-icons right red-text">delete</i>
                                </a>
                            {% endif %}
                        </div>
                        <div class="collapsible-body" style="display: block;">
                            <div class="row">
                                <h5>{{postulante['presentacionAntecedentes'].datosPersonales.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}} {{postulante['presentacionAntecedentes'].datosPersonales.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}</h5>
                            </div>
                            <div class="row">
                                <div class="col s12 l3 m3 ">
                                    <div class="card">
                                        <div class="card-image">
                                            {# <img class="responsive-img small" src="{{postulante['imagen']}}" style="height: 200px; width: 200px;" onerror="handleImageError(this)"> #}
                                            <img src="{{postulante['imagen']}}" onerror="handleImageError(this)">
                                            <span class="card-title"> {{postulante['presentacionAntecedentes'].datosPersonales.nombres|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}} {{postulante['presentacionAntecedentes'].datosPersonales.apellidos|split(' ')|reduce((carry, v) => carry ~ ' ' ~ v|capitalize)}}</span>
                                        </div>
                                        <div class="card-content">
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 l9 m9">
                                    <div class="row">
                                        <div class="col s12 l6 m6">
                                            <blockquote style="border-left:5px solid #41b0e4; margin: 20px 0; padding-left: 1.5 rem;">
                                                <p style="margin-bottom: 1%;">DNI {{postulante['presentacionAntecedentes'].datosPersonales.dni}} - 
                                                    {% set genero = postulante['presentacionAntecedentes'].datosPersonales.genero %}
                                                    {% if genero == "F" %}
                                                        Femenino
                                                    {% else %}
                                                        Masculino
                                                    {% endif %}
                                                </p>
                                                <p style="margin-bottom: 1%;">
                                                    Nacimiento: {{ postulante['presentacionAntecedentes'].datosPersonales.fechaNacimiento|date('d/m/Y')}} - {{postulante['presentacionAntecedentes'].datosPersonales.nacionalidad}}
                                                </p>
                                                <p style="margin-bottom: 1%;">
                                                    <strong>Domicilio actual:</strong> 
                                                    {{postulante['presentacionAntecedentes'].datosPersonales.domCalle}} nro {{postulante['presentacionAntecedentes'].datosPersonales.domNumero}}, {{postulante['presentacionAntecedentes'].datosPersonales.domLocalidad|capitalize}} ({{postulante['presentacionAntecedentes'].datosPersonales.domCodigoPostal}}), 
                                                    {% if postulante['presentacionAntecedentes'].datosPersonales.residenciaBuenosAires %}
                                                        Prov. de Buenos Aires.
                                                    {% endif %}
                                                </p>
                                                <p style="margin-bottom: 1%;"><a href="mailto:{{postulante['presentacionAntecedentes'].datosPersonales.email}}">
                                                    {{postulante['presentacionAntecedentes'].datosPersonales.email}}</a>
                                                </p>
                                                <p style="margin-bottom: 1%;">
                                                    <a href="tel:{{postulante['presentacionAntecedentes'].datosPersonales.telefono}}">{{postulante['presentacionAntecedentes'].datosPersonales.telefono}}</a>
                                                </p>
                                            </blockquote>
                                            <br><br>
                                            <div>
                                                {% if postulante['resultado'] %}
                                                    {% if postulante['resultado'].enlaceGrabacion %}
                                                        <a class="waves-effect waves-light btn-small cyan" href="{{ postulante['resultado'].enlaceGrabacion }}" target="_blank">
                                                            <i class="material-icons entrevista">voice_chat</i> Ver Entrevista
                                                        </a> &nbsp;
                                                        {% if ((cronograma.estado != 'ResultadosPublicados') and (cronograma.estado != 'WebPublicado')) and (cronograma.lecturaNotas is null or cronograma.lecturaNotas.estado != 'Publicado') %}
                                                            <a type="button" class="modalResultado tooltipped" name="action" data-position="top" data-tooltip="Modificar enlace" 
                                                                data-url="{{path('cronograma_edit_enlace_modal', { 'idView': postulante['presentacionAntecedentes'].idView , 'cr_id': cronograma.idView }) }}"> 
                                                                <i class="material-icons">edit</i>  
                                                            </a>
                                                        {% endif %}
                                                    {% else %}
                                                        <a class="waves-effect waves-light btn-small grey">
                                                            <i class="material-icons">voice_chat</i> Sin cargar
                                                        </a> &nbsp;
                                                        {% if ((cronograma.estado != 'ResultadosPublicados') and (cronograma.estado != 'WebPublicado')) and (cronograma.lecturaNotas is null or cronograma.lecturaNotas.estado != 'Publicado') %}
                                                            {% if postulante['resultado'].id != null and postulante['resultado'].presente %}
                                                                <a type="button" class="modalResultado tooltipped" name="action" data-position="top" data-tooltip="Modificar enlace" data-url="{{path('cronograma_edit_enlace_modal', { 'idView': postulante['presentacionAntecedentes'].idView , 'cr_id': cronograma.idView }) }}"> 
                                                                    <i class="material-icons">edit</i>
                                                                </a>
                                                            {% endif %}
                                                        {% endif %}
                                                    {% endif %}
                                                {% endif %}
                                            </div>
                                        </div>
                                        <div class="col s12 l6 m6">
                                                <div class="card card-default cardListado" {{ postulante['resultado'].id ? '' : 'style="display:none;"' }}>
                                                    <div class="card-content">
                                                        <ul class="collection mb-0" id="listaDetalles">
                                                            {% for indice, detalle in postulante['resultado'].detalleResultados %}
                                                                {{ include('entrevistas/resultado_entrevistas/_liDetalleResultado.html.twig', {'detalle': detalle, 'cronograma': cronograma}) }}
                                                            {% else %}
                                                                {% if postulante['resultado'].presente is same as (false) %}
                                                                    {{ include('entrevistas/resultado_entrevistas/_liResultadoAusente.html.twig', {'resultado': postulante['resultado'], 'cronograma': cronograma}) }}
                                                                {% endif %}
                                                            {% endfor %}
                                                        </ul>
                                                    </div>
                                                </div>                                                
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            {% endfor %}
        </div>
    </div>
    
    <div class="col s12 l12">
        {% if (cronograma.estado == 'Borrador' or cronograma.estado == 'Publicado') %}
            <a class="limpiar btn green darken-2 waves-effect right waves-light" href="{{ path('cronograma_entrevistas_resultado_publicar', {'idView': cronograma.idView }) }}"> Publicar Resultado
                <i class="material-icons right">publish</i>
            </a>
        {% endif %}

        <a class="btn waves-effect waves-light left-align" href="javascript:history.back()">Volver
            <i class="material-icons right">undo</i>
        </a> 
    </div>
    
{% endblock %}

{% block dialogos_modales %}
    <div id="modalResultado" class="modal">
        <div class="modal-content">
            <!-- Acá se va a cargar el contenido del modal mediante AJAX -->
        </div>
    </div>
{% endblock %}