@extends('layouts.app')
@section('title', $pageTitle ?? 'CSR Costing')

@push('stylesheets')
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/csr-costing.css') }}?v={{ @filemtime(public_path('css/csr-costing.css')) ?: time() }}">
<style>
    #csrBoqIndexTableCard .table-responsive { overflow-x: visible; }
    .csr-boq-mgmt-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
    .csr-boq-mgmt-actions .btn { border-radius: 8px; font-weight: 600; }
    .csr-boq-modal .modal-header { background: linear-gradient(135deg, #1a4a6e 0%, #2d6a8f 100%); color: #fff; border: 0; }
    .csr-boq-modal .modal-title { font-size: 1.05rem; font-weight: 700; }
    .csr-boq-modal .modal-subtitle { font-size: 0.8rem; opacity: 0.88; }
    .csr-boq-modal .close { color: #fff; text-shadow: none; opacity: 0.9; }
    .csr-boq-gs-section { border: 1px solid rgba(26,74,110,.14); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
    .csr-boq-gs-section__title { font-weight: 700; color: #1a4a6e; margin-bottom: 0.75rem; font-size: 0.95rem; letter-spacing: 0.02em; }
    .csr-boq-gs-table thead th { background: #e8f0f6; color: #1a4a6e; font-size: 0.78rem; font-weight: 700; border-color: #d0dde8; }
    .csr-boq-gs-table td, .csr-boq-gs-table th { vertical-align: middle; }
    .csr-boq-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .csr-boq-upload-row { border: 1px dashed #c5d3de; border-radius: 10px; padding: 0.75rem; margin-bottom: 0.5rem; background: #fff; }
    .csr-boq-upload-progress { height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; margin-top: 0.35rem; }
    .csr-boq-upload-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, #28a745, #5cc975); transition: width 0.2s ease; }
    .csr-boq-save-status { font-size: 0.85rem; }
    .csr-boq-save-status--ok { color: #1e7e34; }
    .csr-boq-save-status--err { color: #c82333; }
    .csr-boq-ee-readonly td { background: #fff; }
    .csr-boq-ee-readonly thead th { background: #e8f0f6; }
</style>
@endpush

@section('contents')
<section class="content csr-boq-mgmt-page">
    <div class="container-fluid">
        <div class="card card-outline card-primary mb-3 shadow-sm">
            <div class="card-body pb-2 d-flex flex-wrap justify-content-between align-items-center gap-2">
                <p class="text-muted small mb-0">Manage scheme-level <strong>Grand Summary</strong> and view <strong>Engineer's Estimate</strong> (auto-calculated from Cost Estimate chapters). PC-1 displays these when linked.</p>
                @if (can_csr_boq_capability('add'))
                    <a href="{{ route('csr-costing.boq.create') }}" class="btn btn-primary btn-sm shadow-sm"><i class="fas fa-plus mr-1"></i> New Cost Estimate</a>
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-12" id="csrBoqIndexTableCard">
                <x-layouts.index-card
                    :showCreateButton="false"
                    :createRoute="null"
                    tableHeading="Cost Estimate Management"
                    :headerAction="''"
                    :headers="['ADP #', 'UID', 'Scheme name', 'Status', 'Actions']"
                    :pagination="''">
                    @forelse ($schemes as $scheme)
                        <tr>
                            <td>{{ $scheme->adp_number !== '' ? $scheme->adp_number : '—' }}</td>
                            <td class="text-monospace small">{{ $scheme->uid !== '' ? $scheme->uid : '—' }}</td>
                            <td class="text-left font-weight-bold text-dark">{{ $scheme->name }}</td>
                            <td>
                                @if ($scheme->status === 'Published')
                                    <span class="badge badge-success">Published</span>
                                @else
                                    <span class="badge badge-secondary">Draft</span>
                                @endif
                                <div class="text-muted small mt-1">{{ $scheme->boq_count }} Cost Estimate{{ $scheme->boq_count === 1 ? '' : 's' }}</div>
                            </td>
                            <td>
                                <div class="csr-boq-mgmt-actions">
                                    <button type="button" class="btn btn-primary btn-sm csr-boq-open-grand"
                                        data-scheme-id="{{ $scheme->scheme_id }}"
                                        data-scheme-name="{{ e($scheme->name) }}">
                                        <i class="fas fa-table mr-1"></i> Grand Summary
                                        </button>
                                    <button type="button" class="btn btn-outline-primary btn-sm csr-boq-open-engineer"
                                        data-scheme-id="{{ $scheme->scheme_id }}"
                                        data-scheme-name="{{ e($scheme->name) }}">
                                        <i class="fas fa-hard-hat mr-1"></i> Engineer Estimate
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No schemes with Cost Estimates yet. <a href="{{ route('csr-costing.boq.create') }}">Create a Cost Estimate</a> and link it to a project.</td>
                        </tr>
                    @endforelse
                </x-layouts.index-card>
            </div>
        </div>
    </div>

    {{-- Grand Summary modal --}}
    <div class="modal fade csr-boq-modal" id="csrBoqGrandModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <div class="flex-grow-1 pr-2">
                        <div class="modal-title" id="csrBoqGrandModalTitle">Grand Summary</div>
                        <div class="modal-subtitle" id="csrBoqGrandModalMeta"></div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                </div>
                <div class="modal-body" id="csrBoqGrandModalBody">
                    <div class="text-center py-5 text-muted">Loading…</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Engineer Estimate modal (read-only) --}}
    <div class="modal fade csr-boq-modal" id="csrBoqEngineerModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <div class="flex-grow-1 pr-2">
                        <div class="modal-title" id="csrBoqEngineerModalTitle">Engineer's Estimate</div>
                        <div class="modal-subtitle" id="csrBoqEngineerModalMeta"></div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                </div>
                <div class="modal-body" id="csrBoqEngineerModalBody">
                    <div class="text-center py-5 text-muted">Loading…</div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script>
(function () {
    var workspaceUrlTpl = @json(route('csr-costing.boq.scheme.workspace', ['schemeId' => '___SID___']));
    var saveUrlTpl = @json(route('csr-costing.boq.scheme.grand-summary.save', ['schemeId' => '___SID___']));
    var boqSchemeBase = @json(rtrim(url('/csr-costing/boq/scheme'), '/'));
    var grandPreviewTpl = @json(rtrim(url('/csr-costing/boq/scheme'), '/').'/___SID___/grand-summary/preview');
    var engineerPreviewTpl = @json(rtrim(url('/csr-costing/boq/scheme'), '/').'/___SID___/engineer-estimate/preview');
    var grandPdfTpl = @json(route('csr-costing.boq.scheme.grand-summary.pdf', ['schemeId' => '___SID___']));
    var engineerPdfTpl = @json(route('csr-costing.boq.scheme.engineer-estimate.pdf', ['schemeId' => '___SID___']));
    var createBoqUrl = @json(route('csr-costing.boq.create'));
    var csrf = @json(csrf_token());
    var openSchemeId = @json($openSchemeId ?? '');
    var openPanel = @json(request()->query('panel', ''));
    var currentSchemeId = '';
    var currentSchemeName = '';

    function schemeUrl(tpl, id) {
        return tpl.replace('___SID___', encodeURIComponent(id));
    }

    function fmtMoney(n) {
        var x = Number(n) || 0;
        return x.toLocaleString('en-US', { minimumFractionDigits: 3, maximumFractionDigits: 3 });
    }

    function esc(s) { return $('<div>').text(s == null ? '' : String(s)).html(); }

    function schemeMeta(data) {
        var parts = [];
        if (data.adp_number) parts.push('ADP: ' + data.adp_number);
        if (data.uid) parts.push('UID: ' + data.uid);
        return parts.join(' · ');
    }

    function letterForIndex(i) {
        if (i < 0) return 'A';
        if (i < 26) return String.fromCharCode(65 + i);
        return letterForIndex(Math.floor(i / 26) - 1) + letterForIndex(i % 26);
    }

    function renderGrandSummary(data) {
        var pcLock = data.pc_lock || {};
        var isLocked = !!pcLock.locked;
        var html = '';
        html += '<div class="csr-boq-toolbar">';
        html += '<div><span class="text-muted small">Scheme:</span> <strong>' + esc(data.scheme_name) + '</strong></div>';
        html += '<div class="d-flex flex-wrap gap-2">';
        if (!isLocked) {
            html += '<a href="' + createBoqUrl + '?bpms_scheme_id=' + encodeURIComponent(data.scheme_id) + '" class="btn btn-outline-primary btn-sm"><i class="fas fa-plus mr-1"></i> Create New Cost Estimate</a>';
        }
        html += '<a href="' + schemeUrl(grandPreviewTpl, data.scheme_id) + '" class="btn btn-outline-danger btn-sm" target="_blank" rel="noopener"><i class="fas fa-eye mr-1"></i> View / Print</a>';
        html += '</div></div>';

        if (isLocked) {
            html += '<div class="alert alert-warning py-2 px-3 mb-3 small"><i class="fas fa-lock mr-1"></i> ' + esc(pcLock.reason || 'Locked while PC-I is approved.') + '</div>';
        }

        html += '<form id="csrBoqGrandSummaryForm" enctype="multipart/form-data"' + (isLocked ? ' class="csr-boq-gs-readonly"' : '') + '>';
        html += '<div class="csr-boq-gs-section">';
        html += '<div class="csr-boq-gs-section__title text-uppercase">Grand Summary</div>';
        html += '<p class="small text-muted mb-2">Item A — Cost Estimate totals</p>';
        html += '<div class="table-responsive"><table class="table table-sm table-bordered csr-boq-gs-table mb-3">';
        html += '<thead><tr><th>S. No</th><th>Name of Cost Estimate</th><th class="text-right">PC-1 Amount (Rs)</th><th>Action</th></tr></thead><tbody>';
        (data.boqs || []).forEach(function (b) {
            html += '<tr><td>' + esc(b.letter) + '</td><td>' + esc(b.name) + '</td>';
            html += '<td class="text-right text-monospace">' + fmtMoney(b.amount) + '</td>';
            html += '<td><a href="' + b.edit_url + '" class="btn btn-outline-primary btn-xs btn-sm"><i class="fas fa-edit"></i> Edit</a></td></tr>';
        });
        html += '<tr class="font-weight-bold bg-light"><td colspan="2">Sub Total (A+B…)</td><td class="text-right text-monospace">' + fmtMoney(data.item_a_subtotal) + '</td><td></td></tr>';
        html += '</tbody></table></div>';

        html += '<p class="small text-muted mb-2">Item B — Other items (letters continue after Item A)</p>';
        html += '<div class="table-responsive"><table class="table table-sm table-bordered csr-boq-gs-table mb-2" id="csrBoqNsTable">';
        html += '<thead><tr><th>S No</th><th>Description</th><th class="text-right">Amount (Rs)</th><th></th></tr></thead>';
        html += '<tbody id="csrBoqNsTbody"></tbody>';
        html += '<tfoot><tr class="font-weight-bold bg-light"><td colspan="2">Sub Total</td><td class="text-right text-monospace" id="csrBoqNsSubtotal">' + fmtMoney(data.item_c_subtotal) + '</td><td></td></tr></tfoot>';
        html += '</table></div>';
        html += '<button type="button" class="btn btn-outline-secondary btn-sm mb-3" id="csrBoqNsAddRow"><i class="fas fa-plus mr-1"></i> Add row</button>';
        html += '<div class="d-flex justify-content-between font-weight-bold border-top pt-2 mb-0"><span>Grand Total</span><span class="text-monospace text-primary" id="csrBoqGrandTotal">' + fmtMoney(data.grand_total) + '</span></div>';
        html += '</div>';

        html += '<div class="csr-boq-gs-section">';
        html += '<div class="csr-boq-gs-section__title">Upload Files <span class="text-muted font-weight-normal">(PDF only)</span></div>';
        html += '<div id="csrBoqUploadRows"></div>';
        html += '<button type="button" class="btn btn-outline-secondary btn-sm mb-2" id="csrBoqUploadAddRow"><i class="fas fa-plus mr-1"></i> Add more</button>';
        html += '<div class="csr-boq-upload-progress d-none" id="csrBoqUploadProgress"><div class="csr-boq-upload-progress__bar" id="csrBoqUploadProgressBar"></div></div>';
        html += '<ul class="list-unstyled small mb-0" id="csrBoqUploadedFilesList"></ul>';
        html += '</div>';

        html += '<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 border-top pt-3">';
        html += '<span class="csr-boq-save-status" id="csrBoqSaveStatus"></span>';
        if (!isLocked) {
            html += '<button type="submit" class="btn btn-success shadow-sm" id="csrBoqSaveBtn"><i class="fas fa-save mr-1"></i> Save Grand Summary</button>';
        } else {
            html += '<span class="text-muted small">View only — editing is locked while PC-I is approved.</span>';
        }
        html += '</div>';
        html += '</form>';

        $('#csrBoqGrandModalBody').html(html);

        var nsTbody = document.getElementById('csrBoqNsTbody');
        var items = data.item_b_items || data.non_scheduled_items || [];
        var startIdx = data.item_b_start_index != null ? Number(data.item_b_start_index) : (data.boqs || []).length;
        if (!items.length) items = [{ description: '', amount: '' }];
        items.forEach(function (row, idx) { nsTbody.appendChild(buildNsRow(row, idx, startIdx)); });

        buildUploadRow(0);
        renderUploadedFiles(data.uploaded_files || []);
        bindGrandEvents();
        if (isLocked) {
            $('#csrBoqGrandSummaryForm').find('input, textarea, select, button').not('.csr-boq-preview-link').prop('disabled', true);
            $('#csrBoqNsAddRow, #csrBoqUploadAddRow').hide();
        }
        window.__csrBoqWorkspaceData = data;
    }

    function renderEngineerEstimate(data) {
        var html = '';
        html += '<div class="csr-boq-toolbar mb-3">';
        html += '<p class="text-muted small mb-0">Auto-calculated from Cost Estimate schedule chapters and non-scheduled items. Not editable.</p>';
        html += '<a href="' + schemeUrl(engineerPreviewTpl, data.scheme_id) + '" class="btn btn-outline-danger btn-sm" target="_blank" rel="noopener"><i class="fas fa-eye mr-1"></i> View / Print</a>';
        html += '</div>';
        html += '<div class="csr-boq-gs-section p-0 overflow-hidden">';
        html += '<div class="table-responsive"><table class="table table-sm table-bordered csr-boq-ee-readonly mb-0">';
        html += '<thead><tr><th class="text-center" style="width:4rem">S.No</th><th>Description</th><th class="text-right" style="width:10rem">PC-1 Amount</th></tr></thead><tbody>';
        if (!data.engineer_estimate || !data.engineer_estimate.length) {
            html += '<tr><td colspan="3" class="text-center text-muted py-4">No chapter totals yet. Add schedule lines in Cost Estimates first.</td></tr>';
        } else {
            data.engineer_estimate.forEach(function (row) {
                if ((row.row_type || 'chapter') === 'section_header') {
                    html += '<tr class="font-weight-bold bg-light"><td colspan="3">' + esc(row.description) + '</td></tr>';
                    return;
                }
                html += '<tr><td class="text-center">' + esc(row.sno) + '</td><td>' + esc(row.description) + '</td><td class="text-right text-monospace">' + fmtMoney(row.amount) + '</td></tr>';
            });
        }
        html += '<tr class="font-weight-bold bg-light"><td></td><td>Total</td><td class="text-right text-monospace">' + fmtMoney(data.engineer_estimate_total) + '</td></tr>';
        html += '</tbody></table></div></div>';
        $('#csrBoqEngineerModalBody').html(html);
    }

    function buildNsRow(row, idx, startIdx) {
        startIdx = startIdx != null ? startIdx : 0;
        var letter = row.letter || letterForIndex(startIdx + idx);
        var tr = document.createElement('tr');
        tr.innerHTML =
            '<td class="align-middle text-center font-weight-bold text-primary ns-letter">' + esc(letter) + '</td>' +
            '<td><input type="text" name="non_scheduled_items[' + idx + '][description]" class="form-control form-control-sm ns-desc" value="' + esc(row.description || '') + '" /></td>' +
            '<td><input type="number" step="any" min="0" name="non_scheduled_items[' + idx + '][amount]" class="form-control form-control-sm ns-amount text-right text-monospace" value="' + (row.amount ?? '') + '" /></td>' +
            '<td class="text-center align-middle"><button type="button" class="btn btn-link btn-sm text-danger ns-remove p-0" title="Remove row">&times;</button></td>';
        return tr;
    }

    function reindexNsRows() {
        var startIdx = (window.__csrBoqWorkspaceData && window.__csrBoqWorkspaceData.item_b_start_index != null)
            ? Number(window.__csrBoqWorkspaceData.item_b_start_index)
            : ((window.__csrBoqWorkspaceData && window.__csrBoqWorkspaceData.boqs) ? window.__csrBoqWorkspaceData.boqs.length : 0);
        $('#csrBoqNsTbody tr').each(function (i) {
            $(this).find('.ns-letter').text(letterForIndex(startIdx + i));
            $(this).find('input,button').each(function () {
                var n = this.getAttribute('name');
                if (n) this.setAttribute('name', n.replace(/non_scheduled_items\[\d+\]/, 'non_scheduled_items[' + i + ']'));
            });
        });
    }

    function buildUploadRow(idx) {
        var $row = $('<div class="csr-boq-upload-row" data-upload-idx="' + idx + '">' +
            '<div class="form-row align-items-end">' +
            '<div class="col-md-5 mb-2 mb-md-0"><label class="small font-weight-bold mb-1">File Name</label>' +
            '<input type="text" name="new_uploads[' + idx + '][name]" class="form-control form-control-sm" placeholder="Display name" /></div>' +
            '<div class="col-md-7"><label class="small font-weight-bold mb-1">Select File</label>' +
            '<input type="file" name="new_uploads[' + idx + '][file]" accept="application/pdf,.pdf" class="form-control-file form-control-sm" /></div>' +
            '</div></div>');
        $('#csrBoqUploadRows').append($row);
    }

    function bindGrandEvents() {
        $('#csrBoqNsTbody').off('input', '.ns-amount').on('input', '.ns-amount', recalcNs);
        $('#csrBoqNsAddRow').off('click').on('click', function () {
            var idx = $('#csrBoqNsTbody tr').length;
            var startIdx = (window.__csrBoqWorkspaceData && window.__csrBoqWorkspaceData.item_b_start_index != null)
                ? Number(window.__csrBoqWorkspaceData.item_b_start_index)
                : ((window.__csrBoqWorkspaceData && window.__csrBoqWorkspaceData.boqs) ? window.__csrBoqWorkspaceData.boqs.length : 0);
            document.getElementById('csrBoqNsTbody').appendChild(buildNsRow({}, idx, startIdx));
            reindexNsRows();
        });
        $('#csrBoqNsTbody').off('click', '.ns-remove').on('click', '.ns-remove', function () {
            $(this).closest('tr').remove();
            reindexNsRows();
            recalcNs();
        });
        $('#csrBoqUploadAddRow').off('click').on('click', function () {
            buildUploadRow($('#csrBoqUploadRows .csr-boq-upload-row').length);
        });
        $('#csrBoqGrandSummaryForm').off('submit').on('submit', function (e) {
            e.preventDefault();
            saveGrandSummary();
        });
    }

    function recalcNs() {
        var sub = 0;
        $('#csrBoqNsTbody tr').each(function () {
            sub += parseFloat($(this).find('.ns-amount').val()) || 0;
        });
        sub = Math.round(sub * 1000) / 1000;
        var itemA = (window.__csrBoqWorkspaceData && window.__csrBoqWorkspaceData.item_a_subtotal) || 0;
        $('#csrBoqNsSubtotal').text(fmtMoney(sub));
        $('#csrBoqGrandTotal').text(fmtMoney(itemA + sub));
    }

    function renderUploadedFiles(files) {
        var $list = $('#csrBoqUploadedFilesList').empty();
        if (!files.length) return;
        $list.append('<li class="small font-weight-bold text-muted mb-1">Saved files</li>');
        files.forEach(function (f) {
            if (!f.path) return;
            var fileUrl = f.view_url || ('/storage/' + esc(f.path));
            $list.append('<li class="d-flex justify-content-between align-items-center py-1 border-bottom"><a href="' + fileUrl + '" target="_blank" rel="noopener"><i class="fas fa-file-pdf text-danger mr-1"></i>' + esc(f.name || f.original_name || 'File') + '</a><button type="button" class="btn btn-link btn-sm text-danger csr-boq-remove-file p-0" data-path="' + esc(f.path) + '">Remove</button></li>');
        });
        $('.csr-boq-remove-file').off('click').on('click', function () {
            var path = $(this).data('path');
            var fd = new FormData();
            fd.append('_token', csrf);
            fd.append('remove_uploaded_file', path);
            postSave(fd, function (res) {
                if (res.data) renderGrandSummary(res.data);
            });
        });
    }

    function postSave(fd, onDone) {
        var $status = $('#csrBoqSaveStatus');
        var $btn = $('#csrBoqSaveBtn');
        var $bar = $('#csrBoqUploadProgress');
        var $barInner = $('#csrBoqUploadProgressBar');
        $btn.prop('disabled', true);
        $status.removeClass('csr-boq-save-status--ok csr-boq-save-status--err').text('Saving…');
        $bar.removeClass('d-none');
        $.ajax({
            url: schemeUrl(saveUrlTpl, currentSchemeId),
            method: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        $barInner.css('width', Math.round((e.loaded / e.total) * 100) + '%');
                    }
                }, false);
                return xhr;
            }
        }).done(function (res) {
            $bar.addClass('d-none');
            $barInner.css('width', '0');
            $status.addClass('csr-boq-save-status--ok').text(res.message || 'Saved.');
            if (typeof onDone === 'function') onDone(res);
        }).fail(function (xhr) {
            $bar.addClass('d-none');
            var msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Save failed.';
            if (xhr.responseJSON && xhr.responseJSON.errors) {
                var errs = [];
                $.each(xhr.responseJSON.errors, function (k, v) { errs.push(v.join(', ')); });
                if (errs.length) msg = errs.join(' ');
            }
            $status.addClass('csr-boq-save-status--err').text(msg);
        }).always(function () {
            $btn.prop('disabled', false);
        });
    }

    function saveGrandSummary() {
        reindexNsRows();
        var form = document.getElementById('csrBoqGrandSummaryForm');
        if (!form) return;
        var fd = new FormData(form);
        fd.append('_token', csrf);
        postSave(fd, function (res) {
            if (res.data) renderGrandSummary(res.data);
        });
    }

    function loadScheme(id, name, panel) {
        currentSchemeId = id;
        currentSchemeName = name || '';
        var $modal = panel === 'engineer' ? $('#csrBoqEngineerModal') : $('#csrBoqGrandModal');
        var $title = panel === 'engineer' ? $('#csrBoqEngineerModalTitle') : $('#csrBoqGrandModalTitle');
        var $meta = panel === 'engineer' ? $('#csrBoqEngineerModalMeta') : $('#csrBoqGrandModalMeta');
        var $body = panel === 'engineer' ? $('#csrBoqEngineerModalBody') : $('#csrBoqGrandModalBody');

        $title.text(panel === 'engineer' ? "Engineer's Estimate" : 'Grand Summary');
        $meta.text(name || '');
        $body.html('<div class="text-center py-5 text-muted"><i class="fas fa-spinner fa-spin mr-1"></i> Loading…</div>');
        $modal.modal('show');

        $.ajax({
            url: schemeUrl(workspaceUrlTpl, id),
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        }).done(function (res) {
            var data = res.data || res;
            $meta.text(schemeMeta(data));
            if (panel === 'engineer') {
                renderEngineerEstimate(data);
            } else {
                renderGrandSummary(data);
            }
        }).fail(function (xhr) {
            $body.html('<div class="alert alert-danger mb-0">' + esc((xhr.responseJSON && xhr.responseJSON.message) || 'Could not load data.') + '</div>');
        });
    }

    $(document).on('click', '.csr-boq-open-grand', function (e) {
        e.preventDefault();
        loadScheme($(this).data('scheme-id'), $(this).data('scheme-name'), 'grand');
    });
    $(document).on('click', '.csr-boq-open-engineer', function (e) {
        e.preventDefault();
        loadScheme($(this).data('scheme-id'), $(this).data('scheme-name'), 'engineer');
    });

    if ($('#example1').length && $('#example1 tbody tr').length > 1) {
        $('#example1').DataTable({ responsive: true, lengthChange: false, autoWidth: false, order: [[2, 'asc']] });
    }

    if (openSchemeId) {
        var panel = (openPanel === 'engineer') ? 'engineer' : 'grand';
        var $btn = panel === 'engineer'
            ? $('.csr-boq-open-engineer[data-scheme-id="' + openSchemeId + '"]')
            : $('.csr-boq-open-grand[data-scheme-id="' + openSchemeId + '"]');
        loadScheme(openSchemeId, $btn.data('scheme-name') || '', panel);
    }
})();
</script>
@endpush