@extends('layouts.app')

@push('styles')
    @include('dashboard.styles')
    <style>
        .ncd-compact .chart-card {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid #e2e8f0;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        }
        .ncd-compact .chart-card { padding: 0.75rem; }
        .ncd-compact .chart-header { margin-bottom: 0.5rem; }
        .ncd-compact .chart-body { height: 220px; }
        .ncd-compact .ncd-toolbar { padding: 0.6rem 0.75rem; }
        .ncd-compact .ncd-toolbar .form-select,
        .ncd-compact .ncd-toolbar .btn { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
        .ncd-compact .ncd-kpi { padding: 0.6rem 0.75rem; }
        .ncd-compact .ncd-kpi h3 { font-size: 1.15rem; margin-bottom: 0; }
        .ncd-compact .ncd-kpi p { margin-bottom: 0.15rem; }
        .ncd-compact .ncd-config summary { cursor: pointer; font-weight: 600; }
        .ncd-compact .ncd-config .form-label { font-size: 0.75rem; }
        .ncd-compact .ncd-config .form-text { font-size: 0.7rem; }
        .ncd-compact .ncd-filters .form-label { font-size: 0.7rem; }
        .ncd-compact .ncd-filters .form-select,
        .ncd-compact .ncd-filters .form-control { font-size: 0.8rem; }
        .ncd-compact .ncd-table thead th {
            background: #f1f5f9;
            color: #334155;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .ncd-compact .ncd-table tbody tr { transition: background 0.2s ease; }
        .ncd-compact .ncd-table tbody tr:hover { background: rgba(14, 165, 233, 0.08); }
        .ncd-compact .ncd-table td,
        .ncd-compact .ncd-table th { padding: 0.35rem 0.5rem; }
        .ncd-compact .ncd-detail-card { background: #0f172a; }
        .ncd-compact .ncd-detail-text,
        .ncd-compact .ncd-detail-text strong,
        .ncd-compact .ncd-detail-text li { color: #fff; }
    </style>
@endpush

@section('content')
<div class="container-fluid px-3 px-md-4 pb-5 dashboard-shell ncd-compact">
    @if (!empty($clinicWarning ?? null))
        <div class="alert alert-warning py-2 mb-2">{{ $clinicWarning }}</div>
    @endif
    @if (!empty(session('message')))
        <div class="alert alert-info py-2 mb-2">{{ session('message') }}</div>
    @endif

    <div class="dash-hero mb-3">
        <div>
            <p class="eyebrow text-uppercase mb-1">Clinic Leader Dr.</p>
            <h1 class="mb-1">NCD analytics</h1>
            <p class="lead mb-2">NCD program analytics for {{ $clinicLeader }} and stakeholders.</p>
        </div>
        <div class="hero-panel">
            <span class="hero-subtle">Clinic</span>
            <div class="hero-number">{{ $clinicConnection }}</div>
            @if (!empty($ncdAnalytics['lastUpdated']))
                <div class="hero-subtle">Updated {{ $ncdAnalytics['lastUpdated'] }}</div>
            @endif
        </div>
    </div>

    @php
        $selectedDbs = $ncdConfig['databases'] ?? [];
        $dateRange = $ncdConfig['date_range'] ?? [];
        $thresholds = $ncdConfig['thresholds'] ?? [];
        $privacy = $ncdConfig['privacy'] ?? [];
        $maskIds = array_key_exists('mask_ids', $privacy) ? (bool) $privacy['mask_ids'] : true;
        $filterOptions = $ncdAnalytics['filterOptions'] ?? ['genders' => [], 'age_bands' => []];
        $selectedFilters = $ncdAnalytics['filters'] ?? [];
    @endphp

    <div class="chart-card mb-3 ncd-toolbar ncd-filters">
        <div class="d-flex flex-column flex-xl-row align-items-xl-start gap-3">
            <form class="flex-grow-1" method="get" action="{{ route('clinic_dashboard.ncd') }}">
                <div class="row g-2 align-items-end">
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted" for="clinicSelect">Clinic</label>
                        <select name="clinic" id="clinicSelect" class="form-select form-select-sm">
                            @foreach($clinicOptions as $value => $label)
                                <option value="{{ $value }}" {{ $clinicConnection === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted">Start date</label>
                        <input type="date" name="start_date" class="form-control form-control-sm" value="{{ $selectedFilters['start_date'] ?? '' }}">
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted">End date</label>
                        <input type="date" name="end_date" class="form-control form-control-sm" value="{{ $selectedFilters['end_date'] ?? '' }}">
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted">Timeframe</label>
                        <select name="timeframe" class="form-select form-select-sm">
                            @php $timeframe = $selectedFilters['timeframe'] ?? 'all'; @endphp
                            <option value="all" {{ $timeframe === 'all' ? 'selected' : '' }}>All</option>
                            <option value="before_2025" {{ $timeframe === 'before_2025' ? 'selected' : '' }}>Before 2025</option>
                            <option value="year_2025" {{ $timeframe === 'year_2025' ? 'selected' : '' }}>2025</option>
                            <option value="custom" {{ $timeframe === 'custom' ? 'selected' : '' }}>Custom</option>
                        </select>
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted">Sex</label>
                        <select name="gender[]" class="form-select form-select-sm" multiple size="3">
                            @foreach($filterOptions['genders'] as $gender)
                                <option value="{{ $gender }}" {{ in_array($gender, $selectedFilters['genders'] ?? [], true) ? 'selected' : '' }}>{{ $gender }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label mb-1 small text-muted">Age bands</label>
                        <select name="age_band[]" class="form-select form-select-sm" multiple size="3">
                            @foreach($filterOptions['age_bands'] as $band)
                                <option value="{{ $band }}" {{ in_array($band, $selectedFilters['age_bands'] ?? [], true) ? 'selected' : '' }}>{{ $band }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-lg-2">
                        <button class="btn btn-sm btn-primary w-100" type="submit">Apply filters</button>
                    </div>
                </div>
            </form>
            <form method="post" action="{{ route('clinic_dashboard.ncd_analyze', request()->query()) }}">
                @csrf
                <button type="submit" class="btn btn-sm btn-outline-primary">Run NCD analysis</button>
            </form>
        </div>
    </div>

    <div class="chart-card mb-3">
        <details class="ncd-config">
            <summary class="text-muted small">Analysis settings</summary>
            <form class="mt-2" method="post" action="{{ route('clinic_dashboard.ncd_config', request()->query()) }}">
                @csrf
                <input type="hidden" name="clinic" value="{{ $clinicConnection }}">
                <div class="row g-2 align-items-end">
                    <div class="col-12 col-md-4">
                        <label class="form-label mb-1">Clinics</label>
                        <select name="databases[]" class="form-select form-select-sm" multiple size="5">
                            @foreach($clinicOptions as $value => $label)
                                @continue($value === 'ALL')
                                <option value="{{ $value }}" {{ in_array($value, $selectedDbs, true) ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">Ctrl/Cmd for multi-select.</div>
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">Start date</label>
                        <input type="date" name="start_date" class="form-control form-control-sm" value="{{ $dateRange['start_date'] ?? '' }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">End date</label>
                        <input type="date" name="end_date" class="form-control form-control-sm" value="{{ $dateRange['end_date'] ?? '' }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">Active days</label>
                        <input type="number" name="active_days" class="form-control form-control-sm" min="1" value="{{ $thresholds['active_days'] ?? 180 }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">LTFU days</label>
                        <input type="number" name="ltfu_days" class="form-control form-control-sm" min="1" value="{{ $thresholds['ltfu_days'] ?? 180 }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">HbA1c lookback (m)</label>
                        <input type="number" name="hba1c_lookback_months" class="form-control form-control-sm" min="1" value="{{ $thresholds['hba1c_lookback_months'] ?? 6 }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">Kidney lookback (m)</label>
                        <input type="number" name="kidney_lookback_months" class="form-control form-control-sm" min="1" value="{{ $thresholds['kidney_lookback_months'] ?? 12 }}">
                    </div>
                    <div class="col-6 col-md-2">
                        <label class="form-label mb-1">CVD lookback (m)</label>
                        <input type="number" name="cvd_risk_lookback_months" class="form-control form-control-sm" min="1" value="{{ $thresholds['cvd_risk_lookback_months'] ?? 12 }}">
                    </div>
                    <div class="col-6 col-md-2 d-flex align-items-center">
                        <div class="form-check mt-3">
                            <input class="form-check-input" type="checkbox" name="mask_ids" id="maskIdsToggle" value="1" {{ $maskIds ? 'checked' : '' }}>
                            <label class="form-check-label small" for="maskIdsToggle">Mask IDs</label>
                        </div>
                    </div>
                    <div class="col-12 col-md-2">
                        <button type="submit" class="btn btn-sm btn-outline-secondary w-100">Save settings</button>
                    </div>
                </div>
            </form>
        </details>
    </div>

    @if (empty($ncdAnalytics['available']))
        <div class="alert alert-warning">No NCD analytics outputs found. Run the analysis first.</div>
    @else
        <div class="row g-2">
            @foreach(($ncdAnalytics['kpiCards'] ?? []) as $card)
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="chart-card ncd-kpi">
                        <p class="text-muted small mb-1">{{ $card['title'] }}</p>
                        <h3 class="mb-0">{{ $card['value'] }}</h3>
                        @if(in_array($card['key'] ?? '', ['bp_control', 'dm_control'], true))
                            <a class="small text-decoration-none" data-bs-toggle="collapse" href="#ncdRateDetails" role="button" aria-expanded="false" aria-controls="ncdRateDetails">
                                Details
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        <div class="collapse mt-2" id="ncdRateDetails">
            <div class="card border-0 shadow-sm ncd-detail-card">
                <div class="card-body small ncd-detail-text">
                    <h4 class="h6 text-dark mb-2">How BP/DM control % is calculated</h4>
                    @php $rateDetails = $ncdAnalytics['controlRateDetails'] ?? []; @endphp
                    <div class="mb-2">
                        <strong>BP control %</strong><br>
                        Denominator ({{ number_format($rateDetails['bp_control']['denominator'] ?? 0) }}): all patients whose latest follow-up has a valid BP reading
                        (SBP and DBP parsed from ncd_followups.own_clinic_Bp).
                        <br>
                        Numerator ({{ number_format($rateDetails['bp_control']['numerator'] ?? 0) }}): the subset of those patients whose latest SBP/DBP is controlled
                        (SBP &lt; {{ $rateDetails['bp_control']['sbp_threshold'] ?? 140 }} and DBP &lt; {{ $rateDetails['bp_control']['dbp_threshold'] ?? 90 }}).
                        <br>
                        Latest follow-up per patient with valid SBP/DBP.
                        Controlled when SBP &lt; {{ $rateDetails['bp_control']['sbp_threshold'] ?? 140 }}
                        and DBP &lt; {{ $rateDetails['bp_control']['dbp_threshold'] ?? 90 }}.
                        <br>
                        Numerator: {{ number_format($rateDetails['bp_control']['numerator'] ?? 0) }}
                        / Denominator: {{ number_format($rateDetails['bp_control']['denominator'] ?? 0) }}.
                        <br>
                        Excluded from denominator: {{ number_format($rateDetails['bp_control']['excluded'] ?? 0) }} of
                        {{ number_format($rateDetails['bp_control']['total_patients'] ?? 0) }} patients.
                        @php
                            $invalidExamples = $rateDetails['bp_control']['invalid_format_examples'] ?? [];
                            $invalidExampleText = '';
                            if (!empty($invalidExamples)) {
                                $parts = [];
                                foreach ($invalidExamples as $example) {
                                    $label = $example['label'] ?? '';
                                    if ($label === '') {
                                        continue;
                                    }
                                    $count = $example['count'] ?? 0;
                                    $parts[] = $label . ': ' . number_format($count);
                                }
                                if (!empty($parts)) {
                                    $invalidExampleText = implode(', ', $parts);
                                }
                            }
                        @endphp
                        <ul class="mb-0 mt-1">
                            <li>Missing BP: {{ number_format($rateDetails['bp_control']['excluded_groups']['missing'] ?? 0) }}</li>
                            <li>Invalid format: {{ number_format($rateDetails['bp_control']['excluded_groups']['invalid_format'] ?? 0) }}
                                @if($invalidExampleText !== '')
                                    (examples: {{ $invalidExampleText }})
                                @endif
                            </li>
                            <li>Out of range (SBP 50-300 / DBP 30-200): {{ number_format($rateDetails['bp_control']['excluded_groups']['out_of_range'] ?? 0) }}</li>
                            <li>Other: {{ number_format($rateDetails['bp_control']['excluded_groups']['other'] ?? 0) }}</li>
                        </ul>
                    </div>
                    <div class="mb-0">
                        <strong>DM control %</strong><br>
                        Denominator ({{ number_format($rateDetails['dm_control']['denominator'] ?? 0) }}): all patients whose latest follow-up has a diabetes test value
                        (priority: HbA1c -> 2HPP -> FBS -> RBS).
                        <br>
                        Numerator ({{ number_format($rateDetails['dm_control']['numerator'] ?? 0) }}): the subset of those patients whose latest test is controlled
                        (HbA1c &lt; {{ $rateDetails['dm_control']['hba1c_threshold'] ?? 7.0 }},
                        2HPP &lt; {{ $rateDetails['dm_control']['t2hpp_threshold'] ?? 180 }},
                        FBS &lt; {{ $rateDetails['dm_control']['fbs_threshold'] ?? 126 }},
                        or RBS &lt; {{ $rateDetails['dm_control']['rbs_threshold'] ?? 200 }}).
                        <br>
                        Latest follow-up per patient with a diabetes test (priority: HbA1c -> 2HPP -> FBS -> RBS).
                        Controlled when HbA1c &lt; {{ $rateDetails['dm_control']['hba1c_threshold'] ?? 7.0 }},
                        2HPP &lt; {{ $rateDetails['dm_control']['t2hpp_threshold'] ?? 180 }},
                        FBS &lt; {{ $rateDetails['dm_control']['fbs_threshold'] ?? 126 }},
                        or RBS &lt; {{ $rateDetails['dm_control']['rbs_threshold'] ?? 200 }}.
                        <br>
                        Numerator: {{ number_format($rateDetails['dm_control']['numerator'] ?? 0) }}
                        / Denominator: {{ number_format($rateDetails['dm_control']['denominator'] ?? 0) }}.
                        <br>
                        Excluded from denominator: {{ number_format($rateDetails['dm_control']['excluded'] ?? 0) }} of
                        {{ number_format($rateDetails['dm_control']['total_patients'] ?? 0) }} patients.
                        @php
                            $dmInvalidExamples = $rateDetails['dm_control']['invalid_value_examples'] ?? [];
                            $dmInvalidExampleText = '';
                            if (!empty($dmInvalidExamples)) {
                                $dmParts = [];
                                foreach ($dmInvalidExamples as $example) {
                                    $label = $example['label'] ?? '';
                                    if ($label === '') {
                                        continue;
                                    }
                                    $count = $example['count'] ?? 0;
                                    $dmParts[] = $label . ': ' . number_format($count);
                                }
                                if (!empty($dmParts)) {
                                    $dmInvalidExampleText = implode(', ', $dmParts);
                                }
                            }
                        @endphp
                        <ul class="mb-0 mt-1">
                            <li>Missing test: {{ number_format($rateDetails['dm_control']['excluded_groups']['missing_test'] ?? 0) }}</li>
                            <li>Invalid value: {{ number_format($rateDetails['dm_control']['excluded_groups']['invalid_value'] ?? 0) }}
                                @if($dmInvalidExampleText !== '')
                                    (examples: {{ $dmInvalidExampleText }})
                                @endif
                            </li>
                            <li>Other: {{ number_format($rateDetails['dm_control']['excluded_groups']['other'] ?? 0) }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs mt-4" id="ncdTabs" role="tablist">
            <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-summary" type="button">Executive Summary</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-workload" type="button">Workload Trends</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bp" type="button">BP Outcomes</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-diabetes" type="button">Diabetes Outcomes</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-continuity" type="button">Continuity</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-quality" type="button">Quality of Care</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-meds" type="button">Other Medications</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-insights" type="button">Program Insights</button></li>
        </ul>

        <div class="tab-content pt-3">
            <div class="tab-pane fade show active" id="tab-summary">
                <div class="row g-3">
                    <div class="col-12 col-lg-5">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Summary</h3>
                                <p class="text-muted mb-0 small">Key rates for selected filters</p>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Metric</th>
                                            <th class="text-end">Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach(($ncdAnalytics['summaryRows'] ?? []) as $row)
                                            <tr>
                                                <td>{{ $row['metric'] }}</td>
                                                <td class="text-end">{{ $row['value'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-7">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Age distribution</h3>
                                <p class="text-muted mb-0 small">Latest age at report end</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdAgeChart" aria-label="Age distribution chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-3 mt-1">
                    <div class="col-12">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">BP/DM control by sex</h3>
                                <p class="text-muted mb-0 small">Latest follow-up rates</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdSexControlChart" aria-label="BP/DM control by sex chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-workload">
                <div class="chart-card">
                    <div class="chart-header">
                        <h3 class="h6 mb-1">Monthly workload</h3>
                        <p class="text-muted mb-0 small">New registrations vs follow-ups</p>
                    </div>
                    <div class="chart-body">
                        <canvas id="ncdMonthlyChartWorkload" aria-label="Monthly workload chart" role="img"></canvas>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-bp">
                <div class="row g-3">
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">BP control trend</h3>
                                <p class="text-muted mb-0 small">Latest visit per patient (rate %)</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdBpTrendChart" aria-label="BP control trend chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">BP stage distribution</h3>
                                <p class="text-muted mb-0 small">Latest follow-up BP stage</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdSbpChart" aria-label="BP stage distribution chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-diabetes">
                <div class="row g-3">
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Diabetes control trend</h3>
                                <p class="text-muted mb-0 small">Latest visit per patient (rate %)</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdDmTrendChart" aria-label="Diabetes control trend chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Diabetes tests used</h3>
                                <p class="text-muted mb-0 small">Latest test per patient</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdDmTestChart" aria-label="Diabetes tests used chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-continuity">
                <details class="mb-2">
                    <summary class="small text-muted">How continuity metrics are calculated</summary>
                    <div class="small text-muted mt-2">
                        <p class="mb-2"><strong>Missed appointment</strong><br>For each active patient, every visit with Next_Appointment is compared to the next visit date. If the next visit date is not exactly the appointment date (or there is no next visit), that appointment is missed. A patient is counted if they missed at least one appointment in the selected period. If the last visit has a Next_Appointment after the report end date and no matching visit is observed, it is still counted as missed. Inactive patients are excluded.</p>
                        <p class="mb-2"><strong>Active caseload</strong><br>Latest follow-up per patient: visit_date is within the last {{ $thresholds['active_days'] ?? 90 }} days of the report end date.</p>
                        <p class="mb-2"><strong>LTFU</strong><br>Latest follow-up per patient: no visit recorded or visit_date is earlier than the report end date minus {{ $thresholds['ltfu_days'] ?? 90 }} days.</p>
                        <p class="mb-0"><strong>Late visit</strong><br>Latest follow-up per patient: Late_visit or Late_follow is marked yes.</p>
                    </div>
                </details>
                <div class="chart-card">
                    <div class="chart-header">
                        <h3 class="h6 mb-1">Continuity metrics</h3>
                        <p class="text-muted mb-0 small">Late visits, missed appointments, LTFU</p>
                    </div>
                    <div class="chart-body">
                        <canvas id="ncdContinuityChart" aria-label="Continuity chart" role="img"></canvas>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-quality">
                <div class="chart-card">
                    <div class="chart-header">
                        <h3 class="h6 mb-1">Quality of care</h3>
                        <p class="text-muted mb-0 small">Lab coverage metrics (%)</p>
                    </div>
                    <div class="chart-body">
                        <canvas id="ncdQualityChart2" aria-label="Quality coverage chart" role="img"></canvas>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-meds">
                <div class="row g-3">
                    <div class="col-12 col-lg-7">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Other medications (Foth_medi_spec)</h3>
                                <p class="text-muted mb-0 small">Most common entries</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdOtherMedChart2" aria-label="Other medications chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-5">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h4 class="h6 mb-3">Top medications</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Medication</th>
                                                <th class="text-end">Count</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['otherMeds'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['medication'] ?? $row['title'] ?? '' }}</td>
                                                    <td class="text-end">{{ $row['count'] ?? $row['value'] ?? '' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-insights">
                <div class="row g-3">
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Control improvement</h3>
                                <p class="text-muted mb-0 small">Baseline uncontrolled -> latest controlled</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdControlImprovementChart" aria-label="Control improvement chart" role="img"></canvas>
                            </div>
                            <div class="table-responsive mt-2">
                                <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Metric</th>
                                            <th class="text-end">Eligible</th>
                                            <th class="text-end">Improved</th>
                                            <th class="text-end">Rate %</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach(($ncdAnalytics['controlImprovement']['rows'] ?? []) as $row)
                                            <tr>
                                                <td>{{ $row['metric'] }}</td>
                                                <td class="text-end">{{ $row['eligible'] }}</td>
                                                <td class="text-end">{{ $row['improved'] }}</td>
                                                <td class="text-end">{{ $row['rate'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Sustained control</h3>
                                <p class="text-muted mb-0 small">Controlled in the last two visits</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdSustainedControlChart" aria-label="Sustained control chart" role="img"></canvas>
                            </div>
                            <div class="table-responsive mt-2">
                                <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                    <thead>
                                        <tr>
                                            <th>Metric</th>
                                            <th class="text-end">Eligible</th>
                                            <th class="text-end">Sustained</th>
                                            <th class="text-end">Rate %</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach(($ncdAnalytics['sustainedControl']['rows'] ?? []) as $row)
                                            <tr>
                                                <td>{{ $row['metric'] }}</td>
                                                <td class="text-end">{{ $row['eligible'] }}</td>
                                                <td class="text-end">{{ $row['sustained'] }}</td>
                                                <td class="text-end">{{ $row['rate'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Therapy patterns</h3>
                                <p class="text-muted mb-0 small">Medication counts</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdTherapyChart" aria-label="Therapy patterns chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Regimen size</h3>
                                <p class="text-muted mb-0 small">Number of meds per patient</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdRegimenChart" aria-label="Regimen size chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Visit interval distribution</h3>
                                <p class="text-muted mb-0 small">Days between visits</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdIntervalChart" aria-label="Visit interval chart" role="img"></canvas>
                            </div>
                            @if(!empty($ncdAnalytics['visitIntervals']['median']))
                                <div class="small text-muted mt-2">
                                    Median interval: {{ $ncdAnalytics['visitIntervals']['median'] }} days |
                                    Mean interval: {{ $ncdAnalytics['visitIntervals']['mean'] }}
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h4 class="h6 mb-3">Risk-outcome linkage</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Group</th>
                                                <th class="text-end">Patients</th>
                                                <th class="text-end">BP control %</th>
                                                <th class="text-end">DM control %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['riskOutcome']['cvd'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['label'] }}</td>
                                                    <td class="text-end">{{ $row['patients'] }}</td>
                                                    <td class="text-end">{{ $row['bp_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['dm_control_rate'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <table class="table table-sm table-hover align-middle ncd-table mt-3 mb-0">
                                        <thead>
                                            <tr>
                                                <th>Group</th>
                                                <th class="text-end">Patients</th>
                                                <th class="text-end">BP control %</th>
                                                <th class="text-end">DM control %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['riskOutcome']['ckd'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['label'] }}</td>
                                                    <td class="text-end">{{ $row['patients'] }}</td>
                                                    <td class="text-end">{{ $row['bp_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['dm_control_rate'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h4 class="h6 mb-3">Medication change vs control</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Group</th>
                                                <th class="text-end">Patients</th>
                                                <th class="text-end">BP control %</th>
                                                <th class="text-end">DM control %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['medChange'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['label'] }}</td>
                                                    <td class="text-end">{{ $row['patients'] }}</td>
                                                    <td class="text-end">{{ $row['bp_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['dm_control_rate'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h4 class="h6 mb-3">Equity by sex</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Sex</th>
                                                <th class="text-end">Patients</th>
                                                <th class="text-end">BP control %</th>
                                                <th class="text-end">DM control %</th>
                                                <th class="text-end">LTFU %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['equity']['sex'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['label'] }}</td>
                                                    <td class="text-end">{{ $row['patients'] }}</td>
                                                    <td class="text-end">{{ $row['bp_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['dm_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['ltfu_rate'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h4 class="h6 mb-3">Equity by age band</h4>
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle ncd-table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Age band</th>
                                                <th class="text-end">Patients</th>
                                                <th class="text-end">BP control %</th>
                                                <th class="text-end">DM control %</th>
                                                <th class="text-end">LTFU %</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach(($ncdAnalytics['equity']['age'] ?? []) as $row)
                                                <tr>
                                                    <td>{{ $row['label'] }}</td>
                                                    <td class="text-end">{{ $row['patients'] }}</td>
                                                    <td class="text-end">{{ $row['bp_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['dm_control_rate'] }}</td>
                                                    <td class="text-end">{{ $row['ltfu_rate'] }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Outcomes</h3>
                                <p class="text-muted mb-0 small">Latest follow-up outcomes</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdOutcomeChart" aria-label="Outcome chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="h6 mb-1">Referrals & transfers</h3>
                                <p class="text-muted mb-0 small">Referral locations and transfers</p>
                            </div>
                            <div class="chart-body">
                                <canvas id="ncdReferralChart" aria-label="Referral chart" role="img"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="text-center mt-4 small text-muted">
        <a href="{{ route('clinic_dashboard', ['clinic' => $clinicConnection]) }}">Back to clinic dashboard</a>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ncdMonthlySeries = @json($ncdAnalytics['monthlySeries'] ?? ['labels'=>[], 'series'=>[]]);
    const ncdBpTrendSeries = @json($ncdAnalytics['bpTrendSeries'] ?? ['labels'=>[], 'series'=>[]]);
    const ncdDmTrendSeries = @json($ncdAnalytics['dmTrendSeries'] ?? ['labels'=>[], 'series'=>[]]);
    const ncdQualitySummary = @json($ncdAnalytics['qualitySummary'] ?? []);
    const ncdOtherMeds = @json($ncdAnalytics['otherMeds'] ?? []);
    const ncdDmTest = @json($ncdAnalytics['dmTestBreakdown'] ?? []);
    const ncdContinuity = @json($ncdAnalytics['continuitySummary'] ?? []);
    const ncdMedPatterns = @json($ncdAnalytics['medPatterns']['meds'] ?? []);
    const ncdRegimens = @json($ncdAnalytics['medPatterns']['regimens'] ?? []);
    const ncdVisitIntervals = @json($ncdAnalytics['visitIntervals']['bins'] ?? []);
    const ncdAgeDistribution = @json($ncdAnalytics['ageDistribution'] ?? []);
    const ncdSbpDistribution = @json($ncdAnalytics['sbpDistribution'] ?? []);
    const ncdSexEquity = @json($ncdAnalytics['equity']['sex'] ?? []);
    const ncdOutcomeSummary = @json($ncdAnalytics['referrals']['outcomes'] ?? []);
    const ncdReferralSummary = @json($ncdAnalytics['referrals']['referrals'] ?? []);
    const ncdTransferSummary = @json($ncdAnalytics['referrals']['transfers'] ?? []);
    const ncdControlImprovement = @json($ncdAnalytics['controlImprovement']['chart'] ?? []);
    const ncdSustainedControl = @json($ncdAnalytics['sustainedControl']['chart'] ?? []);

    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    function formatMonthLabel(label) {
        if (!label) return label;
        const match = String(label).match(/^(\d{4})-(\d{2})/);
        if (!match) return label;
        const month = parseInt(match[2], 10);
        if (!month || month < 1 || month > 12) return label;
        return `${monthNames[month - 1]} ${match[1]}`;
    }

    function renderSimpleChart(dataset, canvasId, type = 'bar', labelText = 'Count') {
        const canvas = document.getElementById(canvasId);
        if (!canvas || !dataset || dataset.length === 0) return null;
        const labels = dataset.map(item => item.title);
        const values = dataset.map(item => Number(item.value) || 0);
        return new Chart(canvas.getContext('2d'), {
            type: type,
            data: {
                labels,
                datasets: [{
                    label: labelText,
                    data: values,
                    backgroundColor: '#0ea5e9',
                    borderColor: '#0ea5e9',
                    borderRadius: type === 'bar' ? 8 : 0,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 10 }
                },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true, grid: { display: false } },
                    y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, 0.2)' } },
                }
            }
        });
    }

    function renderSeriesChart(dataset, canvasId) {
        const canvas = document.getElementById(canvasId);
        if (!canvas || !dataset || !dataset.labels || dataset.labels.length === 0) return null;
        const labels = dataset.labels.map(formatMonthLabel);
        const series = (dataset.series || []).map((s) => ({
            label: s.label,
            data: s.data || [],
            backgroundColor: s.color || '#0ea5e9',
            borderColor: s.color || '#0ea5e9',
            borderWidth: 2,
            tension: 0.35,
            fill: false,
        }));
        return new Chart(canvas.getContext('2d'), {
            type: 'line',
            data: { labels: labels, datasets: series },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
                    tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 10 }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { maxRotation: 0, autoSkip: true } },
                    y: { beginAtZero: true, grid: { color: 'rgba(148, 163, 184, 0.2)' } },
                }
            }
        });
    }

    function renderGroupedRateChart(dataset, canvasId) {
        const canvas = document.getElementById(canvasId);
        if (!canvas || !dataset || dataset.length === 0) return null;
        const labels = dataset.map(item => item.label);
        const bpValues = dataset.map(item => Number(item.bp_control_rate) || 0);
        const dmValues = dataset.map(item => Number(item.dm_control_rate) || 0);
        return new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels,
                datasets: [
                    {
                        label: 'BP control %',
                        data: bpValues,
                        backgroundColor: '#0ea5e9',
                        borderColor: '#0ea5e9',
                        borderRadius: 6,
                    },
                    {
                        label: 'DM control %',
                        data: dmValues,
                        backgroundColor: '#22c55e',
                        borderColor: '#22c55e',
                        borderRadius: 6,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
                    tooltip: { backgroundColor: 'rgba(15, 23, 42, 0.9)', padding: 10 },
                },
                scales: {
                    x: { grid: { display: false } },
                    y: { beginAtZero: true, max: 100, grid: { color: 'rgba(148, 163, 184, 0.2)' } },
                },
            },
        });
    }

    renderSeriesChart(ncdMonthlySeries, 'ncdMonthlyChartWorkload');
    renderSeriesChart(ncdBpTrendSeries, 'ncdBpTrendChart');
    renderSeriesChart(ncdDmTrendSeries, 'ncdDmTrendChart');
    renderSimpleChart(ncdQualitySummary, 'ncdQualityChart2');
    renderSimpleChart(ncdOtherMeds, 'ncdOtherMedChart2');
    renderSimpleChart(ncdDmTest, 'ncdDmTestChart');
    renderSimpleChart(ncdContinuity, 'ncdContinuityChart');
    renderSimpleChart(ncdMedPatterns, 'ncdTherapyChart');
    renderSimpleChart(ncdRegimens, 'ncdRegimenChart');
    renderSimpleChart(ncdVisitIntervals, 'ncdIntervalChart');
    renderSimpleChart(ncdAgeDistribution, 'ncdAgeChart');
    renderSimpleChart(ncdSbpDistribution, 'ncdSbpChart');
    renderGroupedRateChart(ncdSexEquity, 'ncdSexControlChart');
    renderSimpleChart(ncdControlImprovement, 'ncdControlImprovementChart', 'bar', 'Rate (%)');
    renderSimpleChart(ncdSustainedControl, 'ncdSustainedControlChart', 'bar', 'Rate (%)');
    renderSimpleChart(ncdOutcomeSummary, 'ncdOutcomeChart');
    const referralCombined = [...ncdReferralSummary, ...ncdTransferSummary.map(item => ({
        title: `Transfer: ${item.title}`,
        value: item.value
    }))];
    renderSimpleChart(referralCombined, 'ncdReferralChart');
</script>
@endpush