@extends('layouts.app')

@push('styles')
    @include('dashboard.styles')
@endpush

@section('content')
<div class="container-fluid px-3 px-md-4 pb-5 dashboard-shell">
    @if (!empty($clinicWarning ?? null))
        <div class="alert alert-warning py-2 mb-2">{{ $clinicWarning }}</div>
    @endif
    @if (!empty($message ?? null))
        <div class="alert alert-info py-2 mb-2">{{ $message }}</div>
    @endif
    @if (!empty($cacheCleared ?? null))
        <div class="alert alert-success py-2 mb-2">Generated data cleared.</div>
    @endif
    <div class="dash-hero mb-3">
        <div>
            <p class="eyebrow text-uppercase mb-1">Clinic Leader Dr.</p>
            <h1 class="mb-1">Clinic dashboard</h1>
            @php
                $mode = $viewMode ?? 'none';
                $isPeriod = in_array($mode, ['monthly', 'quarterly', 'yearly']);
                $heroCards = $mode === 'daily' ? $dailyChecks : ($isPeriod ? $monthlyChecks : []);
                $hasData = ($mode === 'daily' && !empty($dailyChecks)) || ($isPeriod && !empty($monthlyChecks));
                $heroValue = $hasData ? ($heroCards[0]['value'] ?? 0) : null;
                $clinicLabel = $clinicConnection ?? 'Clinic';
                $periodLabel = $hasData
                    ? ($mode === 'daily'
                        ? ($dailyDurationSummary['dateLabel'] ?? '')
                        : ($selectedMonthLabel ?? $selectedQuarter ?? ''))
                    : 'Select a view to load data';
                $modeLabel = $hasData ? ucfirst($mode) : '';
            @endphp
            <p class="lead mb-2">Pulse across reception, labs, and follow-ups tailored for {{ $clinicLeader }}.</p>
            <div class="hero-tags">
                <span class="hero-tag">Daily check</span>
                <span class="hero-tag">Monthly report</span>
                <span class="hero-tag">Mobile friendly</span>
            </div>
            @php
                $statusMode = $viewMode ?? 'none';
                $isDailyMode = $statusMode === 'daily';
                $isGeneratedMode = in_array($statusMode, ['monthly', 'quarterly', 'yearly'], true);
                $cacheStamp = $cacheUpdatedAt ?? null;
            @endphp
            @if ($isDailyMode || $isGeneratedMode)
                <div class="mt-2 small text-muted">
                    @if ($isDailyMode)
                        <span class="badge bg-success">Live</span>
                        <span class="ms-1">Daily counts are live.</span>
                    @elseif ($cacheStamp)
                        <span class="badge bg-info text-dark">Generated</span>
                        <span class="ms-1">Cached {{ $cacheStamp }}.</span>
                    @else
                        <span class="badge bg-secondary">Not generated</span>
                        <span class="ms-1">Run Generate to build this period.</span>
                    @endif
                </div>
            @endif
        </div>
        <div class="hero-panel">
            <span class="hero-subtle">Total Consultations</span>
            <div class="hero-number">{{ $heroValue !== null ? $heroValue : '—' }}</div>
            @if($hasData)
                <div class="hero-subtle">patients • {{ $modeLabel }} • {{ $clinicLabel }} • {{ $periodLabel }}</div>
            @else
                <div class="hero-subtle">Choose Daily, Monthly, Quarterly, or Yearly and apply filters to load data.</div>
            @endif
        </div>
    </div>

    <form class="date-filter" method="get" action="{{ route('clinic_dashboard') }}" id="filterForm">
	        @php
	            $selectedClinic = $clinicConnection ?? config('database.default');
	            $currentYear = now()->year;
	            $selectedYearUi = request('year', $currentYear);
	            $quarterYears = array_reverse(range($currentYear - 5, $currentYear + 1));
	            $quartersByYear = [];
	            foreach ($quarterYears as $y) {
	                $quartersByYear[$y] = [
	                    "{$y}-Q1" => "Q1 ({$y} Jan-Mar)",
	                    "{$y}-Q2" => "Q2 ({$y} Apr-Jun)",
	                    "{$y}-Q3" => "Q3 ({$y} Jul-Sep)",
	                    "{$y}-Q4" => "Q4 ({$y} Oct-Dec)",
	                ];
	            }
	            $reportMode = in_array(($viewMode ?? ''), ['daily', 'monthly', 'quarterly', 'yearly'], true) ? $viewMode : 'monthly';
	        @endphp
        <div class="row g-2 align-items-center">
            <div class="col-auto d-flex align-items-center gap-2">
                <label class="form-label mb-0 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 }}" {{ $selectedClinic === $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-auto d-flex align-items-center gap-2">
                <label class="form-label mb-0 small text-muted" for="modeSelect">Report type</label>
                <select name="mode" id="modeSelect" class="form-select form-select-sm">
                    <option value="daily" {{ $reportMode === 'daily' ? 'selected' : '' }}>Day</option>
                    <option value="monthly" {{ $reportMode === 'monthly' ? 'selected' : '' }}>Month</option>
                    <option value="quarterly" {{ $reportMode === 'quarterly' ? 'selected' : '' }}>Quarter</option>
                    <option value="yearly" {{ $reportMode === 'yearly' ? 'selected' : '' }}>Year</option>
                </select>
            </div>

            <div class="col-auto d-flex align-items-center gap-2" data-report-param="daily">
                <input type="date" class="form-control form-control-sm" name="date" value="{{ request('date') ?? now()->toDateString() }}">
            </div>
            <div class="col-auto d-flex align-items-center gap-2" data-report-param="monthly">
                <input type="month" class="form-control form-control-sm" name="month" value="{{ $monthInputValue ?? $selectedMonth }}">
            </div>
		            <div class="col-auto d-flex align-items-center gap-2" data-report-param="quarterly">
		                @php
		                    $selectedQuarterValue = $selectedQuarter ?? '';
		                    $selectedQuarterLabel = $selectedQuarterValue;
		                    foreach ($quartersByYear as $year => $qList) {
		                        if (isset($qList[$selectedQuarterValue])) {
		                            $selectedQuarterLabel = $qList[$selectedQuarterValue];
		                            break;
		                        }
		                    }
		                @endphp
		                <input type="hidden" name="quarter" id="quarterInput" value="{{ $selectedQuarterValue }}">
		                <div class="dropdown">
		                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="quarterDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
		                        {{ $selectedQuarterLabel ?: 'Select quarter' }}
		                    </button>
		                    <ul class="dropdown-menu" aria-labelledby="quarterDropdownBtn" style="max-height: 320px; overflow:auto;">
		                        @foreach($quartersByYear as $year => $quarters)
		                            <li><h6 class="dropdown-header">{{ $year }}</h6></li>
		                            @foreach($quarters as $val => $label)
		                                @php
		                                    $qMeta = ($quarterCacheMeta ?? [])[$val] ?? null;
		                                    $qStatus = $qMeta['status'] ?? 'missing';
		                                    $qUpdated = $qMeta['updated_at'] ?? null;
		                                    $badgeText = $qStatus === 'fresh'
		                                        ? 'Cached'
		                                        : ($qStatus === 'stale' ? 'Old' : ($qStatus === 'legacy' ? 'Legacy' : 'No cache'));
		                                    $badgeBg = $qStatus === 'fresh' ? '#16a34a' : ($qStatus === 'stale' ? '#f59e0b' : ($qStatus === 'legacy' ? '#f59e0b' : '#6b7280'));
		                                @endphp
		                                <li>
		                                    <button
		                                        class="dropdown-item d-flex justify-content-between align-items-center {{ $selectedQuarterValue === $val ? 'active' : '' }}"
		                                        type="button"
		                                        data-quarter-value="{{ $val }}"
		                                        data-quarter-label="{{ $label }}"
		                                        title="{{ $qUpdated ? ('Cached at ' . $qUpdated) : 'Not cached yet' }}"
		                                    >
		                                        <span>{{ $label }}</span>
		                                        <span style="background: {{ $badgeBg }} !important; color: #fff !important; padding: 0.15rem 0.4rem; border-radius: 999px; font-size: 0.75rem;">
		                                            {{ $badgeText }}
		                                        </span>
		                                    </button>
		                                </li>
		                            @endforeach
		                        @endforeach
		                    </ul>
		                </div>
		                <span class="small text-muted">Green = cached, Orange = old/legacy, Gray = not cached</span>
		            </div>
            <div class="col-auto d-flex align-items-center gap-2" data-report-param="yearly">
                <input type="number" class="form-control form-control-sm" name="year" min="{{ $currentYear - 5 }}" max="{{ $currentYear + 1 }}" value="{{ $selectedYearUi }}">
            </div>

	            <div class="col-auto">
	                <button type="submit" class="btn btn-primary btn-sm report-submit-btn">Report</button>
	            </div>
	
	            <div class="col-auto d-flex align-items-center gap-2">
	                <button type="button" class="btn btn-light btn-sm" onclick="clearFilters()">Clear</button>
	            </div>
            @php
                $clinicParam = $selectedClinic;
                $exportMonthKey = ($viewMode === 'quarterly') ? ($monthInputValue ?? $selectedMonth) : ($selectedMonth ?? $monthInputValue);
                $exportQuarterKey = $selectedQuarter ?? ($periodKey ?? '');
                $exportEnabled = in_array(($viewMode ?? ''), ['monthly', 'quarterly'], true);
                $evidencePeriodType = $viewMode === 'quarterly' ? 'quarterly' : ($viewMode === 'monthly' ? 'monthly' : null);
                $evidencePeriodKey = $evidencePeriodType === 'quarterly' ? $exportQuarterKey : $exportMonthKey;
                $evidenceEnabled = $exportEnabled && !empty($evidencePeriodType) && !empty($evidencePeriodKey) && strtoupper((string) $clinicParam) !== 'ALL';
            @endphp
            <div class="col-auto d-flex align-items-center gap-2">
                <a class="btn btn-success btn-sm {{ (!$exportEnabled || empty($exportMonthKey)) ? 'disabled' : '' }}"
                   href="{{ (!$exportEnabled || empty($exportMonthKey)) ? '#' : route('clinic_dashboard.export', ['period_type' => 'monthly', 'period_key' => $exportMonthKey, 'clinic' => $clinicParam]) }}"
                   target="_blank">Export-M</a>
                <a class="btn btn-success btn-sm {{ (!$exportEnabled || empty($exportQuarterKey)) ? 'disabled' : '' }}"
                   href="{{ (!$exportEnabled || empty($exportQuarterKey)) ? '#' : route('clinic_dashboard.export', ['period_type' => 'quarterly', 'period_key' => $exportQuarterKey, 'clinic' => $clinicParam]) }}"
                   target="_blank">Export-Q</a>
            </div>
        </div>
    </form>

    <div id="daily-view" style="{{ ($viewMode ?? 'none') === 'daily' ? '' : 'display:none;' }}">
    @if (!empty($dailyChecks))
    <div class="row g-3">
        <div class="col-12">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Service summary (day)</h3>
                    </div>
                </div>
                <div class="daily-summary-strip" role="list" aria-label="Daily service summary">
                    @foreach(($dailyChecks ?? []) as $item)
                        @php
                            $accent = $item['accent'] ?? '#0ea5e9';
                            $rawValue = $item['value'] ?? 0;
                            $value = is_numeric($rawValue) ? number_format((float) $rawValue) : $rawValue;
                        @endphp
                        <div class="daily-summary-item" role="listitem" title="{{ $item['note'] ?? '' }}">
                            <span class="daily-summary-dot" style="background: {{ $accent }};"></span>
                            <span class="daily-summary-title">{{ $item['title'] ?? '' }}</span>
                            <span class="daily-summary-value">{{ $value }}</span>
                            @if (!empty($item['change']))
                                <span class="daily-summary-change">• {{ $item['change'] }}</span>
                            @endif
                        </div>
                    @endforeach
                </div>
                <div class="mt-3 small text-muted">
                    Counts are total visits for the selected day. “Reached lab/counsellor/dispensing” means a same-day record exists in that service module. Gender (headcount) counts unique patients.
                </div>
            </div>
        </div>
    </div>
    @endif
    @php
        $dailyGenderBreakdown = array_values(array_filter($dailyGenderBreakdown ?? [], function ($item) {
            return ($item['title'] ?? '') !== 'Unknown';
        }));
        $hasDailyGender = !empty($dailyGenderBreakdown ?? []);
        $hasDailyAge = !empty($dailyAgeSummary ?? []) && array_sum($dailyAgeSummary ?? []) > 0;
        $hasDailyKp = !empty($dailyKpBreakdown ?? []) && array_sum(array_column($dailyKpBreakdown ?? [], 'value')) > 0;
        $hasDailyDisease = !empty($dailyDiseaseCategories ?? []) && array_sum(array_column($dailyDiseaseCategories ?? [], 'value')) > 0;
        $hasDailyProgram = !empty($dailyProgramWorkloads ?? []) && array_sum(array_column($dailyProgramWorkloads ?? [], 'value')) > 0;
    @endphp
    @if ($hasDailyGender || $hasDailyAge || $hasDailyKp)
    <div class="row g-3 mt-3">
        @if ($hasDailyGender)
        <div class="col-12 col-lg-4">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Gender (headcount) (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily gender chart type">
                            <button type="button" class="btn btn-outline-secondary daily-gender-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-gender-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-gender-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-gender-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 220px;">
                    <canvas id="dailyGenderChart" aria-label="Daily gender headcount chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
        @if ($hasDailyAge)
        <div class="col-12 col-lg-4">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Visits by age & status (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily age status chart type">
                            <button type="button" class="btn btn-outline-secondary daily-age-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-age-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-age-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-age-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 220px;">
                    <canvas id="dailyAgeStatusChart" aria-label="Daily visits by age and status chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
        @if ($hasDailyKp)
        <div class="col-12 col-lg-4">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Key populations (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily key populations chart type">
                            <button type="button" class="btn btn-outline-secondary daily-kp-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-kp-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-kp-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-kp-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 220px;">
                    <canvas id="dailyKpChart" aria-label="Daily key populations chart" role="img"></canvas>
                </div>
                <div class="mt-2 small text-muted">Unknown risk is counted as “General patients”.</div>
            </div>
        </div>
        @endif
    </div>
    @endif
    @if ($hasDailyDisease || $hasDailyProgram)
    <div class="row g-3 mt-3">
        @if ($hasDailyDisease)
        <div class="col-12 col-lg-6">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>General diseases (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily diseases chart type">
                            <button type="button" class="btn btn-outline-secondary daily-disease-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-disease-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-disease-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-disease-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailyDiseaseChart" aria-label="Daily general diseases chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
        @if ($hasDailyProgram)
        <div class="col-12 col-lg-6">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Program workloads (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily program workloads chart type">
                            <button type="button" class="btn btn-outline-secondary daily-program-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-program-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-program-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-program-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailyProgramChart" aria-label="Daily program workloads chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
    </div>
    @endif
    <div class="row g-3 mt-3">
        @if (($viewMode ?? 'none') !== 'yearly')
        <div class="col-12 col-lg-7">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily snapshot</p>
                        <h3>Time-in-clinic</h3>
                    </div>
                    <span class="badge bg-light text-dark">{{ $dailyDurationSummary['dateLabel'] }}</span>
                </div>
                <div class="progress-grid">
                    <div class="progress-line">
                        <div class="progress-label">Average stay</div>
                        <div class="fw-bold">{{ $dailyDurationSummary['average'] }} mins</div>
                        <div class="text-muted small">Median {{ $dailyDurationSummary['median'] }} mins</div>
                    </div>
                    <div class="progress-line">
                        <div class="progress-label">90th percentile</div>
                        <div class="fw-bold">{{ $dailyDurationSummary['p90'] }} mins</div>
                        <div class="text-muted small">Long wait >90 mins: {{ $dailyDurationSummary['longWaitRate'] }}%</div>
                    </div>
                    <div class="progress-line">
                        <div class="progress-label">Long-wait patients</div>
                        <div class="fw-bold">{{ $dailyDurationSummary['longWaiters'] }}</div>
                        <div class="text-muted small">
                            Reception → dispensing • Included {{ $dailyDurationSummary['dispensed'] ?? 0 }}
                            • Excluded (no dispensing) {{ $dailyDurationSummary['excludedNoDispensing'] ?? 0 }}
                        </div>
                    </div>
                    <div class="text-muted small">
                        Calculation: start at reception check-in (`created_at` in followup_generals); end at dispensing time (`created_at` in consumptions). IDs without same-day dispensing are excluded from duration stats and shown in grey in the daily time-in-clinic band chart.
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="col-12 {{ (($viewMode ?? 'none') !== 'yearly') ? 'col-lg-5' : '' }}">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily MDs</p>
                        <h3>MD workload (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily MD chart type">
                            <button type="button" class="btn btn-outline-secondary daily-md-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-md-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-md-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-md-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 240px;">
                    <canvas id="dailyMdChart" aria-label="Daily MD workload chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @if (($viewMode ?? 'none') !== 'yearly')
    <div class="row g-3 mt-3">
        <div class="col-12">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Daily report</p>
                        <h3>Service populated hours (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily hours chart type">
                            <button type="button" class="btn btn-outline-secondary daily-hours-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-hours-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-hours-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailyHourlyChart" aria-label="Daily populated hours chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif
    </div>

		    <div id="monthly-view" style="{{ in_array(($viewMode ?? 'none'), ['monthly','quarterly','yearly']) ? '' : 'display:none;' }}">
			    @php
			        $periodEyebrow = $viewMode === 'quarterly' ? 'Quarterly report' : ($viewMode === 'yearly' ? 'Yearly report' : 'Monthly report');
			        $periodGenderBreakdown = array_values(array_filter($periodGenderBreakdown ?? [], function ($item) {
			            return ($item['title'] ?? '') !== 'Unknown';
			        }));
			        $hasPeriodGender = !empty($periodGenderBreakdown ?? []) && array_sum(array_column($periodGenderBreakdown ?? [], 'value')) > 0;
			        $hasPeriodAge = !empty($monthlyAgeSummary ?? []) && array_sum($monthlyAgeSummary ?? []) > 0;
			        $hasPeriodKp = !empty($periodKpBreakdown ?? []) && array_sum(array_column($periodKpBreakdown ?? [], 'value')) > 0;
			    @endphp
		    @if (!empty($monthlyChecks))
		    <div class="row g-3 mt-3">
		        <div class="col-12">
		            <div class="chart-card">
		                <div class="card-header">
		                    <div>
		                        <p class="eyebrow mb-1">{{ $periodEyebrow }}</p>
		                        <h3>{{ $viewMode === 'quarterly' ? 'Service summary (Quarter)' : ($viewMode === 'yearly' ? 'Service summary (Year)' : 'Service summary') }}</h3>
		                        @if (!empty($periodIsPartial ?? false) && !empty($periodThroughLabel ?? null) && isset($periodRemainingDays))
		                            <div class="small text-muted mt-1">
		                                Through {{ $periodThroughLabel }} • {{ $periodRemainingDays }} day{{ ((int) $periodRemainingDays) === 1 ? '' : 's' }} remaining
		                            </div>
		                        @endif
		                    </div>
		                </div>
	                <div class="daily-summary-strip" role="list" aria-label="Period service summary">
	                    @foreach(($monthlyChecks ?? []) as $item)
	                        @php
	                            $accent = $item['accent'] ?? '#0ea5e9';
	                            $rawValue = $item['value'] ?? 0;
	                            $value = is_numeric($rawValue) ? number_format((float) $rawValue) : $rawValue;
	                        @endphp
	                        <div class="daily-summary-item" role="listitem" title="{{ $item['note'] ?? '' }}">
	                            <span class="daily-summary-dot" style="background: {{ $accent }};"></span>
	                            <span class="daily-summary-title">{{ $item['title'] ?? '' }}</span>
	                            <span class="daily-summary-value">{{ $value }}</span>
	                            @if (!empty($item['change']))
	                                <span class="daily-summary-change">• {{ $item['change'] }}</span>
	                            @endif
	                        </div>
	                    @endforeach
	                </div>
	                <div class="text-muted small mt-2">
	                    Counts are total visits for the selected period. “Reached lab/counsellor/dispensing” means a record exists in that module within the same period. Gender (headcount) counts unique patients.
	                </div>
	            </div>
	        </div>
		    </div>
		    @endif
            @if (in_array(($viewMode ?? 'none'), ['monthly','quarterly'], true))
            <div class="row g-3 mt-3">
                <div class="col-12">
                    <div class="chart-card">
                        <div class="card-header">
                            <div>
                                <p class="eyebrow mb-1">Daily snapshot (report period)</p>
                                <h3>Time-in-clinic by day</h3>
                            </div>
                            <span class="badge bg-light text-dark">{{ $selectedMonthLabel }}</span>
                        </div>
                        <div style="height: 320px;">
                            <canvas id="timeInClinicBandChart" aria-label="Daily time in clinic distribution chart" role="img"></canvas>
                        </div>
                        <div class="text-muted small mt-2">
                            X-axis shows day + date in the selected report period. Stacked groups are waiting-time bands (minutes): 1-90, 91-150, 151-210, 211-270, 271-330.
                            Grey means excluded IDs with no same-day dispensing record.
                        </div>
                        <div class="d-flex justify-content-end gap-2 mt-3">
                            <button type="button" id="timeInClinicTimelapseBtn" class="btn btn-outline-secondary btn-sm" title="Play animated time-lapse of daily bars">
                                Play Time-Lapse
                            </button>
                            <a class="btn btn-outline-primary btn-sm {{ $evidenceEnabled ? '' : 'disabled' }}"
                               href="{{ $evidenceEnabled ? route('clinic_dashboard.export', ['type' => 'time_in_clinic_evidence', 'period_type' => $evidencePeriodType, 'period_key' => $evidencePeriodKey, 'clinic' => $clinicParam]) : '#' }}"
                               target="_blank"
                               title="{{ $evidenceEnabled ? 'Export time-in-clinic evidence (.xlsx)' : 'Select Monthly/Quarterly and one clinic' }}">
                                Evidence-XLSX
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
		    @if ($hasPeriodGender || $hasPeriodAge || $hasPeriodKp)
		    <div class="row g-3 mt-3">
		        @if ($hasPeriodGender)
		        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow }}</p>
	                        <h3>Gender (headcount)</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="Gender chart type">
	                            <button type="button" class="btn btn-outline-secondary period-gender-btn" data-chart-type="bar">Bar</button>
	                            <button type="button" class="btn btn-outline-secondary period-gender-btn" data-chart-type="line">Line</button>
	                            <button type="button" class="btn btn-outline-secondary period-gender-btn" data-chart-type="pie">Pie</button>
	                            <button type="button" class="btn btn-outline-secondary period-gender-btn" data-chart-type="funnel">Funnel</button>
	                        </div>
	                    </div>
	                </div>
	                <div style="height: 260px;">
	                    <canvas id="periodGenderChart" aria-label="Gender headcount chart" role="img"></canvas>
	                </div>
	            </div>
	        </div>
	        @endif
	        @if ($hasPeriodAge)
	        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow }}</p>
	                        <h3>Visits by age & status</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="Age status chart type">
	                            <button type="button" class="btn btn-outline-secondary age-chart-btn" data-chart-type="bar">Bar</button>
	                            <button type="button" class="btn btn-outline-secondary age-chart-btn" data-chart-type="line">Line</button>
	                            <button type="button" class="btn btn-outline-secondary age-chart-btn" data-chart-type="pie">Pie</button>
	                            <button type="button" class="btn btn-outline-secondary age-chart-btn" data-chart-type="funnel">Funnel</button>
	                        </div>
	                    </div>
	                </div>
	                <div style="height: 260px;">
	                    <canvas id="ageStatusChart" aria-label="Visits by age and status chart" role="img"></canvas>
	                </div>
	            </div>
	        </div>
	        @endif
	        @if ($hasPeriodKp)
	        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow }}</p>
	                        <h3>Key populations</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="KP chart type">
	                            <button type="button" class="btn btn-outline-secondary kp-chart-btn" data-chart-type="bar">Bar</button>
	                            <button type="button" class="btn btn-outline-secondary kp-chart-btn" data-chart-type="line">Line</button>
	                            <button type="button" class="btn btn-outline-secondary kp-chart-btn" data-chart-type="pie">Pie</button>
	                            <button type="button" class="btn btn-outline-secondary kp-chart-btn" data-chart-type="funnel">Funnel</button>
	                        </div>
	                    </div>
	                </div>
	                <div style="height: 260px;">
	                    <canvas id="kpChart" aria-label="Key populations chart" role="img"></canvas>
	                </div>
	            </div>
	        </div>
	        @endif
	    </div>
	    @endif

	    <div class="row g-3 mt-3" style="{{ in_array(($viewMode ?? 'none'), ['monthly','quarterly','yearly']) ? '' : 'display:none;' }}">
	        @if (!empty($diseaseCategories))
	        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow ?? ($viewMode === 'quarterly' ? 'Quarterly report' : ($viewMode === 'yearly' ? 'Yearly report' : 'Monthly report')) }}</p>
	                        <h3>General diseases ({{ $selectedMonthLabel }})</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="Disease chart type">
                            <button type="button" class="btn btn-outline-secondary disease-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary disease-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary disease-chart-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary disease-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="diseaseChart" aria-label="General diseases chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
	        @if (!empty($programCategories))
	        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow ?? ($viewMode === 'quarterly' ? 'Quarterly report' : ($viewMode === 'yearly' ? 'Yearly report' : 'Monthly report')) }}</p>
	                        <h3>Program workloads</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="Program chart type">
                            <button type="button" class="btn btn-outline-secondary program-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary program-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary program-chart-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary program-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="programChart" aria-label="Program workloads chart" role="img"></canvas>
                </div>
            </div>
        </div>
        @endif
	        <div class="col-12 col-lg-4">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow ?? ($viewMode === 'quarterly' ? 'Quarterly report' : ($viewMode === 'yearly' ? 'Yearly report' : 'Monthly report')) }}</p>
	                        <h3>Planned vs unplanned</h3>
	                    </div>
	                    <span class="badge bg-info text-dark">Appointments</span>
	                </div>
                <div style="height: 220px;">
                    <canvas id="plannedChart" aria-label="Planned vs unplanned chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>

	    @php $showDataEntryCharts = false; @endphp
	    @if ($showDataEntryCharts && !empty($monthlyClerkSummary))
	    <div class="row g-3 mt-3">
	        <div class="col-12 col-lg-6">
	            <div class="chart-card">
	                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Monthly report</p>
                        <h3>Data entry workload (month)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Monthly clerk chart type">
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="monthlyClerkChart" aria-label="Monthly data entry workload chart" role="img"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Monthly report</p>
                        <h3>Data entry populated hours (month)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Monthly clerk hours chart type">
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-hours-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-hours-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary monthly-clerk-hours-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="monthlyClerkHoursChart" aria-label="Monthly data entry populated hours chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif

	    @if ($isPeriod)
	    <div class="row g-3 mt-3">
	        <div class="col-12">
	            <div class="chart-card">
	                <div class="card-header">
	                    <div>
	                        <p class="eyebrow mb-1">{{ $periodEyebrow }}</p>
	                        <h3>MD workload ({{ $selectedMonthLabel }})</h3>
	                    </div>
	                    <div class="d-flex flex-wrap gap-2">
	                        <div class="btn-group btn-group-sm" role="group" aria-label="MD chart type">
                            <button type="button" class="btn btn-outline-secondary md-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary md-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary md-chart-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary md-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 280px;">
                    <canvas id="monthlyMdChart" aria-label="Monthly MD workload chart" role="img"></canvas>
                    <div id="monthlyMdEmpty" class="text-muted small mt-2" style="display:none;">No MD workload data for this month.</div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <details class="chart-card mt-4">
        <summary class="card-header" style="cursor: pointer;">
            <div>
                <p class="eyebrow mb-1">Reference</p>
                <h3 class="mb-0">How counts are calculated (edit this text)</h3>
            </div>
        </summary>
        <div class="p-3 small text-muted">
            <p class="mb-2">Edit this section to explain how each metric is counted and which tables it uses.</p>
            <ul class="mb-0">
                <li><strong>Service summary</strong>: followup_generals (Visit Date, New_Old, Unplan) + lab modules (Lab, Rprtest, LabGeneralTest, LabHbcTest, Urine, Labstitest, Lab_oi) + counsellor_records + consumptions.</li>
                <li><strong>Visits by age &amp; status</strong>: followup_generals + pt_configs/patients (DOB, Agey/Agem). New = Reg Date in the same month as the selected day.</li>
                <li><strong>Gender (headcount)</strong>: pt_configs/patients (unique PIDs).</li>
                <li><strong>Key populations</strong>: pt_configs/patients Main Risk/Sub Risk for PIDs in followup_generals.</li>
                <li><strong>General diseases</strong>: ConsultationReportService fields from followup_generals (ugen_*, ogen_*, etc.).</li>
                <li><strong>Program workloads</strong>: ncd_followups, stimales, stifemales, coulsellings, anc_follow_ups, feeding_centerfups, cervicalcancer1s/cervicalcancers, cmvs, mental__healths, prevention_logsheets, prevention_c_b_s, pre_tb_records/pre_t_b_s, tb_register_o3_s, tbipts.</li>
                <li><strong>Planned vs unplanned</strong>: followup_generals.Unplan.</li>
                <li><strong>MD workload</strong>: followup_generals.Current_MD.</li>
                <li><strong>Time-in-clinic</strong>: followup_generals.created_at (reception start) to consumptions.created_at (dispensing end) per PID/day; IDs without dispensing are counted in excluded (grey).</li>
            </ul>
        </div>
    </details>

    @php
        $ncdClinic = $clinicConnection ?? 'ALL';
        $ncdHref = Route::has('ncd_analysis.dashboard')
            ? route('ncd_analysis.dashboard', ['clinic' => $ncdClinic])
            : (Route::has('clinic_dashboard.ncd')
                ? route('clinic_dashboard.ncd', ['clinic' => $ncdClinic])
                : url('ncd_analysis') . '?clinic=' . urlencode((string) $ncdClinic));
    @endphp
    <div class="text-center mt-4 small text-muted">
        <a href="{{ $ncdHref }}">Open NCD analytics dashboard</a>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
	    const valueLabelsPlugin = {
	        id: 'valueLabels',
	        afterDatasetsDraw(chart, args, pluginOptions) {
	            const opts = chart.config.options || {};
            const vlOpts = (opts.plugins && opts.plugins.valueLabels !== undefined)
                ? opts.plugins.valueLabels
                : pluginOptions;
	            if (chart.config.type !== 'bar' || opts.isFunnel || vlOpts === false || (vlOpts && vlOpts.display === false)) return;
	            const {ctx} = chart;
	            ctx.save();
	            const color = (vlOpts && vlOpts.color) ? vlOpts.color : '#0f172a';
	            const font = (vlOpts && vlOpts.font) ? vlOpts.font : '600 10px "Space Grotesk", "Inter", sans-serif';
	            const topPad = (vlOpts && typeof vlOpts.topPadding === 'number') ? vlOpts.topPadding : 12;
	            const topLimit = (chart.chartArea?.top ?? 0) + topPad;
	            chart.data.datasets.forEach((dataset, i) => {
	                if (!chart.isDatasetVisible(i)) return;
	                const meta = chart.getDatasetMeta(i);
	                meta.data.forEach((element, index) => {
                    const value = dataset.data[index];
                    if (value === null || value === undefined) return;
                    const position = element.tooltipPosition();
                    ctx.fillStyle = color;
	                    ctx.font = font;
	                    ctx.textAlign = 'center';
	                    ctx.textBaseline = 'bottom';
	                    const text = typeof value === 'number' ? value.toLocaleString() : value;
	                    const y = Math.max(position.y - 6, topLimit);
	                    ctx.fillText(text, position.x, y);
	                });
	            });
	            ctx.restore();
	        }
	    };
    const stackTotalsPlugin = {
        id: 'stackTotals',
        afterDatasetsDraw(chart, args, pluginOptions) {
            const opts = chart.config.options || {};
            const stOpts = (opts.plugins && opts.plugins.stackTotals !== undefined)
                ? opts.plugins.stackTotals
                : pluginOptions;
            if (chart.config.type !== 'bar' || stOpts === false || (stOpts && stOpts.display === false)) return;
            const { ctx } = chart;
            const datasets = chart.data.datasets || [];
            const labels = chart.data.labels || [];
            if (!datasets.length || !labels.length) return;
            ctx.save();
            const color = (stOpts && stOpts.color) ? stOpts.color : '#0f172a';
            const font = (stOpts && stOpts.font) ? stOpts.font : '700 10px "Space Grotesk", "Inter", sans-serif';
            const topPad = (stOpts && typeof stOpts.topPadding === 'number') ? stOpts.topPadding : 12;
            const topLimit = (chart.chartArea?.top ?? 0) + topPad;
            for (let i = 0; i < labels.length; i++) {
                let total = 0;
                let x = null;
                let topY = null;
                datasets.forEach((dataset, dsIndex) => {
                    if (!chart.isDatasetVisible(dsIndex)) return;
                    const raw = dataset.data && dataset.data[i] !== undefined ? dataset.data[i] : 0;
                    const value = Number(raw) || 0;
                    total += value;
                    const element = chart.getDatasetMeta(dsIndex).data[i];
                    if (!element) return;
                    const pos = element.tooltipPosition();
                    x = pos.x;
                    topY = topY === null ? pos.y : Math.min(topY, pos.y);
                });
                if (total <= 0 || x === null || topY === null) continue;
                ctx.fillStyle = color;
                ctx.font = font;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';
                ctx.fillText(total.toLocaleString(), x, Math.max(topY - 8, topLimit));
            }
            ctx.restore();
        }
    };
    Chart.register(valueLabelsPlugin, stackTotalsPlugin);
	    Chart.defaults.plugins.valueLabels = {
	        display: false,
	        color: '#0f172a',
	        font: '600 10px "Space Grotesk", "Inter", sans-serif',
	        topPadding: 12
	    };
    Chart.defaults.plugins.stackTotals = {
        display: false,
        color: '#0f172a',
        font: '700 10px "Space Grotesk", "Inter", sans-serif',
        topPadding: 12
    };
    @php($monthlyMdTrend = $monthlyMdTrend ?? ['labels' => [], 'datasets' => []])
    const monthlyMdData = @json($monthlyMdTrend);
    const gridColor = 'rgba(15, 23, 42, 0.08)';
    const monthlyMdEmpty = document.getElementById('monthlyMdEmpty');
    const viewMode = @json($viewMode ?? 'none');
    const isPeriodMode = viewMode === 'monthly' || viewMode === 'quarterly' || viewMode === 'yearly';
    let monthlyMdChart = null;
    function renderMonthlyChart() {
        // deprecated: MD chart now rendered via renderMdChart
        return;
    }

	    // Program chart controls
	    const programData = @json($programCategories ?? []);
	    const diseaseData = @json($diseaseCategories ?? []);
	    const kpData = @json($periodKpBreakdown ?? []);
		    const plannedData = { planned: {{ $planned ?? 0 }}, unplanned: {{ $unplan ?? 0 }} };
		    const monthlySummaryData = @json($monthlyChecks ?? []);
		    const dailySummaryData = @json($dailyChecks ?? []);
		    const periodGenderBreakdown = @json($periodGenderBreakdown ?? []);
	    const dailyGenderBreakdown = @json($dailyGenderBreakdown ?? []);
	    const dailyKpBreakdown = @json($dailyKpBreakdown ?? []);
	    const dailyDiseaseData = @json($dailyDiseaseCategories ?? []);
	    const dailyProgramWorkloads = @json($dailyProgramWorkloads ?? []);
    const timeInClinicDailyBands = @json($timeInClinicDailyBands ?? ['labels'=>[],'datasets'=>[]]);
    const dailyAgeStatusData = [
        { label: 'New <12', value: {{ $dailyAgeSummary['u12_new'] ?? 0 }} },
        { label: 'New ≥12', value: {{ $dailyAgeSummary['o12_new'] ?? 0 }} },
        { label: 'Old <12', value: {{ $dailyAgeSummary['u12_old'] ?? 0 }} },
        { label: 'Old ≥12', value: {{ $dailyAgeSummary['o12_old'] ?? 0 }} },
    ];
    const dailyClerkSummary = @json($dailyClerkSummary ?? []);
    const monthlyClerkSummary = @json($monthlyClerkSummary ?? []);
    const mdData = {
        labels: @json($monthlyMdTrend['labels'] ?? []),
        values: @json($monthlyMdTrend['datasets'][0]['data'] ?? [])
    };
    const ageStatusData = [
        { label: 'New <12', value: {{ $monthlyAgeSummary['u12_new'] ?? 0 }} },
        { label: 'New ≥12', value: {{ $monthlyAgeSummary['o12_new'] ?? 0 }} },
        { label: 'Old <12', value: {{ $monthlyAgeSummary['u12_old'] ?? 0 }} },
        { label: 'Old ≥12', value: {{ $monthlyAgeSummary['o12_old'] ?? 0 }} },
    ];
    const hourlyLoad = @json($monthlyHourlyLoad ?? ['labels'=>[],'series'=>[]]);
    const dailyMdData = {
        labels: @json($mdStatsDaily->pluck('Current_MD')->map(fn($v)=> $v ?: 'N/A')->values() ?? []),
        values: @json($mdStatsDaily->pluck('total')->values() ?? [])
    };
    const dailyHourlyLoad = @json($dailyHourlyLoad ?? ['labels'=>[],'series'=>[]]);
    const dailyClerkHours = @json($dailyClerkHours ?? ['labels'=>[],'series'=>[]]);
    const monthlyClerkHours = @json($monthlyClerkHours ?? ['labels'=>[],'series'=>[]]);
    let programChart = null;
    let diseaseChart = null;
    let kpChart = null;
    let plannedChart = null;
    let monthlySummaryChart = null;
    let mdChart = null;
    let ageStatusChart = null;
    let hourlyLoadChart = null;
	    let dailySummaryChart = null;
	    let dailyMdChart = null;
	    let dailyGenderChart = null;
	    let periodGenderChart = null;
	    let dailyAgeStatusChart = null;
	    let dailyKpChart = null;
	    let dailyDiseaseChart = null;
	    let dailyProgramChart = null;
    let dailyHourlyChart = null;
    let dailyClerkChart = null;
    let monthlyClerkChart = null;
    let dailyClerkHoursChart = null;
    let monthlyClerkHoursChart = null;
    let timeInClinicBandChart = null;
    let timeInClinicTimelapseTimer = null;
    let timeInClinicTimelapseRunning = false;
    let timeInClinicTimelapseCompleted = false;
    let timeInClinicTimelapseIndex = -1;
    const timeInClinicTimelapseSpeedMs = 180;

    function setTimeInClinicTimelapseButtonState() {
        const btn = document.getElementById('timeInClinicTimelapseBtn');
        if (!btn) return;
        const hasData = isPeriodMode && viewMode !== 'yearly' && (timeInClinicDailyBands.labels || []).length > 0;
        btn.disabled = !hasData;
        if (!hasData) {
            btn.textContent = 'Play Time-Lapse';
            btn.classList.remove('btn-danger');
            btn.classList.add('btn-outline-secondary');
            return;
        }
        if (timeInClinicTimelapseRunning) {
            btn.textContent = 'Stop Time-Lapse';
            btn.classList.add('btn-danger');
            btn.classList.remove('btn-outline-secondary');
            return;
        }
        btn.classList.remove('btn-danger');
        btn.classList.add('btn-outline-secondary');
        btn.textContent = timeInClinicTimelapseCompleted ? 'Replay Time-Lapse' : 'Play Time-Lapse';
    }

    function getTimeInClinicFrameData(maxVisibleIndex = null) {
        return (timeInClinicDailyBands.datasets || []).map(ds => {
            const src = Array.isArray(ds.data) ? ds.data : [];
            return src.map((value, idx) => {
                const num = Number(value) || 0;
                if (maxVisibleIndex === null) return num;
                return idx <= maxVisibleIndex ? num : 0;
            });
        });
    }

    function applyTimeInClinicFrame(maxVisibleIndex = null) {
        if (!timeInClinicBandChart) return;
        const frameData = getTimeInClinicFrameData(maxVisibleIndex);
        frameData.forEach((data, idx) => {
            if (!timeInClinicBandChart.data.datasets[idx]) return;
            timeInClinicBandChart.data.datasets[idx].data = data;
        });
        timeInClinicBandChart.update();
    }

    function stopTimeInClinicTimelapse(showFull = true, markCompleted = false) {
        if (timeInClinicTimelapseTimer) {
            window.clearInterval(timeInClinicTimelapseTimer);
            timeInClinicTimelapseTimer = null;
        }
        timeInClinicTimelapseRunning = false;
        timeInClinicTimelapseCompleted = markCompleted;
        if (showFull) {
            applyTimeInClinicFrame(null);
        }
        setTimeInClinicTimelapseButtonState();
    }

    function startTimeInClinicTimelapse() {
        const totalDays = (timeInClinicDailyBands.labels || []).length;
        if (!timeInClinicBandChart || totalDays === 0) return;
        if (timeInClinicTimelapseTimer) {
            window.clearInterval(timeInClinicTimelapseTimer);
            timeInClinicTimelapseTimer = null;
        }
        timeInClinicTimelapseRunning = true;
        timeInClinicTimelapseCompleted = false;
        timeInClinicTimelapseIndex = -1;
        applyTimeInClinicFrame(-1);
        setTimeInClinicTimelapseButtonState();
        timeInClinicTimelapseTimer = window.setInterval(() => {
            timeInClinicTimelapseIndex += 1;
            applyTimeInClinicFrame(timeInClinicTimelapseIndex);
            if (timeInClinicTimelapseIndex >= totalDays - 1) {
                stopTimeInClinicTimelapse(false, true);
            }
        }, timeInClinicTimelapseSpeedMs);
    }

    function bindTimeInClinicTimelapseButton() {
        const btn = document.getElementById('timeInClinicTimelapseBtn');
        if (!btn) return;
        btn.addEventListener('click', () => {
            if (timeInClinicTimelapseRunning) {
                stopTimeInClinicTimelapse(true, false);
                return;
            }
            startTimeInClinicTimelapse();
        });
        setTimeInClinicTimelapseButtonState();
    }

    function renderDailyGenderChart(type = 'bar') {
        if (viewMode !== 'daily' || !dailyGenderBreakdown || dailyGenderBreakdown.length === 0) return;
        const canvas = document.getElementById('dailyGenderChart');
        if (!canvas) return;
        if (dailyGenderChart) {
            dailyGenderChart.destroy();
            dailyGenderChart = null;
        }
        dailyGenderChart = renderSimpleChart(dailyGenderBreakdown, 'dailyGenderChart', type);
    }

	    function bindDailyGenderButtons() {
	        const buttons = document.querySelectorAll('.daily-gender-btn');
	        buttons.forEach(btn => {
	            btn.addEventListener('click', () => {
	                buttons.forEach(b => b.classList.remove('btn-secondary'));
	                btn.classList.add('btn-secondary');
	                renderDailyGenderChart(btn.getAttribute('data-chart-type') || 'bar');
	            });
	        });
	        const first = buttons[0];
	        if (first) first.classList.add('btn-secondary');
	    }

	    function renderPeriodGenderChart(type = 'bar') {
	        if (!isPeriodMode || !periodGenderBreakdown || periodGenderBreakdown.length === 0) return;
	        const canvas = document.getElementById('periodGenderChart');
	        if (!canvas) return;
	        if (periodGenderChart) {
	            periodGenderChart.destroy();
	            periodGenderChart = null;
	        }
	        periodGenderChart = renderSimpleChart(periodGenderBreakdown, 'periodGenderChart', type);
	    }

	    function bindPeriodGenderButtons() {
	        const buttons = document.querySelectorAll('.period-gender-btn');
	        buttons.forEach(btn => {
	            btn.addEventListener('click', () => {
	                buttons.forEach(b => b.classList.remove('btn-secondary'));
	                btn.classList.add('btn-secondary');
	                renderPeriodGenderChart(btn.getAttribute('data-chart-type') || 'bar');
	            });
	        });
	        const first = buttons[0];
	        if (first) first.classList.add('btn-secondary');
	    }

	    function renderDailyAgeStatusChart(type = 'bar') {
	        if (viewMode !== 'daily' || !dailyAgeStatusData || dailyAgeStatusData.length === 0) return;
	        const canvas = document.getElementById('dailyAgeStatusChart');
        if (!canvas) return;
        if (dailyAgeStatusChart) {
            dailyAgeStatusChart.destroy();
            dailyAgeStatusChart = null;
        }
        const dataset = dailyAgeStatusData.map(x => ({ title: x.label, value: x.value }));
        dailyAgeStatusChart = renderSimpleChart(dataset, 'dailyAgeStatusChart', type);
    }

    function bindDailyAgeStatusButtons() {
        const buttons = document.querySelectorAll('.daily-age-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyAgeStatusChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyKpChart(type = 'bar') {
        if (viewMode !== 'daily' || !dailyKpBreakdown || dailyKpBreakdown.length === 0) return;
        const canvas = document.getElementById('dailyKpChart');
        if (!canvas) return;
        if (dailyKpChart) {
            dailyKpChart.destroy();
            dailyKpChart = null;
        }
        dailyKpChart = renderSimpleChart(dailyKpBreakdown, 'dailyKpChart', type);
    }

    function bindDailyKpButtons() {
        const buttons = document.querySelectorAll('.daily-kp-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyKpChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyDiseaseChart(type = 'bar') {
        if (viewMode !== 'daily' || !dailyDiseaseData || dailyDiseaseData.length === 0) return;
        const canvas = document.getElementById('dailyDiseaseChart');
        if (!canvas) return;
        if (dailyDiseaseChart) {
            dailyDiseaseChart.destroy();
            dailyDiseaseChart = null;
        }
        dailyDiseaseChart = renderSimpleChart(dailyDiseaseData, 'dailyDiseaseChart', type);
    }

    function bindDailyDiseaseButtons() {
        const buttons = document.querySelectorAll('.daily-disease-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyDiseaseChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyProgramChart(type = 'bar') {
        if (viewMode !== 'daily' || !dailyProgramWorkloads || dailyProgramWorkloads.length === 0) return;
        const canvas = document.getElementById('dailyProgramChart');
        if (!canvas) return;
        if (dailyProgramChart) {
            dailyProgramChart.destroy();
            dailyProgramChart = null;
        }
        dailyProgramChart = renderSimpleChart(dailyProgramWorkloads, 'dailyProgramChart', type);
    }

    function bindDailyProgramButtons() {
        const buttons = document.querySelectorAll('.daily-program-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyProgramChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }
    function renderProgramChart(type = 'bar') {
        if (!isPeriodMode || programData.length === 0) {
            return;
        }
        const labels = programData.map(p => p.label);
        const values = programData.map(p => Number(p.value) || 0);
        const canvas = document.getElementById('programChart');
        if (!canvas) return;

        if (programChart) {
            programChart.destroy();
            programChart = null;
        }

        const ctx = canvas.getContext('2d');
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6','#8b5cf6','#f97316','#0ea5e9','#84cc16'];
        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...programData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : programData;
        const chartLabels = sorted.map(p => p.label);
        const chartValues = sorted.map(p => Number(p.value) || 0);
        const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: isFunnel ? 'y' : 'x',
            isFunnel: isFunnel,
            plugins: {
                legend: { display: type === 'pie' },
                valueLabels: type === 'bar' && !isFunnel ? {} : false,
            },
            scales: type === 'pie' ? {} : {
                x: { beginAtZero: true, grid: { display: type !== 'pie' } },
                y: { beginAtZero: true, grid: { display: type !== 'pie' } },
            }
        };

        const chartType = isFunnel ? 'bar' : type;
        programChart = new Chart(ctx, {
            type: chartType,
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'Visits',
                    data: chartValues,
                    backgroundColor: type === 'pie'
                        ? chartLabels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? chartLabels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? chartLabels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: commonOptions
        });
    }

    function bindProgramChartButtons() {
        const buttons = document.querySelectorAll('.program-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderProgramChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDiseaseChart(type = 'bar') {
        if (!isPeriodMode || diseaseData.length === 0) {
            return;
        }
        const labels = diseaseData.map(d => d.label);
        const values = diseaseData.map(d => Number(d.value) || 0);
        const canvas = document.getElementById('diseaseChart');
        if (!canvas) return;

        if (diseaseChart) {
            diseaseChart.destroy();
            diseaseChart = null;
        }

        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...diseaseData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : diseaseData;
        const chartLabels = sorted.map(d => d.label);
        const chartValues = sorted.map(d => Number(d.value) || 0);
        const palette = ['#6366f1','#22c55e','#f59e0b','#0ea5e9','#ef4444','#14b8a6','#8b5cf6','#f97316','#a855f7','#0ea5e9'];
        diseaseChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels: chartLabels,
                datasets: [{
                    label: 'Visits',
                    data: chartValues,
                    backgroundColor: type === 'pie'
                        ? chartLabels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? chartLabels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? chartLabels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindDiseaseChartButtons() {
        const buttons = document.querySelectorAll('.disease-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderDiseaseChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderKPChart(type = 'bar') {
        if (!isPeriodMode || kpData.length === 0) {
            return;
        }
        const canvas = document.getElementById('kpChart');
        if (!canvas) return;
        if (kpChart) {
            kpChart.destroy();
            kpChart = null;
        }
	        const isFunnel = type === 'funnel';
	        const sorted = isFunnel ? [...kpData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : kpData;
	        const labels = sorted.map(k => k.title ?? k.label);
	        const values = sorted.map(k => Number(k.value) || 0);
	        const palette = ['#0ea5e9','#22c55e','#f59e0b','#ef4444','#6366f1'];
	        kpChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Visits',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindKPChartButtons() {
        const buttons = document.querySelectorAll('.kp-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderKPChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderPlannedChart() {
        if (!isPeriodMode) return;
        const canvas = document.getElementById('plannedChart');
        if (!canvas) return;
        if (plannedChart) {
            plannedChart.destroy();
            plannedChart = null;
        }
        plannedChart = new Chart(canvas.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Planned', 'Unplanned'],
                datasets: [{
                    data: [Number(plannedData.planned) || 0, Number(plannedData.unplanned) || 0],
                    backgroundColor: ['#0ea5e9', '#ef4444'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { position: 'bottom' }, valueLabels: false }
            }
        });
    }

    function renderMonthlySummaryChart(type = 'bar') {
        if (!isPeriodMode || monthlySummaryData.length === 0) return;
        const canvas = document.getElementById('monthlySummaryChart');
        if (!canvas) return;
        if (monthlySummaryChart) {
            monthlySummaryChart.destroy();
            monthlySummaryChart = null;
        }
        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...monthlySummaryData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : monthlySummaryData;
        const labels = sorted.map(m => m.title);
        const values = sorted.map(m => Number(m.value) || 0);
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6','#8b5cf6'];
        monthlySummaryChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Count',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindMonthlySummaryButtons() {
        const buttons = document.querySelectorAll('.ms-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderMonthlySummaryChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderMdChart(type = 'bar') {
        if (!isPeriodMode || !mdData.labels || mdData.labels.length === 0) {
            return;
        }
        const canvas = document.getElementById('monthlyMdChart');
        const emptyEl = document.getElementById('monthlyMdEmpty');
        if (!canvas) return;
        const hasData = (mdData.values || []).some(v => Number(v) > 0);
        if (!hasData) {
            if (emptyEl) emptyEl.style.display = 'block';
            return;
        }
        if (emptyEl) emptyEl.style.display = 'none';
        if (mdChart) {
            mdChart.destroy();
            mdChart = null;
        }
        const isFunnel = type === 'funnel';
        const paired = mdData.labels.map((label, idx) => ({ label, value: Number(mdData.values[idx]) || 0 }));
        const sorted = isFunnel ? paired.sort((a,b)=> b.value - a.value) : paired;
        const labels = sorted.map(p => p.label);
        const values = sorted.map(p => p.value);
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6','#8b5cf6','#f97316','#84cc16','#0ea5e9'];
        mdChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Patients',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindMdChartButtons() {
        const buttons = document.querySelectorAll('.md-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderMdChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderAgeStatusChart(type = 'bar') {
        if (!isPeriodMode || ageStatusData.length === 0) return;
        const canvas = document.getElementById('ageStatusChart');
        if (!canvas) return;
        if (ageStatusChart) {
            ageStatusChart.destroy();
            ageStatusChart = null;
        }
        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...ageStatusData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : ageStatusData;
        const labels = sorted.map(a => a.label);
        const values = sorted.map(a => Number(a.value) || 0);
        const palette = ['#0ea5e9','#22c55e','#f97316','#8b5cf6'];
        ageStatusChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Patients',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindAgeStatusButtons() {
        const buttons = document.querySelectorAll('.age-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderAgeStatusChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderHourlyLoadChart(type = 'line') {
        if (!isPeriodMode || !hourlyLoad.labels || hourlyLoad.labels.length === 0) return;
        const canvas = document.getElementById('hourlyLoadChart');
        if (!canvas) return;
        if (hourlyLoadChart) {
            hourlyLoadChart.destroy();
            hourlyLoadChart = null;
        }
        const isFunnel = type === 'funnel';
        const datasets = (hourlyLoad.series || []).map((s, idx) => ({
            label: s.label || `Series ${idx+1}`,
            data: s.data || [],
            backgroundColor: (s.color || '#0ea5e9'),
            borderColor: (s.color || '#0ea5e9'),
            borderWidth: 2,
            tension: 0.35,
            fill: false,
            borderRadius: (type === 'bar' || isFunnel) ? 6 : 0,
        }));

        hourlyLoadChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels: hourlyLoad.labels,
                datasets: isFunnel
                    ? datasets.map(ds => ({ ...ds, data: ds.data.slice().sort((a,b)=>b-a) }))
                    : datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { position: 'bottom', display: true }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindHourlyLoadButtons() {
        const buttons = document.querySelectorAll('.hours-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'line';
                renderHourlyLoadChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailySummaryChart(type = 'bar') {
        if (viewMode !== 'daily' || dailySummaryData.length === 0) return;
        const canvas = document.getElementById('dailySummaryChart');
        if (!canvas) return;
        if (dailySummaryChart) {
            dailySummaryChart.destroy();
            dailySummaryChart = null;
        }
        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...dailySummaryData].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : dailySummaryData;
        const labels = sorted.map(m => m.title);
        const values = sorted.map(m => Number(m.value) || 0);
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6'];
        dailySummaryChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Count',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindDailySummaryButtons() {
        const buttons = document.querySelectorAll('.ds-chart-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderDailySummaryChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyMdChart(type = 'bar') {
        if (viewMode !== 'daily' || !dailyMdData.labels || dailyMdData.labels.length === 0) return;
        const canvas = document.getElementById('dailyMdChart');
        if (!canvas) return;
        if (dailyMdChart) {
            dailyMdChart.destroy();
            dailyMdChart = null;
        }
        const isFunnel = type === 'funnel';
        const paired = dailyMdData.labels.map((label, idx) => ({ label, value: Number(dailyMdData.values[idx]) || 0 }));
        const sorted = isFunnel ? paired.sort((a,b)=> b.value - a.value) : paired;
        const labels = sorted.map(p => p.label);
        const values = sorted.map(p => p.value);
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6','#8b5cf6'];
        dailyMdChart = new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Patients',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindDailyMdButtons() {
        const buttons = document.querySelectorAll('.daily-md-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'bar';
                renderDailyMdChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

	    function renderDailyHourlyChart(type = 'line') {
	        if (viewMode !== 'daily' || !dailyHourlyLoad.labels || dailyHourlyLoad.labels.length === 0) return;
	        const canvas = document.getElementById('dailyHourlyChart');
	        if (!canvas) return;
	        if (dailyHourlyChart) {
	            dailyHourlyChart.destroy();
	            dailyHourlyChart = null;
	        }
	        const formatHourLabel = (h) => {
	            const hour = parseInt(h, 10);
	            if (Number.isNaN(hour)) return String(h);
	            if (hour === 0) return '12 AM';
	            if (hour < 12) return `${hour} AM`;
	            if (hour === 12) return '12 PM';
	            return `${hour - 12} PM`;
	        };
	        const labels = (dailyHourlyLoad.labels || []).map(formatHourLabel);
	        const isFunnel = type === 'funnel';
	        const datasets = (dailyHourlyLoad.series || []).map((s, idx) => ({
	            label: s.label || `Series ${idx+1}`,
	            data: s.data || [],
	            backgroundColor: (s.color || '#0ea5e9'),
            borderColor: (s.color || '#0ea5e9'),
            borderWidth: 2,
            tension: 0.35,
            fill: false,
            borderRadius: (type === 'bar' || isFunnel) ? 6 : 0,
        }));
	        dailyHourlyChart = new Chart(canvas.getContext('2d'), {
	            type: isFunnel ? 'bar' : type,
	            data: {
	                labels,
	                datasets: isFunnel
	                    ? datasets.map(ds => ({ ...ds, data: ds.data.slice().sort((a,b)=>b-a) }))
	                    : datasets
	            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                plugins: { legend: { position: 'bottom', display: true } },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function bindDailyHourlyButtons() {
        const buttons = document.querySelectorAll('.daily-hours-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                const type = btn.getAttribute('data-chart-type') || 'line';
                renderDailyHourlyChart(type);
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyClerkChart(type = 'bar') {
        if (viewMode !== 'daily' || dailyClerkSummary.length === 0) return;
        if (dailyClerkChart) { dailyClerkChart.destroy(); dailyClerkChart = null; }
        dailyClerkChart = renderSimpleChart(dailyClerkSummary, 'dailyClerkChart', type);
    }

    function bindDailyClerkButtons() {
        const buttons = document.querySelectorAll('.daily-clerk-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyClerkChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderDailyClerkHoursChart(type = 'line') {
        if (viewMode !== 'daily') return;
        if (dailyClerkHoursChart) { dailyClerkHoursChart.destroy(); dailyClerkHoursChart = null; }
        dailyClerkHoursChart = renderHourlyChart(dailyClerkHours, 'dailyClerkHoursChart', type);
    }

    function bindDailyClerkHoursButtons() {
        const buttons = document.querySelectorAll('.daily-clerk-hours-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderDailyClerkHoursChart(btn.getAttribute('data-chart-type') || 'line');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderMonthlyClerkChart(type = 'bar') {
        if (!isPeriodMode || monthlyClerkSummary.length === 0) return;
        if (monthlyClerkChart) { monthlyClerkChart.destroy(); monthlyClerkChart = null; }
        monthlyClerkChart = renderSimpleChart(monthlyClerkSummary, 'monthlyClerkChart', type);
    }

    function bindMonthlyClerkButtons() {
        const buttons = document.querySelectorAll('.monthly-clerk-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderMonthlyClerkChart(btn.getAttribute('data-chart-type') || 'bar');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderMonthlyClerkHoursChart(type = 'line') {
        if (!isPeriodMode) return;
        if (monthlyClerkHoursChart) { monthlyClerkHoursChart.destroy(); monthlyClerkHoursChart = null; }
        monthlyClerkHoursChart = renderHourlyChart(monthlyClerkHours, 'monthlyClerkHoursChart', type);
    }

    function bindMonthlyClerkHoursButtons() {
        const buttons = document.querySelectorAll('.monthly-clerk-hours-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('btn-secondary'));
                btn.classList.add('btn-secondary');
                renderMonthlyClerkHoursChart(btn.getAttribute('data-chart-type') || 'line');
            });
        });
        const first = buttons[0];
        if (first) first.classList.add('btn-secondary');
    }

    function renderTimeInClinicBandChart() {
        if (!isPeriodMode || viewMode === 'yearly') return;
        const canvas = document.getElementById('timeInClinicBandChart');
        if (!canvas || !timeInClinicDailyBands || !(timeInClinicDailyBands.labels || []).length) {
            setTimeInClinicTimelapseButtonState();
            return;
        }
        if (timeInClinicTimelapseTimer) {
            window.clearInterval(timeInClinicTimelapseTimer);
            timeInClinicTimelapseTimer = null;
        }
        timeInClinicTimelapseRunning = false;
        timeInClinicTimelapseCompleted = false;
        timeInClinicTimelapseIndex = -1;
        if (timeInClinicBandChart) {
            timeInClinicBandChart.destroy();
            timeInClinicBandChart = null;
        }
        const datasets = (timeInClinicDailyBands.datasets || []).map(ds => ({
            label: ds.label,
            data: ds.data || [],
            backgroundColor: ds.backgroundColor || '#0ea5e9',
            borderColor: ds.borderColor || '#0ea5e9',
            borderWidth: 1,
            stack: 'time',
        }));
        timeInClinicBandChart = new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels: timeInClinicDailyBands.labels || [],
                datasets,
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', display: true },
                    valueLabels: false,
                    stackTotals: {},
                },
                scales: {
                    x: { stacked: true, ticks: { maxRotation: 60, minRotation: 45 } },
                    y: { beginAtZero: true, stacked: true, title: { display: true, text: 'Count' } },
                },
            },
        });
        setTimeInClinicTimelapseButtonState();
    }

    function renderSimpleChart(dataset, canvasId, type = 'bar') {
        const canvas = document.getElementById(canvasId);
        if (!canvas || !dataset || !dataset.length) return null;
        const isFunnel = type === 'funnel';
        const sorted = isFunnel ? [...dataset].sort((a,b)=> (Number(b.value)||0) - (Number(a.value)||0)) : dataset;
        const labels = sorted.map(m => m.title);
        const values = sorted.map(m => Number(m.value) || 0);
        const palette = ['#0ea5e9','#22c55e','#f59e0b','#6366f1','#ef4444','#14b8a6','#8b5cf6','#f97316'];
        return new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels,
                datasets: [{
                    label: 'Count',
                    data: values,
                    backgroundColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : (isFunnel ? labels.map((_,i)=>palette[i%palette.length]) : palette[0]),
                    borderColor: type === 'pie'
                        ? labels.map((_,i)=>palette[i%palette.length])
                        : palette[0],
                    borderRadius: (type === 'bar' || isFunnel) ? 8 : 0,
                    tension: 0.3,
                    barThickness: isFunnel ? undefined : 'flex',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { display: type === 'pie' }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

    function renderHourlyChart(dataset, canvasId, type = 'line') {
        if (!dataset || !dataset.labels || dataset.labels.length === 0) return null;
        const canvas = document.getElementById(canvasId);
        if (!canvas) return null;
        const isFunnel = type === 'funnel';
        const ds = (dataset.series || []).map((s, idx) => ({
            label: s.label || `Series ${idx+1}`,
            data: s.data || [],
            backgroundColor: (s.color || '#0ea5e9'),
            borderColor: (s.color || '#0ea5e9'),
            borderWidth: 2,
            tension: 0.35,
            fill: false,
            borderRadius: (type === 'bar' || isFunnel) ? 6 : 0,
        }));
        return new Chart(canvas.getContext('2d'), {
            type: isFunnel ? 'bar' : type,
            data: {
                labels: dataset.labels,
                datasets: isFunnel ? ds.map(d => ({ ...d, data: d.data.slice().sort((a,b)=>b-a) })) : ds
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: isFunnel ? 'y' : 'x',
                isFunnel: isFunnel,
                plugins: { legend: { position: 'bottom', display: true }, valueLabels: type === 'bar' && !isFunnel ? {} : false },
                scales: type === 'pie' ? {} : {
                    x: { beginAtZero: true },
                    y: { beginAtZero: true },
                }
            }
        });
    }

	    function toggleView(mode) {
	        const daily = document.getElementById('daily-view');
	        const monthly = document.getElementById('monthly-view');
	        if (mode === 'daily') {
	            daily.style.display = 'block';
	            monthly.style.display = 'none';
	        } else if (mode === 'monthly' || mode === 'quarterly' || mode === 'yearly') {
	            daily.style.display = 'none';
	            monthly.style.display = 'block';
	        } else {
	            daily.style.display = 'none';
	            monthly.style.display = 'none';
	        }
	    }

	    function syncReportParamVisibility() {
	        const modeSelect = document.getElementById('modeSelect');
	        if (!modeSelect) return;
	        const mode = modeSelect.value || 'monthly';
	        const wrappers = document.querySelectorAll('[data-report-param]');
	        wrappers.forEach(wrap => {
	            const target = wrap.getAttribute('data-report-param');
	            const active = target === mode;
	            wrap.style.display = active ? '' : 'none';
	            wrap.querySelectorAll('input, select').forEach(el => {
	                el.disabled = !active;
	            });
	        });
	    }

	    function clearFilters() {
	        const clinic = document.getElementById('clinicSelect');
	        const clinicQuery = clinic && clinic.value ? `?clinic=${encodeURIComponent(clinic.value)}` : '';
	        window.location.href = "{{ route('clinic_dashboard') }}" + clinicQuery;
	    }

	    // Default view based on mode
	    toggleView(viewMode);
	    const modeSelect = document.getElementById('modeSelect');
	    if (modeSelect) {
	        modeSelect.addEventListener('change', syncReportParamVisibility);
	        syncReportParamVisibility();
	    }

	    document.querySelectorAll('[data-quarter-value]').forEach(btn => {
	        btn.addEventListener('click', () => {
	            const val = btn.getAttribute('data-quarter-value');
	            const label = btn.getAttribute('data-quarter-label') || val;
	            const input = document.getElementById('quarterInput');
	            const toggle = document.getElementById('quarterDropdownBtn');
	            if (input) input.value = val;
	            if (toggle) toggle.textContent = label;
	        });
	    });
	    renderMonthlyChart();
	    bindProgramChartButtons();
	    renderProgramChart('bar');
    bindDiseaseChartButtons();
    renderDiseaseChart('bar');
	    bindKPChartButtons();
	    renderKPChart('bar');
	    renderPlannedChart();
	    bindMonthlySummaryButtons();
	    renderMonthlySummaryChart('bar');
	    bindPeriodGenderButtons();
	    renderPeriodGenderChart('bar');
	    bindMdChartButtons();
	    renderMdChart('bar');
	    bindAgeStatusButtons();
	    renderAgeStatusChart('bar');
    bindHourlyLoadButtons();
    renderHourlyLoadChart('line');
    bindDailySummaryButtons();
    renderDailySummaryChart('bar');
    bindDailyMdButtons();
    renderDailyMdChart('bar');
    bindDailyGenderButtons();
    renderDailyGenderChart('bar');
    bindDailyAgeStatusButtons();
    renderDailyAgeStatusChart('bar');
    bindDailyKpButtons();
    renderDailyKpChart('bar');
    bindDailyDiseaseButtons();
    renderDailyDiseaseChart('bar');
    bindDailyProgramButtons();
    renderDailyProgramChart('bar');
    bindDailyHourlyButtons();
    renderDailyHourlyChart('line');
    bindDailyClerkButtons();
    renderDailyClerkChart('bar');
    bindDailyClerkHoursButtons();
    renderDailyClerkHoursChart('line');
    bindMonthlyClerkButtons();
    renderMonthlyClerkChart('bar');
    bindMonthlyClerkHoursButtons();
    renderMonthlyClerkHoursChart('line');
    bindTimeInClinicTimelapseButton();
    renderTimeInClinicBandChart();

</script>
@endpush