@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ $module_title }} @stop

@section('page-header')
<div class="content-header row">
	<div class="content-header-left col-md-6 col-12 mb-2">
		<h3 class="content-header-title mb-0">@lang('article::posts.title')</h3>
		<div class="row breadcrumbs-top">
			<div class="breadcrumb-wrapper col-12">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="index.html">@lang('labels.home')</a>
					</li>
					<li class="breadcrumb-item"><a href="#">@lang('article::posts.title')</a>
					</li>
					<li class="breadcrumb-item active">@lang('article::posts.list-page')
					</li>
				</ol>
			</div>
		</div>
	</div>
	<div class="content-header-right text-md-right col-md-6 col-12">
		<div class="form-group">
			<x-buttons.create route='{{ route("backend.$module_name.create") }}' title="article::posts.create"/>
			<div class="btn-group mr-1 mb-1">
				<button type="button" class="btn btn-light btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-plug"></i></button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="{{ route("backend.$module_name.trashed") }}">@lang('labels.view-deleted')</a>
				</div>
			</div>
		</div>
	</div>
</div>
@stop

@section('content')
                <div class="card">
                    <div class="card-body">
                        <!-- datatable started -->
                        <div id="app-invoice-wrapper" class="">
							<table id="datatable" class="table" style="width: 100%;">
                                <thead class="border-bottom border-dark">
                                    <tr>
									<th>
										#
									</th>
									<th>
										@lang('article::posts.name')
									</th>
									<th>
										@lang('article::categories.name')
									</th>
									<th>
										@lang('article::posts.last_modified')
									</th>
									<th class="text-right">
										@lang('labels.action')
									</th>
								</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			<div class="sidenav-overlay"></div>
			<div class="drag-target"></div>
@stop




@push ('vendor-css')
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/vendors/css/vendors.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
@endpush

@push ('page-css')
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/css/pages/app-invoice.css') }}">
@endpush

@push ('vendor-scripts')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/datatables.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{asset('stack/app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <!-- END: Page Vendor JS-->
@endpush

@push ('page-scripts')
    <script src="{{asset('stack/app-assets/js/scripts/pages/app-invoice.js') }}"></script>
	<script type="text/javascript">

		$('#datatable').DataTable({
			processing: true,
			serverSide: true,
			autoWidth: true,
			responsive: true,
			ajax: '{{ route("backend.$module_name.index_data") }}',
			columns: [
				{data: 'id', name: 'id'},
				{data: 'name', name: 'name'},
				{data: 'category_name', name: 'category_name'},
				{data: 'updated_at', name: 'updated_at'},
				{data: 'action', name: 'action', orderable: false, searchable: false}
			]
		});

	</script>
@endpush