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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a class="active"> Resultados de Entrevistas </a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <i class="material-icons medium left identidad-color-text">how_to_reg</i>
    <h4 style="margin-top: 12px;">Resultado de Entrevistas</h4>
    <br>
{% 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 %}
     $('#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": "fechaEntrevista",
                "render": function(data, type, row) {
                    if (type === 'display') {

                        var date = new Date(data);
                        var date2 = new Date(data);
                        var options = { weekday: 'long'};
                        var options2 = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'};
                        var formattedDate = date2.toLocaleDateString('es-AR', options) + ', ' + date2.toLocaleDateString('es-ar', options2);
                        formattedDate = formattedDate.replace(',', ''); 
                        formattedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1); 
                        return formattedDate + ' hs';
                    }
                    return data;
                }
            },
            { "data": "cargo" },
            { 
                "data": "presentacionAntecedentes",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        return "<div class='center'><div class='center-align; chip'>"+ data+ "</div></div>"; 
                    }
                    return data;
                }
            },
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                             "<a href='",
                            data['resultado'],
                            "' class='btn-floating btn-flat identidad-color darken-2' title='Cargar Resultado'>",
                            "<i class='material-icons'>edit</i>",
                            "</a>",
                        ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 0, 'desc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "c.fechaEntrevista", 
                "searchable": true, 
                "orderable": true, 
                "targets": 0,
            },
            { 
                "name": "c.cargo",   
                "searchable": true, 
                "orderable": true, 
                "targets": 1 
            },
            { 
                "name": "c.presentacionAntecedentes",
                "searchable": true, 
                "orderable": true,    
                "targets": 2 
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 3
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('entrevistas_resultado_datos') }}',
            type: 'POST'
        }
    });
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect();

    $('.limpiar').click(function(){
        window.location.href="{{ path('entrevistas_resultado_limpiar_index') }}"
    });
{% 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_widget(form.cargo) }}
                        {{ form_label(form.cargo) }}
                    </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>
                    <div class="input-field col m2 s12 l2">
                        <button id="boton" class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="button" >Limpiar<i class="material-icons right">close</i></button>
                    </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>

   <table id="datatable" class="row-border">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Cargo</th>
                    <th class="center">Cant. Postulantes</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>      
            </tbody>
        </table>
{% endblock %}