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

{% block javascripts_base %}
    function clickAbrirHistorialPsic(e) {
        alert("Se hizo click sobre el informe Psicológico de idView: "+event.currentTarget.dataset.idview);
    }
    function clickAbrirHistorialPsiq(e) {
        alert("Se hizo click sobre el informe Psiquiátrico de idView: "+event.currentTarget.dataset.idview);
    }
{% endblock %}

{% block js_document_ready %}
    
    $('#datatable').dataTable({
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { 
                "data": "foto",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        foto = [
                            '<img src="',
                            data,
                            '" alt="" class="circle small" style="height: 50px; width: 50px;">',
                        ].join('');
                        return foto;
                    }
                    return data;
                },
            },
            { "data": "dni" },
            { "data": "nombre_apellido" },
            { "data": "estadoPsicologico",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        if(data['class'])
						{
                            $resultado = [
                                '<span class="badge ', data['class'],'"', 
                                ' style="margin-left:10px; min-width: 4rem;">',data['estado'],'</span>',
                                '<button type="button" class="material-icons right identidad-color-text"',
                                'onclick="clickAbrirHistorialPsic(event)"', 'data-idView="',data['idView'],'"',
                                'style="background: transparent; border: transparent;">',
                                data["boton_extra"],'</i></button>'
                            ].join('');
                        }
                        else
                        {
                            $resultado = data['estado'];
                        }
                        return $resultado;
                    }
                    return data;
                },
            },
            { "data": "estadoPsiquiatrico",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        if(data['class'])
						{
                            $resultado = [
                                '<span class="badge ', data['class'],'"', 
                                ' style="margin-left:10px; min-width: 4rem;">',data['estado'],'</span>',
                                '<button type="button" class="material-icons right identidad-color-text"',
                                'onclick="clickAbrirHistorialPsiq(event)"',
                                'style="background: transparent; border: transparent;">',
                                data["boton_extra"],'</i></button>'
                            ].join('');
                        }
                        else
                        {
                            $resultado = data['estado'];
                        }
                        return $resultado;
                    }
                    return data;
                },
            },
			{ "data": "acciones",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
						if(data['urlVer'] != null)
                        {
							$botones = [
                            ' <a href="',
                            data['urlVer'],
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Ver informes">',
                            '<i class="material-icons">visibility</i>',
                            '</a> '
                        	].join('');
						}
						else
						{
							$botones = [
                            ' <a href="',
                            data['urlVer'],
                            '" class="btn-floating identidad-color" disabled title="Ver informes">',
                            '<i class="material-icons">visibility</i>',
                            '</a> '
                        	].join('')
						}
                        return $botones;
                    }
                    return data;
                },
			},
        ],
        order: [[ 2, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
             { 
                "name": "foto", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0 
            },
            { 
                "name": "dp.dni",   
                "targets": 1 
            },
            { 
                "name": "nombre_apellido",   
                "targets": 2
            },
            { 
                "name": "estadoPsicologico",  
                "searchable": false, 
                "orderable": false,  
                "targets": 3
            },
            { 
                "name": "estadoPsiquiatrico", 
                "searchable": false, 
                "orderable": false,   
                "targets": 4
            },
			{ 
                "name": "accion",   
                "searchable": false, 
                "orderable": false, 
                "targets": 5
            },
        ],
        "displayStart": {{ app.session.get(constant('App\\Controller\\Informes\\ResultadosCargoController::FORM_CONSULTA_RESULTADOS_CARGO_START')) ?? 0 }},
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('resultados_cargos_datos', {'id': cargo.id}) }}',
            type: 'POST'
        }
		,
		fnDrawCallback: function( oSettings ) {
			// Refrescar tooltips
			$('.tooltipped').tooltip();
		}
		
    });

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

{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a href="{{ path('cargos_index') }}">Resultados por Cargo</a></li>
        <li><a class="active" href="{{ path('resultados_cargo_index',{id:cargo.id}) }}">{{cargo.nombre}}</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;">{{cargo.nombre}}</h4>
        </div>

        <div class="col s12 l3 input-field">

        </div>
    </div>
{% endblock %}

{% block titulo_acciones_body %}
{% 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 m2 s12 l2">
                        <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">
                            <a id="botonLimpiar" href="{{ path('resultados_cargo_limpiar_index', {id:cargo.id}) }}"
                                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>

    <br>

    <div class="row">
        <table id="datatable" class= "responsive-table highlight centered">
            <thead>
                <tr>
                <th></th>
                <th class="hide-on-small-only">DNI</th>
                <th>Apellido y Nombre</th>
                <th class="hide-on-small-only">Estado Psicológico</th>
                <th class="hide-on-small-only">Estado Psiquiátrico</th>
                <th> </th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                    <td> </td>
                    <td class="hide-on-small-only"></td>
                    <td> </td>
                    <td class="hide-on-small-only"> </td>
                    <td class="hide-on-small-only"> </td>
                    <td> </td>
                    </tr>
            </tbody>
        </table>
    </div>

{% endblock %}