@extends('layouts.app')

@section('content')

<div class="card">

    <div class="card-header bg-primary text-white">

        <div class="d-flex justify-content-between">

            <h4>

                <i class="fas fa-box"></i>

                Data Barang

            </h4>

            <a href="{{ route('barang.create') }}"
               class="btn btn-light">

                <i class="fas fa-plus"></i>

                Tambah Barang

            </a>

        </div>

    </div>

    <div class="card-body">

        <table class="table table-bordered"
       id="tableBarang">

    <thead>

        <tr>

            <th>No</th>
            <th>Gambar</th>
            <th>Kode</th>
            <th>Nama</th>
            <th>Kategori</th>
            <th>Harga</th>
            <th>Aksi</th>

        </tr>

    </thead>

</table>

    </div>

</div>

@endsection

@push('js')

<script>

$('#tableBarang').DataTable({

    processing:true,

    serverSide:true,

    ajax:"{{ route('barang.index') }}",

    columns:[

        {
            data:'DT_RowIndex',
            orderable:false,
            searchable:false
        },

        {
            data:'gambar',
            name:'gambar',
            orderable:false,
            searchable:false
        },

        {
            data:'kode_barang',
            name:'kode_barang'
        },

        {
            data:'nama_barang',
            name:'nama_barang'
        },

        {
            data:'kategori',
            name:'kategori.nama_kategori'
        },

        {
            data:'harga',
            name:'harga_jual'
        },

        {
            data:'aksi',
            orderable:false,
            searchable:false
        }

    ]

});

</script>
@endpush