@extends('layouts.dashboard')

@section('content')
@php

/**
 * Per-item sales analytics (vendor). Every figure is computed from real order
 * data in MenuController::analytics() - tenant-scoped and excluding cancelled
 * orders - so this page is a decision tool for the owner, not a vanity board.
 *
 * @var array $item         the menu item
 * @var array $stats        units, orders, revenue, customers
 * @var int   $totalOrders  all non-cancelled restaurant orders (attach-rate base)
 * @var int   $cancelled    orders that contained this item and were cancelled
 * @var array $span         first_sold / last_sold timestamps
 * @var array $topCustomers top buyers of this item
 * @var array $boughtWith   items most often in the same order
 * @var array $unitsTrend   ApexCharts area-chart config (60-day units)
 * @var bool  $hasSales     true when this item has at least one unit sold
 */
$units    = (int) $stats['units'];
$orders   = (int) $stats['orders'];
$revenue  = (float) $stats['revenue'];
$customers = (int) $stats['customers'];

// Derived, owner-useful ratios (guard against divide-by-zero on a fresh item).
$attachRate    = $totalOrders > 0 ? ($orders / $totalOrders) * 100 : 0.0;
$avgUnits      = $orders > 0 ? $units / $orders : 0.0;
$avgPerOrder   = $orders > 0 ? $revenue / $orders : 0.0;
$repeatBuyers  = 0;
foreach ($topCustomers as $c) {
    if (!empty($c['customer_user_id']) && (int) $c['orders'] > 1) {
        $repeatBuyers++;
    }
}
$lastSold = !empty($span['last_sold']) ? strtotime((string) $span['last_sold']) : 0;
$daysSince = $lastSold ? (int) floor((time() - $lastSold) / 86400) : null;
@endphp
@php /* .qm-d2: the dashboard density standard (app.css §35) */
@endphp
<div class="qm-d2">

<div class="qm-ops-head">
    <div class="d-flex align-items-center gap-3">
        <img src="{{ media($item['image'], 'assets/client/dish/dish-1.png') }}" alt="" class="qm-tbl-thumb" width="44" height="44">
        <div>
            <div class="text-muted small">{{ t_raw('vendor.item_analytics.eyebrow') }}</div>
            <strong class="fs-5">{{ $item['name'] }}</strong>
            <span class="qm-pill qm-pill-grey ms-1">{{ money($item['price']) }}</span>
            @if (!$item['is_available'])<span class="qm-pill qm-pill-grey">{{ t_raw('vendor.item_analytics.hidden_pill') }}</span>@endif
        </div>
    </div>
    <a href="{{ route('vendor.menu') }}" class="qm-btn qm-btn-outline qm-btn-sm"><i class="fas fa-arrow-left me-1" aria-hidden="true"></i> {{ t_raw('vendor.item_analytics.back_to_menu') }}</a>
</div>

@if (!$hasSales)
<div class="qm-card text-center py-5">
    <div class="qm-chart-empty mb-2"><i class="fas fa-chart-line" aria-hidden="true"></i></div>
    <h2 class="h5">{{ t_raw('vendor.item_analytics.no_sales_title') }}</h2>
    <p class="text-muted mb-0">{!! t_raw('vendor.item_analytics.no_sales_text', [':name' => '<strong>' . e($item['name']) . '</strong>']) !!}</p>
</div>
@else

