@extends('layouts.dashboard')
@section('title', 'Dashboard')
@section('page-title', 'Sales Operations')
@section('content')
<div class="snyt-page">
    <section class="snyt-hero">
        <div>
            <h1>Good day, {{ auth()->user()->name }}</h1>
            <p>One clear view of sales, catalogs, stock and field execution.</p>
        </div>
        <div class="snyt-page-header__actions">
            <x-ui.button :href="route('orders.index')" variant="secondary">View orders</x-ui.button>
            @if(auth()->user()->isAdmin())
                <x-ui.button :href="route('import-center.create')">Open Import Center</x-ui.button>
            @endif
        </div>
    </section>

    <section class="snyt-kpis">
        <x-ui.metric label="Products in main catalog" :value="number_format($regularProducts)" :hint="$regularCatalog ? 'Catalog active and available' : 'Catalog needs attention'" tone="cyan" />
        <x-ui.metric label="Customer orders" :value="number_format($ordersCount ?? 0)" :hint="number_format($todayOrders ?? 0).' created today'" />
        <x-ui.metric label="Today sales" :value="number_format($todaySales ?? 0, 2)" hint="AED from daily reports" tone="success" />
        <x-ui.metric label="Today collections" :value="number_format($todayCollections ?? 0, 2)" hint="AED collected by the field team" tone="cyan" />
    </section>

    @if(auth()->user()->canManageOperations())
    <section class="mb-5"><x-ui.card><div class="flex flex-wrap items-center justify-between gap-3"><div><p class="font-black text-lg">STI awaiting STR</p><p class="text-sm opacity-60">Open Focus stock transfers remain visible until receipt is confirmed.</p></div><div class="flex items-center gap-3"><span class="text-3xl font-black">{{ number_format($pendingWarehouseSti ?? 0) }}</span><x-ui.button :href="route('warehouse-operations.index')" variant="secondary">Open Warehouse Operations</x-ui.button></div></div></x-ui.card></section>
    @endif

    <section class="snyt-dashboard-split">
        <x-ui.card>
            <x-ui.section-header title="Sales team performance" subtitle="Inventory availability and current activity">
                <x-slot:action><x-ui.button :href="route('salesmen.index')" variant="secondary">View team</x-ui.button></x-slot:action>
            </x-ui.section-header>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead><tr><th>Salesman</th><th>Areas</th><th>Products</th><th>Van quantity</th><th>Updated</th></tr></thead>
                    <tbody>
                    @forelse($salesmen as $salesman)
                        @php($stats = $salesmanStats[$salesman->id])
                        <tr>
                            <td><div class="flex items-center gap-3"><div class="avatar placeholder"><div class="w-9 rounded-lg bg-primary/10 text-primary"><span class="font-bold">{{ strtoupper(substr($salesman->name, 0, 1)) }}</span></div></div><div class="font-bold">{{ $salesman->name }}</div></div></td>
                            <td class="text-sm text-slate-500">{{ $salesman->areas->pluck('name')->join(', ') ?: 'Not assigned' }}</td>
                            <td>{{ number_format($stats['products']) }}</td>
                            <td class="font-bold">{{ number_format($stats['qty']) }}</td>
                            <td class="text-sm text-slate-500">{{ $stats['updated_at'] ? \Carbon\Carbon::parse($stats['updated_at'])->diffForHumans() : '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5"><x-ui.empty-state title="No active salesmen" message="Active team members will appear here." /></td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </x-ui.card>

        <div class="grid gap-4">
            <x-ui.card>
                <x-ui.section-header title="Today’s field activity" />
                <div class="snyt-activity-grid">
                    <div class="snyt-activity"><div class="snyt-metric__label">Visits</div><div class="snyt-metric__value snyt-tone-cyan">{{ number_format($todayVisits ?? 0) }}</div></div>
                    <div class="snyt-activity"><div class="snyt-metric__label">Completed routes</div><div class="snyt-metric__value snyt-tone-success">{{ number_format($completedRoutes ?? 0) }}</div></div>
                </div>
                <x-ui.button class="mt-4 w-full" :href="route('admin.routes.index')" variant="secondary">Open routes & visits</x-ui.button>
            </x-ui.card>
            <x-ui.card>
                <x-ui.section-header title="System readiness" />
                @foreach($tasks as $task)
                    <a href="{{ $task['url'] }}" class="flex items-center gap-3 py-3 border-b border-[var(--snyt-border)] last:border-0">
                        <x-ui.status-badge :status="$task['status']" />
                        <span class="text-sm font-semibold flex-1">{{ $task['title'] }}</span><span>›</span>
                    </a>
                @endforeach
            </x-ui.card>
        </div>
    </section>

    <section class="snyt-dashboard-actions">
        @if(auth()->user()?->canManageOperations())<x-ui.card class="snyt-action-card"><a class="snyt-action-card__link" href="{{ route('stock-requests.index') }}"><span class="snyt-action-card__context">Warehouse Operations</span><span class="snyt-action-card__row"><strong>Stock requests</strong><span aria-hidden="true">→</span></span></a></x-ui.card>@endif
        <x-ui.card class="snyt-action-card"><a class="snyt-action-card__link" href="{{ route('catalog-center.index') }}"><span class="snyt-action-card__context">Catalog Center</span><span class="snyt-action-card__row"><strong>Manage catalogs</strong><span aria-hidden="true">→</span></span></a></x-ui.card>
        <x-ui.card class="snyt-action-card"><a class="snyt-action-card__link" href="{{ route('customers.index') }}"><span class="snyt-action-card__context">Customers</span><span class="snyt-action-card__row"><strong>Customer directory</strong><span aria-hidden="true">→</span></span></a></x-ui.card>
        <x-ui.card class="snyt-action-card"><a class="snyt-action-card__link" href="{{ route('admin.notifications.index') }}"><span class="snyt-action-card__context">Field alerts</span><span class="snyt-action-card__row"><strong>Send notification</strong><span aria-hidden="true">→</span></span></a></x-ui.card>
        <x-ui.card class="snyt-action-card"><a class="snyt-action-card__link" href="{{ route('products.index') }}"><span class="snyt-action-card__context">Image readiness</span><span class="snyt-action-card__row"><strong>{{ number_format($missingImages) }} missing images</strong><span aria-hidden="true">→</span></span></a></x-ui.card>
    </section>
</div>
@endsection