@props(['events' => []])

@php
    $tabs = collect($events['artistas'])
        ->map(function ($festividad) {
            return [
                'id' => $festividad['id'],
                'name' => title_case_spanish(strtolower($festividad['name'])),
                'userFavorites' => $festividad['user_favorites'] ?? [],
            ];
        })
        ->toArray();
    $currentPath = request()->path();
    $segments = explode('/', $currentPath);
    $slug = end($segments);
    $ubicacion = empty($slug) ? env('APP_PAIS', 'eventos') : $slug;
@endphp
<section>
    <header>
        <div class="container">
            <filter-tabs :tabs="{{ json_encode($tabs, JSON_UNESCAPED_UNICODE) }}"></filter-tabs>
        </div>
    </header>
    <section class="bg-neutral-50">
        <div class="container py-6 md:py-12 space-y-4 md:space-y-8">
            <content-tabs slug="{{ request()->segment(1) }}">
                @if ($events['proximos']['data'] == [] && $events['artistGalleryIndex'] == [] && $events['more_events'] == [])
                    <div id="no-event" class="flex justify-center py-9">
                        <p class="text-primary-500 text-3xl font-bold">No hay eventos disponibles en este momento.</p>
                    </div>
                    <script>
                        setTimeout(function() {
                            window.location.href = "{{ url('/') }}";
                        }, 3000);
                    </script>
                @else
                    @if ($events['proximos']['data'] != [])
                        <section class="space-y-4 md:space-y-8">
                            <header class="flex items-center gap-3">
                                <h2 class="text-body md:text-heading-h4 font-bold shrink-0">Próximos Eventos</h2>
                            </header>

                            <section
                                class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-2 gap-y-4 md:gap-x-7 md:gap-y-3">
                                @foreach (array_slice($events['proximos']['data'], 0, 8) 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 block relative z-1">
                                                    <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">
                                                            <x-icon name="ticket" class="size-6" />
                                                            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>
                                                </a>
                                                <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                                    class="z-10 relative pointer-events-auto" />
                                            </div>
                                            <div class="space-y-2">
                                                <div class="flex flex-wrap items-center gap-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">
                                                        <x-icon name="calendar" class="size-4" />
                                                        {{ \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 line-clamp-1">
                                                        {{ $event['address'] }}</p>
                                                    <p class="text-neutral-500 text-subtitle font-medium">Desde
                                                        S/{{ number_format($event['price_partner'], 2) }}</p>
                                                </header>
                                            </div>
                                        </x-card>
                                    </div>
                                @endforeach
                            </section>
                        </section>
                    @endif

                    @if ($events['homeGroups'])
                        @foreach ($events['homeGroups'] as $homeGroup)
                            @if ($homeGroup['products'] != [])
                                <section class="space-y-4 md:space-y-8">
                                    <header class="flex items-center gap-3">
                                        <h2 class="text-body md:text-heading-h4 font-bold shrink-0">
                                            {{ $homeGroup['title'] }}</h2>
                                    </header>

                                    <section
                                        class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-2 gap-y-4 md:gap-x-7 md:gap-y-3">
                                        @foreach (array_slice($homeGroup['products'], 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 block relative z-1">
                                                            <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">
                                                                    <x-icon name="ticket" class="size-6" />
                                                                    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>
                                                        </a>
                                                        <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                                            class="z-10 relative pointer-events-auto" />
                                                    </div>
                                                    <div class="space-y-2">
                                                        <div class="flex flex-wrap items-center gap-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">
                                                                <x-icon name="calendar" class="size-4" />
                                                                {{ \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 line-clamp-1">
                                                                {{ $event['address'] }}</p>

                                                            <p class="text-neutral-500 text-subtitle font-medium">Desde
                                                                S/{{ number_format($event['price_partner'], 2) }}</p>
                                                        </header>
                                                    </div>
                                                </x-card>
                                            </div>
                                        @endforeach
                                    </section>
                                </section>
                            @endif
                        @endforeach
                    @endif

                    @if ($events['artistGalleryIndex'] != [])
                        @foreach ($events['artistGalleryIndex'] as $artista)
                            @if ($artista['publised_products'] != [])
                                <section class="space-y-4 md:space-y-8">
                                    <header class="flex items-center gap-3">
                                        <h2 class="text-body md:text-heading-h4 font-bold shrink-0">
                                            {{ $artista['name'] }}</h2>
                                    </header>
                                    <section
                                        class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-2 gap-y-4 md:gap-x-7 md:gap-y-3">

                                        @foreach (array_slice($artista['publised_products'], 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['categories'][0]['slug'],
                                                            'slug' => $event['slug'],
                                                        ]) }}"
                                                            class="group block relative z-1">
                                                            <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">
                                                                    <x-icon name="ticket" class="size-6" />
                                                                    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>
                                                        </a>
                                                        <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                                            class="z-10 relative pointer-events-auto" />
                                                    </div>
                                                    <div class="space-y-2">
                                                        <div class="flex flex-wrap items-center gap-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">
                                                                <x-icon name="calendar" class="size-4" />
                                                                {{ \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['categories'][0]['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['categories'][0]['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 line-clamp-1">
                                                                {{ $event['address'] }}</p>

                                                            <p class="text-neutral-500 text-subtitle font-medium">Desde
                                                                S/{{ number_format($event['price_partner'], 2) }}</p>
                                                        </header>
                                                    </div>
                                                </x-card>
                                            </div>
                                        @endforeach
                                    </section>
                                </section>
                            @endif
                        @endforeach
                    @endif

                    @if ($events['more_events'] != [])
                        <section class="space-y-4 md:space-y-8">
                            <header class="flex items-center gap-3">
                                <h2 class="text-body md:text-heading-h4 font-bold shrink-0">Otros eventos</h2>
                            </header>
                            <section
                                class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-2 gap-y-4 md:gap-x-7 md:gap-y-3">
                                @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 block relative z-1">
                                                    <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">
                                                            <x-icon name="ticket" class="size-6" />
                                                            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>
                                                </a>
                                                <x-favoritos-boton :event="$event" :favoritos="$events['userFavorites']"
                                                    class="z-10 relative pointer-events-auto" />
                                            </div>
                                            <div class="space-y-2">
                                                <div class="flex flex-wrap items-center gap-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">
                                                        <x-icon name="calendar" class="size-4" />
                                                        {{ \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">
                                                        {{ $event['address'] }}
                                                    </p>
                                                    <p class="text-neutral-500 text-subtitle font-medium">Desde
                                                        S/{{ number_format($event['price_partner'], 2) }}</p>
                                                </header>
                                            </div>
                                        </x-card>
                                    </div>
                                @endforeach
                            </section>
                        </section>
                    @endif

                    <div class="pt-8 text-center">
                        @php
                            $currentPath = request()->path();
                            $segments = explode('/', $currentPath);
                            $slug = end($segments);
                            $ubicacion = empty($slug) ? 'todos' : $slug;

                        @endphp
                        <a href="{{ route('all.events', ['ubicacion' => $ubicacion]) }}"
                            class="btn btn-primary relative">
                            Mostrar más eventos
                        </a>
                    </div>
                @endif

            </content-tabs>
        </div>
    </section>
</section>