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


{% block js_document_ready %}
    
    $('#datatable').dataTable({
        pageLength: 25,
        dom: 'Bfrtip',
        buttons: [
            
        ],
        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": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            ' <a target="__blank" href="',
                            data['verInsc'],
                            '" class="btn-floating btn-flat modal-trigger identidad-color darken-2" title="Ver Inscripción">',
                            '<i class="material-icons">print</i>',
                            '</a> ',
                        ].join('');
                        $botones += [
                            ' <a href="',
                            data['seleccionarInsc'],
                            '" class="btn-floating btn-flat modal-trigger identidad-color darken-2" title="Seleccionar Inscripción">',
                            '<i class="material-icons">check</i>',
                            '</a> ',
                        ].join('');
                        return $botones;
                    }
                    return data;
                },
            },
        ],
        order: [[ 0, 'asc' ], [3, 'asc']],
        columnDefs: [
            // These are the column name variables that will be sent to the server
            { 
                "name": "dni",
                "orderable": true,       
                "targets": 0,
            },
            { 
                "name": "apellidos",
                "orderable": true,    
                "targets": 1
            },
            { 
                "name": "nombres",
                "orderable": true,    
                "targets": 2
            },
            { 
                "name": "fechaInscripcion",
                "orderable": true,    
                "targets": 3
            },
            { 
                "name": "estado", 
                "orderable": false,    
                "targets": 4
            },
            { 
                "name": "titulo",
                "orderable": true,    
                "targets": 5
            },
            { 
                "name": "nombreCargo",
                "orderable": true,    
                "targets": 6
            },
            { 
                "name": "tipoInscripcion",
                "orderable": true,    
                "targets": 7
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 8
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('app_inscripciones_para_rectificar_datos') }}',
            type: 'POST'
        }
    });


    var $convocatoria = $('#inscripcion_para_rectificar_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) {
                $('#inscripcion_para_rectificar_cargos').empty();
                $('#inscripcion_para_rectificar_cargos').append(
                    $(html).find('#form_cargos').children()
                );
                $('#inscripcion_para_rectificar_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="" href="#">Inicio</a></li>
        <li><a class="" href="{{ path('rectificaciones_index_limpiar') }}">Rectificatorias</a></li>
        <li><a class="active" href="{{ path('app_inscripciones_para_rectificar') }}">Buscar Inscripción para Rectificar</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;">Buscar Inscripción para Rectificar</h4>
        <h5 style="margin-top: 12px;">Listado de inscriptos que pueden rectificar</h5>

        </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 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>
                {% 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">
                        <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>
                {% endif %}
            {{ form_end(form) }} 
            </div>
        </div>
    </div>

    <br>
    {% if form.children | filter(v => (v.vars.name != "_token" and not (v.vars.value == "" or v.vars.value == []))) | length > 0 %}
        {# <div class="col s12 m12 l12">
            <div class="card">
                <div class="card-content"> #}
                    {# <h6 class="left"> .</h6> #}
                {#  </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>Acciones</th>

            </tr>
            </thead>

            <tbody> 

            </tbody>
        </table>
    {% else %}
        <div class="col s12 m12 l12">
            <div class="card">
                <div class="card-content">
                    <h6 class="center"> Por favor, realice una búsqueda.</h6>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}