@extends('layouts.adminlte')

@section('title', 'RAB PROJECT')
@section('page_title', 'RAB 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') }}" />
    <style>
        #scopeTable .scope-list {
            list-style: none;
            margin: 0;
            padding-left: 0;
        }
        #scopeTable .scope-list li {
            border-bottom: 1px solid #dee2e6;
            padding: 6px 0;
        }
        #scopeTable .scope-list li:last-child {
            border-bottom: 0;
        }
        #scopeTable .btn-scope-list-mini {
            padding: 0.12rem 0.38rem;
            font-size: 0.72rem;
            line-height: 1.2;
        }

        /* Schedule Planning: group rows by project (avoid repeating the same project per row). */
        #scheduleTbody .schedule-group-row td {
            background: #f8f9fa;
            font-weight: 600;
        }
        #scheduleTbody .schedule-group-meta {
            font-weight: 400;
            color: #6c757d;
        }
        #scheduleTbody .schedule-indent {
            color: #6c757d;
        }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-body py-2">
            <ul class="nav nav-pills gap-2" id="rabTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-rab-btn" data-bs-toggle="pill" data-bs-target="#tab-rab" type="button" role="tab">RAB</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-schedule-btn" data-bs-toggle="pill" data-bs-target="#tab-schedule" type="button" role="tab">Schedule Planning</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-curve-btn" data-bs-toggle="pill" data-bs-target="#tab-curve" type="button" role="tab">Kurva S</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-invoice-btn" data-bs-toggle="pill" data-bs-target="#tab-invoice" type="button" role="tab">Invoice Progress</button>
                </li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-rab" role="tabpanel">
            <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Scope of Work</h3>
            <button class="btn btn-outline-primary btn-sm" id="btnAddScope">
                <i class="fas fa-plus me-1"></i>Tambah Scope
            </button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="scopeTable" class="table table-bordered align-middle w-100">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Project</th>
                            <th>Scope (List)</th>
                            <th>Aksi RAB</th>
                            <th>Detail</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-schedule" role="tabpanel">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Schedule Planning</h3>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="scheduleFilterProjectId" style="min-width:320px"></select>
                        <span class="badge text-bg-secondary align-self-center" id="scheduleWeightTotalBadge">Total Weight: -</span>
                        <button class="btn btn-outline-success btn-sm" id="btnScheduleAutoWeight" title="Hitung weight% otomatis dari total RAB per scope">Auto Weight dari RAB</button>
                        <button class="btn btn-outline-primary btn-sm" id="btnScheduleNew">Tambah Schedule</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row g-2 mb-3 d-none" id="scheduleFormWrap">
                        <input type="hidden" id="scheduleId">
                        <div class="col-md-3"><select class="form-select" id="scheduleProjectId"></select></div>
                        <div class="col-md-2"><input class="form-control" id="scheduleCode" placeholder="Kode"></div>
                        <div class="col-md-3"><input class="form-control" id="scheduleName" placeholder="Nama aktivitas"></div>
                        <div class="col-md-2"><input type="date" class="form-control" id="scheduleStart"></div>
                        <div class="col-md-2"><input type="date" class="form-control" id="scheduleEnd"></div>
                        <div class="col-md-3"><select class="form-select" id="scheduleScopeId"><option value="">- Scope (opsional) -</option></select></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="scheduleWeight" placeholder="Weight %" min="0" max="100" step="0.001"></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="scheduleTarget" placeholder="Target %" min="0" max="100" step="0.001"></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="scheduleActual" placeholder="Actual %" min="0" max="100" step="0.001"></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="scheduleBillable" placeholder="Billable %" min="0" max="100" step="0.001"></div>
                        <div class="col-md-2"><select class="form-select" id="scheduleStatus"><option value="planned">Planned</option><option value="on_going">On Going</option><option value="done">Done</option><option value="hold">Hold</option></select></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="scheduleSortOrder" placeholder="Urutan" min="0" step="1"></div>
                        <div class="col-md-4"><input class="form-control" id="scheduleNotes" placeholder="Catatan"></div>
                        <div class="col-md-2"><button class="btn btn-primary w-100" id="btnScheduleSave">Simpan</button></div>
                        <div class="col-md-2"><button class="btn btn-outline-secondary w-100" id="btnScheduleCancel">Batal</button></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle">
                            <thead><tr><th>#</th><th>Project</th><th>Aktivitas</th><th>Scope</th><th>Tanggal</th><th>Weight%</th><th>Target%</th><th>Actual%</th><th>Billable%</th><th>Status</th><th>Aksi</th></tr></thead>
                            <tbody id="scheduleTbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-curve" role="tabpanel">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Kurva S Project</h3>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="curveProjectId" style="min-width:320px"></select>
                        <button class="btn btn-outline-primary btn-sm" id="btnCurveRefresh">Refresh Kurva</button>
                        <a class="btn btn-outline-dark btn-sm" id="btnCurveExportPdf" target="_blank">Export PDF</a>
                        <a class="btn btn-outline-success btn-sm" id="btnCurveExportXlsx" target="_blank">Export XLSX</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        Konsep: garis <strong>Target</strong> dari schedule planning, garis <strong>Actual</strong> dari actual progress schedule, dan garis <strong>Billable</strong> dari billable progress schedule / invoice progress. Semua ditampilkan kumulatif per tanggal akhir aktivitas.
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Target Akhir</div><div class="fs-4 fw-bold" id="curveTargetTotal">0%</div></div></div>
                        <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Actual Akhir</div><div class="fs-4 fw-bold text-primary" id="curveActualTotal">0%</div></div></div>
                        <div class="col-md-4"><div class="border rounded p-3 h-100"><div class="text-muted small">Billable Akhir</div><div class="fs-4 fw-bold text-success" id="curveBillableTotal">0%</div></div></div>
                    </div>
                    <div style="height: 380px;">
                        <canvas id="curveChart"></canvas>
                    </div>
                    <div class="table-responsive mt-3">
                        <table class="table table-sm table-bordered align-middle">
                            <thead><tr><th>Tanggal</th><th>Aktivitas</th><th>Target Kumulatif</th><th>Actual Kumulatif</th><th>Billable Kumulatif</th></tr></thead>
                            <tbody id="curveTbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-invoice" role="tabpanel">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title m-0">Invoice Payment Progress</h3>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="invoiceFilterProjectId" style="min-width:320px"></select>
                        <button class="btn btn-primary btn-sm" id="btnInvoiceNew">Tambah Invoice</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row g-2 mb-3 d-none" id="invoiceFormWrap">
                        <input type="hidden" id="invoiceId">
                        <div class="col-md-3"><select class="form-select" id="invoiceProjectId"></select></div>
                        <div class="col-md-3"><select class="form-select" id="invoiceScheduleId"><option value="">- Tanpa schedule -</option></select></div>
                        <div class="col-md-2"><input class="form-control" id="invoiceNumber" placeholder="No Invoice System"></div>
                        <div class="col-md-2"><input class="form-control" id="invoiceSupplierNumber" placeholder="No Invoice Supplier"></div>
                        <div class="col-md-2"><input class="form-control" id="invoiceTaxNumber" placeholder="No Faktur Pajak"></div>
                        <div class="col-md-2"><input type="date" class="form-control" id="invoiceDate"></div>
                        <div class="col-md-2"><input type="date" class="form-control" id="invoiceDue"></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="invoiceProgress" placeholder="Progress %" min="0" max="100" step="0.001"></div>
                        <div class="col-md-2"><select class="form-select" id="invoiceCurrency"><option>IDR</option><option>USD</option><option>EUR</option><option>SGD</option><option>JPY</option></select></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="invoiceRate" value="1" min="0.000001" step="0.000001" placeholder="Rate"></div>
                        <div class="col-md-2"><input type="number" class="form-control" id="invoiceAmount" placeholder="Amount" min="0" step="0.01"></div>
                        <div class="col-md-2"><select class="form-select" id="invoiceStatus"><option value="draft">Draft</option><option value="submitted">Submitted</option><option value="approved">Approved</option><option value="paid">Paid</option><option value="cancelled">Cancelled</option></select></div>
                        <div class="col-md-2"><button class="btn btn-primary w-100" id="btnInvoiceSave">Simpan</button></div>
                        <div class="col-md-2"><button class="btn btn-outline-secondary w-100" id="btnInvoiceCancel">Batal</button></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-bordered align-middle">
                            <thead><tr><th>Tgl. Invoice</th><th>No. Invoice System</th><th>No. Invoice Supplier</th><th>No. WO</th><th>No. Quotation</th><th>Jatuh Tempo</th><th>Reminder</th><th>No. Faktur Pajak</th><th>Nama Customer</th><th>Total (Rp.)</th><th>Status</th><th>Cetak</th><th>Aksi</th></tr></thead>
                            <tbody id="invoiceTbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rabModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rabModalTitle">Tambah RAB</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="rabForm">
                    <div class="modal-body">
                        <input type="hidden" id="rabId" />
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="rabProjectId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Work Order</label>
                                <select class="form-select" id="rabWorkOrderId" required>
                                    <option value="">- Pilih Work Order -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Scope of Work</label>
                                <select class="form-select" id="rabScopeId" required>
                                    <option value="">- Pilih Scope -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Barang</label>
                                <select class="form-select" id="rabBarangId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Merk</label>
                                <input type="text" class="form-control" id="rabMerk" maxlength="120" />
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Rincian Item</label>
                                <textarea class="form-control" id="rabRincian" rows="2" placeholder="Contoh: Pembesian D16, bekisting, pengecoran K-300"></textarea>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Qty</label>
                                <input type="number" class="form-control" id="rabQty" min="0" step="0.001" value="0" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Satuan</label>
                                <select class="form-select" id="rabSatuanId">
                                    <option value="">- Auto dari barang -</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Harga Satuan</label>
                                <input type="number" class="form-control" id="rabUnitPrice" min="0" step="0.01" value="0" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Total</label>
                                <input type="text" class="form-control" id="rabTotalPrice" readonly />
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="rabActive" checked />
                                    <label class="form-check-label" for="rabActive">Active</label>
                                </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">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="scopeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scopeModalTitle">Tambah Scope</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="scopeForm">
                    <div class="modal-body">
                        <input type="hidden" id="scopeId" />
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="scopeProjectId" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Work Order (opsional)</label>
                                <select class="form-select" id="scopeWorkOrderId">
                                    <option value="">- Tanpa WO -</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Scope Code</label>
                                <input type="text" class="form-control" id="scopeCode" maxlength="80" required />
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Scope Name</label>
                                <input type="text" class="form-control" id="scopeName" maxlength="180" required />
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Urutan</label>
                                <input type="number" class="form-control" id="scopeSortOrder" min="0" step="1" value="0" />
                            </div>
                            <div class="col-md-9">
                                <label class="form-label">Description</label>
                                <input type="text" class="form-control" id="scopeDescription" />
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" id="scopeActive" checked />
                                    <label class="form-check-label" for="scopeActive">Active</label>
                                </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">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="rabUploadModal" 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">Upload RAB + Review Suggestion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <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="uploadProjectId"></select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Nomor Job</label>
                            <input type="text" class="form-control" id="uploadNoJob" readonly />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Work Order</label>
                            <select class="form-select" id="uploadWorkOrderId"></select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Scope</label>
                            <select class="form-select" id="uploadScopeId"></select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">File Excel/CSV</label>
                            <input type="file" class="form-control" id="uploadRabFile" accept=".xlsx,.xls,.csv" />
                        </div>
                    </div>
                    <hr />
                    <div class="d-flex gap-2 mb-2">
                        <a href="{{ route('master_project.rab.upload_template') }}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-file-excel me-1"></i>Download Template Excel
                        </a>
                        <button class="btn btn-outline-primary btn-sm" id="btnUploadReview">Review Upload</button>
                        <button class="btn btn-primary btn-sm" id="btnUploadCommit" disabled>Proses Import ke RAB</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm align-middle" id="uploadReviewTable">
                            <thead>
                                <tr>
                                    <th>Row</th>
                                    <th>Nama Upload</th>
                                    <th>Barang Ready Stock (suggest)</th>
                                    <th>Merk</th>
                                    <th>Rincian</th>
                                    <th>Qty Final</th>
                                    <th>Satuan Final</th>
                                    <th>Harga Satuan</th>
                                    <th>Catatan</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>
                </div>
            </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/chartjs/chart.umd.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('rabModal'));
            const scopeModal = new bootstrap.Modal(document.getElementById('scopeModal'));
            const uploadModal = new bootstrap.Modal(document.getElementById('rabUploadModal'));
            const scopeTable = $('#scopeTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: null, render: (r) => `${r.project_code || ''} - ${r.project_name || ''}` },
                    {
                        data: 'scope_items_html',
                        render: (v) => v || '-'
                    },
                    {
                        data: 'rab_count',
                        orderable: false,
                        render: (v, t, row) => `
                            <div class="d-flex gap-1">
                                <button class="btn btn-sm btn-outline-primary btn-scope-upload" data-project-id="${row.project_id}" ${(Number(row.scope_count || 0) > 0 && row.can_submit_request) ? '' : 'disabled'}>Upload</button>
                                <button class="btn btn-sm btn-primary btn-scope-add-rab" data-project-id="${row.project_id}" ${(Number(row.scope_count || 0) > 0 && row.can_submit_request) ? '' : 'disabled'}>Tambah RAB</button>
                            </div>
                        `
                    },
                    {
                        data: null,
                        orderable: false,
                        render: (row) => `
                            <a class="btn btn-scope-list-mini btn-outline-info ${(Number(row.rab_count || 0) > 0 && row.can_submit_request) ? '' : 'disabled'}" href="${(Number(row.rab_count || 0) > 0 && row.can_submit_request) ? '{{ url('/master-project/rab-project') }}/' + row.project_id + '/detail' : '#'}">Detail</a>
                        `
                    }
                ]
            });

            let rowsCache = [];
            let projects = [];
            let workOrders = [];
            let scopes = [];
            let barangs = [];
            let satuans = [];
            let uploadReviewRows = [];

            const renderScopeGroupedTable = () => {
                const grouped = {};
                scopes.forEach((row) => {
                    const key = String(row.project_id || '0');
                    if (!grouped[key]) {
                        grouped[key] = {
                            id: Number(row.project_id || 0),
                            project_id: Number(row.project_id || 0),
                            project_code: row.project_code || '',
                            project_name: row.project_name || '',
                            scope_items: []
                        };
                    }
                    grouped[key].scope_items.push({
                        id: Number(row.id || 0),
                        scope_code: row.scope_code || '',
                        scope_name: row.scope_name || '',
                        sort_order: Number(row.sort_order || 0)
                    });
                });

                const mergedRows = Object.values(grouped).map((g) => {
                    const items = (g.scope_items || []).sort((a, b) => a.sort_order - b.sort_order);
                    const li = items.map((x) => `
                        <li>
                            <div><strong>${x.scope_code}</strong> - ${x.scope_name}</div>
                            <div class="mt-1">
                                <button class="btn btn-scope-list-mini btn-outline-primary btn-scope-edit" data-id="${x.id}">Edit</button>
                                <button class="btn btn-scope-list-mini btn-outline-danger btn-scope-delete ms-1" data-id="${x.id}">Delete</button>
                            </div>
                        </li>
                    `).join('');
                    const rabCount = rowsCache.filter((r) => Number(r.project_id) === Number(g.project_id)).length;
                    const project = projects.find((p) => Number(p.id) === Number(g.project_id));
                    const status = (project?.project_status || '').toString();
                    const canSubmitRequest = ['approved_client', 'on_going'].includes(status);
                    return {
                        id: g.id,
                        project_id: g.project_id,
                        project_code: g.project_code,
                        project_name: g.project_name,
                        scope_items_html: `<ul class="scope-list">${li}</ul>`,
                        scope_count: items.length,
                        rab_count: rabCount,
                        can_submit_request: canSubmitRequest
                    };
                });

                scopeTable.clear().rows.add(mergedRows).draw();
            };

            const calcTotal = () => {
                const qty = Number($('#rabQty').val() || 0);
                const price = Number($('#rabUnitPrice').val() || 0);
                $('#rabTotalPrice').val((qty * price).toLocaleString('id-ID'));
            };

            const fillProjects = (selectedId = '') => {
                const filtered = projects.filter((row) => ['approved_client', 'on_going'].includes((row.project_status || '').toString()));
                const options = filtered.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`);
                $('#rabProjectId').html(options.join(''));
                $('#rabProjectId').val(selectedId || (filtered[0]?.id || ''));
            };

            const fillWorkOrders = (projectId, selectedId = '') => {
                const filtered = workOrders.filter((row) => Number(row.project_id) === Number(projectId));
                const options = ['<option value="">- Pilih Work Order -</option>'];
                filtered.forEach((row) => options.push(`<option value="${row.id}">${row.wo_number} - ${row.title}</option>`));
                $('#rabWorkOrderId').html(options.join(''));
                $('#rabWorkOrderId').val(selectedId || '');
            };

            const fillScopeOptions = (projectId, workOrderId, selectedId = '') => {
                const filtered = scopes.filter((row) => {
                    if (Number(row.project_id) !== Number(projectId)) return false;
                    if (!row.work_order_id) return true;
                    if (!workOrderId) return false;
                    return Number(row.work_order_id) === Number(workOrderId);
                });
                const options = ['<option value="">- Pilih Scope -</option>'];
                filtered.forEach((row) => options.push(`<option value="${row.id}">${row.scope_code} - ${row.scope_name}</option>`));
                $('#rabScopeId').html(options.join(''));
                $('#rabScopeId').val(selectedId || '');
            };

            const fillScopeProjectOptions = (selectedId = '') => {
                const filtered = projects.filter((row) => ['approved_client', 'on_going'].includes((row.project_status || '').toString()));
                const options = filtered.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`);
                $('#scopeProjectId').html(options.join(''));
                $('#scopeProjectId').val(selectedId || (filtered[0]?.id || ''));
            };

            const fillScopeWoOptions = (projectId, selectedId = '') => {
                const filtered = workOrders.filter((row) => Number(row.project_id) === Number(projectId));
                const options = ['<option value="">- Tanpa WO -</option>'];
                filtered.forEach((row) => options.push(`<option value="${row.id}">${row.wo_number} - ${row.title}</option>`));
                $('#scopeWorkOrderId').html(options.join(''));
                $('#scopeWorkOrderId').val(selectedId || '');
            };

            const fillBarangs = (selectedId = '') => {
                const options = barangs.map((row) => `<option value="${row.id}">${row.code} - ${row.name}</option>`);
                $('#rabBarangId').html(options.join(''));
                $('#rabBarangId').val(selectedId || (barangs[0]?.id || ''));
            };

            const fillSatuans = (selectedId = '') => {
                const options = ['<option value="">- Auto dari barang -</option>'];
                satuans.forEach((row) => options.push(`<option value="${row.id}">${row.code} - ${row.name}</option>`));
                $('#rabSatuanId').html(options.join(''));
                $('#rabSatuanId').val(selectedId || '');
            };

            const fillUploadProjects = (selectedId = '') => {
                const filtered = projects.filter((row) => ['approved_client', 'on_going'].includes((row.project_status || '').toString()));
                const options = filtered.map((row) => `<option value="${row.id}">${row.no_job || row.code_project || row.code || '-'} - ${row.name}</option>`);
                $('#uploadProjectId').html(options.join(''));
                $('#uploadProjectId').val(selectedId || (filtered[0]?.id || ''));
                const selected = filtered.find((row) => Number(row.id) === Number($('#uploadProjectId').val() || 0));
                $('#uploadNoJob').val(selected ? (selected.no_job || selected.code_project || selected.code || '-') : '-');
            };

            const fillUploadWorkOrders = (projectId, selectedId = '') => {
                const filtered = workOrders.filter((row) => Number(row.project_id) === Number(projectId));
                const options = ['<option value="">- Pilih Work Order -</option>'];
                filtered.forEach((row) => options.push(`<option value="${row.id}">${row.wo_number} - ${row.title}</option>`));
                $('#uploadWorkOrderId').html(options.join(''));
                $('#uploadWorkOrderId').val(selectedId || '');
            };

            const fillUploadScopes = (projectId, workOrderId, selectedId = '') => {
                const filtered = scopes.filter((row) => {
                    if (Number(row.project_id) !== Number(projectId)) return false;
                    if (!row.work_order_id) return true;
                    if (!workOrderId) return false;
                    return Number(row.work_order_id) === Number(workOrderId);
                });
                const options = ['<option value="">- Pilih Scope -</option>'];
                filtered.forEach((row) => options.push(`<option value="${row.id}">${row.scope_code} - ${row.scope_name}</option>`));
                $('#uploadScopeId').html(options.join(''));
                $('#uploadScopeId').val(selectedId || '');
            };

            const loadReferences = () => {
                return $.when(
                    $.getJSON('{{ route('master_project.projects.data') }}'),
                    $.getJSON('{{ route('master_project.work_orders.data') }}'),
                    $.getJSON('{{ route('master_project.rab_scopes.data') }}'),
                    $.getJSON('{{ route('master_barang.data') }}'),
                    $.getJSON('{{ route('master_satuan.data') }}')
                ).done((projectsResp, woResp, scopeResp, barangResp, satuanResp) => {
                    projects = projectsResp[0]?.data || [];
                    workOrders = woResp[0]?.data || [];
                    scopes = scopeResp[0]?.data || [];
                    barangs = barangResp[0]?.data || [];
                    satuans = satuanResp[0]?.data || [];
                    renderScopeGroupedTable();
                });
            };

            const loadData = () => {
                $.getJSON('{{ route('master_project.rab.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        renderScopeGroupedTable();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error');
                    });
            };

            const renderUploadReviewRows = () => {
                const barangOptions = ['<option value="">- Pilih Barang -</option>']
                    .concat(barangs.map((b) => `<option value="${b.id}">${b.code} - ${b.name}</option>`));
                const satuanOptions = ['<option value="">- Pilih Satuan -</option>']
                    .concat(satuans.map((s) => `<option value="${s.id}">${s.code} - ${s.name}</option>`));

                const html = uploadReviewRows.map((row, idx) => `
                    <tr>
                        <td>${row.row_no || (idx + 1)}</td>
                        <td>${row.uploaded_name || ''}</td>
                        <td>
                            <select class="form-select form-select-sm up-barang" data-idx="${idx}">
                                ${barangOptions.join('')}
                            </select>
                            <small class="text-muted">score: ${row.suggest_score ?? '-'}</small>
                        </td>
                        <td><input type="text" class="form-control form-control-sm up-merk" data-idx="${idx}" value="${(row.uploaded_merk || '').toString().replace(/"/g, '&quot;')}" /></td>
                        <td><input type="text" class="form-control form-control-sm up-rincian" data-idx="${idx}" value="${(row.uploaded_rincian || '').toString().replace(/"/g, '&quot;')}" /></td>
                        <td><input type="number" class="form-control form-control-sm up-qty" data-idx="${idx}" min="0.000001" step="0.000001" value="${Number(row.final_qty || row.uploaded_qty || 0)}" /></td>
                        <td>
                            <select class="form-select form-select-sm up-satuan" data-idx="${idx}">
                                ${satuanOptions.join('')}
                            </select>
                        </td>
                        <td><input type="number" class="form-control form-control-sm up-price" data-idx="${idx}" min="0" step="0.01" value="${Number(row.uploaded_unit_price || 0)}" /></td>
                        <td><small>${row.note || '-'}</small></td>
                    </tr>
                `).join('');
                $('#uploadReviewTable tbody').html(html);

                uploadReviewRows.forEach((row, idx) => {
                    $(`#uploadReviewTable .up-barang[data-idx="${idx}"]`).val(row.suggested_barang_id || '');
                    $(`#uploadReviewTable .up-satuan[data-idx="${idx}"]`).val(row.final_satuan_id || '');
                });
            };

            const collectUploadRows = () => {
                return $('#uploadReviewTable tbody tr').map(function () {
                    return {
                        barang_id: Number($(this).find('.up-barang').val() || 0),
                        merk: ($(this).find('.up-merk').val() || '').toString().trim(),
                        rincian: ($(this).find('.up-rincian').val() || '').toString().trim(),
                        qty: Number($(this).find('.up-qty').val() || 0),
                        satuan_id: Number($(this).find('.up-satuan').val() || 0) || null,
                        unit_price: Number($(this).find('.up-price').val() || 0),
                    };
                }).get().filter((x) => x.barang_id > 0 && x.qty > 0);
            };

            const openRabModalForProject = (projectId = '') => {
                $('#rabModalTitle').text('Tambah RAB');
                $('#rabId').val('');
                fillProjects(projectId || '');
                const selectedProjectId = $('#rabProjectId').val();
                fillWorkOrders(selectedProjectId, '');
                const selectedWo = $('#rabWorkOrderId').val() || '';
                fillScopeOptions(selectedProjectId, selectedWo, '');
                fillBarangs('');
                fillSatuans('');
                $('#rabMerk').val('');
                $('#rabRincian').val('');
                $('#rabQty').val('0');
                $('#rabUnitPrice').val('0');
                $('#rabActive').prop('checked', true);
                calcTotal();
                modal.show();
            };

            const openUploadModalForProject = (projectId = '') => {
                fillUploadProjects(projectId || '');
                const selectedProjectId = $('#uploadProjectId').val();
                fillUploadWorkOrders(selectedProjectId, '');
                const selectedWoId = $('#uploadWorkOrderId').val() || '';
                fillUploadScopes(selectedProjectId, selectedWoId, '');
                $('#uploadRabFile').val('');
                uploadReviewRows = [];
                $('#uploadReviewTable tbody').html('');
                $('#btnUploadCommit').prop('disabled', true);
                uploadModal.show();
            };

            $('#rabProjectId').on('change', function () {
                fillWorkOrders($(this).val(), '');
                fillScopeOptions($(this).val(), '', '');
            });

            $('#rabWorkOrderId').on('change', function () {
                fillScopeOptions($('#rabProjectId').val(), $(this).val(), '');
            });

            $('#uploadProjectId').on('change', function () {
                const projectId = Number($(this).val() || 0);
                const selected = projects.find((p) => Number(p.id) === projectId);
                $('#uploadNoJob').val(selected ? (selected.no_job || selected.code_project || selected.code || '-') : '-');
                fillUploadWorkOrders($(this).val(), '');
                fillUploadScopes($(this).val(), '', '');
            });
            $('#uploadWorkOrderId').on('change', function () {
                fillUploadScopes($('#uploadProjectId').val(), $(this).val(), '');
            });

            $('#rabQty, #rabUnitPrice').on('input', calcTotal);

            $('#rabForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#rabId').val();
                const payload = {
                    project_id: $('#rabProjectId').val(),
                    work_order_id: $('#rabWorkOrderId').val(),
                    scope_id: $('#rabScopeId').val(),
                    barang_id: $('#rabBarangId').val(),
                    merk: ($('#rabMerk').val() || '').toString().trim(),
                    rincian: ($('#rabRincian').val() || '').toString().trim(),
                    qty: ($('#rabQty').val() || '0').toString(),
                    satuan_id: $('#rabSatuanId').val(),
                    unit_price: ($('#rabUnitPrice').val() || '0').toString(),
                    is_active: $('#rabActive').is(':checked') ? 1 : 0
                };

                if (!payload.project_id || !payload.barang_id) {
                    Swal.fire('Warning', 'Project dan Barang wajib dipilih', 'warning');
                    return;
                }
                if (!payload.work_order_id) {
                    Swal.fire('Warning', 'Work Order wajib dipilih', 'warning');
                    return;
                }
                if (!payload.scope_id) {
                    Swal.fire('Warning', 'Scope wajib dipilih', 'warning');
                    return;
                }

                $.ajax({
                    url: id ? `{{ url('/master-project/rab') }}/${id}` : '{{ route('master_project.rab.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload,
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#btnUploadReview').on('click', function () {
                const projectId = $('#uploadProjectId').val();
                const workOrderId = $('#uploadWorkOrderId').val();
                const scopeId = $('#uploadScopeId').val();
                const file = $('#uploadRabFile')[0].files[0];
                if (!projectId || !scopeId || !file) {
                    Swal.fire('Warning', 'Project, Scope, dan file upload wajib diisi', 'warning');
                    return;
                }

                const formData = new FormData();
                formData.append('project_id', projectId);
                formData.append('work_order_id', workOrderId);
                formData.append('scope_id', scopeId);
                formData.append('file', file);

                $.ajax({
                    url: '{{ route('master_project.rab.upload_review') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    uploadReviewRows = resp?.data?.rows || [];
                    renderUploadReviewRows();
                    $('#btnUploadCommit').prop('disabled', uploadReviewRows.length === 0);
                    Swal.fire('Success', `Review selesai: ${uploadReviewRows.length} baris terbaca`, 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Review upload gagal', 'error');
                });
            });

            $('#btnUploadCommit').on('click', function () {
                const payload = {
                    project_id: $('#uploadProjectId').val(),
                    work_order_id: $('#uploadWorkOrderId').val(),
                    scope_id: $('#uploadScopeId').val(),
                    rows: collectUploadRows()
                };
                if (!payload.rows.length) {
                    Swal.fire('Warning', 'Tidak ada baris valid untuk diimport', 'warning');
                    return;
                }
                $.ajax({
                    url: '{{ route('master_project.rab.upload_commit') }}',
                    type: 'POST',
                    contentType: 'application/json',
                    processData: false,
                    data: JSON.stringify(payload),
                }).done((resp) => {
                    uploadModal.hide();
                    loadData();
                    Swal.fire('Success', `${resp?.message || 'Import selesai'} (${resp?.data?.inserted || 0} item)`, 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Import commit gagal', 'error');
                });
            });

            $('#btnAddScope').on('click', function () {
                $('#scopeModalTitle').text('Tambah Scope');
                $('#scopeId').val('');
                fillScopeProjectOptions('');
                fillScopeWoOptions($('#scopeProjectId').val(), '');
                $('#scopeCode').val('');
                $('#scopeName').val('');
                $('#scopeSortOrder').val('0');
                $('#scopeDescription').val('');
                $('#scopeActive').prop('checked', true);
                scopeModal.show();
            });

            $('#scopeProjectId').on('change', function () {
                fillScopeWoOptions($(this).val(), '');
            });

            $('#scopeTable').on('click', '.btn-scope-edit', function () {
                const id = Number($(this).data('id'));
                const row = scopes.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#scopeModalTitle').text('Edit Scope');
                $('#scopeId').val(row.id);
                fillScopeProjectOptions(row.project_id);
                fillScopeWoOptions(row.project_id, row.work_order_id || '');
                $('#scopeCode').val(row.scope_code || '');
                $('#scopeName').val(row.scope_name || '');
                $('#scopeSortOrder').val(Number(row.sort_order || 0));
                $('#scopeDescription').val(row.description || '');
                $('#scopeActive').prop('checked', !!row.is_active);
                scopeModal.show();
            });

            $('#scopeForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#scopeId').val();
                const payload = {
                    project_id: $('#scopeProjectId').val(),
                    work_order_id: $('#scopeWorkOrderId').val(),
                    scope_code: ($('#scopeCode').val() || '').toString().trim(),
                    scope_name: ($('#scopeName').val() || '').toString().trim(),
                    sort_order: ($('#scopeSortOrder').val() || '0').toString(),
                    description: ($('#scopeDescription').val() || '').toString().trim(),
                    is_active: $('#scopeActive').is(':checked') ? 1 : 0
                };
                if (!payload.project_id || !payload.scope_code || !payload.scope_name) {
                    Swal.fire('Warning', 'Project, Scope Code, Scope Name wajib diisi', 'warning');
                    return;
                }
                $.ajax({
                    url: id ? `{{ url('/master-project/rab-scopes') }}/${id}` : '{{ route('master_project.rab_scopes.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload,
                }).done((resp) => {
                    scopeModal.hide();
                    loadReferences();
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error');
                });
            });

            $('#scopeTable').on('click', '.btn-scope-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete scope?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-project/rab-scopes') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadReferences();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            $('#scopeTable').on('click', '.btn-scope-upload', function () {
                const projectId = Number($(this).data('project-id') || 0);
                if (!projectId) return;
                openUploadModalForProject(projectId);
            });

            $('#scopeTable').on('click', '.btn-scope-add-rab', function () {
                const projectId = Number($(this).data('project-id') || 0);
                if (!projectId) return;
                openRabModalForProject(projectId);
            });

            const billingProjects = () => projects.filter((row) => ['approved_client', 'on_going', 'closed'].includes((row.project_status || '').toString()));
            const projectLabel = (row) => `${row.code_project || row.code || '-'} - ${row.project_name || row.name || '-'}`;
            const statusBadge = (s) => {
                const map = { planned: 'secondary', on_going: 'primary', done: 'success', hold: 'warning', draft: 'secondary', submitted: 'primary', approved: 'info', paid: 'success', cancelled: 'danger' };
                return `<span class="badge text-bg-${map[s] || 'secondary'}">${s || '-'}</span>`;
            };
            const fmtMoney = (v) => Number(v || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            let schedules = [];
            let invoices = [];
            let curveChart = null;

            const fillBillingProjectSelect = (selector, selectedId = '', includeBlank = false) => {
                const opts = [];
                if (includeBlank) opts.push('<option value="">- Semua Project -</option>');
                billingProjects().forEach((row) => opts.push(`<option value="${row.id}">${projectLabel(row)}</option>`));
                $(selector).html(opts.join(''));
                if (selectedId !== '') {
                    $(selector).val(String(selectedId));
                } else if (!includeBlank) {
                    $(selector).val(String(billingProjects()[0]?.id || ''));
                } else {
                    $(selector).val('');
                }
            };

            const fillInvoiceScheduleSelect = (projectId, selectedId = '') => {
                const opts = ['<option value="">- Tanpa schedule -</option>'];
                schedules.filter((row) => Number(row.project_id) === Number(projectId)).forEach((row) => {
                    opts.push(`<option value="${row.id}">${row.activity_code || '-'} - ${row.activity_name || '-'}</option>`);
                });
                $('#invoiceScheduleId').html(opts.join('')).val(selectedId || '');
            };

            const scheduleFormReset = () => {
                $('#scheduleId').val('');
                fillBillingProjectSelect('#scheduleProjectId');
                const pid = $('#scheduleProjectId').val() || '';
                fillScheduleScopeSelect(pid, '');
                $('#scheduleCode,#scheduleName,#scheduleStart,#scheduleEnd,#scheduleNotes').val('');
                $('#scheduleWeight,#scheduleTarget,#scheduleActual,#scheduleBillable').val('0');
                $('#scheduleStatus').val('planned');
                $('#scheduleSortOrder').val('0');
            };

            const invoiceFormReset = () => {
                $('#invoiceId').val('');
                fillBillingProjectSelect('#invoiceProjectId');
                fillInvoiceScheduleSelect($('#invoiceProjectId').val(), '');
                $('#invoiceNumber,#invoiceSupplierNumber,#invoiceTaxNumber,#invoiceDate,#invoiceDue').val('');
                $('#invoiceProgress').val('0');
                $('#invoiceCurrency').val('IDR');
                $('#invoiceRate').val('1');
                $('#invoiceAmount').val('0');
                $('#invoiceStatus').val('draft');
            };

            const renderSchedules = () => {
                const filterProjectId = Number($('#scheduleFilterProjectId').val() || 0);
                const filtered = schedules
                    .filter((row) => !filterProjectId || Number(row.project_id) === filterProjectId)
                    .slice()
                    .sort((a, b) =>
                        (String(a.project_code || '').localeCompare(String(b.project_code || '')))
                        || (Number(a.project_id || 0) - Number(b.project_id || 0))
                        || (Number(a.sort_order || 0) - Number(b.sort_order || 0))
                        || (String(a.end_date || '').localeCompare(String(b.end_date || '')))
                        || (String(a.activity_code || '').localeCompare(String(b.activity_code || '')))
                    );

                const totalWeight = filtered.reduce((acc, r) => acc + Number(r.weight_percent || 0), 0);
                const w = Number(totalWeight.toFixed(3));
                const badge = $('#scheduleWeightTotalBadge');
                badge.text(`Total Weight: ${w.toFixed(3)}%`);
                badge.removeClass('text-bg-secondary text-bg-success text-bg-warning text-bg-danger');
                if (Math.abs(w - 100.0) <= 0.001) {
                    badge.addClass('text-bg-success');
                } else if (w > 100.001) {
                    badge.addClass('text-bg-danger');
                } else {
                    badge.addClass('text-bg-warning');
                }

                // Group by project to avoid repeating "Project" column for each row.
                const groups = new Map();
                filtered.forEach((row) => {
                    const pid = String(row.project_id || '');
                    if (!groups.has(pid)) {
                        groups.set(pid, {
                            project_code: row.project_code || '-',
                            project_name: row.project_name || '-',
                            rows: [],
                        });
                    }
                    groups.get(pid).rows.push(row);
                });

                let globalIdx = 0;
                const html = Array.from(groups.values()).map((g) => {
                    const weightSum = g.rows.reduce((acc, r) => acc + Number(r.weight_percent || 0), 0);
                    const meta = `${g.rows.length} aktivitas | Weight total: ${Number(weightSum.toFixed(3)).toFixed(3)}%`;

                    const head = `
                        <tr class="schedule-group-row">
                            <td colspan="11">
                                ${g.project_code} - ${g.project_name}
                                <span class="schedule-group-meta ms-2">(${meta})</span>
                            </td>
                        </tr>
                    `;

                    const body = g.rows.map((row) => {
                        globalIdx++;
                        const activity = `${row.activity_code || '-'} - ${row.activity_name || '-'}`;
                        const scope = `${(row.scope_code ? (row.scope_code + ' - ') : '') + (row.scope_name || '-')}`;
                        return `
                            <tr>
                                <td>${globalIdx}</td>
                                <td class="schedule-indent">-</td>
                                <td>${activity}</td>
                                <td>${scope}</td>
                                <td>${row.start_date || '-'} s/d ${row.end_date || '-'}</td>
                                <td>${Number(row.weight_percent || 0).toFixed(3)}</td>
                                <td>${Number(row.target_progress_percent || 0).toFixed(3)}</td>
                                <td>${Number(row.actual_progress_percent || 0).toFixed(3)}</td>
                                <td>${Number(row.billable_progress_percent || 0).toFixed(3)}</td>
                                <td>${statusBadge(row.status)}</td>
                                <td><button class="btn btn-sm btn-outline-primary btn-sch-edit" data-id="${row.id}">Edit</button> <button class="btn btn-sm btn-outline-danger btn-sch-del" data-id="${row.id}">Delete</button></td>
                            </tr>
                        `;
                    }).join('');

                    return head + body;
                }).join('');

                $('#scheduleTbody').html(html || '<tr><td colspan="11" class="text-center text-muted">Belum ada data schedule</td></tr>');
            };

            const renderInvoices = () => {
                const filterProjectId = Number($('#invoiceFilterProjectId').val() || 0);
                const filtered = invoices
                    .filter((row) => !filterProjectId || Number(row.project_id) === filterProjectId)
                    .slice();

                // Reminder badge helper: computed on server (invoiceProgressData -> reminder).
                const reminderRank = (r) => {
                    const lvl = (r?.reminder?.level || '').toString();
                    if (lvl === 'overdue') return 0;
                    if (lvl === 'due_today') return 1;
                    if (lvl === 'due_1') return 2;
                    if (lvl === 'due_3') return 3;
                    if (lvl === 'due_7') return 4;
                    if (lvl === 'missing_due_date') return 5;
                    return 99;
                };
                const reminderBadge = (r) => {
                    const rem = r?.reminder || null;
                    if (!rem) return `<span class="badge text-bg-light border">-</span>`;
                    const lvl = (rem.level || '').toString();
                    if (lvl === 'overdue') return `<span class="badge text-bg-danger">Overdue ${Number(rem.days || 0)} hari</span>`;
                    if (lvl === 'due_today') return `<span class="badge text-bg-danger">Jatuh tempo hari ini</span>`;
                    if (lvl === 'due_1') return `<span class="badge text-bg-warning">H-${Number(rem.days || 1)}</span>`;
                    if (lvl === 'due_3') return `<span class="badge text-bg-warning">H-${Number(rem.days || 3)}</span>`;
                    if (lvl === 'due_7') return `<span class="badge text-bg-info">H-${Number(rem.days || 7)}</span>`;
                    if (lvl === 'missing_due_date') return `<span class="badge text-bg-secondary">Set due date</span>`;
                    return `<span class="badge text-bg-light border">${rem.label || '-'}</span>`;
                };

                // Put urgent items first (overdue / due soon).
                filtered.sort((a, b) =>
                    reminderRank(a) - reminderRank(b)
                    || String(a.due_date || '').localeCompare(String(b.due_date || ''))
                    || String(a.invoice_date || '').localeCompare(String(b.invoice_date || ''))
                    || String(a.invoice_number || '').localeCompare(String(b.invoice_number || ''))
                );

                const html = filtered.map((row) => `
                    <tr>
                        <td>${row.invoice_date || '-'}</td>
                        <td>${row.invoice_number || '-'}</td>
                        <td>${row.supplier_invoice_number || '-'}</td>
                        <td>${row.no_wo || '-'}</td>
                        <td>${row.quotation_number || '-'}</td>
                        <td>${row.due_date || '-'}</td>
                        <td>${reminderBadge(row)}</td>
                        <td>${row.tax_invoice_number || '-'}</td>
                        <td>${row.customer_name || '-'}</td>
                        <td>${fmtMoney(row.amount_idr || 0)}</td>
                        <td>${statusBadge(row.status)}</td>
                        <td><button class="btn btn-sm btn-outline-dark btn-inv-print" data-id="${row.id}">Cetak</button></td>
                        <td><button class="btn btn-sm btn-outline-primary btn-inv-edit" data-id="${row.id}">Edit</button> <button class="btn btn-sm btn-outline-danger btn-inv-del" data-id="${row.id}">Delete</button></td>
                    </tr>`).join('');
                $('#invoiceTbody').html(html || '<tr><td colspan="13" class="text-center text-muted">Belum ada data invoice progress</td></tr>');
            };

            const renderCurve = () => {
                const filterProjectId = Number($('#curveProjectId').val() || 0);
                const filtered = schedules
                    .filter((row) => !filterProjectId || Number(row.project_id) === filterProjectId)
                    .slice()
                    .sort((a, b) => String(a.end_date || '').localeCompare(String(b.end_date || '')) || Number(a.sort_order || 0) - Number(b.sort_order || 0));

                let target = 0;
                let actual = 0;
                let billable = 0;
                const labels = [];
                const targetData = [];
                const actualData = [];
                const billableData = [];

                const tbody = filtered.map((row) => {
                    target += Number(row.target_progress_percent || 0);
                    actual += Number(row.actual_progress_percent || 0);
                    billable += Number(row.billable_progress_percent || 0);
                    labels.push(row.end_date || row.start_date || '-');
                    targetData.push(Number(target.toFixed(3)));
                    actualData.push(Number(actual.toFixed(3)));
                    billableData.push(Number(billable.toFixed(3)));
                    return `<tr><td>${row.end_date || row.start_date || '-'}</td><td>${row.activity_code || '-'} - ${row.activity_name || '-'}</td><td>${target.toFixed(3)}%</td><td>${actual.toFixed(3)}%</td><td>${billable.toFixed(3)}%</td></tr>`;
                }).join('');

                $('#curveTbody').html(tbody || '<tr><td colspan="5" class="text-center text-muted">Belum ada data schedule untuk project ini</td></tr>');
                $('#curveTargetTotal').text(`${target.toFixed(3)}%`);
                $('#curveActualTotal').text(`${actual.toFixed(3)}%`);
                $('#curveBillableTotal').text(`${billable.toFixed(3)}%`);

                const ctx = document.getElementById('curveChart');
                if (curveChart) curveChart.destroy();
                curveChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels,
                        datasets: [
                            { label: 'Target', data: targetData, borderColor: '#6f42c1', backgroundColor: 'rgba(111,66,193,0.12)', tension: 0.25, fill: false },
                            { label: 'Actual', data: actualData, borderColor: '#0d6efd', backgroundColor: 'rgba(13,110,253,0.12)', tension: 0.25, fill: false },
                            { label: 'Billable', data: billableData, borderColor: '#198754', backgroundColor: 'rgba(25,135,84,0.12)', tension: 0.25, fill: false }
                        ]
                    },
                    options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, scales: { y: { beginAtZero: true, suggestedMax: 100, ticks: { callback: (v) => `${v}%` } } } }
                });
            };

            const loadProgressData = () => $.when(
                $.getJSON('{{ route('master_project.progress_schedules.data') }}'),
                $.getJSON('{{ route('master_project.invoice_progress.data') }}')
            ).done((scheduleResp, invoiceResp) => {
                schedules = scheduleResp[0]?.data || [];
                invoices = invoiceResp[0]?.data || [];
                fillBillingProjectSelect('#scheduleFilterProjectId', $('#scheduleFilterProjectId').val() || '', true);
                fillBillingProjectSelect('#invoiceFilterProjectId', $('#invoiceFilterProjectId').val() || '', true);
                fillBillingProjectSelect('#curveProjectId', $('#curveProjectId').val() || '', true);
                renderSchedules();
                renderInvoices();
                renderCurve();
                updateCurveExportLinks();
            });

            const fillScheduleScopeSelect = (projectId, selectedId = '') => {
                const pid = Number(projectId || 0);
                const filtered = scopes
                    .filter((x) => Number(x.project_id || 0) === pid)
                    .slice()
                    .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0));
                const opts = ['<option value=\"\">- Scope (opsional) -</option>'];
                filtered.forEach((x) => opts.push(`<option value=\"${x.id}\">${x.scope_code || ''} - ${x.scope_name || ''}</option>`));
                $('#scheduleScopeId').html(opts.join('')).val(selectedId || '');
            };

            const updateCurveExportLinks = () => {
                const projectId = $('#curveProjectId').val() || '';
                const pdf = $('#btnCurveExportPdf');
                const xlsx = $('#btnCurveExportXlsx');
                if (!projectId) {
                    pdf.attr('href', '#').addClass('disabled');
                    xlsx.attr('href', '#').addClass('disabled');
                    return;
                }
                pdf.removeClass('disabled').attr('href', `{{ route('master_project.progress_schedules.export_pdf') }}?project_id=${encodeURIComponent(projectId)}`);
                xlsx.removeClass('disabled').attr('href', `{{ route('master_project.progress_schedules.export_xlsx') }}?project_id=${encodeURIComponent(projectId)}`);
            };

            $('#scheduleFilterProjectId').on('change', renderSchedules);
            $('#invoiceFilterProjectId').on('change', renderInvoices);
            $('#curveProjectId').on('change', () => { renderCurve(); updateCurveExportLinks(); });
            $('#btnCurveRefresh').on('click', renderCurve);
            $('#btnScheduleNew').on('click', () => { scheduleFormReset(); $('#scheduleFormWrap').removeClass('d-none'); });
            $('#btnInvoiceNew').on('click', () => { invoiceFormReset(); $('#invoiceFormWrap').removeClass('d-none'); });
            $('#btnScheduleCancel').on('click', () => $('#scheduleFormWrap').addClass('d-none'));
            $('#btnInvoiceCancel').on('click', () => $('#invoiceFormWrap').addClass('d-none'));
            $('#invoiceProjectId').on('change', function(){ fillInvoiceScheduleSelect($(this).val(), ''); });
            $('#scheduleProjectId').on('change', function(){ fillScheduleScopeSelect($(this).val(), ''); });

            $('#btnScheduleAutoWeight').on('click', function () {
                const projectId = Number($('#scheduleFilterProjectId').val() || 0);
                if (!projectId) return Swal.fire('Warning', 'Pilih project dulu di filter schedule.', 'warning');
                Swal.fire({ title: 'Auto weight dari RAB?', text: 'Weight akan dibagi per scope berdasarkan total nilai RAB.', icon: 'question', showCancelButton: true })
                    .then((ok) => {
                        if (!ok.isConfirmed) return;
                        $.ajax({ url: '{{ route('master_project.progress_schedules.auto_weight') }}', type: 'POST', data: { project_id: projectId } })
                            .done((r) => { loadProgressData(); Swal.fire('Success', r?.message || 'Auto weight selesai', 'success'); })
                            .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Auto weight gagal', 'error'));
                    });
            });

            $('#btnScheduleSave').on('click', function () {
                const id = $('#scheduleId').val();
                const payload = {
                    project_id: $('#scheduleProjectId').val(),
                    activity_code: ($('#scheduleCode').val() || '').toString().trim(),
                    activity_name: ($('#scheduleName').val() || '').toString().trim(),
                    scope_id: $('#scheduleScopeId').val() || '',
                    start_date: $('#scheduleStart').val(),
                    end_date: $('#scheduleEnd').val(),
                    weight_percent: $('#scheduleWeight').val() || 0,
                    target_progress_percent: $('#scheduleTarget').val() || 0,
                    actual_progress_percent: $('#scheduleActual').val() || 0,
                    billable_progress_percent: $('#scheduleBillable').val() || 0,
                    status: $('#scheduleStatus').val(),
                    sort_order: $('#scheduleSortOrder').val() || 0,
                    notes: ($('#scheduleNotes').val() || '').toString().trim()
                };
                if (!payload.project_id || !payload.activity_name || !payload.start_date || !payload.end_date) return Swal.fire('Warning', 'Project, aktivitas, start, end wajib diisi', 'warning');
                $.ajax({ url: id ? `{{ url('/master-project/progress-schedules') }}/${id}` : '{{ route('master_project.progress_schedules.store') }}', type: id ? 'PUT' : 'POST', data: payload })
                    .done((r) => { $('#scheduleFormWrap').addClass('d-none'); loadProgressData(); Swal.fire('Success', r?.message || 'Saved', 'success'); })
                    .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Save gagal', 'error'));
            });

            $('#btnInvoiceSave').on('click', function () {
                const id = $('#invoiceId').val();
                const payload = {
                    project_id: $('#invoiceProjectId').val(), progress_schedule_id: $('#invoiceScheduleId').val(), invoice_number: ($('#invoiceNumber').val() || '').toString().trim(),
                    supplier_invoice_number: ($('#invoiceSupplierNumber').val() || '').toString().trim(), tax_invoice_number: ($('#invoiceTaxNumber').val() || '').toString().trim(),
                    invoice_date: $('#invoiceDate').val(), due_date: $('#invoiceDue').val(), progress_percent: $('#invoiceProgress').val() || 0,
                    currency_code: $('#invoiceCurrency').val(), exchange_rate_to_idr: $('#invoiceRate').val() || 1, amount: $('#invoiceAmount').val() || 0, status: $('#invoiceStatus').val()
                };
                if (!payload.project_id || !payload.invoice_number) return Swal.fire('Warning', 'Project dan nomor invoice wajib diisi', 'warning');
                $.ajax({ url: id ? `{{ url('/master-project/invoice-progress') }}/${id}` : '{{ route('master_project.invoice_progress.store') }}', type: id ? 'PUT' : 'POST', data: payload })
                    .done((r) => { $('#invoiceFormWrap').addClass('d-none'); loadProgressData(); Swal.fire('Success', r?.message || 'Saved', 'success'); })
                    .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Save gagal', 'error'));
            });

            $('#scheduleTbody').on('click', '.btn-sch-edit', function () {
                const row = schedules.find((x) => Number(x.id) === Number($(this).data('id')));
                if (!row) return;
                $('#scheduleFormWrap').removeClass('d-none');
                $('#scheduleId').val(row.id);
                fillBillingProjectSelect('#scheduleProjectId', row.project_id);
                $('#scheduleCode').val(row.activity_code || '');
                $('#scheduleName').val(row.activity_name || '');
                fillScheduleScopeSelect(row.project_id, row.scope_id || '');
                $('#scheduleStart').val(row.start_date || '');
                $('#scheduleEnd').val(row.end_date || '');
                $('#scheduleWeight').val(row.weight_percent || 0);
                $('#scheduleTarget').val(row.target_progress_percent || 0);
                $('#scheduleActual').val(row.actual_progress_percent || 0);
                $('#scheduleBillable').val(row.billable_progress_percent || 0);
                $('#scheduleStatus').val(row.status || 'planned');
                $('#scheduleSortOrder').val(row.sort_order || 0);
                $('#scheduleNotes').val(row.notes || '');
            });

            $('#invoiceTbody').on('click', '.btn-inv-edit', function () {
                const row = invoices.find((x) => Number(x.id) === Number($(this).data('id')));
                if (!row) return;
                $('#invoiceFormWrap').removeClass('d-none');
                $('#invoiceId').val(row.id);
                fillBillingProjectSelect('#invoiceProjectId', row.project_id);
                fillInvoiceScheduleSelect(row.project_id, row.progress_schedule_id || '');
                $('#invoiceNumber').val(row.invoice_number || '');
                $('#invoiceSupplierNumber').val(row.supplier_invoice_number || '');
                $('#invoiceTaxNumber').val(row.tax_invoice_number || '');
                $('#invoiceDate').val(row.invoice_date || '');
                $('#invoiceDue').val(row.due_date || '');
                $('#invoiceProgress').val(row.progress_percent || 0);
                $('#invoiceCurrency').val((row.currency_code || 'IDR').toUpperCase());
                $('#invoiceRate').val(row.exchange_rate_to_idr || 1);
                $('#invoiceAmount').val(row.amount || 0);
                $('#invoiceStatus').val(row.status || 'draft');
            });

            $('#invoiceTbody').on('click', '.btn-inv-print', function () {
                const row = invoices.find((x) => Number(x.id) === Number($(this).data('id')));
                if (!row) return;
                const w = window.open('', '_blank');
                if (!w) return;
                w.document.write(`<html><head><title>Cetak Invoice ${row.invoice_number || ''}</title></head><body><h3>Invoice Progress</h3><table border="1" cellpadding="6" cellspacing="0">
                    <tr><td>Tgl Invoice</td><td>${row.invoice_date || '-'}</td></tr>
                    <tr><td>No Invoice System</td><td>${row.invoice_number || '-'}</td></tr>
                    <tr><td>No Invoice Supplier</td><td>${row.supplier_invoice_number || '-'}</td></tr>
                    <tr><td>No WO</td><td>${row.no_wo || '-'}</td></tr>
                    <tr><td>No Quotation</td><td>${row.quotation_number || '-'}</td></tr>
                    <tr><td>Jatuh Tempo</td><td>${row.due_date || '-'}</td></tr>
                    <tr><td>No Faktur Pajak</td><td>${row.tax_invoice_number || '-'}</td></tr>
                    <tr><td>Nama Customer</td><td>${row.customer_name || '-'}</td></tr>
                    <tr><td>Total (Rp.)</td><td>${fmtMoney(row.amount_idr)}</td></tr>
                    <tr><td>Status</td><td>${row.status || '-'}</td></tr></table></body></html>`);
                w.document.close();
                w.focus();
                w.print();
            });

            $('#scheduleTbody').on('click', '.btn-sch-del', function () {
                const id = Number($(this).data('id'));
                Swal.fire({ title: 'Hapus schedule?', icon: 'warning', showCancelButton: true }).then((ok) => {
                    if (!ok.isConfirmed) return;
                    $.ajax({ url: `{{ url('/master-project/progress-schedules') }}/${id}`, type: 'DELETE' })
                        .done((r) => { loadProgressData(); Swal.fire('Deleted', r?.message || 'Deleted', 'success'); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Delete gagal', 'error'));
                });
            });

            $('#invoiceTbody').on('click', '.btn-inv-del', function () {
                const id = Number($(this).data('id'));
                Swal.fire({ title: 'Hapus invoice?', icon: 'warning', showCancelButton: true }).then((ok) => {
                    if (!ok.isConfirmed) return;
                    $.ajax({ url: `{{ url('/master-project/invoice-progress') }}/${id}`, type: 'DELETE' })
                        .done((r) => { loadProgressData(); Swal.fire('Deleted', r?.message || 'Deleted', 'success'); })
                        .fail((x) => Swal.fire('Error', x.responseJSON?.message || 'Delete gagal', 'error'));
                });
            });

            $.when(loadReferences(), loadProgressData()).always(() => {
                loadData();
                const qs = new URLSearchParams(window.location.search || '');
                const openAdd = (qs.get('open_add') || '').toString();
                const projectId = Number(qs.get('project_id') || 0);
                const statusBlocked = (qs.get('status_blocked') || '').toString() === '1';
                const openTab = (qs.get('tab') || '').toString();

                if (projectId > 0) {
                    $('#scheduleFilterProjectId').val(String(projectId));
                    $('#invoiceFilterProjectId').val(String(projectId));
                    $('#curveProjectId').val(String(projectId));
                    renderSchedules();
                    renderInvoices();
                    renderCurve();
                    updateCurveExportLinks();
                }

                if (openTab) {
                    const trigger = document.querySelector(`#tab-${openTab}-btn`);
                    if (trigger) bootstrap.Tab.getOrCreateInstance(trigger).show();
                }

                if (statusBlocked) {
                    Swal.fire('Info', 'Detail RAB hanya untuk project status Disetujui Client / On Going. Silakan update status project dulu.', 'info');
                }
                if (openAdd === '1' && projectId > 0) {
                    setTimeout(() => {
                        Swal.fire({
                            title: 'Pilih input RAB',
                            text: 'Mau tambah manual atau upload file?',
                            icon: 'question',
                            showCancelButton: true,
                            showDenyButton: true,
                            confirmButtonText: 'Tambah Manual',
                            denyButtonText: 'Upload RAB',
                            cancelButtonText: 'Batal'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                openRabModalForProject(projectId);
                                return;
                            }
                            if (result.isDenied) {
                                openUploadModalForProject(projectId);
                            }
                        });
                    }, 150);
                }
            });
        });
    </script>
@endpush