{% 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 %}
    <div class="col s12 l9">
        <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>
    </div>
    <br>
    <br>
{% endblock  %}

{% block titulo_acciones_body %}
{% endblock %}

{% block javascripts_base %}
    function clickEliminar(e) { 
        $url_eliminar=e.currentTarget.dataset.url;
        swal({
            title: "Eliminar",
            text: "¿Está seguro que quiere eliminar este detalle de Entrevista?",
            icon: "warning",
            buttons: true,
            })
            .then((aceptar) => {
            if (aceptar) {
                window.location.href = $url_eliminar;                        
            } 
        });
    }

    function clickEliminarPrimero(e) {
        $url_eliminar_primero=e.currentTarget.dataset.url;
        swal({
            title: "Eliminar",
            text: "¿Está seguro que quiere eliminar este detalle de Entrevista? En consecuencia se eliminarán las demás notas cargadas para el postulante",
            icon: "warning",
            buttons: true,
            })
            .then((aceptar) => {
            if (aceptar) {
                window.location.href = $url_eliminar_primero;                        
            } 
        });
    }

{% endblock %}

{% block js_document_ready %}
    {% if cronograma.estado == 'ResultadosPublicados' %}
        swal({
            title: "Edición de Resultado",
            text: "Si quiere continuar y editar el Resultado del Cronograma tiene que despublicarlo previamente.",
            icon: "warning",
            buttons: {
                cancel: "Cancelar",
                confirm: "Despublicar y Modificar"
            }
        })
        .then((aceptar) => {
            if (aceptar) {
                window.location.href = "{{ path('cronograma_entrevistas_resultado_despublicar', {'id': cronograma.id }) }}";
            } else {
                window.location.href = "{{ path('cronograma_entrevistas') }}";
            }
        });
    {% endif %}

