@php
    use App\Enums\OrderStatus;
@endphp

<x-layouts.customer title="لوحة التحكم">
    <x-slot name="pageTitle">مرحباً {{ explode(' ', $user->name)[0] }} 👋</x-slot>
    <x-slot name="pageSubtitle">نظرة سريعة على نشاطك وخدماتك في ZLHOST.</x-slot>
    <x-slot name="pageActions">
        <a href="{{ route('customer.orders.create') }}" class="btn btn-primary">+ طلب جديد</a>
        <a href="{{ route('customer.tickets.create') }}" class="btn btn-outline">+ تذكرة دعم</a>
    </x-slot>

    {{-- Stats --}}
    <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
        <x-stat-card label="طلبات نشطة" :value="$stats['orders_active']" icon="cart" tone="brand" />
        <x-stat-card label="إجمالي الطلبات" :value="$stats['orders_total']" icon="document" tone="navy" />
        <x-stat-card label="خدمات نشطة" :value="$stats['services_active']" icon="server" tone="brand" />
        <x-stat-card label="فواتير غير مدفوعة" :value="$stats['invoices_unpaid']" icon="wallet" tone="amber" />
        <x-stat-card label="تذاكر مفتوحة" :value="$stats['tickets_open']" icon="chat" tone="blue" />
    </div>

    {{-- Awaiting payment --}}
    @if($awaitingPayment->isNotEmpty())
        <div class="card card-padded mb-6 bg-amber-50/40 border-amber-200">
            <div class="flex items-start gap-3">
                <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-amber-100 text-amber-700 shrink-0">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-width="2" d="M12 9v3m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </span>
                <div class="min-w-0 flex-1">
                    <h3 class="font-bold text-navy-900">طلبات بانتظار الدفع</h3>
                    <p class="text-sm text-navy-600 mt-1">حول المبلغ ثم ارفع الإيصال — وسيتم تأكيد طلبك خلال 1-12 ساعة عمل.</p>
                    <ul class="mt-3 space-y-2">
                        @foreach($awaitingPayment as $o)
                            <li class="flex items-center justify-between gap-3 text-sm">
                                <span class="font-mono text-navy-800">{{ $o->order_number }}</span>
                                <span class="truncate text-navy-600 hidden md:block">{{ $o->service_label }}</span>
                                <span class="font-bold text-brand-700">{{ number_format((float) $o->expected_amount, 2) }} {{ $o->currency }}</span>
                                <a href="{{ route('customer.orders.payment', $o) }}" class="btn btn-primary btn-sm">ارفع الإيصال</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- Recent orders --}}
    <div class="card mb-6">
        <div class="flex items-center justify-between p-5 border-b border-border/60">
            <h2 class="font-bold text-navy-900">آخر الطلبات</h2>
            <a href="{{ route('customer.orders.index') }}" class="text-sm text-brand-700 font-bold hover:underline">عرض الكل ←</a>
        </div>
        @if($orders->isEmpty())
            <div class="p-6">
                <x-empty-state title="لا توجد طلبات بعد"
                               description="ابدأ بطلب أول خدمة من ZLHOST — تستغرق العملية أقل من دقيقتين."
                               actionLabel="ابدأ طلباً جديداً" :actionUrl="route('customer.orders.create')" />
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="table-zlhost">
                    <thead>
                        <tr>
                            <th>رقم الطلب</th>
                            <th>الخدمة</th>
                            <th>المبلغ</th>
                            <th>الحالة</th>
                            <th>التاريخ</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $o)
                            <tr>
                                <td class="font-mono text-brand-700 font-bold">{{ $o->order_number }}</td>
                                <td class="max-w-[200px] truncate">{{ $o->service_label }}</td>
                                <td class="font-bold">{{ number_format((float) $o->expected_amount, 2) }} {{ $o->currency }}</td>
                                <td><x-status-badge :status="$o->status" /></td>
                                <td class="text-navy-500">{{ $o->created_at->translatedFormat('d M Y') }}</td>
                                <td class="text-end">
                                    <a href="{{ route('customer.orders.show', $o) }}" class="btn btn-ghost btn-sm">عرض</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Notifications --}}
    @if($unreadNotifications->isNotEmpty())
        <div class="card">
            <div class="flex items-center justify-between p-5 border-b border-border/60">
                <h2 class="font-bold text-navy-900">إشعاراتك</h2>
                <span class="badge badge-info">{{ $unreadNotifications->count() }} جديد</span>
            </div>
            <ul class="divide-y divide-border/60">
                @foreach($unreadNotifications as $n)
                    <li class="p-5 hover:bg-muted/50 transition-colors">
                        <div class="flex items-start gap-3">
                            <span class="w-2 h-2 rounded-full bg-brand-500 mt-2 shrink-0"></span>
                            <div class="min-w-0 flex-1">
                                <p class="font-bold text-navy-900">{{ $n->title_ar ?? $n->title }}</p>
                                <p class="text-sm text-navy-600 mt-1">{{ $n->body_ar ?? $n->body }}</p>
                                <p class="text-xs text-navy-400 mt-1.5">{{ $n->created_at->diffForHumans() }}</p>
                            </div>
                            @if($n->action_url)
                                <a href="{{ $n->action_url }}" class="btn btn-ghost btn-sm">فتح ←</a>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif
</x-layouts.customer>