@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>
                    <button type="button" class="btn ngbvd-btn-primary btn-sm" data-report-action="reload-pivotjs"><i class="ti-reload"></i> Reload PivotJS</button>
                    <button type="button" class="btn ngbvd-btn-soft btn-sm" data-report-action="export-pivot-table"><i class="ti-download"></i> Export Pivot Table</button>
                </div>
                <small class="text-muted">Classic PivotJS drag-and-drop analysis for quick summaries.</small>
            </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="{{ asset('/js/plugins/custom/pivotjs/pivot.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 src="{{ asset('/pivotjs/c3_renderers.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.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);
</script>
<script src="{{ asset('assets/js/ngbvd-report-workbench.js') }}"></script>
@endpush