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

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block breadcrumb %}
    <ol class="breadcrumbs">
        {# <li><a href="{{ path('main') }}">Inicio</a></li> #}
        <li><a class="active">Ordenes Mérito</a></li>
    </ol>
{% endblock %}


{% block javascripts_base %}
{% endblock %}

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

    $('#datatable').dataTable({
        createdRow: function(row, data, dataIndex) {
                },

        filter : false,
        language: {
           "url": "//cdn.datatables.net/plug-ins/1.12.1/i18n/es-ES.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { "data": "fechaCreacion",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        var date = new Date(data);
                        var date2 = new Date(data);
                        var options = { weekday: 'long'};
                        var options2 = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'};
                        var formattedDate = date2.toLocaleDateString('es-AR', options) + ', ' + date2.toLocaleDateString('es-ar', options2);
                        formattedDate = formattedDate.replace(',', ''); 
                        formattedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1); 
                        return formattedDate + ' hs';
                    }
                    return data;
                }},
            { "data": "cargo",
                render: function(data, type, row, meta) {
                    let string_compacto = "";
                    if(data != null)
                    {
                        tooltiptext = data;
                        string_compacto = data.length >= 80 ? data.substring(0, 80)+"..." : data;
                    }
                    else{ tooltiptext = ""; }
                    let string_final = "<div title='"+tooltiptext+"'>";
                    string_final += string_compacto;
                    if(row['estadoRegistro'] && row['estadoRegistro'].indexOf('Borrador')!=-1){
                        string_final += ' <i><sub style="color:darkorange">{Borrador}</sub></i>';
                    }
                    string_final += '</div>';
                    return string_final;
                } 
            },
            { "data": "departamentoJudicial"},
            { "data": "jurisdiccion"},
            { 
                "data": "ordenMeritoDetalles",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        return "<div class='center'><div class='center-align; chip'>"+ data+ "</div></div>"; 
                    }
                    return data;
                }
            },
            { "data": "estadoMerito"},
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                    var estadoMeritoContent = $(row.estadoMerito).text().trim();
                        $botones = [
                            ' <a href="',
                            data["show"],
                            '" class="btn-floating btn-flat identidad-color darken-2" title="Ver Orden">',
                            '<i class="material-icons">visibility</i>',
                            '</a> ',
                        ].join('');
                        if (estadoMeritoContent !== 'Definitivo') {
                            $botones += [
                                ' <a href="',
                                data["edit"],
                                '" class="btn-floating btn-flat identidad-color darken-2" title="Editar Orden Mérito">',
                                '<i class="material-icons">edit</i>',
                                '</a>',
                            ].join('');
                            $botones += [
                                ' <a href="',
                                data["cargarExaminando"],
                                '" class="btn-floating btn-flat identidad-color darken-2" title="Cargar Postulante">',
                                '<i class="material-icons">person_add</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": "o.fechaCreacion",   
                "searchable": true,
                "orderable": false,   
                "targets": 0,
                {# "width": "35%", #}
            },
            { 
                "name": "o.cargo",   
                "searchable": true,
                "orderable": false,   
                "targets": 1 
            },
            { 
                "name": "o.departamentoJudicial",   
                "searchable": true,
                "orderable": false,   
                "targets": 2 
            },
            { 
                "name": "o.jurisdiccion",   
                "searchable": true, 
                "orderable": false,  
                "targets": 3
            },
            { 
                "name": "o.ordenMeritoDetalles",   
                "searchable": true,
                "orderable": false,   
                "targets": 4
            },
            { 
                "name": "o.estadoMerito",   
                "searchable": true, 
                "orderable": false,  
                "targets": 5
            },
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 6 
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('ordenes_merito_datos') }}',
            type: 'POST'
        }
    });

    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    {# $('.modal1').modal(); #}
    $('select').formSelect(); 

     $('.limpiar').click(function(){
        window.location.href="{{ path('orden_merito_limpiar_index') }}"
    });
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block titulo_body %}
    <br>
    <i class="material-icons medium left identidad-color-text">business_center</i>
    <h4 style="margin-top: 12px;">Órdenes de Mérito</h4>
    <br>
{% endblock %}

{% block titulo_acciones_body %}
    <br>
   <a href="{{path('orden_merito_new')}}" class="btn convocatoria darken-2 waves-effect waves-light col s12" style="margin-top: 12px; float:right">
        Nuevo Orden de Mérito
        <i class="material-icons medium right">business_center</i>
        <i class="material-icons medium right">add</i>
    </a>

    <br>
{% endblock %}

{% block body %}

    <div class="card">
        <div class="card-content">
            {{ form_start(form) }}
                <div class="row">
                    <div class="input-field col s12 m6 l4">
                        {{ form_widget(form.cargos) }}
                        {{ form_label(form.cargos) }}
                    </div>
                    <div class="input-field col s12 m3 l3">
                        {{ form_label(form.territorialidad) }}
                        {{ form_widget(form.territorialidad) }}
                    </div>
                    <div class="input-field col s12 m6 l2">
                        {{ form_widget(form.estado) }}
                        {{ form_label(form.estado) }}
                    </div>
                    <div class="input-field col s12 m6 l2">
                        {{ form_widget(form.caracter) }}
                        {{ form_label(form.caracter) }}
                    </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">
                            <a id="botonLimpiar" href="{{ path('orden_merito_limpiar_index') }}"
                                class="limpiar btn orange darken-2 waves-effect waves-light col s12" type="">Limpiar<i class="material-icons right">close</i>
                            </a>
                        </div>
                    {% endif %} 
                </div>
            {{ form_end(form) }}
        </div>
    </div>



<br>
    <table id="datatable" class="display nowrap">
        <thead>
            <tr>
                <th style="">Fecha de Creacion</th>
                <th style="">Cargo</th>
                <th style="">Departamento Judicial</th>
                <th style="">Jurisdicción</th>
                <th class="center">Cant. Postulantes</th>
                <th class="">Caracter</th>
                <th style="">Acciones</th>
          </tr>
        </thead>

        <tbody> 

        </tbody>
    </table>

{% endblock %}