Commit 1b69367d authored by Mahmoud Aglan's avatar Mahmoud Aglan

Additional mobile fixes from parallel agents (forms, lists, reports)

- Remaining form views: touch-friendly inputs, stacked buttons
- assignment-list, pricing-rule-list: mobile card layouts
- visual-schedule-builder: stacked sidebar on mobile
- reports-page, user-profile: responsive grids and padding
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 944501f1
...@@ -198,13 +198,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -198,13 +198,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
{{-- Submit --}} {{-- Submit --}}
<div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('assignments.list') }}" wire:navigate <a href="{{ route('assignments.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
<div> <div>
<div class="flex items-center justify-between mb-6"> {{-- Header --}}
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1>
@can('assignments.create') @can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate <a href="{{ route('assignments.create') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 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="M12 4v16m8-8H4"/></svg> <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="M12 4v16m8-8H4"/></svg>
{{ __('تكليف جديد') }} <span class="hidden sm:inline">{{ __('تكليف جديد') }}</span>
</a> </a>
@endcan @endcan
</div> </div>
{{-- Flash Messages --}} {{-- Flash Messages --}}
@if(session('success')) @if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
{{ session('success') }} {{ session('success') }}
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm"> <div class="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
{{ session('error') }} {{ session('error') }}
</div> </div>
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-5 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2 md:col-span-1 lg:col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث باسم المستخدم...') }}" placeholder="{{ __('بحث باسم المستخدم...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="status" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الحالات') }}</option> <option value="">{{ __('كل الحالات') }}</option>
@foreach($statusOptions as $value => $label) @foreach($statusOptions as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="scope" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="scope" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل النطاقات') }}</option> <option value="">{{ __('كل النطاقات') }}</option>
@foreach($scopeOptions as $value => $label) @foreach($scopeOptions as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="assignableType" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="assignableType" class="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الأنواع') }}</option> <option value="">{{ __('كل الأنواع') }}</option>
<option value="group">{{ __('مجموعة') }}</option> <option value="group">{{ __('مجموعة') }}</option>
<option value="session">{{ __('حصة') }}</option> <option value="session">{{ __('حصة') }}</option>
...@@ -51,9 +52,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -51,9 +52,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div wire:loading.class="opacity-50 pointer-events-none">
<div class="overflow-x-auto">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -190,6 +192,7 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -190,6 +192,7 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
@if($assignments->hasPages()) @if($assignments->hasPages())
<div class="px-4 py-3 border-t border-gray-200"> <div class="px-4 py-3 border-t border-gray-200">
...@@ -197,4 +200,140 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -197,4 +200,140 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($assignments as $assignment)
@php
$scopeValue = $assignment->scope->value ?? $assignment->scope;
$scopeColors = [
'full' => 'blue',
'partial' => 'amber',
'supervising' => 'purple',
'assisting' => 'green',
'observing' => 'gray',
];
$sColor = $scopeColors[$scopeValue] ?? 'gray';
$statusValue = $assignment->status->value ?? $assignment->status;
$statusColors = [
'active' => 'green',
'suspended' => 'amber',
'completed' => 'blue',
'cancelled' => 'red',
];
$stColor = $statusColors[$statusValue] ?? 'gray';
@endphp
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
{{-- User & Badges --}}
<div class="flex items-start justify-between gap-2 mb-3">
<div>
<span class="font-medium text-gray-800 text-sm">
{{ $assignment->user?->name_ar ?? $assignment->user?->name ?? '—' }}
</span>
@if($assignment->role_label)
<p class="text-xs text-gray-500 mt-0.5">{{ $assignment->role_label }}</p>
@endif
</div>
<div class="flex items-center gap-1.5 shrink-0">
<span class="px-2 py-0.5 text-xs bg-{{ $sColor }}-100 text-{{ $sColor }}-700 rounded-full">
{{ $assignment->scope->label() }}
</span>
<span class="px-2 py-0.5 text-xs bg-{{ $stColor }}-100 text-{{ $stColor }}-700 rounded-full">
{{ $assignment->status->label() }}
</span>
</div>
</div>
{{-- Assignable Info --}}
<div class="text-sm text-gray-600 mb-3">
@if($assignment->assignable)
@if($assignment->assignable_type === \App\Domain\Training\Models\TrainingGroup::class)
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4 text-blue-500" 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>
{{ $assignment->assignable->name_ar ?? '—' }}
</span>
@else
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4 text-green-500" 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>
{{ __('حصة') }} - {{ $assignment->assignable->session_date?->format('Y-m-d') ?? '—' }}
</span>
@endif
@else
<span class="text-gray-400"></span>
@endif
</div>
{{-- Dates --}}
<div class="flex items-center gap-4 text-xs text-gray-500 mb-3">
<div>
<span class="text-gray-400">{{ __('من') }}:</span>
<span dir="ltr">{{ $assignment->start_date?->format('Y-m-d') ?? '—' }}</span>
</div>
<div>
<span class="text-gray-400">{{ __('إلى') }}:</span>
<span dir="ltr">{{ $assignment->end_date?->format('Y-m-d') ?? '—' }}</span>
</div>
</div>
{{-- Actions --}}
@can('assignments.update')
<div class="flex items-center gap-3 pt-2 border-t border-gray-100">
@if($statusValue === 'active')
<button wire:click="suspend('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="suspend('{{ $assignment->uuid }}')"
class="py-2 text-amber-600 hover:text-amber-800 text-sm font-medium"
title="{{ __('تعليق') }}">
<span wire:loading.remove wire:target="suspend('{{ $assignment->uuid }}')">{{ __('تعليق') }}</span>
<span wire:loading wire:target="suspend('{{ $assignment->uuid }}')">...</span>
</button>
@endif
@if($statusValue === 'suspended')
<button wire:click="activate('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="activate('{{ $assignment->uuid }}')"
class="py-2 text-green-600 hover:text-green-800 text-sm font-medium"
title="{{ __('تنشيط') }}">
<span wire:loading.remove wire:target="activate('{{ $assignment->uuid }}')">{{ __('تنشيط') }}</span>
<span wire:loading wire:target="activate('{{ $assignment->uuid }}')">...</span>
</button>
@endif
@if(in_array($statusValue, ['active', 'suspended']))
<button wire:click="cancel('{{ $assignment->uuid }}')"
wire:loading.attr="disabled"
wire:target="cancel('{{ $assignment->uuid }}')"
wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا التكليف؟') }}"
class="py-2 text-red-600 hover:text-red-800 text-sm font-medium"
title="{{ __('إلغاء') }}">
<span wire:loading.remove wire:target="cancel('{{ $assignment->uuid }}')">{{ __('إلغاء') }}</span>
<span wire:loading wire:target="cancel('{{ $assignment->uuid }}')">...</span>
</button>
@endif
</div>
@endcan
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12 text-center">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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 2"/>
</svg>
<p class="text-gray-500 text-sm">{{ __('لا يوجد تكليفات') }}</p>
@can('assignments.create')
<a href="{{ route('assignments.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ __('إنشاء أول تكليف') }}
</a>
@endcan
</div>
</div>
@endforelse
@if($assignments->hasPages())
<div class="mt-4">
{{ $assignments->links() }}
</div>
@endif
</div>
</div> </div>
...@@ -156,7 +156,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r ...@@ -156,7 +156,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
<!-- Actions --> <!-- Actions -->
<div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('evaluations.list') }}" <a href="{{ route('evaluations.list') }}"
class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-center w-full sm:w-auto"> class="text-center px-4 sm:px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
...@@ -165,7 +165,7 @@ class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border bor ...@@ -165,7 +165,7 @@ class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border bor
wire:click="saveDraft" wire:click="saveDraft"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="saveDraft" wire:target="saveDraft"
class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors w-full sm:w-auto"> class="text-center px-4 sm:px-6 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors">
<span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span> <span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span>
<span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
...@@ -175,7 +175,7 @@ class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg ...@@ -175,7 +175,7 @@ class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg
wire:click="submit" wire:click="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="submit" wire:target="submit"
class="px-5 py-2.5 sm:py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors w-full sm:w-auto"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span> <span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span>
<span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span> <span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span>
</button> </button>
......
...@@ -157,18 +157,18 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 ...@@ -157,18 +157,18 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2
</div> </div>
{{-- Boolean Options --}} {{-- Boolean Options --}}
<div class="flex flex-wrap gap-6 mt-4 pt-4 border-t border-gray-100"> <div class="flex flex-wrap gap-4 sm:gap-6 mt-4 pt-4 border-t border-gray-100">
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_indoor" <input type="checkbox" wire:model="is_indoor"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('مغطى (داخلي)') }}</span> <span class="text-sm text-gray-700">{{ __('مغطى (داخلي)') }}</span>
</label> </label>
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="has_lighting" <input type="checkbox" wire:model="has_lighting"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('يوجد إضاءة') }}</span> <span class="text-sm text-gray-700">{{ __('يوجد إضاءة') }}</span>
</label> </label>
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="has_ac" <input type="checkbox" wire:model="has_ac"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('يوجد تكييف') }}</span> <span class="text-sm text-gray-700">{{ __('يوجد تكييف') }}</span>
...@@ -226,7 +226,7 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 ...@@ -226,7 +226,7 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2
<div> <div>
<label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الترتيب') }}</label> <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الترتيب') }}</label>
<input type="number" id="sort_order" wire:model="sort_order" min="0" dir="ltr" <input type="number" id="sort_order" wire:model="sort_order" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror">
@error('sort_order') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('sort_order') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
......
@php use Illuminate\Support\Carbon; @endphp @php use Illuminate\Support\Carbon; @endphp
<div x-data="scheduleBuilder()" class="flex h-[calc(100vh-4rem)]"> <div x-data="scheduleBuilder()" class="flex flex-col lg:flex-row h-[calc(100vh-4rem)]">
{{-- Sidebar: Groups & Trainers --}} {{-- Sidebar: Groups & Trainers --}}
<aside class="w-72 bg-white border-e border-gray-200 flex flex-col shrink-0 overflow-hidden"> <aside class="w-full lg:w-72 bg-white border-b lg:border-b-0 lg:border-e border-gray-200 flex flex-col shrink-0 overflow-hidden max-h-[40vh] lg:max-h-none">
{{-- Facility Selector --}} {{-- Facility Selector --}}
<div class="p-4 border-b border-gray-100"> <div class="p-3 sm:p-4 border-b border-gray-100">
<label class="block text-xs font-medium text-gray-500 mb-1">{{ __('المنشأة') }}</label> <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('المنشأة') }}</label>
<select wire:model.live="facility_id" class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="facility_id" class="w-full text-sm border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 py-2.5">
<option value="">{{ __('اختر المنشأة...') }}</option> <option value="">{{ __('اختر المنشأة...') }}</option>
@foreach($facilities as $f) @foreach($facilities as $f)
<option value="{{ $f->id }}">{{ $f->name_ar }} ({{ $f->branch?->name_ar }})</option> <option value="{{ $f->id }}">{{ $f->name_ar }} ({{ $f->branch?->name_ar }})</option>
...@@ -24,7 +24,7 @@ class="flex-1 py-2.5 text-xs font-medium border-b-2 transition-colors">{{ __('ا ...@@ -24,7 +24,7 @@ class="flex-1 py-2.5 text-xs font-medium border-b-2 transition-colors">{{ __('ا
{{-- Search --}} {{-- Search --}}
<div class="p-3"> <div class="p-3">
<input type="text" x-model="sidebarSearch" placeholder="{{ __('بحث...') }}" <input type="text" x-model="sidebarSearch" placeholder="{{ __('بحث...') }}"
class="w-full text-sm border-gray-300 rounded-lg px-3 py-1.5 focus:ring-blue-500 focus:border-blue-500"> class="w-full text-sm border-gray-300 rounded-lg px-3 py-2.5 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
{{-- Groups List --}} {{-- Groups List --}}
...@@ -103,15 +103,15 @@ class="border rounded-lg p-2.5 transition-colors ...@@ -103,15 +103,15 @@ class="border rounded-lg p-2.5 transition-colors
{{-- Main Content --}} {{-- Main Content --}}
<main class="flex-1 flex flex-col overflow-hidden bg-gray-50"> <main class="flex-1 flex flex-col overflow-hidden bg-gray-50">
{{-- Top bar: Date Navigation --}} {{-- Top bar: Date Navigation --}}
<div class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shrink-0"> <div class="bg-white border-b border-gray-200 px-3 sm:px-4 py-3 flex flex-col sm:flex-row sm:items-center justify-between gap-3 shrink-0">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button wire:click="selectDay('{{ Carbon::parse($selectedDay)->subDay()->toDateString() }}')" <button wire:click="selectDay('{{ Carbon::parse($selectedDay)->subDay()->toDateString() }}')"
class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600"> class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600">
<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="M9 5l7 7-7 7"/></svg> <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="M9 5l7 7-7 7"/></svg>
</button> </button>
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 sm:gap-3 flex-wrap">
<input type="date" wire:model.live="selectedDay" class="border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500" dir="ltr"> <input type="date" wire:model.live="selectedDay" class="border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500 py-2.5" dir="ltr">
<span class="text-sm font-medium text-gray-700"> <span class="text-xs sm:text-sm font-medium text-gray-700 hidden sm:inline">
{{ Carbon::parse($selectedDay)->translatedFormat('l j F Y') }} {{ Carbon::parse($selectedDay)->translatedFormat('l j F Y') }}
</span> </span>
</div> </div>
...@@ -122,17 +122,17 @@ class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600"> ...@@ -122,17 +122,17 @@ class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600">
</div> </div>
{{-- Week quick-nav --}} {{-- Week quick-nav --}}
<div class="flex items-center gap-1"> <div class="flex items-center gap-1 overflow-x-auto">
@for($d = 0; $d < 7; $d++) @for($d = 0; $d < 7; $d++)
@php $date = Carbon::parse($selectedDay)->startOfWeek()->addDays($d); @endphp @php $date = Carbon::parse($selectedDay)->startOfWeek()->addDays($d); @endphp
<button wire:click="selectDay('{{ $date->toDateString() }}')" <button wire:click="selectDay('{{ $date->toDateString() }}')"
class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $selectedDay ? 'bg-blue-600 text-white' : 'hover:bg-gray-100 text-gray-600' }}"> class="w-9 h-9 rounded-lg text-xs font-medium shrink-0 {{ $date->toDateString() === $selectedDay ? 'bg-blue-600 text-white' : 'hover:bg-gray-100 text-gray-600' }}">
{{ $date->translatedFormat('D') }} {{ $date->translatedFormat('D') }}
</button> </button>
@endfor @endfor
</div> </div>
<button wire:click="selectDay('{{ now()->toDateString() }}')" class="px-3 py-1.5 text-xs font-medium text-blue-600 hover:bg-blue-50 rounded-lg"> <button wire:click="selectDay('{{ now()->toDateString() }}')" class="px-3 py-2.5 text-xs font-medium text-blue-600 hover:bg-blue-50 rounded-lg shrink-0">
{{ __('اليوم') }} {{ __('اليوم') }}
</button> </button>
</div> </div>
...@@ -140,13 +140,13 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele ...@@ -140,13 +140,13 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele
{{-- Alerts --}} {{-- Alerts --}}
<div class="shrink-0"> <div class="shrink-0">
@if(session('success')) @if(session('success'))
<div class="mx-4 mt-3 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm flex items-center justify-between"> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm flex items-center justify-between">
<span>{{ session('success') }}</span> <span>{{ session('success') }}</span>
</div> </div>
@endif @endif
@if(!empty($conflicts)) @if(!empty($conflicts))
<div class="mx-4 mt-3 p-3 bg-red-50 border border-red-200 rounded-lg"> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<span class="text-sm font-bold text-red-700">{{ __('تعارض — لا يمكن التعيين') }}</span> <span class="text-sm font-bold text-red-700">{{ __('تعارض — لا يمكن التعيين') }}</span>
<button wire:click="dismissConflicts" class="text-red-400 hover:text-red-600 text-xs">✕</button> <button wire:click="dismissConflicts" class="text-red-400 hover:text-red-600 text-xs">✕</button>
...@@ -162,7 +162,7 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele ...@@ -162,7 +162,7 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele
@endif @endif
@if(!empty($warnings)) @if(!empty($warnings))
<div class="mx-4 mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg"> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<span class="text-sm font-bold text-amber-700">{{ __('تحذيرات (غير مانعة)') }}</span> <span class="text-sm font-bold text-amber-700">{{ __('تحذيرات (غير مانعة)') }}</span>
<button wire:click="dismissWarnings" class="text-amber-400 hover:text-amber-600 text-xs">✕</button> <button wire:click="dismissWarnings" class="text-amber-400 hover:text-amber-600 text-xs">✕</button>
...@@ -179,38 +179,38 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele ...@@ -179,38 +179,38 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele
@endif @endif
@error('time') @error('time')
<div class="mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div>
@enderror @enderror
@error('save') @error('save')
<div class="mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div>
@enderror @enderror
@error('assignment') @error('assignment')
<div class="mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div> <div class="mx-3 sm:mx-4 mt-3 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{{ $message }}</div>
@enderror @enderror
</div> </div>
{{-- Content Area --}} {{-- Content Area --}}
@if(!$facility) @if(!$facility)
<div class="flex-1 flex items-center justify-center"> <div class="flex-1 flex items-center justify-center p-4">
<div class="text-center"> <div class="text-center">
<svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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> <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
<p class="text-gray-500 font-medium">{{ __('اختر منشأة من القائمة الجانبية') }}</p> <p class="text-gray-500 font-medium text-sm">{{ __('اختر منشأة من القائمة الجانبية') }}</p>
<p class="text-gray-400 text-sm mt-1">{{ __('لبدء جدولة المجموعات والمدربين') }}</p> <p class="text-gray-400 text-xs sm:text-sm mt-1">{{ __('لبدء جدولة المجموعات والمدربين') }}</p>
</div> </div>
</div> </div>
@elseif(!$selectedSlotStart) @elseif(!$selectedSlotStart)
{{-- Time Slots Grid + Custom Time Picker --}} {{-- Time Slots Grid + Custom Time Picker --}}
<div class="flex-1 overflow-y-auto p-4"> <div class="flex-1 overflow-y-auto p-3 sm:p-4">
{{-- Custom time picker --}} {{-- Custom time picker --}}
<div class="mb-4 bg-white border border-gray-200 rounded-xl p-4"> <div class="mb-4 bg-white border border-gray-200 rounded-xl p-3 sm:p-4">
<div class="flex items-center gap-3 flex-wrap"> <div class="flex flex-col sm:flex-row sm:items-center gap-3 flex-wrap">
<span class="text-sm font-medium text-gray-700">{{ __('وقت مخصص:') }}</span> <span class="text-sm font-medium text-gray-700">{{ __('وقت مخصص:') }}</span>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input type="time" wire:model="customStartTime" class="border-gray-300 rounded-lg text-sm px-3 py-1.5 focus:ring-blue-500 focus:border-blue-500 w-28" dir="ltr" step="300"> <input type="time" wire:model="customStartTime" class="border-gray-300 rounded-lg text-sm px-3 py-2.5 focus:ring-blue-500 focus:border-blue-500 w-28" dir="ltr" step="300">
<span class="text-gray-400">—</span> <span class="text-gray-400">—</span>
<input type="time" wire:model="customEndTime" class="border-gray-300 rounded-lg text-sm px-3 py-1.5 focus:ring-blue-500 focus:border-blue-500 w-28" dir="ltr" step="300"> <input type="time" wire:model="customEndTime" class="border-gray-300 rounded-lg text-sm px-3 py-2.5 focus:ring-blue-500 focus:border-blue-500 w-28" dir="ltr" step="300">
</div> </div>
<button wire:click="openCustomTime" class="px-4 py-1.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700" <button wire:click="openCustomTime" class="px-4 py-2.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
wire:loading.attr="disabled" wire:target="openCustomTime"> wire:loading.attr="disabled" wire:target="openCustomTime">
{{ __('فتح') }} {{ __('فتح') }}
</button> </button>
...@@ -219,16 +219,16 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele ...@@ -219,16 +219,16 @@ class="w-9 h-9 rounded-lg text-xs font-medium {{ $date->toDateString() === $sele
</div> </div>
{{-- Hourly slots --}} {{-- Hourly slots --}}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3"> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-3">
@foreach($timeSlots as $slot) @foreach($timeSlots as $slot)
@php @php
$slotReservations = collect($existingReservations)->filter(fn($r) => $r['start'] < $slot['end'] && $r['end'] > $slot['start']); $slotReservations = collect($existingReservations)->filter(fn($r) => $r['start'] < $slot['end'] && $r['end'] > $slot['start']);
$isBusy = $slotReservations->isNotEmpty(); $isBusy = $slotReservations->isNotEmpty();
@endphp @endphp
<button wire:click="openSlot('{{ $slot['start'] }}', '{{ $slot['end'] }}')" <button wire:click="openSlot('{{ $slot['start'] }}', '{{ $slot['end'] }}')"
class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md {{ $isBusy ? 'border-blue-200 bg-blue-50/50 hover:border-blue-400' : 'border-gray-200 bg-white hover:border-blue-300' }}"> class="relative border rounded-xl p-3 sm:p-4 text-start transition-all hover:shadow-md {{ $isBusy ? 'border-blue-200 bg-blue-50/50 hover:border-blue-400' : 'border-gray-200 bg-white hover:border-blue-300' }}">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-lg font-bold text-gray-800" dir="ltr">{{ $slot['label'] }}</span> <span class="text-sm sm:text-lg font-bold text-gray-800" dir="ltr">{{ $slot['label'] }}</span>
@if($isBusy) @if($isBusy)
<span class="w-2.5 h-2.5 bg-blue-500 rounded-full animate-pulse"></span> <span class="w-2.5 h-2.5 bg-blue-500 rounded-full animate-pulse"></span>
@endif @endif
...@@ -251,7 +251,7 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md ...@@ -251,7 +251,7 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md
@if(empty($timeSlots)) @if(empty($timeSlots))
<div class="text-center py-12"> <div class="text-center py-12">
<p class="text-gray-500">{{ __('لم يتم تحديد ساعات العمل لهذه المنشأة') }}</p> <p class="text-gray-500 text-sm">{{ __('لم يتم تحديد ساعات العمل لهذه المنشأة') }}</p>
<a href="{{ route('facilities.list') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-700 mt-2 inline-block">{{ __('تعديل المنشأة') }}</a> <a href="{{ route('facilities.list') }}" wire:navigate class="text-sm text-blue-600 hover:text-blue-700 mt-2 inline-block">{{ __('تعديل المنشأة') }}</a>
</div> </div>
@endif @endif
...@@ -260,30 +260,30 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md ...@@ -260,30 +260,30 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md
{{-- Grid View: Segments + Assignments --}} {{-- Grid View: Segments + Assignments --}}
<div class="flex-1 flex flex-col overflow-hidden"> <div class="flex-1 flex flex-col overflow-hidden">
{{-- Slot Header --}} {{-- Slot Header --}}
<div class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shrink-0"> <div class="bg-white border-b border-gray-200 px-3 sm:px-4 py-3 flex flex-col sm:flex-row sm:items-center justify-between gap-3 shrink-0">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<button wire:click="closeSlot" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600"> <button wire:click="closeSlot" class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-600">
<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="M6 18L18 6M6 6l12 12"/></svg> <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="M6 18L18 6M6 6l12 12"/></svg>
</button> </button>
<div> <div class="min-w-0">
<span class="text-sm font-bold text-gray-800" dir="ltr">{{ $selectedSlotStart }} — {{ $selectedSlotEnd }}</span> <span class="text-sm font-bold text-gray-800" dir="ltr">{{ $selectedSlotStart }} — {{ $selectedSlotEnd }}</span>
<span class="text-xs text-gray-500 ms-2">{{ $facility->name_ar }}</span> <span class="text-xs text-gray-500 ms-2 hidden sm:inline">{{ $facility->name_ar }}</span>
@if($useCustomTime) @if($useCustomTime)
<span class="text-[10px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded ms-2">{{ __('وقت مخصص') }}</span> <span class="text-[10px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded ms-2">{{ __('وقت مخصص') }}</span>
@endif @endif
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 flex-wrap">
@php $newCount = collect($assignments)->filter(fn($a) => ($a['type'] ?? '') !== 'existing')->count(); @endphp @php $newCount = collect($assignments)->filter(fn($a) => ($a['type'] ?? '') !== 'existing')->count(); @endphp
@if($newCount > 0) @if($newCount > 0)
<span class="text-xs text-gray-500">{{ $newCount }} {{ __('جديد') }}</span> <span class="text-xs text-gray-500">{{ $newCount }} {{ __('جديد') }}</span>
@endif @endif
<button @click="$wire.set('showRecurring', true)" class="px-3 py-1.5 text-xs font-medium text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50" <button @click="$wire.set('showRecurring', true)" class="px-3 py-2.5 text-xs font-medium text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50"
@if($newCount === 0) disabled title="{{ __('أضف مجموعات أولاً') }}" @endif> @if($newCount === 0) disabled title="{{ __('أضف مجموعات أولاً') }}" @endif>
<svg class="w-4 h-4 inline me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> <svg class="w-4 h-4 inline me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
{{ __('تكرار أسبوعي') }} <span class="hidden sm:inline">{{ __('تكرار أسبوعي') }}</span>
</button> </button>
<button wire:click="saveAssignments" class="px-4 py-1.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50" <button wire:click="saveAssignments" class="px-4 py-2.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
wire:loading.attr="disabled" wire:target="saveAssignments" wire:loading.attr="disabled" wire:target="saveAssignments"
@if($newCount === 0) disabled @endif> @if($newCount === 0) disabled @endif>
<span wire:loading.remove wire:target="saveAssignments">{{ __('حفظ') }}</span> <span wire:loading.remove wire:target="saveAssignments">{{ __('حفظ') }}</span>
...@@ -293,7 +293,7 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md ...@@ -293,7 +293,7 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md
</div> </div>
{{-- Grid Area --}} {{-- Grid Area --}}
<div class="flex-1 overflow-auto p-4"> <div class="flex-1 overflow-auto p-3 sm:p-4">
@if(!empty($gridSegments)) @if(!empty($gridSegments))
@php @php
$maxRow = collect($gridSegments)->max('row') ?? 0; $maxRow = collect($gridSegments)->max('row') ?? 0;
...@@ -303,7 +303,8 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md ...@@ -303,7 +303,8 @@ class="relative border rounded-xl p-4 text-start transition-all hover:shadow-md
$rows = $isGrid ? $maxRow + 1 : 1; $rows = $isGrid ? $maxRow + 1 : 1;
@endphp @endphp
<div class="{{ $isGrid ? 'grid gap-3' : 'flex flex-wrap gap-3' }}" <div class="overflow-x-auto">
<div class="{{ $isGrid ? 'grid gap-3' : 'flex flex-wrap gap-3' }} min-w-[400px]"
style="{{ $isGrid ? 'grid-template-columns: repeat(' . $cols . ', minmax(0, 1fr)); grid-template-rows: repeat(' . $rows . ', minmax(120px, 1fr))' : '' }}"> style="{{ $isGrid ? 'grid-template-columns: repeat(' . $cols . ', minmax(0, 1fr)); grid-template-rows: repeat(' . $rows . ', minmax(120px, 1fr))' : '' }}">
@foreach($gridSegments as $seg) @foreach($gridSegments as $seg)
@php @php
...@@ -410,9 +411,10 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل ...@@ -410,9 +411,10 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل
</div> </div>
@endforeach @endforeach
</div> </div>
</div>
{{-- Legend --}} {{-- Legend --}}
<div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-gray-500"> <div class="mt-4 flex flex-wrap items-center gap-3 sm:gap-4 text-xs text-gray-500">
<span class="flex items-center gap-1"><span class="w-3 h-3 border-2 border-dashed border-gray-300 rounded"></span> {{ __('متاح') }}</span> <span class="flex items-center gap-1"><span class="w-3 h-3 border-2 border-dashed border-gray-300 rounded"></span> {{ __('متاح') }}</span>
<span class="flex items-center gap-1"><span class="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></span> {{ __('محجوز') }}</span> <span class="flex items-center gap-1"><span class="w-3 h-3 bg-blue-100 border border-blue-300 rounded"></span> {{ __('محجوز') }}</span>
<span class="flex items-center gap-1"><span class="w-3 h-3 bg-green-100 border border-green-300 rounded"></span> {{ __('جديد (لم يُحفظ)') }}</span> <span class="flex items-center gap-1"><span class="w-3 h-3 bg-green-100 border border-green-300 rounded"></span> {{ __('جديد (لم يُحفظ)') }}</span>
...@@ -422,23 +424,23 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل ...@@ -422,23 +424,23 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل
</div> </div>
{{-- Multi-select helper --}} {{-- Multi-select helper --}}
<div x-show="selectedSegments.length > 0" x-transition class="mt-4 bg-blue-50 border border-blue-200 rounded-xl p-4"> <div x-show="selectedSegments.length > 0" x-transition class="mt-4 bg-blue-50 border border-blue-200 rounded-xl p-3 sm:p-4">
<p class="text-sm font-medium text-blue-800 mb-2"> <p class="text-sm font-medium text-blue-800 mb-2">
{{ __('تم تحديد') }} <span x-text="selectedSegments.length" class="font-bold"></span> {{ __('خلية') }} {{ __('تم تحديد') }} <span x-text="selectedSegments.length" class="font-bold"></span> {{ __('خلية') }}
</p> </p>
<p class="text-xs text-blue-600 mb-3">{{ __('اسحب مجموعة أو مدرب على أي خلية محددة لتعيينهم جميعاً') }}</p> <p class="text-xs text-blue-600 mb-3">{{ __('اسحب مجموعة أو مدرب على أي خلية محددة لتعيينهم جميعاً') }}</p>
<div class="flex gap-2"> <div class="flex flex-wrap gap-2">
<button @click="selectedSegments = []" class="text-xs text-gray-500 hover:text-gray-700 border border-gray-300 px-2 py-1 rounded">{{ __('إلغاء التحديد') }}</button> <button @click="selectedSegments = []" class="text-xs text-gray-500 hover:text-gray-700 border border-gray-300 px-2 py-1.5 rounded">{{ __('إلغاء التحديد') }}</button>
<button @click="selectRow()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1 rounded">{{ __('تحديد الصف') }}</button> <button @click="selectRow()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1.5 rounded">{{ __('تحديد الصف') }}</button>
<button @click="selectCol()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1 rounded">{{ __('تحديد العمود') }}</button> <button @click="selectCol()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1.5 rounded">{{ __('تحديد العمود') }}</button>
<button @click="selectAll()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1 rounded">{{ __('تحديد الكل') }}</button> <button @click="selectAll()" class="text-xs text-blue-600 hover:text-blue-700 border border-blue-300 px-2 py-1.5 rounded">{{ __('تحديد الكل') }}</button>
</div> </div>
</div> </div>
@else @else
<div class="text-center py-12"> <div class="text-center py-12">
<svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg> <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
<p class="text-gray-500 font-medium">{{ __('لا يوجد تخطيط لهذه المنشأة') }}</p> <p class="text-gray-500 font-medium text-sm">{{ __('لا يوجد تخطيط لهذه المنشأة') }}</p>
<p class="text-gray-400 text-sm mt-1">{{ __('أنشئ تخطيطاً أولاً من صفحة إدارة المنشآت') }}</p> <p class="text-gray-400 text-xs sm:text-sm mt-1">{{ __('أنشئ تخطيطاً أولاً من صفحة إدارة المنشآت') }}</p>
@if($facility) @if($facility)
<a href="{{ route('facilities.layouts', $facility) }}" wire:navigate class="inline-block mt-3 text-sm text-blue-600 hover:text-blue-700 font-medium"> <a href="{{ route('facilities.layouts', $facility) }}" wire:navigate class="inline-block mt-3 text-sm text-blue-600 hover:text-blue-700 font-medium">
{{ __('إنشاء تخطيط') }} {{ __('إنشاء تخطيط') }}
...@@ -453,9 +455,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل ...@@ -453,9 +455,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل
{{-- Recurring Booking Modal --}} {{-- Recurring Booking Modal --}}
@if($showRecurring) @if($showRecurring)
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="$wire.set('showRecurring', false)"> <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" @click.self="$wire.set('showRecurring', false)">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 p-6"> <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
<h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تكرار الحجز أسبوعياً') }}</h3> <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">{{ __('تكرار الحجز أسبوعياً') }}</h3>
<div class="space-y-4"> <div class="space-y-4">
{{-- Duration --}} {{-- Duration --}}
...@@ -477,7 +479,7 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل ...@@ -477,7 +479,7 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
@php $dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت']; @endphp @php $dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت']; @endphp
@for($d = 0; $d < 7; $d++) @for($d = 0; $d < 7; $d++)
<label class="inline-flex items-center gap-1.5 px-3 py-1.5 border rounded-lg cursor-pointer text-xs <label class="inline-flex items-center gap-1.5 px-3 py-2.5 border rounded-lg cursor-pointer text-xs
{{ $d === $dayOfWeek ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-gray-200 hover:border-blue-200' }}"> {{ $d === $dayOfWeek ? 'border-blue-300 bg-blue-50 text-blue-700' : 'border-gray-200 hover:border-blue-200' }}">
<input type="checkbox" wire:model="recurringDays" value="{{ $d }}" class="w-3.5 h-3.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> <input type="checkbox" wire:model="recurringDays" value="{{ $d }}" class="w-3.5 h-3.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
{{ $dayNames[$d] }} {{ $dayNames[$d] }}
...@@ -508,9 +510,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل ...@@ -508,9 +510,9 @@ class="text-[10px] text-red-500 hover:text-red-700 hover:underline">{{ __('إل
</div> </div>
</div> </div>
<div class="flex items-center justify-end gap-3 mt-6"> <div class="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-end gap-3 mt-6">
<button @click="$wire.set('showRecurring', false)" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">{{ __('إلغاء') }}</button> <button @click="$wire.set('showRecurring', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100">{{ __('إلغاء') }}</button>
<button wire:click="saveRecurring" class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700" <button wire:click="saveRecurring" class="w-full sm:w-auto px-6 py-2.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
wire:loading.attr="disabled" wire:target="saveRecurring"> wire:loading.attr="disabled" wire:target="saveRecurring">
<span wire:loading.remove wire:target="saveRecurring">{{ __('حجز متكرر') }}</span> <span wire:loading.remove wire:target="saveRecurring">{{ __('حجز متكرر') }}</span>
<span wire:loading wire:target="saveRecurring">{{ __('جارٍ الحجز...') }}</span> <span wire:loading wire:target="saveRecurring">{{ __('جارٍ الحجز...') }}</span>
......
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
<h4 class="text-sm font-semibold text-gray-700 mb-3">{{ __('كود خصم') }}</h4> <h4 class="text-base sm:text-lg font-semibold text-gray-700 mb-3">{{ __('كود خصم') }}</h4>
<div class="flex gap-2"> <div class="flex flex-col sm:flex-row gap-2">
<input type="text" wire:model="code" wire:keydown.enter="check" <input type="text" wire:model="code" wire:keydown.enter="check"
placeholder="{{ __('أدخل الكود') }}" placeholder="{{ __('أدخل الكود') }}"
class="flex-1 rounded-lg border-gray-300 text-sm uppercase" dir="ltr"> class="flex-1 rounded-lg border-gray-300 text-sm uppercase py-2.5" dir="ltr">
<button wire:click="check" wire:loading.attr="disabled" wire:target="check" <button wire:click="check" wire:loading.attr="disabled" wire:target="check"
class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50"> class="w-full sm:w-auto px-4 py-2.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50">
<span wire:loading.remove wire:target="check">{{ __('تحقق') }}</span> <span wire:loading.remove wire:target="check">{{ __('تحقق') }}</span>
<span wire:loading wire:target="check">...</span> <span wire:loading wire:target="check">...</span>
</button> </button>
......
...@@ -93,7 +93,7 @@ class="w-full rounded-lg border-gray-300 text-sm py-2.5"> ...@@ -93,7 +93,7 @@ class="w-full rounded-lg border-gray-300 text-sm py-2.5">
</div> </div>
<button wire:click="save" wire:loading.attr="disabled" <button wire:click="save" wire:loading.attr="disabled"
class="w-full mt-6 px-6 py-2.5 sm:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="w-full mt-6 px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="save">{{ __('إنشاء خطة الدفع') }}</span> <span wire:loading.remove wire:target="save">{{ __('إنشاء خطة الدفع') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الإنشاء...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الإنشاء...') }}</span>
</button> </button>
......
...@@ -14,12 +14,12 @@ ...@@ -14,12 +14,12 @@
<form wire:submit="save" class="space-y-6"> <form wire:submit="save" class="space-y-6">
<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">
<h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('البيانات الأساسية') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
{{-- Name AR --}} {{-- Name AR --}}
<div> <div>
<label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label> <label for="name_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالعربية') }} *</label>
<input type="text" id="name_ar" wire:model="name_ar" <input type="text" id="name_ar" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -27,7 +27,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -27,7 +27,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالإنجليزية') }}</label> <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم المنتج بالإنجليزية') }}</label>
<input type="text" id="name" wire:model="name" dir="ltr" <input type="text" id="name" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -35,7 +35,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -35,7 +35,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="sku" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز المنتج (SKU)') }} *</label> <label for="sku" class="block text-sm font-medium text-gray-700 mb-1">{{ __('رمز المنتج (SKU)') }} *</label>
<input type="text" id="sku" wire:model="sku" dir="ltr" <input type="text" id="sku" wire:model="sku" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sku') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sku') border-red-500 @enderror">
@error('sku') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('sku') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -43,7 +43,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -43,7 +43,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="barcode" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الباركود') }}</label> <label for="barcode" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الباركود') }}</label>
<input type="text" id="barcode" wire:model="barcode" dir="ltr" <input type="text" id="barcode" wire:model="barcode" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('barcode') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('barcode') border-red-500 @enderror">
@error('barcode') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('barcode') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -51,7 +51,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -51,7 +51,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label> <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label>
<select id="category_id" wire:model="category_id" <select id="category_id" wire:model="category_id"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category_id') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('category_id') border-red-500 @enderror">
<option value="">{{ __('-- اختر التصنيف --') }}</option> <option value="">{{ __('-- اختر التصنيف --') }}</option>
@foreach($categories as $category) @foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name_ar }}</option> <option value="{{ $category->id }}">{{ $category->name_ar }}</option>
...@@ -64,7 +64,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -64,7 +64,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المنتج') }} *</label> <label for="type" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع المنتج') }} *</label>
<select id="type" wire:model="type" <select id="type" wire:model="type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
@foreach($typeOptions as $value => $label) @foreach($typeOptions as $value => $label)
<option value="{{ $value }}">{{ __($label) }}</option> <option value="{{ $value }}">{{ __($label) }}</option>
@endforeach @endforeach
...@@ -77,12 +77,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -77,12 +77,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Pricing Section --}} {{-- Pricing Section --}}
<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">
<h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('التسعير') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
{{-- Selling Price --}} {{-- Selling Price --}}
<div> <div>
<label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label> <label for="selling_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر البيع (ج.م)') }} *</label>
<input type="number" id="selling_price" wire:model="selling_price" step="0.01" min="0" dir="ltr" <input type="number" id="selling_price" wire:model="selling_price" step="0.01" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('selling_price') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('selling_price') border-red-500 @enderror">
@error('selling_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('selling_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -90,7 +90,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -90,7 +90,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="cost_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر التكلفة (ج.م)') }}</label> <label for="cost_price" class="block text-sm font-medium text-gray-700 mb-1">{{ __('سعر التكلفة (ج.م)') }}</label>
<input type="number" id="cost_price" wire:model="cost_price" step="0.01" min="0" dir="ltr" <input type="number" id="cost_price" wire:model="cost_price" step="0.01" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('cost_price') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('cost_price') border-red-500 @enderror">
@error('cost_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('cost_price') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -98,7 +98,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -98,7 +98,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الضريبة (%)') }}</label> <label for="tax_rate" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نسبة الضريبة (%)') }}</label>
<input type="number" id="tax_rate" wire:model="tax_rate" step="1" min="0" max="100" dir="ltr" <input type="number" id="tax_rate" wire:model="tax_rate" step="1" min="0" max="100" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tax_rate') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('tax_rate') border-red-500 @enderror">
@error('tax_rate') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('tax_rate') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
...@@ -107,10 +107,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -107,10 +107,10 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
{{-- Inventory Section --}} {{-- Inventory Section --}}
<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">
<h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2> <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('إعدادات المخزون') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
{{-- Track Inventory --}} {{-- Track Inventory --}}
<div class="flex items-center md:col-span-3"> <div class="col-span-2 sm:col-span-3">
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model.live="track_inventory" <input type="checkbox" wire:model.live="track_inventory"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('تتبع المخزون') }}</span> <span class="text-sm text-gray-700">{{ __('تتبع المخزون') }}</span>
...@@ -122,7 +122,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -122,7 +122,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<div> <div>
<label for="min_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمخزون') }}</label> <label for="min_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للمخزون') }}</label>
<input type="number" id="min_stock_level" wire:model="min_stock_level" min="0" dir="ltr" <input type="number" id="min_stock_level" wire:model="min_stock_level" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('min_stock_level') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('min_stock_level') border-red-500 @enderror">
@error('min_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('min_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
...@@ -130,7 +130,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -130,7 +130,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="max_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للمخزون') }}</label> <label for="max_stock_level" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأقصى للمخزون') }}</label>
<input type="number" id="max_stock_level" wire:model="max_stock_level" min="0" dir="ltr" <input type="number" id="max_stock_level" wire:model="max_stock_level" min="0" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_stock_level') border-red-500 @enderror"> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('max_stock_level') border-red-500 @enderror">
@error('max_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('max_stock_level') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
@endif @endif
...@@ -142,13 +142,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -142,13 +142,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label> <label for="description_ar" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الوصف') }}</label>
<textarea id="description_ar" wire:model="description_ar" rows="3" <textarea id="description_ar" wire:model="description_ar" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description_ar') border-red-500 @enderror"></textarea> class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description_ar') border-red-500 @enderror"></textarea>
@error('description_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('description_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
{{-- Is Active --}} {{-- Is Active --}}
<div class="mt-4"> <div class="mt-4">
<label class="flex items-center gap-2 cursor-pointer"> <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="is_active" <input type="checkbox" wire:model="is_active"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('نشط') }}</span> <span class="text-sm text-gray-700">{{ __('نشط') }}</span>
......
...@@ -98,9 +98,9 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -98,9 +98,9 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
{{-- Actions --}} {{-- Actions --}}
<div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('inventory.warehouses') }}" wire:navigate <a href="{{ route('inventory.warehouses') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستودع') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستودع') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
...@@ -104,11 +104,11 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:r ...@@ -104,11 +104,11 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:r
{{-- Submit --}} {{-- Submit --}}
<div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200"> <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
<a href="{{ route('notifications.templates') }}" wire:navigate <a href="{{ route('notifications.templates') }}" wire:navigate
class="px-6 py-2.5 sm:py-2 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium text-center w-full sm:w-auto"> class="text-center px-4 sm:px-6 py-2.5 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="inline-flex items-center justify-center gap-2 px-6 py-2.5 sm:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto"> class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
<span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span> <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
...@@ -6,7 +6,7 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ ...@@ -6,7 +6,7 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ
</div> </div>
{{-- Instructions --}} {{-- Instructions --}}
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6"> <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6">
<h3 class="text-sm font-semibold text-blue-800 mb-2">{{ __('تعليمات الاستيراد') }}</h3> <h3 class="text-sm font-semibold text-blue-800 mb-2">{{ __('تعليمات الاستيراد') }}</h3>
<ul class="text-sm text-blue-700 space-y-1 list-disc list-inside"> <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
<li>{{ __('الملف يجب أن يكون بصيغة CSV') }}</li> <li>{{ __('الملف يجب أن يكون بصيغة CSV') }}</li>
...@@ -17,11 +17,11 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ ...@@ -17,11 +17,11 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ
</div> </div>
{{-- Upload --}} {{-- Upload --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="mb-4"> <div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملف CSV') }}</label> <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملف CSV') }}</label>
<input type="file" wire:model="file" accept=".csv,.txt" <input type="file" wire:model="file" accept=".csv,.txt"
class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"> class="block w-full text-sm text-gray-500 file:me-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
@error('file') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('file') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
...@@ -30,14 +30,14 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou ...@@ -30,14 +30,14 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
{{-- Preview --}} {{-- Preview --}}
@if(!empty($preview)) @if(!empty($preview))
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<h3 class="text-sm font-semibold text-gray-800 mb-3">{{ __('معاينة (أول 5 سجلات)') }}</h3> <h3 class="text-sm font-semibold text-gray-800 mb-3">{{ __('معاينة (أول 5 سجلات)') }}</h3>
<div class="overflow-x-auto"> <div class="overflow-x-auto -mx-4 sm:mx-0">
<table class="min-w-full text-sm"> <table class="min-w-full text-sm">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
@foreach(array_keys($preview[0]) as $col) @foreach(array_keys($preview[0]) as $col)
<th class="px-3 py-2 text-start text-xs font-medium text-gray-500">{{ $col }}</th> <th class="px-3 py-2 text-start text-xs font-medium text-gray-500 whitespace-nowrap">{{ $col }}</th>
@endforeach @endforeach
</tr> </tr>
</thead> </thead>
...@@ -45,7 +45,7 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou ...@@ -45,7 +45,7 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
@foreach($preview as $row) @foreach($preview as $row)
<tr class="border-t"> <tr class="border-t">
@foreach($row as $cell) @foreach($row as $cell)
<td class="px-3 py-2 text-gray-700">{{ $cell }}</td> <td class="px-3 py-2 text-gray-700 whitespace-nowrap">{{ $cell }}</td>
@endforeach @endforeach
</tr> </tr>
@endforeach @endforeach
...@@ -53,17 +53,19 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou ...@@ -53,17 +53,19 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
</table> </table>
</div> </div>
<div class="flex flex-col-reverse sm:flex-row gap-3 mt-4">
<button wire:click="import" wire:loading.attr="disabled" <button wire:click="import" wire:loading.attr="disabled"
class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"> class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="import">{{ __('بدء الاستيراد') }}</span> <span wire:loading.remove wire:target="import">{{ __('بدء الاستيراد') }}</span>
<span wire:loading wire:target="import">{{ __('جارٍ الاستيراد...') }}</span> <span wire:loading wire:target="import">{{ __('جارٍ الاستيراد...') }}</span>
</button> </button>
</div> </div>
</div>
@endif @endif
{{-- Errors --}} {{-- Errors --}}
@if(!empty($importErrors)) @if(!empty($importErrors))
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6"> <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4 sm:mb-6">
<h3 class="text-sm font-semibold text-red-800 mb-2">{{ __('أخطاء') }}</h3> <h3 class="text-sm font-semibold text-red-800 mb-2">{{ __('أخطاء') }}</h3>
<ul class="text-sm text-red-700 space-y-1 max-h-40 overflow-y-auto"> <ul class="text-sm text-red-700 space-y-1 max-h-40 overflow-y-auto">
@foreach($importErrors as $error) @foreach($importErrors as $error)
...@@ -75,9 +77,9 @@ class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabl ...@@ -75,9 +77,9 @@ class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabl
{{-- Results --}} {{-- Results --}}
@if($done) @if($done)
<div class="bg-green-50 border border-green-200 rounded-xl p-6"> <div class="bg-green-50 border border-green-200 rounded-xl p-4 sm:p-6">
<h3 class="text-lg font-semibold text-green-800 mb-3">{{ __('اكتمل الاستيراد') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-green-800 mb-3">{{ __('اكتمل الاستيراد') }}</h3>
<div class="flex items-center gap-6 text-sm"> <div class="grid grid-cols-2 gap-3 sm:gap-6 text-sm">
<span class="text-green-700">{{ __('تم استيراد:') }} <span class="font-bold">{{ $imported }}</span></span> <span class="text-green-700">{{ __('تم استيراد:') }} <span class="font-bold">{{ $imported }}</span></span>
<span class="text-amber-700">{{ __('تم تخطي:') }} <span class="font-bold">{{ $skipped }}</span></span> <span class="text-amber-700">{{ __('تم تخطي:') }} <span class="font-bold">{{ $skipped }}</span></span>
</div> </div>
......
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالعربية') }} *</label>
<input type="text" wire:model="name_ar" <input type="text" wire:model="name_ar"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name_ar') border-red-500 @enderror">
@error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name_ar') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم بالإنجليزية') }} *</label>
<input type="text" wire:model="name" dir="ltr" <input type="text" wire:model="name" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror">
@error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
</div> </div>
...@@ -37,7 +37,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -37,7 +37,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الرقم القومي') }}</label>
<input type="text" wire:model.live.debounce.500ms="national_id" dir="ltr" maxlength="14" <input type="text" wire:model.live.debounce.500ms="national_id" dir="ltr" maxlength="14"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('national_id') border-red-500 @enderror" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('national_id') border-red-500 @enderror"
placeholder="{{ __('14 رقم') }}"> placeholder="{{ __('14 رقم') }}">
@error('national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('national_id') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
<p class="mt-1 text-xs text-gray-400">{{ __('سيتم استخراج تاريخ الميلاد والجنس والمحافظة تلقائياً') }}</p> <p class="mt-1 text-xs text-gray-400">{{ __('سيتم استخراج تاريخ الميلاد والجنس والمحافظة تلقائياً') }}</p>
...@@ -45,13 +45,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -45,13 +45,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تاريخ الميلاد') }}</label>
<input type="date" wire:model="date_of_birth" dir="ltr" <input type="date" wire:model="date_of_birth" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
@error('date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('date_of_birth') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} *</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }} *</label>
<select wire:model="gender" <select wire:model="gender"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value="male">{{ __('ذكر') }}</option> <option value="male">{{ __('ذكر') }}</option>
<option value="female">{{ __('أنثى') }}</option> <option value="female">{{ __('أنثى') }}</option>
</select> </select>
...@@ -72,28 +72,28 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -72,28 +72,28 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف بديل') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('هاتف بديل') }}</label>
<input type="text" wire:model="phone_secondary" dir="ltr" <input type="text" wire:model="phone_secondary" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('البريد الإلكتروني') }}</label>
<input type="email" wire:model="email" dir="ltr" <input type="email" wire:model="email" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
@error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('email') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المحافظة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المحافظة') }}</label>
<input type="text" wire:model="governorate" <input type="text" wire:model="governorate"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدينة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المدينة') }}</label>
<input type="text" wire:model="city" <input type="text" wire:model="city"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العنوان') }}</label>
<input type="text" wire:model="address" <input type="text" wire:model="address"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
</div> </div>
</div> </div>
...@@ -105,12 +105,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -105,12 +105,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الاسم') }}</label>
<input type="text" wire:model="emergency_contact_name" <input type="text" wire:model="emergency_contact_name"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الهاتف') }}</label>
<input type="text" wire:model="emergency_contact_phone" dir="ltr" <input type="text" wire:model="emergency_contact_phone" dir="ltr"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
@error('emergency_contact_phone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror @error('emergency_contact_phone') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
...@@ -129,12 +129,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -129,12 +129,12 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنسية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنسية') }}</label>
<input type="text" wire:model="nationality" <input type="text" wire:model="nationality"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('فصيلة الدم') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('فصيلة الدم') }}</label>
<select wire:model="blood_type" <select wire:model="blood_type"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value="">{{ __('— غير محدد —') }}</option> <option value="">{{ __('— غير محدد —') }}</option>
<option value="A+">A+</option> <option value="A+">A+</option>
<option value="A-">A-</option> <option value="A-">A-</option>
...@@ -149,7 +149,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -149,7 +149,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيف') }}</label>
<select wire:model="classification" <select wire:model="classification"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
<option value="regular">{{ __('عادي') }}</option> <option value="regular">{{ __('عادي') }}</option>
<option value="vip">VIP</option> <option value="vip">VIP</option>
<option value="scholarship">{{ __('منحة') }}</option> <option value="scholarship">{{ __('منحة') }}</option>
...@@ -167,21 +167,21 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -167,21 +167,21 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
<div class="mt-4"> <div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات طبية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات طبية') }}</label>
<textarea wire:model="medical_notes" rows="2" <textarea wire:model="medical_notes" rows="2"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"</textarea>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات عامة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات عامة') }}</label>
<textarea wire:model="notes" rows="2" <textarea wire:model="notes" rows="2"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"</textarea>
</div> </div>
</div> </div>
<!-- Submit --> <!-- Submit -->
<div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"> <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('people.list') }}" wire:navigate <a href="{{ route('people.list') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">{{ __('إلغاء') }}</a> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">{{ __('إلغاء') }}</a>
<button type="submit" wire:loading.attr="disabled" wire:target="save" <button type="submit" wire:loading.attr="disabled" wire:target="save"
class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 text-sm">
<span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إضافة الشخص') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إضافة الشخص') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
...@@ -123,13 +123,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -123,13 +123,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
{{-- Submit --}} {{-- Submit --}}
<div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3"> <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
<a href="{{ route('pricing.base-prices') }}" wire:navigate <a href="{{ route('pricing.base-prices') }}" wire:navigate
class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
{{ __('إلغاء') }} {{ __('إلغاء') }}
</a> </a>
<button type="submit" <button type="submit"
wire:loading.attr="disabled" wire:loading.attr="disabled"
wire:target="save" wire:target="save"
class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50"> class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
<span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span> <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span>
<span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span> <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
</button> </button>
......
...@@ -148,7 +148,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -148,7 +148,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }"> <div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }">
@switch($rule_type) @switch($rule_type)
@case('age') @case('age')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
...@@ -165,7 +165,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -165,7 +165,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
@break @break
@case('membership_duration') @case('membership_duration')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى (أشهر)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى (أشهر)') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
...@@ -182,7 +182,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -182,7 +182,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
@break @break
@case('family_size') @case('family_size')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لحجم الأسرة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لحجم الأسرة') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
...@@ -203,7 +203,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -203,7 +203,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ترتيب الأخ (مثال: 2 = الثاني)') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ترتيب الأخ (مثال: 2 = الثاني)') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
x-model.number="conditions.sibling_order" x-model.number="conditions.sibling_order"
class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
@break @break
...@@ -212,7 +212,7 @@ class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 ...@@ -212,7 +212,7 @@ class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيفات المؤهلة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيفات المؤهلة') }}</label>
<div class="flex flex-wrap gap-3 mt-2"> <div class="flex flex-wrap gap-3 mt-2">
@foreach(['regular' => 'عادي', 'vip' => 'VIP', 'scholarship' => 'منحة', 'staff_child' => 'ابن موظف', 'trial' => 'تجريبي'] as $val => $lbl) @foreach(['regular' => 'عادي', 'vip' => 'VIP', 'scholarship' => 'منحة', 'staff_child' => 'ابن موظف', 'trial' => 'تجريبي'] as $val => $lbl)
<label class="inline-flex items-center gap-2"> <label class="min-h-[44px] inline-flex items-center gap-2">
<input type="checkbox" value="{{ $val }}" <input type="checkbox" value="{{ $val }}"
x-model="conditions.classifications" x-model="conditions.classifications"
class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
...@@ -227,12 +227,12 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -227,12 +227,12 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
<div class="flex gap-4 mt-2"> <div class="flex gap-4 mt-2">
<label class="inline-flex items-center gap-2"> <label class="min-h-[44px] inline-flex items-center gap-2">
<input type="radio" value="male" x-model="conditions.gender" <input type="radio" value="male" x-model="conditions.gender"
class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('ذكر') }}</span> <span class="text-sm text-gray-700">{{ __('ذكر') }}</span>
</label> </label>
<label class="inline-flex items-center gap-2"> <label class="min-h-[44px] inline-flex items-center gap-2">
<input type="radio" value="female" x-model="conditions.gender" <input type="radio" value="female" x-model="conditions.gender"
class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"> class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700">{{ __('أنثى') }}</span> <span class="text-sm text-gray-700">{{ __('أنثى') }}</span>
...@@ -242,7 +242,7 @@ class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -242,7 +242,7 @@ class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
@break @break
@case('enrollment_timing') @case('enrollment_timing')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التسجيل قبل تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التسجيل قبل تاريخ') }}</label>
<input type="date" dir="ltr" <input type="date" dir="ltr"
...@@ -263,12 +263,12 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -263,12 +263,12 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للتسجيلات') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للتسجيلات') }}</label>
<input type="number" min="1" dir="ltr" <input type="number" min="1" dir="ltr"
x-model.number="conditions.min_enrollments" x-model.number="conditions.min_enrollments"
class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
@break @break
@case('seasonal') @case('seasonal')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
<input type="date" dir="ltr" <input type="date" dir="ltr"
...@@ -285,7 +285,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -285,7 +285,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
@break @break
@case('day_time') @case('day_time')
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأيام') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأيام') }}</label>
<div class="flex flex-wrap gap-2 mt-1"> <div class="flex flex-wrap gap-2 mt-1">
...@@ -321,7 +321,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 ...@@ -321,7 +321,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للنقاط') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للنقاط') }}</label>
<input type="number" min="0" dir="ltr" <input type="number" min="0" dir="ltr"
x-model.number="conditions.min_points" x-model.number="conditions.min_points"
class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
</div> </div>
@break @break
...@@ -345,7 +345,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> ...@@ -345,7 +345,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وصف الشرط المخصص') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وصف الشرط المخصص') }}</label>
<textarea x-model="conditions.description" rows="3" <textarea x-model="conditions.description" rows="3"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
placeholder="{{ __('اكتب وصف الشرط المخصص...') }}"></textarea> placeholder="{{ __('اكتب وصف الشرط المخصص...') }}"></textarea>
</div> </div>
@break @break
......
<div> <div>
<div class="flex items-center justify-between mb-6"> {{-- Header --}}
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
<h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قواعد التسعير') }}</h1> <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قواعد التسعير') }}</h1>
@can('pricing.create') @can('pricing.create')
<a href="{{ route('pricing.rules.create') }}" wire:navigate <a href="{{ route('pricing.rules.create') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium"> class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 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="M12 4v16m8-8H4"/></svg> <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="M12 4v16m8-8H4"/></svg>
{{ __('إضافة قاعدة') }} <span class="hidden sm:inline">{{ __('إضافة قاعدة') }}</span>
</a> </a>
@endcan @endcan
</div> </div>
...@@ -23,20 +24,20 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l ...@@ -23,20 +24,20 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
@endif @endif
{{-- Filters --}} {{-- Filters --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
<div class="grid grid-cols-1 sm:grid-cols-4 gap-4"> <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="sm:col-span-2"> <div class="col-span-2">
<input type="text" wire:model.live.debounce.300ms="search" <input type="text" wire:model.live.debounce.300ms="search"
placeholder="{{ __('بحث بالاسم...') }}" placeholder="{{ __('بحث بالاسم...') }}"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
<select wire:model.live="ruleType" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="ruleType" class="px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('كل الأنواع') }}</option> <option value="">{{ __('كل الأنواع') }}</option>
@foreach($ruleTypes as $value => $label) @foreach($ruleTypes as $value => $label)
<option value="{{ $value }}">{{ $label }}</option> <option value="{{ $value }}">{{ $label }}</option>
@endforeach @endforeach
</select> </select>
<select wire:model.live="activeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <select wire:model.live="activeFilter" class="px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<option value="">{{ __('الكل') }}</option> <option value="">{{ __('الكل') }}</option>
<option value="1">{{ __('نشط') }}</option> <option value="1">{{ __('نشط') }}</option>
<option value="0">{{ __('غير نشط') }}</option> <option value="0">{{ __('غير نشط') }}</option>
...@@ -44,9 +45,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin ...@@ -44,9 +45,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
</div> </div>
</div> </div>
{{-- Table --}} {{-- Desktop Table --}}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div wire:loading.class="opacity-50 pointer-events-none"> <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
<table class="w-full text-sm"> <table class="w-full text-sm">
<thead class="bg-gray-50 border-b border-gray-200"> <thead class="bg-gray-50 border-b border-gray-200">
<tr> <tr>
...@@ -138,4 +139,88 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium"> ...@@ -138,4 +139,88 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
</div> </div>
@endif @endif
</div> </div>
{{-- Mobile Cards --}}
<div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
@forelse($rules as $rule)
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
{{-- Card Header: Name + Status Toggle --}}
<div class="flex items-start justify-between gap-3 mb-3">
<div>
<span class="font-medium text-gray-800">{{ $rule->name_ar }}</span>
@if($rule->branch)
<span class="block text-xs text-gray-400 mt-0.5">{{ $rule->branch->name_ar }}</span>
@endif
</div>
<button wire:click="toggleActive('{{ $rule->uuid }}')"
wire:loading.attr="disabled"
class="px-2 py-1 text-xs rounded-full shrink-0 {{ $rule->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
{{ $rule->is_active ? __('نشط') : __('غير نشط') }}
</button>
</div>
{{-- Badges Row --}}
<div class="flex flex-wrap items-center gap-2 mb-3">
<span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">
{{ $rule->rule_type->label() }}
</span>
<span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
{{ $rule->adjustment_type->label() }}
</span>
</div>
{{-- Details Row --}}
<div class="flex items-center justify-between text-sm text-gray-600 mb-3">
<div class="flex items-center gap-4">
<span dir="ltr" class="font-medium text-gray-800">
@if(in_array($rule->adjustment_type, [\App\Domain\Pricing\Enums\AdjustmentType::PercentageDiscount, \App\Domain\Pricing\Enums\AdjustmentType::PercentageIncrease]))
{{ $rule->adjustment_value }}%
@else
{{ number_format($rule->adjustment_value / 100, 2) }} {{ __('ج.م') }}
@endif
</span>
<span>
{{ __('الأولوية') }}: <span dir="ltr">{{ $rule->priority }}</span>
</span>
</div>
<span>
@if($rule->is_stackable)
<span class="text-green-600 text-xs">{{ __('قابل للتكديس') }}</span>
@else
<span class="text-gray-400 text-xs">{{ __('غير قابل للتكديس') }}</span>
@endif
</span>
</div>
{{-- Action --}}
@can('pricing.update')
<a href="{{ route('pricing.rules.edit', $rule) }}" wire:navigate
class="block text-center py-2 text-blue-600 hover:text-blue-800 text-sm font-medium border-t border-gray-100 -mx-4 -mb-4 px-4 pt-3 pb-3 rounded-b-xl hover:bg-gray-50">
{{ __('تعديل') }}
</a>
@endcan
</div>
@empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12 text-center">
<div class="flex flex-col items-center">
<svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
<p class="text-gray-500 text-sm">{{ __('لا توجد قواعد تسعير') }}</p>
@can('pricing.create')
<a href="{{ route('pricing.rules.create') }}" wire:navigate
class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
{{ __('إضافة أول قاعدة') }}
</a>
@endcan
</div>
</div>
@endforelse
@if($rules->hasPages())
<div class="mt-4">
{{ $rules->links() }}
</div>
@endif
</div>
</div> </div>
...@@ -46,23 +46,23 @@ class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-b ...@@ -46,23 +46,23 @@ class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-b
<form wire:submit="changePassword" class="space-y-4"> <form wire:submit="changePassword" class="space-y-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الحالية') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الحالية') }}</label>
<input type="password" wire:model="current_password" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="password" wire:model="current_password" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('current_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('current_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الجديدة') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الجديدة') }}</label>
<input type="password" wire:model="new_password" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="password" wire:model="new_password" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@error('new_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror @error('new_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تأكيد كلمة المرور') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تأكيد كلمة المرور') }}</label>
<input type="password" wire:model="new_password_confirmation" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <input type="password" wire:model="new_password_confirmation" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
</div> </div>
</div> </div>
<button type="submit" wire:loading.attr="disabled" wire:target="changePassword" <button type="submit" wire:loading.attr="disabled" wire:target="changePassword"
class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 text-sm font-medium"> class="w-full sm:w-auto px-6 py-2.5 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 text-sm font-medium">
<span wire:loading.remove wire:target="changePassword">{{ __('تغيير كلمة المرور') }}</span> <span wire:loading.remove wire:target="changePassword">{{ __('تغيير كلمة المرور') }}</span>
<span wire:loading wire:target="changePassword">{{ __('جارٍ التغيير...') }}</span> <span wire:loading wire:target="changePassword">{{ __('جارٍ التغيير...') }}</span>
</button> </button>
......
...@@ -4,24 +4,24 @@ ...@@ -4,24 +4,24 @@
</div> </div>
<!-- Report Type Tabs --> <!-- Report Type Tabs -->
<div class="flex flex-wrap gap-2 mb-6"> <div class="flex flex-wrap gap-2 mb-4 sm:mb-6">
<button wire:click="setReportType('financial')" <button wire:click="setReportType('financial')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'financial' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}"> class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'financial' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
{{ __('مالي') }} {{ __('مالي') }}
</button> </button>
<button wire:click="setReportType('attendance')" <button wire:click="setReportType('attendance')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'attendance' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}"> class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'attendance' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
{{ __('حضور') }} {{ __('حضور') }}
</button> </button>
<button wire:click="setReportType('enrollment')" <button wire:click="setReportType('enrollment')"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'enrollment' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}"> class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $reportType === 'enrollment' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
{{ __('تسجيلات') }} {{ __('تسجيلات') }}
</button> </button>
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label> <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
<input type="date" wire:model.live="dateFrom" dir="ltr" <input type="date" wire:model.live="dateFrom" dir="ltr"
...@@ -52,20 +52,20 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus ...@@ -52,20 +52,20 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus
<div wire:loading.class="opacity-50 pointer-events-none"> <div wire:loading.class="opacity-50 pointer-events-none">
@if($reportType === 'financial') @if($reportType === 'financial')
<!-- Financial Report --> <!-- Financial Report -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-4 sm:mb-6">
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفواتير') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الفواتير') }}</p>
<p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format(($reportData['total_invoiced'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-xl font-bold text-gray-800" dir="ltr">{{ number_format(($reportData['total_invoiced'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-green-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('المحصّل') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('المحصّل') }}</p>
<p class="text-xl font-bold text-green-600" dir="ltr">{{ number_format(($reportData['total_collected'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-xl font-bold text-green-600" dir="ltr">{{ number_format(($reportData['total_collected'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-red-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-red-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('المعلّق') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('المعلّق') }}</p>
<p class="text-xl font-bold text-red-600" dir="ltr">{{ number_format(($reportData['total_outstanding'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-xl font-bold text-red-600" dir="ltr">{{ number_format(($reportData['total_outstanding'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-blue-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('مبيعات نقاط البيع') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('مبيعات نقاط البيع') }}</p>
<p class="text-xl font-bold text-blue-600" dir="ltr">{{ number_format(($reportData['pos_revenue'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p> <p class="text-xl font-bold text-blue-600" dir="ltr">{{ number_format(($reportData['pos_revenue'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</p>
</div> </div>
...@@ -74,36 +74,38 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus ...@@ -74,36 +74,38 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus
<!-- Payment Methods Table --> <!-- Payment Methods Table -->
@if(!empty($reportData['payment_methods'])) @if(!empty($reportData['payment_methods']))
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200"> <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200">
<h3 class="text-base font-semibold text-gray-800">{{ __('طرق الدفع') }}</h3> <h3 class="text-base font-semibold text-gray-800">{{ __('طرق الدفع') }}</h3>
</div> </div>
<div class="overflow-x-auto">
<table class="w-full"> <table class="w-full">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('طريقة الدفع') }}</th> <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('طريقة الدفع') }}</th>
<th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('المبلغ') }}</th> <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('المبلغ') }}</th>
<th class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('عدد العمليات') }}</th> <th class="px-4 py-3 text-start text-xs font-medium text-gray-500 uppercase">{{ __('عدد العمليات') }}</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
@foreach($reportData['payment_methods'] as $method) @foreach($reportData['payment_methods'] as $method)
<tr> <tr>
<td class="px-6 py-3 text-sm text-gray-800">{{ __($method['payment_method'] ?? '-') }}</td> <td class="px-4 py-3 text-sm text-gray-800">{{ __($method['payment_method'] ?? '-') }}</td>
<td class="px-6 py-3 text-sm text-gray-800" dir="ltr">{{ number_format(($method['total'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</td> <td class="px-4 py-3 text-sm text-gray-800" dir="ltr">{{ number_format(($method['total'] ?? 0) / 100, 2) }} {{ __('ج.م') }}</td>
<td class="px-6 py-3 text-sm text-gray-800" dir="ltr">{{ number_format($method['count'] ?? 0) }}</td> <td class="px-4 py-3 text-sm text-gray-800" dir="ltr">{{ number_format($method['count'] ?? 0) }}</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
@endif @endif
@elseif($reportType === 'attendance') @elseif($reportType === 'attendance')
<!-- Attendance Report --> <!-- Attendance Report -->
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800">{{ __('نسبة الحضور') }}</h3> <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('نسبة الحضور') }}</h3>
<span class="text-2xl font-bold {{ ($reportData['rate'] ?? 0) >= 90 ? 'text-green-600' : (($reportData['rate'] ?? 0) >= 75 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $reportData['rate'] ?? 0 }}%</span> <span class="text-xl sm:text-2xl font-bold {{ ($reportData['rate'] ?? 0) >= 90 ? 'text-green-600' : (($reportData['rate'] ?? 0) >= 75 ? 'text-amber-600' : 'text-red-600') }}" dir="ltr">{{ $reportData['rate'] ?? 0 }}%</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-4 mb-4"> <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
<div class="h-4 rounded-full transition-all duration-300 {{ ($reportData['rate'] ?? 0) >= 90 ? 'bg-green-500' : (($reportData['rate'] ?? 0) >= 75 ? 'bg-amber-500' : 'bg-red-500') }}" <div class="h-4 rounded-full transition-all duration-300 {{ ($reportData['rate'] ?? 0) >= 90 ? 'bg-green-500' : (($reportData['rate'] ?? 0) >= 75 ? 'bg-amber-500' : 'bg-red-500') }}"
...@@ -114,41 +116,41 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus ...@@ -114,41 +116,41 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus
</p> </p>
</div> </div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
<div class="bg-white rounded-xl shadow-sm border border-green-200 p-5 text-center"> <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5 text-center">
<p class="text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['present'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['present'] ?? 0) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('حاضر') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('حاضر') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-amber-200 p-5 text-center"> <div class="bg-white rounded-xl shadow-sm border border-amber-200 p-4 sm:p-5 text-center">
<p class="text-2xl font-bold text-amber-600" dir="ltr">{{ number_format($reportData['late'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-amber-600" dir="ltr">{{ number_format($reportData['late'] ?? 0) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('متأخر') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('متأخر') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-red-200 p-5 text-center"> <div class="bg-white rounded-xl shadow-sm border border-red-200 p-4 sm:p-5 text-center">
<p class="text-2xl font-bold text-red-600" dir="ltr">{{ number_format($reportData['absent'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-red-600" dir="ltr">{{ number_format($reportData['absent'] ?? 0) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('غائب') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('غائب') }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-blue-200 p-5 text-center"> <div class="bg-white rounded-xl shadow-sm border border-blue-200 p-4 sm:p-5 text-center">
<p class="text-2xl font-bold text-blue-600" dir="ltr">{{ number_format($reportData['excused'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-blue-600" dir="ltr">{{ number_format($reportData['excused'] ?? 0) }}</p>
<p class="text-sm text-gray-500 mt-1">{{ __('معذور') }}</p> <p class="text-sm text-gray-500 mt-1">{{ __('معذور') }}</p>
</div> </div>
</div> </div>
@elseif($reportType === 'enrollment') @elseif($reportType === 'enrollment')
<!-- Enrollment Report --> <!-- Enrollment Report -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
<div class="bg-white rounded-xl shadow-sm border border-indigo-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-indigo-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('تسجيلات جديدة') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('تسجيلات جديدة') }}</p>
<p class="text-2xl font-bold text-indigo-600" dir="ltr">{{ number_format($reportData['new_enrollments'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-indigo-600" dir="ltr">{{ number_format($reportData['new_enrollments'] ?? 0) }}</p>
</div> </div>
<div class="bg-white rounded-xl shadow-sm border border-green-200 p-5"> <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-5">
<p class="text-sm text-gray-500 mb-1">{{ __('المشتركون النشطون') }}</p> <p class="text-sm text-gray-500 mb-1">{{ __('المشتركون النشطون') }}</p>
<p class="text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['active_participants'] ?? 0) }}</p> <p class="text-xl sm:text-2xl font-bold text-green-600" dir="ltr">{{ number_format($reportData['active_participants'] ?? 0) }}</p>
</div> </div>
</div> </div>
<!-- By Status --> <!-- By Status -->
@if(!empty($reportData['by_status'])) @if(!empty($reportData['by_status']))
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6"> <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب الحالة') }}</h3> <h3 class="text-base font-semibold text-gray-800 mb-4">{{ __('حسب الحالة') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
@foreach($reportData['by_status'] as $status => $count) @foreach($reportData['by_status'] as $status => $count)
......
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