Skip to content

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

Rename "الأحداث/حدث" to "الإيفنتات/إيفنت" across entire events module 

"الأحداث" has a negative connotation in Egyptian Arabic (juvenile
detention). Using "إيفنتات" — formal, business-appropriate, universally
understood in the Egyptian market.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 68a86772
Hide whitespace changes
Inline Side-by-side
Showing with 712 additions and 40 deletions
resources/views/components/layouts/sidebar.blade.php
View file @ bd1af213
......@@ -28,9 +28,9 @@
['label' => 'لوحة المدرب', 'route' => 'trainer.dashboard', 'icon' => 'user', 'permission' => 'attendance.mark'],
]],
['section' => 'الأحداث', 'items' => [
['label' => 'الأحداث', 'route' => 'events.list', 'icon' => 'calendar', 'permission' => 'events.list'],
['label' => 'إنشاء حدث', 'route' => 'events.create', 'icon' => 'plus-circle', 'permission' => 'events.create'],
['section' => 'الإيفنتات', 'items' => [
['label' => 'الإيفنتات', 'route' => 'events.list', 'icon' => 'calendar', 'permission' => 'events.list'],
['label' => 'إنشاء إيفنت', 'route' => 'events.create', 'icon' => 'plus-circle', 'permission' => 'events.create'],
]],
['section' => 'الموارد البشرية', 'items' => [
......
resources/views/livewire/events/create-event-wizard.blade.php
View file @ bd1af213
......@@ -10,21 +10,21 @@
<div class="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
</div>
<h2 class="text-xl font-bold text-gray-800 mb-2">{{ $editing ? __('تم تحديث الحدث') : __('تم إنشاء الحدث بنجاح') }}</h2>
<p class="text-sm text-gray-500 mb-6">{{ __('يمكنك نشر الحدث أو تعديله من صفحة التفاصيل') }}</p>
<h2 class="text-xl font-bold text-gray-800 mb-2">{{ $editing ? __('تم تحديث الإيفنت') : __('تم إنشاء الإيفنت بنجاح') }}</h2>
<p class="text-sm text-gray-500 mb-6">{{ __('يمكنك نشر الإيفنت أو تعديله من صفحة التفاصيل') }}</p>
<div class="flex items-center justify-center gap-3">
<a href="{{ route('events.show', $event) }}" wire:navigate class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
{{ __('عرض الحدث') }}
{{ __('عرض الإيفنت') }}
</a>
<a href="{{ route('events.list') }}" wire:navigate class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
{{ __('قائمة الأحداث') }}
{{ __('قائمة الإيفنتات') }}
</a>
</div>
</div>
@else
{{-- Wizard Header --}}
<div class="mb-8">
<h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $editing ? __('تعديل الحدث') : __('إنشاء حدث جديد') }}</h1>
<h1 class="text-2xl font-bold text-gray-800 mb-4">{{ $editing ? __('تعديل الإيفنت') : __('إنشاء إيفنت جديد') }}</h1>
{{-- Steps Indicator --}}
<div class="flex items-center gap-2">
......@@ -52,11 +52,11 @@ class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors
{{-- Step 1: Details --}}
@if($currentStep === 1)
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
<h2 class="text-lg font-semibold text-gray-800">{{ __('تفاصيل الحدث') }}</h2>
<h2 class="text-lg font-semibold text-gray-800">{{ __('تفاصيل الإيفنت') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عنوان الحدث') }} <span class="text-red-500">*</span></label>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('عنوان الإيفنت') }} <span class="text-red-500">*</span></label>
<input type="text" wire:model="title" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('title') border-red-500 @enderror">
@error('title') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
</div>
......@@ -67,7 +67,7 @@ class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الحدث') }} <span class="text-red-500">*</span></label>
<label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع الإيفنت') }} <span class="text-red-500">*</span></label>
<select wire:model="type" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
<option value="">{{ __('اختر النوع') }}</option>
@foreach($eventTypes as $t)
......@@ -146,7 +146,7 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2
<div class="flex items-center justify-between mb-3">
<div>
<label class="block text-sm font-medium text-gray-700">{{ __('مواقع على الخريطة') }}</label>
<p class="text-xs text-gray-500">{{ __('أضف إحداثيات ليتم عرضها على خرائط جوجل في صفحة الحدث') }}</p>
<p class="text-xs text-gray-500">{{ __('أضف إحداثيات ليتم عرضها على خرائط جوجل في صفحة الإيفنت') }}</p>
</div>
<button wire:click="addMapLocation" type="button" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ {{ __('إضافة موقع') }}</button>
</div>
......@@ -173,7 +173,7 @@ class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ri
{{-- Description --}}
<div class="border-t pt-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="description" rows="4" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
</div>
......@@ -407,7 +407,7 @@ class="w-28 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 f
{{-- Step 3: Media --}}
@if($currentStep === 3)
<div class="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
<h2 class="text-lg font-semibold text-gray-800">{{ __('صور الحدث') }}</h2>
<h2 class="text-lg font-semibold text-gray-800">{{ __('صور الإيفنت') }}</h2>
{{-- Cover Photo --}}
<div>
......@@ -493,7 +493,7 @@ class="w-28 px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 f
@else
<button wire:click="save" wire:loading.attr="disabled" wire:target="save" type="button"
class="px-6 py-2.5 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors 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>
</button>
@endif
......
resources/views/livewire/events/event-list.blade.php
View file @ bd1af213
......@@ -2,14 +2,14 @@
{{-- Header --}}
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-2xl font-bold text-gray-800">{{ __('الأحداث') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('إدارة البطولات والمعسكرات والأحداث') }}</p>
<h1 class="text-2xl font-bold text-gray-800">{{ __('الإيفنتات') }}</h1>
<p class="text-sm text-gray-500 mt-1">{{ __('إدارة البطولات والمعسكرات والإيفنتات') }}</p>
</div>
@can('events.create')
<a href="{{ route('events.create') }}" wire:navigate
class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
<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="M12 4v16m8-8H4"/></svg>
{{ __('إنشاء حدث') }}
{{ __('إنشاء إيفنت') }}
</a>
@endcan
</div>
......@@ -46,8 +46,8 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2
@if($events->isEmpty())
<div class="bg-white rounded-xl border border-gray-200 p-12 text-center">
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/></svg>
<h3 class="text-lg font-medium text-gray-600 mb-1">{{ __('لا توجد أحداث') }}</h3>
<p class="text-sm text-gray-400">{{ __('ابدأ بإنشاء حدث جديد') }}</p>
<h3 class="text-lg font-medium text-gray-600 mb-1">{{ __('لا توجد إيفنتات') }}</h3>
<p class="text-sm text-gray-400">{{ __('ابدأ بإنشاء إيفنت جديد') }}</p>
</div>
@else
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
......
resources/views/livewire/events/event-registration-list.blade.php
View file @ bd1af213
......@@ -2,7 +2,7 @@
{{-- Header --}}
<div class="mb-6">
<div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
<a href="{{ route('events.list') }}" class="hover:text-gray-700" wire:navigate>{{ __('الأحداث') }}</a>
<a href="{{ route('events.list') }}" class="hover:text-gray-700" wire:navigate>{{ __('الإيفنتات') }}</a>
<svg class="w-4 h-4 rotate-180" 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>
<a href="{{ route('events.show', $event) }}" class="hover:text-gray-700" wire:navigate>{{ $event->title }}</a>
<svg class="w-4 h-4 rotate-180" 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>
......
resources/views/livewire/events/event-show.blade.php
View file @ bd1af213
......@@ -34,7 +34,7 @@
@if($event->status === \App\Domain\Event\Enums\EventStatus::Draft)
<button wire:click="publish" wire:loading.attr="disabled"
class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
{{ __('نشر الحدث') }}
{{ __('نشر الإيفنت') }}
</button>
@endif
@can('events.update')
......@@ -76,7 +76,7 @@ class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:
{{-- Event Details --}}
<div class="lg:col-span-2 space-y-6">
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('تفاصيل الحدث') }}</h2>
<h2 class="text-lg font-semibold text-gray-800 mb-4">{{ __('تفاصيل الإيفنت') }}</h2>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
......@@ -93,7 +93,7 @@ class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:
</div>
<div>
<span class="text-gray-500">{{ __('إغلاق التسجيل') }}</span>
<p class="font-medium text-gray-800">{{ $event->registration_closes_at?->translatedFormat('d M Y - H:i') ?? __('حتى بداية الحدث') }}</p>
<p class="font-medium text-gray-800">{{ $event->registration_closes_at?->translatedFormat('d M Y - H:i') ?? __('حتى بداية الإيفنت') }}</p>
</div>
</div>
......@@ -252,9 +252,9 @@ class="w-full px-3 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-gree
<div class="bg-red-50 rounded-xl border border-red-200 p-6">
<h3 class="text-sm font-semibold text-red-700 mb-3">{{ __('منطقة الخطر') }}</h3>
<button wire:click="deleteEvent"
wire:confirm="{{ __('هل أنت متأكد من حذف هذا الحدث؟ لا يمكن التراجع عن هذا الإجراء.') }}"
wire:confirm="{{ __('هل أنت متأكد من حذف هذا الإيفنت؟ لا يمكن التراجع عن هذا الإجراء.') }}"
class="w-full px-3 py-2 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 transition-colors">
{{ __('حذف الحدث') }}
{{ __('حذف الإيفنت') }}
</button>
</div>
@endcan
......
resources/views/livewire/parent/parent-home.blade.php
View file @ bd1af213
......@@ -123,14 +123,14 @@ class="flex items-center gap-2 px-4 py-2.5 rounded-full whitespace-nowrap transi
{{-- Activity Feed --}}
<div class="mb-6">
<h2 class="text-base font-semibold text-[#0F172A] mb-3">{{ __('آخر الأحداث') }}</h2>
<h2 class="text-base font-semibold text-[#0F172A] mb-3">{{ __('آخر المستجدات') }}</h2>
@if(empty($activityFeed))
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
<svg class="w-10 h-10 text-gray-200 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
</svg>
<p class="text-sm text-[#64748B]">{{ __('لا توجد أحداث حديثة') }}</p>
<p class="text-sm text-[#64748B]">{{ __('لا توجد مستجدات حالياً') }}</p>
</div>
@else
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 divide-y divide-gray-50">
......
resources/views/livewire/website/section-manager.blade.php
View file @ bd1af213
......@@ -45,16 +45,30 @@ class="mb-4 p-3 rounded-lg bg-green-50 border border-green-200 text-green-700 te
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="font-semibold text-gray-900 dark:text-white">أقسام الموقع</h3>
<p class="text-xs text-gray-500 mt-1">اسحب لإعادة الترتيب</p>
<p class="text-xs text-gray-500 mt-1">استخدم الأسهم لإعادة الترتيب</p>
</div>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
@foreach($sections as $section)
<div class="flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer {{ $editingSection === $section['key'] ? 'bg-blue-50 dark:bg-blue-900/20 border-s-4 border-blue-500' : '' }}"
wire:click="editSection('{{ $section['key'] }}')">
{{-- Drag Handle --}}
<svg class="w-4 h-4 text-gray-400 cursor-grab" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8-16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
</svg>
@foreach($sections as $index => $section)
<div class="flex items-center gap-2 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer {{ $editingSection === $section['key'] ? 'bg-blue-50 dark:bg-blue-900/20 border-s-4 border-blue-500' : '' }}"
wire:click="editSection('{{ $section['key'] }}')"
wire:key="section-{{ $section['id'] }}">
{{-- Reorder Arrows --}}
<div class="flex flex-col gap-0.5 shrink-0">
@if($index > 0)
<button wire:click.stop="moveSection({{ $section['id'] }}, 'up')" class="p-0.5 text-gray-400 hover:text-blue-500 transition-colors" title="تحريك لأعلى">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
</button>
@else
<span class="w-3.5 h-3.5 p-0.5"></span>
@endif
@if($index < count($sections) - 1)
<button wire:click.stop="moveSection({{ $section['id'] }}, 'down')" class="p-0.5 text-gray-400 hover:text-blue-500 transition-colors" title="تحريك لأسفل">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
@else
<span class="w-3.5 h-3.5 p-0.5"></span>
@endif
</div>
{{-- Section Info --}}
<div class="flex-1 min-w-0">
......@@ -250,6 +264,508 @@ class="relative shrink-0 w-9 h-5 rounded-full transition-colors {{ $section['is_
</div>
@endif
{{-- Testimonials Layout Options --}}
@if($editingSection === 'testimonials')
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط عرض الشهادات</label>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
@foreach([
'carousel' => 'عرض متحرك',
'grid' => 'شبكة',
'wall_of_love' => 'جدار التقييمات',
'featured_quote' => 'اقتباس مميز',
] as $lk => $ll)
<label class="cursor-pointer">
<input type="radio" wire:model="sectionLayout" value="{{ $lk }}" class="peer sr-only">
<div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
{{ $ll }}
</div>
</label>
@endforeach
</div>
</div>
<div class="grid grid-cols-3 gap-3">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_rating" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
<span class="text-sm text-gray-700 dark:text-gray-300">إظهار التقييم</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.auto_rotate" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
<span class="text-sm text-gray-700 dark:text-gray-300">تدوير تلقائي</span>
</label>
<div>
<input type="number" wire:model="sectionSettings.rotate_speed" min="2000" max="10000" step="1000" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="5000ms">
</div>
</div>
@endif
{{-- FAQ Settings --}}
@if($editingSection === 'faq')
<div class="grid grid-cols-3 gap-3">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">عرض التصنيفات</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_search" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">حقل البحث</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.expand_first" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">فتح أول سؤال</span>
</label>
</div>
@endif
{{-- Gallery Settings --}}
@if($editingSection === 'gallery')
<div class="grid grid-cols-2 gap-3">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">عرض فلتر التصنيفات</span>
</label>
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نمط العرض</label>
<select wire:model="sectionSettings.layout" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<option value="grid">شبكة</option>
<option value="masonry">بناء حر (Masonry)</option>
</select>
</div>
</div>
@endif
{{-- Stats Settings --}}
@if($editingSection === 'stats')
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط العرض</label>
<div class="grid grid-cols-3 gap-2">
@foreach(['default' => 'افتراضي', 'cards' => 'بطاقات', 'minimal' => 'بسيط'] as $sk => $sl)
<label class="cursor-pointer">
<input type="radio" wire:model="sectionSettings.layout" value="{{ $sk }}" class="peer sr-only">
<div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
{{ $sl }}
</div>
</label>
@endforeach
</div>
</div>
{{-- Custom Stats Editor --}}
<div x-data="{
stats: @js($sectionSettings['custom_stats'] ?? []),
addStat() { this.stats.push({ label: '', value: '', suffix: '+', icon: '' }) },
removeStat(i) { this.stats.splice(i, 1) },
sync() { $wire.set('sectionSettings.custom_stats', this.stats) }
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إحصائيات مخصصة</label>
<p class="text-xs text-gray-500 mb-3">أضف أرقام إضافية بجانب الإحصائيات التلقائية</p>
<template x-for="(stat, i) in stats" :key="i">
<div class="flex items-center gap-2 mb-2">
<input type="text" x-model="stat.label" @change="sync()" placeholder="الاسم (مثل: سنة خبرة)" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<input type="number" x-model="stat.value" @change="sync()" placeholder="القيمة" class="w-20 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" dir="ltr">
<input type="text" x-model="stat.suffix" @change="sync()" placeholder="+" class="w-12 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-center" dir="ltr">
<button type="button" @click="removeStat(i)" class="p-1.5 text-red-500 hover:bg-red-50 rounded">
<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="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</template>
<button type="button" @click="addStat()" class="text-sm text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1 mt-1">
<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>
إضافة إحصائية
</button>
</div>
@endif
{{-- News Settings --}}
@if($editingSection === 'news')
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_categories" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">عرض فلتر التصنيفات</span>
</label>
@endif
{{-- Contact Settings --}}
@if($editingSection === 'contact')
<div class="grid grid-cols-2 gap-3">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_map" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">عرض الخريطة</span>
</label>
<div>
<input type="url" wire:model="sectionSettings.map_embed_url" dir="ltr" placeholder="رابط تضمين خرائط جوجل" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
{{-- Contact Subjects --}}
<div x-data="{
subjects: @js($sectionSettings['subjects'] ?? []),
newSubject: '',
add() { if(this.newSubject.trim()) { this.subjects.push(this.newSubject.trim()); this.newSubject = ''; this.sync(); } },
remove(i) { this.subjects.splice(i, 1); this.sync(); },
sync() { $wire.set('sectionSettings.subjects', this.subjects) }
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">مواضيع التواصل</label>
<div class="flex flex-wrap gap-2 mb-2">
<template x-for="(s, i) in subjects" :key="i">
<span class="inline-flex items-center gap-1 px-2.5 py-1 bg-blue-50 text-blue-700 text-xs rounded-full font-medium">
<span x-text="s"></span>
<button type="button" @click="remove(i)" class="hover:text-red-500">&times;</button>
</span>
</template>
</div>
<div class="flex gap-2">
<input type="text" x-model="newSubject" @keydown.enter.prevent="add()" placeholder="أضف موضوع (مثل: استفسار عام)" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<button type="button" @click="add()" class="px-3 py-1.5 text-sm bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 font-medium">إضافة</button>
</div>
</div>
@endif
{{-- Video Section Settings --}}
@if($editingSection === 'video')
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نمط العرض</label>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
@foreach(['featured' => 'مميز', 'single' => 'فيديو واحد', 'grid' => 'شبكة', 'carousel' => 'تمرير'] as $vk => $vl)
<label class="cursor-pointer">
<input type="radio" wire:model="sectionSettings.layout" value="{{ $vk }}" class="peer sr-only">
<div class="p-2.5 rounded-lg border-2 text-center text-xs font-medium transition-all
peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
border-gray-200 dark:border-gray-600 hover:border-gray-300 text-gray-700 dark:text-gray-300">
{{ $vl }}
</div>
</label>
@endforeach
</div>
</div>
{{-- Video URL Manager --}}
<div x-data="{
videos: @js($sectionSettings['videos'] ?? []),
addVideo() {
this.videos.push({ url: '', title: '' });
this.sync();
},
removeVideo(i) {
this.videos.splice(i, 1);
this.sync();
},
sync() {
$wire.set('sectionSettings.videos', this.videos);
}
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الفيديوهات</label>
<p class="text-xs text-gray-500 mb-3">أضف روابط يوتيوب أو فيميو — سيتم تضمينها تلقائياً</p>
<div class="space-y-2 mb-3">
<template x-for="(video, i) in videos" :key="i">
<div class="flex items-start gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div class="flex-1 space-y-2">
<input type="url" x-model="video.url" @change="sync()" dir="ltr"
placeholder="https://www.youtube.com/watch?v=..."
class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-mono">
<input type="text" x-model="video.title" @change="sync()"
placeholder="عنوان الفيديو (اختياري)"
class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
<button type="button" @click="removeVideo(i)" class="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded mt-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</template>
</div>
<button type="button" @click="addVideo()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
<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>
إضافة فيديو
</button>
</div>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionSettings.show_titles" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">إظهار عناوين الفيديوهات</span>
</label>
@endif
{{-- Trainers Editor --}}
@if($editingSection === 'trainers')
<div x-data="{
trainers: @js(json_decode($sectionSettings['trainers'] ?? '[]', true) ?? []),
editingTrainer: null,
addTrainer() {
this.trainers.push({ name: '', role: '', bio: '' });
this.editingTrainer = this.trainers.length - 1;
this.sync();
},
removeTrainer(i) {
this.trainers.splice(i, 1);
if (this.editingTrainer === i) this.editingTrainer = null;
this.sync();
},
moveUp(i) {
if (i > 0) { [this.trainers[i-1], this.trainers[i]] = [this.trainers[i], this.trainers[i-1]]; this.sync(); }
},
moveDown(i) {
if (i < this.trainers.length - 1) { [this.trainers[i], this.trainers[i+1]] = [this.trainers[i+1], this.trainers[i]]; this.sync(); }
},
sync() {
$wire.set('sectionSettings.trainers', JSON.stringify(this.trainers));
}
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">فريق المدربين</label>
<p class="text-xs text-gray-500 mb-3">أضف المدربين بالترتيب المطلوب — الصور تُرفع من <a href="{{ route('website.manage.gallery') }}" class="text-blue-500 underline">معرض الصور</a> (مجموعة team_photo)</p>
<div class="space-y-2 mb-3">
<template x-for="(trainer, i) in trainers" :key="i">
<div class="border rounded-lg overflow-hidden transition-all"
:class="editingTrainer === i ? 'border-blue-300 dark:border-blue-600 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-gray-700'">
<div class="flex items-center gap-2 p-3 cursor-pointer" @click="editingTrainer = editingTrainer === i ? null : i">
<div class="flex flex-col gap-0.5">
<button type="button" @click.stop="moveUp(i)" class="p-0.5 text-gray-400 hover:text-gray-600 disabled:opacity-30" :disabled="i === 0">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
</button>
<button type="button" @click.stop="moveDown(i)" class="p-0.5 text-gray-400 hover:text-gray-600 disabled:opacity-30" :disabled="i === trainers.length - 1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
</div>
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold text-gray-500" x-text="i + 1"></div>
<div class="flex-1 min-w-0">
<span class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="trainer.name || 'مدرب جديد'"></span>
<span class="text-xs text-gray-400 ms-2" x-text="trainer.role || ''"></span>
</div>
<button type="button" @click.stop="removeTrainer(i)" class="p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
<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="M6 18L18 6M6 6l12 12"/></svg>
</button>
<svg class="w-4 h-4 text-gray-400 transition-transform" :class="editingTrainer === i ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</div>
<div x-show="editingTrainer === i" x-collapse class="p-3 pt-0 space-y-3 border-t border-gray-100 dark:border-gray-700">
<div>
<label class="block text-xs text-gray-500 mb-0.5">الاسم</label>
<input type="text" x-model="trainer.name" @change="sync()" placeholder="كابتن أحمد" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
<div>
<label class="block text-xs text-gray-500 mb-0.5">المسمى الوظيفي</label>
<input type="text" x-model="trainer.role" @change="sync()" placeholder="مدرب كرة قدم — فئة الناشئين" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
<div>
<label class="block text-xs text-gray-500 mb-0.5">نبذة مختصرة</label>
<textarea x-model="trainer.bio" @change="sync()" rows="2" placeholder="خبرة 10 سنوات في..." class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
</div>
</div>
</div>
</template>
</div>
<button type="button" @click="addTrainer()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
<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>
إضافة مدرب
</button>
</div>
@endif
{{-- Schedule Editor --}}
@if($editingSection === 'schedule')
<div x-data="{
rows: JSON.parse(@js($sectionSettings['schedule_data'] ?? '[]')),
days: ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'],
addRow() {
this.rows.push({ day: 'السبت', activity: '', time: '', branch: '' });
this.sync();
},
removeRow(i) {
this.rows.splice(i, 1);
this.sync();
},
duplicateRow(i) {
this.rows.splice(i + 1, 0, {...this.rows[i]});
this.sync();
},
sync() {
$wire.set('sectionSettings.schedule_data', JSON.stringify(this.rows));
}
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">جدول المواعيد</label>
<p class="text-xs text-gray-500 mb-3">أضف صفوف الجدول — سيعرض على الموقع كجدول مرتب حسب اليوم</p>
<div class="space-y-2 mb-3 max-h-[400px] overflow-y-auto">
<template x-for="(row, i) in rows" :key="i">
<div class="flex items-center gap-2 p-2.5 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<select x-model="row.day" @change="sync()" class="w-24 text-xs rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<template x-for="d in days"><option :value="d" x-text="d"></option></template>
</select>
<input type="text" x-model="row.activity" @change="sync()" placeholder="النشاط" class="flex-1 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<input type="text" x-model="row.time" @change="sync()" placeholder="4:00 - 5:30 م" dir="ltr" class="w-28 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-center">
<input type="text" x-model="row.branch" @change="sync()" placeholder="الفرع" class="w-24 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<button type="button" @click="duplicateRow(i)" class="p-1 text-gray-400 hover:text-blue-500" title="نسخ">
<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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
</button>
<button type="button" @click="removeRow(i)" class="p-1 text-red-400 hover:text-red-600">
<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="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
</template>
</div>
<button type="button" @click="addRow()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
<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>
إضافة صف جديد
</button>
</div>
@endif
{{-- Custom HTML --}}
@if($editingSection === 'custom_html')
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">كود HTML</label>
<textarea wire:model="sectionContent" rows="8" dir="ltr" class="w-full font-mono text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-blue-500 focus:border-blue-500" placeholder="<div>...</div>"></textarea>
<p class="text-xs text-amber-600 mt-1">تحذير: تأكد من أمان الكود المضاف — يُعرض كما هو</p>
</div>
@endif
{{-- Pricing Plan Builder --}}
@if($editingSection === 'pricing')
<div x-data="{
plans: JSON.parse(@js($sectionSettings['plans'] ?? '[]')),
editingPlan: null,
newFeature: '',
addPlan() {
this.plans.push({ name: '', price: '', period: '/شهر', features: [], highlighted: false, cta: 'اشترك الآن' });
this.editingPlan = this.plans.length - 1;
this.sync();
},
removePlan(i) {
this.plans.splice(i, 1);
if (this.editingPlan === i) this.editingPlan = null;
this.sync();
},
addFeature(planIdx) {
if (this.newFeature.trim()) {
this.plans[planIdx].features.push(this.newFeature.trim());
this.newFeature = '';
this.sync();
}
},
removeFeature(planIdx, fIdx) {
this.plans[planIdx].features.splice(fIdx, 1);
this.sync();
},
sync() {
$wire.set('sectionSettings.plans', JSON.stringify(this.plans));
}
}">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">باقات الأسعار</label>
{{-- Plans List --}}
<div class="space-y-2 mb-3">
<template x-for="(plan, i) in plans" :key="i">
<div class="border rounded-lg overflow-hidden transition-all"
:class="editingPlan === i ? 'border-blue-300 dark:border-blue-600 bg-blue-50/50 dark:bg-blue-900/10' : 'border-gray-200 dark:border-gray-700'">
{{-- Plan Header --}}
<div class="flex items-center gap-3 p-3 cursor-pointer" @click="editingPlan = editingPlan === i ? null : i">
<div class="flex-1 min-w-0">
<span class="text-sm font-medium text-gray-800 dark:text-gray-200" x-text="plan.name || 'باقة جديدة'"></span>
<span class="text-xs text-gray-400 ms-2" x-text="plan.price ? plan.price + ' ' + plan.period : ''"></span>
</div>
<template x-if="plan.highlighted">
<span class="px-2 py-0.5 bg-amber-100 text-amber-700 text-[10px] font-bold rounded">مميزة</span>
</template>
<button type="button" @click.stop="removePlan(i)" class="p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
<svg class="w-4 h-4 text-gray-400 transition-transform" :class="editingPlan === i ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</div>
{{-- Plan Edit Form --}}
<div x-show="editingPlan === i" x-collapse class="p-3 pt-0 space-y-3 border-t border-gray-100 dark:border-gray-700">
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-gray-500 mb-0.5">اسم الباقة</label>
<input type="text" x-model="plan.name" @change="sync()" placeholder="الباقة الأساسية" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
<div>
<label class="block text-xs text-gray-500 mb-0.5">السعر</label>
<input type="text" x-model="plan.price" @change="sync()" placeholder="500 ج.م" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs text-gray-500 mb-0.5">الفترة</label>
<select x-model="plan.period" @change="sync()" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<option value="/شهر">/شهر</option>
<option value="/3 أشهر">/3 أشهر</option>
<option value="/6 أشهر">/6 أشهر</option>
<option value="/سنة">/سنة</option>
<option value="/حصة">/حصة</option>
<option value="">بدون فترة</option>
</select>
</div>
<div>
<label class="block text-xs text-gray-500 mb-0.5">نص الزر</label>
<input type="text" x-model="plan.cta" @change="sync()" placeholder="اشترك الآن" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" x-model="plan.highlighted" @change="sync()" class="rounded border-gray-300 text-amber-600 focus:ring-amber-500">
<span class="text-xs text-gray-700 dark:text-gray-300">باقة مميزة (أكبر حجمًا)</span>
</label>
{{-- Features --}}
<div>
<label class="block text-xs text-gray-500 mb-1">المميزات</label>
<div class="space-y-1 mb-2">
<template x-for="(feat, fi) in plan.features" :key="fi">
<div class="flex items-center gap-2">
<svg class="w-3.5 h-3.5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span class="flex-1 text-xs text-gray-700 dark:text-gray-300" x-text="feat"></span>
<button type="button" @click="removeFeature(i, fi)" class="text-red-400 hover:text-red-600">
<svg class="w-3.5 h-3.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>
</div>
</template>
</div>
<div class="flex gap-2">
<input type="text" x-model="newFeature" @keydown.enter.prevent="addFeature(i)" placeholder="أضف ميزة..." class="flex-1 text-xs rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<button type="button" @click="addFeature(i)" class="px-2 py-1 text-xs bg-green-50 text-green-600 rounded-lg hover:bg-green-100 font-medium">+</button>
</div>
</div>
</div>
</div>
</template>
</div>
<button type="button" @click="addPlan()" class="w-full p-2.5 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors flex items-center justify-center gap-2">
<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>
إضافة باقة جديدة
</button>
</div>
@endif
{{-- Events Section Settings --}}
@if($editingSection === 'events')
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">تخطيط العرض</label>
<div class="grid grid-cols-5 gap-2">
@foreach([
'grid_2' => ['label' => 'عمودين', 'cols' => 2],
'grid_3' => ['label' => '3 أعمدة', 'cols' => 3],
'grid_4' => ['label' => '4 أعمدة', 'cols' => 4],
'list' => ['label' => 'قائمة', 'cols' => 0],
'carousel' => ['label' => 'تمرير', 'cols' => -1],
] as $layoutKey => $layoutInfo)
<label class="cursor-pointer group">
<input type="radio" wire:model="sectionLayout" value="{{ $layoutKey }}" class="peer sr-only">
<div class="p-2 rounded-lg border-2 transition-all text-center
peer-checked:border-blue-500 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20
border-gray-200 dark:border-gray-600 hover:border-gray-300">
<span class="text-[10px] font-medium text-gray-600 dark:text-gray-400">{{ $layoutInfo['label'] }}</span>
</div>
</label>
@endforeach
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">عدد الإيفنتات المعروضة</label>
<input type="number" wire:model="sectionSettings.max_items" min="3" max="12" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="6">
</div>
@endif
{{-- Visual Controls --}}
<div class="border-t border-gray-200 dark:border-gray-700 pt-5 mt-5">
<h4 class="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
......
resources/views/website/events/index.blade.php
View file @ bd1af213
......@@ -4,7 +4,7 @@
<div class="site-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="text-center mb-12">
<h1 class="section-title mx-auto">{{ __('الأحداث والبطولات') }}</h1>
<h1 class="section-title mx-auto">{{ __('الإيفنتات والبطولات') }}</h1>
<p class="mt-4 text-gray-500 text-lg">{{ __('تابع أحدث الفعاليات والبطولات وسجّل الآن') }}</p>
</div>
......@@ -97,7 +97,7 @@ class="w-full h-auto object-contain group-hover:scale-105 transition-transform d
<svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<p class="text-gray-500 text-lg">{{ __('لا توجد أحداث حالياً') }}</p>
<p class="text-gray-500 text-lg">{{ __('لا توجد إيفنتات حالياً') }}</p>
</div>
@endif
</div>
......
resources/views/website/events/show.blade.php
View file @ bd1af213
......@@ -9,7 +9,7 @@ class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-[var(--si
<svg class="w-4 h-4 rotate-180" 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>
{{ __('العودة للأحداث') }}
{{ __('العودة للإيفنتات') }}
</a>
{{-- Cover Image (full-bleed, edge-to-edge) --}}
......@@ -188,7 +188,7 @@ class="w-full h-auto object-contain">
<div class="lg:col-span-1">
<div class="sticky top-6">
<div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
<h3 class="text-lg font-bold text-gray-900 mb-4">{{ __('التسجيل في الحدث') }}</h3>
<h3 class="text-lg font-bold text-gray-900 mb-4">{{ __('التسجيل في الإيفنت') }}</h3>
@if($event->isRegistrationOpen())
@if($event->max_capacity)
......
resources/views/website/sections/events.blade.php 0 → 100644
View file @ bd1af213
@php
$events = $data['events'] ?? collect();
$layout = $section->getSetting('layout', 'grid_3');
$maxItems = $section->getSetting('max_items', 6);
$events = $events->take($maxItems);
$gridClass = match($layout) {
'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-[var(--card-gap,1.5rem)]',
'grid_4' => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[var(--card-gap,1.5rem)]',
'list' => 'flex flex-col gap-[var(--card-gap,1.5rem)]',
'carousel' => 'flex overflow-x-auto snap-x snap-mandatory gap-[var(--card-gap,1.5rem)] pb-4 -mx-4 px-4 scrollbar-hide',
default => 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[var(--card-gap,1.5rem)]',
};
$cardExtraClass = $layout === 'carousel' ? 'min-w-[320px] snap-start shrink-0' : '';
$listMode = $layout === 'list';
$typeLabels = [
'tournament' => 'بطولة',
'camp' => 'معسكر',
'competition' => 'مسابقة',
'open_day' => 'يوم مفتوح',
'workshop' => 'ورشة عمل',
'friendly' => 'مباراة ودية',
'exhibition' => 'عرض',
'other' => 'إيفنت',
];
$typeColors = [
'tournament' => 'bg-amber-100 text-amber-800',
'camp' => 'bg-green-100 text-green-800',
'competition' => 'bg-red-100 text-red-800',
'open_day' => 'bg-blue-100 text-blue-800',
'workshop' => 'bg-purple-100 text-purple-800',
'friendly' => 'bg-cyan-100 text-cyan-800',
'exhibition' => 'bg-pink-100 text-pink-800',
'other' => 'bg-gray-100 text-gray-800',
];
@endphp
<div class="site-section">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'الإيفنتات والبطولات' }}</h2>
@if($section->subtitle)
<p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
@endif
</div>
@if($events->count())
<div class="{{ $gridClass }}">
@foreach($events as $event)
<a href="{{ route('website.events.show', ['slug' => $academy->slug ?? 'default', 'eventSlug' => $event->slug]) }}"
class="site-card {{ $cardExtraClass }} {{ $listMode ? 'flex flex-row' : '' }} overflow-hidden group reveal reveal--delay-{{ ($loop->index % 3) + 1 }} hover:shadow-xl transition-shadow">
{{-- Cover --}}
@if($event->cover)
<div class="relative overflow-hidden {{ $listMode ? 'w-48 shrink-0' : 'aspect-[16/9]' }}">
<img src="{{ $event->cover->url }}"
alt="{{ $event->title }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
loading="lazy">
<span class="absolute top-3 start-3 px-2 py-0.5 rounded-full text-xs font-medium {{ $typeColors[$event->type->value] ?? 'bg-gray-100 text-gray-800' }}">
{{ $typeLabels[$event->type->value] ?? 'إيفنت' }}
</span>
</div>
@else
<div class="relative {{ $listMode ? 'w-48 shrink-0' : 'aspect-[16/9]' }} bg-gradient-to-br from-[var(--site-accent)]/10 to-[var(--site-accent)]/5 flex items-center justify-center">
<svg class="w-12 h-12 text-[var(--site-accent)]/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<span class="absolute top-3 start-3 px-2 py-0.5 rounded-full text-xs font-medium {{ $typeColors[$event->type->value] ?? 'bg-gray-100 text-gray-800' }}">
{{ $typeLabels[$event->type->value] ?? 'إيفنت' }}
</span>
</div>
@endif
<div class="p-5 flex flex-col flex-1">
{{-- Date Badge --}}
<div class="flex items-center gap-2 mb-2">
<div class="flex items-center gap-1.5 text-xs text-[var(--site-accent)] font-medium">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
{{ $event->starts_at->translatedFormat('j F Y') }}
</div>
@if($event->starts_at->isFuture())
@php $daysLeft = now()->diffInDays($event->starts_at); @endphp
@if($daysLeft <= 7)
<span class="px-1.5 py-0.5 bg-red-50 text-red-600 text-[10px] font-bold rounded">
باقي {{ $daysLeft }} {{ $daysLeft === 1 ? 'يوم' : 'أيام' }}
</span>
@endif
@endif
</div>
<h3 class="text-lg font-bold text-gray-900 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
{{ $event->title }}
</h3>
{{-- Location --}}
@if($event->location_name || $event->facility)
<p class="text-gray-400 text-xs mt-1.5 flex items-center gap-1">
<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
{{ $event->location_name ?? $event->facility?->name_ar ?? '' }}
</p>
@endif
{{-- Capacity --}}
<div class="mt-auto pt-3">
@if($event->max_capacity)
@php
$spotsLeft = max(0, $event->max_capacity - $event->registrations_count);
$pct = min(100, round(($event->registrations_count / $event->max_capacity) * 100));
@endphp
<div class="flex items-center justify-between text-xs text-gray-500 mb-1">
<span>{{ $event->registrations_count }}/{{ $event->max_capacity }} مسجل</span>
@if($spotsLeft <= 5 && $spotsLeft > 0)
<span class="text-red-500 font-medium">{{ $spotsLeft }} أماكن متبقية</span>
@endif
</div>
<div class="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full rounded-full transition-all {{ $pct >= 90 ? 'bg-red-500' : ($pct >= 70 ? 'bg-amber-500' : 'bg-[var(--site-accent)]') }}"
style="width: {{ $pct }}%"></div>
</div>
@else
<span class="text-xs text-gray-400">{{ $event->registrations_count }} مسجل</span>
@endif
</div>
</div>
</a>
@endforeach
</div>
{{-- View All --}}
@if($events->count() >= 3)
<div class="text-center mt-8 reveal">
<a href="{{ route('website.events.index', ['slug' => $academy->slug ?? 'default']) }}"
class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--site-accent)] text-[var(--site-accent)] text-sm font-medium hover:bg-[var(--site-accent)] hover:text-white transition-colors">
عرض كل الإيفنتات
<svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
@endif
@else
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@for($i = 0; $i < 3; $i++)
<div class="skeleton-card">
<div class="aspect-[16/9] skeleton-block"></div>
<div class="p-5 space-y-3">
<div class="skeleton-block h-3 w-20"></div>
<div class="skeleton-block h-5 w-3/4"></div>
<div class="skeleton-block h-3 w-full"></div>
</div>
</div>
@endfor
</div>
<div class="empty-state mt-4">
<p class="text-sm">لا توجد إيفنتات قادمة حالياً</p>
</div>
@endif
</div>
</div>
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