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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('cronograma_entrevistas') }}"> Entrevistas </a></li>
        {% set fecha = cronograma.fechaEntrevista %}
        <li><a href="{{path('cronograma_entrevista_resultado_show', {'id': cronograma.id}) }}">Entrevista del {{fecha|format_datetime(pattern='EEEE', timezone='America/Argentina/Buenos_Aires')|capitalize ~ ' ' ~ fecha|date('d/m/Y - H:i') }}</a></li>
        <li><a class="active"> Carga de notas a {{presentacion.datosPersonales}} </a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row hide-on-small-only">
        <div class="col l12 m12 s12">
            <i class="material-icons  medium left identidad-color-text"  style="margin-top: 13px;">
                how_to_reg
            </i>
            <h4 style="margin-top: 12px;">Carga de Resultado de la Entrevista {{ resultadoEntrevista.entrevistaCronograma }} </h4> 
        </div>
    </div>
    <br>

{% 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;                        
            } 
        });
    }
{% 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 s12 m12">
            <div class="card-panel z-depth-2 border-radius-8 mb-4">
                <div class="row">
                    <div class="col s2 l2 m2">
                        {% if presentacion.urlFoto != null %}
                            <img src="{{ asset(presentacion.id ~ "/" ~ presentacion.urlFoto, 'adjuntos') }}" class="responsive-img circle z-depth-2" width="100" style="margin-left:20px">
                        {% else %}
                            <img src="{{ asset('img/user.png') }}" alt="" class="circle responsive-img }}">
                        {% endif %}
                    </div> 
                    <div class="col s10 l10 m10">
                        <h5 style="font-weight: 500;" class="text-primario">
                            {{presentacion.datosPersonales.nombres ? presentacion.datosPersonales.nombres|title  ~ ', ' ~ presentacion.datosPersonales.apellidos|title}}
                        </h5>
                        <div class="divider"></div>
                        <p><i class="material-icons profile-card-i identidad-color-text" >location_on</i> <strong>Domicilio actual:</strong>
                        {{ presentacion.datosPersonales.domCalle ? presentacion.datosPersonales.domCalle: '--' }}
                            nro {{ presentacion.datosPersonales.domNumero ? presentacion.datosPersonales.domNumero : '--' }}, 
                            {{ presentacion.datosPersonales.domLocalidad ? presentacion.datosPersonales.domLocalidad|title : '--' }}
                            ({{ presentacion.datosPersonales.domCodigoPostal }}),
                            Prov. de {{ presentacion.datosPersonales.domLocalidad ? presentacion.datosPersonales.domProvincia : '--' }} 
                        </p>
                        <p><i class="material-icons identidad-color-text" >contacts</i> 
                            DNI {{ presentacion.datosPersonales.dni }} -
                            {% if presentacion.datosPersonales.genero == 'F' %}
                                {{ 'Femenino' }}
                                <br>
                            {% elseif presentacion.datosPersonales.genero == 'M' %}
                                {{ 'Masculino' }}
                                <br>
                            {% else %}
                                {{ 'Género: Otros' }}
                                <br>
                            {% endif %}
                        </p>
                        <p><i class="material-icons identidad-color-text" >contacts</i> 
                            Nacimiento: {{ presentacion.datosPersonales.fechaNacimiento ? presentacion.datosPersonales.fechaNacimiento|date('d/m/Y') ~ ' - ' : '--' }}
                            {{ presentacion.datosPersonales.nacionalidad ? presentacion.datosPersonales.nacionalidad|title : '--' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{ form_start(form) }}
    <div class="row">
        <div class="col s12 l6 m10">
            <div class="card-panel height-match">
                <div class="row">
                    <div class="input-field col s12 l12 m12">
                        {{ form_row(form.enlaceGrabacion) }}
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12 l12 m12">
                            {{ form_row(form.presente) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12 l6 m10">
            <div class="card-panel height-match">
                <div class="row">
                    <div class="input-field col s12 l11 m10">
                        {{ form_row(form.detalleResultado.cargo) }}
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12 l6 m7">
                        {{ form_row(form.detalleResultado.nota) }}
                    </div>
                    <div class="input-field col s12 l5 m5">    
                        {{ form_row(form.detalleResultado.aprobado) }}  
                    </div>
                </div>
            </div>
        </div>
    </div>


    {% if (resultadoEntrevista) and (resultadoEntrevista.detalleResultados is not empty) %}
        <div class="row">
            <br>
            <button type="button" class="btn waves-effect waves-light modalDetalle" name="action" data-url="{{ path('modal_detalle_new', {'id': resultadoEntrevista.id}) }}">Nota cargo adicional
                <i class="material-icons right">add</i>
            </button>
        </div>

        <br>
        <ul class="collapsible popout">
            {% for key, detalle in resultadoEntrevista.detalleResultados %}
                {% if key != 0 %}
                    {{ (key == 1) ? '<h5>Otros cargos para los que se entrevistó:</h5>' : null }}
                    <div class="card-panel">
                        <li>
                            Detalle de entrevista para: {{ detalle.cargo }}. -
                            <span> Nota: {{ detalle.nota }}. Aprobado: {{ (detalle.aprobado) ? 'Sí' : 'No'}}. </span>
                            <button type="button" data-url="{{ path('detalle_resultado_entrevista_delete', {'id': detalle.id }) }}" onclick="clickEliminar(event)" class="btn right red darken-2 waves-effect waves-light" title="Eliminar Detalle">
                                Eliminar<i class="material-icons right">delete</i>
                            </button>
                            <button type="button" class="btn oscuro darken-2 right waves-light modalDetalle" name="action" data-url="{{ path('detalle_resultado_entrevista_edit', {'id': detalle.id}) }}" style="margin-right: 10px;"> 
                                Editar<i class="material-icons right">edit</i>
                            </button>
                        </li>
                    </div>
                {% endif %}
            {% endfor %}
        </ul>
    {% endif %}

    <br>
    <div class="row" style="justify-content: space-between;">
        <a class="btn identidad-color darken-2 waves-effect waves-light" href="{{ path('cronograma_entrevista_resultado_show', {'id': cronograma.id }) }}">
            Volver
            <i class="material-icons right">undo</i>
        </a>
        <button class=" btn right identidad-color darken-2 waves-effect waves-light">{{ button_label|default('Guardar') }}</button>
    </div>

    {{ form_end(form) }}

     {% if (resultadoEntrevista) and (resultadoEntrevista.detalleResultados is not empty) %}
        <div id="modalDetalle" class="modal">
            <div class="modal-content">
                <!-- Acá se va a cargar el contenido del modal mediante AJAX -->
            </div>
        </div>
    {% endif %} 
{% endblock %}