@extends('layouts.app')

@push('styles')
    @include('dashboard.styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <style>
        #clinicCoverageMap {
            height: 1080px;
            width: 100%;
            border-radius: 14px;
            border: 1px solid #dbe4ef;
        }

        .clinic-map-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem 1rem;
            margin-top: 0.75rem;
        }

        .clinic-map-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
        }

        .clinic-map-dot {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 50%;
            display: inline-block;
        }

        .clinic-map-label {
            border: 0;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.92);
            color: #047857;
            font-weight: 700;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
        }

        .ward-map-label {
            border: 0;
            background: transparent;
            color: #111827;
            font-size: 11px;
            font-weight: 800;
            box-shadow: none;
            text-shadow:
                -1px -1px 0 rgba(255, 255, 255, 0.95),
                1px -1px 0 rgba(255, 255, 255, 0.95),
                -1px 1px 0 rgba(255, 255, 255, 0.95),
                1px 1px 0 rgba(255, 255, 255, 0.95);
            pointer-events: none;
        }

        .ward-map-label::before {
            display: none;
        }

        @media (max-width: 576px) {
            #clinicCoverageMap {
                height: 70vh;
                min-height: 420px;
            }
        }
    </style>
@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
    <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">This period will be available after the scheduled cache generation runs.</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() }}" {{ $reportMode === 'daily' ? '' : 'disabled' }}>
            </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 }}" {{ $reportMode === 'monthly' ? '' : 'disabled' }}>
            </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 }}" {{ $reportMode === 'quarterly' ? '' : 'disabled' }}>
			                <div class="dropdown">
			                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="quarterDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false" {{ $reportMode === 'quarterly' ? '' : 'disabled' }}>
			                        {{ $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 }}" {{ $reportMode === 'yearly' ? '' : 'disabled' }}>
            </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))
                @php
                    $timeInClinicPeriodSummary = [];
                    $timeInClinicPeriodTotal = 0;
                    foreach (($timeInClinicDailyBands['datasets'] ?? []) as $dataset) {
                        $bandTotal = array_sum(array_map('intval', $dataset['data'] ?? []));
                        $timeInClinicPeriodTotal += $bandTotal;
                        $timeInClinicPeriodSummary[] = [
                            'label' => $dataset['label'] ?? 'Unknown',
                            'value' => $bandTotal,
                            'color' => $dataset['backgroundColor'] ?? '#64748b',
                        ];
                    }
                    $timeInClinicPeriodSummary = array_values(array_filter($timeInClinicPeriodSummary, fn ($row) => ($row['value'] ?? 0) > 0));
                @endphp
	            <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.
	                            Hover a bar segment to see its count and percentage of that day. Grey means excluded IDs with no same-day dispensing record.
	                        </div>
                            @if ($timeInClinicPeriodTotal > 0)
                                <div class="mt-3">
                                    <div class="text-muted small mb-2">
                                        {{ ($viewMode ?? '') === 'monthly' ? 'Selected month' : 'Selected period' }} total:
                                        {{ number_format($timeInClinicPeriodTotal) }} records. Percentages below are calculated over this total.
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach ($timeInClinicPeriodSummary as $band)
                                            @php
                                                $bandPercent = $timeInClinicPeriodTotal > 0 ? round(($band['value'] / $timeInClinicPeriodTotal) * 100, 1) : 0;
                                            @endphp
                                            <span class="badge bg-light text-dark border" style="border-color: {{ $band['color'] }} !important;">
                                                <span style="display:inline-block;width:0.65rem;height:0.65rem;border-radius:999px;background:{{ $band['color'] }};margin-right:0.35rem;"></span>
                                                {{ $band['label'] }}: {{ number_format($band['value']) }} ({{ number_format($bandPercent, 1) }}%)
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
	                        <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

        @php
            $showClinicTimeComparison = in_array(($clinicConnection ?? null), ['ALL', 'MAM_A+B+C1'], true)
                && ($viewMode ?? null) === 'monthly'
                && !empty($clinicTimeInClinicComparison ?? []);
        @endphp
	    <details id="countsReferenceDetails" class="chart-card mt-4" {{ $showClinicTimeComparison ? 'open' : '' }}>
	        <summary class="card-header" style="cursor: pointer;">
	            <div>
	                <p class="eyebrow mb-1">Reference</p>
	                <h3 class="mb-0">How counts are calculated</h3>
	            </div>
	        </summary>
	        <div class="p-3 small text-muted">
	            <p class="mb-2">Use this section to check 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 class="mt-4 pt-3 border-top">
                    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-2">
                        <div>
                            <p class="eyebrow mb-1">Coverage map</p>
                            <h4 class="mb-1">Clinic areas in Myanmar</h4>
                            <p class="mb-0">
                                Base wards are from MIMU v9.4 ward boundaries and matched by Region, Township, and Ward from the registration data.
                            </p>
                        </div>
                    </div>
                    <div id="clinicCoverageMap" aria-label="Clinic coverage map for MAM_A, MAM_B, and MAM_C1" role="img"></div>
                    <div class="clinic-map-legend">
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#059669;"></span>MAM_A Clinic</span>
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#2563eb;"></span>MAM_B</span>
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#059669;"></span>MAM_C1 Clinic</span>
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#ec4899;"></span>MAM_A ID points</span>
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#facc15;"></span>MAM_B ID points</span>
                        <span class="clinic-map-legend-item"><span class="clinic-map-dot" style="background:#f87171;"></span>MAM_C1 ID points</span>
                    </div>
                    <p id="clinicCoverageMapStatus" class="mb-0 mt-2 small text-muted"></p>
                    <p class="mb-0 mt-2 small text-muted">
                        Send clinic-to-ward details next, and this map will be updated with exact assignment and additional Myanmar locations.
                    </p>
                </div>
                @if ($showClinicTimeComparison)
                    <div class="mt-4 pt-3 border-top">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-2">
                            <div>
                                <p class="eyebrow mb-1">{{ ($clinicConnection ?? null) === 'ALL' ? 'ALL clinics comparison' : (($clinicConnection ?? 'Clinic group') . ' comparison') }}</p>
	                                <h4 class="mb-1">Time-in-clinic percentage by clinic</h4>
	                                <p class="mb-0">
	                                    Stacked bars compare each clinic's time-in-clinic percentage for the selected month.
	                                    Consultation total and MD counts are shown below for context only.
	                                </p>
	                            </div>
	                            <span class="badge bg-light text-dark">{{ $selectedMonthLabel }}</span>
	                        </div>
	                        <div style="height: 360px;">
	                            <canvas id="clinicTimeComparisonChart" aria-label="Clinic time-in-clinic comparison chart" role="img"></canvas>
	                        </div>
                            <div class="table-responsive mt-3">
                                <table class="table table-sm align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th>Clinic</th>
                                            <th class="text-end">Consultations</th>
                                            <th class="text-end">MD workload visits</th>
                                            <th class="text-end">MD count</th>
                                            <th class="text-end">Time-in-clinic records</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($clinicTimeInClinicComparison as $clinicRow)
                                            <tr>
                                                <td>{{ $clinicRow['clinic'] ?? '' }}</td>
                                                <td class="text-end">{{ number_format($clinicRow['consultations'] ?? 0) }}</td>
                                                <td class="text-end">{{ number_format($clinicRow['mdVisits'] ?? 0) }}</td>
                                                <td class="text-end">{{ number_format($clinicRow['mdProviders'] ?? 0) }}</td>
                                                <td class="text-end">{{ number_format($clinicRow['timeInClinicTotal'] ?? 0) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
	                    </div>
	                @endif
	        </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://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<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 selectedClinicForMap = @json(strtoupper((string) request('clinic', ($clinicConnection ?? ''))));
    const selectedYearForMap = @json((string) request('year', now()->year));
    const yearlyMapPointsEndpoint = @json(route('clinic_dashboard.yearly_map_points'));
    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 clinicTimeInClinicComparison = @json($clinicTimeInClinicComparison ?? []);
    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 clinicTimeComparisonChart = null;
    let timeInClinicTimelapseTimer = null;
    let timeInClinicTimelapseRunning = false;
    let timeInClinicTimelapseCompleted = false;
    let timeInClinicTimelapseIndex = -1;
    const timeInClinicTimelapseSpeedMs = 180;
    let focusClinicCoverageMap = null;

    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',
	        }));
	        const dayTotalAt = (index) => datasets.reduce((sum, ds) => sum + (Number(ds.data?.[index]) || 0), 0);
	        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: {},
	                    tooltip: {
	                        callbacks: {
	                            label: (context) => {
	                                const count = Number(context.parsed?.y ?? context.raw ?? 0) || 0;
	                                const total = dayTotalAt(context.dataIndex);
	                                const percent = total > 0 ? ((count / total) * 100).toFixed(1) : '0.0';
	                                return `${context.dataset.label}: ${count.toLocaleString()} (${percent}% of day)`;
	                            },
	                            footer: (items) => {
	                                if (!items.length) return '';
	                                const total = dayTotalAt(items[0].dataIndex);
	                                return `Day total: ${total.toLocaleString()}`;
	                            },
	                        },
	                    },
	                },
	                scales: {
	                    x: { stacked: true, ticks: { maxRotation: 60, minRotation: 45 } },
	                    y: { beginAtZero: true, stacked: true, title: { display: true, text: 'Count' } },
                },
            },
        });
	        setTimeInClinicTimelapseButtonState();
	    }

        function renderClinicTimeComparisonChart() {
            if (!Array.isArray(clinicTimeInClinicComparison) || clinicTimeInClinicComparison.length === 0) return;
            const canvas = document.getElementById('clinicTimeComparisonChart');
            if (!canvas) return;
            if (clinicTimeComparisonChart) {
                clinicTimeComparisonChart.destroy();
                clinicTimeComparisonChart = null;
            }

            const clinics = clinicTimeInClinicComparison.map(row => row.clinic);
            const bandLabels = [];
            const bandColors = {};
            clinicTimeInClinicComparison.forEach(row => {
                (row.bands || []).forEach(band => {
                    if (!bandLabels.includes(band.label)) {
                        bandLabels.push(band.label);
                        bandColors[band.label] = band.color || '#64748b';
                    }
                });
            });

            const datasets = bandLabels.map(label => ({
                label,
                data: clinicTimeInClinicComparison.map(row => {
                    const band = (row.bands || []).find(item => item.label === label);
                    return Number(band?.percent || 0);
                }),
                rawCounts: clinicTimeInClinicComparison.map(row => {
                    const band = (row.bands || []).find(item => item.label === label);
                    return Number(band?.value || 0);
                }),
                backgroundColor: bandColors[label],
                borderColor: bandColors[label],
                borderWidth: 1,
                stack: 'time-percent',
            }));

            clinicTimeComparisonChart = new Chart(canvas.getContext('2d'), {
                type: 'bar',
                data: { labels: clinics, datasets },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { position: 'bottom' },
                        valueLabels: false,
                        stackTotals: false,
                        tooltip: {
                            callbacks: {
                                label: (context) => {
                                    const count = Number(context.dataset.rawCounts?.[context.dataIndex] || 0);
                                    const percent = Number(context.raw || 0).toFixed(1);
                                    return `${context.dataset.label}: ${percent}% (${count.toLocaleString()} records)`;
                                },
                                footer: (items) => {
                                    if (!items.length) return '';
                                    const row = clinicTimeInClinicComparison[items[0].dataIndex] || {};
                                    return [
                                        `Consultations: ${(Number(row.consultations) || 0).toLocaleString()}`,
                                        `MD workload visits: ${(Number(row.mdVisits) || 0).toLocaleString()}`,
                                        `MD count: ${(Number(row.mdProviders) || 0).toLocaleString()}`,
                                    ];
                                },
                            },
                        },
                    },
                    scales: {
                        x: { stacked: true },
                        y: {
                            beginAtZero: true,
                            stacked: true,
                            max: 100,
                            title: { display: true, text: 'Time-in-clinic share (%)' },
                            ticks: { callback: value => `${value}%` },
                        },
                    },
                },
            });
        }

	    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;
	            });
                const quarterBtn = wrap.querySelector('#quarterDropdownBtn');
                if (quarterBtn) {
                    quarterBtn.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;
	    }

        function parseWardCode(wardLabel) {
            const text = String(wardLabel || '').toLowerCase();
            const match = text.match(/no\s*\((\d+)\)|^(\d+)\s*w/);
            const number = match ? (match[1] || match[2]) : null;
            return number ? `${Number(number)}w` : null;
        }

        function normalizeMapText(value) {
            return String(value || '').trim().toLowerCase().replace(/\s+/g, ' ');
        }

        function isHlaingtharyaTownship(value) {
            const text = normalizeMapText(value)
                .replace('hlaingtharyar', 'hlaingtharya')
                .replace('hlaing thar yar', 'hlaingtharya');
            return text === 'hlaingtharya'
                || text === 'hlaingtharya (east)'
                || text === 'hlaingtharya (west)';
        }

        function hashSeed(input) {
            let hash = 2166136261;
            const text = String(input || '');
            for (let i = 0; i < text.length; i++) {
                hash ^= text.charCodeAt(i);
                hash = Math.imul(hash, 16777619);
            }
            return hash >>> 0;
        }

        function seededRandom(seed) {
            let t = seed >>> 0;
            return function () {
                t += 0x6D2B79F5;
                let x = Math.imul(t ^ (t >>> 15), 1 | t);
                x ^= x + Math.imul(x ^ (x >>> 7), 61 | x);
                return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
            };
        }

        function pointInRing(point, ring) {
            const x = point[0];
            const y = point[1];
            let inside = false;
            for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
                const xi = ring[i][0], yi = ring[i][1];
                const xj = ring[j][0], yj = ring[j][1];
                const intersect = ((yi > y) !== (yj > y))
                    && (x < ((xj - xi) * (y - yi)) / ((yj - yi) || Number.EPSILON) + xi);
                if (intersect) inside = !inside;
            }
            return inside;
        }

        function pointInPolygonGeometry(point, geometry) {
            if (!geometry || !geometry.type || !geometry.coordinates) return false;
            const checkPolygon = (polygon) => {
                if (!Array.isArray(polygon) || polygon.length === 0) return false;
                const outer = polygon[0];
                if (!pointInRing(point, outer)) return false;
                for (let i = 1; i < polygon.length; i++) {
                    if (pointInRing(point, polygon[i])) {
                        return false;
                    }
                }
                return true;
            };

            if (geometry.type === 'Polygon') {
                return checkPolygon(geometry.coordinates);
            }
            if (geometry.type === 'MultiPolygon') {
                return geometry.coordinates.some(poly => checkPolygon(poly));
            }
            return false;
        }

        function geometryBounds(geometry) {
            let minLng = Infinity, minLat = Infinity, maxLng = -Infinity, maxLat = -Infinity;
            const visit = (coords) => {
                if (!Array.isArray(coords)) return;
                if (typeof coords[0] === 'number' && typeof coords[1] === 'number') {
                    const lng = coords[0], lat = coords[1];
                    if (lng < minLng) minLng = lng;
                    if (lng > maxLng) maxLng = lng;
                    if (lat < minLat) minLat = lat;
                    if (lat > maxLat) maxLat = lat;
                    return;
                }
                coords.forEach(visit);
            };
            visit(geometry?.coordinates || []);
            if (!isFinite(minLng) || !isFinite(minLat) || !isFinite(maxLng) || !isFinite(maxLat)) return null;
            return { minLng, minLat, maxLng, maxLat };
        }

        function fallbackCentroid(geometry) {
            const pickRing = (coords) => {
                if (!Array.isArray(coords)) return [];
                if (typeof coords?.[0]?.[0] === 'number') return coords;
                if (Array.isArray(coords[0])) return pickRing(coords[0]);
                return [];
            };
            const ring = geometry?.type === 'Polygon'
                ? pickRing(geometry.coordinates?.[0] || [])
                : pickRing((geometry.coordinates?.[0] || [])[0] || []);
            if (!Array.isArray(ring) || ring.length === 0) return [16.85, 96.0];
            let sumLng = 0;
            let sumLat = 0;
            ring.forEach(coord => {
                sumLng += coord[0];
                sumLat += coord[1];
            });
            const n = ring.length || 1;
            return [sumLat / n, sumLng / n];
        }

        function randomPointInGeometry(geometry, seedLabel) {
            const bounds = geometryBounds(geometry);
            if (!bounds) return fallbackCentroid(geometry);
            const rand = seededRandom(hashSeed(seedLabel));
            for (let attempt = 0; attempt < 100; attempt++) {
                const lng = bounds.minLng + (bounds.maxLng - bounds.minLng) * rand();
                const lat = bounds.minLat + (bounds.maxLat - bounds.minLat) * rand();
                if (pointInPolygonGeometry([lng, lat], geometry)) {
                    return [lat, lng];
                }
            }
            return fallbackCentroid(geometry);
        }

        function setClinicCoverageMapStatus(message) {
            const el = document.getElementById('clinicCoverageMapStatus');
            if (!el) return;
            el.textContent = message || '';
        }

        function initClinicCoverageMap() {
            const mapEl = document.getElementById('clinicCoverageMap');
            if (!mapEl || typeof L === 'undefined') return;

            const yearlyMapClinics = new Set(['MAM_A', 'MAM_B', 'MAM_C1', 'MAM_A+B+C1']);
            const isYearlyMapClinic = viewMode === 'yearly' && yearlyMapClinics.has(selectedClinicForMap);
            setClinicCoverageMapStatus(isYearlyMapClinic
                ? `Yearly ${selectedClinicForMap} mapping is enabled for year ${selectedYearForMap}.`
                : 'Ward boundary map is shown. ID point mapping appears only for supported clinics in Yearly mode.');

            const map = L.map(mapEl, {
                zoomControl: true,
                scrollWheelZoom: false,
                preferCanvas: true
            });
            const sharedPointRenderer = L.canvas({ padding: 0.5 });
            const mamAClinicLatLng = [16.891346162153656, 96.0529818564468];
            const mamCClinicLatLng = [16.8768690, 96.0438140];
            const mamBClinicLatLng = [16.88, 96.03];
            const patientPointColorByClinic = {
                MAM_A: '#ec4899',
                MAM_B: '#facc15',
                MAM_C1: '#f87171'
            };
            const selectedClinicLatLng = {
                MAM_A: mamAClinicLatLng,
                MAM_B: mamBClinicLatLng,
                MAM_C1: mamCClinicLatLng,
                'MAM_A+B+C1': [16.883, 96.043]
            };

            focusClinicCoverageMap = () => {
                setTimeout(() => {
                    map.invalidateSize(true);
                    const clinicLatLng = selectedClinicLatLng[selectedClinicForMap];
                    if (clinicLatLng) {
                        map.setView(clinicLatLng, 14, { animate: true });
                    }
                }, 120);
            };

            const detailsEl = mapEl.closest('details');
            if (detailsEl) {
                detailsEl.addEventListener('toggle', () => {
                    if (detailsEl.open) {
                        setTimeout(() => map.invalidateSize(true), 80);
                    }
                });
            }

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const clinicDefs = [
                { code: 'MAM_A', color: '#059669', marker: mamAClinicLatLng, label: 'MAM_A Clinic' },
                { code: 'MAM_B', color: '#2563eb', marker: mamBClinicLatLng, label: 'MAM_B (main: Hlaingtharya East/West)' },
                { code: 'MAM_C1', color: '#059669', marker: mamCClinicLatLng, label: 'MAM_C Clinic' }
            ];

            const wardsGeoJsonUrl = "{{ asset('data/clinic-coverage-wards.geojson') }}";

            fetch(wardsGeoJsonUrl)
                .then(resp => {
                    if (!resp.ok) throw new Error('Unable to load ward boundary data.');
                    return resp.json();
                })
                .then(geojson => {
	                    const layerBounds = L.latLngBounds();
	                    const wardGeomByCode = {};
	                    const wardTownshipByCode = {};
                        const restrictToHlaingtharya = selectedClinicForMap === 'MAM_A+B+C1';
	                    const baseWardLayer = L.geoJSON(geojson, {
                            filter: (feature) => {
                                if (!restrictToHlaingtharya) return true;
                                const ts = String(feature?.properties?.TS || '');
                                return isHlaingtharyaTownship(ts);
                            },
	                        style: {
                            color: '#475569',
                            weight: 1.1,
                            fillColor: '#94a3b8',
                            fillOpacity: 0.25
                        },
                        onEachFeature: (feature, layer) => {
                            const props = feature?.properties || {};
                            const ward = props.WARD || 'Ward';
                            const ts = props.TS || 'Township';
                            const pcode = props.WARD_PCODE || 'N/A';
                            const wardCode = parseWardCode(ward);
                            if (wardCode) {
                                wardGeomByCode[wardCode] = feature.geometry;
                                wardTownshipByCode[wardCode] = ts;
                            }
                            layer.bindPopup(`<strong>${ward}</strong><br>${ts}<br>PCode: ${pcode}`);
                            layer.bindTooltip(`${ward}<br>${ts}`, {
                                permanent: true,
                                direction: 'center',
                                className: 'ward-map-label'
                            });
                        }
                    }).addTo(map);

                    const clinicsLayer = L.layerGroup();
                    clinicDefs.forEach(clinic => {
                        const marker = L.circleMarker(clinic.marker, {
                            radius: 6,
                            color: '#ffffff',
                            weight: 1.2,
                            fillColor: clinic.color,
                            fillOpacity: 1
                        });
                        marker.bindPopup(`<strong>${clinic.code}</strong><br>${clinic.label}`);
                        marker.addTo(clinicsLayer);
                        if (clinic.code === 'MAM_A' || clinic.code === 'MAM_C1') {
                            marker.bindTooltip(clinic.label, {
                                permanent: true,
                                direction: 'top',
                                offset: [0, -8],
                                className: 'clinic-map-label'
                            });
                        }
                    });
                    clinicsLayer.addTo(map);

                    const fitBoundsNow = () => {
                        requestAnimationFrame(() => {
                            setTimeout(() => {
                                map.invalidateSize(true);
                                if (layerBounds.isValid()) {
                                    map.fitBounds(layerBounds.pad(0.15), { maxZoom: 14 });
                                } else {
                                    map.setView([16.88, 96.04], 12);
                                }
                                setTimeout(() => map.invalidateSize(true), 120);
                            }, 60);
                        });
                    };

                    baseWardLayer.eachLayer(layer => {
                        if (layer.getBounds) {
                            layerBounds.extend(layer.getBounds());
                        }
                    });
                    clinicsLayer.eachLayer(layer => {
                        if (layer.getLatLng) {
                            layerBounds.extend(layer.getLatLng());
                        }
                    });

                    if (!isYearlyMapClinic) {
                        fitBoundsNow();
                        return;
                    }

                    const mapUrl = `${yearlyMapPointsEndpoint}?clinic=${encodeURIComponent(selectedClinicForMap)}&mode=yearly&year=${encodeURIComponent(selectedYearForMap)}`;
                    fetch(mapUrl, { credentials: 'same-origin' })
                        .then(resp => {
                            if (!resp.ok) throw new Error('Unable to load yearly ID points.');
                            return resp.json();
                        })
                        .then(payload => {
                            const meta = payload?.meta || {};
                            const records = Array.isArray(payload?.records) ? payload.records : [];
                            const pointsLayer = L.layerGroup();
                            let plotted = 0;
                            let unmatched = 0;

                            records.forEach(record => {
                                const wardCode = String(record?.ward || '').toLowerCase();
                                const id = String(record?.id || '').trim();
                                if (!id) return;
                                const recordClinic = String(record?.clinic || selectedClinicForMap || '').toUpperCase();
                                const recordTownship = String(record?.township || '').trim();
                                const boundaryTownship = wardTownshipByCode[wardCode] || '';
                                const insideHlaingtharya = isHlaingtharyaTownship(recordTownship || boundaryTownship);
                                const latFromExcel = Number(record?.lat);
                                const lngFromExcel = Number(record?.lng);
                                const hasExcelLatLng = Number.isFinite(latFromExcel) && Number.isFinite(lngFromExcel);
                                const geom = wardGeomByCode[wardCode];
                                if (!hasExcelLatLng && !geom) {
                                    unmatched++;
                                    return;
                                }
                                const latLng = hasExcelLatLng
                                    ? [latFromExcel, lngFromExcel]
                                    : randomPointInGeometry(geom, `${id}|${wardCode}|${selectedYearForMap}`);
                                const clinicPointColor = patientPointColorByClinic[recordClinic] || (insideHlaingtharya ? '#ec4899' : '#ff7a00');
                                const clinicPointOpacity = patientPointColorByClinic[recordClinic] ? 0.88 : (insideHlaingtharya ? 0.72 : 0.9);
                                const point = L.circleMarker(latLng, {
                                    radius: insideHlaingtharya ? 1.6 : 4.2,
                                    stroke: false,
                                    fillColor: clinicPointColor,
                                    fillOpacity: clinicPointOpacity,
                                    renderer: sharedPointRenderer
                                });
                                point.bindTooltip(`ID: ${id}<br>Clinic: ${recordClinic || 'N/A'}<br>Township: ${recordTownship || boundaryTownship || 'N/A'}<br>Ward: ${wardCode}<br>Source: ${hasExcelLatLng ? 'Excel E/F' : 'Ward-random fallback'}`, { sticky: true, direction: 'top' });
                                pointsLayer.addLayer(point);
                                layerBounds.extend(latLng);
                                plotted++;
                            });

                            pointsLayer.addTo(map);
                            const excludedNotInYear = Number(meta.excluded_not_in_year || 0);
                            setClinicCoverageMapStatus(
                                `Yearly ${selectedClinicForMap} points plotted: ${plotted.toLocaleString()} IDs. ` +
                                `Excluded (not in yearly clinic PID set): ${excludedNotInYear.toLocaleString()} IDs. ` +
                                (unmatched > 0 ? `Unmatched ward boundary: ${unmatched.toLocaleString()} IDs.` : 'All ward codes matched.')
                            );
                            fitBoundsNow();
                        })
                        .catch(() => {
                            setClinicCoverageMapStatus(`Yearly ${selectedClinicForMap} point data failed to load. Ward boundaries are still shown.`);
                            fitBoundsNow();
                        });
                })
                .catch(() => {
                    map.setView([19.75, 96.10], 6);
                    L.marker([19.75, 96.10]).addTo(map)
                        .bindPopup('Coverage boundary data not loaded. Check public/data/clinic-coverage-wards.geojson.')
                        .openPopup();
                    setClinicCoverageMapStatus('Ward boundary data failed to load.');
                });
        }

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

        const countsReferenceDetails = document.getElementById('countsReferenceDetails');
        if (countsReferenceDetails) {
            countsReferenceDetails.addEventListener('toggle', () => {
                if (countsReferenceDetails.open && typeof focusClinicCoverageMap === 'function') {
                    focusClinicCoverageMap();
                }
            });
            const countsSummary = countsReferenceDetails.querySelector('summary');
            if (countsSummary) {
                countsSummary.addEventListener('click', () => {
                    setTimeout(() => {
                        if (countsReferenceDetails.open && typeof focusClinicCoverageMap === 'function') {
                            focusClinicCoverageMap();
                        }
                    }, 180);
                });
            }
        }

	    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();
    renderClinicTimeComparisonChart();
    initClinicCoverageMap();

</script>
@endpush