@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
@php
    $u = auth()->user();
    $showOverview = $u->can('widget.chart_weekly') || $u->can('widget.chart_payments');
    $showBreakdown = $u->can('widget.tab_breakdown');
    $showStaff = $u->can('widget.staff_cashier') || $u->can('widget.staff_waiter') || $u->can('widget.staff_bartender');
    $showStock = $u->can('widget.tab_low_stock');
    $firstTab = $showOverview ? 'overview' : ($showBreakdown ? 'breakdown' : ($showStaff ? 'staff' : 'stock'));
@endphp
<div class="space-y-6" x-data="tabs('{{ $firstTab }}')" x-init="$watch('current', () => setTimeout(() => window.renderCharts(), 30))">

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold">{{ ['today' => "Today's Overview", 'week' => "This Week's Overview", 'month' => "This Month's Overview", 'custom' => 'Overview'][$period] ?? 'Overview' }}</h1>
            <p class="text-sm text-ink-muted">
                @if ($from->isSameDay($to)) {{ $from->format('l, d F Y') }} @else {{ $from->format('d M Y') }} — {{ $to->format('d M Y') }} @endif
                · {{ config('pos.company.currency_symbol') }} figures · {{ $areaOptions[$area] ?? 'No area' }}
            </p>
        </div>
        <div class="flex items-center gap-2">
            <x-period-filter :period="$period" :from="$from" :to="$to" :areas="$areaOptions" :area="$area" />
            <x-export-menu route="dashboard.export" :params="['period' => $period, 'from' => $from->format('Y-m-d'), 'to' => $to->format('Y-m-d'), 'area' => $area]" />
        </div>
    </div>

    {{-- Stat cards: each one only appears if this role may see it --}}
    @php
        $sym = config('pos.company.currency_symbol');
        $statCards = collect([
            ['widget.sales_total', 'Total Sales', $sym.' '.number_format($grossSales, 0), 'trending-up', 'primary'],
            ['widget.gross_profit', 'Gross Profit', $sym.' '.number_format($grossProfit, 0), 'coins', 'success'],
            ['widget.transactions', 'Transactions', number_format($transactionCount), 'receipt-text', 'info'],
            ['widget.levy', 'Levy Collected', $sym.' '.number_format($todaysLevy, 0), 'percent', 'accent'],
            ['widget.stock_value', 'Stock Value', $sym.' '.number_format($stockValue, 0), 'boxes', 'primary'],
            ['widget.low_stock_count', 'Low Stock Items', (string) $lowStockCount, 'triangle-alert', 'danger'],
            ['widget.expenses', 'Expenses', $sym.' '.number_format($expenses, 0), 'wallet', 'accent'],
            ['widget.departments', 'Departments Active', (string) $salesByDepartment->count(), 'layout-grid', 'info'],
        ])->filter(fn ($c) => auth()->user()->can($c[0]))
          // Expenses aren't tracked per area, so profit is only shown for the whole business.
          ->reject(fn ($c) => $c[0] === 'widget.gross_profit' && $area !== 'all');
    @endphp
    @if ($statCards->isNotEmpty())
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            @foreach ($statCards as [$perm, $label, $value, $icon, $tone])
                <x-stat-card :label="$label" :value="$value" :icon="$icon" :tone="$tone" />
            @endforeach
        </div>
    @endif

    {{-- Tabs --}}
    @if ($showOverview || $showBreakdown || $showStaff || $showStock)
    <div class="card">
        <div class="flex border-b border-border px-2 overflow-x-auto">
            @if ($showOverview)<button class="tab-btn" :class="is('overview') && 'active'" x-on:click="set('overview')">Overview</button>@endif
            @if ($showBreakdown)<button class="tab-btn" :class="is('breakdown') && 'active'" x-on:click="set('breakdown')">Sales Breakdown</button>@endif
            @if ($showStaff)<button class="tab-btn" :class="is('staff') && 'active'" x-on:click="set('staff')">Staff Performance</button>@endif
            @if ($showStock)<button class="tab-btn" :class="is('stock') && 'active'" x-on:click="set('stock')">Low Stock</button>@endif
        </div>

        <div class="p-5">
            {{-- Overview tab --}}
            @if ($showOverview)
            <div x-show="is('overview')" x-cloak>
                <div class="grid lg:grid-cols-3 gap-6">
                    @can('widget.chart_weekly')
                    <div class="{{ auth()->user()->can('widget.chart_payments') ? 'lg:col-span-2' : 'lg:col-span-3' }}">
                        <p class="text-sm font-semibold text-ink mb-3">Sales — last 7 days</p>
                        <div class="h-64">
                            <canvas data-chart='{
                                "type":"line","fill":true,"color":"#0F6E5E",
                                "labels": {!! $weekly->pluck('label')->toJson() !!},
                                "data": {!! $weekly->pluck('total')->toJson() !!}
                            }'></canvas>
                        </div>
                    </div>
                    @endcan
                    @can('widget.chart_payments')
                    <div>
                        <p class="text-sm font-semibold text-ink mb-3">Payment methods</p>
                        <div class="h-64">
                            <canvas data-chart='{
                                "type":"doughnut","legend":true,
                                "labels": {!! $salesByMethod->keys()->map(fn($k)=>ucfirst($k))->toJson() !!},
                                "datasets": [{"data": {!! $salesByMethod->values()->toJson() !!}, "backgroundColor": ["#0F6E5E","#C98A2C","#2A6F97","#8B978F","#B3402F"]}]
                            }'></canvas>
                        </div>
                    </div>
                    @endcan
                </div>
            </div>
            @endif

            {{-- Breakdown tab --}}
            @if ($showBreakdown)
            <div x-show="is('breakdown')" x-cloak>
                <div class="grid lg:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm font-semibold text-ink mb-3">Sales by department</p>
                        <div class="h-72">
                            <canvas data-chart='{
                                "type":"bar","color":"#0F6E5E",
                                "labels": {!! $salesByDepartment->keys()->toJson() !!},
                                "data": {!! $salesByDepartment->values()->toJson() !!}
                            }'></canvas>
                        </div>
                    </div>
                    <div class="space-y-3">
                        @foreach ($salesByDepartment as $dept => $total)
                            <div class="flex items-center justify-between p-3 rounded-lg border border-border">
                                <div class="flex items-center gap-2.5">
                                    <span class="w-2 h-2 rounded-full bg-primary-500"></span>
                                    <span class="text-sm font-medium">{{ $dept }}</span>
                                </div>
                                <span class="text-sm font-semibold">{{ config('pos.company.currency_symbol') }} {{ number_format($total, 0) }}</span>
                            </div>
                        @endforeach
                        @if ($salesByDepartment->isEmpty())
                            <p class="text-sm text-ink-muted">No sales recorded for this date yet.</p>
                        @endif
                    </div>
                </div>
            </div>

            @endif

            {{-- Staff tab --}}
            @if ($showStaff)
            <div x-show="is('staff')" x-cloak class="grid sm:grid-cols-3 gap-6">
                @can('widget.staff_cashier')
                <div>
                    <p class="text-sm font-semibold text-ink mb-3">Sales by cashier</p>
                    <table class="data-table">
                        <thead><tr><th>Cashier</th><th class="text-right">Sales</th></tr></thead>
                        <tbody>
                        @forelse ($salesByCashier as $name => $total)
                            <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($total, 0) }}</td></tr>
                        @empty
                            <tr><td colspan="2" class="text-ink-muted">No data yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @endcan
                @can('widget.staff_waiter')
                <div>
                    <p class="text-sm font-semibold text-ink mb-3">Sales by waiter</p>
                    <table class="data-table">
                        <thead><tr><th>Waiter</th><th class="text-right">Sales</th></tr></thead>
                        <tbody>
                        @forelse ($salesByWaiter as $name => $total)
                            <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($total, 0) }}</td></tr>
                        @empty
                            <tr><td colspan="2" class="text-ink-muted">No data yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @endcan
                @can('widget.staff_bartender')
                <div>
                    <p class="text-sm font-semibold text-ink mb-3">Sales by bartender</p>
                    <table class="data-table">
                        <thead><tr><th>Bartender</th><th class="text-right">Sales</th></tr></thead>
                        <tbody>
                        @forelse ($salesByBartender as $name => $total)
                            <tr><td>{{ $name }}</td><td class="text-right font-semibold">{{ number_format($total, 0) }}</td></tr>
                        @empty
                            <tr><td colspan="2" class="text-ink-muted">No data yet.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
                @endcan
            </div>
            @endif

            {{-- Low stock tab --}}
            @if ($showStock)
            <div x-show="is('stock')" x-cloak>
                <div class="space-y-2">
                    @forelse ($lowStockItems as $stock)
                        <div class="flex items-center justify-between p-3 rounded-lg border border-border">
                            <div>
                                <p class="text-sm font-semibold">{{ $stock->product->name }}</p>
                                <p class="text-xs text-ink-muted">{{ $stock->store->name ?? '—' }}</p>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-sm">{{ $stock->quantity_on_hand }} {{ $stock->product->unit->abbreviation ?? '' }}</span>
                                <x-badge color="rose" icon="triangle-alert">Reorder</x-badge>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-ink-muted">Nothing is below reorder level. Good shape.</p>
                    @endforelse
                </div>
            </div>
            @endif
        </div>
    </div>
    @endif

    {{-- Accordion: quick reference --}}
    @can('widget.quick_reference')
    <div class="card" x-data="accordion()">
        <div class="px-5 py-4 border-b border-border">
            <h3 class="font-display font-bold text-sm">Shift-close quick reference</h3>
        </div>
        <div class="divide-y divide-border">
            @foreach ([
                ['q' => 'How is expected cash calculated?', 'a' => 'Opening float + cash sales recorded on the shift − approved expenses paid from the till − withdrawals. Any variance against the actual cash count is flagged for manager review.'],
                ['q' => 'Where do VAT and levy rates come from?', 'a' => 'Both are read live from Settings → Taxes & Levies. Nothing is hard-coded, so a rate change or a new levy applies to the next sale automatically — no deployment needed.'],
                ['q' => 'What happens when a recipe-based item is sold?', 'a' => 'The Chicken Burger example: selling one unit automatically deducts bun, chicken, tomato, lettuce and sauce from the kitchen store based on the recipe quantities, and food cost is derived from ingredient cost prices.'],
            ] as $i => $faq)
                <div>
                    <button class="w-full flex items-center justify-between px-5 py-3.5 text-left" x-on:click="toggle({{ $i }})">
                        <span class="text-sm font-medium text-ink">{{ $faq['q'] }}</span>
                        <i data-lucide="chevron-down" class="w-4 h-4 text-ink-faint transition-transform" :class="isOpen({{ $i }}) && 'rotate-180'"></i>
                    </button>
                    <div x-show="isOpen({{ $i }})" x-collapse x-cloak class="px-5 pb-4 text-sm text-ink-muted">
                        {{ $faq['a'] }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endcan
</div>
@endsection