@extends('layouts.app')
@section('title', 'Kitchen Reports')

@section('content')
<div class="space-y-6" x-data x-init="setTimeout(() => window.renderCharts(), 30)">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">Kitchen Reports</h1>
            <p class="text-sm text-ink-muted">{{ $from->format('d M Y') }} — {{ $to->format('d M Y') }} · Food sent to the kitchen from Restaurant POS. Values are before levies and are part of Floor sales, not extra to them.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <x-period-filter :period="$period" :from="$from" :to="$to" :areas="count($areaOptions) > 1 ? $areaOptions : []" :area="$area" />
            <x-export-menu route="reports.kitchen.export" :params="['period' => $period, 'from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d'), 'area' => $area]" />
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <x-stat-card label="Items prepared" value="{{ number_format($qty, 0) }}" icon="chef-hat" tone="primary" />
        <x-stat-card label="Kitchen sales" value="{{ number_format($value, 0) }}" icon="trending-up" tone="teal" />
        <x-stat-card label="Avg prep time" value="{{ $avgPrepMinutes === null ? 'n/a' : number_format($avgPrepMinutes, 1).' min' }}" icon="timer" tone="info" />
        <x-stat-card label="Voided / complimentary" value="{{ $voided->count() }} / {{ $complimentary->count() }}" icon="ban" tone="danger" />
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        <div class="card card-pad lg:col-span-2">
            <p class="text-sm font-semibold mb-3">Kitchen sales by day</p>
            <div class="h-64">
                <canvas data-chart='{
                    "type":"bar","color":"#0F6E5E",
                    "labels": {!! $byDay->keys()->map(fn($d) => \Carbon\Carbon::parse($d)->format("d M"))->toJson() !!},
                    "data": {!! $byDay->values()->toJson() !!}
                }'></canvas>
            </div>
        </div>
        <div class="card card-pad">
            <p class="text-sm font-semibold mb-3">By station</p>
            <table class="data-table">
                <thead><tr><th>Station</th><th class="text-right">Items</th><th class="text-right">Avg min</th></tr></thead>
                <tbody>
                    @forelse ($byStation as $name => $row)
                        <tr><td>{{ $name }}</td><td class="text-right">{{ number_format($row['qty'], 0) }}</td><td class="text-right">{{ $row['avg'] === null ? '—' : number_format($row['avg'], 1) }}</td></tr>
                    @empty
                        <tr><td colspan="3" class="text-center text-ink-muted py-6">No kitchen items in this range.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card card-pad">
        <p class="text-sm font-semibold mb-3">Top dishes</p>
        <table class="data-table">
            <thead><tr><th>Dish</th><th class="text-right">Quantity</th><th class="text-right">Sales</th></tr></thead>
            <tbody>
                @forelse ($topDishes as $name => $row)
                    <tr><td class="font-medium">{{ $name }}</td><td class="text-right">{{ number_format($row['qty'], 0) }}</td><td class="text-right font-semibold">{{ number_format($row['value'], 0) }}</td></tr>
                @empty
                    <tr><td colspan="3" class="text-center text-ink-muted py-8">No kitchen items in this range.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection