@extends('layouts.master')

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

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblRekap th, #tblRekap td,
    #tblDetail th, #tblDetail td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblRekap thead th, #tblDetail thead th { background: #f8f9fa; }
    #tblRekap_wrapper .dataTables_filter label,
    #tblRekap_wrapper .dataTables_length label,
    #tblDetail_wrapper .dataTables_filter label,
    #tblDetail_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblRekap_wrapper .dataTables_info,
    #tblDetail_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
    .placeholder-state { padding: 48px 24px; text-align: center; color: #adb5bd; }
    .placeholder-state i { font-size: 2.8rem; margin-bottom: 10px; display: block; }
    .placeholder-state p { margin: 0; font-size: .92rem; }
</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">Kartu Stok</p>
            <span class="fs-13 text-muted">Gudang &rarr; Kartu Stok</span>
        </div>
    </div>

    <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Kartu Stok</div>
                    <div class="dropdown">
                        <button class="btn btn-secondary btn-sm px-2 py-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="bx bx-download me-1"></i> Unduh
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" id="btnExportExcel"><i class="bx bx-spreadsheet me-2 text-success"></i>Excel (.xlsx)</a></li>
                            <li><a class="dropdown-item" href="#" id="btnExportPdf"><i class="bx bx-download me-2 text-danger"></i>PDF</a></li>
                        </ul>
                    </div>
                </div>

                <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 <span class="text-danger">*</span></label>
                            <select id="filterGudang" class="form-select form-select-sm" style="width:100%;">
                                <option value="">-- Pilih Gudang --</option>
                                @foreach($gudangList as $g)
                                    <option value="{{ $g->id }}">{{ strtoupper($g->nama) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 small fw-semibold">Nama / Kode Barang <span class="text-danger">*</span></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">Dari</label>
                            <input type="text" id="filterDari" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai</label>
                            <input type="text" id="filterSampai" class="form-control form-control-sm flatpickr" placeholder="dd-mm-yyyy">
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary btn-sm w-100" id="btnFilter">
                                <i class="bx bx-search me-1"></i> Cari
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div id="stateRekapEmpty" class="placeholder-state">
                        <i class="bx bx-bar-chart-square"></i>
                        <p>Pilih <strong>barang</strong> dan <strong>gudang</strong> terlebih dahulu,<br>lalu klik <strong>Tampilkan</strong> untuk melihat rekap saldo.</p>
                    </div>
                    <div id="rekapTableWrap" class="d-none p-3">
                        <div class="table-responsive">
                            <table id="tblRekap" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" style="width:45px">No.</th>
                                        <th style="width:130px">Tanggal &amp; Waktu</th>
                                        <th class="text-center" style="width:70px">Jenis</th>
                                        <th>Keterangan</th>
                                        <th>Gudang</th>
                                        <th class="text-center">Total Masuk</th>
                                        <th class="text-center">Total Keluar</th>
                                        <th class="text-center">Saldo</th>
                                        <th></th>
                                        <th class="text-center" style="width:50px">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
@endsection

{{-- Modal LOT dari Rekap --}}
<div class="modal fade" id="modalRekapLot" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold mb-0" id="modalLotTitle"></h6>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0" style="font-size:.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th class="text-center" style="width:36px">#</th>
                                <th class="text-center" style="width:70px">Jenis</th>
                                <th>LOT / Serial / ED</th>
                                <th class="text-center" style="width:80px">Qty</th>
                                <th class="text-center" style="width:80px">Saldo</th>
                            </tr>
                        </thead>
                        <tbody id="modalLotBody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL = "{{ url('/') }}";
let tblRekap;

function referensiUrl(type, id) {
    if (!id) return null;
    const map = {
        penerimaan_barang      : `${BASE_URL}/gudang/penerimaan-barang/${id}`,
        penggunaan_barang      : `${BASE_URL}/gudang/penggunaan-barang/${id}`,
        penjualan              : `${BASE_URL}/penjualan/${id}`,
        permintaan_pengeluaran : `${BASE_URL}/permintaan-pengeluaran/${id}`,
    };
    return map[type] || null;
}

function defaultDari()   { const d = new Date(); return `01-${String(d.getMonth()+1).padStart(2,'0')}-${d.getFullYear()}`; }
function defaultSampai() { const d = new Date(); return `${String(d.getDate()).padStart(2,'0')}-${String(d.getMonth()+1).padStart(2,'0')}-${d.getFullYear()}`; }

$(function () {
    const fpOpts = { dateFormat: 'd-m-Y' };
    flatpickr('#filterDari',    { ...fpOpts, defaultDate: defaultDari() });
    flatpickr('#filterSampai',  { ...fpOpts, defaultDate: defaultSampai() });

    $('#filterGudang').select2({ placeholder: '-- Pilih Gudang --', allowClear: true, width: '100%' });

    $('#filterBarang').prop('disabled', true).select2({
        placeholder: '-- Pilih Gudang dulu --',
        allowClear: true,
        width: '100%',
        ajax: {
            url: BASE_URL + '/gudang/kartu-stok/cari-barang',
            dataType: 'json',
            delay: 250,
            data: d => ({ q: d.term, gudang_id: $('#filterGudang').val() }),
            processResults: data => ({
                results: data.map(b => ({ id: b.id, text: b.kode + ' — ' + b.nama }))
            }),
        },
    });

    $('#filterGudang').on('change', function () {
        const gudangId = $(this).val();
        $('#filterBarang').val(null).trigger('change');
        if (gudangId) {
            $('#filterBarang').prop('disabled', false)
                .data('select2').$container.find('.select2-selection__placeholder').text('-- Pilih Barang --');
        } else {
            $('#filterBarang').prop('disabled', true)
                .data('select2').$container.find('.select2-selection__placeholder').text('-- Pilih Gudang dulu --');
        }
    });

    // Init DataTable sekali saat page load, tapi tidak auto-fetch (deferLoading: 0)
    tblRekap = $('#tblRekap').DataTable({
        processing: false,
        serverSide: false,
        retrieve: true,
        dom: '<"d-flex align-items-center mb-2"l>rt<"d-flex justify-content-between mt-2"ip>',
        ajax: {
            url: BASE_URL + '/gudang/kartu-stok/rekap',
            dataSrc: 'data',
            data: function (d) {
                d.barang         = $('#filterBarang').val();
                d.gudang         = $('#filterGudang').val();
                d.tanggal_dari   = $('#filterDari').val();
                d.tanggal_sampai = $('#filterSampai').val();
            },
        },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center',
              render: (_, __, ___, meta) => meta.row + meta.settings._iDisplayStart + 1 },
            { data: 'tanggal' },
            { data: 'jenis', className: 'text-center',
              render: val => val === 'masuk'
                ? '<span class="badge bg-success">Masuk</span>'
                : '<span class="badge bg-danger">Keluar</span>' },
            { data: 'keterangan',
              render: (val, _, row) => {
                const url = referensiUrl(row.referensi_type, row.referensi_id);
                return url ? `<a href="${url}" target="_blank">${val}</a>` : val;
              } },
            { data: 'nama_gudang' },
            { data: 'total_masuk', className: 'text-center',
              render: (val, _, row) => val > 0
                ? `<span class="fw-semibold text-success">${val}</span> <small class="text-muted">${row.satuan}</small>`
                : `<span class="text-muted">—</span>` },
            { data: 'total_keluar', className: 'text-center',
              render: (val, _, row) => val > 0
                ? `<span class="fw-semibold text-danger">${val}</span> <small class="text-muted">${row.satuan}</small>`
                : `<span class="text-muted">—</span>` },
            { data: 'qty_saldo', className: 'text-center',
              render: (val, _, row) => `<span class="fw-semibold">${val}</span> <small class="text-muted">${row.satuan}</small>` },
            { data: 'tanggal_sort', visible: false, searchable: false },
            { data: null, orderable: false, searchable: false, className: 'text-center',
              render: (_, __, row) =>
                `<button class="btn btn-info btn-sm px-2 py-1 btn-lihat-lot"
                    data-barang-id="${row.barang_id}" data-gudang-id="${row.gudang_id}"
                    data-ref-type="${row.referensi_type}" data-ref-id="${row.referensi_id}"
                    data-label="${row.keterangan}" title="Lihat LOT">
                    <i class="bx bx-layer fs-14"></i>
                </button>` },
        ],
        order: [[8, 'asc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#btnFilter').on('click', function () {
        if (!$('#filterBarang').val() || !$('#filterGudang').val()) {
            Swal.fire({ icon: 'warning', title: 'Filter Wajib Diisi', text: 'Pilih barang dan gudang terlebih dahulu.', timer: 2500, showConfirmButton: false });
            return;
        }
        $('#stateRekapEmpty').addClass('d-none');
        $('#rekapTableWrap').removeClass('d-none');
        tblRekap.ajax.reload();
    });

    function buildExportUrl(format) {
        if (!$('#filterBarang').val() || !$('#filterGudang').val()) {
            Swal.fire({ icon: 'warning', title: 'Filter Wajib Diisi', text: 'Pilih barang dan gudang terlebih dahulu.', timer: 2500, showConfirmButton: false });
            return null;
        }
        const params = new URLSearchParams();
        params.set('format', format);
        params.set('barang', $('#filterBarang').val());
        params.set('gudang', $('#filterGudang').val());
        const dari   = $('#filterDari').val();
        const sampai = $('#filterSampai').val();
        if (dari)   params.set('tanggal_dari', dari);
        if (sampai) params.set('tanggal_sampai', sampai);
        return BASE_URL + '/gudang/kartu-stok/export?' + params.toString();
    }
    $('#btnExportExcel').on('click', function(e) { e.preventDefault(); const u = buildExportUrl('excel'); if (u) window.location.href = u; });
    $('#btnExportPdf').on('click',   function(e) { e.preventDefault(); const u = buildExportUrl('pdf');   if (u) window.location.href = u; });

    // Modal LOT dari rekap
    $(document).on('click', '.btn-lihat-lot', function () {
        const barangId  = $(this).data('barang-id');
        const gudangId  = $(this).data('gudang-id');
        const refType   = $(this).data('ref-type');
        const refId     = $(this).data('ref-id');
        const label     = $(this).data('label');

        $('#modalLotTitle').text(label);
        $('#modalLotBody').html('<tr><td colspan="7" class="text-center py-3"><span class="spinner-border spinner-border-sm me-1"></span>Memuat...</td></tr>');
        $('#modalRekapLot').modal('show');

        $.get(BASE_URL + '/gudang/kartu-stok/rekap-lot', {
            barang_id: barangId, gudang_id: gudangId,
            referensi_type: refType, referensi_id: refId,
        }, function (data) {
            if (!data.length) {
                $('#modalLotBody').html('<tr><td colspan="7" class="text-center text-muted">Tidak ada data LOT.</td></tr>');
                return;
            }
            let rows = '';
            data.forEach((r, i) => {
                const kondisiBadge = r.jenis === 'masuk'
                    ? '<span class="badge bg-success">Masuk</span>'
                    : '<span class="badge bg-danger">Keluar</span>';
                const lotParts = [];
                if (r.no_lot && r.no_lot !== '—')    lotParts.push(`<span class="badge bg-primary-transparent text-primary">LOT: ${r.no_lot}</span>`);
                if (r.no_serial && r.no_serial !== '—') lotParts.push(`<span class="badge bg-info-transparent text-info">SN: ${r.no_serial}</span>`);
                if (r.tanggal_kedaluwarsa && r.tanggal_kedaluwarsa !== '—') lotParts.push(`<span class="badge bg-warning-transparent text-warning">ED: ${r.tanggal_kedaluwarsa}</span>`);
                const qty = r.qty_masuk > 0
                    ? `<span class="fw-semibold text-success">${r.qty_masuk}</span>`
                    : `<span class="fw-semibold text-danger">${r.qty_keluar}</span>`;
                rows += `<tr>
                    <td class="text-center text-muted">${i + 1}</td>
                    <td>${kondisiBadge}</td>
                    <td>${lotParts.length ? lotParts.join(' ') : '<span class="text-muted">—</span>'}</td>
                    <td class="text-center">${qty} <small class="text-muted">${r.satuan}</small></td>
                    <td class="text-center fw-semibold">${r.qty_saldo} <small class="text-muted fw-normal">${r.satuan}</small></td>
                </tr>`;
            });
            $('#modalLotBody').html(rows);
        });
    });

});

function initRekap() {
    if (rekapReady) return;
    rekapReady = true;

    tblRekap = $('#tblRekap').DataTable({
        processing: true, serverSide: true,
        dom: '<"d-flex align-items-center mb-2"l>rt<"d-flex justify-content-between mt-2"ip>',
        ajax: {
            url: BASE_URL + '/gudang/kartu-stok/rekap',
            data: d => {
                d.barang         = $('#filterBarang').val();
                d.gudang         = $('#filterGudang').val();
                d.tanggal_dari   = $('#filterDari').val();
                d.tanggal_sampai = $('#filterSampai').val();
            }
        },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center',
              render: (_, __, ___, meta) => meta.row + meta.settings._iDisplayStart + 1 },
            { data: 'tanggal', orderData: [9] },
            { data: 'jenis', className: 'text-center',
              render: val => val === 'masuk'
                ? '<span class="badge bg-success">Masuk</span>'
                : '<span class="badge bg-danger">Keluar</span>' },
            { data: 'keterangan',
              render: (val, _, row) => {
                const url = referensiUrl(row.referensi_type, row.referensi_id);
                return url ? `<a href="${url}" target="_blank">${val}</a>` : val;
              } },
            { data: 'nama_gudang' },
            { data: 'total_masuk', className: 'text-center',
              render: (val, _, row) => val > 0
                ? `<span class="fw-semibold text-success">${val}</span> <small class="text-muted">${row.satuan}</small>`
                : `<span class="text-muted">—</span>` },
            { data: 'total_keluar', className: 'text-center',
              render: (val, _, row) => val > 0
                ? `<span class="fw-semibold text-danger">${val}</span> <small class="text-muted">${row.satuan}</small>`
                : `<span class="text-muted">—</span>` },
            { data: 'qty_saldo', className: 'text-center',
              render: (val, _, row) => `<span class="fw-semibold">${val}</span> <small class="text-muted">${row.satuan}</small>` },
            { data: 'tanggal_sort', visible: false, searchable: false },
            { data: null, orderable: false, searchable: false, className: 'text-center',
              render: (_, __, row) =>
                `<button class="btn btn-info btn-sm px-2 py-1 btn-lihat-lot"
                    data-barang-id="${row.barang_id}" data-gudang-id="${row.gudang_id}"
                    data-ref-type="${row.referensi_type}" data-ref-id="${row.referensi_id}"
                    data-label="${row.keterangan}" title="Lihat LOT">
                    <i class="bx bx-layer fs-14"></i>
                </button>` },
        ],
        order: [[9, 'asc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });
}

</script>
@endsection