@extends('layouts.dashboard')

@section('content')
@php
/**
 * Operation Analytics → Customers: who is ordering — new vs returning, guest
 * share, the channels they arrive through, and the restaurant's best customers.
 *
 * @var array $kpis @var array $dayChart @var array $dayMeta @var array $mixChart @var array $mixMeta
 * @var array $identityChart @var array $identityMeta @var array $sourceChart @var array $sourceMeta
 * @var array $spendChart @var array $spendMeta @var array $topCustomers @var array $custPager
 * @var int $rangeDays @var array $rangeLinks @var array $clientLocations
 */
$loyLabel = (string) ($restaurant['loyalty_points_label'] ?? 'points');
$clientPoints = [];
foreach ($clientLocations as $cl) {
    if ($cl['delivery_lat'] === null || $cl['delivery_lng'] === null) {
        continue;
    }
    $addr = trim((string) ($cl['delivery_address'] ?? ''));
    $clientPoints[] = [
        'lat'      => (float) $cl['delivery_lat'],
        'lng'      => (float) $cl['delivery_lng'],
        'label'    => $cl['name'] . ($addr !== '' ? ' — ' . $addr : ''),
        // The customer's own avatar (or initials monogram) - same brandmark
        // used everywhere else a person's avatar appears.
        'iconHtml' => brandmark_html($cl['avatar'] ?? null, (string) $cl['name'], 'sm'),
    ];
}
$clientMapCenter = $clientPoints ? $clientPoints[0] : ['lat' => 37.7749, 'lng' => -122.4194];
@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_customers') }}</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-users', 'label' => t_raw('common.customers'),
        'value' => number_format($kpis['customers']['value']), 'spark' => $kpis['customers']['spark'], 'meta' => $kpis['customers']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'green', 'icon' => 'fa-user-plus', 'label' => t_raw('vendor.analytics.kpi_new_customers'),
        'value' => number_format($kpis['new']['value']), 'meta' => $kpis['new']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'violet', 'icon' => 'fa-redo', 'label' => t_raw('common.returning'),
        'value' => number_format($kpis['returning']['value']), 'meta' => $kpis['returning']['meta']])
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'amber', 'icon' => 'fa-user-clock', 'label' => t_raw('common.guest_orders'),
        'value' => number_format($kpis['guests']['value']), 'spark' => $kpis['guests']['spark'], 'meta' => $kpis['guests']['meta']])
    @php /* Spend per head reads from the covers keyed in at the till; with none
       recorded the card shows an em-dash rather than dividing by nothing. */
