{% extends 'base.html.twig' %}
{% block body %}
<h2 class="titulos-body">
    <i class="fa fa-user fa-lg mr-3"></i>Usuarios</h2>
<form class="form-horizontal my-3" id="form-tabla-usuarios">
    <div class="row">
        <div class="input-group col-sm-9 col-lg-5">
            <input type="text" class="form-control" id="nombre" autofocus placeholder="Nombre">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary border-left-0 border" id="btn-clear">
                    <span class="fa fa-lg fa-times-circle"></span>
                </button>
            </div>
        </div>
        <div class="col-auto mt-2 mx-2">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="activos" name="activos" checked>
                <label class="custom-control-label" for="activos">Sólo Activos</label>
            </div>
        </div>
        <div class="col-sm-6 col-sm-offset-2 col-lg-2 col-lg-offset-0 mt-2 mt-lg-0">
            <a href="#" id="btn-search" class="btn btn-dark btn-block">
                <span class="fa fa-search mr-3"></span>Buscar
            </a>
        </div>
        <div class="col-sm-6 col-lg-2 mt-2 mt-lg-0">
            <a href="{{url('usuario_edit')}}" class="btn btn-success btn-block">
                <span class="fa fa-plus mr-3"></span>Añadir
            </a>
        </div>
    </div>
</form>
<table id="tabla-usuarios" class="display w-100">
    <thead>
        <tr>
            <th></th>
            <th>Usuario</th>
            <th>Nombre</th>
            <th>Contacto</th>
            <th>Activo</th>
        </tr>
    </thead>
</table>
{% endblock %}
{% block javascript %}
<script>
    /* global $, U */
    $(function () {
        'use strict';
        function filtroData(d) {
            d.nombre = $('#nombre').val();
            d.activos = $('#activos').prop('checked') ? '1' : '';
        }
        let opciones = {
            columnDefs: [
                {
                    targets: 0,
                    visible: false
                }, {
                    targets: 4,
                    sortable: false,
                    width: '7rem',
                    className: 'dt-center',
                    'render': function (valor) {
                        return '<input type="checkbox"' + (valor ? ' checked' : '') + '>';
                    }
                },
            ],
            order: [[1, 'asc']],
            columns: [
                { data: 'id' },
                { data: 'usuario' },
                { data: 'nombre' },
                { data: 'contacto' },
                { data: 'activo' }
            ],
            lengthChange: true,
            lengthMenu: [15, 25, 50]
        };
        let tabla = U.dataTable('#tabla-usuarios', U.path('admin/usuarios_tabla'), filtroData, opciones);

        $('input[type=text]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                U.preventDefault(e);
                tabla.ajax.reload();
            }
        });
        $('#btn-clear').on('click', function () {
            $('#nombre').val('').focus();
            tabla.ajax.reload();
        });
        $('#btn-search').on('click', function () {
            tabla.ajax.reload();
        });
        $('#activos').on('change', function () {
            tabla.ajax.reload();
        });
        $('#tabla-usuarios tbody').on('click', 'tr', function (e) {
            U.preventDefault(e);
            var data = tabla.row($(this)).data();
            window.location = U.path('admin/usuario_edit', data.id);
        });

    });
</script>
{% endblock %}