<style>
    .ngbvd-pivot-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .ngbvd-export-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
    .ngbvd-export-actions .btn { margin-right: 0 !important; }
    .ngbvd-export-feedback .alert { margin: 10px 0 0 0; }
    .ngbvd-export-capture-area { background: #ffffff !important; padding: 10px; }
    @media (max-width: 768px) {
        .ngbvd-pivot-toolbar-actions, .ngbvd-export-actions { width: 100%; }
        .ngbvd-export-actions .btn, .ngbvd-pivot-toolbar-actions > .btn { flex: 1 1 48%; }
    }
</style>
@php
    $analysisEndpoint = $endpoint ?? url('/analysis/anaylsisdata');
    $analysisTitle = $title ?? 'Analysis';
    $analysisSubtitle = $subtitle ?? 'Explore GBV case data using Flexmonster, PivotJS, grid data and visual summaries.';
    $licenseKeyCode = $licenseKey ?? config('ngbvd.flexmonster_license', '');
@endphp

<div class="ngbvd-page-header mb-3">
    <div>
        <span class="ngbvd-kicker">Decision Support</span>
        <h2 class="ngbvd-page-title">{{ $analysisTitle }}</h2>
        <p class="ngbvd-page-subtitle">{{ $analysisSubtitle }}</p>
    </div>
</div>

<div class="ngbvd-report-workbench" data-report-workbench data-endpoint="{{ $analysisEndpoint }}">
    <ul class="nav nav-pills ngbvd-report-tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#flexmonster-report" role="tab"><i class="ti-layout-grid3"></i> Flexmonster Pivot</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#pivotjs-report" role="tab"><i class="ti-panel"></i> PivotJS</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#grid-report" role="tab"><i class="ti-menu-alt"></i> Grid Data</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#chart-report" role="tab"><i class="ti-bar-chart"></i> Visual Summary</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active ngbvd-report-panel" id="flexmonster-report" role="tabpanel">
            <div class="ngbvd-report-toolbar">
                <div>
                    <button type="button" class="btn ngbvd-btn-primary btn-sm" data-report-action="reload-flexmonster"><i class="ti-reload"></i> Reload Flexmonster</button>
                    <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-flexmonster"><i class="ti-download"></i> Export</button>
                </div>
                <small class="text-muted">Full pivot reporting with toolbar, fields, filters and export.</small>
            </div>
            <div id="flexmonsterContainer" class="ngbvd-pivot-container"><div class="ngbvd-loading">Preparing Flexmonster analysis...</div></div>
        </div>

        <div class="tab-pane fade ngbvd-report-panel" id="pivotjs-report" role="tabpanel">
            <div class="ngbvd-report-toolbar">
                <div class="ngbvd-pivot-toolbar-actions">
                    <button type="button" class="btn ngbvd-btn-primary btn-sm" data-report-action="reload-pivotjs" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.reloadPivotJs(event);"><i class="ti-reload"></i> Reload PivotJS</button>
                    <div class="btn-group ngbvd-export-actions" role="group" aria-label="PivotJS export options">
                        <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-pivot-csv" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotCsv(event);"><i class="ti-download"></i> Export Pivot CSV</button>
                        <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-pivot-pdf" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotPdf(event);"><i class="ti-printer"></i> Export Pivot PDF</button>
                        <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-pivot-image" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportPivotImage(event);"><i class="ti-image"></i> Export Pivot Image</button>
                        <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-dataset-csv" onclick="return window.NGBVDPivotExport && window.NGBVDPivotExport.exportDatasetCsv(event);"><i class="ti-server"></i> Export Dataset CSV</button>
                    </div>
                </div>
                <small class="text-muted">Classic PivotJS drag-and-drop analysis. Renderer options include tables, heatmaps, table bar charts and, where renderer libraries are available, bar, stacked bar, line, area, scatter and pie charts.</small>
            </div>
            <div id="pivotjs-export-feedback" class="ngbvd-export-feedback" aria-live="polite"></div>
            <div id="pivotjsContainer" class="ngbvd-pivotjs-container"><div class="ngbvd-loading">Preparing PivotJS analysis...</div></div>
        </div>

        <div class="tab-pane fade ngbvd-report-panel" id="grid-report" role="tabpanel">
            <div class="ngbvd-report-toolbar">
                <input id="analysisGridSearch" class="form-control" placeholder="Search visible rows...">
                <button type="button" class="btn ngbvd-btn-primary btn-sm" data-report-action="export-grid"><i class="ti-download"></i> Export Grid to Excel</button>
            </div>
            <div class="ngbvd-grid-container"><table id="analysisGridTable" class="table table-striped table-hover ngbvd-modern-table"><thead></thead><tbody></tbody></table></div>
        </div>

        <div class="tab-pane fade ngbvd-report-panel" id="chart-report" role="tabpanel">
            <div class="ngbvd-report-toolbar">
                <small class="text-muted">Visual summary generated from the same report dataset.</small>
                <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="reload-charts"><i class="ti-reload"></i> Reload Charts</button>
            </div>
            <div class="ngbvd-chart-grid">
                <div id="analysisChartDistricts" class="ngbvd-chart-box"></div>
                <div id="analysisChartIncidents" class="ngbvd-chart-box"></div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/ngbvd-roles-analysis.css') }}">
<link rel="stylesheet" href="{{ asset('/flexmonster/flexmonster.css') }}">
<link rel="stylesheet" href="{{ asset('/pivotjs/pivot.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
@endpush

@push('scripts')
<script src="{{ asset('/flexmonster/flexmonster.js') }}"></script>
<script src="{{ asset('/assets/js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ asset('/pivotjs/pivot.js') }}"></script>
<script src="{{ asset('/pivotjs/export_renderers.js') }}"></script>
<script>
window.NGBVD_REPORT_CONFIG = window.NGBVD_REPORT_CONFIG || {};
window.NGBVD_REPORT_CONFIG.endpoint = @json($analysisEndpoint);
window.NGBVD_REPORT_CONFIG.flexmonsterLicense = @json($licenseKeyCode);
window.NGBVD_REPORT_CONFIG.assetBase = @json(url('/'));
</script>
<script src="{{ asset('assets/js/ngbvd-report-workbench.js') }}?v=20260627-pivot-export-functional-v3"></script>
@endpush

{{-- Direct fallback include in case the active layout does not render @stack('scripts') correctly. --}}
<script>
window.NGBVD_REPORT_CONFIG = window.NGBVD_REPORT_CONFIG || {};
window.NGBVD_REPORT_CONFIG.endpoint = window.NGBVD_REPORT_CONFIG.endpoint || @json($analysisEndpoint);
window.NGBVD_REPORT_CONFIG.flexmonsterLicense = window.NGBVD_REPORT_CONFIG.flexmonsterLicense || @json($licenseKeyCode);
window.NGBVD_REPORT_CONFIG.assetBase = window.NGBVD_REPORT_CONFIG.assetBase || @json(url('/'));
</script>
<script>
(function(){
    if (window.NGBVDPivotExport) { return; }
    var script = document.createElement('script');
    script.src = @json(asset('assets/js/ngbvd-report-workbench.js')) + '?v=20260627-pivot-export-functional-v3';
    script.async = false;
    document.currentScript.parentNode.insertBefore(script, document.currentScript.nextSibling);
})();
</script>
