@php
$points=$chart['points'];
$maximum=max([1,...array_column($points,'value')]);
$hasValues=array_sum(array_column($points,'value'))>0;
$decimals=$chart['precision'] ?? (!empty($chart['money']) ? 2 : 0);
@endphp
<article class="analytics-chart card">
<header><h2>{{ $chart['title'] }}</h2><p>{{ $chart['note'] ?? '' }}</p></header>
@if(!$hasValues)
<div class="chart-empty"><span aria-hidden="true">◌</span><strong>No activity to display</strong><p>Try another period or facility. No sample data is shown.</p></div>
@elseif($chart['type']==='heatmap')
<div class="residence-tiles" role="list" aria-label="{{ $chart['title'] }}">
@foreach($points as $point)<div class="residence-tile" role="listitem" style="background:rgba(8,126,134,{{ 0.12+0.75*$point['value']/$maximum }})"><strong>{{ $point['value'] }}</strong><span>{{ $point['label'] }}</span></div>@endforeach
</div><p class="small text-muted">Lighter → darker: fewer → more patients. Cells are residence categories, not geographic positions.</p>
@elseif($chart['type']==='geoheat')
@php
$minX=min(array_column($points,'x'));$maxX=max(array_column($points,'x'))+1;
$minY=min(array_column($points,'y'));$maxY=max(array_column($points,'y'))+1;
$width=max(1,$maxX-$minX);$height=max(1,$maxY-$minY);
@endphp
<svg viewBox="0 0 620 300" class="residence-grid" role="img" aria-label="{{ $chart['title'] }}. North is up. Aggregated coordinate cells; no individual locations.">
<rect x="65" y="20" width="510" height="230" fill="#edf4f5" stroke="#c9dadd"/>
@foreach($points as $point)
<rect x="{{ 65+510*($point['x']-$minX)/$width }}" y="{{ 20+230*($maxY-$point['y']-1)/$height }}" width="{{ 510/$width }}" height="{{ 230/$height }}" fill="#087e86" fill-opacity="{{ 0.15+0.85*$point['value']/$maximum }}" stroke="white" stroke-width=".5" tabindex="0"><title>{{ $point['label'] }}: {{ $point['value'] }} patients</title></rect>
@endforeach
<text x="65" y="275" class="chart-axis">{{ number_format($minX/10,1) }}° longitude</text><text x="575" y="275" text-anchor="end" class="chart-axis">{{ number_format($maxX/10,1) }}° longitude</text>
<text x="60" y="30" text-anchor="end" class="chart-axis">{{ number_format($maxY/10,1) }}° lat</text><text x="60" y="250" text-anchor="end" class="chart-axis">{{ number_format($minY/10,1) }}° lat</text>
</svg><p class="small text-muted">North ↑ · Darker cells indicate higher patient counts. Grid cells are not area-adjusted population rates.</p>
@elseif($chart['type']==='pie')
@php
$total=array_sum(array_column($points,'value'));
$colours=array_map(fn($point)=>\App\Services\Hms\ChartColors::category($point['label'],$chart['title']),$points);
$stops=[];$offset=0;
foreach($points as $i=>$point) {
    $end=$offset+100*$point['value']/$total;
    $stops[]=$colours[$i].' '.$offset.'% '.$end.'%';
    $offset=$end;
}
@endphp
<div class="pie-layout">
<div class="demographic-pie" style="background:conic-gradient({{ implode(',',$stops) }})" role="img" aria-label="{{ $chart['title'] }}. {{ $total }} unique patients. Breakdown in legend and exact figures."></div>
<ul class="pie-legend">
@foreach($points as $i=>$point)<li><span class="pie-key" style="background:{{ $colours[$i] }}" aria-hidden="true"></span><span>{{ $point['label'] }}</span><strong>{{ number_format($point['value']) }} · {{ number_format(100*$point['value']/$total,1) }}%</strong></li>@endforeach
</ul></div>
@elseif($chart['type']==='line')
<svg class="trend-chart" viewBox="0 0 620 225" role="img" aria-label="{{ $chart['title'] }}. Exact values are available below.">
@for($tick=0;$tick<=4;$tick++)
@php
$y=180-$tick*40;
@endphp
<line x1="58" y1="{{ $y }}" x2="600" y2="{{ $y }}" class="chart-gridline"/>
<text x="50" y="{{ $y+4 }}" text-anchor="end" class="chart-axis">{{ number_format($maximum*$tick/4,$decimals) }}</text>
@endfor
@php
$coordinates=[];
$count=count($points);
foreach($points as $i=>$point) {
    $coordinates[]=(58+542*$i/max(1,$count-1)).','. (180-160*$point['value']/$maximum);
}
@endphp
<polygon points="58,180 {{ implode(' ',$coordinates) }} 600,180" class="chart-area"/>
<polyline points="{{ implode(' ',$coordinates) }}" class="chart-line"/>
@foreach($points as $i=>$point)
<circle cx="{{ 58+542*$i/max(1,$count-1) }}" cy="{{ 180-160*$point['value']/$maximum }}" r="3" class="chart-point" tabindex="0">
<title>{{ $point['label'] }}: {{ number_format($point['value'],$decimals) }}</title>
</circle>
@endforeach
<text x="58" y="210" class="chart-axis">{{ $points[0]['label'] }}</text>
<text x="600" y="210" text-anchor="end" class="chart-axis">{{ $points[count($points)-1]['label'] }}</text>
</svg>
@else
<div class="distribution-scroll">
<div class="distribution {{ $chart['type']==='histogram' ? 'distribution-histogram' : 'distribution-columns' }}" role="list" aria-label="{{ $chart['title'] }}">
@foreach($points as $point)
<div class="distribution-bin" role="listitem">
<div class="distribution-value">{{ number_format($point['value'],$decimals) }}</div>
<div class="distribution-track"><div class="distribution-fill" style="height:{{ round(100*$point['value']/$maximum,2) }}%;background:{{ $chart['type']==='histogram' ? '#087e86' : \App\Services\Hms\ChartColors::category($point['label'],$chart['title']) }}" tabindex="0"><span class="visually-hidden">{{ $point['label'] }}: {{ number_format($point['value'],$decimals) }}</span></div></div>
<div class="distribution-label">{{ $point['label'] }}</div>
</div>
@endforeach
</div></div>
@endif
<details class="chart-data"><summary>View exact figures</summary><div class="table-responsive"><table class="table table-sm">
<caption class="visually-hidden">{{ $chart['title'] }}</caption><thead><tr><th scope="col">Category / date</th><th scope="col" class="text-end">Value</th></tr></thead><tbody>
@forelse($points as $point)<tr><th scope="row">{{ $point['label'] }}</th><td class="text-end">{{ number_format($point['value'],$decimals) }}</td></tr>
@empty<tr><td colspan="2">No records in this scope.</td></tr>@endforelse
</tbody></table></div></details>
</article>