<div>
    <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>
        @permission('programs.create')
        <a href="{{ route('programs.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">
            <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>
        @endpermission
    </div>

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

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="col-span-2 md:col-span-1">
                <input type="text" wire:model.live.debounce.300ms="search"
                       placeholder="{{ __('بحث بالاسم...') }}"
                       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>
            <select wire:model.live="activityFilter" 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>
                @foreach($activities as $activity)
                    <option value="{{ $activity->id }}">{{ $activity->name_ar }}</option>
                @endforeach
            </select>
            <select wire:model.live="trainerFilter" 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>
                @foreach($trainers as $trainer)
                    <option value="{{ $trainer->id }}">{{ $trainer->name_ar ?: $trainer->name }}</option>
                @endforeach
            </select>
            <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>
                @foreach($statusOptions as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <!-- Desktop Table -->
    <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <x-ui.sort-header column="name_ar" :sortBy="$sortBy" :sortDir="$sortDir">{{ __('البرنامج') }}</x-ui.sort-header>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('النشاط') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('الفرع') }}</th>
                        <th class="px-4 py-3 text-center font-semibold text-gray-600">{{ __('المجموعات') }}</th>
                        <x-ui.sort-header column="sessions_per_week" :sortBy="$sortBy" :sortDir="$sortDir" align="center">{{ __('الحصص/أسبوع') }}</x-ui.sort-header>
                        <x-ui.sort-header column="status" :sortBy="$sortBy" :sortDir="$sortDir" align="center">{{ __('الحالة') }}</x-ui.sort-header>
                        <th class="px-4 py-3 text-end font-semibold text-gray-600">{{ __('إجراءات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($programs as $program)
                    <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='{{ route('programs.show', $program) }}'">
                        <td class="px-4 py-3">
                            <div>
                                <a href="{{ route('programs.show', $program) }}" wire:navigate class="font-medium text-gray-800 hover:text-blue-600">{{ $program->name_ar }}</a>
                                @if($program->name)
                                    <p class="text-xs text-gray-400" dir="ltr">{{ $program->name }}</p>
                                @endif
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $program->activity?->name_ar ?? '-' }}
                        </td>
                        <td class="px-4 py-3 text-gray-600">
                            {{ $program->branch?->name_ar ?? __('الكل') }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-blue-50 text-blue-700 text-xs font-semibold">
                                {{ $program->groups_count }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center text-gray-600" dir="ltr">
                            {{ $program->sessions_per_week }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            @php
                                $statusValue = $program->status->value ?? $program->status;
                                $statusColors = [
                                    'draft' => 'bg-gray-100 text-gray-700',
                                    'active' => 'bg-green-100 text-green-700',
                                    'full' => 'bg-yellow-100 text-yellow-700',
                                    'closed' => 'bg-red-100 text-red-700',
                                    'archived' => 'bg-purple-100 text-purple-700',
                                ];
                            @endphp
                            <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$statusValue] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ $statusOptions[$statusValue] ?? $statusValue }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-end">
                            <div class="flex items-center justify-end gap-2">
                                @permission('programs.update')
                                @if($statusValue === 'draft')
                                <button wire:click="changeStatus('{{ $program->uuid }}', 'active')"
                                        wire:confirm="{{ __('تفعيل هذا البرنامج؟') }}"
                                        class="text-green-600 hover:text-green-800 text-sm font-medium">
                                    {{ __('تفعيل') }}
                                </button>
                                @elseif($statusValue === 'closed')
                                <button wire:click="changeStatus('{{ $program->uuid }}', 'active')"
                                        wire:confirm="{{ __('إعادة تفعيل هذا البرنامج؟') }}"
                                        class="text-green-600 hover:text-green-800 text-sm font-medium">
                                    {{ __('تفعيل') }}
                                </button>
                                @elseif($statusValue === 'active')
                                <button wire:click="changeStatus('{{ $program->uuid }}', 'closed')"
                                        wire:confirm="{{ __('إغلاق هذا البرنامج؟') }}"
                                        class="text-amber-600 hover:text-amber-800 text-sm font-medium">
                                    {{ __('إغلاق') }}
                                </button>
                                @endif
                                <a href="{{ route('programs.edit', $program) }}" wire:navigate
                                   class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                                    {{ __('تعديل') }}
                                </a>
                                @endpermission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-12 text-center">
                            <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" 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>
                            <p class="text-lg font-medium text-gray-500">{{ __('لا توجد برامج تدريبية') }}</p>
                            <p class="text-sm text-gray-400 mt-1">{{ __('ابدأ بإضافة برنامج جديد') }}</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($programs->hasPages())
            <div class="px-4 py-3 border-t border-gray-200">
                {{ $programs->links() }}
            </div>
        @endif
    </div>

    <!-- Mobile Cards -->
    <div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
        @forelse($programs as $program)
            @php
                $statusValue = $program->status->value ?? $program->status;
                $statusColors = [
                    'draft' => 'bg-gray-100 text-gray-700',
                    'active' => 'bg-green-100 text-green-700',
                    'full' => 'bg-yellow-100 text-yellow-700',
                    'closed' => 'bg-red-100 text-red-700',
                    'archived' => 'bg-purple-100 text-purple-700',
                ];
            @endphp
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-start justify-between gap-3 mb-3">
                    <div class="min-w-0 flex-1">
                        <p class="font-medium text-gray-800 truncate">{{ $program->name_ar }}</p>
                        @if($program->name)
                            <p class="text-xs text-gray-400 truncate" dir="ltr">{{ $program->name }}</p>
                        @endif
                    </div>
                    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium shrink-0 {{ $statusColors[$statusValue] ?? 'bg-gray-100 text-gray-700' }}">
                        {{ $statusOptions[$statusValue] ?? $statusValue }}
                    </span>
                </div>

                <div class="flex items-center gap-4 text-sm text-gray-600 mb-3">
                    <span>{{ $program->activity?->name_ar ?? '-' }}</span>
                    <span class="text-gray-300">|</span>
                    <span class="inline-flex items-center gap-1">
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-50 text-blue-700 text-xs font-semibold">{{ $program->groups_count }}</span>
                        {{ __('مجموعات') }}
                    </span>
                </div>

                <div class="flex items-center justify-end gap-4 border-t border-gray-100 pt-3">
                    @permission('programs.update')
                    @if($statusValue === 'draft' || $statusValue === 'closed')
                    <button wire:click="changeStatus('{{ $program->uuid }}', 'active')"
                            wire:confirm="{{ __('تفعيل هذا البرنامج؟') }}"
                            class="inline-flex items-center gap-1 py-2 text-green-600 hover:text-green-800 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="M5 13l4 4L19 7"/></svg>
                        {{ __('تفعيل') }}
                    </button>
                    @endif
                    <a href="{{ route('programs.edit', $program) }}" wire:navigate
                       class="inline-flex items-center gap-1 py-2 text-blue-600 hover:text-blue-800 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        {{ __('تعديل') }}
                    </a>
                    @endpermission
                </div>
            </div>
        @empty
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12 text-center">
                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" 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>
                <p class="text-lg font-medium text-gray-500">{{ __('لا توجد برامج تدريبية') }}</p>
                <p class="text-sm text-gray-400 mt-1">{{ __('ابدأ بإضافة برنامج جديد') }}</p>
            </div>
        @endforelse

        @if($programs->hasPages())
            <div class="mt-4">
                {{ $programs->links() }}
            </div>
        @endif
    </div>
</div>
