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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('gestion_informes_psicologicos_index') }}">Gestión de Informes Psicológicos</a></li>
        <li><a class="active">Editar Informe</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();
    }

    function clickEliminar(e) { 
        $url_eliminar=e.currentTarget.dataset.url;
        swal({
            title: "Eliminar",
            text: "¿Está seguro que quiere eliminar este cargo de la Entrevista?",
            icon: "warning",
            buttons: true,
            })
        .then((aceptar) => {
            if (aceptar) {
                $.ajax({
                    url: $url_eliminar,
                    method: 'POST',
                    mensaje: "hola",
                    {# beforeSend: function (data) {
                        console.log("hola") ;
                    }, #}
                    success: function (data) {
                        M.toast({html: 'Se eliminó el cargo con éxito'});
                        //Borro el tr padre, que tenga la clase terminada en _tr y la borro
                        $(e.target).parents("tr[class$='_tr']").remove();
                    },
                    error: function (error) {
                        if(error.status == 500 || error.status == 400)
                        {
                            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 clickEliminarInforme(e) {
        $url_eliminar=e.currentTarget.dataset.url;
        debugger;
        swal({
                title: "Eliminar",
                text: "¿Está seguro que quiere eliminar este Informe Psicológico?",
                icon: "warning",
                buttons: true,
                })
                .then((aceptar) => {
                if (aceptar) {
                    window.location.href = $url_eliminar;                        
                } 
            });
    }
{% endblock %}

{% block javascripts %}
    {{ parent()}}
    <script>
        function clickOpenModal(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 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'
            ],
        }
    });
    
{% endblock %}

{% block titulo_body %}
<div class="row hide-on-small-only">
    <div class="col s12">
        <i class="material-icons medium left identidad-color-text">edit</i>
        <h4 style="margin-top: 12px;">Editar Informe de {{informe.presentacionAntecedentes.datosPersonales.nombres}} {{informe.presentacionAntecedentes.datosPersonales.apellidos}}</h4>
    </div>
</div>
{% endblock %}

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


{% block body %}
    {{ form_start(form) }} 
    {% set presentacion = informe.presentacionAntecedentes %}
    <br>
    <ul class="collapsible popout">
    <li class="active">
        <div class="collapsible-header" tabindex="0" style="pointer-events:none"> 
            <i class="material-icons identidad-color-text">person</i>Datos Personales: {{ presentacion.datosPersonales.nombres }} {{presentacion.datosPersonales.apellidos}}
        </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(informe.presentacionAntecedentes.idView ~ '/400', 'ria_fotos') }}">
                    <span class="card-title">{{presentacion.datosPersonales.nombres}} {{presentacion.datosPersonales.apellidos}}</span>
                    </div>
                    <div class="card-content">
                    </div>
                </div>
                </div>
                <div class="col s12 l6 m6">
                    <div class="row">
                    <div class=" col s12 l11 m11">
                        <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>
                    </div>
                </div>
                <div class="card-panel col s12 m3 l3" style="padding:1.2rem">
                    {{ form_row(form.fechaEntrevista) }}
                    {{ form_row(form.fechaRecepcion) }}
                    {{ form_row(form.evaluador) }}
                </div>
            </div>
            
            <div class="card-panel">
                <div class="row">
                    <h4 class="col">
                        Cargos: 
                        <button type="button" class="btn-floating btn-flat darken-2 modalDetalle tooltipped" name="action" 
                            onclick="clickOpenModal(event)" title="Agregar Cargo" data-tooltip="Agregar Cargo"
                            data-url="{{ path('detalle_informe_psicologico_modal_detalle_new', {'idView': informe.idView}) }}">
                            <i class="material-icons right">add</i>
                        </button>
                    </h4>
                </div>

                <table class="highlight cargos_table">
                    <thead>
                        <tr>
                            <th {# style="text-align: center;" #}>Cargo</th>
                            <th {# style="text-align: center;" #}>Resultado</th>
                            <th style="text-align: center;"></th>
                        </tr>
                    </thead>
                    <tbody class="cargos_tbody">
                        {% for key, detalle in informe.detalles | sort((a, b) => a.cargo.nombre <=> b.cargo.nombre) %}
                            {{ include('gestion_informes/psicologicos/_trDetalleInformePsicologico.html.twig', {'detalle': detalle}) }}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card-panel">
                <div class="col">
                    <div class="row">
                        <div class="col s12 m12 l12">
                            {{ form_label(form.observaciones) }}
                            {{ form_row(form.observaciones, {'label' : false}) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
    </ul>

    <div>
        <br>
        <div class="row" style="justify-content: space-between;">
            <a class="btn identidad-color darken-2 waves-effect waves-light" href="{{ path('gestion_informes_psicologicos_index') }}">
                Volver al listado <i class="material-icons right">undo</i>
            </a>

            <button class=" btn right identidad-color darken-2 waves-effect waves-light" style="margin-left:3%;">{{ button_label|default('Guardar') }}
                <i class="material-icons right">save</i>
            </button>

            {% if (is_granted(constant('App\\Entity\\PsiConsejoUser::ROLE_INFORMATICA')) or is_granted(constant('App\\Entity\\PsiConsejoUser::ROLE_RESPONSABLE_INFORMES'))) %}
                <a type="button" class="limpiar btn red darken-2 waves-effect right waves-light" data-url="{{ path('gestion_informes_psicologicos_delete', { 'idView': informe.idView }) }}" onclick="clickEliminarInforme(event)" title="Eliminar Informe">
                    Eliminar Informe <i class="material-icons">delete</i>
                </a>
            {% endif %}
        </div>
    </div>
{{ form_end(form) }}
{% endblock %}