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

{% block breadcrumb %}
    <ol class="breadcrumbs">
        <li><a href="#">Inicio</a></li>
        <li><a class="active" href="{{ path('toma_posesion_index_limpiar') }}">Lista de Tomas de Posesión</a></li>
    </ol>
{% endblock %}

{% block titulo_body %}
    <div class="row" style="margin-top: 1%;">
        <div class="col s12 l9">
            <i class="material-icons medium left identidad-color-text text-darken-2">person</i>
            <h4 >Tomas de posesión</h4>
        </div>
    </div>
{% endblock %}

{% block titulo_acciones_body %}
    <div class="row" style="margin-top: 9%;">
        <div class="col s12 l9 ">
            <a id="new" class="btn convocatoria darken-2 waves-effect waves-light col s12 modalAgregarDNI" type="button" name="action" data-url="{{path('modal_toma_posesion_dni_new') }}" >
                Nueva toma de posesión<i class="material-icons medium right">add</i><i class="material-icons medium right">person</i>
            </a>
        </div>
    </div>
{% endblock %}

{% block js_document_ready %}
    $('#datatable').dataTable({
        createdRow: function(row, data, dataIndex) {
            $(row).css({"background-color":"transparent"});
        },
        filter : false,
        language: {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
        aLengthMenu: "",
        bAutoWidth: false,
        "columns": [
            { 
                "data": "foto",
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        if(data){
                            foto = [
                                '<img src="',
                                data,
                                '" alt="" class="circle responsive-img small" style="height: 50px; width:50px;">',
                            ].join('');
                        } else {
                            foto = [
                                '<img src="{{asset('img/user.png')}}" alt="" class="circle responsive-img small" style="height: 50px; width:50px;">',
                            ].join('');
                        }
                        return foto;
                    }
                    return data;
                },
            },
            {"data": "apellidos_nombres"},
            {"data": "tomaPosesion.dni"},
            {"data": "tomaPosesion.cargo" },
            {"data": "tomaPosesion.posesion",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        return "<div class='center'><div class='center-align;'>"+ data+ "</div></div>"; 
                    }
                    return data;
                }
            },
            {# {"data": "tomaPosesion.estado",
                "render": function(data, type, row) {
                    if (type === 'display') {
                        return "<div class='center'><div class='center-align;'>"+ data+ "</div></div>"; 
                    }
                    return data;
                }
            }, #}
            { 
                "data": "acciones" ,
                render: function(data, type, row, meta) {
                    if (type === 'display') {
                        $botones = [
                            "<a href='",
                            data['seleccionar'],
                            "' class='btn-floating btn-flat identidad-color darken-2' title='Ver detalle'>",
                            "<i class='material-icons'>visibility</i>",
                            "</a>",
                        ].join('');
                        {# $botones += [
                            '<a href="',
                            data['editar'],
                            '" class="btn-floating btn-flat identidad-color darken-2 ', 
                            row.tomaPosesion.estado.includes("Borrador") ? '"' : 'alertBorrador"', 
                            " title='Editar' style='margin-left:2px;'>",
                            "<i class='material-icons'>edit</i>",
                            "</a>",
                        ].join(''); #}
                        $botones += [
                            "<a href='",
                            data['editar'],
                            "' class='btn-floating btn-flat identidad-color darken-2' title='Ver detalle' style='margin-left:2px;'>",
                            "<i class='material-icons'>edit</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": "foto", 
                "searchable": false, 
                "orderable": false, 
                "targets": 0,
            },
            { 
                "name": "apellidos_nombres",   
                "searchable": true, 
                "orderable": true, 
                "targets": 1 
            },
            { 
                "name": "tp.dni",
                "searchable": true, 
                "orderable": true,    
                "targets": 2 
            },
            { 
                "name": "tp.cargo",
                "searchable": true, 
                "orderable": true,    
                "targets": 3 
            },
            { 
                "name": "tp.posesion",
                "searchable": true, 
                "orderable": true,    
                "targets": 4 
            },
            {# { 
                "name": "tp.estado",
                "searchable": true, 
                "orderable": false,    
                "targets": 5 
            }, #}
            { 
                "searchable": false, 
                "orderable": false,  
                "targets": 5
            },
        ],
        serverSide: true,
        processing: true,
        ajax: {
            url: '{{ path('toma_posesion_datos') }}',
            type: 'POST'
        },
        {# fnDrawCallback: function( oSettings ) {
            $(".alertBorrador").on("click", function (event) {
                event.stopPropagation();
                event.preventDefault();
                $url_modificar=event.currentTarget.href;
                swal({
                    title: "Despublicar",
                    text: "¿Está seguro que quiere modificar esta Toma de Posesión? En consecuencia quedará en Borrador.",
                    icon: "warning",
                    buttons: true,
                    })
                    .then((aceptar) => {
                    if (aceptar) {
                        window.location.href = $url_modificar;
                    } 
                });
            });
        } #}
    });
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('select').formSelect();

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

{% block javascripts %}
    {{ parent()}}
    <script>
        var botonClick=null;
        $(".modalAgregarDNI").on("click", function (event) {
            event.stopPropagation();
            event.preventDefault();
            botonClick = event.currentTarget;
            //Hago una solicitud AJAX al controller
            $.ajax({
                url: event.currentTarget.dataset.url ,
                method: 'GET',
                success: function (data) {
                    // Insertor el contenido en el div del modal
                    $("#modalAgregarDNI .modal-content").html(data);
                    $("#modalAgregarDNI").modal('open');
                    {# $("select").formSelect(); #}
                },
                error: function (error) {
                    swal({
                        title: "Error",
                        text: error.responseText,
                        icon: "warning",
                        //buttons: true,
                        })
                    //console.log(error);
                }
            });
        });
    </script>
{% 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_label(form.cargo) }}
                        {{ form_widget(form.cargo) }}
                    </div>
                    <div class="input-field col s12 m6 l2">
                        {{ form_label(form.dni) }}
                        {{ form_widget(form.dni) }}
                    </div>
                    {# <div class="input-field col s12 m2 l2">
                        {{ form_widget(form.estado) }}
                        {{ form_label(form.estado) }}
                    </div> #}

                    <div class="input-field col s12 m2 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="button" >Limpiar<i class="material-icons right">close</i></button>
                        </div>
                    {% endif %}
                </div>
            {{ form_end(form) }}
        </div>
    </div>

    <table id="datatable" class="row-border">
        <thead>
            <tr>
                <th></th>
                <th>Apellidos y Nombres</th>
                <th>DNI</th>
                <th style="width: 40%;">Cargo</th>
                <th class="center">Fecha de Posesión</th>
                {# <th class="center">Estado</th> #}
                <th>Acciones</th>
            </tr>
        </thead>

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

{% block dialogos_modales %}
    <div id="modalAgregarDNI" class="modal">
        <div class="modal-content">
            {# Contenido del Modal #}
        </div>
    </div>
{% endblock %}