@extends('layouts.dashboard')

@section('content')
@php
/**
 * Operation Analytics → Operations: how smoothly the restaurant runs — fulfilment
 * speed, cancellations, the channels orders arrive through, the staffing clock,
 * waste and drawer accuracy.
 *
 * @var array $kpis @var array $fulChart @var array $fulMeta @var array $cxChart @var array $cxMeta
 * @var array $dowChart @var array $dowMeta @var array $chanChart @var array $chanMeta
 * @var array $modeChart @var array $modeMeta @var array $heatChart @var array $heatMeta
 * @var array $chanRows @var array $chanPager @var array $waste @var array $wastePager
 * @var array $shifts @var array $shiftPager
 * @var int $rangeDays @var array $rangeLinks @var bool $showMoney
 */
@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_operations') }}</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>

<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'blue', 'icon' => 'fa-stopwatch', 'label' => t_raw('vendor.analytics.kpi_avg_fulfilment'),
        'value' => $kpis['fulfilment']['value'] ?? '—',
        'spark' => $kpis['fulfilment']['spark'], 'meta' => $kpis['fulfilment']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'rose', 'icon' => 'fa-ban', 'label' => t_raw('vendor.analytics.kpi_cancellations'),
        'value' => number_format($kpis['cancels']['value']), 'spark' => $kpis['cancels']['spark'], 'meta' => $kpis['cancels']['meta']])
    @php /* A no-show COUNT says nothing without the bookings behind it, so the
       headline is the rate and the caption carries the raw figures. */
@endphp
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-user-slash', 'label' => t_raw('vendor.analytics.kpi_no_show_rate'),
        'value' => $kpis['noShow']['value'] !== null ? number_format($kpis['noShow']['value'], 1) . '%' : '—',
        'spark' => $kpis['noShow']['spark'], 'meta' => $kpis['noShow']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'violet', 'icon' => 'fa-tablet-alt', 'label' => t_raw('vendor.analytics.kpi_self_service'),
        'value' => $kpis['selfServe']['value'] !== null ? number_format($kpis['selfServe']['value'], 1) . '%' : '—',
        'spark' => $kpis['selfServe']['spark'], 'meta' => $kpis['selfServe']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'teal', 'icon' => 'fa-user-friends', 'label' => t_raw('vendor.analytics.kpi_covers'),
        'value' => $kpis['covers']['value'] > 0 ? number_format($kpis['covers']['value']) : '—',
        'spark' => $kpis['covers']['spark'], 'meta' => $kpis['covers']['meta']])
    @if ($showMoney)
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'slate', 'icon' => 'fa-wallet', 'label' => t_raw('vendor.analytics.kpi_drawer_variance'),
        'value' => ($kpis['drawer']['value'] == 0.0 ? t_raw('vendor.analytics.balanced_label') : ($kpis['drawer']['value'] > 0 ? '+' : '−') . money(abs($kpis['drawer']['value']))),
        'meta' => $kpis['drawer']['meta']])
    @endif
</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_fulfilment_speed'), 'sub' => t_raw('vendor.analytics.chart_avg_min_per_day_sub'), 'cfg' => $fulChart, 'meta' => $fulMeta, 'accent' => 'blue', 'opts' => ['id' => 'opsFulChart', 'url' => route('vendor.chart-series', ['chart' => 'opsFulfil']), '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_cancellations_per_day'), 'sub' => t_raw('vendor.analytics.chart_cancellations_caption'), 'cfg' => $cxChart, 'meta' => $cxMeta, 'icon' => 'fa-chart-bar', 'accent' => 'rose', 'opts' => ['id' => 'opsCxChart', 'url' => route('vendor.chart-series', ['chart' => 'opsCancels']), 'selected' => $rangeLinks['selected'], 'options' => $rangeLinks['options'], 'control' => 'compact']])
    </div>
</div>

