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

{% block js_document_ready %}
    
    $('#datatable').dataTable({
        pageLength: 15,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                title: '{{convocatoriaExamen.convocatoria.titulo  ~ ' - ' ~  convocatoriaExamen.cargo ~ ' - Prov. de Buenos Aires' }}',
                text: 'Excel <i class="material-icons teal-text text-darken-2">description</i>',
                titleAttr: 'Descargar Excel',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdf',
                title: '{{convocatoriaExamen.convocatoria.titulo}}',
                messageTop: ' Cargo : {{convocatoriaExamen.cargo}}' + '\n' + 'Territorio : Prov. de Buenos Aires', 
                text: 'PDF <i class="material-icons white-text red darken-4">picture_as_pdf</i>',
                titleAttr: 'Descargar PDF',
                exportOptions: {
                    columns: ':visible'
                }
            },
            'colvis'
        ],
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { "data": "apellidos" },
            { "data": "nombres" },
            { "data": "dni" },
            { "data": "telefono" },
            { "data": "email" },
            { "data": "estado" },
{#          { "data": "notificado" },
            { "data": "confirmado" },
            { "data": "fechaRespuesta" }, #}

        ],
        order: [[ 0, 'asc' ]],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "dp.apellidos", 
                "targets": 0 
            },
            { 
                "name": "dp.nombres", 
                "targets": 1
            },
            { 
                "name": "dp.dni",   
                "targets": 2
            },
            { 
                "name": "dp.telefono",   
                "targets": 3 
            },
            { 
                "name": "dp.email",  
                "targets": 4
            },
            { 
                "name": "i.estado",  
                "targets": 5
            },
{#          { 
                "name": "notificado",  
                "targets": 6
            },
            { 
                "name": "confirmado",  
                "targets": 7
            },
            { 
                "name": "nae.fechaHoraRespuesta",  
                "targets": 8
            }, #}
        ],
{#         "displayStart": {{ app.session.get(constant('App\\Controller\\Notificacion\\NotificacionUsuarioController::FORM_CONSULTA_NOTIFICACION_USUARIO_STAR')) ?? 0 }}, #}
        serverSide: false,
        processing: true,
        ajax: {
            url: '{{ path('detalle_inscriptos_provincia_datos', {'convocatoriaExamen': convocatoriaExamen.id}) }}',
            type: 'POST'
        }
    });


    // 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="" href="#">Inicio</a></li>
        <li><a class="" href="{{ path('convocatorias_listado') }}">Lista de Convocatorias</a></li>
        {% set idConvocatoria = convocatoriaExamen.convocatoria.id %}
        <li><a class="" href="{{path('reportes_listado', { 'id': idConvocatoria }) }}">Reportes de : {{convocatoriaExamen.convocatoria.titulo|capitalize}} </a></li>
        <li><a class="" href="{{ path('app_inscripciones_por_cargo_territorio', {'id':  idConvocatoria}) }}">Inscripciones por Cargos y Territorios </a></li>
        <li><a class="active" href="#">{{ 'Inscriptos para ' ~ convocatoriaExamen.cargo|capitalize }} </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;">Listado de inscriptos para {{convocatoriaExamen.convocatoria.titulo}}<br></h4>
            <h5>Cargo : {{convocatoriaExamen.cargo}}</h5>
            <h5>Territorio : Prov. de Buenos Aires</h5>
        </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.textoBusqueda) }}
                        {{ form_widget(form.textoBusqueda) }}
                    </div> #}
                    <div class="input-field col s12 m4 l4">
                        {{ form_label(form.dni) }}
                        {{ form_widget(form.dni) }}
                    </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>Apellido/s</th>
                <th>Nombre/s</th>
                <th>DNI</th>
                <th class="hide-on-small-only">Teléfono</th>
                <th class="hide-on-small-only">Email</th>
                <th class="">Estado Inscripción</th>
{#              <th class="hide-on-small-only">Notificado/a</th>
                <th class="hide-on-small-only">Rpta.</th>
                <th class="hide-on-small-only">Fecha/Hora rpta.</th> #}
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

{% endblock %}