@extends('layouts.master')

@section('title', 'Riwayat Stok')

@section('styles')
<style>
    #tblStok th, #tblStok td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; }
    #tblStok thead th { background: #f8f9fa; }
    #tblStok_wrapper .dataTables_filter label,
    #tblStok_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblStok_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Riwayat Stok</p>
            <span class="fs-13 text-muted">Gudang &rarr; Riwayat Stok</span>
        </div>
    </div>

    <div class="card custom-card">
        <div class="card-header">
            <div class="card-title mb-0">Cari Stok</div>
        </div>

        {{-- Filter --}}
        <div class="card-body border-bottom pb-3 pt-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label mb-1 small fw-semibold">Gudang</label>
                    <select id="filterGudang" class="form-select form-select-sm">
                        <option value="">Semua Gudang</option>
                        @foreach($gudangList as $g)
                            <option value="{{ $g->id }}">{{ $g->nama }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label mb-1 small fw-semibold">Nama Barang</label>
                    <select id="filterBarang" class="form-select form-select-sm" style="width:100%;"></select>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small fw-semibold">No. Serial</label>
                    <input type="text" id="filterSerial" class="form-control form-control-sm" placeholder="Cari serial...">
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small fw-semibold">No. LOT</label>
                    <input type="text" id="filterLot" class="form-control form-control-sm" placeholder="Cari LOT...">
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button id="btnCari" class="btn btn-primary btn-sm px-3 py-1 w-100">
                        <i class="bx bx-search me-1"></i>Cari
                    </button>
                    <button id="btnReset" class="btn btn-outline-secondary btn-sm px-2 py-1">
                        <i class="bx bx-reset"></i>
                    </button>
                </div>
            </div>
        </div>

        {{-- Tabel --}}
        <div class="card-body">
            <div class="table-responsive">
                <table id="tblStok" class="table table-bordered table-hover align-middle w-100">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width:40px">No</th>
                            <th>Nama Barang</th>
                            <th>Gudang</th>
                            <th class="text-center">No. LOT</th>
                            <th class="text-center">No. Serial</th>
                            <th class="text-center">Tgl. ED</th>
                            <th class="text-center">Qty Saat Ini</th>
                            <th class="text-center" style="width:120px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
const BASE_URL = '{{ rtrim(config("app.url"), "/") }}';
const ROUTES = {
    data:      '{{ route("gudang.riwayat-stok.data") }}',
    cariBarang:'{{ route("gudang.riwayat-stok.cari-barang") }}',
};

$(function () {

    // Select2 cari barang
    $('#filterBarang').select2({
        placeholder: 'Cari nama / kode barang...',
        allowClear: true,
        minimumInputLength: 1,
        ajax: {
            url: ROUTES.cariBarang,
            dataType: 'json',
            data: p => ({ q: p.term }),
            processResults: r => ({ results: r.results }),
        },
    });

    // DataTable
    const tbl = $('#tblStok').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: ROUTES.data,
            data: d => {
                d.gudang_id  = $('#filterGudang').val();
                d.barang_id  = $('#filterBarang').val();
                d.no_serial  = $('#filterSerial').val();
                d.no_lot     = $('#filterLot').val();
            },
        },
        dom: '<"d-flex align-items-center justify-content-between mb-2"l>rt<"d-flex align-items-center justify-content-between mt-2"ip>',
        pageLength: 25,
        order: [[1, 'asc']],
        columns: [
            { data: null, render: (d, t, r, m) => m.row + m.settings._iDisplayStart + 1, orderable: false, className: 'text-center' },
            { data: 'nama_barang' },
            { data: 'nama_gudang' },
            { data: 'no_lot',    className: 'text-center', defaultContent: '<span class="text-muted">—</span>' },
            { data: 'no_serial', className: 'text-center', defaultContent: '<span class="text-muted">—</span>' },
            { data: 'ed_fmt',    className: 'text-center' },
            { data: 'qty',       className: 'text-center fw-semibold' },
            { data: 'aksi',      orderable: false, className: 'text-center' },
        ],
    });

    $('#btnCari').on('click', () => tbl.ajax.reload());

    $('#btnReset').on('click', () => {
        $('#filterGudang').val('');
        $('#filterBarang').val(null).trigger('change');
        $('#filterSerial').val('');
        $('#filterLot').val('');
        tbl.ajax.reload();
    });

    // Enter key on text inputs
    $('#filterSerial, #filterLot').on('keydown', e => {
        if (e.key === 'Enter') tbl.ajax.reload();
    });

});
</script>
@endsection