<div>
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">{{ __('لوحة التحكم') }}</h1>
        <p class="text-gray-500 text-sm mt-1">{{ now()->translatedFormat('l j F Y') }} &mdash; {{ __('مرحبا') }}، {{ auth()->user()->name_ar ?? auth()->user()->name }}</p>
    </div>

    <!-- Row 1: Today's Overview (5 stat cards) — auto-refresh every 30s -->
    <div wire:poll.30s class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
        <!-- Sessions Today -->
        <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="shrink-0 w-11 h-11 bg-blue-50 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl sm:text-3xl font-bold text-blue-600" dir="ltr">{{ number_format($sessionsToday) }}</p>
                    <p class="text-xs sm:text-sm text-gray-500">{{ __('جلسات اليوم') }}</p>
                </div>
            </div>
        </div>

        <!-- Trainers Present -->
        <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="shrink-0 w-11 h-11 bg-green-50 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl sm:text-3xl font-bold text-green-600" dir="ltr">{{ number_format($trainersPresent) }}</p>
                    <p class="text-xs sm:text-sm text-gray-500">{{ __('مدربون حاضرون') }}</p>
                </div>
            </div>
        </div>

        <!-- Payments Today -->
        <div class="bg-white rounded-xl shadow-sm border border-emerald-200 p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="shrink-0 w-11 h-11 bg-emerald-50 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-emerald-600" 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>
                <div class="min-w-0">
                    <p class="text-2xl sm:text-3xl font-bold text-emerald-600" dir="ltr">{{ number_format($paymentsToday / 100, 2) }} <span class="text-sm">{{ __('ج.م') }}</span></p>
                    <p class="text-xs sm:text-sm text-gray-500">{{ __('تحصيلات اليوم') }}</p>
                </div>
            </div>
        </div>

        <!-- Expenses Today -->
        <div class="bg-white rounded-xl shadow-sm border border-red-200 p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="shrink-0 w-11 h-11 bg-red-50 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl sm:text-3xl font-bold text-red-600" dir="ltr">{{ number_format($expensesToday / 100, 2) }} <span class="text-sm">{{ __('ج.م') }}</span></p>
                    <p class="text-xs sm:text-sm text-gray-500">{{ __('مصروفات اليوم') }}</p>
                </div>
            </div>
            @if($expensesThisMonth > 0)
            <p class="text-xs text-gray-400 mt-2" dir="ltr">{{ number_format($expensesThisMonth / 100, 0) }} {{ __('ج.م هذا الشهر') }}</p>
            @endif
        </div>

        <!-- Active Participants -->
        <div class="bg-white rounded-xl shadow-sm border border-purple-200 p-4 sm:p-5">
            <div class="flex items-center gap-3">
                <div class="shrink-0 w-11 h-11 bg-purple-50 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-2xl sm:text-3xl font-bold text-purple-600" dir="ltr">{{ number_format($activeParticipants) }}</p>
                    <p class="text-xs sm:text-sm text-gray-500">{{ __('مشتركون نشطون') }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Cash On Hand Card -->
    @can('expenses.create')
    <div class="mb-6">
        <div class="bg-gradient-to-l from-green-50 to-emerald-50 rounded-xl shadow-sm border border-green-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-green-900">{{ __('الكاش المفروض في الخزنة') }}</h3>
                        <p class="text-xs text-green-600">{{ now()->translatedFormat('F Y') }}</p>
                    </div>
                </div>
                <div class="text-end">
                    <p class="text-3xl font-bold {{ $expectedCashOnHand >= 0 ? 'text-green-700' : 'text-red-600' }}" dir="ltr">
                        {{ number_format(abs($expectedCashOnHand) / 100, 0) }} <span class="text-sm">{{ __('ج.م') }}</span>
                    </p>
                    @if($expectedCashOnHand < 0)
                        <p class="text-xs text-red-600 font-medium">{{ __('عجز') }}</p>
                    @endif
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4 pt-3 border-t border-green-200">
                <div>
                    <p class="text-xs text-gray-500 mb-0.5">{{ __('تحصيلات كاش هذا الشهر') }}</p>
                    <p class="text-sm font-bold text-emerald-700" dir="ltr">{{ number_format($cashCollectionsThisMonth / 100, 0) }} {{ __('ج.م') }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-500 mb-0.5">{{ __('مصروفات كاش هذا الشهر') }}</p>
                    <p class="text-sm font-bold text-red-600" dir="ltr">{{ number_format($cashExpensesThisMonth / 100, 0) }} {{ __('ج.م') }}</p>
                </div>
            </div>
        </div>
    </div>
    @endcan

    <!-- Row 2: Needs Attention (only show if any count > 0) -->
    @if($overdueInvoicesCount > 0 || $pendingPayslips > 0 || $pendingDocuments > 0 || $lowStockItems > 0 || $expiringMedicalCerts > 0 || $attendanceNotTaken > 0)
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-3">{{ __('يتطلب انتباهك') }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @if($overdueInvoicesCount > 0)
            <a href="{{ route('invoices.list', ['status' => 'overdue']) }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-red-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-red-600" dir="ltr">{{ $overdueInvoicesCount }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('فواتير متأخرة') }}</p>
                    <p class="text-xs text-gray-500">{{ __('تحتاج متابعة التحصيل') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-red-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif

            @if($pendingPayslips > 0)
            <a href="{{ route('payroll.dashboard') }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-amber-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-amber-600" dir="ltr">{{ $pendingPayslips }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('رواتب بانتظار الموافقة') }}</p>
                    <p class="text-xs text-gray-500">{{ __('مسودات أو بانتظار اعتماد') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-amber-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif

            @if($pendingDocuments > 0)
            <a href="{{ route('documents.approvals') }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-amber-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-amber-600" dir="ltr">{{ $pendingDocuments }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('مستندات بانتظار المراجعة') }}</p>
                    <p class="text-xs text-gray-500">{{ __('تحتاج موافقة أو رفض') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-amber-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif

            @if($lowStockItems > 0)
            <a href="{{ route('inventory.products', ['stockFilter' => 'low']) }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-amber-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-amber-600" dir="ltr">{{ $lowStockItems }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('منتجات تحت الحد الأدنى') }}</p>
                    <p class="text-xs text-gray-500">{{ __('يجب إعادة الطلب') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-amber-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif

            @if($expiringMedicalCerts > 0)
            <a href="{{ route('documents.approvals') }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-red-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-red-600" dir="ltr">{{ $expiringMedicalCerts }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('شهادات طبية تنتهي قريبا') }}</p>
                    <p class="text-xs text-gray-500">{{ __('خلال ٧ أيام') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-red-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif

            @if($attendanceNotTaken > 0)
            <a href="{{ route('attendance.list', ['filter' => 'not_taken', 'dateFrom' => now()->format('Y-m-d'), 'dateTo' => now()->format('Y-m-d')]) }}" class="group flex items-center gap-3 bg-white rounded-xl border-s-4 border-amber-500 border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="shrink-0 w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
                    <span class="text-lg font-bold text-amber-600" dir="ltr">{{ $attendanceNotTaken }}</span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-800">{{ __('جلسات لم يسجل حضورها') }}</p>
                    <p class="text-xs text-gray-500">{{ __('انتهت ولم يؤخذ الحضور') }}</p>
                </div>
                <svg class="w-5 h-5 text-gray-400 group-hover:text-amber-500 transition-colors shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            @endif
        </div>
    </div>
    @endif

    <!-- Row 2.5: Subscription Revenue Analysis -->
    @can('invoices.list')
    <div class="mb-6">
        <livewire:dashboard.subscription-revenue-widget />
    </div>
    @endcan

    <!-- Row 2.6: Product Revenue Analysis -->
    @can('invoices.list')
    <div class="mb-6">
        <livewire:dashboard.product-revenue-widget />
    </div>
    @endcan

    <!-- Row 2.6: Financial Widgets -->
    @can('payroll.manage')
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <livewire:dashboard.trainer-dues-widget />
        <livewire:dashboard.renewals-due-widget />
    </div>
    @endcan

    <!-- Quick Actions -->
    @can('expenses.create')
    <div class="mb-6 flex flex-wrap gap-3">
        <a href="{{ route('expenses.create') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-red-50 border border-red-200 text-red-700 rounded-xl hover:bg-red-100 transition text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            {{ __('تسجيل مصروف') }}
        </a>
        @can('facilities.update')
        <a href="{{ route('expenses.rent.create') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl hover:bg-emerald-100 transition text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            {{ __('تسجيل إيجار منشأة') }}
        </a>
        @endcan
    </div>
    @endcan

    <!-- Row 3: Two columns — Today's Schedule + Recent Payments -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
        <!-- Left: Today's Schedule -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">{{ __('جدول اليوم') }}</h3>
                <a href="{{ route('schedule.weekly') }}" class="text-sm text-blue-600 hover:text-blue-800">{{ __('عرض الكل') }}</a>
            </div>

            @if($todaySchedule->isEmpty())
                <div class="text-center py-8">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <p class="text-gray-400 text-sm">{{ __('لا توجد جلسات مجدولة اليوم') }}</p>
                </div>
            @else
                <div class="space-y-2 max-h-[400px] overflow-y-auto">
                    @foreach($todaySchedule as $session)
                    <div class="flex items-center gap-3 p-3 rounded-lg {{ $session->status->value === 'in_progress' ? 'bg-green-50 border border-green-200' : 'bg-gray-50' }}">
                        <!-- Time -->
                        <div class="text-center min-w-[50px]">
                            <span class="text-sm font-bold {{ $session->status->value === 'in_progress' ? 'text-green-600' : 'text-blue-600' }}" dir="ltr">{{ substr($session->start_time, 0, 5) }}</span>
                            <p class="text-xs text-gray-400" dir="ltr">{{ substr($session->end_time, 0, 5) }}</p>
                        </div>

                        <!-- Separator -->
                        <div class="w-px h-10 {{ $session->status->value === 'in_progress' ? 'bg-green-300' : 'bg-gray-300' }}"></div>

                        <!-- Details -->
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-800 truncate">{{ $session->group?->name_ar ?? $session->group?->name ?? '-' }}</p>
                            <div class="flex items-center gap-2 text-xs text-gray-500 mt-0.5">
                                @if($session->trainer)
                                    <span>{{ $session->trainer->name_ar ?? $session->trainer->name }}</span>
                                @endif
                                @if($session->facility)
                                    <span class="text-gray-300">|</span>
                                    <span>{{ $session->facility->name_ar ?? $session->facility->name }}</span>
                                @endif
                            </div>
                        </div>

                        <!-- Status / Action -->
                        <div class="shrink-0 text-end">
                            @if($session->status->value === 'in_progress')
                                <span class="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-100 px-2 py-1 rounded-full">
                                    <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
                                    {{ __('جارية') }}
                                </span>
                            @elseif($session->status->value === 'completed')
                                @if(!$session->has_attendance)
                                    <a href="{{ route('attendance.take', $session) }}" class="inline-flex items-center text-xs font-medium text-amber-700 bg-amber-100 px-2 py-1 rounded-full hover:bg-amber-200 transition-colors">
                                        {{ __('سجل الحضور') }}
                                    </a>
                                @else
                                    <span class="text-xs text-green-600 font-medium">{{ __('مكتملة') }}</span>
                                @endif
                            @elseif($session->time_remaining)
                                <span class="text-xs text-gray-500">{{ __('بعد') }} {{ $session->time_remaining }}</span>
                            @else
                                <span class="text-xs text-gray-400">{{ __('مجدولة') }}</span>
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>

        <!-- Right: Recent Payments -->
        @if($canViewFinancials)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">{{ __('آخر المدفوعات') }}</h3>
                <a href="{{ route('invoices.list') }}" class="text-sm text-blue-600 hover:text-blue-800">{{ __('عرض الكل') }}</a>
            </div>

            @if($recentPayments->isEmpty())
                <div class="text-center py-8">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    <p class="text-gray-400 text-sm">{{ __('لا توجد مدفوعات اليوم') }}</p>
                </div>
            @else
                <div class="space-y-2 max-h-[400px] overflow-y-auto">
                    @foreach($recentPayments as $payment)
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg {{ $payment->invoice ? 'cursor-pointer hover:bg-gray-100' : '' }} transition-colors" @if($payment->invoice) onclick="window.location='{{ route('invoices.show', $payment->invoice) }}'" @endif>
                        <!-- Payment method icon -->
                        <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center
                            {{ $payment->method->value === 'cash' ? 'bg-green-100' : ($payment->method->value === 'card' ? 'bg-blue-100' : 'bg-purple-100') }}">
                            @if($payment->method->value === 'cash')
                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                                </svg>
                            @elseif($payment->method->value === 'card')
                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                </svg>
                            @else
                                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                </svg>
                            @endif
                        </div>

                        <!-- Participant / details -->
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-800 truncate">
                                @if($payment->payer)
                                    {{ $payment->payer->name_ar ?? $payment->payer->name ?? $payment->reference }}
                                @elseif($payment->invoice?->billable)
                                    {{ $payment->invoice->billable->person?->name_ar ?? $payment->invoice->contact_name ?? $payment->reference }}
                                @else
                                    {{ $payment->reference ?? '-' }}
                                @endif
                            </p>
                            <p class="text-xs text-gray-500">{{ $payment->created_at?->diffForHumans() }}</p>
                        </div>

                        <!-- Amount -->
                        <span class="text-sm font-bold text-emerald-600 whitespace-nowrap" dir="ltr">{{ number_format($payment->amount / 100, 2) }} {{ __('ج.م') }}</span>
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
        @else
        {{-- Placeholder for non-financial users --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('الحضور اليوم') }}</h3>
            <div class="text-center py-8">
                <p class="text-4xl font-bold text-blue-600 mb-2" dir="ltr">{{ $trainersPresent }}</p>
                <p class="text-gray-500 text-sm">{{ __('مدرب حاضر حتى الآن') }}</p>
            </div>
        </div>
        @endif
    </div>

    <!-- Row 4: Quick Actions Grid -->
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-3">{{ __('إجراءات سريعة') }}</h2>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
            @can('participants.create')
            <a href="{{ route('receptionist.new-registration') }}" wire:navigate class="flex flex-col items-center gap-3 bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md hover:border-blue-300 transition-all group">
                <div class="w-14 h-14 bg-blue-50 rounded-xl flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                    <svg class="w-7 h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 text-center">{{ __('تسجيل لاعب جديد') }}</span>
            </a>
            @endcan

            @can('enrollments.create')
            <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate class="flex flex-col items-center gap-3 bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md hover:border-indigo-300 transition-all group">
                <div class="w-14 h-14 bg-indigo-50 rounded-xl flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
                    <svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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 0z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 text-center">{{ __('تسجيل في برنامج') }}</span>
            </a>
            @endcan

            @can('invoices.create')
            <a href="{{ route('receptionist.collect-payment') }}" wire:navigate class="flex flex-col items-center gap-3 bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md hover:border-emerald-300 transition-all group">
                <div class="w-14 h-14 bg-emerald-50 rounded-xl flex items-center justify-center group-hover:bg-emerald-100 transition-colors">
                    <svg class="w-7 h-7 text-emerald-600" 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-sm font-medium text-gray-700 text-center">{{ __('تحصيل دفعة') }}</span>
            </a>
            @endcan

            @can('attendance.mark')
            <a href="{{ route('attendance.quick') }}" wire:navigate class="flex flex-col items-center gap-3 bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md hover:border-green-300 transition-all group">
                <div class="w-14 h-14 bg-green-50 rounded-xl flex items-center justify-center group-hover:bg-green-100 transition-colors">
                    <svg class="w-7 h-7 text-green-600" 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-sm font-medium text-gray-700 text-center">{{ __('تسجيل حضور') }}</span>
            </a>
            @endcan
        </div>
    </div>

    <!-- Row 5: All Wizards -->
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-gray-700 mb-3">{{ __('معالجات الإنشاء') }}</h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
            @can('programs.create')
            <a href="{{ route('programs.create') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-blue-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('برنامج جديد') }}</span>
            </a>
            @endcan

            @can('groups.create')
            <a href="{{ route('groups.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-teal-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-teal-50 rounded-lg flex items-center justify-center group-hover:bg-teal-100 transition-colors">
                    <svg class="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('مجموعة جديدة') }}</span>
            </a>
            @endcan

            @can('enrollments.create')
            <a href="{{ route('enrollments.transfer-wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-purple-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center group-hover:bg-purple-100 transition-colors">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('نقل لاعب') }}</span>
            </a>
            @endcan

            @can('invoices.create')
            <a href="{{ route('invoices.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-emerald-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center group-hover:bg-emerald-100 transition-colors">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('فاتورة جديدة') }}</span>
            </a>
            @endcan

            @can('facilities.create')
            <a href="{{ route('facilities.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-amber-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center group-hover:bg-amber-100 transition-colors">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('منشأة جديدة') }}</span>
            </a>
            @endcan

            @can('employees.create')
            <a href="{{ route('employees.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-indigo-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-indigo-50 rounded-lg flex items-center justify-center group-hover:bg-indigo-100 transition-colors">
                    <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('موظف جديد') }}</span>
            </a>
            @endcan

            @can('trainers.create')
            <a href="{{ route('trainers.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-orange-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-orange-50 rounded-lg flex items-center justify-center group-hover:bg-orange-100 transition-colors">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 7l-9-5 9-5 9 5-9 5z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('مدرب جديد') }}</span>
            </a>
            @endcan

            @can('pricing.create')
            <a href="{{ route('pricing.rules.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-pink-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-pink-50 rounded-lg flex items-center justify-center group-hover:bg-pink-100 transition-colors">
                    <svg class="w-5 h-5 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('قاعدة تسعير') }}</span>
            </a>
            @endcan

            @can('inventory.create')
            <a href="{{ route('inventory.products.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-cyan-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-cyan-50 rounded-lg flex items-center justify-center group-hover:bg-cyan-100 transition-colors">
                    <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('منتج جديد') }}</span>
            </a>
            @endcan

            @can('inventory.adjust')
            <a href="{{ route('inventory.adjustments') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-red-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-red-50 rounded-lg flex items-center justify-center group-hover:bg-red-100 transition-colors">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('تعديل مخزون') }}</span>
            </a>
            @endcan

            @can('invoices.list')
            <a href="{{ route('cash-sessions.manage') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-amber-300 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center group-hover:bg-amber-100 transition-colors">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('فتح وردية') }}</span>
            </a>
            @endcan

            @can('settings.manage')
            <a href="{{ route('setup.wizard') }}" wire:navigate class="flex items-center gap-3 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md hover:border-gray-400 transition-all group">
                <div class="shrink-0 w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center group-hover:bg-gray-200 transition-colors">
                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700">{{ __('إعداد النظام') }}</span>
            </a>
            @endcan
        </div>
    </div>
</div>
