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

{% block javascripts_base %}
{% 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": "nombre" },
            { 
                "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 Postulantes">',
                            '<i class="material-icons">visibility</i>',
                            '</a> ',
                        ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 0, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "e.nombre",   
                "targets": 0
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 1
            },
        ],
        "displayStart": {{ app.session.get(constant('App\\Controller\\Informes\\ResultadosCargoController::FORM_CONSULTA_CARGO_START')) ?? 0 }},
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('cargos_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);
                }
            });
        }
    });

{% endblock %}

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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="{{ path('main') }}">Inicio</a></li>
        <li><a class="active" href="{{ path('cargos_index') }}">Resultados por Cargo</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;">Resultados por Cargo</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 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('cargos_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>


<br>


    <table id="datatable">
        <thead>
            <tr>
                <th>Cargo</th>
                <th></th>
            </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>


{% endblock %}