@extends('layouts.admin')
@section('content-title')
	{{ __('categories.Categories') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.categories')}}
@endsection
@section('css')
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<section>
		<h2 class="page-header">{{ __('categories.List of categories')}}</h2>
		<div class="row mb-3">
			<div class="col-sm-12 col-md-2">
				<div class="pull-left">
					<a href="{{ route('admin.categories.new',['id'=>null])}}" class="btn btn-success">{{ __('categories.New Category') }}</a>
				</div>
			</div>
		</div>

		@if(session()->has('success'))
		<div class="alert alert-success alert-dismissible fade show" role="alert">
			{{ session()->get('success') }}
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		@endif

		@if(session()->has('error'))
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
			{{ session()->get('error') }}
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		@endif

		<table class="table table-responsive-xl table-bordered table-striped" id="datatable">
			<thead>
				<tr>
					<th scope="col" width="10">#</th>
					<th scope="col">{{ __('categories.Libelle') }}</th>
					<th scope="col" width="270"></th>
				</tr>
			</thead>
		</table>
	</section>
</div>
@endsection
@section('js')

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#datatable").DataTable({
      		"info": false,
	      	"language": {
	            "sProcessing":     "<div class=\"loading2\">Veuillez patienter SVP!</div>",
	            "sSearch":         "Rechercher&nbsp;:",
	            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
	            "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
	            "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
	            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
	            "sInfoPostFix":    "",
	            "sLoadingRecords": "Chargement en cours...",
	            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
	            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
	            "oPaginate": {
	                "sFirst":      "Premier",
	                "sPrevious":   "Pr&eacute;c&eacute;dent",
	                "sNext":       "Suivant",
	                "sLast":       "Dernier"
	            },
	            "oAria": {
	                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
	                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
	            }
	        },
      		"processing": true,
      		"serverSide": true,
      		"ajax":{
		        "url": "{{ route('admin.categories.ajax') }}",
		        "dataType": "json",
		        "type": "POST"
	      	},
      		"order": [[1, 'asc']],
      		"columns": [
	          	{ "data": "id", "orderable": false},
	          	{ "data": "libelle" },
	          	{ "data": "options", "orderable": false}
	      	]
    	});
	});
</script>
@endsection