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

{% 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 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 js_document_ready %}
    
    $('#datatable').dataTable({
        createdRow: function(row, data, dataIndex) {
            $(row).css({"background-color":"transparent"});
        },
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { 
                "data": "imagen",
                render: function(data, type, row, meta) {
                    console.debug(data);
                    if (type === 'display') {
                        imagen = [
                            '<img src="',
                            data,
                            '" alt="" class="circle" style="height: 50px; width: 50px;">',
                        ].join('');
                        return imagen;
                    }
                    return data;
                },
            },
            { "data": "nombre_apellido" },
            { "data": "dni" },
            { "data": "fecha_entrevista" },
            { "data": "cargo" },
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            ' <a href="',
                            data['ver'],
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Ver Informe">',
                            '<i class="material-icons">visibility</i>',
                            '</a> ',
                        ].join('');
                        if(data['editar']!=null)
                        {
                            $botones += [
                                '<a href="',
                                data['editar'],
                                '" class="btn-floating btn-flat identidad-color darken-2" title="Editar Informe">',
                                '<i class="material-icons">edit</i>',
                                '</a>',
                            ].join('');
                        }
                        if(data['eliminar']!=null)
                        {
                            $botones += [
                                ' <a type="button" class="btn-floating btn-flat identidad-color darken-2" data-url="',data['eliminar'],'" onclick="clickEliminarInforme(event)" title="Eliminar Psicólogo">',
                                '<i class="material-icons">delete</i>',
                                '</a>',
                            ].join('');
                        }
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 1, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "imagen", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0 
            },
            { 
                "name": "dp.apellidos",   
                "targets": 1
            },
            { 
                "name": "dp.dni",   
                "targets": 2 
            },
            { 
                "name": "i.fechaEntrevista",   
                "targets": 3
            },
            { 
                "name": "carg.nombre",   
                "orderable": false,  
                "targets": 4
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 5
            },
        ],
        "displayStart": {{ app.session.get(constant('App\\Controller\\Informes\\InformesPsicologicosController::FORM_CONSULTA_INFORME_PSICOLOGICO_START')) ?? 0 }},
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('informes_psicologicos_datos') }}',
            type: 'POST'
        },
        fnDrawCallback: function( oSettings ) {
            // Formatear la fecha en el formato día/mes/año
            $('#datatable tbody tr').each(function() {
                var fechaCell = $(this).find('td:eq(3)'); // Columna de la fecha en la tabla
                var fechaValue = fechaCell.text();
                
                // Extraer solo la parte de la fecha (sin la hora)
                var fechaParts = fechaValue.split(' ');
                if (fechaParts.length > 1)
                { 
                    var fechaPart = fechaValue.split(' ')[0];
                    fechaParts = fechaPart.split('/'); // Suponiendo que la fecha está en formato 'YYYY/MM/DD'
                    var fechaFormatted = fechaParts[2] + '/' + fechaParts[1] + '/' + fechaParts[0];
                    fechaCell.text(fechaFormatted);
                }
            });
        }
    });


    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    {# $('.modal1').modal(); #}
    $('select').formSelect(); 

    var select = $('select');
     $('.limpiar').click(function(){
            $("input[type=text]").val("");
            select.prop('selectedIndex', 0); //Sets the first option as selected
            select.material_select();        //Update material select
            form.submit();
        });

    $('.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 javascripts %}
    {{ parent() }}
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a class="active" href="{{ path('gestion_informes_psicologicos_index') }}">Gestión de Informes Psicológicos</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row">
        <div class="col s12 l10">
            <i class="material-icons medium left identidad-color-text text-darken-2">list</i>
            <h4 style="margin-top: 12px;">Gestión de Informes Psicológicos</h4>
        </div>
    </div>
{% endblock %}

{% block titulo_acciones_body %}
   {#  {% if is_granted(constant('App\\Security\\Voter\\PsiquiatraVoter::ACCESS_CREATE'), null) %} #}
    {% if is_granted(constant('App\\Entity\\PsiConsejoUser::ROLE_INFORMATICA')) %}
        <a href="{{ path('cargar_informes_entrevistado_listado') }}" class="btn convocatoria darken-2 waves-effect waves-light col s12" 
            style="margin-top: 12px; float:right">
            <i class="material-icons medium right">add</i>
            <i class="material-icons right">save</i>
            Nuevo Informe
        </a>
    {% endif %}
        <a href="{{ path('presentaciones_listado', {'informe':'psicologico'}) }}" class="btn convocatoria darken-2 waves-effect waves-light col s12" 
            style="margin-top: 12px; float:right">
            <i class="material-icons medium right">add</i>
            <i class="material-icons right">save</i>
            Nuevo Informe {% if is_granted(constant('App\\Entity\\PsiConsejoUser::ROLE_INFORMATICA')) %}sin Entrevista{% endif %}
        </a>
    {# {% endif %} #}
{% endblock %}

{% block body %}

    <div class="card">
        <div class="card-content">
            <div class="row">
                {{ form_start(form) }}
                    <div class="input-field col s12 m6 l4">
                        {{ form_label(form.textoBusqueda) }}
                        {{ form_widget(form.textoBusqueda) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.dni) }}
                        {{ form_widget(form.dni) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                        {{ form_label(form.fechaEntrevista) }}
                        {{ form_widget(form.fechaEntrevista) }}
                    </div>
                    <div class="input-field col s12 m6 l4">
                        {# {{ form_label(form.cargos) }} #}
                        {{ form_widget(form.cargos) }}
                    </div>
                    
                    <div class="input-field col m2 s12 l2 right">
                        <button id="boton" class="btn identidad-color darken-2 waves-effect waves-light col s12" type="submit" >Buscar<i class="material-icons right">search</i></button>
                    </div>
                    {% if form.children | filter(v => (v.vars.name != "_token" and not (v.vars.value == "" or v.vars.value == []))) | length > 0 %}
                        <div class="input-field col m2 s12 l2 right">
                            <a id="botonLimpiar" href="{{ path('gestion_informes_psicologicos_limpiar_index') }}"
                                class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="" >
                                    Limpiar<i class="material-icons right">close</i>
                            </a>
                        </div> 
                    {% endif %}
                {{ form_end(form) }}
            </div>
        </div>
    </div>

    {% set opcionesResultados = constant('App\\Entity\\Informes\\DetalleInformePsicologico::VIEW_OPCIONES') %}
    <div class="row right" style="display: flex;align-items: center;">
        Referencias:
        <div class = "right">
            {% for opcion, clases in opcionesResultados %}
            <span style = "margin-left:5px">
                {# <svg width="16" height="16"><circle cx="8" cy="8" r="8" fill="blue"></circle></svg> #}
                <span class = "btn {{clases['show_class']}}" style="cursor: default;">- {{opcion}}</span>
            </span>
            {% endfor %}
        </div>
    </div>

    <table id="datatable">
        <thead>
            <tr>
                <th></th>
                <th>Apellido y Nombre</th>
                <th>DNI</th>
                <th>Fecha de la Entrevista</th>
                <th>Cargo</th>
                <th>Acciones</th>
            </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>
    
    <br>
    {% set opcionesResultados = constant('App\\Entity\\Informes\\DetalleInformePsicologico::VIEW_OPCIONES') %}
    <div class="row right" style="display: flex;align-items: center;">
        Referencias:
        <div class = "right">
            {% for opcion, clases in opcionesResultados %}
            <span style = "margin-left:5px">
                {# <svg width="16" height="16"><circle cx="8" cy="8" r="8" fill="blue"></circle></svg> #}
                <span class = "btn {{clases['show_class']}}" style="cursor: default;">- {{opcion}}</span>
            </span>
            {% endfor %}
        </div>
    </div>


{% endblock %}