@props(['events' => []])
<div class="container">
    <div class="flex items-center gap-2 overflow-x-auto w-full no-scrollbar overscroll-contain">
        <a href="{{ route('home.todos') }}"
            class="whitespace-nowrap px-6 text-xs [box-shadow:0px_4px_8px_var(--color-secondary-blue-500)] md:text-xl font-semibold text-neutral-50 bg-secondary-blue-500 inline-flex items-center justify-center rounded-t-lg p-3 ">
            Todos
        </a>
        @php
            $currentPath = request()->path();
            $segments = explode('/', $currentPath);
            $slug = end($segments);
            $ubicacion = empty($slug) ? env('APP_PAIS') : $slug;
        @endphp
        @foreach ($events['artistas'] as $festividad)
            <a href="{{ route('detalle-highlight', [
                'ubicacion' => $ubicacion,
                'slug_highlight' => $festividad['slug'],
            ]) }}"
                class="whitespace-nowrap px-6 text-xs md:text-xl font-semibold text-neutral-500 bg-transparent inline-flex items-center justify-center rounded-t-lg p-3 ">
                {{ ucfirst(strtolower($festividad['name'])) }}
            </a>
        @endforeach
    </div>
</div>
<section class="bg-neutral-50">
    <div class="container py-6 md:py-12 space-y-8">
        <section class="space-y-8">
            <header class="flex items-center gap-3">
                <h1 class="text-heading-h4 font-bold shrink-0">Eventos</h1>
            </header>
            <section class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
                @foreach (array_slice($events['proximos']['data'], 0, 8) as $event)
                    {{-- @dd($event) --}}
                    <div class="eventsDataContainer event-item mostrarValor">
                        <x-card class="space-y-3">
                            <div class="relative">
                                <a href="{{ route('detalle-evento', [
                                    'ubicacion' => $ubicacion,
                                    'slug_categoria' => $event['product_categorie']['category']['slug'],
                                    'slug' => $event['slug'],
                                ]) }}"
                                    class="group relative">
                                    <div
                                        class="absolute rounded-sm inset-0 flex items-center justify-center bg-primary-100/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                        <div role="button" class="btn btn-sm btn-primary">
                                            <svg class="size-6">
                                                <use xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                            </svg>
                                            Comprar
                                        </div>
                                    </div>
                                    <picture>
                                        @php
                                            $super_img_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                            $poster_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                        @endphp
                                        <source media="(min-width: 1020px)"
                                            srcset="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}">
                                        <source media="(max-width: 1021px)"
                                            srcset="{{ !empty($event['poster']) ? e($poster_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}">
                                        <img class="w-full aspect-square rounded-sm"
                                            src="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}"
                                            alt="{{ $event['title_small'] }}" loading="lazy" decoding="async">
                                    </picture>
                                    <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                        class="z-20 relative pointer-events-auto" />
                                </a>
                            </div>
                            <div class="space-y-2">
                                <div class=" flex items-center gap-x-2">
                                    <div
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-caption leading-none font-medium px-1 py-0.5 text-primary-200 bg-primary-50 rounded-full">
                                        <svg class="size-4">
                                            <use xlink:href="{{ asset('/assets/sprite.svg#calendar') }}" />
                                        </svg>
                                        {{ \Carbon\Carbon::parse($event['fecha_evento'])->format('d/m/Y') }} •
                                        {{ \Carbon\Carbon::parse($event['hora_evento'])->format('g:i A') }}
                                    </div>
                                    <div aria-label="Categoría: {{ $event['product_categorie']['category']['name'] }}"
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap ring ring-neutral-100 text-caption leading-none font-medium px-1 py-0.5 text-neutral-400 bg-transparent rounded-full">
                                        {{ $event['product_categorie']['category']['name'] }}
                                    </div>
                                </div>
                                <header class="flex flex-col gap-1.5">
                                    <h2 class="text-neutral-500 text-body font-bold line-clamp-1">
                                        {{ $event['title_small'] }}
                                    </h2>
                                    <p class="text-neutral-300 text-subtitle font-medium">Estadio Nacional</p>
                                    <p class="text-neutral-500 text-subtitle font-medium">Desde S/123.00</p>
                                </header>
                            </div>
                        </x-card>
                    </div>
                @endforeach
            </section>
        </section>

        {{-- Home Group --}}
        <section class="space-y-8">
            @foreach ($events['homeGroups'] as $event)
                @if ($event['id'] == 1 || ($event['id'] != 1 && $event['products'] && count($event['products']) > 0))
                    <header class="flex items-center gap-3">
                        <h2 class="text-heading-h4 font-bold shrink-0">{{ $event['title'] }}</h2>
                    </header>
                    @if ($event['id'] == 1 && $events['destacados'] && count($events['destacados']) > 0)
                        <section class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
                            @foreach ($events['destacados']['data'] as $destacados)
                                <div class="eventsDataContainer event-item mostrarValor">
                                    <x-card class="space-y-3">
                                        <div class="relative">
                                            <a href="{{ route('detalle-evento', [
                                                'ubicacion' => $ubicacion,
                                                'slug_categoria' => $destacados['product_categorie']['category']['slug'],
                                                'slug' => $destacados['slug'],
                                            ]) }}"
                                                class="group relative">
                                                <div
                                                    class="absolute rounded-sm inset-0 flex items-center justify-center bg-primary-100/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                                    <div role="button" class="btn btn-sm btn-primary">
                                                        <svg class="size-6">
                                                            <use
                                                                xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                                        </svg>
                                                        Comprar
                                                    </div>
                                                </div>
                                                <picture>
                                                    @php
                                                        $super_img_url =
                                                            env('CDN_URL') .
                                                            '/public/products/' .
                                                            $destacados['id'] .
                                                            '/' .
                                                            $destacados['poster'];
                                                        $poster_url =
                                                            env('CDN_URL') .
                                                            '/public/destacadoss/' .
                                                            $destacados['id'] .
                                                            '/' .
                                                            $destacados['poster'];
                                                    @endphp
                                                    <source media="(min-width: 1020px)"
                                                        srcset="{{ !empty($destacados['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}">
                                                    <source media="(max-width: 1021px)"
                                                        srcset="{{ !empty($destacados['poster']) ? e($poster_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}">
                                                    <img class="w-full aspect-square rounded-sm"
                                                        src="{{ !empty($destacados['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}"
                                                        alt="{{ $destacados['title_small'] }}" loading="lazy"
                                                        decoding="async">
                                                </picture>
                                                <x-favoritos-boton :event="$destacados" :favoritos="$events['userFavorites']"
                                                    class="z-20 relative pointer-events-auto" />
                                            </a>
                                        </div>
                                        <div class="space-y-2">
                                            <div class=" flex items-center gap-x-2">
                                                <div
                                                    class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-caption leading-none font-medium px-1 py-0.5 text-primary-200 bg-primary-50 rounded-full">
                                                    <svg class="size-4">
                                                        <use xlink:href="{{ asset('/assets/sprite.svg#calendar') }}" />
                                                    </svg>
                                                    {{ \Carbon\Carbon::parse($destacados['fecha_evento'])->format('d/m/Y') }}
                                                    •
                                                    {{ \Carbon\Carbon::parse($destacados['hora_evento'])->format('g:i A') }}
                                                </div>
                                                <div aria-label="Categoría: {{ $destacados['product_categorie']['category']['name'] }}"
                                                    class="inline-flex items-center gap-x-1 whitespace-nowrap ring ring-neutral-100 text-caption leading-none font-medium px-1 py-0.5 text-neutral-400 bg-transparent rounded-full">
                                                    {{ $destacados['product_categorie']['category']['name'] }}
                                                </div>
                                            </div>
                                            <header class="flex flex-col gap-1.5">
                                                <h2 class="text-neutral-500 text-body font-bold line-clamp-1">
                                                    {{ $destacados['title_small'] }}
                                                </h2>
                                                <p class="text-neutral-300 text-subtitle font-medium">Estadio Nacional
                                                </p>
                                                <p class="text-neutral-500 text-subtitle font-medium">Desde S/123.00</p>
                                            </header>
                                        </div>
                                    </x-card>
                                </div>
                            @endforeach
                        </section>
                    @endif
                    <section class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
                        @foreach ($event['products'] as $product)
                            <div class="eventsDataContainer event-item mostrarValor">
                                <x-card class="space-y-3">
                                    <div class="relative">
                                        <a href="{{ route('detalle-evento', [
                                            'ubicacion' => $ubicacion,
                                            'slug_categoria' => $product['product_categorie']['category']['slug'],
                                            'slug' => $product['slug'],
                                        ]) }}"
                                            class="group relative">
                                            <div
                                                class="absolute rounded-sm inset-0 flex items-center justify-center bg-primary-100/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                                <div role="button" class="btn btn-sm btn-primary">
                                                    <svg class="size-6">
                                                        <use xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                                    </svg>
                                                    Comprar
                                                </div>
                                            </div>
                                            <picture>
                                                @php
                                                    $super_img_url =
                                                        env('CDN_URL') .
                                                        '/public/products/' .
                                                        $product['id'] .
                                                        '/' .
                                                        $product['poster'];
                                                    $poster_url =
                                                        env('CDN_URL') .
                                                        '/public/products/' .
                                                        $product['id'] .
                                                        '/' .
                                                        $product['poster'];
                                                @endphp
                                                <source media="(min-width: 1020px)"
                                                    srcset="{{ !empty($product['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}">
                                                <source media="(max-width: 1021px)"
                                                    srcset="{{ !empty($product['poster']) ? e($poster_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}">
                                                <img class="w-full aspect-square rounded-sm"
                                                    src="{{ !empty($product['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}"
                                                    alt="{{ $product['title_small'] }}" loading="lazy"
                                                    decoding="async">
                                            </picture>
                                            <x-favoritos-boton :event="$product" :favoritos="$events['userFavorites']"
                                                class="z-20 relative pointer-events-auto" />
                                        </a>
                                    </div>
                                    <div class="space-y-2">
                                        <div class=" flex items-center gap-x-2">
                                            <div
                                                class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-caption leading-none font-medium px-1 py-0.5 text-primary-200 bg-primary-50 rounded-full">
                                                <svg class="size-4">
                                                    <use xlink:href="{{ asset('/assets/sprite.svg#calendar') }}" />
                                                </svg>
                                                {{ \Carbon\Carbon::parse($product['fecha_evento'])->format('d/m/Y') }}
                                                •
                                                {{ \Carbon\Carbon::parse($product['hora_evento'])->format('g:i A') }}
                                            </div>
                                            <div aria-label="Categoría: {{ $product['product_categorie']['category']['name'] }}"
                                                class="inline-flex items-center gap-x-1 whitespace-nowrap ring ring-neutral-100 text-caption leading-none font-medium px-1 py-0.5 text-neutral-400 bg-transparent rounded-full">
                                                {{ $product['product_categorie']['category']['name'] }}
                                            </div>
                                        </div>
                                        <header class="flex flex-col gap-1.5">
                                            <h2 class="text-neutral-500 text-body font-bold line-clamp-1">
                                                {{ $product['title_small'] }}
                                            </h2>
                                            <p class="text-neutral-300 text-subtitle font-medium">Estadio Nacional</p>
                                            <p class="text-neutral-500 text-subtitle font-medium">Desde S/123.00</p>
                                        </header>
                                    </div>
                                </x-card>
                            </div>
                        @endforeach
                    </section>
                @endif
            @endforeach
        </section>


        <section class="space-y-8">
            <header class="flex items-center gap-3">
                <h1 class="text-heading-h4 font-bold shrink-0">Próximos eventos</h1>
                <a href="/"
                    class="max-md:ml-auto text-primary-200 shrink-0 inline-flex text-subtitle md:text-body font-semibold hover:underline-offset-2 hover:underline">Ver
                    más</a>
            </header>
            <section class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
                @foreach (array_slice($events['destacados']['data'], 0, 4) as $event)
                    <div class="eventsDataContainer event-item mostrarValor">
                        <x-card class="space-y-3">
                            <div class="relative">
                                <a href="{{ route('detalle-evento', [
                                    'ubicacion' => $ubicacion,
                                    'slug_categoria' => $event['product_categorie']['category']['slug'],
                                    'slug' => $event['slug'],
                                ]) }}"
                                    class="group relative">
                                    <div
                                        class="absolute rounded-sm inset-0 flex items-center justify-center bg-primary-100/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                        <div role="button" class="btn btn-sm btn-primary">
                                            <svg class="size-6">
                                                <use xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                            </svg>
                                            Comprar
                                        </div>
                                    </div>
                                    <picture>
                                        @php
                                            $super_img_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                            $poster_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                        @endphp
                                        <source media="(min-width: 1020px)"
                                            srcset="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}">
                                        <source media="(max-width: 1021px)"
                                            srcset="{{ !empty($event['poster']) ? e($poster_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}">
                                        <img class="w-full aspect-square rounded-sm"
                                            src="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}"
                                            alt="{{ $event['title_small'] }}" loading="lazy" decoding="async">
                                    </picture>
                                    <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                        class="z-20 relative pointer-events-auto" />
                                </a>
                            </div>
                            <div class="space-y-2">
                                <div class=" flex items-center gap-x-2">
                                    <div
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-caption leading-none font-medium px-1 py-0.5 text-primary-200 bg-primary-50 rounded-full">
                                        <svg class="size-4">
                                            <use xlink:href="{{ asset('/assets/sprite.svg#calendar') }}" />
                                        </svg>
                                        {{ \Carbon\Carbon::parse($event['fecha_evento'])->format('d/m/Y') }} •
                                        {{ \Carbon\Carbon::parse($event['hora_evento'])->format('g:i A') }}
                                    </div>
                                    <div aria-label="Categoría: {{ $event['product_categorie']['category']['name'] }}"
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap ring ring-neutral-100 text-caption leading-none font-medium px-1 py-0.5 text-neutral-400 bg-transparent rounded-full">
                                        {{ $event['product_categorie']['category']['name'] }}
                                    </div>
                                </div>
                                <header class="flex flex-col gap-1.5">
                                    <h2 class="text-neutral-500 text-body font-bold line-clamp-1">
                                        {{ $event['title_small'] }}
                                    </h2>
                                    <p class="text-neutral-300 text-subtitle font-medium">Estadio Nacional</p>
                                    <p class="text-neutral-500 text-subtitle font-medium">Desde S/123.00</p>
                                </header>
                            </div>
                        </x-card>
                    </div>
                @endforeach
            </section>
        </section>
        <section class="space-y-8">
            <header class="flex items-center gap-3">
                <h1 class="text-heading-h4 font-bold shrink-0">Otros eventos</h1>
                <a href="/"
                    class="max-md:ml-auto text-primary-200 shrink-0 inline-flex text-subtitle md:text-body font-semibold hover:underline-offset-2 hover:underline">Ver
                    más</a>
            </header>
            <section class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
                @foreach (array_slice($events['more_events'], 0, 4) as $event)
                    <div class="eventsDataContainer event-item mostrarValor">
                        <x-card class="space-y-3">
                            <div class="relative">
                                <a href="{{ route('detalle-evento', [
                                    'ubicacion' => $ubicacion,
                                    'slug_categoria' => $event['product_categorie']['category']['slug'],
                                    'slug' => $event['slug'],
                                ]) }}"
                                    class="group relative">
                                    <div
                                        class="absolute rounded-sm inset-0 flex items-center justify-center bg-primary-100/50 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                                        <div role="button" class="btn btn-sm btn-primary">
                                            <svg class="size-6">
                                                <use xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                            </svg>
                                            Comprar
                                        </div>
                                    </div>
                                    <picture>
                                        @php
                                            $super_img_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                            $poster_url =
                                                env('CDN_URL') .
                                                '/public/products/' .
                                                $event['id'] .
                                                '/' .
                                                $event['poster'];
                                        @endphp
                                        <source media="(min-width: 1020px)"
                                            srcset="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}">
                                        <source media="(max-width: 1021px)"
                                            srcset="{{ !empty($event['poster']) ? e($poster_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}">
                                        <img class="w-full aspect-square rounded-sm"
                                            src="{{ !empty($event['poster']) ? e($super_img_url) : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}"
                                            alt="{{ $event['title_small'] }}" loading="lazy" decoding="async">
                                    </picture>
                                    <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                        class="z-20 relative pointer-events-auto" />
                                </a>
                            </div>
                            <div class="space-y-2">
                                <div class=" flex items-center gap-x-2">
                                    <div
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-caption leading-none font-medium px-1 py-0.5 text-primary-200 bg-primary-50 rounded-full">
                                        <svg class="size-4">
                                            <use xlink:href="{{ asset('/assets/sprite.svg#calendar') }}" />
                                        </svg>
                                        {{ \Carbon\Carbon::parse($event['fecha_evento'])->format('d/m/Y') }} •
                                        {{ \Carbon\Carbon::parse($event['hora_evento'])->format('g:i A') }}
                                    </div>
                                    <div aria-label="Categoría: {{ $event['product_categorie']['category']['name'] }}"
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap ring ring-neutral-100 text-caption leading-none font-medium px-1 py-0.5 text-neutral-400 bg-transparent rounded-full">
                                        {{ $event['product_categorie']['category']['name'] }}
                                    </div>
                                </div>
                                <header class="flex flex-col gap-1.5">
                                    <h2 class="text-neutral-500 text-body font-bold line-clamp-1">
                                        {{ $event['title_small'] }}
                                    </h2>
                                    <p class="text-neutral-300 text-subtitle font-medium">Estadio Nacional</p>
                                    <p class="text-neutral-500 text-subtitle font-medium">Desde S/123.00</p>
                                </header>
                            </div>
                        </x-card>
                    </div>
                @endforeach
            </section>
        </section>
    </div>
