<div>
    {{-- Header --}}
    <div class="flex items-center justify-between mb-4 sm:mb-8">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('مكتب الاستقبال') }}</h1>
            <p class="text-xs sm:text-sm text-gray-500 mt-1">{{ __('اليوم') }}: {{ now()->translatedFormat('l j F Y') }}</p>
        </div>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 sm:mb-6 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif

    {{-- Today's Stats — 2x2 on mobile --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-blue-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm: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="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>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('تسجيلات اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['registrations_today'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm: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="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-xs text-gray-500 truncate">{{ __('مدفوعات اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ number_format($stats['payments_today'] / 100, 2) }}</p>
                    <p class="text-xs text-gray-400" dir="ltr">{{ $stats['payments_count'] }} {{ __('عملية') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-amber-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm:h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('حصص اليوم') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['sessions_in_progress'] }} / {{ $stats['sessions_today'] }}</p>
                    <p class="text-xs text-gray-400 hidden sm:block">{{ __('جارية / إجمالي') }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-5">
            <div class="flex items-center gap-2 sm:gap-3">
                <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-purple-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 sm:w-6 sm: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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs text-gray-500 truncate">{{ __('الحضور') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">{{ $stats['checked_in'] }}</p>
                    <p class="text-xs text-gray-400" dir="ltr">/ {{ $stats['expected_today'] }} {{ __('متوقع') }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions — 2-col grid on mobile for large touch targets --}}
    <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">{{ __('إجراءات سريعة') }}</h2>
    <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5">
        {{-- New Registration --}}
        @can('participants.create')
        <a href="{{ route('receptionist.new-registration') }}" wire:navigate
           class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-blue-300 transition-all active:scale-[0.97]">
            <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" 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>
                <div class="min-w-0">
                    <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل جديد') }}</h3>
                    <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تسجيل مشترك جديد + ولي أمر + برنامج') }}</p>
                </div>
            </div>
        </a>
        @endcan

        {{-- Enroll Existing --}}
        @can('enrollments.create')
        <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate
           class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-emerald-300 transition-all active:scale-[0.97]">
            <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-emerald-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" 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 2m-6 9l2 2 4-4"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل في برنامج') }}</h3>
                    <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تسجيل مشترك حالي في برنامج جديد') }}</p>
                </div>
            </div>
        </a>
        @endcan

        {{-- Collect Payment --}}
        @can('invoices.create')
        <a href="{{ route('receptionist.collect-payment') }}" wire:navigate
           class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-amber-300 transition-all active:scale-[0.97]">
            <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-amber-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" 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 class="min-w-0">
                    <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تحصيل مدفوعات') }}</h3>
                    <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تحصيل مدفوعات من فواتير مستحقة') }}</p>
                </div>
            </div>
        </a>
        @endcan

        {{-- Product Sale (POS) --}}
        @can('pos.sell')
        <a href="{{ route('pos.terminal') }}" wire:navigate
           class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-rose-300 transition-all active:scale-[0.97]">
            <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-rose-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('بيع منتج') }}</h3>
                    <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('نقطة البيع — بيع سريع') }}</p>
                </div>
            </div>
        </a>
        @endcan

        {{-- Check-in --}}
        @can('attendance.mark')
        <a href="{{ route('attendance.list') }}" wire:navigate
           class="group bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 hover:shadow-md hover:border-purple-300 transition-all active:scale-[0.97]">
            <div class="flex flex-col sm:flex-row items-center sm:items-center gap-3 sm:gap-4 text-center sm:text-start">
                <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-purple-600 flex items-center justify-center group-hover:scale-110 transition-transform shrink-0">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" 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>
                <div class="min-w-0">
                    <h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل حضور') }}</h3>
                    <p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('بحث عن مشترك وتسجيل حضوره') }}</p>
                </div>
            </div>
        </a>
        @endcan
    </div>
</div>
