@use(Illuminate\Support\Number)
@use(Illuminate\Support\Str)
@use(App\Enums\AdsZoneEnum)

<div
    class="my-1 sm:my-4">
    <div class="relative mx-auto flex items-stretch w-full gap-x-4 py-2">
        <aside class="max-lg:hidden p-4 basis-1/5 shrink-0 bg-white rounded-md">
            <div class="h-full flex flex-col gap-y-4 justify-between text-xs font-normal">
                @forelse($this->categories as $category)
                    <a href="{{ $category['url'] }}" wire:navigate class="hover:text-primary-600">
                        {{ $category['nom'] }}
                    </a>
                @empty

                @endforelse
            </div>
        </aside>

        <div class="relative max-sm:h-36 max-md:h-48 max-lg:h-56 flex-1 bg-white sm:rounded-md">
            <div x-data="mainAdSlider" class="absolute inset-0">
                <div x-ref="glide" class="glide block h-full">
                    <div class="glide__track h-full sm:rounded-lg" data-glide-el="track">
                        <ul class="glide__slides h-full sm:rounded-lg">
                            @foreach($this->publicites(AdsZoneEnum::PRINCIPAL_SLIDE) as $pub)
                                <li class="glide__slide relative flex flex-col items-center justify-center h-full">
                                    <img class="w-full h-full object-cover object-center sm:rounded-lg"
                                         src="{{ $pub['url'] }}"
                                         alt="placeholder image">
                                    <a href="{{ route('product-details', $pub['article_uuid']) }}"
                                       class="absolute inset-0">
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <!-- Bullets -->
                    <div class="absolute inset-x-0 bottom-2">
                        <div
                            class="glide__bullets flex w-full items-center justify-center gap-2"
                            data-glide-el="controls[nav]">
                            @foreach($this->publicites(AdsZoneEnum::PRINCIPAL_SLIDE) as $pub)
                                <button class="glide__bullet size-2 rounded-full bg-gray-300 transition-colors"
                                        data-glide-dir="=0"></button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <aside class="max-lg:hidden basis-1/5 shrink-0">
            <div class="grid gap-y-3 h-full">
                <div
                    class="aspect-h-7 aspect-w-10 w-full overflow-hidden rounded-md bg-gray-100">
                    <div x-data="secondaryAdsSlider" class="absolute inset-0">
                        <div x-ref="glide" class="glide block h-full">
                            <div class="glide__track h-full sm:rounded-lg" data-glide-el="track">
                                <ul class="glide__slides h-full sm:rounded-lg">
                                    @foreach($this->publicites(AdsZoneEnum::FIRST_TOP_RIGHT) as $pub)
                                        <li class="glide__slide relative flex flex-col items-center justify-center h-full">
                                            <img class="w-full h-full object-cover object-center sm:rounded-lg"
                                                 src="{{ $pub['url'] }}"
                                                 alt="placeholder image">
                                            <a href="{{ route('product-details', $pub['article_uuid']) }}"
                                               class="absolute inset-0">
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="aspect-h-7 aspect-w-10 w-full overflow-hidden rounded-md bg-gray-100">
                    <div x-data="secondaryAdsSlider" class="absolute inset-0">
                        <div x-ref="glide" class="glide block h-full">
                            <div class="glide__track h-full sm:rounded-lg" data-glide-el="track">
                                <ul class="glide__slides h-full sm:rounded-lg">
                                    @foreach($this->publicites(AdsZoneEnum::SECOND_TOP_RIGHT) as $pub)
                                        <li class="glide__slide relative flex flex-col items-center justify-center h-full">
                                            <img class="w-full h-full object-cover object-center sm:rounded-lg"
                                                 src="{{ $pub['url'] }}"
                                                 alt="placeholder image">
                                            <a href="{{ route('product-details', $pub['article_uuid']) }}"
                                               class="absolute inset-0">
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <div class="bg-white rounded-md p-4 mx-auto max-w-full">
        <div
            class="max-w-sm grid grid-cols-1 gap-x-8 gap-y-2 md:max-w-full md:grid-cols-3 md:gap-x-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="flow-root">
                        <img class="h-16 w-20"
                             src="{{ asset('images/icon-delivery.svg') }}" alt="">
                    </div>
                </div>
                <div class="mt-3.5 md:mt-0">
                    <h3 class="text-sm font-medium text-gray-900">Livraison gratuite</h3>
                    <p class="mt-1 text-xs text-gray-500 text-wrap">Commandez maintenant et vous obtiendrez la
                        livraison absolument free.
                    </p>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="flow-root">
                        <img class="h-16 w-20"
                             src="{{ asset('images/icon-warranty.svg') }}" alt="">
                    </div>
                </div>
                <div class="mt-3.5 md:mt-0">
                    <h3 class="text-sm font-medium text-gray-900">Paiement 100% sécurisé</h3>
                    <p class="mt-1 text-xs text-gray-500">Garanti des paiements sécurisés</p>
                </div>
            </div>
            <div class="flex">
                <div class="flex-shrink-0">
                    <div class="flow-root">
                        <img class="h-16 w-20"
                             src="{{ asset('images/icon-gift-card.svg') }}" alt="">
                    </div>
                </div>
                <div class="mt-3.5 md:mt-0">
                    <h3 class="text-sm font-medium text-gray-900">Offres quotidiennes</h3>
                    <p class="mt-1 text-xs text-gray-500">Utilisez le code "ALLYEAR" lors de votre achat</p>
                </div>
            </div>
        </div>
    </div>

    <!--   CATÉGORIES   -->
    <div class="mt-2 sm:mt-4 bg-white sm:rounded">
        <div class="bg-secondary sm:rounded-t-lg px-4 py-2 sm:py-2.5">
            <div class="sm:max-w-xl sm:flex sm:items-center sm:justify-between md:max-w-3xl lg:max-w-6xl">
                <div class="flex items-center gap-x-2 xl:px-0">
                    <x-filament::icon
                        icon="heroicon-o-tag"
                        class="size-5 sm:size-6 text-white -scale-x-100"
                    />
                    <h2 class="font-medium tracking-tight text-white">
                        Achetez par catégorie
                    </h2>
                </div>
                <a href="#" class="hidden text-sm font-semibold text-white sm:flex">
                    Parcourir toutes les catégories
                    <span aria-hidden="true"> &rarr;</span>
                </a>
            </div>
        </div>

        <div class="p-4">
            <div class="flex overflow-x-scroll sm:py-2 sm:pb-4 no-scrollbar">
                <div class="flex gap-x-4">
                    @foreach($this->categories as $category)
                        <a href="{{ route('category-details', $category['uuid']) }}"
                           class="relative flex h-[164px] w-[124px] sm:h-40 sm:w-32 flex-col overflow-hidden rounded-lg sm:px-3 pb-2 hover:opacity-90 hover:scale-105 transition-all duration-200 ease-out"
                        >
                                                <span aria-hidden="true" class="absolute inset-0">
                                                    <img src="{{ $category['banniere'] }}"
                                                         alt="{{ $category['nom'] }}"
                                                         class="h-full w-full object-cover object-center">
                                                </span>
                            <span aria-hidden="true"
                                  class="absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-gray-900 opacity-70">
                                                </span>
                            <span class="relative mt-auto text-center font-medium text-white text-sm">
                                                    {{ Str::apa($category['nom']) }}
                                                </span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="mt-2 px-4 sm:hidden">
            <a href="#" class="block text-sm font-semibold text-secondary">
                Parcourir toutes les catégories
                <span aria-hidden="true"> &rarr;</span>
            </a>
        </div>
    </div>

    <!--   LES ARTICLES LES PLUS RECHERCHÉS   -->
    <div class="mt-2 sm:mt-4 bg-white sm:rounded">
        <div class="bg-secondary sm:rounded-t-lg px-4 py-2 sm:py-2.5">
            <div class="flex items-center gap-x-2 xl:px-0">
                <x-filament::icon
                    icon="heroicon-o-tag"
                    class="size-5 sm:size-6 text-white -scale-x-100"
                />
                <h2 class="font-medium tracking-tight text-white">
                    Les plus recherchés
                </h2>
            </div>
        </div>

        <div class="pt-4 px-4">
            <div class="flex overflow-x-scroll py-2 sm:pb-4 no-scrollbar">
                <div class="flex gap-x-4 sm:gap-x-5">
                    @foreach($this->products as $product)
                        <div
                            class="flex flex-col pb-2 w-32 sm:w-44 text-ellipsis overflow-hidden hover:opacity-90 hover:scale-105 hover:shadow transition-all duration-200 ease-out">
                            <a href="{{ route('product-details', $product['uuid']) }}"
                               class="relative flex h-44 w-full sm:h-56 sm:w-full"
                            >
                                <div aria-hidden="true" class="absolute inset-0">
                                    <img src="{{ $product['image_principale'] }}"
                                         alt="{{ $product['nom'] }}"
                                         class="h-full w-full object-cover object-center">
                                </div>
                            </a>
                            <div class="px-2 pt-1.5">
                                <h3 class="text-sm text-gray-800 line-clamp-1">
                                    {{ Str::apa($product['nom']) }}
                                </h3>
                                <div class="flex items-center justify-between">
                                    <p class="mt-px text-sm font-medium text-gray-900">
                                        {{ Number::format(number: $product['prix_original'], locale: 'fr') . ' FCFA' }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{--            <div class="mt-4">--}}
        {{--                <div class="relative overflow-x-auto no-scrollbar py-2">--}}
        {{--                    <div--}}
        {{--                        class="flex gap-x-5 px-4">--}}
        {{--                        @foreach($this->products as $product)--}}
        {{--                            <div wire:key="{{ $product['uuid'] }}"--}}
        {{--                                 class="flex flex-col pb-8 w-44 text-ellipsis overflow-hidden hover:opacity-90 hover:scale-105 hover:shadow transition-all duration-200 ease-out">--}}
        {{--                                <a href="{{ route('product-details', $product['uuid']) }}"--}}
        {{--                                   class="relative group"--}}
        {{--                                   wire:navigate--}}
        {{--                                >--}}
        {{--                                    --}}{{--                                    @if($loop->even)--}}
        {{--                                    --}}{{--                                        <span class="absolute top-px right-1">--}}
        {{--                                    --}}{{--                                            <x-filament::badge--}}
        {{--                                    --}}{{--                                                class="bg-secondary-700 !text-[0.65rem] text-white py-px !-px-2"--}}
        {{--                                    --}}{{--                                            >--}}
        {{--                                    --}}{{--                                                -10%--}}
        {{--                                    --}}{{--                                            </x-filament::badge>--}}
        {{--                                    --}}{{--                                        </span>--}}
        {{--                                    --}}{{--                                    @endif--}}
        {{--                                    <div--}}
        {{--                                        class="flex h-52 w-44 flex-col overflow-hidden rounded-t">--}}
        {{--                                        <img--}}
        {{--                                            src="{{ $product['image_principale'] }}"--}}
        {{--                                            alt="{{ $product['nom'] }}"--}}
        {{--                                            class="h-full w-full object-cover object-center">--}}
        {{--                                    </div>--}}
        {{--                                </a>--}}
        {{--                                            <div class="px-2 pt-1.5">--}}
        {{--                                                <h3 class="text-sm text-gray-800 line-clamp-1">--}}
        {{--                                                    {{ Str::apa($product['nom']) }}--}}
        {{--                                                </h3>--}}
        {{--                                                <div class="flex items-center justify-between">--}}
        {{--                                                    <p class="mt-px text-[0.8rem] font-semibold text-gray-900 tracking-tight">--}}
        {{--                                                        {{ Number::currency(number: $product['prix_original'], in: 'XOF', locale: 'fr') }}--}}
        {{--                                                    </p>--}}
        {{--                                                                                            <x-filament::icon-button--}}
        {{--                                                                                                size="sm"--}}
        {{--                                                                                                color="gray"--}}
        {{--                                                                                                icon="gmdi-add-shopping-cart"--}}
        {{--                                                                                                tooltip="Ajouter au panier"--}}
        {{--                                                                                                @class(['text-secondary-700' => $this->belongsToCart($product['uuid'])])--}}
        {{--                                                                                                                                        wire:click="addToCart('{{ $product['uuid'] }}')"--}}
        {{--                                                                                            />--}}
        {{--                                                </div>--}}
        {{--                                                                                    <p class="mt-px text-2xs line-through text-gray-900">65 000 FCFA</p>--}}
        {{--                                            </div>--}}
        {{--                            </div>--}}
        {{--                        @endforeach--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--            </div>--}}
    </div>

    <!--   PUBLICITES   -->
    <div class="mt-2 sm:mt-4 rounded-lg">
        <div class="mx-auto h-96 sm:h-[28rem] md:h-64 w-full grid md:grid-cols-2 gap-y-2 sm:gap-y-4 md:gap-x-4">
            <div class="relative bg-white rounded-lg flex content-center gap-x-6 lg:gap-x-12 py-8 px-6">
                <div x-data="secondaryAdsSlider" class="absolute inset-0">
                    <div x-ref="glide" class="glide block h-full">
                        <div class="glide__track h-full sm:rounded-lg" data-glide-el="track">
                            <ul class="glide__slides h-full sm:rounded-lg">
                                @foreach($this->publicites(AdsZoneEnum::BOTTOM_LEFT) as $pub)
                                    <li class="glide__slide relative flex flex-col items-center justify-center h-full">
                                        <img class="w-full h-full object-cover object-center sm:rounded-lg"
                                             src="{{ $pub['url'] }}"
                                             alt="">
                                        <a href="{{ route('product-details', $pub['article_uuid']) }}"
                                           class="absolute inset-0"></a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="relative bg-white rounded-lg flex content-center gap-x-6 lg:gap-x-12 py-8 px-6">
                <div x-data="secondaryAdsSlider" class="absolute inset-0">
                    <div x-ref="glide" class="glide block h-full">
                        <div class="glide__track h-full sm:rounded-lg" data-glide-el="track">
                            <ul class="glide__slides h-full sm:rounded-lg">
                                @foreach($this->publicites(AdsZoneEnum::BOTTOM_RIGHT) as $pub)
                                    <li class="glide__slide relative flex flex-col items-center justify-center h-full">
                                        <img class="w-full h-full object-cover object-center sm:rounded-lg"
                                             src="{{ $pub['url'] }}"
                                             alt="placeholder image">
                                        <a href="{{ route('product-details', $pub['article_uuid']) }}"
                                           class="absolute inset-0">
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--   PARTENAIRES   -->
    <div class="mt-2 sm:mt-4 bg-white sm:rounded">
        <div class="bg-secondary sm:rounded-t-lg px-4 py-2 sm:py-2.5">
            <div class="sm:max-w-xl sm:flex sm:items-center sm:justify-center md:max-w-3xl lg:max-w-6xl">
                <div class="flex items-center gap-x-2 xl:px-0">
                    <h2 class="font-medium tracking-tight text-white">
                        Nos Partenaires
                    </h2>
                </div>
            </div>
        </div>

        <div class="py-4 px-2 sm:px-4 relative w-full">
            <div
                class="relative grid justify-items-center grid-cols-4 gap-4 sm:gap-6 sm:px-2 sm:grid-cols-4 md:grid-cols-6 md:gap-4 lg:gap-6">
                @foreach($this->partners as $partner)
                    <div class="relative">
                        <img src="{{ $partner['logo'] }}" alt="{{ $partner['libelle'] }}"
                             class="object-cover object-center h-full w-full rounded-lg">
                        <a href="{{ $partner['url'] }}" class="absolute inset-0 z-50"></a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@assets
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
@endassets

@script
<script>
    Alpine.data('mainAdSlider', () => {
        return {
            init() {
                new Glide(this.$refs.glide, {
                    type: 'carousel',
                    perView: 1,
                    focusAt: 'center',
                    autoplay: 6000,
                }).mount()
            },
        }
    })
    Alpine.data('secondaryAdsSlider', () => {
        return {
            init() {
                new Glide(this.$refs.glide, {
                    type: 'carousel',
                    perView: 1,
                    focusAt: 'center',
                    autoplay: 5000,
                }).mount()
            },
        }
    })
</script>
@endscript