@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <div class="space-y-8">
        <!-- Welcome Header -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-white tracking-tight">Dashboard</h1>
                <p class="text-slate-400 mt-1">Welcome back, here's what's happening today.</p>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Total Revenue -->
            <div class="glass-card rounded-2xl p-6 relative overflow-hidden group hover:border-blue-500/30 transition-all">
                <div
                    class="absolute -right-4 -top-4 w-24 h-24 bg-blue-500/10 rounded-full blur-2xl group-hover:bg-blue-500/20 transition-all">
                </div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Total Revenue</p>
                        <h3 class="text-2xl font-bold text-white mt-2">₹{{ number_format($totalRevenue, 2) }}</h3>
                        <p
                            class="{{ $revenueChange >= 0 ? 'text-emerald-400' : 'text-rose-400' }} text-xs mt-2 flex items-center gap-1">
                            <i data-lucide="{{ $revenueChange >= 0 ? 'trending-up' : 'trending-down' }}"
                                class="w-3 h-3"></i>
                            {{ $revenueChange >= 0 ? '+' : '' }}{{ number_format($revenueChange, 1) }}% from last month
                        </p>
                    </div>
                    <div
                        class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-500 group-hover:bg-blue-600 group-hover:text-white transition-all shadow-inner">
                        <i data-lucide="dollar-sign" class="w-6 h-6"></i>
                    </div>
                </div>
            </div>

            <!-- Active Users -->
            <div
                class="glass-card rounded-2xl p-6 relative overflow-hidden group hover:border-purple-500/30 transition-all">
                <div
                    class="absolute -right-4 -top-4 w-24 h-24 bg-purple-500/10 rounded-full blur-2xl group-hover:bg-purple-500/20 transition-all">
                </div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Active Users</p>
                        <h3 class="text-2xl font-bold text-white mt-2">{{ number_format($activeUsers) }}</h3>
                        <p
                            class="{{ $usersChange >= 0 ? 'text-emerald-400' : 'text-rose-400' }} text-xs mt-2 flex items-center gap-1">
                            <i data-lucide="{{ $usersChange >= 0 ? 'trending-up' : 'trending-down' }}" class="w-3 h-3"></i>
                            {{ $usersChange >= 0 ? '+' : '' }}{{ number_format($usersChange, 1) }}% from last week
                        </p>
                    </div>
                    <div
                        class="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center text-purple-500 group-hover:bg-purple-600 group-hover:text-white transition-all shadow-inner">
                        <i data-lucide="users" class="w-6 h-6"></i>
                    </div>
                </div>
            </div>

            <!-- New Orders -->
            <div
                class="glass-card rounded-2xl p-6 relative overflow-hidden group hover:border-orange-500/30 transition-all">
                <div
                    class="absolute -right-4 -top-4 w-24 h-24 bg-orange-500/10 rounded-full blur-2xl group-hover:bg-orange-500/20 transition-all">
                </div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">New Orders</p>
                        <h3 class="text-2xl font-bold text-white mt-2">{{ number_format($newOrders) }}</h3>
                        <p
                            class="{{ $ordersChange >= 0 ? 'text-emerald-400' : 'text-rose-400' }} text-xs mt-2 flex items-center gap-1">
                            <i data-lucide="{{ $ordersChange >= 0 ? 'trending-up' : 'trending-down' }}" class="w-3 h-3"></i>
                            {{ $ordersChange >= 0 ? '+' : '' }}{{ number_format($ordersChange, 1) }}% from yesterday
                        </p>
                    </div>
                    <div
                        class="w-12 h-12 bg-orange-500/10 rounded-xl flex items-center justify-center text-orange-500 group-hover:bg-orange-600 group-hover:text-white transition-all shadow-inner">
                        <i data-lucide="shopping-bag" class="w-6 h-6"></i>
                    </div>
                </div>
            </div>

            <!-- Open Tickets -->
            <div class="glass-card rounded-2xl p-6 relative overflow-hidden group hover:border-rose-500/30 transition-all">
                <div
                    class="absolute -right-4 -top-4 w-24 h-24 bg-rose-500/10 rounded-full blur-2xl group-hover:bg-rose-500/20 transition-all">
                </div>
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-slate-500 text-xs font-bold uppercase tracking-wider">Open Tickets</p>
                        <h3 class="text-2xl font-bold text-white mt-2">{{ number_format($openTickets) }}</h3>
                        <p class="text-rose-400 text-xs mt-2 flex items-center gap-1">
                            <i data-lucide="alert-circle" class="w-3 h-3"></i>
                            Requires attention
                        </p>
                    </div>
                    <div
                        class="w-12 h-12 bg-rose-500/10 rounded-xl flex items-center justify-center text-rose-500 group-hover:bg-rose-600 group-hover:text-white transition-all shadow-inner">
                        <i data-lucide="ticket" class="w-6 h-6"></i>
                    </div>
                </div>
                <a href="{{ route('admin.tickets.index') }}" class="absolute inset-0"></a>
            </div>
        </div>

        <!-- Charts/Main Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div
                class="lg:col-span-2 glass-card rounded-3xl p-8 h-[400px] flex flex-col items-center justify-center border-dashed border-slate-700">
                <div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mb-4">
                    <i data-lucide="bar-chart-3" class="w-8 h-8 text-slate-500"></i>
                </div>
                <h4 class="text-lg font-bold text-white">Revenue Activity</h4>
                <p class="text-slate-500 text-sm mt-2 text-center max-w-xs">Dynamic charts will be integrated here to show
                    real-time performance metrics.</p>
            </div>

            <!-- Recent Activity -->
            <div class="glass-card rounded-3xl p-8">
                <h4 class="text-lg font-bold text-white mb-6">Recent Activity</h4>
                <div class="space-y-6">
                    @forelse($activities as $item)
                        <div class="flex gap-4">
                            <div
                                class="w-10 h-10 shrink-0 bg-{{ $item['color'] }}-500/10 text-{{ $item['color'] }}-500 rounded-xl flex items-center justify-center">
                                <i data-lucide="{{ $item['icon'] }}" class="w-5 h-5"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <h5 class="text-sm font-bold text-slate-200">{{ $item['title'] }}</h5>
                                    <span class="text-[10px] text-slate-500">{{ $item['time'] }}</span>
                                </div>
                                <p class="text-xs text-slate-500 mt-1">{{ $item['desc'] }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-slate-500 text-sm text-center">No recent activity found.</p>
                    @endforelse
                </div>
                <button
                    class="w-full mt-8 py-3 rounded-xl border border-slate-700 text-slate-400 text-xs font-bold hover:bg-slate-800 transition-all uppercase tracking-widest">
                    View All Activity
                </button>
            </div>
        </div>
    </div>
@endsection