<div class="qm-charts-grid">
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_busiest_weekdays'), 'sub' => t_raw('vendor.analytics.chart_orders_by_day_sub'), 'cfg' => $dowChart, 'meta' => $dowMeta, 'icon' => 'fa-chart-bar', 'accent' => 'violet'])
    </div>
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_order_channels'), 'sub' => t_raw('vendor.analytics.chart_order_channels_sub'), 'cfg' => $chanChart, 'meta' => $chanMeta, 'icon' => 'fa-chart-pie', 'accent' => 'blue'])
    </div>
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.heading_service_modes'), 'sub' => t_raw('vendor.analytics.chart_service_modes_sub'), 'cfg' => $modeChart, 'meta' => $modeMeta, 'icon' => 'fa-chart-pie', 'accent' => 'teal'])
    </div>
</div>

<div class="qm-charts-grid">
    <div class="qm-chart-card qm-chart-col-12">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_staffing_clock'), 'sub' => t_raw('vendor.analytics.chart_staffing_clock_sub'), 'cfg' => $heatChart, 'meta' => $heatMeta, 'icon' => 'fa-th', 'accent' => 'blue'])
    </div>
</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">
    <h2 class="qm-card-title-ico"><span class="qm-head-chip qm-head-chip--violet"><i class="fas fa-random" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_channel_performance') }}</h2>
    <p class="qm-hint mb-3">{{ t_raw('vendor.analytics.hint_channel_performance') }}</p>
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_channel_performance') }}</caption>
        <thead><tr>
            <th data-sort="text">{{ t_raw('vendor.analytics.col_channel') }}</th>
            <th data-sort="number">{{ t_raw('common.orders') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_avg_minutes') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.kpi_cancellations') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.kpi_covers') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_terminals') }}</th>
            <th data-sort="number" class="text-end">{{ t_raw('vendor.analytics.col_at_table') }}</th>
        </tr></thead>
        <tbody>
            @if ($chanRows)
            @foreach ($chanRows as $c)
            <tr>
                <td><strong>{{ $c['label'] }}</strong></td>
                <td>{{ number_format($c['orders']) }}</td>
                <td class="qm-cell-body">{!! $c['avg_minutes'] !== null ? number_format($c['avg_minutes']) . ' ' . t('common.min') : dash() !!}</td>
                <td data-sort-value="{{ (string) ($c['cancel_rate'] ?? 0) }}">
                    @if ($c['cancelled'] > 0)
                    <span class="qm-pill qm-pill-red">{{ t_raw('vendor.analytics.pill_cancelled_rate', [':n' => number_format($c['cancelled']), ':pct' => number_format($c['cancel_rate'] ?? 0, 1)]) }}</span>
                    @else<span class="qm-pill qm-pill-green">{{ t_raw('vendor.analytics.pill_none_cancelled') }}</span>@endif
                </td>
                <td class="qm-cell-body">{!! $c['covers'] > 0 ? number_format($c['covers']) : dash() !!}</td>
                @php /* Terminals counts the distinct kiosks that produced these orders;
                   at-table counts the orders raised against a seated table. */