@php $kpiSparks = $kpiSparks ?? []; $menuHref = route('vendor.menu');
@endphp
<div class="qm-kpi-grid">
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'blue', 'icon'=>'fa-cubes', 'label'=>t_raw('vendor.dashboard.chart_top_items_sub'), 'value'=>number_format($units), 'href'=>$menuHref, 'spark'=>$kpiSparks['units'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.kpi_units_sold_meta') . '</span>'])
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'violet', 'icon'=>'fa-receipt', 'label'=>t_raw('vendor.item_analytics.kpi_times_ordered'), 'value'=>number_format($orders), 'href'=>$menuHref, 'spark'=>$kpiSparks['orders'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.meta_orders_with_item') . '</span>'])
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'green', 'icon'=>'fa-coins', 'label'=>t_raw('common.revenue'), 'value'=>money($revenue), 'href'=>$menuHref, 'spark'=>$kpiSparks['revenue'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.meta_from_item') . '</span>'])
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'teal', 'icon'=>'fa-users', 'label'=>t_raw('vendor.item_analytics.kpi_unique_customers'), 'value'=>number_format($customers), 'href'=>$menuHref, 'spark'=>$kpiSparks['customers'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.meta_distinct_buyers') . '</span>'])
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'amber', 'icon'=>'fa-percent', 'label'=>t_raw('vendor.item_analytics.kpi_attach_rate'), 'value'=>number_format($attachRate, 1).'%', 'spark'=>$kpiSparks['attach'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.meta_of_all_orders') . '</span>'])
    @partial('kpi-card', ['variant'=>'panel', 'accent'=>'orange', 'icon'=>'fa-dollar-sign', 'label'=>t_raw('vendor.item_analytics.kpi_avg_per_order'), 'value'=>money($avgPerOrder), 'spark'=>$kpiSparks['avg'] ?? [], 'meta'=>'<span class="qm-kpi-cap">' . t('vendor.item_analytics.meta_units_each', [':n' => number_format($avgUnits, 1)]) . '</span>'])
</div>

<div class="qm-card">
    <div class="qm-stat-row">
        <div class="qm-stat-fact">
            <div class="qm-kpi-label">{{ t_raw('vendor.item_analytics.stat_first_sold') }}</div>
            <strong>{!! fmt_day($span['first_sold'] ?? null) !!}</strong>
        </div>
        <div class="qm-stat-fact">
            <div class="qm-kpi-label">{{ t_raw('vendor.item_analytics.stat_last_sold') }}</div>
            <strong>
                @if ($daysSince === null)-@elseif ($daysSince === 0){{ t_raw('vendor.item_analytics.last_sold_today') }}@elseif ($daysSince === 1){{ t_raw('vendor.item_analytics.last_sold_yesterday') }}@else{{ t_raw('vendor.item_analytics.last_sold_days_ago', [':n' => $daysSince]) }}@endif @if ($daysSince !== null && $daysSince >= 14) <button type="button" class="qm-tip" aria-label="{{ t_raw('vendor.item_analytics.stale_hint', [':n' => $daysSince]) }}" data-qm-tip="{{ t_raw('vendor.item_analytics.stale_hint', [':n' => $daysSince]) }}"><i class="fas fa-info-circle" aria-hidden="true"></i></button>@endif
            </strong>
        </div>
        <div class="qm-stat-fact">
            <div class="qm-kpi-label">{{ t_raw('vendor.item_analytics.stat_repeat_buyers') }}</div>
            <strong>{{ $repeatBuyers }}</strong>
        </div>
        <div class="qm-stat-fact">
            <div class="qm-kpi-label">{{ t_raw('vendor.item_analytics.stat_in_cancelled') }}</div>
            <strong>{{ number_format($cancelled) }}</strong>
        </div>
    </div>
</div>

@php
$unitsRanges = $unitsRanges ?? []; $unitsOpts = ['7' => t_raw('common.range_7d'), '14' => t_raw('common.range_14d'), '30' => t_raw('common.range_30d'), '90' => t_raw('common.range_qtr')];
// The caption rides on the chart's own toolbar row (ApexCharts `subtitle`) and
// says what the plot measures. The card heading stays in the <h2> below.
$unitsTrend['subtitle'] = t_raw('vendor.item_analytics.units_caption');
@endphp
<div class="qm-chart-card qm-chart-card-solo">
    <div class="qm-chart-card-head">
        <h2>{{ t_raw('vendor.dashboard.chart_top_items_sub') }}</h2>
        <div class="qm-period qm-period-pills" role="group" aria-label="{{ t_raw('vendor.item_analytics.units_sold_period_aria') }}" data-target="#unitsChart">
            @php /* (string) $val, because PHP turns a numeric-string array key into an INT: the
                     strict compare against '30' could never be true, so the bar opened with no
                     window marked active while the chart itself is drawn from the 30-day series
                     (MenuController::analytics). dashboard-charts.js only syncs on a click, so
                     nothing put the state right afterwards either. */
@endphp
            @foreach ($unitsOpts as $val => $text)
@php $on = ((string) $val === '30'); @endphp
            <button type="button" class="qm-period-btn{{ $on ? ' is-active' : '' }}" data-range="{{ $val }}" aria-pressed="{{ $on ? 'true' : 'false' }}">{{ $text }}</button>
            @endforeach
        </div>
        <div class="qm-period qm-chart-period qm-period-mobile" data-chart-range="#unitsChart">
            <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('vendor.item_analytics.units_sold_period_aria') }}"><i class="fas fa-chevron-down" aria-hidden="true"></i></button>
                <div class="qm-period-menu" role="menu" hidden>
                    @foreach ($unitsOpts as $val => $text)
@php $on = ((string) $val === '30'); @endphp
                    <button type="button" class="qm-period-menu-item{{ $on ? ' is-active' : '' }}" role="menuitemradio" aria-checked="{{ $on ? 'true' : 'false' }}" data-range="{{ $val }}">{{ $text }}</button>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <figure class="qm-chart-figure">
        <div class="qm-chart" id="unitsChart" role="img" aria-label="{{ t_raw('vendor.item_analytics.units_chart_aria', [':name' => $item['name']]) }}" data-chart="{{ json_encode($unitsTrend) }}" data-ranges="{{ json_encode($unitsRanges) }}"></div>
        <figcaption class="qm-sr-cap">{{ t_raw('vendor.item_analytics.units_chart_caption') }}</figcaption>
    </figure>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="qm-card h-100">
            <h2>{{ t_raw('vendor.item_analytics.heading_top_customers') }}</h2>
            <div class="table-responsive">
            <table class="qm-table" data-sortable>
                <thead><tr><th data-sort="text">{{ t_raw('common.customer') }}</th><th data-sort="number">{{ t_raw('common.orders') }}</th><th data-sort="number">{{ t_raw('common.units') }}</th><th data-sort="number" class="text-end">{{ t_raw('vendor.item_analytics.col_spent') }}</th></tr></thead>
                <tbody>
                    @if ($topCustomers)
                    @foreach ($topCustomers as $c)
                    @php $isGuest = empty($c['customer_user_id']);
@endphp
                    <tr>
                        <td>
                            <div class="qm-tbl-id">
                                {!! brandmark_html($c['avatar'] ?? null, (string) $c['name'], 'md', 'qm-brandmark--round') !!}
                                <div class="qm-tbl-id-text">
                                    <strong>{{ $c['name'] }}@if ($isGuest) <span class="qm-pill qm-pill-grey">{{ t_raw('vendor.item_analytics.pill_guest_checkouts') }}</span>@elseif ((int) $c['orders'] > 1) <span class="qm-pill qm-pill-green">{{ t_raw('vendor.item_analytics.pill_repeat') }}</span>@endif</strong>
                                    @if (!$isGuest && !empty($c['email']))<small>{{ $c['email'] }}</small>@endif
                                </div>
                            </div>
                        </td>
                        <td>{{ (int) $c['orders'] }}</td>
                        <td>{{ (int) $c['units'] }}</td>
                        <td class="text-end">{{ money($c['spend']) }}</td>
                    </tr>
                    @endforeach
                    @else
                    @partial('table-empty', ['colspan' => 4, 'icon' => 'fa-user', 'msg' => t_raw('vendor.item_analytics.empty_no_customer_data')])
                    @endif
                </tbody>
            </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="qm-card h-100">
            <h2>{{ t_raw('vendor.item_analytics.heading_bought_together') }}</h2>
            <div class="table-responsive">
            <table class="qm-table" data-sortable>
                <thead><tr><th data-sort="text">{{ t_raw('vendor.item_analytics.col_item') }}</th><th data-sort="number">{{ t_raw('vendor.item_analytics.col_shared_orders') }}</th><th data-sort="number" class="text-end">{{ t_raw('common.units') }}</th></tr></thead>
                <tbody>
                    @if ($boughtWith)
                    @foreach ($boughtWith as $bw)
                    <tr>
                        <td>
                            <div class="qm-tbl-id">
                                <img class="qm-tbl-thumb" src="{{ media($bw['image'], 'assets/client/dish/dish-1.png') }}" alt="" width="44" height="44" loading="lazy">
                                <div class="qm-tbl-id-text"><strong>{{ $bw['item_name'] }}</strong></div>
                            </div>
                        </td>
                        <td>{{ (int) $bw['co_orders'] }}</td>
                        <td class="text-end">{{ (int) $bw['units'] }}</td>
                    </tr>
                    @endforeach
                    @else
                    @partial('table-empty', ['colspan' => 3, 'icon' => 'fa-utensils', 'msg' => t_raw('vendor.item_analytics.empty_not_bought_with')])
                    @endif
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>

@endif

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