@php
$currency = $brandCurrency;
@endphp
<div>
    @if (!$banners->isEmpty() || !$products->isEmpty())
    <div class="banner-slider relative max-w-screen-sm lg:max-w-screen-xl max-h-[450px] mt-[190px] mx-auto mb-3  md:mt-[140px] lg:mt-[140px] lg:mb-2"
        data-carousel="static">
        <div class="blaze-slider mx-auto max-w-screen-sm md:max-w-screen-xl max-h-[450px]">
            <div class="blaze-container">
                <div class="blaze-track-container">
                    <div class="blaze-track max-h-[300px] md:max-h-[375px]">
                        @foreach ($products as $product)
                        <div class="elemento relative rounded-lg overflow-hidden min-h-[150px] md:min-h-72">
                            <img class="h-full w-full absolute object-cover object-center" loading="lazy"
                                src="{{ asset(config('app.domain') . '/' . $product['image']['high']) }}"
                                alt="{{ $product->name }}">
                            <div class="relative h-full flex flex-col justify-end">
                                @if ($product->new)
                                <div
                                    class="absolute inline-flex items-center mt-2 end-0 top-0 bg-red-200 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-l dark:bg-red-900 dark:text-red-200">
                                    <svg viewBox="0 0 611.999 611.999" fill="currentColor" class="w-4 h-4 mr-1"
                                        xmlns="http://www.w3.org/2000/svg" xml:space="preserve">

                                        <path
                                            d="M 193.787 592.473 C 199.765 595.651 299.332 630.788 407.076 591.474 C 455.72 573.724 490.84 539.312 496.674 445.18 C 498.825 416.416 495.599 376.146 479.468 325.329 C 458.727 260.923 395.498 183.59 395.86 189.442 C 400.159 258.936 341.25 361.993 326.369 322.25 C 320.426 306.376 343.874 240.305 343.874 206.869 C 343.874 151.204 345.277 81.03 309.672 34.466 C 300.413 22.357 289.579 11.042 277.149 1.393 C 272.649 -2.101 266.126 1.411 266.538 7.093 C 269.272 44.829 266.795 152.978 171.914 282.182 C 85.885 402.033 119.221 494.078 131.05 519.008 C 153.666 566.767 162.979 576.092 193.787 592.473 Z">
                                        </path>
                                    </svg>
                                    <span>
                                        NUEVO
                                    </span>
                                </div>
                                @endif
                                <div
                                    class="flex flex-col justify-between p-2 w-full bg-white bg-opacity-60 dark:bg-opacity-60 dark:bg-gray-800 px-7 min-h-[150px]">
                                    <div class="flex flex-col">
                                        <div
                                            class="mb-1 font-bold text-sm md:text-xl text-black dark:text-white line-clamp-1 overflow-hidden">
                                            {{ $product->name }}</div>
                                        <div
                                            class="mb-2 text-xs text-gray-900 dark:text-gray-300 line-clamp-2 overflow-hidden">
                                            {!! nl2br($product->description) !!}
                                        </div>
                                        <div class="flex flex-wrap gap-2">
                                            @foreach (collect($product->tags) as $tag)
                                            <span
                                                class="flex text-center line-clamp-1 overflow-hidden bg-gray-200 text-gray-800 text-xs px-2 py-1 rounded-full dark:bg-gray-800 dark:text-gray-200">
                                                {{ $tag['value'] }}
                                            </span>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="flex flex-row justify-between items-center mt-2">
                                        <div class="font-bold text-black dark:text-white">
                                            @if ($product->price != 0)
                                            {{ $currency['symbol'] }} {{ number_format($product->price,
                                            $currency['decimals'], $currency['decimal_separator'],
                                            $currency['thousands_separator']) }}
                                            @endif
                                        </div>
                                        <div>
                                            <button type="button"
                                                wire:click="$dispatch('show-modal-product', { product: '{{ $product->id }}' })"
                                                class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-2.5 py-1.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                                                Ver Producto
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        @endforeach
                        @foreach ($banners as $banner)
                        @if ($banner->Imagen && $banner->ImagenMobile)
                        @if ($isMobile)
                        <picture class="elemento">
                            <img src="{{ asset($banner->ImagenMobile) }}" class="h-full rounded-lg m-auto" alt="imagen">
                        </picture>
                        @elseif (!$isMobile)
                        <picture class="elemento">
                            <img src="{{ asset($banner->Imagen) }}" class="h-full rounded-lg m-auto" alt="imagen">
                        </picture>
                        @endif
                        @elseif ($banner->Imagen && !$banner->ImagenMobile && !$isMobile)
                        <picture class="elemento">
                            <img src="{{ asset($banner->Imagen) }}" class="h-full rounded-lg m-auto" alt="imagen">
                        </picture>
                        @elseif (!$banner->Imagen && $banner->ImagenMobile && $isMobile)
                        <picture class="elemento">
                            <img src="{{ asset($banner->ImagenMobile) }}" class="h-full rounded-lg m-auto" alt="imagen">
                        </picture>
                        @endif
                        @endforeach
                    </div>
                </div>

                <!-- navigation buttons -->
                <button class="blaze-prev" aria-label="prev">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                    </svg>

                </button>
                <button class="blaze-next" aria-label="next">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                    </svg>

                </button>
            </div>
        </div>

        <style>
            .blaze-prev {
                background-color: #fff;
                border-radius: 0 50px 50px 0;
                padding: 0px;
                transition: padding .3s;
                position: absolute;
                width: 25px;
                height: 40px;
                cursor: pointer;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                box-shadow: 0 5px 10px -4px rgba(0, 0, 0, .6);
            }

            .blaze-next {
                background-color: #fff;
                border-radius: 0 50px 50px 0;
                padding: 0px;
                transition: padding .3s;
                position: absolute;
                width: 25px;
                height: 40px;
                cursor: pointer;
                right: 0;
                top: 50%;
                transform: translateY(-50%) rotate(180deg);
                box-shadow: 0 -5px 10px -4px rgba(0, 0, 0, .6);
            }

            .blaze-track {
                margin-left: 0%;
                margin-right: 0%;
            }

            @media only screen and (min-width : 1024px) {

                .blaze-track {
                    margin-left: -85%;
                    margin-right: -85%;
                }


                .blaze-prev {
                    padding: 6px;
                    width: 40px;
                }

                .blaze-next {
                    padding: 6px;
                    width: 40px;
                }
            }
        </style>
    </div>
    @endif
</div>