@extends('layouts.dashboard')

@section('content')
@php
/**
 * Operation Analytics → Kitchen efficiency: how long the kitchen actually takes,
 * measured from the per-item prep marks the board records rather than from a target
 * somebody typed into settings once.
 *
 * Two readings, because they lead to two different decisions: WHICH DISH is slow is a
 * recipe or a prep-list problem, WHICH HOUR is slow is a rota problem.
 *
 * @var array $kpis @var array $prepChart @var array $prepMeta @var array $hourChart @var array $hourMeta
 * @var array $slowChart @var array $slowMeta @var array $stationChart @var array $stationMeta
 * @var array $dishRows @var array $dishPager @var array $stationRows @var bool $hasStations
 * @var string|null $avgTicket @var int $ticketCount @var int $targetMinutes @var int $measured
 * @var int $rangeDays @var array $rangeLinks
 */
$dishRows    = $dishRows ?? [];
$stationRows = $stationRows ?? [];
$hasStations = !empty($hasStations);
$measured    = (int) ($measured ?? 0);
$targetMinutes = (int) ($targetMinutes ?? 30);
$ticketCount = (int) ($ticketCount ?? 0);
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-1"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('dashboard.sec.snapshot') }}</h2>
        <p class="qm-ops-sub mb-0">{{ t_raw('vendor.analytics.subtitle_kitchen') }}</p>
    </div>
    <div class="qm-period" role="group" aria-label="{{ t_raw('common.reporting_period') }}">
        @foreach ($rangeLinks['options'] as $val => $text)
@php $on = ((string) $val === $rangeLinks['selected']); @endphp
        <a class="qm-period-btn{{ $on ? ' is-active' : '' }}" href="?range={{ (string) $val }}" aria-current="{{ $on ? 'true' : 'false' }}">{{ $text }}</a>
        @endforeach
    </div>
</div>

@php /* Nothing has been ticked off yet. Every figure below would be an average of no
   measurements, so the page says so once instead of printing a screen of zeros and an
   accusation against whichever dish happens to sort first. */
@endphp
@if ($measured < 1)
<div class="qm-card"><div class="qm-empty"><i class="fas fa-stopwatch d-block" aria-hidden="true"></i><p>{{ t_raw('vendor.analytics.empty_no_prep_data') }}</p><a href="{{ route('vendor.kitchen') }}" class="qm-btn">{{ t_raw('nav.kitchen_display') }}</a></div></div>
@else

<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'blue', 'icon' => 'fa-stopwatch', 'label' => t_raw('vendor.analytics.kpi_avg_prep'),
        'value' => $kpis['avgPrep']['value'] ?? dash(),
        'spark' => $kpis['avgPrep']['spark'], 'meta' => $kpis['avgPrep']['meta']])
    @php /* The named dish. This is the whole point of the page — a number nobody can act
             on becomes a recipe somebody can change. */
@endphp
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'rose', 'icon' => 'fa-hourglass-half', 'label' => t_raw('vendor.analytics.kpi_slowest_dish'),
        'value' => $kpis['slowestDish']['value'] ?? dash(), 'meta' => $kpis['slowestDish']['meta'],
        'bgImage' => $kpis['slowestDish']['image'] ?? ''])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-clock', 'label' => t_raw('vendor.analytics.kpi_slowest_hour'),
        'value' => $kpis['slowestHour']['value'] ?? dash(), 'meta' => $kpis['slowestHour']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'teal', 'icon' => 'fa-utensils', 'label' => t_raw('vendor.analytics.kpi_dishes_prepped'),
        'value' => number_format((int) $kpis['dishesPrepped']['value']),
        'spark' => $kpis['dishesPrepped']['spark'], 'meta' => $kpis['dishesPrepped']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'violet', 'icon' => 'fa-bullseye', 'label' => t_raw('vendor.analytics.kpi_on_target'),
        'value' => $kpis['onTarget']['value'] !== null ? number_format($kpis['onTarget']['value'], 1) . '%' : dash(),
        'meta' => $kpis['onTarget']['meta']])
</div>

<h2 class="qm-snap-section-title"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('dashboard.sec.trends') }}</h2>
<div class="qm-charts-grid">
    <div class="qm-chart-card qm-chart-col-8">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_prep_speed'), 'sub' => t_raw('vendor.analytics.chart_avg_min_per_day_sub'), 'cfg' => $prepChart, 'meta' => $prepMeta, 'accent' => 'blue', 'icon' => 'fa-stopwatch', 'opts' => ['id' => 'kitchenPrepChart', 'url' => route('vendor.chart-series', ['chart' => 'kitchenPrep']), 'selected' => $rangeLinks['selected'], 'options' => $rangeLinks['options'], 'control' => 'compact']])
    </div>
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_prep_by_hour'), 'sub' => t_raw('vendor.analytics.chart_prep_by_hour_sub'), 'cfg' => $hourChart, 'meta' => $hourMeta, 'icon' => 'fa-clock', 'accent' => 'amber', 'opts' => ['id' => 'kitchenHourChart', 'url' => route('vendor.chart-series', ['chart' => 'kitchenHour']), 'selected' => $rangeLinks['selected'], 'options' => $rangeLinks['options'], 'control' => 'compact']])
    </div>
</div>