@endphp
    @partial('kpi-card', ['variant' => 'panel', 'accent' => 'teal', 'icon' => 'fa-user-friends', 'label' => t_raw('vendor.analytics.kpi_spend_per_head'),
        'value' => $kpis['perHead']['value'] !== null ? money($kpis['perHead']['value']) : '—',
        'spark' => $kpis['perHead']['spark'], 'meta' => $kpis['perHead']['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_customers_per_day'), 'sub' => t_raw('vendor.analytics.chart_customers_per_day_caption'), 'cfg' => $dayChart, 'meta' => $dayMeta, 'accent' => 'blue', 'opts' => ['id' => 'custDayChart', 'url' => route('vendor.chart-series', ['chart' => 'custPerDay']), '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_new_vs_returning'), 'sub' => t_raw('vendor.analytics.chart_new_vs_returning_caption'), 'cfg' => $mixChart, 'meta' => $mixMeta, 'icon' => 'fa-chart-pie', 'accent' => 'green'])
    </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_account_vs_guest'), 'sub' => t_raw('vendor.analytics.chart_account_vs_guest_sub'), 'cfg' => $identityChart, 'meta' => $identityMeta, 'icon' => 'fa-chart-pie', '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' => $sourceChart, 'meta' => $sourceMeta, 'icon' => 'fa-chart-pie', 'accent' => 'teal'])
    </div>
    <div class="qm-chart-card qm-chart-col-4">
        @partial('chart-card', ['heading' => t_raw('vendor.analytics.chart_top_customers_spend'), 'sub' => t_raw('vendor.analytics.chart_collected_period_sub'), 'cfg' => $spendChart, 'meta' => $spendMeta, 'icon' => 'fa-chart-bar', 'accent' => 'amber', 'opts' => ['id' => 'custSpendChart', 'url' => route('vendor.chart-series', ['chart' => 'custTop']), 'selected' => $rangeLinks['selected'], 'options' => $rangeLinks['options'], 'control' => 'compact']])
    </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--teal"><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_client_locations') }}</h2>
    <p class="qm-hint mb-3">{{ t_raw('vendor.analytics.hint_client_locations') }}</p>
    @if ($clientPoints)
    <div class="qm-map" data-qm-map data-lat="{{ (string) $clientMapCenter['lat'] }}" data-lng="{{ (string) $clientMapCenter['lng'] }}" data-zoom="11" data-markers="{{ json_encode($clientPoints, JSON_UNESCAPED_SLASHES) }}" role="application" aria-label="{{ t_raw('vendor.analytics.aria_client_map') }}"></div>
    @else
    <div class="qm-empty"><i class="fas fa-map-marked-alt d-block" aria-hidden="true"></i><p>{{ t_raw('vendor.analytics.empty_no_client_locations') }}</p></div>
    @endif
</div>

<div class="qm-card">
    <h2 class="qm-card-title-ico"><span class="qm-head-chip qm-head-chip--blue"><i class="fas fa-users" aria-hidden="true"></i></span>{{ t_raw('vendor.analytics.heading_best_customers') }}</h2>
    <div class="table-responsive">
    <table class="qm-table" data-sortable>
        <caption class="visually-hidden">{{ t_raw('vendor.analytics.caption_best_customers') }}</caption>
        <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('admin.analytics_customers.col_spend') }}</th>
            <th data-sort="number">{{ t_raw('common.average_order') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.kpi_covers') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_per_head') }}</th>
            <th data-sort="number">{{ t_raw('vendor.analytics.col_loyalty_balance') }}</th>
            <th data-sort="date" class="text-end">{{ t_raw('vendor.analytics.col_last_order') }}</th>
        </tr></thead>
        <tbody>
            @if ($topCustomers)
            @foreach ($topCustomers as $c)
@php $orders = (int) $c['orders_c']; $covers = (int) $c['covers']; @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">
                            <a class="qm-tbl-link" href="{{ url('/vendor/customers/' . (int) $c['id']) }}"><strong>{{ $c['name'] }}</strong></a>
                            <small>{{ $c['email'] }}</small>
                        </div>
                    </div>
                </td>
                <td>{{ number_format($orders) }}</td>
                <td><strong>{{ money($c['spend']) }}</strong></td>
                <td class="qm-cell-body">{!! $orders > 0 ? money((float) $c['spend'] / $orders) : dash() !!}</td>
                <td class="qm-cell-body">{!! $covers > 0 ? number_format($covers) : dash() !!}</td>
                <td class="qm-cell-body">{!! $covers > 0 ? money((float) $c['spend'] / $covers) : dash() !!}</td>
                <td class="qm-cell-body">{!! $c['points'] !== null ? number_format((int) $c['points']) . ' ' . e($loyLabel) : dash() !!}</td>
                <td class="qm-cell-body text-end">{!! fmt_datetime($c['last_order']) !!}</td>
            </tr>
            @endforeach
            @else
            @partial('table-empty', ['colspan' => 8, 'icon' => 'fa-users', 'msg' => t_raw('vendor.analytics.empty_no_account_customers')])
            @endif
        </tbody>
    </table>
    </div>
    @partial('table-toolbar', ['pager' => $custPager, 'base' => '/vendor/analytics/customers'])
</div>

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