<div>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('الجدول الأسبوعي') }}</h1>
            <p class="mt-1 text-sm text-gray-500">{{ __('عرض جلسات التدريب للأسبوع الحالي') }}</p>
        </div>

        <!-- Week Navigation -->
        <div class="flex items-center gap-2">
            <button
                wire:click="previousWeek"
                class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
                <svg class="h-4 w-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                <span class="ms-1">{{ __('السابق') }}</span>
            </button>

            <button
                wire:click="goToToday"
                class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
                {{ __('اليوم') }}
            </button>

            <button
                wire:click="nextWeek"
                class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
                <span class="me-1">{{ __('التالي') }}</span>
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="mb-6 rounded-lg border border-gray-200 bg-white p-4 sm:p-6">
        <div class="grid grid-cols-2 gap-3 sm:gap-4">
            <!-- Program Filter -->
            <div>
                <label for="programFilter" class="mb-1 block text-sm font-medium text-gray-700">{{ __('البرنامج') }}</label>
                <select
                    id="programFilter"
                    wire:model.live="programFilter"
                    class="w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500"
                >
                    <option value="">{{ __('جميع البرامج') }}</option>
                    @foreach($programs as $program)
                        <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Trainer Filter -->
            <div>
                <label for="trainerFilter" class="mb-1 block text-sm font-medium text-gray-700">{{ __('المدرب') }}</label>
                <select
                    id="trainerFilter"
                    wire:model.live="trainerFilter"
                    class="w-full rounded-lg border-gray-300 text-sm shadow-sm focus:border-blue-500 focus:ring-blue-500"
                >
                    <option value="">{{ __('جميع المدربين') }}</option>
                    @foreach($trainers as $trainer)
                        <option value="{{ $trainer->id }}">{{ $trainer->name_ar ?: $trainer->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <!-- Week Label -->
    <div class="mb-4 text-center">
        <span class="text-base sm:text-lg font-semibold text-gray-800">
            {{ \Carbon\Carbon::parse($weekStart)->format('Y/m/d') }}
            —
            {{ \Carbon\Carbon::parse($weekStart)->addDays(5)->format('Y/m/d') }}
        </span>
    </div>

    <!-- Schedule Grid -->
    <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white" wire:loading.class="opacity-50 pointer-events-none">
        <div class="min-w-[900px]">
            <!-- Day Headers -->
            <div class="grid grid-cols-[80px_repeat(6,1fr)] border-b border-gray-200 bg-gray-50">
                <div class="border-e border-gray-200 px-2 py-3 text-center text-xs font-medium text-gray-500">
                    {{ __('الوقت') }}
                </div>
                @foreach($this->weekDays as $day)
                    <div class="border-e border-gray-200 px-2 py-3 text-center last:border-e-0 {{ $day['isToday'] ? 'bg-blue-50' : '' }}">
                        <div class="text-sm font-semibold text-gray-700 {{ $day['isToday'] ? 'text-blue-700' : '' }}">
                            {{ $day['name'] }}
                        </div>
                        <div class="text-xs text-gray-500 {{ $day['isToday'] ? 'text-blue-600' : '' }}" dir="ltr">
                            {{ $day['formatted'] }}
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Time Rows -->
            @foreach($this->timeSlots as $slot)
                <div class="grid grid-cols-[80px_repeat(6,1fr)] border-b border-gray-100 last:border-b-0">
                    <!-- Time Label -->
                    <div class="flex items-start border-e border-gray-200 px-2 py-2 text-xs font-medium text-gray-500" dir="ltr">
                        {{ $slot }}
                    </div>

                    <!-- Day Cells -->
                    @foreach($this->weekDays as $day)
                        <div class="relative min-h-[60px] border-e border-gray-100 p-1 last:border-e-0 {{ $day['isToday'] ? 'bg-blue-50/30' : '' }}">
                            @php
                                $daySessions = $sessionsByDate[$day['date']] ?? collect();
                                $slotHour = (int) substr($slot, 0, 2);
                                $cellSessions = $daySessions->filter(function ($session) use ($slotHour) {
                                    $startHour = (int) substr($session->start_time, 0, 2);
                                    return $startHour === $slotHour;
                                });
                            @endphp

                            @foreach($cellSessions as $session)
                                @php
                                    $startHour = (int) substr($session->start_time, 0, 2);
                                    $startMin = (int) substr($session->start_time, 3, 2);
                                    $endHour = (int) substr($session->end_time, 0, 2);
                                    $endMin = (int) substr($session->end_time, 3, 2);
                                    $durationMinutes = ($endHour * 60 + $endMin) - ($startHour * 60 + $startMin);
                                    $heightRem = max(3.5, ($durationMinutes / 60) * 3.75);
                                    $colorClass = $programColors[$session->group?->training_program_id] ?? 'bg-gray-100 border-gray-400 text-gray-800';
                                @endphp
                                <div
                                    class="mb-1 overflow-hidden rounded-md border-s-4 p-1.5 text-xs {{ $colorClass }}"
                                    style="min-height: {{ $heightRem }}rem;"
                                    title="{{ $session->group?->name_ar }} - {{ $session->group?->program?->name_ar }}"
                                >
                                    <div class="font-semibold leading-tight truncate">
                                        {{ $session->group?->name_ar }}
                                    </div>
                                    <div class="mt-0.5 text-[10px] opacity-75 truncate">
                                        {{ $session->group?->program?->name_ar }}
                                    </div>
                                    <div class="mt-0.5 text-[10px] opacity-75" dir="ltr">
                                        {{ substr($session->start_time, 0, 5) }} - {{ substr($session->end_time, 0, 5) }}
                                    </div>
                                    @if($session->facility)
                                        <div class="mt-0.5 text-[10px] opacity-75 truncate">
                                            {{ $session->facility->name_ar }}
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>

    <!-- Empty State -->
    @if($sessionsByDate->isEmpty())
        <div class="mt-4 rounded-lg border border-gray-200 bg-white p-8 sm:p-12 text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400" 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>
            <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد جلسات مجدولة لهذا الأسبوع') }}</p>
        </div>
    @endif

    <!-- Legend -->
    @if($sessionsByDate->isNotEmpty())
        <div class="mt-4 rounded-lg border border-gray-200 bg-white p-4 sm:p-6">
            <h3 class="mb-2 text-sm font-medium text-gray-700">{{ __('دليل الألوان') }}</h3>
            <div class="flex flex-wrap gap-3">
                @foreach($programColors as $programId => $colorClass)
                    @php
                        $programName = $programs->firstWhere('id', $programId)?->name_ar ?? __('برنامج غير معروف');
                    @endphp
                    <div class="flex items-center gap-1.5">
                        <span class="inline-block h-3 w-3 rounded-sm border-s-4 {{ $colorClass }}"></span>
                        <span class="text-xs text-gray-600">{{ $programName }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>