<div class="qm-charts-grid">
    <div class="qm-chart-card {{ $hasStations ? 'qm-chart-col-8' : 'qm-chart-col-12' }}">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_slowest_dishes'), 'sub' => t_raw('vendor.analytics.chart_slowest_dishes_sub'), 'cfg' => $slowChart, 'meta' => $slowMeta, 'icon' => 'fa-hourglass-half', 'accent' => 'rose', 'opts' => ['id' => 'kitchenSlowChart', 'url' => route('vendor.chart-series', ['chart' => 'kitchenSlow']), 'selected' => $rangeLinks['selected'], 'options' => $rangeLinks['options'], 'control' => 'compact']])
    </div>
    @php /* Only where the kitchen is divided: on one undivided board every line belongs
             to the same station and the chart would be a single bar. */
@endphp
    @if ($hasStations)
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_prep_by_station'), 'sub' => t_raw('vendor.analytics.chart_prep_by_station_sub'), 'cfg' => $stationChart, 'meta' => $stationMeta, 'icon' => 'fa-fire', 'accent' => 'violet'])
    </div>
    @endif
</div>

<h2 class="qm-snap-section-title"><span class="qm-snap-title-bar" aria-hidden="true"></span>{{ t_raw('dashboard.sec.breakdown') }}</h2>
<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            <h2 class="mb-0 qm-card-title-ico"><span class="qm-head-chip qm-head-chip--blue"><i class="fas fa-utensils" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_dish_prep_times') }}</h2>
            <p class="qm-ops-sub mb-0">{{ t_raw('vendor.analytics.hint_dish_prep_times', [':target' => (string) $targetMinutes]) }}</p>
        </div>
        <a href="{{ route('vendor.settings') }}" class="qm-btn qm-btn-outline qm-btn-sm">{{ t_raw('vendor.analytics.link_set_prep_target') }}</a>
    </div>
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_dish_prep_times') }}</caption>
        <thead><tr>
            <th data-sort="text">{{ t_raw('vendor.analytics.col_dish') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_times_prepped') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_avg_prep') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_slowest_single') }}</th>
            <th data-sort="number" class="text-end">{{ t_raw('vendor.analytics.col_over_target') }}</th>
        </tr></thead>
        <tbody>
            @if ($dishRows)
            @foreach ($dishRows as $d)
            <tr>
                <td>
                    @if ($d['menu_item_id'] > 0)
                    <a href="{{ url('/vendor/menu/item/' . (int) $d['menu_item_id'] . '/analytics') }}"><strong>{{ $d['name'] }}</strong></a>
                    @else
                    <strong>{{ $d['name'] }}</strong>
                    @endif
                </td>
                <td>{{ number_format($d['times']) }}</td>
                <td data-sort-value="{{ (string) round($d['avg_minutes'], 2) }}">
                    @php /* Amber past the target, so the row that needs attention is visible
                             without reading five numbers first. */
@endphp
                    <span class="qm-pill {{ $d['avg_minutes'] > $targetMinutes ? 'qm-pill-amber' : 'qm-pill-green' }}">{{ (string) round($d['avg_minutes'], 1) }} {{ t_raw('common.min') }}</span>
                </td>
                <td class="qm-cell-body" data-sort-value="{{ (string) round($d['max_minutes'], 2) }}">{{ (string) round($d['max_minutes'], 1) }} {{ t_raw('common.min') }}</td>
                <td class="text-end" data-sort-value="{{ (string) ($d['over_rate'] ?? 0) }}">
                    @if ($d['over_target'] > 0)
                    <span class="qm-pill qm-pill-red">{{ t_raw('vendor.analytics.pill_over_target', [':n' => number_format($d['over_target']), ':pct' => number_format($d['over_rate'] ?? 0, 1)]) }}</span>
                    @else<span class="qm-pill qm-pill-green">{{ t_raw('vendor.analytics.pill_all_on_target') }}</span>@endif
                </td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 5, 'icon' => 'fa-utensils', 'msg' => t_raw('vendor.analytics.empty_no_prep_data')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $dishPager, 'base' => '/vendor/analytics/kitchen'])
</div>

@if ($hasStations)
<div class="qm-card">
    <div class="qm-ops-head">
        <div>
            <h2 class="mb-0 qm-card-title-ico"><span class="qm-head-chip qm-head-chip--violet"><i class="fas fa-fire" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_station_prep_times') }}</h2>
            <p class="qm-ops-sub mb-0">{{ t_raw('vendor.analytics.hint_station_prep_times') }}</p>
        </div>
        <a href="{{ route('vendor.menu.structure') }}" class="qm-btn qm-btn-outline qm-btn-sm">{{ t_raw('vendor.menu.stations_title') }}</a>
    </div>
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_station_prep_times') }}</caption>
        <thead><tr>
            <th data-sort="text">{{ t_raw('vendor.menu.station_label') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_times_prepped') }}</th>
            <th data-sort="number" class="text-end">{{ t_raw('vendor.analytics.col_avg_prep') }}</th>
        </tr></thead>
        <tbody>
            @if ($stationRows)
            @foreach ($stationRows as $s)
            <tr>
                <td><strong>{{ $s['name'] }}</strong></td>
                <td>{{ number_format($s['times']) }}</td>
                <td class="text-end" data-sort-value="{{ (string) round($s['avg_minutes'], 2) }}">
                    <span class="qm-pill {{ $s['avg_minutes'] > $targetMinutes ? 'qm-pill-amber' : 'qm-pill-green' }}">{{ (string) round($s['avg_minutes'], 1) }} {{ t_raw('common.min') }}</span>
                </td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 3, 'icon' => 'fa-fire', 'msg' => t_raw('vendor.analytics.empty_no_prep_data')])
            @endif
        </tbody>
    </table>
    </div>
</div>
@endif

@endif

</div>@php /* /.qm-d2 */
@endphp
@endsection