@extends('layouts.app')
@section('title','Wastes')
@include('layouts.datatable')
@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="tile">
            <div class="tile-title-w-btn">
                <h3 class="title"><i class="bi bi-list-ul"></i> {{__('lang.waste')}}</h3>
                @can('wastes.create')
                <a href="{{route('wastes.create')}}" class="btn btn-primary" title="{{__('lang.new_waste')}}">
                    <i class='bi bi-plus'></i>
                </a>
                @endcan
            </div>
            <div class="tile-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="my-table">
                        <thead class="table-primary">
                            <tr>
                                <th>#</th>
                                <th>{{__('lang.book')}}</th>
                                <th>{{__('lang.waste_type')}}</th>
                                <th>{{__('lang.date')}}</th>
                                <th>{{__('lang.details')}}</th>
                                <th>{{__('lang.action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<script type="text/javascript">
    new DataTable('#my-table', {
        processing: true,
        serverSide: true,
        "ordering": false,
        ajax: {
            url: '{{ route('wastes.dataTable') }}',
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'book', name: 'book' },
            { data: 'waste_type', name: 'waste_type' },
            { data: 'date', name: 'date' },
            { data: 'details', name: 'details' },
            { data: 'action', name: 'action', searchable: false }
        ],
    });

</script>
@endpush