@extends('flatlab::layout')

@section('header_title')
Menus
@endsection

<!-- breadcrumbs start -->
@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">Menus</li>
    </ol>
</nav>
@endsection
<!-- breadcrumbs end -->
@section('main-content')
<div class="card">
	<div class="card-header">
	    <i class="fas fa-map-signs"></i> Menus
	</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="#menu-modal" id="nuevo">Nuevo Item de menu</button>
				</div>
			</div>
			<table class="display hover table table-bordered" id="menus">
				<thead>
					<tr>
						<th>Nombre</th>
						<th>Menu</th>
						<th>Padre</th>
						<th>Tipo</th>
						<th>Destino</th>
						<th>Icono</th>
						<th>Permiso</th>
						<th>Orden</th>
						<th>Acciones</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	@include('flatlab::helpers.form-modal',['accion'=>'menu-modal','titulo'=>'Menu','body'=>'<menus></menus>'])
</div>
@endsection

@push('extra_scripts')

    <script type="text/javascript">

	$(document).ready(function() {

		$('#nuevo').click(function(){
			$('.modal-title').html('Crear Menu')
			Event.$emit('crearMenu');
		});

	    menus = $('#menus').DataTable({
	        "ajax": "{{ route('getMenus') }}",
	        "columns": [
	            {data: 'nombre', name: 'nombre'},
	            {data: 'menu', name: 'menu'},
	            {data: 'padre_id', name: 'padre_id'},
	            {data: 'tipo', name: 'tipo', className: "text-center"},
	            {data: 'destino', name: 'destino'},
	            {data: 'icono', name: 'icono', className: "text-center"},
	            {data: 'permiso', name: 'permiso'},
	            {data: 'orden', name: 'orden', className: "text-center"},
	            {data: 'acciones', name: 'acciones', orderable: false, searchable: false,  className: "nowrap text-center" }
	        ]
	    }).on('click', '.acciones button', function (e) {
	    	e.preventDefault();

	    	var id = $(this).parent().data("id");

	    	if($(this).data("action") == 'editar'){
				$('.modal-title').html('Editar Menu')
				Event.$emit('editarMenu', id);
			}
        	if($(this).data("action") == 'borrar'){
        		$('.modal-title').html('Borrar Menu')
        		Event.$emit('borrarMenu', id);
        	}

   		})
	});

	</script>
@endpush
