@php
    $analysisTitle = $title ?? 'Incident Analysis';
    $analysisSubtitle = $subtitle ?? 'Secure aggregate indicators and server-side reporting.';
    $analysisScopeMode = $scopeMode ?? 'assigned';
@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 id="analysisWorkbenchStatus" class="alert alert-info" role="status" aria-live="polite">Loading authorized summary...</div>

<section class="ngbvd-report-shell" data-report-workbench data-scope-mode="{{ $analysisScopeMode }}">
    <form id="analysisFilters" class="ngbvd-report-filters" autocomplete="off">
        <input type="hidden" name="scope_mode" value="{{ $analysisScopeMode }}">
        <label>Start date<input class="form-control" type="date" name="startdate"></label>
        <label>End date<input class="form-control" type="date" name="enddate"></label>
        <label>Region ID<input class="form-control" name="region_id" maxlength="64"></label>
        <label>Sub-region ID<input class="form-control" name="sub_region_id" maxlength="64"></label>
        <label>District ID<input class="form-control" name="district_id" maxlength="64"></label>
        <label>Incident type ID<input class="form-control" name="incident_id" maxlength="64"></label>
        <label>Sex<select class="form-control" name="sex"><option value="">All</option><option>Female</option><option>Male</option></select></label>
        <label>Age category<select class="form-control" name="age_category"><option value="">All</option><option value="child">Child</option><option value="adult">Adult</option><option value="unknown">Unknown</option></select></label>
        <label>Service received<select class="form-control" name="service_received"><option value="">All</option><option value="1">Yes</option><option value="0">No</option></select></label>
        <div class="ngbvd-filter-actions">
            <button class="btn ngbvd-btn-primary" type="submit">Apply filters</button>
            <button class="btn ngbvd-btn-soft" type="reset">Clear</button>
        </div>
    </form>

    <div class="ngbvd-metric-grid" id="analysisMetricCards" aria-live="polite"></div>

    <ul class="nav nav-pills ngbvd-report-tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#analysis-overview" role="tab">Overview</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#analysis-grid" role="tab">Case grid</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#analysis-adhoc" role="tab">Constrained analysis</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#analysis-quality" role="tab">Data quality</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="analysis-overview" role="tabpanel">
            <div class="ngbvd-report-panels">
                <article><h5>Cases by district</h5><div id="analysisGeography"></div></article>
                <article><h5>Cases by sex</h5><div id="analysisSex"></div></article>
                <article><h5>Child/adult classification</h5><div id="analysisChildren"></div></article>
                <article><h5>Service delivery</h5><div id="analysisServices"></div></article>
                <article class="ngbvd-wide"><h5>Cases reported over time</h5><div id="analysisTrend"></div></article>
            </div>
        </div>

        <div class="tab-pane fade" id="analysis-grid" role="tabpanel">
            <div class="ngbvd-report-toolbar">
                <input id="analysisGridSearch" class="form-control" maxlength="100" placeholder="Search district, incident type or sex...">
                <select id="analysisGridPageSize" class="form-control"><option>25</option><option selected>50</option><option>100</option></select>
                <div class="btn-group">
                    <button class="btn ngbvd-btn-soft" type="button" data-export-format="csv">Queue CSV</button>
                    <button class="btn ngbvd-btn-soft" type="button" data-export-format="xlsx">Queue Excel</button>
                    <button class="btn ngbvd-btn-soft" type="button" data-export-format="pdf">Queue PDF</button>
                </div>
            </div>
            <div id="analysisExportStatus" aria-live="polite"></div>
            <div class="table-responsive"><table class="table table-striped table-hover ngbvd-modern-table"><thead id="analysisGridHead"></thead><tbody id="analysisGridBody"></tbody></table></div>
            <div class="ngbvd-grid-pager"><button class="btn ngbvd-btn-soft" id="analysisPreviousPage" type="button">Previous</button><span id="analysisPageStatus"></span><button class="btn ngbvd-btn-soft" id="analysisNextPage" type="button">Next</button></div>
        </div>

        <div class="tab-pane fade" id="analysis-adhoc" role="tabpanel">
            <form id="analysisQueryForm" class="ngbvd-query-builder">
                <label>Dimension<select name="dimension" class="form-control"><option value="district">District</option><option value="region">Region</option><option value="sub_region">Sub-region</option><option value="incident_type">Incident type</option><option value="sex">Sex</option><option value="age_category">Age category</option><option value="service_received">Service received</option><option value="reporting_period">Reporting period</option><option value="month">Month</option><option value="year">Year</option></select></label>
                <label>Measure<select name="measure" class="form-control"><option value="case_count">Distinct cases</option><option value="survivor_count">Distinct survivors</option><option value="service_survivor_count">Survivors receiving a service</option><option value="service_intervention_count">Service interventions</option></select></label>
                <label>Period grouping<select name="grouping_interval" class="form-control"><option value="day">Day</option><option value="month" selected>Month</option><option value="quarter">Quarter</option><option value="year">Year</option></select></label>
                <label>Result limit<input name="limit" type="number" min="1" max="500" value="100" class="form-control"></label>
                <button type="submit" class="btn ngbvd-btn-primary">Run analysis</button>
            </form>
            <div class="table-responsive"><table class="table table-striped"><thead><tr><th>Dimension</th><th class="text-right">Value</th></tr></thead><tbody id="analysisQueryResults"></tbody></table></div>
        </div>

        <div class="tab-pane fade" id="analysis-quality" role="tabpanel">
            <div id="analysisDataQuality" class="ngbvd-quality-grid"></div>
            <p class="text-muted mt-3">Completeness targets are 100%. Displayed values are calculated results and are never hardcoded.</p>
        </div>
    </div>
</section>

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/ngbvd-reporting-v2.css') }}?v=20261009-2">
@endpush

@push('scripts')
<script>
window.NGBVD_REPORT_CONFIG = {
    summaryEndpoint: @json(route('analysis.summary')),
    gridEndpoint: @json(route('analysis.data')),
    queryEndpoint: @json(route('analysis.query')),
    exportEndpoint: @json(route('analysis.exports.store')),
    scopeMode: @json($analysisScopeMode),
    csrfToken: @json(csrf_token())
};
</script>
<script src="{{ asset('assets/js/ngbvd-reporting-v2.js') }}?v=20261009-2"></script>
@endpush