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


{% block js_document_ready %}

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());

$('#datatable').dataTable({
        pageLength: 15,
        dom: 'Bfrtip',

        buttons: [
            {
                extend: 'excel',
                title: '{{convocatoria.titulo}}',
                text: 'Excel <i class="material-icons teal-text text-darken-2">description</i>',
                titleAttr: 'Descargar Excel',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)'
                }
            },
            {

                extend: 'pdf',
                title: '{{convocatoria.titulo}}',
                text: 'PDF <i class="material-icons white-text red darken-4">picture_as_pdf</i>',
                titleAttr: 'Descargar PDF',
                exportOptions: {
                    columns: ':visible:not(.not-export-col)'
                },
                //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": "cargo" },
            { "data": "cantInscriptos" },
            { "data": "admitidas",
                render: function ( data, type, row ) {
                    return '<span class="amber lighten-5 amber-text text-accent-4">Presentadas</span> (' + row.presentadas + ')'+ '<br> <span class="green lighten-5 green-text text-accent-4">Admitidas</span> (' + row.admitidas + ')' {# + '<br> <span class="pink lighten-5 pink-text text-accent-2">Rechazadas</span> (' + row.rechazadas + ')'+ '<br> <span class="deep-orange lighten-1 white-text">Desestimadas</span> (' + row.desestimadas + ')' #};
                } 
            },
            { "data": "genero",
                render: function ( data, type, row ) {
                    return '<span class="green lighten-5 green-text text-accent-4">Femenino</span> (' + row.femenino + ')'+ '<br> <span class="pink lighten-5 pink-text text-accent-2">Masculino</span> (' + row.masculino + ')'+ '<br> <span class="amber lighten-5 amber-text text-accent-4">Otros</span> (' + row.otro + ')';
                } 
            },

            { "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            ' <a href="',
                            data['inscriptos'],
                            '" class="btn-floating btn-flat modal-trigger identidad-color darken-2" title="Ver Inscriptos">',
                            '<i class="material-icons">people_alt</i>',
                            '</a> ',
                        ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 1, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "cargo",   
                "targets": 0
            },
            { 
                "name": "cantInscriptos",   
                "targets": 1 
            },
            { 
                "name": "admitidas",   
                "targets": 2
            },
            { 
                "name": "genero",   
                "targets": 3
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 4
            },
        ],
        serverSide: false,
        processing: true,
        ajax: {
            url: '{{ path('app_inscripciones_por_cargo_datos', { 'id': idConvocatoria }) }}',
            type: 'POST'
        }
    });


    // 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="" href="#">Inicio</a></li>
        <li><a class="" href="{{ path('convocatorias_listado') }}">Lista de Convocatorias</a></li>
        <li><a class="" href="{{path('reportes_listado', { 'id': convocatoria.id }) }}">Reportes de : {{convocatoria.titulo|capitalize}} </a></li>
        <li><a class="active" href="#">Convocatoria por Cargos </a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row">
        <div class="col s12 l10">
            <br>
            <i class="material-icons medium left identidad-color-text text-darken-2">list</i>
            
            <h4 style="margin-top: 12px;">{{convocatoria.titulo|capitalize}}</h4>
            <h5 style="margin-top: 12px;">Listado de Inscripciones {# y Notificaciones de asistencia a Examen #} por Cargo</h5>
        </div>

        <div class="col s12 l3 input-field">

        </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 l6">
                    {{ form_label(form.cargos) }}
                    {{ form_widget(form.cargos) }}
                </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" class="display nowrap">
        <thead>
            <tr>
                <th>Cargo</th>
                <th>Inscriptos</th>
                <th>Estado inscripciones</th>
                <th>Inscripciones<br> por Género</th>
                <th class="not-export-col">Acciones</th>
            </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>


{% endblock %}