<div class="card ngbvd-table-card">
    <div class="card-block">
        <div class="ngbvd-table-toolbar">
            <div><h5 class="mb-1">Basic Analysis</h5><small class="text-muted">Load incident data into a searchable/exportable grid. Use Advanced Analysis for pivot-style exploration where licensed.</small></div>
            <button type="button" id="loadAnalysisData" class="btn ngbvd-btn-primary"><i class="ti-reload"></i> Load Data</button>
        </div>
        <div id="analysisMessage" class="text-muted mb-3">Click Load Data to fetch the analysis dataset.</div>
        <div class="table-responsive">
            <table class="table table-striped table-hover ngbvd-modern-table" id="analysisGrid" data-datatable="manual"><thead></thead><tbody></tbody></table>
        </div>
    </div>
</div>
@push('scripts')
<script>
(function(){
    var button = document.getElementById('loadAnalysisData');
    var message = document.getElementById('analysisMessage');
    var table = document.getElementById('analysisGrid');
    if(!button || !table){ return; }
    button.addEventListener('click', function(){
        message.textContent = 'Loading analysis data...';
        fetch("{{ url('/analysis/anaylsisdata') }}", {headers:{'Accept':'application/json'}})
            .then(function(r){ return r.json(); })
            .then(function(data){
                if(!Array.isArray(data) || !data.length){ message.textContent = 'No analysis data returned.'; return; }
                var keys = Object.keys(data[0]);
                table.querySelector('thead').innerHTML = '<tr>'+keys.map(function(k){return '<th>'+k+'</th>';}).join('')+'</tr>';
                table.querySelector('tbody').innerHTML = data.slice(0, 2000).map(function(row){ return '<tr>'+keys.map(function(k){ return '<td>'+String(row[k] == null ? '' : row[k]).replace(/[&<>]/g,function(s){return {'&':'&amp;','<':'&lt;','>':'&gt;'}[s];})+'</td>'; }).join('')+'</tr>'; }).join('');
                message.textContent = 'Showing '+Math.min(data.length, 2000).toLocaleString()+' of '+data.length.toLocaleString()+' records.';
                if(window.jQuery && jQuery.fn.DataTable && !jQuery.fn.DataTable.isDataTable(table)){ jQuery(table).DataTable({pageLength:25,dom:'Bfrtip',buttons:['copy','csv','excel']}); }
            })
            .catch(function(){ message.textContent = 'Unable to load analysis data. Please check the analysis endpoint.'; });
    });
})();
</script>
@endpush

<script src="{{ asset('assets/js/ngbvd-report-workbench.js') }}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNa5nWt7v17k4uDs9k1Dle4hZ33zo+LmcyqP9dEzcIvPZxS8OPe8pABuNV8RsQcdwmqU+Xo3QkWm4DcWmA6HYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" integrity="sha512-qZvrmS2ekKPF2mSznTQsxqPgnpkI4DNTlrdUmTzrDgektczlKNRRhy5X5AAOnx5S09ydFYWWNSfcEqDTTHgtNA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="ngbvdLegacyPivotExportToolbar" class="ngbvd-export-actions" style="margin:12px 0;display:flex;flex-wrap:wrap;gap:8px;">
    <button type="button" class="btn btn-sm btn-primary" data-report-action="export-pivot-csv" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotCsv(event);">Export Pivot CSV</button>
    <button type="button" class="btn btn-sm btn-primary" data-report-action="export-pivot-pdf" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotPdf(event);">Export Pivot PDF</button>
    <button type="button" class="btn btn-sm btn-primary" data-report-action="export-pivot-image" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotImage(event);">Export Pivot Image</button>
    <button type="button" class="btn btn-sm btn-secondary" data-report-action="export-dataset-csv" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportDatasetCsv(event);">Export Dataset CSV</button>
</div>

<script>
window.NGBVD_REPORT_CONFIG = window.NGBVD_REPORT_CONFIG || {};
window.NGBVD_REPORT_CONFIG.assetBase = window.NGBVD_REPORT_CONFIG.assetBase || '{{ url('/') }}';
(function(){
    var script = document.createElement('script');
    script.src = '{{ asset('assets/js/ngbvd-report-workbench.js') }}?v=20260627-pivot-export-functional-v3';
    script.async = false;
    document.body.appendChild(script);
})();
</script>
