Skip to content

E
El-Captain Sports Management
Commit 65377fca authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Improve receptionist screen & registration wizard mobile UX 

Dashboard:
- Primary action (new registration) is now a full-width hero card
- Secondary actions are a compact 2x2 icon grid

Registration wizard:
- Mobile step indicator: compact progress bar + step name instead of
  cramped 5-circle stepper
- Sticky bottom nav bar on mobile (fixed position, safe-area aware)
  so Back/Next are always reachable without scrolling
- Activity selection uses horizontal scrollable pills on mobile
- Desktop layout remains unchanged (sm: breakpoint gates all changes)
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 75c39ad7
Show whitespace changes
Inline Side-by-side
Showing with 105 additions and 103 deletions
resources/css/app.css
View file @ 65377fca
...@@ -181,6 +181,13 @@ hover:border-cyan-300 hover:border-pink-300 hover:border-orange-300 hover:border ...@@ -181,6 +181,13 @@ hover:border-cyan-300 hover:border-pink-300 hover:border-orange-300 hover:border
transform: scale(0.95) !important; transform: scale(0.95) !important;
opacity: 0.9; opacity: 0.9;
} }
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
} }
/* Print: hide all app chrome */ /* Print: hide all app chrome */
......
resources/views/livewire/receptionist/dashboard.blade.php
View file @ 65377fca
...@@ -76,96 +76,77 @@ ...@@ -76,96 +76,77 @@
</div> </div>
</div> </div>
{{-- Quick Actions — 2-col grid on mobile for large touch targets --}} {{-- Quick Actions --}}
<h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-3 sm:mb-4">{{ __('إجراءات سريعة') }}</h2> <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 --}} {{-- Primary Action — Full width hero on mobile --}}
@can('participants.create') @can('participants.create')
<a href="{{ route('receptionist.new-registration') }}" wire:navigate <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]"> class="group block mb-3 sm:mb-5 bg-blue-600 rounded-2xl shadow-md p-5 sm:p-6 hover:bg-blue-700 active:scale-[0.98] transition-all">
<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="flex items-center gap-4">
<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"> <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-xl bg-white/20 flex items-center justify-center 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"> <svg class="w-8 h-8 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"/> <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> </svg>
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<h3 class="font-bold text-gray-800 text-sm sm:text-lg">{{ __('تسجيل جديد') }}</h3> <h3 class="font-bold text-white text-lg sm:text-xl">{{ __('تسجيل جديد') }}</h3>
<p class="text-xs sm:text-sm text-gray-500 hidden sm:block">{{ __('تسجيل مشترك جديد + ولي أمر + برنامج') }}</p> <p class="text-blue-100 text-sm mt-0.5">{{ __('مشترك + ولي أمر + برنامج') }}</p>
</div> </div>
<svg class="w-6 h-6 text-white/60 ms-auto shrink-0 rotate-180" 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>
</div> </div>
</a> </a>
@endcan @endcan
{{-- Enroll Existing --}} {{-- Secondary Actions — compact grid --}}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
@can('enrollments.create') @can('enrollments.create')
<a href="{{ route('receptionist.enroll-existing') }}" wire:navigate <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]"> class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-emerald-300 active:scale-[0.97] transition-all">
<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 rounded-xl bg-emerald-100 flex items-center justify-center group-hover:bg-emerald-200 transition-colors shrink-0">
<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 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/> <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> </svg>
</div> </div>
<div class="min-w-0"> <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تسجيل في برنامج') }}</span>
<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> </a>
@endcan @endcan
{{-- Collect Payment --}}
@can('invoices.create') @can('invoices.create')
<a href="{{ route('receptionist.collect-payment') }}" wire:navigate <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]"> class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-amber-300 active:scale-[0.97] transition-all">
<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 rounded-xl bg-amber-100 flex items-center justify-center group-hover:bg-amber-200 transition-colors shrink-0">
<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 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/> <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> </svg>
</div> </div>
<div class="min-w-0"> <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تحصيل دفعة') }}</span>
<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> </a>
@endcan @endcan
{{-- Product Sale (POS) --}}
@can('pos.sell') @can('pos.sell')
<a href="{{ route('pos.terminal') }}" wire:navigate <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]"> class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-rose-300 active:scale-[0.97] transition-all">
<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 rounded-xl bg-rose-100 flex items-center justify-center group-hover:bg-rose-200 transition-colors shrink-0">
<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 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/> <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> </svg>
</div> </div>
<div class="min-w-0"> <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('بيع منتج') }}</span>
<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> </a>
@endcan @endcan
{{-- Check-in --}}
@can('attendance.mark') @can('attendance.mark')
<a href="{{ route('attendance.list') }}" wire:navigate <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]"> class="group flex flex-col items-center gap-2.5 bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5 hover:shadow-md hover:border-purple-300 active:scale-[0.97] transition-all">
<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 rounded-xl bg-purple-100 flex items-center justify-center group-hover:bg-purple-200 transition-colors shrink-0">
<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 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"/> <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> </svg>
</div> </div>
<div class="min-w-0"> <span class="text-xs sm:text-sm font-semibold text-gray-700 text-center leading-tight">{{ __('تسجيل حضور') }}</span>
<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> </a>
@endcan @endcan
</div> </div>
......
resources/views/livewire/receptionist/new-registration-wizard.blade.php
View file @ 65377fca
<div> <div>
{{-- Header --}} {{-- Header — compact on mobile --}}
<div class="flex items-center justify-between mb-6 print:hidden"> <div class="flex items-center justify-between mb-4 sm:mb-6 print:hidden">
<div> <div class="min-w-0">
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('تسجيل جديد') }}</h1> <h1 class="text-lg sm:text-2xl font-bold text-gray-800 truncate">{{ __('تسجيل جديد') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('تسجيل مشترك جديد مع ولي الأمر والبرنامج') }}</p> <p class="text-xs sm:text-sm text-gray-500 mt-0.5 hidden sm:block">{{ __('تسجيل مشترك جديد مع ولي الأمر والبرنامج') }}</p>
</div> </div>
<a href="{{ route('receptionist.dashboard') }}" wire:navigate <a href="{{ route('receptionist.dashboard') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors"> class="inline-flex items-center justify-center w-10 h-10 sm:w-auto sm:h-auto sm:gap-2 sm:px-4 sm:py-2 text-gray-600 bg-gray-100 rounded-full sm:rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors shrink-0">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
{{ __('العودة للاستقبال') }} <span class="hidden sm:inline">{{ __('العودة للاستقبال') }}</span>
</a> </a>
</div> </div>
...@@ -53,8 +53,6 @@ class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounde ...@@ -53,8 +53,6 @@ class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounde
{{-- Step Indicator --}} {{-- Step Indicator --}}
@if($currentStep < 6) @if($currentStep < 6)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<div class="flex items-center justify-between">
@php @php
$steps = [ $steps = [
1 => 'بيانات ولي الأمر', 1 => 'بيانات ولي الأمر',
...@@ -64,6 +62,21 @@ class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounde ...@@ -64,6 +62,21 @@ class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounde
5 => 'الدفع', 5 => 'الدفع',
]; ];
@endphp @endphp
{{-- Mobile: compact progress bar --}}
<div class="sm:hidden bg-white rounded-xl shadow-sm border border-gray-200 p-3 mb-4">
<div class="flex items-center justify-between mb-2">
<span class="text-sm font-bold text-blue-700">{{ __($steps[$currentStep]) }}</span>
<span class="text-xs text-gray-500" dir="ltr">{{ $currentStep }} / 5</span>
</div>
<div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full transition-all duration-300" style="width: {{ ($currentStep / 5) * 100 }}%"></div>
</div>
</div>
{{-- Desktop: full stepper --}}
<div class="hidden sm:block bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
<div class="flex items-center justify-between">
@foreach($steps as $num => $label) @foreach($steps as $num => $label)
<div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}"> <div class="flex items-center {{ !$loop->last ? 'flex-1' : '' }}">
<button wire:click="goToStep({{ $num }})" <button wire:click="goToStep({{ $num }})"
...@@ -81,7 +94,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs ...@@ -81,7 +94,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs
{{ $num }} {{ $num }}
@endif @endif
</div> </div>
<span class="text-xs font-medium hidden sm:inline <span class="text-xs font-medium
{{ $num === $currentStep ? 'text-blue-600' : '' }} {{ $num === $currentStep ? 'text-blue-600' : '' }}
{{ $num < $currentStep ? 'text-green-600' : '' }} {{ $num < $currentStep ? 'text-green-600' : '' }}
{{ $num > $currentStep ? 'text-gray-400' : '' }}"> {{ $num > $currentStep ? 'text-gray-400' : '' }}">
...@@ -98,7 +111,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs ...@@ -98,7 +111,7 @@ class="flex items-center gap-2 {{ $num < $currentStep ? 'cursor-pointer' : 'curs
@endif @endif
{{-- Step Content --}} {{-- Step Content --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 pb-28 sm:pb-6">
{{-- Step 1: Guardian Info --}} {{-- Step 1: Guardian Info --}}
@if($currentStep === 1) @if($currentStep === 1)
<div> <div>
...@@ -202,9 +215,9 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-amber-7 ...@@ -202,9 +215,9 @@ class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-amber-7
</div> </div>
@endif @endif
<div class="flex justify-end mt-8"> <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-end z-30">
<button wire:click="nextStep" wire:loading.attr="disabled" <button wire:click="nextStep" wire:loading.attr="disabled"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50"> class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span> <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
<span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
<svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -325,16 +338,16 @@ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -325,16 +338,16 @@ class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
<div class="flex justify-between mt-8"> <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
<button wire:click="previousStep" <button wire:click="previousStep"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors"> class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm:rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg> </svg>
{{ __('السابق') }} {{ __('السابق') }}
</button> </button>
<button wire:click="nextStep" wire:loading.attr="disabled" <button wire:click="nextStep" wire:loading.attr="disabled"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50"> class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span> <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
<span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
<svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -353,11 +366,12 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white ...@@ -353,11 +366,12 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
{{-- Activity Selection --}} {{-- Activity Selection --}}
<div class="mb-6"> <div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر النشاط') }}</label> <label class="block text-sm font-medium text-gray-700 mb-3">{{ __('اختر النشاط') }}</label>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3"> {{-- Mobile: horizontal scrollable pills --}}
<div class="flex gap-2.5 overflow-x-auto pb-2 -mx-4 px-4 sm:mx-0 sm:px-0 sm:flex-wrap sm:overflow-visible scrollbar-hide">
@foreach($activities as $activity) @foreach($activities as $activity)
<label class="relative cursor-pointer"> <label class="relative cursor-pointer shrink-0 sm:shrink">
<input type="radio" wire:model.live="selected_activity_id" value="{{ $activity->id }}" class="peer sr-only"> <input type="radio" wire:model.live="selected_activity_id" value="{{ $activity->id }}" class="peer sr-only">
<div class="p-4 min-h-16 flex items-center justify-center border border-gray-300 rounded-xl text-center font-medium transition-all <div class="px-5 py-3 sm:p-4 sm:min-h-16 flex items-center justify-center border border-gray-300 rounded-full sm:rounded-xl text-center font-medium transition-all whitespace-nowrap
peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 peer-checked:shadow-sm peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 peer-checked:shadow-sm
hover:border-gray-400"> hover:border-gray-400">
{{ $activity->name_ar }} {{ $activity->name_ar }}
...@@ -403,16 +417,16 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white ...@@ -403,16 +417,16 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
</div> </div>
@endif @endif
<div class="flex justify-between mt-8"> <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
<button wire:click="previousStep" <button wire:click="previousStep"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors"> class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm:rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg> </svg>
{{ __('السابق') }} {{ __('السابق') }}
</button> </button>
<button wire:click="nextStep" wire:loading.attr="disabled" <button wire:click="nextStep" wire:loading.attr="disabled"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50"> class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span> <span wire:loading.remove wire:target="nextStep">{{ __('التالي') }}</span>
<span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
<svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -636,16 +650,16 @@ class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-ce ...@@ -636,16 +650,16 @@ class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-ce
@endif @endif
</div> </div>
<div class="flex justify-between mt-8"> <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
<button wire:click="previousStep" <button wire:click="previousStep"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors"> class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm:rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg> </svg>
{{ __('السابق') }} {{ __('السابق') }}
</button> </button>
<button wire:click="nextStep" wire:loading.attr="disabled" <button wire:click="nextStep" wire:loading.attr="disabled"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50"> class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-6 py-3.5 sm:py-3 bg-blue-600 text-white rounded-xl sm:rounded-lg hover:bg-blue-700 text-base font-medium transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="nextStep">{{ __('التالي — الدفع') }}</span> <span wire:loading.remove wire:target="nextStep">{{ __('التالي — الدفع') }}</span>
<span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span> <span wire:loading wire:target="nextStep">{{ __('جارٍ...') }}</span>
<svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
...@@ -752,16 +766,16 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white ...@@ -752,16 +766,16 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-blue-600 text-white
@endif @endif
</div> </div>
<div class="flex justify-between mt-8"> <div class="fixed bottom-0 start-0 end-0 bg-white border-t border-gray-200 p-4 safe-bottom sm:static sm:border-0 sm:p-0 sm:mt-8 flex justify-between gap-3 z-30">
<button wire:click="previousStep" <button wire:click="previousStep"
class="inline-flex items-center gap-2 px-6 py-3 min-h-16 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-base font-medium transition-colors"> class="inline-flex items-center justify-center gap-2 px-5 py-3.5 sm:py-3 text-gray-600 bg-gray-100 rounded-xl sm:rounded-lg hover:bg-gray-200 text-base font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" 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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg> </svg>
{{ __('السابق') }} {{ __('السابق') }}
</button> </button>
<button wire:click="confirm" wire:loading.attr="disabled" <button wire:click="confirm" wire:loading.attr="disabled"
class="inline-flex items-center gap-2 px-8 py-3 min-h-16 bg-green-600 text-white rounded-lg hover:bg-green-700 text-base font-bold transition-colors disabled:opacity-50"> class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-8 py-3.5 sm:py-3 bg-green-600 text-white rounded-xl sm:rounded-lg hover:bg-green-700 text-base font-bold transition-colors disabled:opacity-50">
<span wire:loading.remove wire:target="confirm">{{ __('تأكيد التسجيل') }}</span> <span wire:loading.remove wire:target="confirm">{{ __('تأكيد التسجيل') }}</span>
<span wire:loading wire:target="confirm"> <span wire:loading wire:target="confirm">
<svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24"> <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment