@extends('layouts.dashboard')

@section('page_title', 'Dashboard Overview')

@section('dashboard_content')
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
    <div class="stat-card glass-panel">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-emerald/10 rounded-xl text-emerald">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            </div>
            <span class="text-xs font-bold text-white/20 uppercase tracking-widest">Active Orders</span>
        </div>
        <div class="text-3xl font-black text-white">{{ $stats['active'] ?? 0 }}</div>
        <div class="text-white/40 text-xs mt-1">Pending service fulfillment</div>
    </div>

    <div class="stat-card glass-panel">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-blue-500/10 rounded-xl text-blue-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <span class="text-xs font-bold text-white/20 uppercase tracking-widest">Completed</span>
        </div>
        <div class="text-3xl font-black text-white">{{ $stats['completed'] ?? 0 }}</div>
        <div class="text-white/40 text-xs mt-1">Successfully delivered</div>
    </div>

    <div class="stat-card glass-panel">
        <div class="flex items-center justify-between mb-4">
            <div class="p-3 bg-purple-500/10 rounded-xl text-purple-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <span class="text-xs font-bold text-white/20 uppercase tracking-widest">Invoices</span>
        </div>
        <div class="text-3xl font-black text-white">{{ $stats['invoices'] ?? 0 }}</div>
        <div class="text-white/40 text-xs mt-1">Pending payments</div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <!-- Recent Orders -->
    <div class="glass-panel rounded-3xl p-8">
        <div class="flex items-center justify-between mb-8">
            <h3 class="text-lg font-bold text-white">Recent Orders</h3>
            <a href="{{ route('user.orders') }}" class="text-xs uppercase font-black text-emerald hover:underline">View All</a>
        </div>

        <div class="space-y-4">
            @forelse($orders ?? [] as $order)
                <div class="p-4 bg-white/5 rounded-2xl border border-white/5 flex items-center justify-between group hover:bg-white/10 transition-all">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center text-white/40 group-hover:text-emerald transition-colors">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        </div>
                        <div>
                            <div class="font-bold text-white">{{ $order->service->name ?? 'Compliance Service' }}</div>
                            <div class="text-xs text-white/40">#{{ $order->order_number }} • {{ $order->created_at->diffForHumans() }}</div>
                        </div>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                        @if($order->payment_status === 'unpaid')
                            <span class="px-3 py-1 rounded-full bg-red-500/20 text-red-400 text-[10px] font-black uppercase tracking-widest">
                                ❌ Unpaid
                            </span>
                            <a href="{{ route('payment.show', $order) }}" class="text-[9px] font-black text-emerald uppercase tracking-widest hover:underline">
                                Pay Now →
                            </a>
                        @else
                            <span class="badge {{ $order->status === 'completed' ? 'badge-success' : 'badge-pending' }}">
                                {{ $order->status }}
                            </span>
                        @endif
                    </div>
                </div>
            @empty
                <div class="py-12 text-center text-white/20 italic">No active orders found.</div>
            @endforelse
        </div>
    </div>

    <!-- Consultations / Alerts -->
    <div class="space-y-6">
        <div class="glass-panel rounded-3xl p-8 bg-gradient-to-br from-emerald/10 to-transparent border-emerald/10">
            <h3 class="text-lg font-bold text-white mb-2">Need help?</h3>
            <p class="text-white/60 text-sm mb-6">Schedule a direct consultation with our compliance experts.</p>
            <a href="{{ route('consultation') }}" class="inline-block px-6 py-3 bg-emerald text-white font-black text-xs uppercase tracking-widest rounded-xl hover:scale-105 transition-transform">
                Book Session
            </a>
        </div>

        <div class="glass-panel rounded-3xl p-8">
            <h3 class="text-lg font-bold text-white mb-6">Upcoming Scheduled Slots</h3>
            <div class="space-y-4">
                @forelse($consultations ?? [] as $consult)
                    <div class="flex items-center gap-4 p-4 grayscale hover:grayscale-0 transition-all opacity-60 hover:opacity-100">
                        <div class="text-sm font-black text-emerald">{{ $consult->slot->start_time->format('H:i') }}</div>
                        <div class="h-8 w-px bg-white/10"></div>
                        <div class="text-xs text-white/60">{{ $consult->slot->date->format('M d, Y') }}</div>
                    </div>
                @empty
                    <p class="text-white/20 text-xs italic">No upcoming sessions.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection