@php
    $ar = app()->getLocale() === 'ar';
    $days = [__('الأحد'), __('الإثنين'), __('الثلاثاء'), __('الأربعاء'), __('الخميس'), __('الجمعة'), __('السبت')];
    $grouped = $items->groupBy(fn ($g) => $g->branch_name ?? optional($g->branch)->name_ar ?? __('عام'));
    $lightbox = $block->get('enable_lightbox', true);
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
     @if ($lightbox) x-data="{ open: false, current: '' }" @endif>
    @include('website.blocks._header')

    @if ($items->isEmpty())
        @include('website.blocks._empty')
    @elseif ($variant === 'cards')
        {{-- Image-per-session layout: academies often publish a designed card per group. --}}
        @foreach ($grouped as $branchName => $groups)
            <section class="mb-12">
                <h3 class="ec-heading text-xl font-bold mb-5">{{ $branchName }}</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5">
                    @foreach ($groups as $g)
                        <figure class="ec-stagger-item">
                            @if ($g->image_path ?? null)
                                <img src="{{ $g->image_path }}" alt="{{ $g->name_ar ?? $g->name }}" loading="lazy"
                                     class="w-full aspect-square object-cover rounded-xl {{ $lightbox ? 'cursor-zoom-in' : '' }}"
                                     @if ($lightbox) x-on:click="current = @js($g->image_path); open = true" @endif>
                            @endif
                            <figcaption class="mt-2 text-center text-sm font-medium">{{ $g->name_ar ?? $g->name }}</figcaption>
                        </figure>
                    @endforeach
                </div>
            </section>
        @endforeach
    @else
        @foreach ($grouped as $branchName => $groups)
            <section class="mb-10">
                <h3 class="ec-heading text-xl font-bold mb-4">{{ $branchName }}</h3>
                <div class="overflow-x-auto">
                    <table class="w-full text-start border-collapse">
                        <thead>
                            <tr class="ec-muted text-sm border-b">
                                <th scope="col" class="py-3 pe-4 text-start font-semibold">{{ __('المجموعة') }}</th>
                                @if ($block->get('show_age_groups', true))
                                    <th scope="col" class="py-3 pe-4 text-start font-semibold">{{ __('الفئة') }}</th>
                                @endif
                                @if ($block->get('show_days', true))
                                    <th scope="col" class="py-3 pe-4 text-start font-semibold">{{ __('الأيام') }}</th>
                                @endif
                                @if ($block->get('show_times', true))
                                    <th scope="col" class="py-3 text-start font-semibold">{{ __('الوقت') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($groups as $g)
                                <tr class="border-b last:border-0">
                                    <td class="py-3 pe-4 font-medium">{{ $g->name_ar ?? $g->name }}</td>
                                    @if ($block->get('show_age_groups', true))
                                        <td class="py-3 pe-4 ec-muted text-sm" dir="ltr">{{ $g->age_range ?? '—' }}</td>
                                    @endif
                                    @if ($block->get('show_days', true))
                                        <td class="py-3 pe-4 ec-muted text-sm">
                                            {{ collect($g->days ?? [])->map(fn ($d) => $days[(int) $d] ?? $d)->implode('، ') ?: '—' }}
                                        </td>
                                    @endif
                                    @if ($block->get('show_times', true))
                                        <td class="py-3 ec-muted text-sm" dir="ltr">
                                            {{ $g->start_time ?? '' }}{{ ($g->start_time ?? null) && ($g->end_time ?? null) ? ' – ' : '' }}{{ $g->end_time ?? '' }}
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </section>
        @endforeach
    @endif

    @include('website.blocks._footer_buttons')

    @if ($lightbox)
        <div x-show="open" x-cloak x-on:keydown.escape.window="open = false" x-on:click="open = false"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4"
             role="dialog" aria-modal="true" aria-label="{{ __('عرض الجدول') }}">
            <img x-bind:src="current" alt="" class="max-h-[90vh] max-w-full rounded-lg" x-on:click.stop>
        </div>
    @endif
</div>
