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


{% 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": "id" },
            { "data": "observaciones" },
            { "data": "fechaApertura" },
            { "data": "fechaCierre" },
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
{#                         $botones = [
                            ' <a href="',
                            data['seleccionar'],
                            '" class="btn-floating btn-flat modal-trigger identidad-color darken-2" title="Agregar RIA">',
                            '<i class="material-icons">group_add</i>',
                            '</a> ',
                        ].join(''); #}
                        $botones = [
                            '<a href="',
                            data['detallepersonas'], 
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Gestionar personas">',
                            '<i class="material-icons"> group</i>',
                            '</a> ',
                        ].join('');
                        $botones += [
                            '<a href="',
                            data['editar'], 
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Editar Terna">',
                            '<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": "id",   
                "targets": 0,
                "visible" : false 
            },
            { 
                "name": "observaciones",   
                "orderable": false, 
                "targets": 1
            },
            { 
                "name": "fechaApertura",   
                "targets": 2 
            },
            { 
                "name": "fechaCierre",  
                "targets": 3 
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 4 
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('ternas_listado_datos') }}',
            type: 'POST',
{#             success: function(response) {
                console.log(response); // Realiza un dump de la respuesta en la consola
            } #}
        }
    });


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


{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a class="active" href="#">Inicio</a></li>
        <li><a class="active" href="{{ path('ternas_listado') }}">Lista de Ternas</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row">
        <div class="col s12 l9">

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

        <div class="col s12 l3 input-field">
            <a id="new" class="btn identidad-color darken-2 waves-effect waves-light col s12" href="{{ path('app_ternas_ternas_conf_new') }}" >
                        Nueva Terna<i class="material-icons medium right">add</i><i class="material-icons medium right">group</i>
            </a>
        </div>
    </div>
{% 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.observaciones) }}
                        {{ form_widget(form.observaciones) }}
                    </div>
                    <div class="input-field col s12 m2 l2">
                    </div>
                    <div class="input-field col s12 m2 l2">
                      {#   {{ form_label(form.estado) }}
                        {{ form_widget(form.estado) }} #}
                    </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="" >Limpiar<i class="material-icons right">close</i></button>
                    </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
<br>
    <table id="datatable">
        <thead>
            <tr>
                <th>id</th>
                <th>Observaciones</th>
                <th>Fecha Apertura</th>
                <th>Fecha Cierre</th>
                <th style = "width: 10%">Acciones</th>
          </tr>
        </thead>

        <tbody> 

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