@extends('layouts.admin')
@section('title', __('app.dashboard'))

@section('content')
<div class="grid grid-cols-2 lg:grid-cols-3 gap-5 mb-8">
    @php
        $cards = [
            ['label' => __('app.total_orders'), 'value' => $stats['orders'], 'icon' => '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', 'gradient' => 'from-brand-400 to-brand-600', 'shadow' => 'shadow-brand-500/20'],
            ['label' => __('app.total_products'), 'value' => $stats['products'], 'icon' => 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4', 'gradient' => 'from-lavender-400 to-lavender-600', 'shadow' => 'shadow-lavender-500/20'],
            ['label' => __('app.total_categories'), 'value' => $stats['categories'], 'icon' => 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10', 'gradient' => 'from-violet-500 to-violet-600', 'shadow' => 'shadow-violet-500/20'],
            ['label' => __('app.total_customers'), 'value' => $stats['customers'], 'icon' => 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z', 'gradient' => 'from-cyan-500 to-cyan-600', 'shadow' => 'shadow-cyan-500/20'],
            ['label' => __('app.total_revenue'), 'value' => number_format($stats['revenue'], 2) . ' ' . __('app.jod'), 'icon' => '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', 'gradient' => 'from-gold-500 to-gold-600', 'shadow' => 'shadow-gold-500/20'],
            ['label' => __('app.pending_orders'), 'value' => $stats['pending_orders'], 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', 'gradient' => 'from-amber-500 to-amber-600', 'shadow' => 'shadow-amber-500/20'],
        ];
    @endphp
    @foreach($cards as $card)
    <div class="bg-white rounded-2xl p-6 border border-brand-100/50 shadow-sm hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-semibold text-brand-400">{{ $card['label'] }}</p>
            <div class="w-10 h-10 bg-gradient-to-br {{ $card['gradient'] }} rounded-xl flex items-center justify-center shadow-md {{ $card['shadow'] }}">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $card['icon'] }}"/></svg>
            </div>
        </div>
        <p class="text-2xl font-extrabold text-brand-900">{{ $card['value'] }}</p>
    </div>
    @endforeach
</div>

<div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 overflow-hidden">
    <div class="px-6 py-5 border-b border-brand-100/50 flex items-center justify-between">
        <h3 class="font-bold text-brand-800 text-lg">{{ __('app.recent_orders') }}</h3>
        <a href="{{ route('admin.orders.index') }}" class="text-sm text-brand-500 hover:text-brand-600 font-semibold transition-colors">{{ __('app.view_all') }} &rarr;</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-cream-50">
                <tr>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.order_number') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.customer') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.total') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.order_status') }}</th>
                    <th class="px-5 py-3.5 text-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }} font-semibold text-brand-500 text-xs uppercase tracking-wider">{{ __('app.order_date') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-brand-100/50">
                @foreach($recentOrders as $order)
                <tr class="hover:bg-cream-50/50 transition-colors">
                    <td class="px-5 py-4"><a href="{{ route('admin.orders.show', $order) }}" class="text-brand-500 font-bold hover:text-brand-600 font-mono text-xs">{{ $order->order_number }}</a></td>
                    <td class="px-5 py-4 font-medium text-brand-700">{{ $order->customer_name }}</td>
                    <td class="px-5 py-4 font-bold text-brand-800 tabular-nums">{{ number_format($order->total, 2) }} {{ __('app.jod') }}</td>
                    <td class="px-5 py-4">
                        @php $sc = ['pending'=>'bg-amber-100 text-amber-700','confirmed'=>'bg-blue-100 text-blue-700','shipped'=>'bg-indigo-100 text-indigo-700','delivered'=>'bg-emerald-100 text-emerald-700','cancelled'=>'bg-red-100 text-red-700'][$order->status] ?? 'bg-gray-100 text-gray-700'; @endphp
                        <span class="badge-status {{ $sc }}">{{ __('app.' . $order->status) }}</span>
                    </td>
                    <td class="px-5 py-4 text-brand-400">{{ $order->created_at->format('Y-m-d') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection