@php

/**
 * Shared analytics chart card body (heading + optional period pills + the
 * ApexCharts mount consumed by dashboard-charts.js). Wrap it in a
 * .qm-chart-card grid cell.
 *
 * @var string      $heading   card title
 * @var string      $sub       short caption describing what the chart measures;
 *                             drawn by ApexCharts on the chart's own toolbar row
 * @var array       $cfg       chart config JSON for [data-chart]
 * @var array       $meta      ['has' => bool, 'label' => accessible summary]
 * @var string|null $icon      no-data icon AND, when $accent is set, the header chip icon (default fa-chart-line)
 * @var string|null $accent    when set, renders a .qm-head-chip beside the heading (blue|green|violet|teal|rose|amber)
 * @var array|null  $opts      instant period pills: ['id','ranges','selected','options']
 */
$icon   = $icon ?? 'fa-chart-line';
$accent = $accent ?? null;
$opts   = $opts ?? null;
$hasData = !empty($meta['has']);
$label   = (string) ($meta['label'] ?? ($heading ?? ''));
$id      = $opts['id'] ?? '';
// The caption rides on the chart's own toolbar row — left-aligned, opposite the export
// button (the "breadcrumb") on the right — NOT stacked under the title. Capped to 16
// characters so a long caption can't wrap on a narrow card and push that row out of
// alignment; ApexCharts then places it natively, identically on every card.
$subCap = trim((string) ($sub ?? ''));
if ($subCap !== '') {
    // Room for a real sentence fragment: 16 chars clipped almost every caption
    // ("Across all serv…"); the caption row spans the plot width less the export
    // menu, which holds ~30 comfortably even in a half-width card.
    if (mb_strlen($subCap) > 30) { $subCap = rtrim(mb_substr($subCap, 0, 29)) . '…'; }
    $cfg['subtitle'] = $subCap;
}
// Range picker wiring on the mount: a lazy `url` (fetch one window on demand — the
// preferred, lean path) OR a legacy `ranges` blob (all windows shipped up front).
$rangeAttrs = '';
if ($opts) {
    if (!empty($opts['url'])) {
        $rangeAttrs = ' data-range-url="' . e((string) $opts['url']) . '" data-range-selected="' . e((string) ($opts['selected'] ?? '')) . '"';
    } elseif (isset($opts['ranges'])) {
        $rangeAttrs = ' data-ranges="' . e(json_encode($opts['ranges'])) . '"';
    }
}
@endphp
<div class="qm-chart-card-head">
    <h2{!! $accent ? ' class="qm-card-title-ico"' : '' !!}>@if ($accent)<span class="qm-head-chip qm-head-chip--{{ $accent }}"><i class="fas {{ $icon }}" aria-hidden="true"></i></span>@endif{{ (string) ($heading ?? '') }}</h2>
    @if ($opts)
        @if (($opts['control'] ?? 'pills') === 'compact')
        @php /* Compact range picker: an active pill showing the current window (mirrors the
                 page-level master) plus a caret pill that opens a styled menu of the other
                 ranges. Reads like the master period bar and fits the narrow chart cards where
                 the full pill bar would not; wired client-side by the .qm-chart-period handler
                 in dashboard-charts.js. */
            $curKey   = (string) ($opts['selected'] ?? '');
            $curLabel = $opts['options'][$curKey] ?? (string) reset($opts['options']);
@endphp
        <div class="qm-period qm-chart-period" data-chart-range="#{{ $id }}">
            <span class="qm-period-btn is-active qm-cp-tab" data-range-label>{{ (string) $curLabel }}</span>
            <div class="qm-period-drop">
                <button type="button" class="qm-period-btn qm-period-drop-toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ t_raw('chart.period_aria', [':heading' => (string) $heading]) }}"><i class="fas fa-chevron-down" aria-hidden="true"></i></button>
                <div class="qm-period-menu" role="menu" hidden>
                    @foreach ($opts['options'] as $val => $text)
@php $on = ((string) $val === $curKey); @endphp
                    <button type="button" class="qm-period-menu-item{{ $on ? ' is-active' : '' }}" role="menuitemradio" aria-checked="{{ $on ? 'true' : 'false' }}" data-range="{{ (string) $val }}">{{ $text }}</button>
                    @endforeach
                </div>
            </div>
        </div>
        @else
        @php // Desktop: the pill bar. Phones: it overflows the chart head, so it collapses to the
              // shared caret dropdown below (same ranges, same client-side swap; kept in step by
              // dashboard-charts.js).
@endphp
        <div class="qm-period qm-period-pills" role="group" aria-label="{{ t_raw('chart.period_aria', [':heading' => (string) $heading]) }}" data-target="#{{ $id }}">
            @foreach ($opts['options'] as $val => $text)
@php $on = ((string) $val === (string) $opts['selected']); @endphp
            <button type="button" class="qm-period-btn{{ $on ? ' is-active' : '' }}" data-range="{{ (string) $val }}" aria-pressed="{{ $on ? 'true' : 'false' }}">{{ $text }}</button>
            @endforeach
        </div>
        <div class="qm-period qm-chart-period qm-period-mobile" data-chart-range="#{{ $id }}">
            <div class="qm-period-drop">
                <button type="button" class="qm-period-btn qm-period-drop-toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ t_raw('chart.period_aria', [':heading' => (string) $heading]) }}"><i class="fas fa-chevron-down" aria-hidden="true"></i></button>
                <div class="qm-period-menu" role="menu" hidden>
                    @foreach ($opts['options'] as $val => $text)
@php $on = ((string) $val === (string) $opts['selected']); @endphp
                    <button type="button" class="qm-period-menu-item{{ $on ? ' is-active' : '' }}" role="menuitemradio" aria-checked="{{ $on ? 'true' : 'false' }}" data-range="{{ (string) $val }}">{{ $text }}</button>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    @endif
</div>
@if ($hasData)
<figure class="qm-chart-figure">
    <div class="qm-chart"{!! $id ? ' id="' . e($id) . '"' : '' !!} role="img" aria-label="{{ $label }}" data-chart="{{ json_encode($cfg) }}"{!! $rangeAttrs !!}></div>
    <figcaption class="qm-sr-cap">{{ $label }}</figcaption>
</figure>
@else
<div class="qm-chart-empty"><i class="fas {{ $icon }}" aria-hidden="true"></i>{{ t_raw('common.no_data_yet') }}</div>
@endif