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

@section('content')
    <div class="mb-6 hidden items-center justify-between lg:flex">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-900">Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }}, {{ Str::before(auth()->user()->name, ' ') }} 👋</h1>
            <p class="text-sm text-slate-500">Here's what's happening at Epelcon Hospitality today, {{ now()->format('l j F Y') }}.</p>
        </div>
        <a href="{{ route('epelcon.orders.pos') }}" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ New Order (POS)</a>
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
        <div class="rounded-2xl bg-gradient-to-br from-indigo-600 to-violet-600 p-4 text-white shadow-lg shadow-indigo-600/20 sm:p-5">
            <p class="text-xs font-semibold uppercase tracking-wide text-indigo-200">Occupancy</p>
            <p class="mt-1 text-3xl font-extrabold">{{ $stats['occupancy'] }}%</p>
            <p class="mt-1 text-xs text-indigo-200">{{ $stats['rooms_occupied'] }}/{{ $stats['rooms_total'] }} rooms occupied · {{ $stats['in_house'] }} in-house</p>
        </div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 sm:p-5">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Revenue today</p>
            <p class="mt-1 text-2xl font-extrabold text-emerald-600 sm:text-3xl">@money($stats['revenue_today'])</p>
            <p class="mt-1 text-xs text-slate-400">@money($stats['revenue_month']) this month</p>
        </div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 sm:p-5">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Arrivals / Departures</p>
            <p class="mt-1 text-2xl font-extrabold text-slate-900 sm:text-3xl">{{ $stats['arrivals_today'] }} <span class="text-slate-300">/</span> {{ $stats['departures_today'] }}</p>
            <p class="mt-1 text-xs text-slate-400">expected today</p>
        </div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 sm:p-5">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Open orders</p>
            <p class="mt-1 text-2xl font-extrabold text-slate-900 sm:text-3xl">{{ $stats['orders_open'] }}</p>
            <p class="mt-1 text-xs text-slate-400">Kitchen {{ $stats['kitchen_queue'] }} · Bar {{ $stats['bar_queue'] }}</p>
        </div>
    </div>

    {{-- Alert chips --}}
    <div class="no-scrollbar mt-4 flex gap-2 overflow-x-auto pb-1">
        @if ($stats['low_stock'] > 0)
            <a href="{{ route('epelcon.inventory.index', ['filter' => 'low']) }}" class="flex shrink-0 items-center gap-1.5 rounded-full bg-amber-100 px-3.5 py-1.5 text-xs font-bold text-amber-800">⚠️ {{ $stats['low_stock'] }} low-stock item{{ $stats['low_stock'] === 1 ? '' : 's' }}</a>
        @endif
        @if ($stats['housekeeping_pending'] > 0)
            <a href="{{ route('epelcon.housekeeping.index') }}" class="flex shrink-0 items-center gap-1.5 rounded-full bg-sky-100 px-3.5 py-1.5 text-xs font-bold text-sky-800">🧹 {{ $stats['housekeeping_pending'] }} housekeeping task{{ $stats['housekeeping_pending'] === 1 ? '' : 's' }}</a>
        @endif
        <span class="flex shrink-0 items-center gap-1.5 rounded-full bg-slate-200 px-3.5 py-1.5 text-xs font-bold text-slate-600">💸 @money($stats['expenses_month']) expenses this month</span>
        <span class="flex shrink-0 items-center gap-1.5 rounded-full bg-slate-200 px-3.5 py-1.5 text-xs font-bold text-slate-600">🧾 {{ $stats['orders_today'] }} orders today</span>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-3">
        {{-- Revenue chart --}}
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="font-bold text-slate-900">Revenue vs Expenses <span class="ml-1 text-xs font-medium text-slate-400">last 14 days</span></h2>
            </div>
            <div class="h-64"><canvas id="revChart"></canvas></div>
        </div>

        {{-- Today's arrivals --}}
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <h2 class="mb-3 font-bold text-slate-900">Today's arrivals</h2>
            <div class="space-y-3">
                @forelse ($arrivals as $arrival)
                    <a href="{{ route('epelcon.bookings.show', $arrival) }}" class="flex items-center gap-3 rounded-xl bg-slate-50 p-3 hover:bg-indigo-50">
                        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700">{{ strtoupper(substr($arrival->customer->name, 0, 2)) }}</div>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-semibold text-slate-800">{{ $arrival->customer->name }}</p>
                            <p class="text-xs text-slate-500">Room {{ $arrival->room->number ?? 'TBA' }} · {{ $arrival->nights() }} night{{ $arrival->nights() === 1 ? '' : 's' }}</p>
                        </div>
                        <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-[10px] font-bold uppercase text-emerald-700">{{ $arrival->status }}</span>
                    </a>
                @empty
                    <p class="rounded-xl bg-slate-50 p-4 text-center text-sm text-slate-400">No arrivals expected today.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-3">
        {{-- Recent orders --}}
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 lg:col-span-2">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="font-bold text-slate-900">Latest orders</h2>
                <a href="{{ route('epelcon.orders.index') }}" class="text-xs font-bold text-indigo-600 hover:underline">View all →</a>
            </div>
            <div class="divide-y divide-slate-100">
                @forelse ($recentOrders as $order)
                    <a href="{{ route('epelcon.orders.show', $order) }}" class="flex items-center gap-3 py-2.5 hover:bg-slate-50">
                        <span class="w-24 shrink-0 font-mono text-xs font-bold text-indigo-600">{{ $order->code }}</span>
                        <span class="hidden text-xs text-slate-500 sm:inline">{{ $order->items->count() }} item{{ $order->items->count() === 1 ? '' : 's' }}</span>
                        <span class="flex-1 truncate text-sm text-slate-700">{{ $order->displayName() }} · {{ str_replace('_', ' ', $order->type) }}</span>
                        <span class="text-sm font-bold text-slate-900">@money($order->total)</span>
                        @php $badge = ['pending'=>'amber','confirmed'=>'sky','preparing'=>'amber','ready'=>'violet','served'=>'emerald','completed'=>'emerald','cancelled'=>'rose'][$order->status] ?? 'slate'; @endphp
                        <span class="rounded-full bg-{{ $badge }}-100 px-2 py-0.5 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ $order->status }}</span>
                    </a>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No orders yet today.</p>
                @endforelse
            </div>
        </div>

        {{-- Low stock + activity --}}
        <div class="space-y-5">
            @if ($lowStockItems->isNotEmpty())
                <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                    <h2 class="mb-3 font-bold text-slate-900">Low stock</h2>
                    <div class="space-y-2">
                        @foreach ($lowStockItems as $item)
                            <div class="flex items-center justify-between rounded-lg bg-amber-50 px-3 py-2">
                                <span class="text-sm font-medium text-slate-700">{{ $item->name }}</span>
                                <span class="text-xs font-bold text-amber-700">{{ $item->quantity + 0 }} {{ $item->unit }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <h2 class="mb-3 font-bold text-slate-900">Recent activity</h2>
                <div class="space-y-2.5">
                    @forelse ($activity as $log)
                        <div class="flex gap-2.5 text-xs">
                            <span class="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-indigo-400"></span>
                            <p class="text-slate-600"><span class="font-semibold text-slate-800">{{ $log->user->name ?? 'System' }}</span> {{ $log->action }}{{ $log->description ? ' — ' . $log->description : '' }} <span class="text-slate-400">· {{ $log->created_at->diffForHumans(short: true) }}</span></p>
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">No activity recorded yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const ctx = document.getElementById('revChart');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($trend->pluck('label')),
            datasets: [
                { label: 'Revenue', data: @json($trend->pluck('revenue')), borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,.08)', fill: true, tension: .4, borderWidth: 2.5, pointRadius: 0 },
                { label: 'Expenses', data: @json($trend->pluck('expenses')), borderColor: '#f43f5e', backgroundColor: 'transparent', tension: .4, borderWidth: 2, pointRadius: 0, borderDash: [5, 4] },
            ],
        },
        options: {
            maintainAspectRatio: false,
            plugins: { legend: { labels: { boxWidth: 12, usePointStyle: true, font: { family: '"Plus Jakarta Sans"' } } } },
            scales: {
                y: { ticks: { callback: v => '{{ $CUR }}' + (v >= 1000 ? (v / 1000) + 'k' : v) }, grid: { color: '#f1f5f9' } },
                x: { grid: { display: false } },
            },
        },
    });
});
</script>
@endpush
