@extends('layout.master-laporan')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Logistik</a></li>
        <li class="breadcrumb-item"><a href="/logistik/info-stok-barang">Info Stok Barang Ready</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $nama_barang }}</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Info Stok Barang Ready ({{ $nama_barang }})</h6>
                <div class="table-responsive">
                    <table id="datatable-serverside" class="table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nama Alias</th>
                                <th>Supplier</th>
                                <th>Lokasi</th>
                                <th>QTY ()</th>
                                <th>Nomor Urut</th>
                                <th>Kode Lot</th>
                                <th>QRCODE</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="card-footer" style="text-align: right;">
                <a href="/logistik/info-stok-barang" class="btn btn-light btn-custom8">Kembali</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
    var URLs = "{{ url('logistik/info-stok-barang') }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: {
            url: URLs + '/get-data-detail/{{ $id_barang }}',
            data: function (d) {
                d.filter_gudang = $('#filter-gudang').val();
            },
        },
        searching: false,
        order: [
            [6, 'asc']
        ],
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'id'
            },
            {
                data: 'alias',
                name: 'alias'
            },
            {
                data: 'supplier',
                name: 'supplier'
            },
            {
                data: 'lokasi',
                name: 'lokasi',
                searchable: false,
                orderable: false
            },
            {
                data: 'qty',
                name: 'qty',
                render(h) {
                    return formatNumber(h, 2)
                },
                class: 'text-end',
            },
            {
                data: 'sort',
                name: 'sort',
                class: 'text-center',
            },
            {
                data: 'kode_lot',
                name: 'kode_lot',
                class: 'text-center',
            },
            {
                data: 'qrcode',
                name: 'qrcode'
            },
        ],
        dom: '<"d-flex justify-content-between mb-2 gap-2"l<"#filterContainer">f>t<"d-flex justify-content-between"ip>',
        initComplete: function() {
            // Inject filter dropdown into the DataTable
            $("#filterContainer").html(`
                <div class="d-flex align-items-center gap-1">
                    <select id="filter-gudang" onchange="dataTableReload()" class="form-select">
                        <option value="">Pilih Gudang</option>
                        {!! collect($list_gudang)->map(function($gudang) {
                            return "<option value=\"{$gudang['id']}\">{$gudang['nama']}</option>";
                        })->join('') !!}
                    </select>
                </div>
            `);
        }
    });

    function dataTableReload () {
        datatable.ajax.reload();
      };
</script>
@endpush