@extends('flatlab::layout')

@section('header_title')
    Roles
@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">Roles</li>
    </ol>
</nav>
@endsection
@section('main-content')
<div class="card">
    <div class="card-header head-border">
        <i class="fa fa-id-card"></i> Roles
    </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="#rol-modal" id="nuevo">Nuevo Rol</button>
                </div>
            </div>
            <table class="display nowrap hover table table-bordered" id="roles">
                <thead>
                    <tr>
                        <th>Rol</th>
                        <th>Permiso</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@include('flatlab::helpers.form-modal',['accion'=>'rol-modal','titulo'=>'Rol','body'=>'<roles></roles>'])
@endsection
@push('extra_scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('#nuevo').click(function(){
            $('.modal-title').html('Crear Rol')
			Event.$emit('crearRol');
		});
        roles = $('#roles').DataTable({
            "ajax": "{{ route('getRoles') }}",
            "columns": [
                {data: 'name', name: 'name'},
                {data: 'permisos', name: 'permisos'},
                {data: 'acciones', name: 'acciones', orderable: false, searchable: false,  className: "text-center nowrap" }
            ]
        }).on('click', '.acciones button', function (e) {
            e.preventDefault();
            var rol = $(this).parent().data("rol");
            if($(this).data("action") == 'editar'){
				$('.modal-title').html('Editar Rol')
				Event.$emit('editarRol', rol);
            }
            if($(this).data("action") == 'borrar'){
                $('.modal-title').html('Borrar Rol')
                Event.$emit('borrarRol', rol.id);
            }
        })
    });
</script>
@endpush
