@extends('layouts.adminlte')

@section('title', 'STOK GUDANG PROJECT')
@section('page_title', 'STOK GUDANG PROJECT')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title m-0">Monitoring Stok Gudang</h3>
        </div>
        <div class="card-body">
            @include('masterproject::partials.warehouse_nav', [
                'warehouseActive' => 'stock',
                'warehouseActionButton' => '<a href="' . route('master_project.po.page') . '" class="btn btn-outline-secondary btn-sm"><i class="fas fa-file-invoice-dollar me-1"></i>Purchase Order</a><button type="button" class="btn btn-success btn-sm" id="btnExportStockXlsx"><i class="fas fa-file-excel me-1"></i>Export XLSX</button>',
            ])
            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label class="form-label">Filter Gudang</label>
                    <select class="form-select" id="stockGudangFilter"></select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button class="btn btn-primary w-100" id="btnLoadStock">Load Stok</button>
                </div>
            </div>
            <div class="table-responsive">
                <table id="stockTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>Gudang</th>
                        <th>Kode Barang</th>
                        <th>Nama Barang</th>
                        <th>Status Baru</th>
                        <th>Stok</th>
                        <th>Satuan Dasar</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between gap-2">
                <h3 class="card-title m-0">Kartu Stok</h3>
                <button class="btn btn-success btn-sm" id="btnExportStockCardXlsx" type="button" disabled>
                    <i class="fas fa-file-excel me-1"></i>Export Kartu Stok
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-light border mb-3" id="stockCardTitle">Pilih baris stok untuk melihat pergerakan barang.</div>
            <div class="alert alert-secondary border mb-3" id="stockCardSummary" style="display:none"></div>
            <div class="table-responsive">
                <table id="stockCardTable" class="table table-bordered table-sm align-middle w-100">
                    <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Project</th>
                        <th>Referensi</th>
                        <th class="text-end">IN (Dasar)</th>
                        <th class="text-end">OUT (Dasar)</th>
                        <th class="text-end">Saldo Akhir (Dasar)</th>
                        <th>Catatan</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr class="table-light fw-semibold">
                        <td colspan="2">Grand Total</td>
                        <td id="stockCardFootRef" class="small text-muted">-</td>
                        <td id="stockCardTotalIn" class="text-end">0</td>
                        <td id="stockCardTotalOut" class="text-end">0</td>
                        <td id="stockCardBalanceEnd" class="text-end">0</td>
                        <td id="stockCardNet" class="small text-muted">Net: 0</td>
                    </tr>
                    </tfoot>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const fmtId = (n) => Number(n || 0).toLocaleString('id-ID');
            const fmtDate = (v) => {
                const s = (v || '').toString().trim();
                if (!s) return '-';
                // Expect YYYY-MM-DD, but keep original if not matching.
                const m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
                if (!m) return s;
                return `${m[3]}/${m[2]}/${m[1]}`;
            };
            const cardState = { gudang_id: null, barang_id: null };
            const stockTable = $('#stockTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (r) => `${r.gudang_code || ''} - ${r.gudang_name || ''}` },
                    { data: 'barang_code' },
                    { data: 'barang_name' },
                    { data: null, render: (r) => {
                        const bucket = Number(r.new_bucket || 0);
                        if (!bucket) return '-';
                        const cls = bucket === 1 ? 'danger' : bucket === 3 ? 'warning' : 'info';
                        return `<span class="badge text-bg-${cls}">NEW ${bucket} Hari</span><div class="small text-muted mt-1">${r.last_in_date || '-'}</div>`;
                    }},
                    { data: 'qty_base_total', render: (v) => fmtId(v) },
                    { data: 'base_satuan_name', render: (v) => v || '-' },
                    { data: null, orderable: false, render: () => '<button class="btn btn-sm btn-outline-primary btn-card">Kartu Stok</button>' }
                ]
            });
            const stockCardTable = $('#stockCardTable').DataTable({
                paging: false,
                searching: false,
                info: false,
                responsive: true,
                data: [],
                columns: [
                    { data: 'movement_date', render: (v) => fmtDate(v) },
                    { data: null, render: (r) => r.project_code ? `${r.project_code} - ${r.project_name || ''}` : '-' },
                    { data: 'reference_number', render: (v, t, r) => {
                        const type = (r.movement_type || '').toString().toUpperCase() === 'IN' ? 'IN' : 'OUT';
                        const badge = `<span class="badge text-bg-${type === 'IN' ? 'success' : 'danger'} me-1">${type}</span>`;
                        const ref = (v || '-').toString();
                        const meta = (r.reference_type || '').toString();
                        const rab = r.rab_item_code ? `${r.rab_item_code} - ${r.rab_item_name || ''}` : '';
                        const metaLine = [meta, rab].filter(Boolean).join(' | ');
                        return `${badge}${ref}${metaLine ? `<div class="small text-muted mt-1">${metaLine}</div>` : ''}`;
                    }},
                    { data: null, className: 'text-end', render: (r) => {
                        const type = (r.movement_type || '').toString().toUpperCase();
                        if (type !== 'IN') return '-';
                        return `<span class="text-success fw-semibold">${fmtId(r.qty_base)}</span> ${r.base_satuan_name || ''}`;
                    }},
                    { data: null, className: 'text-end', render: (r) => {
                        const type = (r.movement_type || '').toString().toUpperCase();
                        if (type === 'IN') return '-';
                        return `<span class="text-danger fw-semibold">${fmtId(r.qty_base)}</span> ${r.base_satuan_name || ''}`;
                    }},
                    { data: null, className: 'text-end', render: (r) => `${fmtId(r.balance_base)} ${r.base_satuan_name || ''}` },
                    { data: 'notes', render: (v) => (v || '-').toString() }
                ]
            });
            let gudangRows = [];
            const fillGudang = () => {
                const options = ['<option value="">Semua Gudang</option>'];
                gudangRows.forEach((row) => options.push(`<option value="${row.id}">${row.code} - ${row.name}</option>`));
                $('#stockGudangFilter').html(options.join(''));
            };
            const loadGudang = () => $.getJSON('{{ route('master_gudang.data') }}').done((resp) => {
                gudangRows = resp.data || [];
                fillGudang();
            });
            const loadStock = () => $.getJSON('{{ route('master_project.warehouse_stocks.data') }}', {
                gudang_id: $('#stockGudangFilter').val() || ''
            }).done((resp) => {
                stockTable.clear().rows.add(resp.data || []).draw();
                stockCardTable.clear().draw();
                $('#stockCardTitle').text('Pilih baris stok untuk melihat pergerakan barang.');
                $('#stockCardSummary').hide().text('');
                $('#stockCardFootRef').text('-');
                $('#stockCardTotalIn').text('0');
                $('#stockCardTotalOut').text('0');
                $('#stockCardBalanceEnd').text('0');
                $('#stockCardNet').text('Net: 0');
                cardState.gudang_id = null;
                cardState.barang_id = null;
                $('#btnExportStockCardXlsx').prop('disabled', true);
            });
            $('#btnLoadStock').on('click', loadStock);
            $(document).on('click', '#btnExportStockXlsx', function () {
                const params = new URLSearchParams();
                const gudangId = ($('#stockGudangFilter').val() || '').toString();
                if (gudangId) {
                    params.set('gudang_id', gudangId);
                }
                const url = `{{ route('master_project.warehouse_stock.export_xlsx') }}${params.toString() ? '?' + params.toString() : ''}`;
                window.open(url, '_blank');
            });
            $('#stockTable').on('click', '.btn-card', function () {
                const row = stockTable.row($(this).closest('tr')).data();
                if (!row) return;
                $('#stockCardTitle').text(`Kartu Stok | ${row.gudang_code || ''} - ${row.gudang_name || ''} | ${row.barang_code || ''} - ${row.barang_name || ''}`);
                cardState.gudang_id = row.gudang_id;
                cardState.barang_id = row.barang_id;
                $('#btnExportStockCardXlsx').prop('disabled', false);
                $.getJSON('{{ route('master_project.warehouse_stocks.card') }}', {
                    gudang_id: row.gudang_id,
                    barang_id: row.barang_id
                }).done((resp) => {
                    const rows = resp.data || [];
                    stockCardTable.clear().rows.add(rows).draw();

                    // Grand total uses base unit to avoid mixing different units.
                    let totalInBase = 0;
                    let totalOutBase = 0;
                    let lastBalance = 0;
                    let baseName = (row.base_satuan_name || '').toString();
                    rows.forEach((r) => {
                        const qtyBase = Number(r.qty_base || 0);
                        if ((r.movement_type || '').toString() === 'IN') totalInBase += qtyBase;
                        else totalOutBase += qtyBase;
                        lastBalance = Number(r.balance_base || lastBalance || 0);
                        if (!baseName) baseName = (r.base_satuan_name || '').toString();
                    });
                    const net = totalInBase - totalOutBase;

                    // Footer grand total (always visible at bottom of table).
                    $('#stockCardFootRef').text(baseName ? `Satuan dasar: ${baseName}` : '-');
                    $('#stockCardTotalIn').text(baseName ? `${fmtId(totalInBase)} ${baseName}` : fmtId(totalInBase));
                    $('#stockCardTotalOut').text(baseName ? `${fmtId(totalOutBase)} ${baseName}` : fmtId(totalOutBase));
                    $('#stockCardBalanceEnd').text(baseName ? `${fmtId(lastBalance)} ${baseName}` : fmtId(lastBalance));
                    $('#stockCardNet').text(baseName ? `Net: ${fmtId(net)} ${baseName}` : `Net: ${fmtId(net)}`);
                    $('#stockCardSummary')
                        .html(`
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <span class="badge text-bg-success">IN ${fmtId(totalInBase)} ${baseName}</span>
                                <span class="badge text-bg-danger">OUT ${fmtId(totalOutBase)} ${baseName}</span>
                                <span class="badge text-bg-dark">Net ${fmtId(net)} ${baseName}</span>
                                <span class="badge text-bg-primary">Saldo Akhir ${fmtId(lastBalance)} ${baseName}</span>
                            </div>
                        `)
                        .show();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal memuat kartu stok.', 'error');
                });
            });

            $('#btnExportStockCardXlsx').on('click', function () {
                if (!cardState.gudang_id || !cardState.barang_id) return;
                const params = new URLSearchParams();
                params.set('gudang_id', String(cardState.gudang_id));
                params.set('barang_id', String(cardState.barang_id));
                const url = `{{ route('master_project.warehouse_stocks.card.export_xlsx') }}?${params.toString()}`;
                window.open(url, '_blank');
            });
            loadGudang().always(loadStock);
        });
    </script>
@endpush