@props(['title','route','create'=>true,'datatable','parameters'=>[]])
@extends('dashboard.layouts.default')
@section('title',$title)

@push('styles')
    {{ $header ?? '' }}
    <!-- Internal Data table css -->

    <link href="{{asset('dashboard/plugins/datatable/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet"/>
    <link href="{{asset('dashboard/plugins/datatable/css/buttons.bootstrap4.min.css')}}" rel="stylesheet">
    <link href="{{asset('dashboard/plugins/datatable/css/responsive.bootstrap4.min.css')}}" rel="stylesheet"/>
    <link href="{{asset('dashboard/plugins/datatable/css/jquery.dataTables.min.css')}}" rel="stylesheet">
    <link href="{{asset('dashboard/plugins/datatable/css/responsive.dataTables.min.css')}}" rel="stylesheet">

@endpush


@section('breadcrumb-right')
    <h4 class="content-title mb-0 my-auto">{{$title}}</h4>

    {{$rightBreadcrumb ?? ''}}
@endsection
@section('breadcrumb-left')
    {{$leftBreadcrumb ?? ''}}
@endsection

@section('content')

    <div class="col-xl-12">

        <div class="card card-primary card-outline mg-b-20">

            <div class="card-header pb-0">
                <div class="d-flex justify-content-between">
                    <h4 class="card-title mg-b-0"> {{t_('table')}} {{$title}}</h4>
                    @if($create)
                        <a href="{{route("{$route}.create",$parameters)}}"
                           class="btn btn-primary">
                            <i class="icon-plus2"></i>
                            <span>  {{ t_('Create') }}</span>
                        </a>
                    @endif

                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <div id="example_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <div class="col-sm-12">
                            {{$datatable->table(['class'=>'table table-bordered datatable-ajax'])}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{ $slot }}
@endsection
@push('scripts')
    <!-- Required datatable js -->
    <script src="{{asset('dashboard/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/dataTables.dataTables.min.js')}}"></script>
    <script src="{{asset('dashboard/vendors/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/responsive.dataTables.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/jquery.dataTables.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/jszip.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/pdfmake.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/vfs_fonts.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/buttons.print.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('dashboard/plugins/datatable/js/responsive.bootstrap4.min.js')}}"></script>
    <!--Internal  Datatable js -->
    <script src="{{asset('dashboard/js/table-data.js')}}"></script>

    {{ $datatable->scripts() }}

    <script>
        window.routes = '{{ route($route.'.index') }}/';
    </script>
    <script src="{{ asset('dashboard/helper.js') }}"></script>
    {{ $footer ?? '' }}
@endpush