@extends('layouts.app')
@section('title', ($reportTitle ?? 'Incident Analysis') . ' - NGBVD')
@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/ngbvd-incident-report.css') }}?v=20261009-1">
@endpush
@section('content')
{{--
  Incident Analysis v2 - server-side report. The browser never downloads the case-level dataset:
  headline indicators and charts come from /analysis/report/summary (SQL aggregates), the case list
  from /analysis/report/grid (25/50/100 rows per page), the pivot from /analysis/report/pivot
  (whitelisted dimensions and measures) and exports are queued jobs. No API credentials or secrets
  are present in this page.
--}}
<div id="ngbvd-report" class="ngbvd-report" data-mode="{{ $reportMode ?? 'scoped' }}"
     data-endpoint-base="{{ url('/analysis/report') }}" data-summary-ready="0">

    <header class="nr-header">
        <div>
            <h1 class="nr-title">{{ $reportTitle ?? 'Incident Analysis' }}</h1>
            <p class="nr-subtitle">Aggregated indicators, a paginated case list and pivot analysis, calculated on the server for your authorised data scope.</p>
        </div>
        <div class="nr-header-meta" aria-live="polite">
            <span class="nr-chip" id="nr-scope">Scope: loading…</span>
            <span class="nr-chip" id="nr-freshness" title="Time of the reporting snapshot used for every figure on this page">Data as of: …</span>
            <button type="button" class="nr-btn nr-btn-ghost" id="nr-refresh-btn" hidden>Refresh data now</button>
        </div>
    </header>

    <form class="nr-filters" id="nr-filters" autocomplete="off" aria-label="Report filters">
        <div class="nr-field"><label for="f-startdate">From</label><input type="date" id="f-startdate" name="startdate" min="1990-01-01" max="2100-12-31"></div>
        <div class="nr-field"><label for="f-enddate">To</label><input type="date" id="f-enddate" name="enddate" min="1990-01-01" max="2100-12-31"></div>
        <div class="nr-field"><label for="f-region">Region</label><select id="f-region" name="region_id"><option value="">All regions</option></select></div>
        <div class="nr-field"><label for="f-subregion">Sub-region</label><select id="f-subregion" name="sub_region_id"><option value="">All sub-regions</option></select></div>
        <div class="nr-field"><label for="f-district">District</label><select id="f-district" name="district_id"><option value="">All districts</option></select></div>
        <div class="nr-field"><label for="f-incident">Incident type</label><select id="f-incident" name="incident_id"><option value="">All incident types</option></select></div>
        <div class="nr-field"><label for="f-sex">Sex</label><select id="f-sex" name="sex"><option value="">All</option></select></div>
        <div class="nr-field"><label for="f-age">Age at incident</label><select id="f-age" name="age_category"><option value="">All ages</option></select></div>
        <div class="nr-field"><label for="f-service">Service received</label>
            <select id="f-service" name="service_received"><option value="">Any</option><option value="yes">Received at least one service</option><option value="no">No service recorded</option></select></div>
        <div class="nr-field" id="nr-partner-field" hidden><label for="f-partner">Reporting partner</label><select id="f-partner" name="partner_id"><option value="">All partners</option></select></div>
        <div class="nr-actions">
            <button type="submit" class="nr-btn nr-btn-primary">Apply filters</button>
            <button type="button" class="nr-btn nr-btn-ghost" id="nr-reset">Reset</button>
        </div>
        <p class="nr-error" id="nr-filter-error" role="alert" hidden></p>
    </form>

    <nav class="nr-tabs" role="tablist" aria-label="Report sections">
        <button type="button" role="tab" class="nr-tab is-active" aria-selected="true" aria-controls="nr-panel-overview" id="nr-tab-overview" data-tab="overview">Overview</button>
        <button type="button" role="tab" class="nr-tab" aria-selected="false" aria-controls="nr-panel-cases" id="nr-tab-cases" data-tab="cases">Case list</button>
        <button type="button" role="tab" class="nr-tab" aria-selected="false" aria-controls="nr-panel-pivot" id="nr-tab-pivot" data-tab="pivot">Pivot analysis</button>
        <button type="button" role="tab" class="nr-tab" aria-selected="false" aria-controls="nr-panel-exports" id="nr-tab-exports" data-tab="exports">Exports</button>
    </nav>

    {{-- Overview --}}
    <section id="nr-panel-overview" role="tabpanel" aria-labelledby="nr-tab-overview" class="nr-panel">
        <div class="nr-kpis" id="nr-kpis" aria-busy="true">
            @foreach ([
                ['total_cases', 'Total cases reported', 'Distinct incident records in the selected period and your scope. Formally excluded records are counted separately.'],
                ['distinct_survivors', 'Distinct survivors', 'Each survivor counted once, however many cases they have.'],
                ['children_under_18', 'Children under 18', 'Cases where the survivor was under 18 at the incident date. Unknown ages are never counted as adults.'],
                ['survivors_with_service', 'Survivors with ≥1 service', 'Distinct survivors linked to at least one valid service (not actions, not cases).'],
                ['service_coverage_pct', 'Service coverage', 'Survivors with at least one service ÷ distinct survivors in the same selection.'],
                ['geography', 'Geography completeness', 'Cases with a valid district, sub-region and region. Target 100%.'],
                ['sex', 'Sex completeness', 'Cases whose survivor sex is a code in the gender lookup. Target 100%.'],
                ['age', 'Age completeness', 'Cases with a usable age at the incident date. Target 100%.'],
            ] as [$key, $label, $help])
                <article class="nr-kpi" data-kpi="{{ $key }}" title="{{ $help }}">
                    <h2 class="nr-kpi-label">{{ $label }}</h2>
                    <p class="nr-kpi-value"><span class="nr-skeleton">&nbsp;</span></p>
                    <p class="nr-kpi-note">{{ $help }}</p>
                </article>
            @endforeach
        </div>

        <div class="nr-grid-2">
            <figure class="nr-card"><figcaption>Reported cases by incident month</figcaption><div class="nr-chart" id="nr-chart-trend"></div></figure>
            <figure class="nr-card"><figcaption>Cases by region</figcaption><div class="nr-chart" id="nr-chart-region"></div></figure>
            <figure class="nr-card"><figcaption>Top 15 districts by cases</figcaption><div class="nr-chart" id="nr-chart-district"></div></figure>
            <figure class="nr-card"><figcaption>Cases by incident type</figcaption><div class="nr-chart" id="nr-chart-type"></div></figure>
            <figure class="nr-card"><figcaption>Cases by sex</figcaption><div class="nr-chart nr-chart-sm" id="nr-chart-sex"></div></figure>
            <figure class="nr-card"><figcaption>Age at incident</figcaption><div class="nr-chart nr-chart-sm" id="nr-chart-age"></div></figure>
            <figure class="nr-card"><figcaption>Survivors by service type</figcaption><div class="nr-chart" id="nr-chart-services"></div></figure>
            <section class="nr-card" aria-labelledby="nr-dq-title">
                <h3 id="nr-dq-title" class="nr-card-title">Data quality</h3>
                <dl class="nr-dq" id="nr-dq"></dl>
            </section>
        </div>
    </section>

    {{-- Case list --}}
    <section id="nr-panel-cases" role="tabpanel" aria-labelledby="nr-tab-cases" class="nr-panel" hidden>
        <div class="nr-grid-toolbar">
            <label class="nr-search"><span class="sr-only">Search cases</span>
                <input type="search" id="nr-search" placeholder="Search district, incident type or identifier (min. 3 characters)" minlength="3" maxlength="50">
            </label>
            <label>Rows per page
                <select id="nr-per-page"><option>25</option><option>50</option><option>100</option></select>
            </label>
            <span class="nr-grid-count" id="nr-grid-count" aria-live="polite"></span>
        </div>
        <div class="nr-table-wrap">
            <table class="nr-table" id="nr-grid">
                <caption class="sr-only">Cases matching the filters (one page)</caption>
                <thead><tr></tr></thead>
                <tbody><tr><td class="nr-empty">Open this tab to load the case list.</td></tr></tbody>
            </table>
        </div>
        <div class="nr-pager" id="nr-pager"></div>
    </section>

    {{-- Pivot --}}
    <section id="nr-panel-pivot" role="tabpanel" aria-labelledby="nr-tab-pivot" class="nr-panel" hidden>
        <form class="nr-pivot-form" id="nr-pivot-form">
            <div class="nr-field"><label for="p-dimension">Rows</label><select id="p-dimension" name="dimension"></select></div>
            <div class="nr-field"><label for="p-column">Columns</label><select id="p-column" name="column_dimension"><option value="">(none)</option></select></div>
            <div class="nr-field"><label for="p-measure">Measure</label><select id="p-measure" name="measure"></select></div>
            <div class="nr-field"><label for="p-interval">Period grouping</label>
                <select id="p-interval" name="interval"><option value="month">Month</option><option value="quarter">Quarter</option><option value="fiscal_year">Financial year</option><option value="year">Year</option></select></div>
            <div class="nr-field"><label for="p-limit">Max rows</label><input type="number" id="p-limit" name="limit" min="1" max="500" value="50"></div>
            <div class="nr-actions"><button type="submit" class="nr-btn nr-btn-primary">Run</button></div>
        </form>
        <p class="nr-note" id="nr-pivot-note"></p>
        <div class="nr-table-wrap"><table class="nr-table" id="nr-pivot"><tbody><tr><td class="nr-empty">Choose rows, columns and a measure, then Run.</td></tr></tbody></table></div>
    </section>

    {{-- Exports --}}
    <section id="nr-panel-exports" role="tabpanel" aria-labelledby="nr-tab-exports" class="nr-panel" hidden>
        <p class="nr-note">Exports run in the background with the filters above and your data scope. You can keep working; completed files are available here for a limited time through a personal, expiring link.</p>
        <div class="nr-actions" id="nr-export-buttons">
            <button type="button" class="nr-btn nr-btn-primary" data-export="xlsx">Excel case list</button>
            <button type="button" class="nr-btn nr-btn-primary" data-export="csv">CSV case list</button>
            <button type="button" class="nr-btn nr-btn-primary" data-export="pdf">PDF summary</button>
        </div>
        <p class="nr-error" id="nr-export-error" role="alert" hidden></p>
        <div class="nr-table-wrap">
            <table class="nr-table" id="nr-exports">
                <thead><tr><th>Requested</th><th>Format</th><th>Status</th><th>Rows</th><th>Expires</th><th>File</th></tr></thead>
                <tbody><tr><td colspan="6" class="nr-empty">No exports yet.</td></tr></tbody>
            </table>
        </div>
    </section>

    <p class="nr-footnote">Figures come from the NGBVD reporting snapshot, refreshed automatically every few minutes. Definitions follow the NGBVD indicator dictionary; hover a figure for its definition.</p>
</div>
@endsection
@push('scripts')
<script src="{{ asset('assets/js/ngbvd-incident-report.js') }}?v=20261009-1"></script>
@endpush