@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                    REKAP STOK BARANG
                </div>

                <div class="col">
                    @include('components.alert')
                </div>

                <div class="table-responsive">
                    <table class="table align-middle table-hover display" id="list_rpstbr">
                        <thead style="background:#00b7bd4f;">
                            <tr>
                                <th style="width:60px;">No</th>
                                <th style="min-width:250px;">Nama Barang</th>
                                <th style="width:140px;">Stok Saat Ini</th>
                                <th style="width:120px;">Status Stok</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($items ?? [] as $i => $item)
                                <tr>
                                    <td>{{ $i + 1 }}</td>
                                    <td>{{ $item->nama_barang }}</td>
                                    <td>
                                        {{ $item->stock_saat_ini }}
                                        <span class="text-muted small">{{ $item->unit_name ?? $item->unit }}</span>
                                    </td>
                                    <td>
                                        @php $st = $item->status_stok; @endphp
                                        @if($st === 'habis')
                                            <span class="badge bg-danger">Habis</span>
                                        @elseif($st === 'menipis')
                                            <span class="badge bg-warning-custom text-dark">Menipis</span>
                                        @else
                                            <span class="badge bg-success">Aman</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted">Tidak ada data barang.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        const tableId = '#list_rpstbr';
        if ($.fn.DataTable.isDataTable(tableId)) $(tableId).DataTable().destroy();
        $(tableId).DataTable({
            order: [],
            columnDefs: [{ orderable: false, targets: [0] }],
            pageLength: 25,
            autoWidth: false,
            language: {
                emptyTable:    "Tidak ada data yang tersedia pada tabel ini",
                info:          "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                infoEmpty:     "Menampilkan 0 sampai 0 dari 0 data",
                infoFiltered:  "(difilter dari _MAX_ total data)",
                lengthMenu:    "Tampilkan _MENU_ baris",
                loadingRecords:"Memuat...",
                processing:    "Memproses...",
                search:        "Cari :",
                zeroRecords:   "Data tidak ditemukan",
                paginate: {
                    first: "Pertama", last: "Terakhir",
                    next: "Selanjutnya", previous: "Sebelumnya"
                }
            }
        });
    });
</script>
<style>
    .bg-warning-custom {
        background-color: #f0ad4e;
        color: #ffffff;
    }
</style>
@endpush