@extends('layouts.app')

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

@section('content')
<div class="container-fluid px-3 px-md-4 pb-5 dashboard-shell">
    <div class="dash-hero mb-3">
        <div>
            <p class="eyebrow text-uppercase mb-1">Clinic Leader Dr.</p>
            <h1 class="mb-1">Clinic's 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>
        </div>
        <div class="hero-panel">
            <span class="hero-subtle">Live spotlight</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">
        <input type="hidden" name="mode" id="modeInput" value="{{ $viewMode ?? 'none' }}">
        @php
            $selectedClinic = $clinicConnection ?? config('database.default');
            $currentYear = now()->year;
            $selectedYearUi = request('year', $currentYear);
            $quarters = [
                "{$currentYear}-Q1" => "Q1 ({$currentYear} Jan-Mar)",
                "{$currentYear}-Q2" => "Q2 ({$currentYear} Apl-Jun)",
                "{$currentYear}-Q3" => "Q3 ({$currentYear} Jul-Sep)",
                "{$currentYear}-Q4" => "Q4 ({$currentYear} Oct-Dec)",
            ];
        @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" onchange="document.getElementById('filterForm').submit();">
                    @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">
                <input type="date" class="form-control form-control-sm" name="date" value="{{ request('date') ?? now()->toDateString() }}">
                <button type="button" id="btnDaily" class="btn btn-primary btn-sm toggle-view-btn" onclick="setMode('daily','btnDaily')">Daily check</button>
            </div>
            <div class="col-auto d-flex align-items-center gap-2">
                <input type="month" class="form-control form-control-sm" name="month" value="{{ $monthInputValue ?? $selectedMonth }}">
                <button type="button" id="btnMonthly" class="btn btn-outline-primary btn-sm toggle-view-btn" onclick="setMode('monthly','btnMonthly')">Monthly report</button>
            </div>
            <div class="col-auto d-flex align-items-center gap-2">
                <select name="quarter" class="form-select form-select-sm">
                    @foreach($quarters as $val => $label)
                        <option value="{{ $val }}" {{ ($selectedQuarter ?? '') === $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                <button type="button" id="btnQuarterly" class="btn btn-outline-primary btn-sm toggle-view-btn" onclick="setMode('quarterly','btnQuarterly')">Quarterly report</button>
            </div>
            <div class="col-auto d-flex align-items-center gap-2">
                <input type="number" class="form-control form-control-sm" name="year" min="{{ $currentYear - 5 }}" max="{{ $currentYear + 1 }}" value="{{ $selectedYearUi }}">
                <button type="button" id="btnYearly" class="btn btn-outline-primary btn-sm toggle-view-btn" onclick="setMode('yearly','btnYearly')">Yearly report</button>
            </div>
            <div class="col-auto d-flex align-items-center gap-2">
                <div class="form-check form-switch d-flex align-items-center gap-2 mb-0">
                    <input class="form-check-input" type="checkbox" id="liveToggle" name="live" value="1" {{ request('live') ? 'checked' : '' }}>
                    <label class="form-check-label small text-muted" for="liveToggle">Live</label>
                </div>
                <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 ?? '');
            @endphp
            <div class="col-auto d-flex align-items-center gap-2">
                <a class="btn btn-success btn-sm {{ empty($exportMonthKey) ? 'disabled' : '' }}"
                   href="{{ 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 {{ empty($exportQuarterKey) ? 'disabled' : '' }}"
                   href="{{ 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 class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily summary chart type">
                            <button type="button" class="btn btn-outline-secondary ds-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary ds-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary ds-chart-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary ds-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailySummaryChart" aria-label="Daily service summary chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif
    <div class="row g-3 mt-3">
        <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 → last counselling/dispensing touch</div>
                    </div>
                    <div class="text-muted small">
                        Calculation: start at reception check-in (`created_at` in followup_generals); end at the latest same-day touch in counsellor_records, consumptions, or any lab module. Averages/median/p90 and long-wait (&gt;90 mins) use those intervals per unique PID.
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 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>
    <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>
    <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">Daily report</p>
                        <h3>Data entry workload (day)</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Daily clerk chart type">
                            <button type="button" class="btn btn-outline-secondary daily-clerk-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-clerk-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-clerk-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary daily-clerk-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailyClerkChart" aria-label="Daily 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">Daily report</p>
                        <h3>Data entry 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 clerk hours chart type">
                            <button type="button" class="btn btn-outline-secondary daily-clerk-hours-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary daily-clerk-hours-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary daily-clerk-hours-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="dailyClerkHoursChart" aria-label="Daily data entry populated hours chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div id="monthly-view" style="{{ in_array(($viewMode ?? 'none'), ['monthly','quarterly']) ? '' : 'display:none;' }}">
    @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">{{ $viewMode === 'quarterly' ? 'Quarterly report' : 'Monthly report' }}</p>
                        <h3>{{ $viewMode === 'quarterly' ? 'Service summary (Quarter)' : 'Service summary' }}</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Monthly summary chart type">
                            <button type="button" class="btn btn-outline-secondary ms-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary ms-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary ms-chart-btn" data-chart-type="pie">Pie</button>
                            <button type="button" class="btn btn-outline-secondary ms-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 320px;">
                    <canvas id="monthlySummaryChart" aria-label="Monthly service summary chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row g-3 mt-3" style="{{ in_array(($viewMode ?? 'none'), ['monthly','quarterly']) ? '' : 'display:none;' }}">
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">{{ $viewMode === 'quarterly' ? 'Quarterly 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 class="col-12 col-sm-6 col-lg-8">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">{{ $viewMode === 'quarterly' ? 'Quarterly report' : 'Monthly report' }}</p>
                        <h3>Service populated hours</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="btn-group btn-group-sm" role="group" aria-label="Hourly load chart type">
                            <button type="button" class="btn btn-outline-secondary hours-chart-btn" data-chart-type="line">Line</button>
                            <button type="button" class="btn btn-outline-secondary hours-chart-btn" data-chart-type="bar">Bar</button>
                            <button type="button" class="btn btn-outline-secondary hours-chart-btn" data-chart-type="funnel">Funnel</button>
                        </div>
                    </div>
                </div>
                <div style="height: 260px;">
                    <canvas id="hourlyLoadChart" aria-label="Service populated hours chart" role="img"></canvas>
                </div>
            </div>
        </div>
    </div>
    @if (!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 (!empty($consultationSummary) && $isPeriod)
    <div class="row g-3 mt-3">
        <div class="col-12 col-lg-4">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Monthly report</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>
        <div class="col-12 col-lg-8">
            <div class="chart-card">
                <div class="card-header">
                    <div>
                        <p class="eyebrow mb-1">Monthly report</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 class="row g-2">
                    <div class="col-12">
                        <div style="height: 280px;">
                            <canvas id="kpChart" aria-label="Key populations chart" role="img"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (!empty($programCategories))
    <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">Monthly report</p>
                        <h3>Program workloads</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <span class="badge bg-primary">PHA, PrEP, PMTCT, ANC, FP, NCD, TB, Feeding, Cervical Ca</span>
                        <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 class="row g-2">
                    <div class="col-12">
                        <div style="height: 320px;">
                            <canvas id="programChart" aria-label="Program workloads chart" role="img"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if (!empty($diseaseCategories))
    <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">Monthly report</p>
                        <h3>General diseases ({{ $selectedMonthLabel }})</h3>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <span class="badge bg-primary">From patient diagnosis</span>
                        <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 class="row g-2">
                    <div class="col-12">
                        <div style="height: 320px;">
                            <canvas id="diseaseChart" aria-label="General diseases chart" role="img"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <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">Monthly report</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
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const valueLabelsPlugin = {
        id: 'valueLabels',
        afterDatasetsDraw(chart, args, pluginOptions) {
            const opts = chart.config.options || {};
            const vlOpts = (opts.plugins && opts.plugins.valueLabels !== undefined)
                ? opts.plugins.valueLabels
                : pluginOptions;
            if (chart.config.type !== 'bar' || opts.isFunnel || vlOpts === false || (vlOpts && vlOpts.display === false)) return;
            const {ctx} = chart;
            ctx.save();
            const color = (vlOpts && vlOpts.color) ? vlOpts.color : '#0f172a';
            const font = (vlOpts && vlOpts.font) ? vlOpts.font : '600 11px "Space Grotesk", "Inter", sans-serif';
            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;
                    ctx.fillText(text, position.x, position.y - 6);
                });
            });
            ctx.restore();
        }
    };
    Chart.register(valueLabelsPlugin);
    Chart.defaults.plugins.valueLabels = {
        display: false,
        color: '#0f172a',
        font: '600 11px "Space Grotesk", "Inter", sans-serif'
    };
    const monthlyMdData = @json($monthlyMdTrend);
    const gridColor = 'rgba(15, 23, 42, 0.08)';
    const monthlyMdEmpty = document.getElementById('monthlyMdEmpty');
    const viewMode = @json($viewMode ?? 'none');
    const isPeriodMode = viewMode === 'monthly' || viewMode === 'quarterly' || viewMode === 'yearly';
    let monthlyMdChart = null;
    function renderMonthlyChart() {
        // deprecated: MD chart now rendered via renderMdChart
        return;
    }

    // Program chart controls
    const programData = @json($programCategories ?? []);
    const diseaseData = @json($diseaseCategories ?? []);
    const kpData = [
        { label: 'Pregnant Mother', value: {{ $consultationSummary['preg_mother'] ?? 0 }} },
        { label: 'Spouse of pregnant mother', value: {{ $consultationSummary['spouse_preg'] ?? 0 }} },
        { label: 'Exposed Children', value: {{ $consultationSummary['exposed_children'] ?? 0 }} },
        { label: 'Low Risk', value: {{ $consultationSummary['low_risk'] ?? 0 }} },
        { label: 'FSW', value: {{ $consultationSummary['fsw'] ?? 0 }} },
        { label: 'Client of FSW', value: {{ $consultationSummary['client_fsw'] ?? 0 }} },
        { label: 'MSM', value: {{ $consultationSummary['msm'] ?? 0 }} },
        { label: 'PWUD', value: {{ $consultationSummary['pwud'] ?? 0 }} },
        { label: 'PWID', value: {{ $consultationSummary['idu'] ?? 0 }} },
        { label: 'TG', value: {{ $consultationSummary['tg'] ?? 0 }} },
        { label: 'Partner of KP', value: {{ $consultationSummary['partner_kp'] ?? 0 }} },
        { label: 'Partner of PLHIV', value: {{ $consultationSummary['partner_plhiv'] ?? 0 }} },
        { label: 'Special Groups', value: {{ $consultationSummary['special_groups'] ?? 0 }} },
        { label: 'Migrant Population', value: {{ $consultationSummary['migrant_population'] ?? 0 }} },
        { label: 'Non-KP', value: {{ $consultationSummary['non_kp'] ?? 0 }} },
    ];
    const plannedData = { planned: {{ $planned ?? 0 }}, unplanned: {{ $unplan ?? 0 }} };
    const monthlySummaryData = @json($monthlyChecks ?? []);
    const dailySummaryData = @json($dailyChecks ?? []);
    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 dailyHourlyChart = null;
    let dailyClerkChart = null;
    let monthlyClerkChart = null;
    let dailyClerkHoursChart = null;
    let monthlyClerkHoursChart = null;
    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.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 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: dailyHourlyLoad.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 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');
        const btns = document.querySelectorAll('.toggle-view-btn');
        if (mode === 'daily') {
            daily.style.display = 'block';
            monthly.style.display = 'none';
            btns.forEach(b => {
                const isDaily = b.textContent.includes('Daily');
                b.classList.toggle('btn-primary', isDaily);
                b.classList.toggle('btn-outline-primary', !isDaily);
            });
        } else if (mode === 'monthly' || mode === 'quarterly' || mode === 'yearly') {
            daily.style.display = 'none';
            monthly.style.display = 'block';
            btns.forEach(b => {
                const isMonthly = b.textContent.includes('Monthly');
                const isQuarterly = b.textContent.includes('Quarterly');
                const isYearly = b.textContent.includes('Yearly');
                const active = mode === 'monthly' ? isMonthly : (mode === 'quarterly' ? isQuarterly : isYearly);
                b.classList.toggle('btn-primary', active);
                b.classList.toggle('btn-outline-primary', !active);
            });
        } else {
            daily.style.display = 'none';
            monthly.style.display = 'none';
            btns.forEach(b => {
                b.classList.remove('btn-primary');
                b.classList.add('btn-outline-primary');
            });
        }
    }

    function disableOtherToggles(exceptId) {
        const btns = document.querySelectorAll('.toggle-view-btn');
        btns.forEach(b => {
            if (b.id !== exceptId) {
                b.disabled = true;
            }
        });
    }

    function setMode(mode, btnId) {
        const modeInput = document.getElementById('modeInput');
        const form = document.getElementById('filterForm');
        if (!modeInput || !form) return;
        modeInput.value = mode;
        if (btnId) disableOtherToggles(btnId);
        form.submit();
    }

    function clearFilters() {
        window.location.href = "{{ route('clinic_dashboard') }}";
    }

    // Default view based on mode
    toggleView(viewMode);
    renderMonthlyChart();
    bindProgramChartButtons();
    renderProgramChart('bar');
    bindDiseaseChartButtons();
    renderDiseaseChart('bar');
    bindKPChartButtons();
    renderKPChart('bar');
    renderPlannedChart();
    bindMonthlySummaryButtons();
    renderMonthlySummaryChart('bar');
    bindMdChartButtons();
    renderMdChart('bar');
    bindAgeStatusButtons();
    renderAgeStatusChart('bar');
    bindHourlyLoadButtons();
    renderHourlyLoadChart('line');
    bindDailySummaryButtons();
    renderDailySummaryChart('bar');
    bindDailyMdButtons();
    renderDailyMdChart('bar');
    bindDailyHourlyButtons();
    renderDailyHourlyChart('line');
    bindDailyClerkButtons();
    renderDailyClerkChart('bar');
    bindDailyClerkHoursButtons();
    renderDailyClerkHoursChart('line');
    bindMonthlyClerkButtons();
    renderMonthlyClerkChart('bar');
    bindMonthlyClerkHoursButtons();
    renderMonthlyClerkHoursChart('line');
</script>
@endpush