</section>


{{-- <a href="{{ route('detalle-highlight', [
                    'ubicacion' => $ubicacion,
                    'slug_highlight' => $festividad['slug'],
                ]) }}"
                    class="tab-link flex-shrink-0 px-3 py-2 mr-2 {{ $activeSlug === $festividad['slug'] ? 'border-b-2 border-primary-200' : '' }}"
                    data-tab="{{ $festividad['slug'] }}" data-tab="{{ $festividad['slug'] }}"
                    class="tab-link flex-shrink-0 px-3 mr-2 {{ $activeSlug === $festividad['slug'] ? 'border-b-2 border-primary-200' : '' }}"
                    data-tab="{{ $festividad['slug'] }}">
                    {{ $festividad['name'] }}
                </a> --}}


{{-- <script>
    document.addEventListener('DOMContentLoaded', function() {
        const scrollLeftBtn = document.getElementById('scrollLeftBtn');
        const scrollRightBtn = document.getElementById('scrollRightBtn');
        const tabsSlider = document.getElementById('tabContainer');

        const scrollAmount = 200; // Puedes ajustar la cantidad de scroll

        scrollLeftBtn?.addEventListener('click', () => {
            tabsSlider.scrollBy({
                left: -scrollAmount,
                behavior: 'smooth'
            });
        });

        scrollRightBtn?.addEventListener('click', () => {
            tabsSlider.scrollBy({
                left: scrollAmount,
                behavior: 'smooth'
            });
        });
    });
</script> --}}