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

{% block title %}{% trans %}Usuarios{% endtrans %}{% endblock %}

{% block contenido %}
<main>
    <div class="container-fluid p-0">
        <div class="row mt-4 ">
            <div class="col-12 text-left" style="font-size: 24px">
                <i class="fas fa-list-ul text-danger"></i><span class="text-danger"> Listado de Usuarios</span>
            </div>
        </div>
        <hr>
        <div class="row justify-content-center mt-1">
            <div class="col-12">
                <div id="grid"></div>
                <div class="mt-3 mb-3 text-left">
                    <a href="{{ path('users_new') }}">
                        <button type="button" class="btn btn-danger" id='crear'>
                            <i class="fas fa-1x fa-plus-circle "></i> Nuevo Usuario
                        </button>
                    </a>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="userShow" tabindex="-1" role="dialog" aria-labelledby="userShowLabel" aria-hidden="true" >
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 700px">
                    <div class="modal-header">
                        <h5 class="modal-title" id="userShowLabel">{% trans %}Información del Usuario{% endtrans %}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div id="modUserShow" class="modal-body">
                </div>
                {#<div class="modal-footer">#}
                {#<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>#}
                {#<button type="button" class="btn btn-primary">Save changes</button>#}
                {#</div>#}
            </div>
        </div>
    </div>
</main>
    <script>
        var users = {{ users|json_encode|raw}}// MUESTRA INFORMACION COMPLETA DEL USUARIO
            function userShow(index){
                $("#modUserShow").empty();
                $("#modUserShow").append('' +
                    '<div class="card mb-3 border" style="max-width: 740px;">'+
                    '   <div class="row no-gutters">'+
                    '       <div class="col-md-4 border">'+
                    '           <img src="{{ asset('img/user_info.png') }}" class="card-img m-2" alt="...">'+
                    '       </div>'+
                    '       <div class="col-md-8">'+
                    '           <div class="card-body">'+
                    '               <h5 class="card-title">'+ users[index].usuApellidos+' '+ users[index].usuNombres +'</h5>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      ID:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].id +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      {% trans %}USUARIO{% endtrans %}:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].username +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      {% trans %}CORREO{% endtrans %}:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].email +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      {% trans %}ESTADO{% endtrans %}:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].enabled.toString().replace("true","{% trans %}Activo{% endtrans %}").replace("false","{% trans %}Inactivo{% endtrans %}") +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      {% trans %}Ultimo Ingreso{% endtrans %}:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].lastLogin.date.substring(0,19) +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row">'+
                    '                  <div class="col-4 text-right">'+
                    '                      {% trans %}Perfil{% endtrans %}:'+
                    '                  </div>'+
                    '                  <div class="col-8 text-left">'+
                    users[index].roles[0] +
                    '                  </div>'+
                    '               </div>'+
                    '               <div class="row mt-3">'+
                    '                  <div class="col-12 text-right">'+
                    '                      <a href="'+users[index].id+'/edit"><button type="button" class="btn btn-primary btn-sm"><i class="fas fa-users-edit mr-3"></i>{% trans %}Modificar{% endtrans %}</button></a>' +
                    '                  </div>'+
                    '               </div>'+
                    '           </div>'+
                    '       </div>'+
                    '   </div>'+
                    '</div>');
                $("#userShow").modal();

                console.log(users[index]);
            }
        $(document).ready(function () {
            var source =
                {
                    localdata: users,
                    datafields:
                        [
                            { name: 'id', type: 'string' },
                            { name: 'username', type: 'string' },
                            { name: 'usuNombres', type: 'string' },
                            { name: 'email', type: 'string' },
                            { name: 'roles', type: 'array' },
                            { name: 'enabled', type: 'boolean' }
                        ],
                    datatype: "array",
                    pagesize: 25,
                };
            var perfilrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result  = '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><span style="color: #008000;"><i class="far fa-address-card mr-2"></i>'+value[0]+'</span></div></div>';
                    return result;
            }
            var estadorenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value == true) {
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><span style="color: #008000;">Activo</span></div></div>';
                }
                else {
                    return '<div class="row w-100 h-100 m-0 align-items-center"><div class="col-12 text-center"><span style="color: red;">Inactivo</span></div></div>';
                }
            }
            var opciones = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                var result = '<div class="row h-100 w-100 m-0 align-items-center"><div class="col-12 text-center">' +
                    '<a href="{{ path('users_edit',{'id':'docId'}) }}"><button class="btn btn-sm btn-icon btn-icon-only btn-outline-warning mb-0" type="button"><i class="far fa-2x fa-edit"></i></button></a>';
                if (rowdata.enabled == true) {
                    result += '<a href="{{ path('users_cambia_estado',{'id':'docId1','estado':0}) }}"><button class="btn btn-sm btn-icon btn-icon-only btn-outline-danger ms-2" type="button"><i class="fas fa-2x fa-times-circle"></i></button></a>';
                }
                else {
                    result += '<a href="{{ path('users_cambia_estado',{'id':'docId2','estado':1}) }}"><button class="btn btn-sm btn-icon btn-icon-only btn-outline-success ms-2" type="button"><i class="fas fa-2x fa-check-circle "></i></button></a>';
                }
                result = result.replace('docId',rowdata.id);
                result = result.replace('docId1',rowdata.id);
                return result.replace('docId2',rowdata.id);
            }

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    sortable: true,
                    showfilterrow: true,
                    filterable: true,
                    altrows: true,
                    pageable: true,
                    autoheight: true,
                    rowsheight: 40,
                    editable: false,
                    localization: getLocalization('{% trans %} es {% endtrans %}'),
                    theme: '{{ theme }}',
                    selectionmode: 'none',
                    columns: [
                        { text: 'id', columntype: 'textbox', filtertype: 'textbox', datafield: 'id', width: '4%', cellsalign: 'center' },
                        { text: '{% trans %}Usuario{% endtrans %} ', columntype: 'textbox', filtertype: 'textbox', datafield: 'username', width: '8%' },
                        { text: '{% trans %}Nombre{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'usuNombres', width: '19%' },
                        { text: '{% trans %}Correo{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'email', width: '19%' },
                        { text: '{% trans %}Perfil{% endtrans %}', columntype: 'textbox', filtertype: 'textbox', datafield: 'roles', width: '25%', cellsrenderer: perfilrenderer },
                        { text: '{% trans %}Estado{% endtrans %}', columntype: 'checkedlist', filtertype: 'checkedlist', datafield: 'enabled', width: '10%', cellsrenderer: estadorenderer },
                        { text: '{% trans %}Opciones{% endtrans %}', filterable:false, datafield: 'OPC', width: '15%', cellsrenderer: opciones, cellsalign: 'center', align: 'center' }
                    ]
                });
            //$("#crear").jqxButton({ width: '150', height: '40'});
            $("span:contains('www.jqwidgets.com')").hide();
        });
    </script>
{% endblock %}