@php
    use App\Enums\StateEnum;
@endphp
<x-page :title="__('shops')">
    <x-slot:headerActions>
        <x-filament::button
            size="sm"
            icon="heroicon-s-building-storefront"
            tag="a"
            :href="route(\App\Enums\RoleEnum::Seller()->value.'.shops.create')"
            wire:navigate
            class="px-4 !rounded-full"
        >
            {{ __('add') }}
        </x-filament::button>
    </x-slot:headerActions>

    <div class="bg-white rounded-lg shadow-sm drop-shadow">
        <div class="mx-auto max-w-7xl overflow-hidden px-4 py-8 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
                @forelse($this->shops as $shop)
                    <div class="relative group">
                        <div
                            @class([
                                'absolute z-50 right-0 top-0 text-white text-xs font-bold py-1 px-2 rounded-bl-lg',
                                'bg-primary-600' => StateEnum::tryFrom($shop['statut'])->equals(StateEnum::Actif()),
                                'bg-danger-600' => !StateEnum::tryFrom($shop['statut'])->equals(StateEnum::Actif()),
                            ])
                        >
                            {{ $shop['statut'] }}
                        </div>
                        <div
                            class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-100 group-hover:opacity-75">

                            <img src="{{ $shop['icone'] }}"
                                 alt="{{ $shop['nom'] }}"
                                 class="h-full w-full object-cover object-center">
                        </div>
                        <h3 class="mt-4 text-2xl font-bold text-gray-900">
                            {{ $shop['nom'] }}
                        </h3>
                        {{--                        <div class="mt-2 flex flex-wrap gap-x-4 gap-y-2">--}}
                        {{--                            <x-filament::badge--}}
                        {{--                                size="sm"--}}
                        {{--                                class="rounded-full"--}}
                        {{--                            >--}}
                        {{--                                {{ $shop['category'] }}--}}
                        {{--                            </x-filament::badge>--}}
                        {{--                        </div>--}}
                        <a href="{{ route(\App\Enums\RoleEnum::Seller()->value.'.shops.products.index', $shop['uuid']) }}"
                           class="absolute inset-0"
                           wire:navigate></a>
                    </div>
                @empty
                    <div class="text-center col-span-full">
                        <x-filament::icon
                            icon="heroicon-o-building-storefront"
                            class="mx-auto h-12 w-12 text-gray-400"
                        />
                        <h3 class="mt-2 text-sm font-semibold text-gray-900">Aucune boutique</h3>
                        <p class="mt-1 text-sm text-gray-500">Commencez en créant une nouvelle boutique.</p>
                        <div class="mt-6">
                            <x-filament::button
                                icon="heroicon-m-plus"
                                tag="a"
                                :href="route(\App\Enums\RoleEnum::Seller()->value.'.shops.create')"
                                wire:navigate
                            >
                                Boutique
                            </x-filament::button>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

</x-page>