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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('cargar_informes_aspirantes_listado') }}">Selección de Persona</a></li>
        <li><a class="active">Crear Informe/s</a></li>
    </ol>
{% endblock %}

{% block javascripts_base %}
    function initDateFormat( datePicker ) {
        var selectedDate = ( typeof datePicker.date === 'undefined' || datePicker.date === null ) ? datePicker.options.defaultDate : datePicker.date;
        var shortWeekdays = datePicker.options.i18n.weekdaysShort; 
        var shortMonths = datePicker.options.i18n.monthsShort; 
        var day     = selectedDate.getDate();
        var weekday = shortWeekdays[ selectedDate.getDay() ];
        var month   = shortMonths[ selectedDate.getMonth() ];

        var formattedDate = weekday + ', ' + day + ' ' + month;
        document.querySelector(".datepicker-date-display .date-text").innerHTML = formattedDate;
        document.querySelector(".datepicker-date-display .year-text").innerHTML = selectedDate.getFullYear();
    }
{% endblock %}


{% block js_document_ready %}
    {{ parent() }}
    $('.datepicker').datepicker({
        autoClose: true,
        showClearBtn: true,
        format: 'dd/mm/yyyy',
        container: 'body',
        {# defaultDate: p_defaultDate, #}
        {# yearRange: p_yearRange, #}
        {# maxDate: p_maxDate, #}
        {# setDefaultDate: p_setDefaultDate, #}
        onDraw: function (datePicker) { 
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.datepicker-container').find('.datepicker-select').addClass('browser-default');
            $(".datepicker-container .select-dropdown.dropdown-trigger").remove();
        },
        onOpen: function (p) {
            var instance = M.Datepicker.getInstance(this.el);
            var d = instance.el.value.split(/[^0-9]/);
            var newDate = new Date(d[2], d[1] - 1, d[0]);
            instance.setDate(newDate);
            initDateFormat(instance);
        },
        i18n: {
            cancel:	'Cancelar',
            clear: 'Limpiar',
            done: 'Aceptar',
            weekdays: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysShort: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],
            weekdaysAbbrev: ["D", "L", "M", "M", "J", "V", "S"],
            today: 'Hoy',
            months: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
            monthsShort: [
                'Enero',
                'Febrero',
                'Marzo',
                'Abril',
                'Mayo',
                'Junio',
                'Julio',
                'Agosto',
                'Septiembre',
                'Octubre',
                'Noviembre',
                'Diciembre'
            ],
        }
    });

    $('.continuarCargos').click(function(){
     event.preventDefault();
     
    // Serializar los datos del formulario como un array de objetos
    var formData = $('#informe_form').serialize();
        // Realizo la solicitud AJAX al controlador Symfony
        $ .ajax({
            type: "POST",
            url: "{{ path('cargar_informes', {'idView': presentacionAntecedentes.idView}) }}",
            data: formData,
            success: function(response) {
                // Manejo la respuesta del controlador
                // oculto botón de continuar con cargos, muestro el de actualizar
                $('.continuarCargos').hide();
                $('.actualizarInforme').show(); 
                // Agregar el atributo data-url al botón con el path recibido en la respuesta
                $('.actualizarInforme').attr('data-url', response.path);
                $('#listado').attr('data-idView-psico', response.idViewPsicologico);
                $('#listado').attr('data-idView-psiqui', response.idViewPsiquiatrico);        

                $('#li-cargos').addClass("active");
                $('#body-cargos').show(); // Mostrar el elemento con id "body-cargos"
                // Mostrar mensajes flash
                mostrarMensajesFlash(response.flashMessages);
            },
            error: function(xhr, status, error) {
                // Manejo errores
                console.error(xhr.responseText);
            }
        }); 
    });

    $('.actualizarInforme').click(function(){
        event.preventDefault();
        var dataUrl = $(this).attr('data-url');
        // Serializar los datos del formulario como un array de objetos
        var formData = $('#informe_form').serialize();
        $ .ajax({
            type: "POST",
            url: dataUrl,
            data: formData,
            success: function(response) {
                // Manejo la respuesta del controlador
                {# console.log(response); #}
                // Mostrar mensajes flash
                mostrarMensajesFlash(response.flashMessages);
            },
            error: function(xhr, status, error) {
                // Manejo errores
                console.error(xhr.responseText);
            }
        }); 
    });

    // Detectar el cambio en los selects con la class cargo_psi_detalleInformePsico
    $('.cargo_psi_detalleInformePsico').on('change', function() {
        // Obtengo  el valor seleccionado
        var resultadoPsico = $(this).find('select').val();
        // Obtengo el valor de data-id-cargo del tr más cercano
        var idCargo = $(this).closest('tr').data('id-cargo');
        var idviewPsico = $('#listado').data('idview-psico');
        $.ajax({
            type: "POST",
            url: "{{ path('crear_detalle_psico') }}",
            data: {
                resultadoPsico: resultadoPsico,
                idCargo: idCargo,
                idviewPsico: idviewPsico
            },
            success: function(response) {
                // Pinto el fondo del div
                if (resultadoPsico == 'Apto I') {
                    $('#cargo_psi_detalleInformePsico_' + idCargo).css('background-color', '#a7ffeb');
                }
                else if (resultadoPsico == 'Apto II') {
                    $('#cargo_psi_detalleInformePsico_' + idCargo).css('background-color', '#1de9b6');
                }
                else if (resultadoPsico == 'No Apto') {
                    $('#cargo_psi_detalleInformePsico_' + idCargo).css('background-color', '#ffcdd2');
                }  else {
                    $('#cargo_psi_detalleInformePsico_' + idCargo).css('background-color', 'transparent');
                }
                // Mostrar mensajes flash
                mostrarMensajesFlash(response.flashMessages);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });

    // Detectar el cambio en los selects con la class cargo_psi_detalleInformePsiqui
    $('.cargo_psi_detalleInformePsiqui').on('change', function() {
        // Obtengo  el valor seleccionado
        var resultadoPsiqui = $(this).find('select').val();
        // Obtengo el valor de data-id-cargo del tr más cercano
        var idCargo = $(this).closest('tr').data('id-cargo');
        var idviewPsiqui = $('#listado').data('idview-psiqui');
        $.ajax({
            type: "POST",
            url: "{{ path('crear_detalle_psiqui') }}",
            data: {
                resultadoPsiqui: resultadoPsiqui,
                idCargo: idCargo,
                idviewPsiqui: idviewPsiqui
            },
            success: function(response) {
                // Pinto el fondo del div
                if (resultadoPsiqui == 'No Apto') {
                    $('#cargo_psi_detalleInformePsiqui_' + idCargo).css('background-color', '#ffcdd2');
                }
                else if (resultadoPsiqui == 'Apto') {
                    $('#cargo_psi_detalleInformePsiqui_' + idCargo).css('background-color', '#a7ffeb');
                } else {
                    $('#cargo_psi_detalleInformePsiqui_' + idCargo).css('background-color', 'transparent');
                }
                // Mostrar mensajes flash
                mostrarMensajesFlash(response.flashMessages);
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });

    // Función para mostrar mensajes flash utilizando SweetAlert
    function mostrarMensajesFlash(messages) {
        // Verificar si messages es un array o un objeto
        if (Array.isArray(messages)) {
            // Si es un array, iterar sobre cada mensaje
            messages.forEach(function(message) {
                mostrarMensaje(message);
            });
        } else if (typeof messages === 'object') {
            // Si es un objeto, iterar sobre las claves y mostrar cada mensaje
            Object.keys(messages).forEach(function(key) {
                mostrarMensaje(messages[key]);
            });
        }
    }

    // Función para mostrar un mensaje utilizando SweetAlert
    function mostrarMensaje(message) {
        var alertConfig = {
            title: "Éxito",
            icon: "success",
            content: {
                element: 'p',
                attributes: {
                    innerHTML: message,
                },
            }
        };

        // Mostrar el SweetAlert
        swal(alertConfig);
    }


{% endblock %}

{% block titulo_body %}
<div class="row hide-on-small-only">
        <i class="material-icons  medium left identidad-color-text icono-primario c-titulo">
          assignment_ind
        </i>
        <h4 style="margin-top: 12px;">Informe Psicológico / Psiquiátrico</h4>
</div>
{% endblock %}

{% block body %}
{% set presentacion = presentacionAntecedentes %}
<br>
<ul class="collapsible popout">
  <li class="active">
    <div class="collapsible-header" tabindex="0" > 
      <i class="material-icons identidad-color-text">person</i>Datos Personales
    </div>
    <div class="collapsible-body" style="display: block;">
      <div class="row">  <h5>{{ presentacion.datosPersonales.nombres }} {{presentacion.datosPersonales.apellidos}}</h5></div>
      <div class="row">
        <div class="col s12 l3 m3">
          <div class="card">
            <div class="card-image">
              <img src="{{ asset(presentacion.idView ~ '/400', 'ria_fotos') }}">
            </div>
            <div class="card-content">
            </div>
          </div>
        </div>
        <div class="col s12 l9 m9">
            <div class="row">
                <div class="col s12 l6 m6">
                    <blockquote>
                    <p>DNI {{presentacion.datosPersonales.dni}} - 
                    {% if presentacion.datosPersonales.genero == 'F' %}
                        {{ 'Femenino' }}
                    {% elseif presentacion.datosPersonales.genero == 'M' %}
                        {{ 'Masculino' }}
                    {% else %}
                        {{ 'Género: Otros' }}
                    {% endif %}</p>
                    <p>Nacimiento: {{ presentacion.datosPersonales.fechaNacimiento ? presentacion.datosPersonales.fechaNacimiento|date('d/m/Y') ~ ' - ' : '--' }}
                    {{ presentacion.datosPersonales.nacionalidad ? presentacion.datosPersonales.nacionalidad|title : '--' }}</p>
                    <p><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>
                    {% if presentacion.datosPersonales.email %}
                        <a href="mailto:{{ presentacion.datosPersonales.email}}">{{ presentacion.datosPersonales.email}}</a>
                    {% else %}
                        <a href="!#">--</a>
                    {% endif %}
                    </p>
                    <p>
                    {% if presentacion.datosPersonales.telefono %}
                        <a href="tel:{{ presentacion.datosPersonales.telefono}}">{{ presentacion.datosPersonales.telefono}}</a>
                    {% else %}
                        <a href="!#">--</a>
                    {% endif %}
                    </p>
                    </blockquote>
                </div>
                {{ form_start(form, {'attr': {'id': 'informe_form'}}) }}
                    <div class="col s12 l6 m6">
                        <div class="card card-default ">
                            <div class="card-content">
                                <div class="row">
                                    <div class="input-field col m6 s12">
                                        {{ form_row(form.fechaEntrevista) }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="input-field col m6 s12">
                                          {{ form_widget(form.psicologico.evaluador) }}
                                          {{ form_label(form.psicologico.evaluador) }}
                                    </div>
                                    <div class="input-field col m6 s12">
                                        {{ form_widget(form.psiquiatrico.evaluador) }}
                                        {{ form_label(form.psiquiatrico.evaluador) }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="input-field col m6 s12">
                                        {{ form_widget(form.psicologico.fechaRecepcion) }}
                                        {{ form_label(form.psicologico.fechaRecepcion) }}
                                    </div>
                                    <div class="input-field col m6 s12">
                                        {{ form_widget(form.psiquiatrico.fechaRecepcion) }}
                                        {{ form_label(form.psiquiatrico.fechaRecepcion) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <p></p>
            <div class="row">
                <div class="col m8">
                    <p> Exámenes Aprobados: 
                    {% for cargoAprobado in cargosAprobados %}
                        <a href="#">  {{ cargoAprobado.nombre }} </a>
                        <br>
                    {% endfor %}
                </div>
                <div class="col m2">
                  <button class=" btn right continuarCargos identidad-color darken-2 waves-effect waves-light">{{ button_label|default('Añadir por Cargo') }}</button>
                </div>
{#                 <div class="col m2">
                  <button class=" btn right actualizarInforme identidad-color darken-2 waves-effect waves-light" style="display: none;">{{ button_label|default('Actualizar') }}</button>
                </div> #}
            </div>

      </div>

    </div>
  </li>
</ul>
<ul class="collapsible popout">
    <li class="" id="li-cargos">
        <div class="collapsible-header" id="header-cargos" style="pointer-events:none;"> <i class="material-icons identidad-color-text icono-primario">info</i>Cargos</div>
        <div class="collapsible-body" id="body-cargos" style="display: none;">
            <table class="highlight ">
                <thead>
                    <tr>
                        <th>Cargo</th>
                        <th>Psicológico</th>
                        <th>Psiquiátrico</th>
                    </tr>
                </thead>
                <tbody id="listado" data-idView-psico = "" data-idView-psiqui= "">
                {% for formulario in formularios %}
                    <tr class="cargoDetalleInforme" data-id-cargo="{{ formulario.cargoId }}">
                        <td>{{ formulario.nombreCargo }}</td>
                        <td>
                            <div id="cargo_psi_detalleInformePsico_{{ formulario.cargoId }}" class="cargo_psi_detalleInformePsico">
                                {{ form_row(formulario.form.detalleInformePsico, {'attr': {'id': 'cargo_psi_detalleInformePsico_resultado_'~formulario.cargoId}}) }}
                            </div>
                        </td>
                        <td> 
                            <div id="cargo_psi_detalleInformePsiqui_{{ formulario.cargoId }}" class="cargo_psi_detalleInformePsiqui">
                                {{ form_row(formulario.form.detalleInformePsiqui, {'attr': {'id': 'cargo_psi_detalleInformePsiqui_resultado_'~formulario.cargoId}}) }}
                            </div>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </li>
</ul>

    <div class="fixed-action-btn">
        {# <a class="btn-floating btn-large modal-trigger" href="#modal1">
          <i class="large material-icons">save</i>
        </a> #}
        <a class="btn-floating btn-large actualizarInforme" href="#" style="display: none;">
          <i class="large material-icons">save</i>
        </a>
        
    </div>
    <br>
</div>
<div class="card">
    <div class="card-content">
        {{ form_row(form.observaciones) }}
    </div>
</div> 
<div>
    <div class="row" style="justify-content: space-between;">
        <a class="btn identidad-color darken-2 waves-effect waves-light" href="{{ path('cargar_informes_aspirantes_listado') }}">
            Volver al listado de personas
        </a>
        {# <button class=" btn right identidad-color darken-2 waves-effect waves-light">{{ button_label|default('Guardar') }}</button> #}
    </div>
</div>
{{ form_end(form) }}

{% endblock %}