@extends('layouts.adminlte')

@section('title', 'PENGELUARAN BARANG KE PROJECT')
@section('page_title', 'PENGELUARAN BARANG KE 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') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 31px; }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 29px; }
        .select2-container--bootstrap-5 .select2-selection__arrow { height: 29px; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title m-0">Gudang Keluar ke Kebutuhan Project</h3>
        </div>
        <div class="card-body">
            @include('masterproject::partials.warehouse_nav', [
                'warehouseActive' => 'issues',
                'warehouseActionButton' => '<button class="btn btn-primary btn-sm" id="btnAddIssue"><i class="fas fa-dolly me-1"></i>Buat Pengeluaran</button>',
            ])
            <div class="alert alert-info mb-3">
                Pengeluaran barang akan mengecek stok gudang aktual dan konversi satuan barang per item project. Jika stok tidak cukup, transaksi otomatis ditolak.
            </div>
            <div class="table-responsive">
                <table id="issueTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>No Keluar</th>
                        <th>Project</th>
                        <th>Gudang</th>
                        <th>Tanggal</th>
                        <th>Penerima</th>
                        <th>Items</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="issueModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buat Pengeluaran Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="issueForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="issueProjectId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Gudang</label>
                                <select class="form-select" id="issueGudangId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">No Pengeluaran</label>
                                <input type="text" class="form-control" id="issueNumber" placeholder="Auto jika kosong" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="issueDate" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Penerima / PIC</label>
                                <input type="text" class="form-control" id="issueRecipient" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="issueNotes" />
                            </div>
                        </div>
                        <hr />
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="m-0">Item Keluar</h6>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddIssueItem">Tambah Item</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="issueItemsTable">
                                <thead>
                                <tr>
                                    <th>Item Project</th>
                                    <th>Barang</th>
                                    <th>Stok Gudang</th>
                                    <th>Satuan Keluar</th>
                                    <th>Qty Keluar</th>
                                    <th>Notes</th>
                                    <th>#</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Simpan Pengeluaran</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="returnModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Return Barang ke Gudang (Koreksi Issue)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="returnForm">
                    <div class="modal-body">
                        <input type="hidden" id="returnIssueId" />
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Issue Asal</label>
                                <input type="text" class="form-control" id="returnIssueNumber" readonly />
                                <div class="form-text">Pilih issue yang salah, lalu return sebagian/seluruh qty item.</div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">No Return</label>
                                <input type="text" class="form-control" id="returnNumber" placeholder="Auto jika kosong" />
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Tanggal Return</label>
                                <input type="date" class="form-control" id="returnDate" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="returnNotes" />
                            </div>
                        </div>
                        <hr />
                        <div class="alert alert-warning mb-3">
                            Qty return mengikuti satuan issue (agar operator tidak perlu pilih konversi). Sistem akan menolak jika qty melebihi sisa qty issue yang belum direturn.
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="returnItemsTable">
                                <thead class="table-light">
                                <tr>
                                    <th>Item</th>
                                    <th class="text-end">Issued</th>
                                    <th class="text-end">Returned</th>
                                    <th class="text-end">Remaining</th>
                                    <th style="width: 180px" class="text-end">Qty Return</th>
                                    <th>Notes</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">Simpan Return</button>
                    </div>
                </form>
            </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 src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            const modal = new bootstrap.Modal(document.getElementById('issueModal'));
            const returnModal = new bootstrap.Modal(document.getElementById('returnModal'));
            const table = $('#issueTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'issue_number' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: null, render: (r) => `${r.gudang_code || ''} - ${r.gudang_name || ''}` },
                    { data: 'issue_date', render: (v) => v || '-' },
                    { data: 'recipient_name', render: (v) => v || '-' },
                    { data: 'items', render: (v) => Number(v?.length || 0) },
                    {
                        data: null, orderable: false, render: (r) => `
                            <button class="btn btn-sm btn-outline-dark btn-issue-detail" data-id="${r.id}">Detail</button>
                            <a href="{{ url('/master-project/warehouse-issues') }}/${r.id}/pdf" target="_blank" class="btn btn-sm btn-outline-primary">Print</a>
                            <button class="btn btn-sm btn-outline-success btn-issue-return" data-id="${r.id}">Return</button>
                        `
                    }
                ]
            });
            const escapeHtml = (v) => (v ?? '').toString().replace(/[&<>"']/g, (c) => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;',
            }[c]));
            const fmtNum = (n) => Number(n || 0).toLocaleString('id-ID');
            const reinitSelect2 = ($el, opts) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2(opts);
            };
            let projectRows = [];
            let gudangRows = [];
            let rabRows = [];
            let stockRows = [];
            let issueRows = [];
            const stockMap = {}; // key: `${gudang_id}:${barang_id}` => qty_base_total
            const rabMap = {};
            const formatStock = (gudangId, barangId, baseName = '') => {
                const row = stockRows.find((item) => Number(item.gudang_id) === Number(gudangId) && Number(item.barang_id) === Number(barangId));
                return row ? `${Number(row.qty_base_total || 0).toLocaleString('id-ID')} ${baseName || row.base_satuan_name || ''}` : `0 ${baseName}`;
            };
            const stockBase = (gudangId, barangId) => {
                const k = `${Number(gudangId || 0)}:${Number(barangId || 0)}`;
                return Number(stockMap[k] || 0);
            };
            const buildRabOptions = (projectId, selectedId = '') => {
                const options = ['<option value="">- Pilih Item Project -</option>'];
                const gudangId = Number($('#issueGudangId').val() || 0);
                const wantedSelectedId = Number(selectedId || 0);
                const rows = rabRows.filter((row) => Number(row.project_id) === Number(projectId));
                rows.forEach((row) => {
                    const id = Number(row.id || 0);
                    const s = stockBase(gudangId, row.barang_id);
                    const keep = s > 0.000001;
                    const isSelected = wantedSelectedId > 0 && wantedSelectedId === id;
                    if (!keep && !isSelected) return;
                    const stockLabel = `${fmtNum(s)} ${(row.base_satuan_name || '').toString()}`.trim();
                    const selected = isSelected ? ' selected' : '';
                    const disabled = (!keep && isSelected) ? '' : (!keep ? ' disabled' : '');
                    const warn = keep ? '' : ' [STOK 0]';
                    options.push(`<option value="${id}"${selected}${disabled}>${row.item_code} - ${row.item_name}${warn} (${stockLabel})</option>`);
                });
                return options.join('');
            };
            const buildUnitOptions = (rabItemId, selectedId = '') => {
                const row = rabMap[Number(rabItemId || 0)];
                if (!row) return '<option value="">-</option>';
                const seen = new Set();
                const options = [];
                const pushOpt = (id, label) => {
                    const numId = Number(id || 0);
                    if (numId <= 0 || seen.has(numId)) return;
                    seen.add(numId);
                    const selected = Number(selectedId || 0) === numId ? ' selected' : '';
                    options.push(`<option value="${numId}"${selected}>${label}</option>`);
                };
                pushOpt(row.satuan_id, row.satuan_name || row.unit || 'Satuan RAB');
                pushOpt(row.base_satuan_id, row.base_satuan_name || 'Satuan Dasar');
                (row.unit_conversions || []).forEach((conv) => pushOpt(conv.satuan_id, conv.satuan_name || 'Konversi'));
                return options.join('');
            };
            const fillProjects = () => { $('#issueProjectId').html(projectRows.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`).join('')); };
            const fillGudang = () => { $('#issueGudangId').html(gudangRows.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`).join('')); };
            const syncIssueRowInfo = ($tr) => {
                const rabItemId = Number($tr.find('.issue-rab-item').val() || 0);
                const row = rabMap[rabItemId];
                const gudangId = Number($('#issueGudangId').val() || 0);
                if (!row) {
                    $tr.find('.issue-barang').text('-');
                    $tr.find('.issue-stock').text('-');
                    const $unit = $tr.find('.issue-satuan');
                    $unit.html('<option value="">-</option>');
                    reinitSelect2($unit, { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari satuan...' });
                    return;
                }
                $tr.find('.issue-barang').text(`${row.barang_code || ''} - ${row.barang_name || ''}`);
                $tr.find('.issue-stock').text(formatStock(gudangId, row.barang_id, row.base_satuan_name || ''));
                const $unit = $tr.find('.issue-satuan');
                $unit.html(buildUnitOptions(rabItemId));
                reinitSelect2($unit, { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari satuan...' });
            };
            const addIssueRow = () => {
                const html = `<tr>
                    <td><select class="form-select form-select-sm issue-rab-item">${buildRabOptions($('#issueProjectId').val() || '')}</select></td>
                    <td class="issue-barang text-muted">-</td>
                    <td class="issue-stock text-muted">-</td>
                    <td><select class="form-select form-select-sm issue-satuan"><option value="">-</option></select></td>
                    <td><input type="number" class="form-control form-control-sm issue-qty" min="0.001" step="0.001" value="1" /></td>
                    <td><input type="text" class="form-control form-control-sm issue-notes" /></td>
                    <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-row">Hapus</button></td>
                </tr>`;
                $('#issueItemsTable tbody').append(html);
                const $last = $('#issueItemsTable tbody tr').last();
                reinitSelect2($last.find('.issue-rab-item'), { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari item project...' });
                reinitSelect2($last.find('.issue-satuan'), { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari satuan...' });
                syncIssueRowInfo($last);
            };
            const loadRefs = () => $.when(
                $.getJSON('{{ route('master_project.projects.data') }}'),
                $.getJSON('{{ route('master_gudang.data') }}'),
                $.getJSON('{{ route('master_project.rab.data') }}'),
                $.getJSON('{{ route('master_project.warehouse_stocks.data') }}')
            ).done((project, gudang, rab, stock) => {
                projectRows = project[0]?.data || [];
                gudangRows = gudang[0]?.data || [];
                rabRows = (rab[0]?.data || []).filter((row) => !!row.barang_id);
                stockRows = stock[0]?.data || [];
                Object.keys(stockMap).forEach((k) => delete stockMap[k]);
                (stockRows || []).forEach((r) => {
                    stockMap[`${Number(r.gudang_id || 0)}:${Number(r.barang_id || 0)}`] = Number(r.qty_base_total || 0);
                });
                rabRows.forEach((row) => { rabMap[Number(row.id)] = row; });
                fillProjects();
                fillGudang();

                reinitSelect2($('#issueProjectId'), { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari project...' });
                reinitSelect2($('#issueGudangId'), { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari gudang...' });
            });
            const loadData = () => $.getJSON('{{ route('master_project.project_stock_issues.data') }}')
                .done((resp) => {
                    issueRows = resp.data || [];
                    table.clear().rows.add(issueRows).draw();
                });
            const resetForm = () => {
                fillProjects();
                fillGudang();
                $('#issueNumber').val('');
                $('#issueDate').val('');
                $('#issueRecipient').val('');
                $('#issueNotes').val('');
                $('#issueItemsTable tbody').empty();
                addIssueRow();
            };
            $('#btnAddIssue').on('click', function () { resetForm(); modal.show(); });
            $('#btnAddIssueItem').on('click', addIssueRow);
            $('#issueProjectId, #issueGudangId').on('change', function () {
                $('#issueItemsTable tbody tr').each(function () {
                    const $rab = $(this).find('.issue-rab-item');
                    const selected = $rab.val() || '';
                    $rab.html(buildRabOptions($('#issueProjectId').val() || '', selected));
                    reinitSelect2($rab, { theme: 'bootstrap-5', dropdownParent: $('#issueModal'), width: '100%', placeholder: 'Cari item project...' });
                    syncIssueRowInfo($(this));
                });
            });
            $('#issueItemsTable').on('change', '.issue-rab-item', function () { syncIssueRowInfo($(this).closest('tr')); });
            $('#issueItemsTable').on('click', '.btn-remove-row', function () { $(this).closest('tr').remove(); });
            $('#issueForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    project_id: $('#issueProjectId').val() || '',
                    gudang_id: $('#issueGudangId').val() || '',
                    issue_number: ($('#issueNumber').val() || '').toString().trim(),
                    issue_date: $('#issueDate').val() || '',
                    recipient_name: ($('#issueRecipient').val() || '').toString().trim(),
                    notes: ($('#issueNotes').val() || '').toString().trim(),
                    items: []
                };
                $('#issueItemsTable tbody tr').each(function () {
                    const rabItemId = Number($(this).find('.issue-rab-item').val() || 0);
                    const qty = Number($(this).find('.issue-qty').val() || 0);
                    if (rabItemId > 0 && qty > 0) {
                        payload.items.push({
                            rab_item_id: rabItemId,
                            satuan_id: Number($(this).find('.issue-satuan').val() || 0),
                            qty: qty,
                            notes: ($(this).find('.issue-notes').val() || '').toString().trim()
                        });
                    }
                });
                if (!payload.items.length) {
                    Swal.fire('Validasi', 'Isi minimal satu item pengeluaran.', 'warning');
                    return;
                }
                $.ajax({
                    url: '{{ route('master_project.project_stock_issues.store') }}',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(payload),
                }).done((resp) => {
                    Swal.fire('Success', resp.message || 'Pengeluaran berhasil disimpan.', 'success');
                    modal.hide();
                    loadRefs().always(loadData);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan pengeluaran.', 'error');
                });
            });

            const showIssueDetail = (row) => {
                const items = Array.isArray(row?.items) ? row.items : [];
                const rowsHtml = items.map((it) => `
                    <tr>
                        <td>
                            <div><strong>${escapeHtml(it.rab_item_code || '')}</strong></div>
                            <div class="text-muted small">${escapeHtml(it.rab_item_name || '')}</div>
                            <div class="text-muted small">${escapeHtml(it.barang_code || '')} - ${escapeHtml(it.barang_name || '')}</div>
                        </td>
                        <td class="text-end">${fmtNum(it.qty)} ${escapeHtml(it.satuan_name || '')}</td>
                        <td class="text-end">${fmtNum(it.qty_base)} ${escapeHtml(it.base_satuan_name || '')}</td>
                        <td>${escapeHtml(it.notes || '')}</td>
                    </tr>
                `).join('');

                Swal.fire({
                    title: 'Detail Issue',
                    html: `
                        <div class="mb-2 text-start">
                            <div><strong>No:</strong> ${escapeHtml(row.issue_number || '')}</div>
                            <div><strong>Project:</strong> ${escapeHtml(`${row.project_code || ''} - ${row.project_name || ''}`)}</div>
                            <div><strong>Gudang:</strong> ${escapeHtml(`${row.gudang_code || ''} - ${row.gudang_name || ''}`)}</div>
                            <div><strong>Tanggal:</strong> ${escapeHtml(row.issue_date || '')}</div>
                        </div>
                        <div class="table-responsive text-start">
                            <table class="table table-sm table-bordered align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Item</th>
                                        <th class="text-end">Qty</th>
                                        <th class="text-end">Qty (base)</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>${rowsHtml || '<tr><td colspan="4" class="text-center text-muted">Tidak ada item</td></tr>'}</tbody>
                            </table>
                        </div>
                    `,
                    width: 900,
                    confirmButtonText: 'Tutup',
                });
            };

            const renderReturnRows = (issue, returnedBaseByItem) => {
                const items = Array.isArray(issue?.items) ? issue.items : [];
                const html = items.map((it) => {
                    const issuedQty = Number(it.qty || 0);
                    const issuedBase = Number(it.qty_base || 0);
                    const returnedBase = Number(returnedBaseByItem?.[Number(it.id)] || 0);
                    const remainingBase = Math.max(0, issuedBase - returnedBase);
                    const factor = (issuedQty > 0 && issuedBase > 0) ? (issuedQty / issuedBase) : 0; // qty per 1 base
                    const returnedQty = factor > 0 ? (returnedBase * factor) : 0;
                    const remainingQty = factor > 0 ? (remainingBase * factor) : 0;
                    const disabled = remainingBase <= 0.000001 ? 'disabled' : '';
                    return `
                        <tr data-issue-item-id="${Number(it.id)}" data-max-qty="${remainingQty}">
                            <td>
                                <div><strong>${escapeHtml(it.rab_item_code || '')}</strong></div>
                                <div class="text-muted small">${escapeHtml(it.rab_item_name || '')}</div>
                                <div class="text-muted small">${escapeHtml(it.barang_code || '')} - ${escapeHtml(it.barang_name || '')}</div>
                            </td>
                            <td class="text-end">${fmtNum(issuedQty)} ${escapeHtml(it.satuan_name || '')}</td>
                            <td class="text-end">${fmtNum(returnedQty)} ${escapeHtml(it.satuan_name || '')}</td>
                            <td class="text-end">${fmtNum(remainingQty)} ${escapeHtml(it.satuan_name || '')}</td>
                            <td class="text-end">
                                <input type="number" class="form-control form-control-sm return-qty text-end" min="0" step="0.001" value="0" ${disabled} />
                                <div class="small text-muted mt-1">Max: ${fmtNum(remainingQty)}</div>
                            </td>
                            <td><input type="text" class="form-control form-control-sm return-notes" ${disabled} /></td>
                        </tr>
                    `;
                }).join('');
                $('#returnItemsTable tbody').html(html || '<tr><td colspan="6" class="text-center text-muted">Tidak ada item</td></tr>');
            };

            const openReturnModal = (issue) => {
                $('#returnIssueId').val(issue.id || '');
                $('#returnIssueNumber').val(issue.issue_number || '');
                $('#returnNumber').val('');
                $('#returnDate').val('');
                $('#returnNotes').val('');
                $('#returnItemsTable tbody').html('<tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>');
                returnModal.show();

                $.getJSON('{{ route('master_project.project_stock_returns.data') }}', { stock_issue_id: issue.id })
                    .done((resp) => renderReturnRows(issue, resp.by_issue_item || {}))
                    .fail(() => $('#returnItemsTable tbody').html('<tr><td colspan=\"6\" class=\"text-center text-danger\">Gagal memuat data return.</td></tr>'));
            };

            $('#issueTable').on('click', '.btn-issue-detail', function () {
                const id = Number($(this).data('id') || 0);
                const row = issueRows.find((r) => Number(r.id) === id);
                if (row) showIssueDetail(row);
            });

            $('#issueTable').on('click', '.btn-issue-return', function () {
                const id = Number($(this).data('id') || 0);
                const row = issueRows.find((r) => Number(r.id) === id);
                if (row) openReturnModal(row);
            });

            $('#returnItemsTable').on('input', '.return-qty', function () {
                const $tr = $(this).closest('tr');
                const maxQty = Number($tr.data('max-qty') || 0);
                let v = Number($(this).val() || 0);
                if (v < 0) v = 0;
                if (maxQty > 0 && v > maxQty) v = maxQty;
                $(this).val(v);
            });

            $('#returnForm').on('submit', function (e) {
                e.preventDefault();
                const stock_issue_id = Number($('#returnIssueId').val() || 0);
                const payload = {
                    stock_issue_id: stock_issue_id,
                    return_number: ($('#returnNumber').val() || '').toString().trim(),
                    return_date: $('#returnDate').val() || '',
                    notes: ($('#returnNotes').val() || '').toString().trim(),
                    items: []
                };

                $('#returnItemsTable tbody tr').each(function () {
                    const issueItemId = Number($(this).data('issue-item-id') || 0);
                    const qty = Number($(this).find('.return-qty').val() || 0);
                    if (issueItemId > 0 && qty > 0) {
                        payload.items.push({
                            stock_issue_item_id: issueItemId,
                            qty: qty,
                            notes: ($(this).find('.return-notes').val() || '').toString().trim()
                        });
                    }
                });

                if (!payload.items.length) {
                    Swal.fire('Validasi', 'Isi minimal satu qty return.', 'warning');
                    return;
                }

                $.ajax({
                    url: '{{ route('master_project.project_stock_returns.store') }}',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(payload),
                }).done((resp) => {
                    Swal.fire('Success', resp.message || 'Return berhasil disimpan.', 'success');
                    returnModal.hide();
                    loadData();
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal menyimpan return.', 'error');
                });
            });
            loadRefs().always(loadData);
        });
    </script>
@endpush