Skip to content

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

Add all 7 payment methods to collect payment wizard 

- cash, card, bank_transfer, wallet, online, cheque, other
- Each with distinct color and icon in a responsive 4-col grid
- Confirmation step uses PaymentMethod enum label() for display
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 8889c208
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 23 deletions
app/Livewire/Receptionist/CollectPaymentWizard.php
View file @ b950ca10
......@@ -78,7 +78,7 @@ public function rules(): array
],
3 => [
'payment_amount_display' => 'required|numeric|min:0.01',
'payment_method' => 'required|in:cash,card,wallet',
'payment_method' => 'required|in:cash,card,bank_transfer,wallet,online,cheque,other',
'payment_notes' => 'nullable|string|max:500',
],
default => [],
......
resources/views/livewire/receptionist/collect-payment-wizard.blade.php
View file @ b950ca10
......@@ -323,38 +323,75 @@ class="w-full px-4 py-4 min-h-16 border border-gray-300 rounded-lg focus:ring-2
{{-- Payment Method --}}
<div>
<label class="block text-sm font-medium text-gray-700 mb-3">{{ __('طريقة الدفع') }}</label>
<div class="grid grid-cols-3 gap-3">
<div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
{{-- Cash --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="cash" class="peer sr-only">
<div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
peer-checked:border-green-500 peer-checked:bg-green-50 peer-checked:text-green-700
hover:border-gray-400">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-green-500 peer-checked:bg-green-50 peer-checked:text-green-700 hover:border-gray-400">
<svg class="w-6 h-6" 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>
<span class="text-sm font-medium">{{ __('نقدي') }}</span>
<span class="text-xs font-medium">{{ __('نقدي') }}</span>
</div>
</label>
{{-- Card --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="card" class="peer sr-only">
<div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700
hover:border-gray-400">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:border-gray-400">
<svg class="w-6 h-6" 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>
<span class="text-sm font-medium">{{ __('بطاقة') }}</span>
<span class="text-xs font-medium">{{ __('بطاقة') }}</span>
</div>
</label>
{{-- Bank Transfer --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="bank_transfer" class="peer sr-only">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-checked:text-indigo-700 hover:border-gray-400">
<svg class="w-6 h-6" 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>
<span class="text-xs font-medium">{{ __('تحويل بنكي') }}</span>
</div>
</label>
{{-- Wallet --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="wallet" class="peer sr-only">
<div class="p-4 min-h-16 flex flex-col items-center justify-center gap-2 border border-gray-300 rounded-xl transition-all
peer-checked:border-purple-500 peer-checked:bg-purple-50 peer-checked:text-purple-700
hover:border-gray-400">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 6h18M3 14h18M3 18h18"/>
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-purple-500 peer-checked:bg-purple-50 peer-checked:text-purple-700 hover:border-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a2.25 2.25 0 01-2.25 2.25H15a2.25 2.25 0 01-2.25-2.25 2.25 2.25 0 012.25-2.25h3.75A2.25 2.25 0 0121 12zM3 6.75A2.25 2.25 0 015.25 4.5h13.5A2.25 2.25 0 0121 6.75v10.5a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 17.25V6.75z"/>
</svg>
<span class="text-xs font-medium">{{ __('محفظة') }}</span>
</div>
</label>
{{-- Online --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="online" class="peer sr-only">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-cyan-500 peer-checked:bg-cyan-50 peer-checked:text-cyan-700 hover:border-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
<span class="text-xs font-medium">{{ __('إلكتروني') }}</span>
</div>
</label>
{{-- Cheque --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="cheque" class="peer sr-only">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-amber-500 peer-checked:bg-amber-50 peer-checked:text-amber-700 hover:border-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<span class="text-xs font-medium">{{ __('شيك') }}</span>
</div>
</label>
{{-- Other --}}
<label class="relative cursor-pointer">
<input type="radio" wire:model="payment_method" value="other" class="peer sr-only">
<div class="p-3 min-h-16 flex flex-col items-center justify-center gap-1.5 border border-gray-300 rounded-xl transition-all peer-checked:border-gray-500 peer-checked:bg-gray-50 peer-checked:text-gray-700 hover:border-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span class="text-sm font-medium">{{ __('محفظة') }}</span>
<span class="text-xs font-medium">{{ __('أخرى') }}</span>
</div>
</label>
</div>
......@@ -410,11 +447,7 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-amber-600 text-white
<div class="flex items-center justify-between">
<span class="text-gray-600">{{ __('طريقة الدفع') }}</span>
<span class="font-medium text-gray-800">
@switch($payment_method)
@case('cash') {{ __('نقدي') }} @break
@case('card') {{ __('بطاقة') }} @break
@case('wallet') {{ __('محفظة') }} @break
@endswitch
{{ \App\Domain\Financial\Enums\PaymentMethod::tryFrom($payment_method)?->label() ?? $payment_method }}
</span>
</div>
<div class="border-t border-gray-300 pt-4 flex items-center justify-between">
......
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