<div>
    {{-- Week Navigation --}}
    <div class="flex items-center justify-between mb-4">
        <button wire:click="previousWeek" class="w-11 h-11 rounded-xl bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
            <svg class="w-5 h-5 text-[#0F172A]" 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>
        <h2 class="text-base font-semibold text-[#0F172A]" dir="ltr">{{ $weekLabel }}</h2>
        <button wire:click="nextWeek" class="w-11 h-11 rounded-xl bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-50 transition-colors">
            <svg class="w-5 h-5 text-[#0F172A]" 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>

    {{-- 7-Day Row --}}
    <div class="grid grid-cols-7 gap-1 mb-6">
        @foreach($weekDays as $day)
            <button
                wire:click="selectDay('{{ $day['date'] }}')"
                class="flex flex-col items-center py-3 px-1 rounded-xl transition-all min-h-[44px]
                    {{ $selectedDate === $day['date']
                        ? 'bg-[#2563EB] text-white shadow-md'
                        : ($day['isToday'] ? 'bg-blue-50 text-[#2563EB]' : 'bg-white text-[#0F172A] hover:bg-gray-50') }}"
            >
                <span class="text-[10px] font-medium {{ $selectedDate === $day['date'] ? 'text-white/80' : 'text-[#64748B]' }}">
                    {{ $day['name'] }}
                </span>
                <span class="text-sm font-bold mt-0.5" dir="ltr">{{ $day['number'] }}</span>
                @if($day['hasSessions'])
                    <span class="w-1.5 h-1.5 rounded-full mt-1
                        {{ $selectedDate === $day['date'] ? 'bg-white' : 'bg-[#2563EB]' }}"></span>
                @endif
            </button>
        @endforeach
    </div>

    {{-- Sessions List for Selected Day --}}
    <div wire:loading.class="opacity-50 pointer-events-none">
        <h3 class="text-sm font-semibold text-[#64748B] mb-3">
            {{ __('حصص يوم') }} {{ $selectedDayLabel }}
        </h3>

        @if(empty($daySessions))
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 text-center">
                <svg class="w-12 h-12 text-gray-200 mx-auto mb-3" 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="text-sm text-[#64748B]">{{ __('لا توجد حصص في هذا اليوم') }}</p>
            </div>
        @else
            <div class="space-y-3">
                @php
                    $activityColors = [
                        0 => 'border-s-[#2563EB]',
                        1 => 'border-s-[#059669]',
                        2 => 'border-s-[#D97706]',
                        3 => 'border-s-[#7C3AED]',
                        4 => 'border-s-[#EC4899]',
                        5 => 'border-s-[#06B6D4]',
                    ];
                @endphp

                @foreach($daySessions as $index => $session)
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 border-s-4 {{ $activityColors[$session['activityIndex'] ?? 0 % 6] ?? 'border-s-[#2563EB]' }} p-4
                        {{ ($session['status'] ?? '') === 'cancelled' ? 'opacity-60' : '' }}">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-2">
                                    <p class="text-sm font-semibold text-[#0F172A] {{ ($session['status'] ?? '') === 'cancelled' ? 'line-through' : '' }}">
                                        {{ $session['activity'] ?? '' }}
                                    </p>
                                    @if(($session['status'] ?? '') === 'cancelled')
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-red-100 text-red-700">
                                            {{ __('ملغاة') }}
                                        </span>
                                    @endif
                                </div>
                                <p class="text-xs text-[#64748B] mt-1">{{ $session['group'] ?? '' }}</p>
                                @if($session['trainer'] ?? null)
                                    <p class="text-xs text-[#64748B] mt-0.5">
                                        <svg class="w-3 h-3 inline-block me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                        </svg>
                                        {{ $session['trainer'] }}
                                    </p>
                                @endif
                            </div>
                            <div class="text-end">
                                <p class="text-sm font-bold text-[#0F172A]" dir="ltr">{{ $session['startTime'] ?? '' }}</p>
                                <p class="text-[10px] text-[#64748B]" dir="ltr">{{ $session['endTime'] ?? '' }}</p>
                            </div>
                        </div>
                        @if($session['location'] ?? null)
                            <div class="flex items-center gap-1 mt-2 pt-2 border-t border-gray-50">
                                <svg class="w-3.5 h-3.5 text-[#64748B]" 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"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                                <span class="text-xs text-[#64748B]">{{ $session['location'] }}</span>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>
