@extends('layouts.app')
@section('title', 'Sales 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">Sales Reports</h1>
            <p class="text-sm text-ink-muted">{{ $from->format('d M Y') }} — {{ $to->format('d M Y') }} · {{ $area === 'all' ? 'Restaurant + Bar combined' : ($areaOptions[$area] ?? '') }}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <x-period-filter :period="$period" :from="$from" :to="$to" :areas="$areaOptions" :area="$area" />
            <x-export-menu route="reports.sales.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="Total revenue" value="{{ number_format($restaurantRevenue + $barRevenue, 0) }}" icon="trending-up" tone="primary" />
        <x-stat-card label="Restaurant sales" value="{{ number_format($restaurantRevenue, 0) }}" icon="utensils" tone="teal" />
        <x-stat-card label="Bar sales" value="{{ number_format($barRevenue, 0) }}" icon="martini" tone="violet" />
        <x-stat-card label="Transactions" value="{{ $orders->count() + $barTabs->count() }}" icon="receipt-text" tone="info" />
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <x-stat-card label="Discounts given" value="{{ number_format($discountsTotal, 0) }}" icon="tag" tone="amber" />
        <x-stat-card label="Voided orders/tabs" value="{{ $voidedOrders + $voidedTabs }}" icon="ban" tone="danger" />
        <x-stat-card label="Voided items" value="{{ $voidedItems }}" icon="x-circle" tone="danger" />
        <x-stat-card label="Complimentary" value="{{ $complimentaryCount }} ({{ number_format($complimentaryValue, 0) }})" icon="gift" tone="rose" />
    </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">Revenue by day (restaurant + bar)</p>
            <div class="h-72">
                <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">Revenue by category</p>
            <div class="h-72">
                <canvas data-chart='{
                    "type":"pie","legend":true,
                    "labels": {!! $byCategory->keys()->toJson() !!},
                    "datasets": [{"data": {!! $byCategory->values()->toJson() !!}, "backgroundColor": ["#0F6E5E","#C98A2C","#2A6F97","#8B978F","#B3402F","#63AB9B"]}]
                }'></canvas>
            </div>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-6">
        <div class="card card-pad">
            <p class="text-sm font-semibold mb-3">Sales by waiter</p>
            <table class="data-table">
                <tbody>
                    @forelse ($salesByWaiter->sortDesc() as $name => $amount)
                        <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($amount, 0) }}</td></tr>
                    @empty
                        <tr><td class="text-center text-ink-muted py-4" colspan="2">No restaurant sales in this range.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card card-pad">
            <p class="text-sm font-semibold mb-3">Sales by bartender</p>
            <table class="data-table">
                <tbody>
                    @forelse ($salesByBartender->sortDesc() as $name => $amount)
                        <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($amount, 0) }}</td></tr>
                    @empty
                        <tr><td class="text-center text-ink-muted py-4" colspan="2">No bar sales in this range.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card card-pad">
        <p class="text-sm font-semibold mb-3">Sales by cashier</p>
        <table class="data-table">
            <tbody>
                @forelse ($salesByCashier->sortDesc() as $name => $amount)
                    <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($amount, 0) }}</td></tr>
                @empty
                    <tr><td class="text-center text-ink-muted py-4" colspan="2">No sales in this range.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="card card-pad">
        <p class="text-sm font-semibold mb-3">Top-selling products (restaurant + bar)</p>
        <table class="data-table">
            <thead><tr><th>Product</th><th class="text-right">Qty sold</th><th class="text-right">Revenue</th></tr></thead>
            <tbody>
                @forelse ($topProducts as $name => $row)
                    <tr><td class="font-medium">{{ $name }}</td><td class="text-right">{{ $row['qty'] }}</td><td class="text-right font-semibold">{{ number_format($row['revenue'], 0) }}</td></tr>
                @empty
                    <tr><td colspan="3" class="text-center text-ink-muted py-8">No sales in this range.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection