@extends('flatlab::layout')

@section('header_title')
    Usuarios
@endsection
@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('gestion.index') }}"><i class="fa fa-home"></i> </a></li>
        <li  class="breadcrumb-item active" aria-current="page">Usuarios</li>
    </ol>
</nav>
@endsection
@section('main-content')
<div class="card">
    <div class="card-header head-border">
        <i class="fa fa-users"></i> Usuarios
    </div>
    <div class="card-body">
        <div class="adv-table table-responsive">
            <div class="clearfix">
                <div class="btn-group">
                    <button class="btn btn-primary btn-shadow" data-toggle="modal" data-target="#user-modal" id="nuevo">Nuevo Usuario</button>
                </div>
            </div>
            <table class="display nowrap hover table table-bordered" id="users">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Email</th>
                        <th>Creado</th>
                        <th>Roles</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@include('flatlab::helpers.form-modal',['accion'=>'user-modal','titulo'=>'Usuario','body'=>'<usuarios></usuarios>'])
@endsection
@push('extra_scripts')
    <script type="text/javascript">
    $(document).ready(function() {
        $('#nuevo').click(function(){
            $('.modal-title').html('Crear Usuario')
			Event.$emit('crearUsuario');
		});
        users = $('#users').DataTable({
            "ajax": "{{ route('getUsers') }}",
            "columns": [
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'created_at', name: 'created_at'},
                {data: 'roles', name: 'roles'},
                {data: 'acciones', name: 'acciones', orderable: false, searchable: false,  className: "text-center nowrap" }
            ]
        }).on('click', '.acciones button', function (e) {
            e.preventDefault();
            var usuario = $(this).parent().data("user");
            if($(this).data("action") == 'editar'){
				$('.modal-title').html('Editar Usuario')
				Event.$emit('editarUsuario', usuario);
            }
            if($(this).data("action") == 'borrar'){
                $('.modal-title').html('Borrar Usuario')
                Event.$emit('borrarUsuario', usuario.id);
            }
        })
    });
    </script>
@endpush


