@extends('layouts.app')

@section('title', 'Manage Accurate Items')
@section('breadcrumb', 'Manage Accurate Items')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Accurate
    </a>
@endsection

@section('accurate-items', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        {{-- <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h5 class="kt-portlet__head-title">
                </h5>
            </div>
            <div class="kt-portlet__head-toolbar">
                <div class="col-lg-4 m--margin-bottom-10-tablet-and-mobile">

                </div>

            </div>
        </div> --}}
        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}

        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave: true,
            ajax: "{{ route('accurate-items.table') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false},
                {data: 'name', name: 'name'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ],

        }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });
    </script>

@endsection