$('.btn-presente').click(function (e) {
    // Encuentra el input (puede ser un conjunto de radio buttons o una lista desplegable)
     var input = $(this).find("input[type='radio']:checked");

    // Obtén el valor del radio button seleccionado
    var radioValue = input.val();
    
    // Encuentra el icono, el botón y el campo de nota dentro del contenedor
    var icon = $(this).find('i')[0];
    var boton = $(this)[0];
    var notaField = $(this).closest('tr').next().find('input[type="text"]');

    {# var notaField = $('#resultado_nota'); #}
    {# var notaField = $(this).closest('td').find('#resultado_nota');
    console.log(notaField); #}

    // Determina el próximo estado del checkbox y el valor asociado
    var nextState;
    var tooltipText;
    if (radioValue == 2 ) {
        nextState = 'true';
        tooltipText = 'Presente';
    } else if (radioValue == 0 ) {
        nextState = 'false';
        tooltipText = 'Ausente';
    } else {
        nextState = 'null';
        tooltipText = 'Sin definir';
    }


    // Code for updating the checked state
    // Aplica los estilos según el valor del radio button actual
    if (nextState === 'true') {
        debugger;
        icon.textContent = 'check_circle_outline';
        boton.classList.remove('grey', 'red');
        boton.classList.add('teal');
        notaField.prop('disabled', false);
        {# console.log('Selected Radio Value Before:', $(this).find("input[name='resultado[presente]']:checked").val()); #}
        // Encuentra el radio button con value="true" y hazlo checked
        $(this).find("#resultado_presente_0").prop('checked', true);
        {# console.log('esta chequeado el radio button verde de presente: ', $(this).find("#resultado_presente_0").prop("checked")); #}
        // Desmarca el radio button con value="null"
        $(this).find("#resultado_presente_2").prop('checked', false);
        {# console.log('esta chequeado el radio button gris de aun no cargó el dato: ', $(this).find("#resultado_presente_2").prop("checked"));
    
        console.log('Selected Radio Value After:', $(this).find("input[type='radio']:checked").val()); #}
        $(this).attr('data-tooltip', tooltipText);  
        
    } else if (nextState === 'false') {
        icon.textContent = 'highlight_off';
        boton.classList.remove('teal', 'grey');
        boton.classList.add('red');
        notaField.prop('disabled', true);
        // Encuentro el radio button con value="false" y hazlo checked
        $(this).find("#resultado_presente_1").prop('checked', true);
        {# console.log('esta chequeado el radio button rojo de presente: ', $(this).find("#resultado_presente_1").prop("checked")); #}
        // Desmarca el radio button con value="true"
        $(this).find("#resultado_presente_0").prop('checked', false);
       {#  console.log('esta chequeado el radio button verde : ', $(this).find("#resultado_presente_0").prop("checked")); #}

        $(this).attr('data-tooltip', tooltipText);  

    } else {
        icon.textContent = 'remove_circle_outline';
        boton.classList.remove('teal', 'red');
        boton.classList.add('grey');
        notaField.prop('disabled', true);
        
        // Encuentra el radio button con value="null" y hazlo checked
        $(this).find("#resultado_presente_2").prop('checked', true);
        
        // Desmarca el radio button con value="false"
        $(this).find("#resultado_presente_1").prop('checked', false);
        $(this).attr('data-tooltip', tooltipText);  
    }
});



$('.btn-aprobado').click(function (e) {
    // Encuentra el input (puede ser un conjunto de radio buttons o una lista desplegable)
     var input = $(this).find("input[type='radio']:checked");

    // Obtén el valor del radio button seleccionado
    var radioValue = input.val();
    
    // Encuentra el icono, el botón y el campo de nota dentro del contenedor
    var icon = $(this).find('i')[0];
    var boton = $(this)[0];
    // Determina el próximo estado del checkbox y el valor asociado
    var nextState;
    if (radioValue == 2 ) {
        nextState = 'true';
         tooltipText = 'Aprobado';
    } else if (radioValue == 0 ) {
        nextState = 'false';
         tooltipText = 'Desaprobado';
    } else {
        nextState = 'null';
        tooltipText = 'Sin definir';
    }

    // Code for updating the checked state
    // Aplica los estilos según el valor del radio button actual
    if (nextState === 'true') {
        icon.textContent = 'how_to_reg';
        boton.classList.remove('grey', 'red');
        boton.classList.add('teal');
        // Encuentra el radio button con value="true" y hazlo checked
        $(this).find("#resultado_aprobado_0").prop('checked', true);
        // Desmarca el radio button con value="null"
        $(this).find("#resultado_aprobado_2").prop('checked', false);
        $(this).attr('data-tooltip', tooltipText);  
        
    } else if (nextState === 'false') {
        icon.textContent = 'how_to_reg';
        boton.classList.remove('teal', 'grey');
        boton.classList.add('red');
        // Encuentro el radio button con value="false" y hazlo checked
        $(this).find("#resultado_aprobado_1").prop('checked', true);
        // Desmarca el radio button con value="true"
        $(this).find("#resultado_aprobado_0").prop('checked', false);
        $(this).attr('data-tooltip', tooltipText);  
    } else {
        icon.textContent = 'remove_circle_outline';
        boton.classList.remove('teal', 'red');
        boton.classList.add('grey');

        // Encuentra el radio button con value="null" y hazlo checked
        $(this).find("#resultado_aprobado_2").prop('checked', true);
        
        // Desmarca el radio button con value="false"
        $(this).find("#resultado_aprobado_1").prop('checked', false);
        $(this).attr('data-tooltip', tooltipText);  
    }
});

{% endblock %}

{% block javascripts %}
    {{ parent()}}
    <script>
        $(".modalDetalle").on("click", function (event) {
            event.preventDefault();
            //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
                    $("#modalDetalle .modal-content").html(data);
                    $("#modalDetalle").modal('open');
                    $("select").formSelect();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });
    </script>
{% endblock %}

{% block body %}
    
    <div class="row">
        <div class="col l12 m10 s10">
            <div class="card">
                <div class="card-content">
                    <table class="highlight">
                        <thead>
                            <tr>
                                <th></th>
                                <th style="text-align: center; vertical-align: middle;">Nombre y Apellido</th>
                                <th class="hide-on-small-only">DNI</th>
                                <th style="text-align: center;">Presente</th>
                                <th style="text-align: center;">Nota</th>
                                <th style="text-align: center;">Aprobado</th>
                                <th style="text-align: center;">Entrevista</th>
                                <th style="text-align: center;">Agregar Nota</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for postulante in postulantes %}
                                {{form_start(postulante['form'])}}
                                    {% if error and postulante['form'].children.presente.vars.data is null %}
                                        <tr style="border-top: 2px solid red; border-right: 1px solid red; border-left: 1px solid red;">
                                    {% else %}
                                        <tr>
                                    {% endif %}
                                    {# Foto de perfil #}
                                    <td class="hide-on-small-only">
                                        <img class="circle responsive-img small" src="{{postulante['imagen']}}" 
                                        style="height: 50px; width: 50px;" alt="Foto de perfil">
                                    </td>
                                    {# Nombre y Apellido #}
                                    <td style="text-align: center; vertical-align: middle;">
                                        {{postulante['presentacionAntecedentes'].datosPersonales.nombres|capitalize}} {{postulante['presentacionAntecedentes'].datosPersonales.apellidos|capitalize}}
                                    </td>
                                    {# DNI #}
                                    <td>
                                        {{postulante['presentacionAntecedentes'].datosPersonales.dni}}
                                    </td>
                                    {# Presente #}
                                    <td style="text-align: center; vertical-align: middle;">
                                        {% set presenteValue = postulante['form'].presente.vars.data %}
                                        {% set isPresenteChecked = presenteValue == '1' or presenteValue == true %} {# Si el valor es '1' o true #}
                                        {% set icon = isPresenteChecked ? 'check_circle_outline' : 'highlight_off' %}
                                        {% set colorClass = isPresenteChecked ? 'teal' : 'red' %}
                                        {% set dataTooltip = isPresenteChecked ? 'Presente' : 'Ausente' %}

                                        {% if presenteValue is null %}
                                            {% set icon = 'remove_circle_outline' %}
                                            {% set colorClass = 'grey' %}
                                            {% set dataTooltip = 'Sin definir' %}
                                        {% endif %}
                                        <a class="btn-floating {{ colorClass }} secondary-content btn-presente tooltipped" data-position="top" data-tooltip="{{dataTooltip}}">
                                            <i class="material-icons">{{ icon }}</i>
                                            {{ form_widget(postulante['form'].presente) }}
                                        </a>
                                    </td>
                                    {# Nota #}
                                    <td></td>
                                    {# Aprobado #}
                                    <td></td>
                                    {# Url entrevista #}
                                    <td style="text-align: center;">
                                        <div class="input-field col s6 l12" style="display: inline-block;">
                                            {{ form_row(postulante['form'].enlaceGrabacion) }}
                                        </div>
                                    </td>
                                    {# Acciones #}
                                    <td></td>
                                    {% set detalles = postulante['form'].vars.data.detalleResultados %}
                                    {% for key,detalle in detalles %}
                                        {% if key == 0 %}
                                            {% if error and postulante['form'].children.presente.vars.data is null %}
                                                <tr style="border-bottom: 1px solid red; border-right: 1px solid red; border-left: 1px solid red; background-color: rgba(242, 242, 242, 0.5);">
                                            {% else %}
                                                <tr>
                                            {% endif %}
                                            {# <tr style="background-color: rgba(242, 242, 242, 0.5);"> #}
                                                <td> </td>
                                                {# Cargo #} 
                                                <td colspan="2"> {{cronograma.cargo}} </td>
                                                <td> </td>
                                                {# Nota #}
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <div class="col s6 l12">
                                                        {{ form_row(
                                                            postulante['form'].nota,
                                                            {'attr': {'disabled': postulante['form'].presente.vars.data == 'true' ? false : true}}
                                                        ) }}
                                                    </div>
                                                </td>
                                                {# Aprobado #}
                                                <td style="text-align: center; vertical-align: middle;">
                                                    {% set aprobadoValue = postulante['form'].aprobado.vars.data %}
                                                    {% set isAprobadoChecked = aprobadoValue == '1' or aprobadoValue == true %} 
                                                    {# {% set icon = isAprobadoChecked ? 'check_circle_outline' : 'highlight_off' %} #}
                                                    {% set icon = 'how_to_reg' %}
                                                    {% set colorClass = isAprobadoChecked ? 'teal' : 'red' %}
                                                    {% set dataTooltip = isAprobadoChecked ? 'Aprobado' : 'Desaprobado' %}

                                                    {% if aprobadoValue is null %}
                                                        {% set icon = 'remove_circle_outline' %}
                                                        {% set colorClass = 'grey' %}
                                                        {% set dataTooltip = 'Sin definir' %}
                                                    {% endif %}
                                                    <a class="btn-floating {{ colorClass }} secondary-content btn-aprobado tooltipped" data-position="top" data-tooltip="{{dataTooltip}}">
                                                        <i class="material-icons">{{ icon }}</i>
                                                        {{ form_widget(postulante['form'].aprobado) }}
                                                    </a>
                                                </td>
                                                <td> </td>
                                                <td style="text-align: center; vertical-align: middle;">
                                                     {% if is_granted('ROLE_ENTREVISTAS_ADMIN') %}
                                                        <button type="button" class="btn-floating btn-flat blue darken-1 modalDetalle tooltipped" name="action"  data-position="top" data-tooltip="Agregar nota"
                                                            {{ postulante['form'].vars.value.presente ? ('data-url=' ~ path('modal_detalle_new', {'id': postulante['form'].vars.value.id})) : 'disabled' }}>
                                                            <i class="material-icons right">add</i>
                                                        </button>
                                                        <button class="btn-floating btn-flat identidad-color darken-2 tooltipped" type="submit" formaction="{{ path('cronograma_new_detalle', { 'id': postulante['presentacionAntecedentes'].id , 'cr_id': cronograma.id }) }}"  data-position="top" data-tooltip="Guardar nota">
                                                            <i class="material-icons left">save</i>
                                                        </button>
                                                        {% set presenteValue = postulante['form'].presente.vars.data %}
                                                        {% if presenteValue is not null %}
                                                            <button class="btn-floating btn-flat tooltipped red" type="button" data-url="{{ path('primer_detalle_delete', { 'id': postulante['presentacionAntecedentes'].id , 'cr_id': cronograma.id }) }}" onclick="clickEliminarPrimero(event)"  data-position="top" data-tooltip="Limpiar Registros">
                                                                <i class="material-icons">delete</i>
                                                            </button>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% else %}
                                            <tr style="background-color: rgba(242, 242, 242, 0.5);">
                                                <td></td>
                                                <td>
                                                    {{detalle.cargo}} 
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td style="text-align: center; vertical-align: middle;">
                                                    Nota: {{detalle.nota}}
                                                </td>
                                                <td style="text-align: right; vertical-align: middle;">
                                                    {{detalle.aprobado ?
                                                    '<a class="btn-floating teal tooltipped" data-tooltip="Aprobado">
                                                        <i class="material-icons">how_to_reg</i>
                                                    </a>': 
                                                    '<a class="btn-floating red tooltipped" data-position="top" data-tooltip="Desaprobado">
                                                        <i class="material-icons">how_to_reg</i>
                                                    </a>'}}
                                                </td>
                                                <td></td>
                                                <td style="text-align: center; vertical-align: middle;" >
                                                    <button class="btn-floating btn-flat tooltipped red lighten-2" type="button" data-url="{{ path('detalle_resultado_entrevista_delete', {'id': detalle.id }) }}" onclick="clickEliminar(event)"  data-position="top" data-tooltip="Sacar nota">
                                                        <i class="material-icons">delete</i>
                                                    </button>
                                                </td>
                                            </tr>
                                        {% endif %}
                                    {% else %}
                                        {% if error and postulante['form'].children.presente.vars.data is null %}
                                            <tr style="border-bottom: 1px solid red; border-right: 1px solid red; border-left: 1px solid red; background-color: rgba(242, 242, 242, 0.5);">
                                        {% else %}
                                            <tr>
                                        {% endif %}
                                         {# <tr style="background-color: rgba(242, 242, 242, 0.5);"> #}
                                                <td> </td>
                                                {# Cargo #} 
                                                <td colspan="2"> {{cronograma.cargo}} </td>
                                                <td> </td>
                                                {# Nota #}
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <div class="col s6 l12">
                                                        {{ form_row(
                                                            postulante['form'].nota,
                                                            {'attr': {'disabled': postulante['form'].presente.vars.data == 'true' ? false : true, 'class': 'sin-margenes'}}
                                                        ) }}
                                                    </div>
                                                </td>
                                                {# Aprobado #}
                                                <td style="text-align: center; vertical-align: middle;">
                                                    {% set aprobadoValue = postulante['form'].aprobado.vars.data %}
                                                    {% set isAprobadoChecked = aprobadoValue == '1' or aprobadoValue == true %} 
                                                    {# {% set icon = isAprobadoChecked ? 'check_circle_outline' : 'highlight_off' %} #}
                                                    {% set icon = 'how_to_reg' %}
                                                    {% set colorClass = isAprobadoChecked ? 'teal' : 'red' %}
                                                    {% set dataToolip = isAprobadoChecked ? 'Aprobado' : 'Desaprobado' %}

                                                    {% if aprobadoValue is null %}
                                                        {% set icon = 'remove_circle_outline' %}
                                                        {% set colorClass = 'grey' %}
                                                        {% set dataToolip = 'Sin definir' %}
                                                    {% endif %}
                                                    <a class="btn-floating {{ colorClass }} secondary-content btn-aprobado tooltipped" data-position="top" data-tooltip="{{dataToolip}}">
                                                        <i class="material-icons">{{ icon }}</i>
                                                        {{ form_widget(postulante['form'].aprobado) }}
                                                    </a>
                                                </td>
                                                <td> </td>
                                                <td style="text-align: center; vertical-align: middle;">
                                                    {% if is_granted('ROLE_ENTREVISTAS_ADMIN') %}
                                                        <button type="button" class="btn-floating btn-flat blue darken-1 modalDetalle tooltipped" name="action"  data-position="top" data-tooltip="Agregar nota"
                                                            {{ postulante['form'].vars.value.presente ? ('data-url=' ~ path('modal_detalle_new', {'id': postulante['form'].vars.value.id})) : 'disabled' }}>
                                                            <i class="material-icons right">add</i>
                                                        </button>
                                                        <button class="btn-floating btn-flat identidad-color darken-2 tooltipped" type="submit" formaction="{{ path('cronograma_new_detalle', { 'id': postulante['presentacionAntecedentes'].id , 'cr_id': cronograma.id }) }}"  data-position="top" data-tooltip="Guardar nota">
                                                            <i class="material-icons left">save</i>
                                                        </button>
                                                        {% set presenteValue = postulante['form'].presente.vars.data %}
                                                        {% if presenteValue is not null %}
                                                            <button class="btn-floating btn-flat tooltipped red" type="button" data-url="{{ path('primer_detalle_delete', { 'id': postulante['presentacionAntecedentes'].id , 'cr_id': cronograma.id }) }}" onclick="clickEliminarPrimero(event)"  data-position="top" data-tooltip="Limpiar Registros">
                                                                <i class="material-icons">delete</i>
                                                            </button>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                    {% endfor %}
                                {{form_end(postulante['form'])}}
                                
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </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', {'id': cronograma.id }) }}"> Publicar Resultado
                <i class="material-icons right">publish</i>
            </a>
        {% endif %}

        <a class="btn waves-effect waves-light left-align" href="{{ path('cronograma_entrevistas') }}">Volver
            <i class="material-icons right">undo</i>
        </a> 
    </div>

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