@extends('layouts.app')

@section('title',"Modulos")

@section('content')

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

<div class="card">
	<div class="card-header header-elements-inline">
		<h5 class="card-title"><i class="icon-clipboard "></i>Modules user</h5>
		<div class="header-elements">
			<div class="list-icons">
        		<a class="list-icons-item" data-action="collapse"></a>
        		<a class="list-icons-item" data-action="reload"></a>
        		<a class="list-icons-item" data-action="remove"></a>
        	</div>
    	</div>
	</div>	
	<div class="card-body">
		<div class="row">
			<div class="col-6">
				<a href="#" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal">
				  <i class="icon-database-add "></i> Crear Module
				</a>					
			</div>
		</div>
	</div>
	<table class="table table-bordered table-hover datatable">
		<thead>
			<tr>
				<th>id</th>
				<th>Name </th>
				<th>Url </th>
				<th>Accion</th>
			</tr>
		</thead>
	</table>
</div>
@include('User.views.add.module')
<div class="response-ajax"></div>
	@section('scripts')
		<script>
			const url ="{{url('user/config/modules')}}";
			const columns = [
				        {data: 'id'},
				        {data: 'name'},
				        {data: 'url'},
				        {data: 'action'},
				    ];
			let rurl = document.querySelector('#reload');
			const ajaxurl = async () => {
			    $.animation('body');
				$.ajax({
					url: url,
					type: 'POST',
					dataType: 'json',
					data: {action: 'reloadurl',_token: $('meta[name="csrf-token"]').attr('content')},
				})	
				.done(function(data) {
					$.animationoff('body');
					if (jQuery.isEmptyObject(data.error)) {
						swal({title:"Datos sincronizados con exito",icon:"success"});
						$('.datatable').DataTable().ajax.reload();
					}
				})
				.fail(function() {
					console.log("error");
				})
			}
			rurl.addEventListener('click',ajaxurl)

		</script>
		<script src="{!! asset('assets/datatables/datatables_basic.js') !!}"></script>
	@endsection
@endsection