@php
    $cols = ['1' => '', '2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 lg:grid-cols-3', '4' => 'sm:grid-cols-2 lg:grid-cols-4'][$block->get('columns', '3')] ?? 'sm:grid-cols-2 lg:grid-cols-3';
    $ar = app()->getLocale() === 'ar';
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
     @if ($block->get('show_search')) x-data="{ q: '' }" @endif>
    @include('website.blocks._header')

    @if ($block->get('show_search'))
        <div class="max-w-md mx-auto mb-8">
            <input type="search" x-model="q"
                   placeholder="{{ __('ابحث بالاسم أو المنطقة') }}"
                   class="w-full rounded-full border px-5 py-3 focus:outline-none focus:ring-2"
                   aria-label="{{ __('بحث في الفروع') }}">
        </div>
    @endif

    @if ($items->isEmpty())
        @include('website.blocks._empty')
    @else
        <div class="grid grid-cols-1 {{ $cols }} gap-6">
            @foreach ($items as $branch)
                @php
                    $name = $ar ? ($branch->name_ar ?? $branch->name) : ($branch->name ?? $branch->name_ar);
                    $loc = $branch->address ?? $branch->location ?? null;
                    $photo = $branch->photo_path ?? null;
                @endphp
                <article class="ec-stagger-item ec-surface rounded-2xl overflow-hidden shadow-sm flex flex-col transition hover:-translate-y-1"
                         @if ($block->get('show_search')) x-show="!q || @js(mb_strtolower($name . ' ' . $loc)).includes(q.toLowerCase())" @endif>
                    @if ($block->get('show_image', true) && $photo)
                        <img src="{{ $photo }}" alt="{{ $name }}" loading="lazy" class="w-full aspect-[3/2] object-cover">
                    @endif
                    <div class="flex flex-col gap-2 p-6 flex-1">
                        <h3 class="ec-heading text-xl font-semibold">{{ $name }}</h3>
                        @if ($block->get('show_location', true) && $loc)
                            <p class="ec-muted flex items-start gap-2 text-sm">
                                <x-website.icon name="map-pin" class="w-4 h-4 mt-0.5 shrink-0" />
                                <span>{{ $loc }}</span>
                            </p>
                        @endif
                        @if ($block->get('show_phone') && ($branch->phone ?? null))
                            <p class="ec-muted flex items-center gap-2 text-sm" dir="ltr">
                                <x-website.icon name="phone" class="w-4 h-4 shrink-0" />
                                <a href="tel:{{ $branch->phone }}">{{ $branch->phone }}</a>
                            </p>
                        @endif
                        @if ($block->get('show_manager') && ($branch->manager_name ?? null))
                            <p class="ec-muted text-sm">{{ __('المسؤول') }}: {{ $branch->manager_name }}</p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif

    @include('website.blocks._footer_buttons')
</div>
