{% 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();
    }
{% endblock %}

{% block js_document_ready %}

    $('.datepicker').datepicker({
        autoClose: true,
        showClearBtn: true,
        format: 'dd/mm/yyyy',
        container: 'body',
        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'
            ],
        }
    });

    $('.timepicker').timepicker({
        container: 'body',
        autoClose: true,
        twelveHour: false,
        showClearBtn: true,
        onDraw: function () {
            // materialize select dropdown not proper working on mobile and tablets so we make it browser default select
            $('.timepicker-container').find('.timepicker-select').addClass('browser-default');
            $(".timepicker-container .select-dropdown.dropdown-trigger").remove()
        },
        i18n: {
            cancel: 'Cancelar',
            clear: 'Limpiar',
            done: 'Aceptar',
        }
    });

    $('#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 responsive-img small" style="height: 50px; width:50px;">',
                        ].join('');
                        return foto;
                    }
                    return data;
                },
            },
            { "data": "nombre_apellido" },
            { "data": "dni" },
            {# { "data": "antiguedad" }, #}
            { "data": "acciones",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                            $botones = [
                            " <a href='", 
                            data['urlCrearInforme'],
                                "' class='btn-floating btn-flat identidad-color darken-2' title='Cargar Informe/s'>",
                            "<i class='material-icons'>how_to_reg</i>",
                            "</a> ",
                            ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 1, 'desc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
             { 
                "name": "foto", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0 
            },
            { 
                "name": "nombre_apellido",   
                "targets": 1
            },
            { 
                "name": "dni",   
                "targets": 2 
            },
            {# { 
                "name": "antiguedad",   
                "targets": 3
            }, #}
            { 
                "searchable": false, 
                "orderable": false, 
                "targets": 3
            },
        ],
        "displayStart": {{ app.session.get(constant('App\\Controller\\Informes\\CargarInformesController::FORM_CONSULTA_CARGAR_AGIL_INFORME_PSI_START')) ?? 0 }},
        order: [[{{ app.session.get(constant('App\\Controller\\Informes\\CargarInformesController::FORM_CONSULTA_CARGAR_AGIL_INFORME_PSI_ORDER_COL')) ?? 1 }},
            '{{ app.session.get(constant('App\\Controller\\Informes\\CargarInformesController::FORM_CONSULTA_CARGAR_AGIL_INFORME_PSI_ORDER_DIR')) ?? 'desc' }}']],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('cargar_informe_agil_presentaciones_datos') }}',
            type: 'POST',
{#             success: function(response) {
            // dump de los datos recibidos en la respuesta
            console.log(response);
            } #}
        }
        {# ,
        fnDrawCallback: function( oSettings ) {
            // Ocultar columnas si no esta seteada el numero de acta
            $('#datatable tbody tr').each(function() {
                var fechaCell1 = $(this).find('td:eq(3)'); // Columna del resultado en la tabla
                fechaCell1.hide();
            });
        } #}
    });

    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect();
    //var select = $('select');
    
    $('.limpiar').click(function(){
        $("input[type=text]").val("");
        form.submit();
    }); 

{% endblock %}


{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="#">Inicio</a></li>
        <li><a class="active" href="#">Selección de Persona</a></li>
    </ol>
{% endblock %}


{% block titulo_body %}

        <div class="col s12 l9">
            <i class="material-icons  medium left identidad-color-text text-darken-2">
                list
            </i>
            <h4 style="margin-top: 12px;"> Listado de Aspirantes </h4>
        </div>

{% endblock %}


{% block body %}
    {# <div class="row">
        <div class="col s6">
            <div class="col s6"><p> 
                <i class="material-icons identidad-color-text">place</i> </p>
            </div>
            <div class="col s6">
                <p> <i class="material-icons identidad-color-text">description</i> 
                </p>
            </div>
            <div class="col s12">&nbsp;</div>
        </div>
    </div> #}
    <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">
                        </div>
                        {# <div class="input-field col s12 m2 l2">
                            {{ form_label(form.fechaEntrevista) }}
                            {{ form_widget(form.fechaEntrevista) }}
                        </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">
                                <button id="boton" class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="" >Limpiar<i class="material-icons right">close</i></button>
                            </div>
                        {% endif %}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    <div class="row">
        <div class="col s12">
            <table id="datatable" class= "responsive-table highlight centered">
                <thead>
                    <tr>
                    <th></th>
                    <th>Nombre y Apellido</th>
                    <th>DNI</th>
                    {# <th class="hide-on-small-only">Antigüedad</th> #}
                    <th> Acciones </th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                        <td ></td>
                        <td ></td>
                        <td> </td>
                        {# <td class="hide-on-small-only"> </td> #}
                        <td> </td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>

{% endblock %}

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