@extends('layouts.admin')

@section('title', 'Dashboard')
@section('subtitle', now()->format('l, F d, Y'))

@section('content')
    <div class="space-y-6">
        {{-- Stats Cards --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {{-- Today's Sales --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">💰</span>
                    <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">Today</span>
                </div>
                <p class="text-sm text-slate-500 mb-1">Today's Sales</p>
                <p class="text-2xl font-bold text-slate-800">LKR {{ number_format($todaySales, 2) }}</p>
            </div>

            {{-- Today's Invoices --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">🧾</span>
                    <span class="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-full">Today</span>
                </div>
                <p class="text-sm text-slate-500 mb-1">Invoices</p>
                <p class="text-2xl font-bold text-slate-800">{{ number_format($todayInvoices) }}</p>
            </div>

            {{-- Today's Profit --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">📈</span>
                    <span class="text-xs font-medium text-purple-600 bg-purple-50 px-2 py-1 rounded-full">Profit</span>
                </div>
                <p class="text-sm text-slate-500 mb-1">Today's Profit</p>
                <p class="text-2xl font-bold text-slate-800">LKR {{ number_format($todayProfit, 2) }}</p>
            </div>

            {{-- Monthly Sales --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-3xl">📊</span>
                    <span
                        class="text-xs font-medium text-amber-600 bg-amber-50 px-2 py-1 rounded-full">{{ now()->format('M') }}</span>
                </div>
                <p class="text-sm text-slate-500 mb-1">This Month</p>
                <p class="text-2xl font-bold text-slate-800">LKR {{ number_format($monthSales, 2) }}</p>
            </div>
        </div>

        {{-- Charts and Lists --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {{-- Weekly Sales Chart --}}
            <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-4">Weekly Sales</h3>
                <div class="h-64 flex items-end gap-2">
                    @php
                        $maxSale = max($weeklyData ?: [1]);
                        $days = [];
                        for ($i = 6; $i >= 0; $i--) {
                            $date = now()->subDays($i)->format('Y-m-d');
                            $days[$date] = $weeklyData[$date] ?? 0;
                        }
                    @endphp
                    @foreach($days as $date => $amount)
                        <div class="flex-1 flex flex-col items-center gap-2">
                            <div class="w-full bg-slate-100 rounded-t-lg relative" style="height: 200px;">
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg transition-all hover:from-blue-700 hover:to-blue-500"
                                    style="height: {{ $maxSale > 0 ? ($amount / $maxSale * 100) : 0 }}%"
                                    title="LKR {{ number_format($amount, 2) }}"></div>
                            </div>
                            <span class="text-xs text-slate-500">{{ \Carbon\Carbon::parse($date)->format('D') }}</span>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Low Stock Alerts --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">Low Stock Alerts</h3>
                    <span class="text-amber-500 text-xl">⚠️</span>
                </div>
                @if($lowStockProducts->count() > 0)
                    <div class="space-y-3">
                        @foreach($lowStockProducts as $stock)
                            <div class="flex items-center justify-between py-2 border-b border-slate-100 last:border-0">
                                <div>
                                    <p class="font-medium text-slate-800 text-sm">{{ $stock->product->name_en }}</p>
                                    <p class="text-xs text-slate-500">Min: {{ $stock->product->min_stock }}</p>
                                </div>
                                <span class="px-3 py-1 bg-red-50 text-red-600 rounded-full text-sm font-medium">
                                    {{ number_format($stock->quantity) }} {{ $stock->product->unit }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8 text-slate-400">
                        <p class="text-4xl mb-2">✅</p>
                        <p>All stock levels OK</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- Recent Transactions --}}
        <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800">Recent Transactions</h3>
                @if($unsyncedCount > 0)
                    <span class="flex items-center gap-2 px-3 py-1 bg-amber-50 text-amber-600 rounded-full text-sm">
                        <span class="animate-pulse">🔄</span>
                        {{ $unsyncedCount }} pending sync
                    </span>
                @endif
            </div>

            @if($recentInvoices->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
                                <th class="pb-3 font-medium">Invoice #</th>
                                <th class="pb-3 font-medium">Cashier</th>
                                <th class="pb-3 font-medium">Items</th>
                                <th class="pb-3 font-medium">Total</th>
                                <th class="pb-3 font-medium">Time</th>
                                <th class="pb-3 font-medium">Status</th>
                            </tr>
                        </thead>
                        <tbody class="text-sm">
                            @foreach($recentInvoices as $invoice)
                                <tr class="border-b border-slate-100 hover:bg-slate-50">
                                    <td class="py-3 font-mono text-blue-600">{{ $invoice->invoice_number }}</td>
                                    <td class="py-3">{{ $invoice->user->name }}</td>
                                    <td class="py-3">{{ $invoice->items_count ?? $invoice->items->count() }} items</td>
                                    <td class="py-3 font-semibold">LKR {{ number_format($invoice->total, 2) }}</td>
                                    <td class="py-3 text-slate-500">{{ $invoice->created_at->format('H:i') }}</td>
                                    <td class="py-3">
                                        @if($invoice->status === 'completed')
                                            <span class="px-2 py-1 bg-green-50 text-green-600 rounded-full text-xs">Paid</span>
                                        @else
                                            <span class="px-2 py-1 bg-amber-50 text-amber-600 rounded-full text-xs">{{ ucfirst($invoice->status) }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-12 text-slate-400">
                    <p class="text-5xl mb-4">📋</p>
                    <p>No transactions yet</p>
                </div>
            @endif
        </div>
    </div>
@endsection