@extends('layouts.master')
@section('title','Komoditi')
@section('content')
        
        
        <!-- Content -->
        <div class="content">
            <div class="animated fadeIn">
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <strong class="card-title">Data Transaksi Sampah</strong>
                            </div>
                            <div class="card-body">
                               
                                <a href="{{ route('waste_transaction.create') }}" class="btn btn-primary mb-3">Tambah</a>
                                <div class="table-responsive">
                                <table id="dataTable" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Tanggal</th>
                                            <th>Lokasi</th>
                                            <th>Kategori</th>
                                            <th>IN/OUT</th>
                                            <th>Tipe Proses</th>
                                            <th>Berat (kg)</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                   
                                </table>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->
        <!-- /.content -->
@section('js')
<script>
  $(document).ready(function() {
    var t = $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('waste_transaction.getData') }}",
        columns: [
            {
                data: null,
                name: 'rownum',
                orderable: false,
                searchable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: 'trx_date', name: 'trx_date' },
            { data: 'nama_lokasi', name: 'nama_lokasi' },
            { data: 'nama_kategori', name: 'nama_kategori' },
            { data: 'direction', name: 'direction' },
            { data: 'name_process_type', name: 'name_process_type' },
            { data: 'weight_kg', name: 'weight_kg' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });
});

</script>
@endsection
@endsection