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


{% block js_document_ready %}
    
    //defino variable para fecha actual
        function addZeroBefore(n) {
          return (n < 10 ? '0' : '') + n;
        }

        //defino variable para fecha actual
        var currentdate = new Date();
        var datetime = "Extraído el: " + currentdate.getDate() + "/"
                        + addZeroBefore((currentdate.getMonth()+1))  + "/"
                        + currentdate.getFullYear() + "   " 
                        + addZeroBefore(currentdate.getHours()) + ":" 
                        + addZeroBefore(currentdate.getMinutes()) + ":"
                        + addZeroBefore(currentdate.getSeconds());

        var url_excel = "{{ path('generar_excel') }}";
        var excelButton = {
            text: 'Descargar Excel',
            action: function (e, dt, node, config) {
                $.ajax({
                    url: url_excel,
                    method: 'GET',
                    data: {
                    },
                    success: function (data, textStatus, jqXHR) {
                        // Descargar el archivo
                        var a = document.createElement('a');
                        a.href = url_excel;
                        a.download = 'inscripciones.xlsx';
                        document.body.appendChild(a);
                        a.click();
                        setTimeout(function () {
                        document.body.removeChild(a);
                        }, 0);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                    console.log(errorThrown);
                    }
                });
            }

        };

    $('#datatable').dataTable({
        pageLength: 25,
        dom: 'Bfrtip',
        buttons: [
            excelButton
{#             {
                extend: 'excel',
                title: 'Inscripciones',
                text: 'Excel <i class="material-icons teal-text text-darken-2">description</i>',
                titleAttr: 'Descargar Excel',
                exportOptions: {
                    columns: ':visible',
                    modifier: {
                      page: 'all',
                      search: 'none' }
                }

            },
            {
                extend: 'pdf',
                title: 'Inscripciones',
                messageTop: '',
                text: 'PDF <i class="material-icons white-text red darken-4">picture_as_pdf</i>',
                titleAttr: 'Descargar PDF',
                exportOptions: {
                    columns: ':visible'
                },
                //customizo footer con fecha de extracción y número de página
                customize: function(doc) {
                  doc['footer'] = (function(page, pages) {
                    return {
                      columns: [
                        {
                          alignment: 'center',
                          text: [
                            { text: datetime, italics: true },
                          ]
                        },
                        {
                          alignment: 'center',
                          text: [
                            { text: page.toString(), italics: true },
                            ' de ',
                            { text: pages.toString(), italics: true }
                          ]
                        },

                      ],
                      margin: [2, 0]
                    }
                  });
                }
            },
            'colvis' #}
        ],
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { "data": "dni" },
            { "data": "apellidos" },
            { "data": "nombres" },
            { "data": "fechaInscripcion" },
            { "data": "estado" },
            { "data": "titulo" },
            { "data": "nombreCargo" },
            { "data": "tipoInscripcion" },
            { "data": "dptoJudicial" },
            { "data": "jurisdiccion" },
            { "data": "regionJudicial" },
        ],
        order: [[ 0, 'asc' ], [3, 'asc'], [8, 'asc'], [9, 'asc'], [10, 'asc']],
        columnDefs: [
            // These are the column name variables that will be sent to the server
             { 
                "name": "i.id",   
                "targets": 0,
            },
            { 
                "name": "dp.dni",
                "orderable": false,       
                "targets": 0,
            },
            { 
                "name": "dp.apellidos",
                "orderable": false,    
                "targets": 1
            },
            { 
                "name": "dp.nombres",
                "orderable": false,    
                "targets": 2
            },
            { 
                "name": "i.fechaInscripcion",
                "orderable": false,    
                "targets": 3
            },
            { 
                "name": "estado", 
                "orderable": false,    
                "targets": 4
            },
            { 
                "name": "c.titulo",
                "orderable": false,    
                "targets": 5
            },
            { 
                "name": "nombreCargo",
                "orderable": false,    
                "targets": 6
            },
            { 
                "name": "tipoInscripcion",
                "orderable": false,    
                "targets": 7
            },
            { 
                "name": "dptoJudicial",
                "orderable": false,    
                "targets": 8
            },
            { 
                "name": "jurisdiccion",
                "orderable": false,    
                "targets": 9
            },
            { 
                "name": "regionJudicial",
                "orderable": false,    
                "targets": 10
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('app_inscripciones_por_dni_datos') }}',
            type: 'POST'
        }
    });


    var $convocatoria = $('#busqueda_inscripcion_convocatorias');
    $convocatoria.change(function() {
        var $form = $(this).closest('form');
        var data = {};
        data['convocatoria_id'] = $convocatoria.val();
        $.ajax({
            url : '{{ path('load_cargos') }}',
            type: 'POST',
            data : data,
            success: function(html) {
                $('#busqueda_inscripcion_cargos').empty();
                $('#busqueda_inscripcion_cargos').append(
                    $(html).find('#form_cargos').children()
                );
                $('#busqueda_inscripcion_cargos').children().first().prop('selected', true);
                $("select").formSelect();
            }
        });
    });


    // 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("");
        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('app_inscripciones_por_dni') }}">Lista de Inscripciones</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">list</i>
        <h4 style="margin-top: 12px;">Inscripciones</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_examenes_convocatoria_new') }}" >
                        Nueva Convocatoria<i class="material-icons medium right">add</i><i class="material-icons medium right">campaign</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 m4 l2">
                    {{ form_label(form.dni) }}
                    {{ form_widget(form.dni) }}
                </div>
                <div class="input-field col s12 m4 l2">
                    {{ form_label(form.apellido) }}
                    {{ form_widget(form.apellido) }}
                </div>
                <div class="input-field col s12 m6 l4">
                    {{ form_label(form.convocatorias) }}
                    {{ form_widget(form.convocatorias) }}
                </div>
                <div class="input-field col s12 m6 l4">
                    {{ form_label(form.cargos) }}
                    {{ form_widget(form.cargos) }}
                </div>
                <div class="input-field col s12 m6 l2">
                    {{ form_label(form.regiones) }}
                    {{ form_widget(form.regiones) }}
                </div>
                <div class="input-field col s12 m6 l2">
                    {{ form_label(form.dptosJudiciales) }}
                    {{ form_widget(form.dptosJudiciales) }}
                </div>
                 <div class="input-field col s12 m6 l2">
                    {{ form_label(form.jurisdicciones) }}
                    {{ form_widget(form.jurisdicciones) }}
                </div>
                <div class="input-field col s12 m4 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>Dni</th>
                <th>Apellido</th> 
                <th>Nombre</th> 
                <th>Fecha Inscripción</th> 
                <th>Estado</th>
                <th>Convocatoria</th>
                <th>Cargo</th>
                <th>Tipo Inscripción</th>
                <th>Dpto Judicial</th>
                <th>Sede</th>
                <th>Región </th>

          </tr>
        </thead>

        <tbody> 

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