@extends('layouts.adminlte')

@section('title', 'PERMINTAAN BARANG PROJECT')
@section('page_title', 'PERMINTAAN BARANG 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">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Permintaan Barang (Cek Stok Gudang sebelum PO)</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('master_project.rab.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-list-check me-1"></i>Halaman RAB
                </a>
                <a href="{{ route('master_project.po.page') }}" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-file-invoice-dollar me-1"></i>Purchase Order
                </a>
                <a href="{{ route('master_project.warehouse_stock.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-boxes-stacked me-1"></i>Stok Gudang
                </a>
                <a href="{{ route('master_project.warehouse_issues.page') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-dolly me-1"></i>Pengeluaran Project
                </a>
                <button class="btn btn-primary btn-sm" id="btnAddRequest">
                    <i class="fas fa-plus me-1"></i>Buat Permintaan
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="requestTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>No Permintaan</th>
                        <th>Project</th>
                        <th>Tanggal</th>
                        <th>Due Date</th>
                        <th>Status</th>
                        <th>Terpenuhi</th>
                        <th>Sisa</th>
                        <th>PO</th>
                        <th>Notifikasi</th>
                        <th>Jumlah Item</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="requestModal" 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 Permintaan Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="requestForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">No Permintaan</label>
                                <input type="text" class="form-control" id="reqNumber" placeholder="Auto jika kosong" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="reqDate" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="reqProjectId" required></select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Due Date Permintaan</label>
                                <input type="date" class="form-control" id="reqDueDate" />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="reqStatus">
                                    <option value="draft">Draft</option>
                                    <option value="checked_stock">Checked Stock</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="reqNotes" />
                            </div>
                        </div>

                        <hr />
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="m-0">Item Permintaan</h6>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddReqItem">Tambah Item</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered align-middle" id="reqItemsTable">
                                <thead>
                                <tr>
                                    <th style="min-width:260px">RAB Item</th>
                                    <th style="min-width:90px">Urgent</th>
                                    <th style="min-width:140px">Due Date</th>
                                    <th style="min-width:120px">Qty Request</th>
                                    <th style="min-width:140px">Stok Gudang</th>
                                    <th style="min-width:150px">Qty Beli (PO)</th>
                                    <th style="min-width:110px">Mata Uang</th>
                                    <th style="min-width:140px">Kurs ke IDR</th>
                                    <th style="min-width:170px">Harga (Currency)</th>
                                    <th style="min-width:170px">Harga (IDR)</th>
                                    <th>Remark</th>
                                    <th style="width:80px">#</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">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="processPoModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Process ke Purchase Order</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="processPoForm">
                    <div class="modal-body">
                        <input type="hidden" id="processReqId" />
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="processVendorId">
                                    <option value="">- Tanpa Vendor -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">PO Number</label>
                                <input type="text" class="form-control" id="processPoNumber" placeholder="Auto jika kosong" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">PO Date</label>
                                <input type="date" class="form-control" id="processPoDate" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status PO</label>
                                <select class="form-select" id="processPoStatus">
                                    <option value="draft">Draft</option>
                                    <option value="approved">Approved</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <input type="text" class="form-control" id="processPoNotes" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Split Item ke PO (Parsial)</label>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered align-middle" id="processPoItemsTable">
                                        <thead>
                                        <tr>
                                            <th>Item</th>
                                            <th>Qty Request</th>
                                            <th>Stok</th>
                                            <th>Sudah PO</th>
                                            <th>Sisa</th>
                                            <th>Qty PO Sekarang</th>
                                            <th>Harga</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </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">Process</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>
        $(function () {
            const prefillProjectId = Number(@json($prefillProjectId ?? 0));
            const prefillRabItemIds = (@json($prefillRabItemIds ?? []) || []).map((id) => Number(id || 0)).filter((id) => id > 0);
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const requestModal = new bootstrap.Modal(document.getElementById('requestModal'));
            const processPoModal = new bootstrap.Modal(document.getElementById('processPoModal'));
            const table = $('#requestTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'request_number' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    { data: 'request_date', render: (v) => v || '-' },
                    { data: 'due_date', render: (v) => v || '-' },
                    {
                        data: 'status',
                        render: (v) => {
                            const map = {
                                draft: ['Draft', 'secondary'],
                                checked_stock: ['Checked Stock', 'info'],
                                partial_po: ['Partial PO', 'warning'],
                                processed_po: ['Processed PO', 'success'],
                                cancelled: ['Cancelled', 'danger']
                            };
                            const s = map[v] || [v || '-', 'secondary'];
                            return `<span class="badge text-bg-${s[1]}">${s[0]}</span>`;
                        }
                    },
                    { data: 'qty_fulfilled_total', render: (v, t, r) => `${Number(v || 0).toLocaleString('id-ID')} (${Number(r.fulfillment_percent_total || 0).toLocaleString('id-ID')}%)` },
                    { data: 'qty_pending_total', render: (v) => Number(v || 0).toLocaleString('id-ID') },
                    { data: 'po_numbers', render: (v) => Array.isArray(v) && v.length ? v.join('<br>') : '-' },
                    { data: 'notification', render: (v) => v || '-' },
                    { data: null, render: (r) => Number(r.items?.length || 0) },
                    {
                        data: null,
                        orderable: false,
                        render: (r) => `
                            <button class="btn btn-sm btn-outline-primary btn-process-po" data-id="${r.id}" ${(Number(r.qty_pending_total || 0) > 0) ? '' : 'disabled'}>Process ke PO</button>
                        `
                    }
                ]
            });

            let rowsCache = [];
            let projects = [];
            let vendors = [];
            let rabItems = [];
            const currencyDefaults = {
                IDR: 1,
                USD: 16000,
                EUR: 17500,
                SGD: 11800,
                JPY: 110,
                AUD: 10200,
                CNY: 2200
            };
            const formatRupiah = (value) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(Number(value || 0));

            const fillProjects = (selected = '') => {
                $('#reqProjectId').html(projects.map((p) => `<option value="${p.id}">${p.code} - ${p.name}</option>`).join(''));
                $('#reqProjectId').val(selected || projects[0]?.id || '');
            };
            const fillVendors = (selected = '') => {
                const options = ['<option value="">- Tanpa Vendor -</option>'];
                vendors.forEach((v) => options.push(`<option value="${v.id}">${v.code} - ${v.name}</option>`));
                $('#processVendorId').html(options.join(''));
                $('#processVendorId').val(selected || '');
            };

            const filterRabByProject = (projectId) => rabItems.filter((r) => Number(r.project_id) === Number(projectId));
            const buildRabOptions = (projectId, selectedId = '') => {
                const options = ['<option value="">- Pilih RAB Item -</option>'];
                filterRabByProject(projectId)
                    .filter((r) => Number(selectedId || 0) === Number(r.id) || !r.has_material_request)
                    .forEach((r) => {
                    const selected = Number(selectedId || 0) === Number(r.id) ? ' selected' : '';
                    options.push(`<option value="${r.id}"${selected}>${r.item_code} - ${r.item_name}</option>`);
                });
                return options.join('');
            };

            const recalcReqRow = ($tr) => {
                const qtyReq = Number($tr.find('.req-qty-request').val() || 0);
                const stock = Number($tr.find('.req-stock').val() || 0);
                const need = Math.max(0, qtyReq - stock);
                $tr.find('.req-qty-po').val(need.toFixed(3));

                const currency = (($tr.find('.req-currency').val() || 'IDR').toString().trim() || 'IDR').toUpperCase();
                let rate = Number($tr.find('.req-rate').val() || 0);
                if (currency === 'IDR') {
                    rate = 1;
                    $tr.find('.req-rate').val('1');
                }
                if (rate <= 0) {
                    rate = Number(currencyDefaults[currency] || 1);
                    $tr.find('.req-rate').val(rate.toString());
                }
                const foreign = Number($tr.find('.req-price-foreign').val() || 0);
                const idr = currency === 'IDR' ? foreign : (foreign * rate);
                $tr.find('.req-price-idr').val(idr.toFixed(2));
                $tr.find('.req-price-idr-view').text(formatRupiah(idr));
            };

            const addReqItemRow = (item = null) => {
                const projectId = $('#reqProjectId').val();
                const currency = (item?.currency_code || 'IDR').toString().toUpperCase();
                const rate = Number(item?.exchange_rate_to_idr ?? (currencyDefaults[currency] || 1));
                const priceForeign = Number(item?.unit_price_foreign ?? item?.unit_price_estimate ?? 0);
                const priceIdr = Number(item?.unit_price_estimate ?? (currency === 'IDR' ? priceForeign : priceForeign * rate));
                const html = `
                    <tr>
                        <td><select class="form-select form-select-sm req-rab-item">${buildRabOptions(projectId, item?.rab_item_id || '')}</select></td>
                        <td class="text-center"><input type="checkbox" class="form-check-input req-urgent" ${item?.is_urgent ? 'checked' : ''} /></td>
                        <td><input type="date" class="form-control form-control-sm req-due-date" value="${item?.due_date || ''}" /></td>
                        <td><input type="number" class="form-control form-control-sm req-qty-request" min="0.001" step="0.001" value="${item?.qty_request ?? 1}" /></td>
                        <td><input type="number" class="form-control form-control-sm req-stock" min="0" step="0.001" value="${item?.stock_available_qty ?? 0}" /></td>
                        <td><input type="number" class="form-control form-control-sm req-qty-po" min="0" step="0.001" value="${item?.qty_to_purchase ?? 1}" /></td>
                        <td>
                            <select class="form-select form-select-sm req-currency">
                                <option value="IDR"${currency === 'IDR' ? ' selected' : ''}>IDR</option>
                                <option value="USD"${currency === 'USD' ? ' selected' : ''}>USD</option>
                                <option value="EUR"${currency === 'EUR' ? ' selected' : ''}>EUR</option>
                                <option value="SGD"${currency === 'SGD' ? ' selected' : ''}>SGD</option>
                                <option value="JPY"${currency === 'JPY' ? ' selected' : ''}>JPY</option>
                                <option value="AUD"${currency === 'AUD' ? ' selected' : ''}>AUD</option>
                                <option value="CNY"${currency === 'CNY' ? ' selected' : ''}>CNY</option>
                            </select>
                        </td>
                        <td><input type="number" class="form-control form-control-sm req-rate" min="0.000001" step="0.000001" value="${rate}" /></td>
                        <td><input type="number" class="form-control form-control-sm req-price-foreign" min="0" step="0.01" value="${priceForeign}" /></td>
                        <td>
                            <input type="number" class="form-control form-control-sm req-price-idr" min="0" step="0.01" value="${priceIdr}" readonly />
                            <small class="text-muted req-price-idr-view">${formatRupiah(priceIdr)}</small>
                        </td>
                        <td><input type="text" class="form-control form-control-sm req-remark" value="${item?.remark ?? item?.notes ?? ''}" /></td>
                        <td><button type="button" class="btn btn-sm btn-outline-danger btn-remove-req-item">Hapus</button></td>
                    </tr>
                `;
                $('#reqItemsTable tbody').append(html);
                const $row = $('#reqItemsTable tbody tr').last();
                if (item?.rab_item_id) {
                    $row.find('.req-rab-item').val(String(item.rab_item_id));
                }
                recalcReqRow($row);
            };

            const collectReqItems = () => $('#reqItemsTable tbody tr').map(function () {
                return {
                    rab_item_id: Number($(this).find('.req-rab-item').val() || 0),
                    is_urgent: $(this).find('.req-urgent').is(':checked') ? 1 : 0,
                    due_date: ($(this).find('.req-due-date').val() || '').toString(),
                    qty_request: Number($(this).find('.req-qty-request').val() || 0),
                    stock_available_qty: Number($(this).find('.req-stock').val() || 0),
                    qty_to_purchase: Number($(this).find('.req-qty-po').val() || 0),
                    currency_code: ($(this).find('.req-currency').val() || 'IDR').toString().trim().toUpperCase(),
                    exchange_rate_to_idr: Number($(this).find('.req-rate').val() || 1),
                    unit_price_foreign: Number($(this).find('.req-price-foreign').val() || 0),
                    unit_price_estimate: Number($(this).find('.req-price-idr').val() || 0),
                    remark: ($(this).find('.req-remark').val() || '').toString().trim()
                };
            }).get().filter((x) => x.rab_item_id > 0 && x.qty_request > 0);

            const loadRefs = () => $.when(
                $.getJSON('{{ route('master_project.projects.data') }}'),
                $.getJSON('{{ route('master_vendor.data') }}'),
                $.getJSON('{{ route('master_project.rab.data') }}')
            ).done((p, v, r) => {
                projects = p[0]?.data || [];
                vendors = v[0]?.data || [];
                rabItems = r[0]?.data || [];
            });

            const loadData = () => $.getJSON('{{ route('master_project.material_requests.data') }}').done((resp) => {
                rowsCache = resp.data || [];
                table.clear().rows.add(rowsCache).draw();
            });

            const openCreateRequest = (projectId = '', selectedRabIds = []) => {
                $('#reqNumber').val('');
                $('#reqDate').val('');
                fillProjects(projectId || '');
                $('#reqDueDate').val('');
                $('#reqStatus').val('draft');
                $('#reqNotes').val('');
                $('#reqItemsTable tbody').empty();

                const selectedProjectId = Number($('#reqProjectId').val() || 0);
                const normalizedIds = Array.from(new Set((selectedRabIds || []).map((id) => Number(id || 0)).filter((id) => id > 0)));
                const selectedRows = filterRabByProject(selectedProjectId).filter((r) => normalizedIds.includes(Number(r.id)));
                if (selectedRows.length) {
                    selectedRows.forEach((row) => addReqItemRow({
                        rab_item_id: Number(row.id),
                        is_urgent: 0,
                        due_date: '',
                        qty_request: Number(row.qty || 1),
                        stock_available_qty: 0,
                        qty_to_purchase: Number(row.qty || 1),
                        currency_code: 'IDR',
                        exchange_rate_to_idr: 1,
                        unit_price_foreign: Number(row.unit_price || 0),
                        unit_price_estimate: Number(row.unit_price || 0),
                        remark: (row.rincian || '').toString()
                    }));
                } else {
                    addReqItemRow();
                }
                requestModal.show();
            };

            $('#btnAddRequest').on('click', () => openCreateRequest('', []));
            $('#btnAddReqItem').on('click', () => addReqItemRow());
            $('#reqProjectId').on('change', function () {
                const projectId = $(this).val();
                $('#reqItemsTable .req-rab-item').each(function () {
                    const selected = $(this).val();
                    $(this).html(buildRabOptions(projectId, selected));
                    $(this).val(selected || '');
                });
            });
            $('#reqItemsTable').on('input', '.req-qty-request, .req-stock, .req-rate, .req-price-foreign', function () { recalcReqRow($(this).closest('tr')); });
            $('#reqItemsTable').on('change', '.req-currency', function () { recalcReqRow($(this).closest('tr')); });
            $('#reqItemsTable').on('click', '.btn-remove-req-item', function () { $(this).closest('tr').remove(); });

            $('#requestForm').on('submit', function (e) {
                e.preventDefault();
                const payload = {
                    project_id: $('#reqProjectId').val(),
                    request_number: ($('#reqNumber').val() || '').toString().trim(),
                    request_date: $('#reqDate').val(),
                    due_date: $('#reqDueDate').val(),
                    status: $('#reqStatus').val(),
                    notes: ($('#reqNotes').val() || '').toString().trim(),
                    items: collectReqItems(),
                    is_active: 1
                };
                if (!payload.project_id || !payload.items.length) {
                    Swal.fire('Warning', 'Project dan item wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: '{{ route('master_project.material_requests.store') }}',
                    type: 'POST',
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify(payload)
                }).done((resp) => {
                    requestModal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#requestTable').on('click', '.btn-process-po', function () {
                const id = Number($(this).data('id') || 0);
                if (!id) return;
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#processReqId').val(id);
                fillVendors('');
                $('#processPoNumber').val('');
                $('#processPoDate').val('');
                $('#processPoStatus').val('draft');
                $('#processPoNotes').val('');
                const itemsHtml = (row.items || []).map((it) => {
                    const remain = Number(it.qty_pending || 0);
                    const defaultQty = remain > 0 ? remain : 0;
                    return `
                        <tr>
                            <td>${it.rab_item_code || '-'} - ${it.rab_item_name || '-'}</td>
                            <td>${Number(it.qty_request || 0).toLocaleString('id-ID')}</td>
                            <td>${Number(it.stock_available_qty || 0).toLocaleString('id-ID')}</td>
                            <td>${Number(it.qty_po_processed || 0).toLocaleString('id-ID')}</td>
                            <td>${remain.toLocaleString('id-ID')}</td>
                            <td>
                                <input type="number" class="form-control form-control-sm po-item-qty-now" data-mr-item-id="${it.id}" min="0" step="0.001" max="${remain}" value="${defaultQty}" ${remain > 0 ? '' : 'disabled'} />
                            </td>
                            <td>
                                <input type="number" class="form-control form-control-sm po-item-price-now" data-mr-item-id="${it.id}" min="0" step="0.01" value="${Number(it.unit_price_estimate || 0)}" ${remain > 0 ? '' : 'disabled'} />
                            </td>
                        </tr>
                    `;
                }).join('');
                $('#processPoItemsTable tbody').html(itemsHtml || '<tr><td colspan="7" class="text-center text-muted">Tidak ada item</td></tr>');
                processPoModal.show();
            });

            $('#processPoForm').on('submit', function (e) {
                e.preventDefault();
                const id = Number($('#processReqId').val() || 0);
                if (!id) return;
                const payload = {
                    vendor_id: $('#processVendorId').val(),
                    po_number: ($('#processPoNumber').val() || '').toString().trim(),
                    po_date: $('#processPoDate').val(),
                    status: $('#processPoStatus').val(),
                    notes: ($('#processPoNotes').val() || '').toString().trim(),
                    items: $('#processPoItemsTable tbody .po-item-qty-now').map(function () {
                        const mrItemId = Number($(this).data('mr-item-id') || 0);
                        const qty = Number($(this).val() || 0);
                        const price = Number($(`#processPoItemsTable tbody .po-item-price-now[data-mr-item-id="${mrItemId}"]`).val() || 0);
                        return {
                            material_request_item_id: mrItemId,
                            qty_to_po: qty,
                            unit_price: price
                        };
                    }).get().filter((x) => x.material_request_item_id > 0 && x.qty_to_po > 0)
                };
                if (!payload.items.length) {
                    Swal.fire('Warning', 'Isi minimal 1 qty item untuk diproses ke PO', 'warning');
                    return;
                }
                $.ajax({
                    url: `{{ url('/master-project/material-requests') }}/${id}/process-po`,
                    type: 'POST',
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify(payload)
                }).done((resp) => {
                    processPoModal.hide();
                    loadData();
                    const msg = resp?.data?.summary?.message ? `${resp.message}<br><small>${resp.data.summary.message}</small>` : (resp?.message || 'Processed');
                    Swal.fire({ title: 'Success', html: msg, icon: 'success' });
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Process failed', 'error'));
            });

            $.when(loadRefs()).always(() => {
                loadData();
                if (prefillProjectId > 0) {
                    openCreateRequest(prefillProjectId, prefillRabItemIds);
                    if (window.history && window.history.replaceState) {
                        window.history.replaceState({}, document.title, '{{ route('master_project.material_requests.page') }}');
                    }
                }
            });
        });
    </script>
@endpush