@endphp
                <td class="qm-cell-body">{!! $c['terminals'] > 0 ? number_format($c['terminals']) : dash() !!}</td>
                <td class="qm-cell-body text-end">{!! $c['at_table'] > 0 ? number_format($c['at_table']) : dash() !!}</td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 7, 'icon' => 'fa-random', 'msg' => t_raw('vendor.analytics.empty_no_orders_period')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $chanPager, 'base' => '/vendor/analytics/operations'])
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="qm-card h-100">
            <div class="qm-ops-head">
                <h2 class="mb-0 qm-card-title-ico"><span class="qm-head-chip qm-head-chip--rose"><i class="fas fa-trash-alt" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_kitchen_waste') }}</h2>
                <a href="{{ route('vendor.inventory') }}" class="qm-btn qm-btn-outline qm-btn-sm">{{ t_raw('nav.inventory') }}</a>
            </div>
            <div class="table-responsive">
            <table class="qm-table" data-sortable>
                <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_waste') }}</caption>
                <thead><tr><th data-sort="text">{{ t_raw('vendor.analytics.col_stock_item') }}</th><th data-sort="number">{{ t_raw('vendor.analytics.col_wasted') }}</th><th data-sort="number" class="text-end">{{ t_raw('vendor.analytics.col_entries') }}</th></tr></thead>
                <tbody>
                    @if ($waste)
                    @foreach ($waste as $w)
                    <tr>
                        <td><strong>{{ $w['name'] }}</strong></td>
                        <td>{{ rtrim(rtrim(number_format((float) $w['qty'], 2, '.', ''), '0'), '.') }} <span class="qm-cell-body">{{ $w['unit'] }}</span></td>
                        <td class="qm-cell-body text-end">{{ (int) $w['times'] }}</td>
                    </tr>
                    @endforeach
                    @else
                    @partial('table-empty', ['colspan' => 3, 'icon' => 'fa-boxes', 'msg' => t_raw('vendor.analytics.empty_no_waste')])
                    @endif
                </tbody>
            </table>
            </div>
            @partial('table-toolbar', ['pager' => $wastePager, 'base' => '/vendor/analytics/operations', 'showPager' => false])
        </div>
    </div>
    <div class="col-lg-6">
        <div class="qm-card h-100">
            <div class="qm-ops-head">
                <h2 class="mb-0 qm-card-title-ico"><span class="qm-head-chip qm-head-chip--green"><i class="fas fa-cash-register" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_drawer_sessions') }}</h2>
                <a href="{{ route('vendor.shifts') }}" class="qm-btn qm-btn-outline qm-btn-sm">{{ t_raw('vendor.dashboard.cash_drawer_label') }}</a>
            </div>
            <div class="table-responsive">
            <table class="qm-table" data-sortable>
                <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_drawer_sessions') }}</caption>
                <thead><tr><th data-sort="date">{{ t_raw('vendor.analytics.col_closed') }}</th>@if ($showMoney)<th data-sort="number">{{ t_raw('vendor.analytics.col_expected') }}</th><th data-sort="number">{{ t_raw('vendor.analytics.col_counted') }}</th>@endif<th data-sort="number">{{ t_raw('vendor.analytics.col_variance') }}</th><th class="text-end">{{ t_raw('common.actions') }}</th></tr></thead>
                <tbody>
                    @if ($shifts)
                    @foreach ($shifts as $s)
@php $v = (float) ($s['variance'] ?? 0); @endphp
                    <tr>
                        <td class="qm-cell-body" data-sort-value="{{ (string) ($s['closed_at'] ?? '') }}">{!! fmt_datetime($s['closed_at']) !!}</td>
                        @if ($showMoney)
                        <td>{!! $s['expected_cash'] !== null ? money($s['expected_cash']) : dash() !!}</td>
                        <td>{!! $s['counted_cash'] !== null ? money($s['counted_cash']) : dash() !!}</td>
                        @endif
                        <td data-sort-value="{{ (string) $v }}">
                            @php /* Managers see the balanced/over/short signal but not the cash amount (the till figures are owner-only). */
@endphp
                            @if ($v == 0.0)<span class="qm-pill qm-pill-green">{{ t_raw('vendor.analytics.balanced_label') }}</span>
                            @elseif ($v > 0)<span class="qm-pill qm-pill-amber">{!! $showMoney ? t('vendor.analytics.pill_over_amount', [':amount' => money($v)]) : t('vendor.analytics.pill_over_plain') !!}</span>
                            @else<span class="qm-pill qm-pill-red">{!! $showMoney ? t('vendor.analytics.pill_short_amount', [':amount' => money(abs($v))]) : t('vendor.analytics.pill_short_plain') !!}</span>@endif
                        </td>
                        <td class="qm-actions-cell"><a class="qm-btn qm-btn-outline qm-btn-xs" href="{{ url('/vendor/shifts/' . (int) $s['id']) }}">{{ t_raw('vendor.analytics.link_z_report') }}</a></td>
                    </tr>
                    @endforeach
                    @else
                    @partial('table-empty', ['colspan' => $showMoney ? 5 : 3, 'icon' => 'fa-wallet', 'msg' => t_raw('vendor.analytics.empty_no_drawer_sessions')])
                    @endif
                </tbody>
            </table>
            </div>
            @partial('table-toolbar', ['pager' => $shiftPager, 'base' => '/vendor/analytics/operations', 'showPager' => false])
        </div>
    </div>
</div>

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