@extends('layouts.app')
@section('title', 'Inicio')
@section('body')
    <header class="relative h-48 bg-neutral-100">
        <div aria-hidden="true" role="hero" class="absolute inset-0 overflow-clip z-[1]">
            <div
                class="absolute pointer-events-none inset-0 scale-110 before:content-[''] before:absolute before:inset-0 before:bg-neutral-600/30 before:backdrop-blur-md before:z-2">
                <img src="{{ env('CDN_URL') }}/public/artists/{{ $artist['image_iconn'] }}" alt="Imagen principal del evento"
                    decoding="async" loading="lazy"
                    class="size-full relative z-[1] object-cover object-center pointer-events-none">
            </div>
        </div>
        <div class="container relative z-[3] h-full flex items-end lg:items-center">
            <div class="flex items-end relative gap-6">
                <img src="{{ env('CDN_URL') }}/public/artists/{{ $artist['image_iconn'] }}"
                    class="size-32 sm:size-40 shrink-0 rounded-lg absolute top-1/2 mt-4 -translate-y-1/2 object-center object-cover aspect-square border-2 border-white lg:hidden"
                    decoding="async" loading="lazy" alt="Imagen pequeña del evento">
                <h1
                    class="text-neutral-50 font-bold text-body md:text-lg lg:text-heading-h4 w-full max-w-lg text-balance pl-36 sm:pl-44 lg:p-0 max-lg:pb-6">
                    {{ $artist['name'] }}
                </h1>
            </div>
        </div>
    </header>
    <section>
        <div
            class="container py-12 grid lg:gap-8 xl:gap-12 lg:grid-cols-[1fr_--spacing(72)] xl:grid-cols-[1fr_--spacing(96)]">
            <section x-data="{
                activeTab: 'events',
                init() {
                    // windows media query
                    if (window.matchMedia('(min-width: 1024px)').matches) {
                        this.activeTab = 'events';
                    }
            
                    window.addEventListener('resize', () => {
                        if (window.matchMedia('(min-width: 1024px)').matches) {
                            this.activeTab = 'events';
                        }
                    });
                }
            }" init="init()">
                <header class="max-sm:mt-6 max-lg:mt-9">
                    <div role="tablist" class="flex items-center gap-1 px-1.5 lg:hidden">
                        <button type="button" role="tab" x-bind:aria-selected="activeTab == 'events' ? true : false"
                            x-on:click="activeTab = 'events'"
                            class="whitespace-nowrap text-body font-semibold inline-flex items-center justify-center rounded-t-lg p-3"
                            x-bind:class="{
                                'bg-secondary-blue-500 text-neutral-50 shadow-[0px_4px_8px_--alpha(var(--color-secondary-blue-200)/30%)]': activeTab ==
                                    'events',
                                'bg-transparent text-neutral-500 shadow-none hover:bg-secondary-blue-100/30': activeTab !=
                                    'events'
                            }">
                            Eventos</button>
                        <button type="button" role="tab" x-bind:aria-selected="activeTab == 'about' ? true : false"
                            x-on:click="activeTab = 'about'"
                            class="whitespace-nowrap text-body font-semibold text-neutral-500 bg-transparent inline-flex items-center justify-center rounded-t-lg p-3 hover:bg-secondary-blue-100/30 transition-colors duration-200"
                            x-bind:class="{
                                'bg-secondary-blue-500 text-neutral-50 shadow-[0px_4px_8px_--alpha(var(--color-secondary-blue-200)/30%)]': activeTab ==
                                    'about',
                                'bg-transparent text-neutral-500 shadow-none hover:bg-secondary-blue-100/30': activeTab !=
                                    'about'
                            }">Sobre
                            el artista</button>
                    </div>
                    <h2 class="text-heading-h3 font-bold text-neutral-500 max-lg:hidden">Eventos</h2>
                </header>
                <div x-show="activeTab == 'events'" class="mt-4" role="tabpanel">
                    <div class="grid gap-2">
                        <div class="text-neutral-500 text-body"><span class="font-semibold">{{ $products->count() }}
                                {{ $products->count() == 1 ? 'Evento' : 'Eventos' }}</span> en total</div>
                        @foreach ($products as $event)
                            <article
                                class="group grid grid-cols-[auto_1fr_auto] gap-4 items-center p-4 bg-white hover:bg-white/80 transition-colors duration-200 rounded-lg border border-primary-100">
                                <a href="{{ route('detalle-evento', ['ubicacion' => env('APP_PAIS'), 'slug_categoria' => $event['productCategorie']['category']['slug'], 'slug' => $event['slug']]) }}"
                                    class="shrink-0 w-24 md:size-32 block focus:outline-none">
                                    @php
                                        $super_img_url =
                                            env('CDN_URL') .
                                            '/public/products/' .
                                            $event['id'] .
                                            '/' .
                                            $event['ticketing_super_img'];
                                        $poster_url =
                                            env('CDN_URL') .
                                            '/public/products/' .
                                            $event['id'] .
                                            '/' .
                                            $event['poster'] .
                                            '?w=150&h=150&fit=crop';
                                    @endphp
                                    <source media="(min-width: 640px)"
                                        srcset="{{ !empty($event['poster']) ? $poster_url : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}" />
                                    <source media="(max-width: 641px)"
                                        srcset="{{ !empty($event['ticketing_super_img']) ? $super_img_url : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault2.jpg' }}" />
                                    <img class="rounded-md aspect-[2/3] md:aspect-square object-cover object-center size-full"
                                        src="{{ !empty($event['poster']) ? $poster_url : env('VITE_CDN_URL_ASSETS') . '/default/imageDefault.jpg' }}"
                                        alt="Imagen de {{ $event['title_small'] }}" loading="lazy" decoding="async" />
                                </a>
                                <div class="space-y-1.5">
                                    <h2
                                        class="text-body font-medium text-neutral-600 group-hover:text-primary-400 transition-colors duration-200">
                                        <a href="{{ route('detalle-evento', ['ubicacion' => env('APP_PAIS'), 'slug_categoria' => $event['productCategorie']['category']['slug'], 'slug' => $event['slug']]) }}"
                                            class="line-clamp-2">
                                            {{ $event['title_small'] }}
                                        </a>
                                    </h2>
                                    <div
                                        class="inline-flex items-center gap-x-1 whitespace-nowrap tabular-nums text-subtitle 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>
                                    <p class="text-body text-neutral-300 font-semibold">{{ $artist['name'] }}</p>
                                    <p class="text-subtitle text-neutral-300">{{ $event['address'] }}</p>
                                </div>
                                <div class="hidden lg:flex flex-col gap-1 items-center">
                                    <a href="{{ route('detalle-evento', ['ubicacion' => env('APP_PAIS'), 'slug_categoria' => $event['productCategorie']['category']['slug'], 'slug' => $event['slug']]) }}"
                                        class="btn btn-sm btn-primary">
                                        Ver entradas
                                    </a>
                                    <span class="text-subtitle text-neutral-500">Desde S/.
                                        {{ number_format($event['price_normal'], 2) }}</span>
                                </div>
                            </article>
                        @endforeach
                    </div>
                    <footer class="flex items-center justify-center mt-8">
                        @php
                            $totalPages = $products->lastPage(); // Total de páginas (109)
                            $currentPage = $products->currentPage(); // Página actual
                            $start = max(1, $currentPage - 2);
                            $end = min($totalPages, $currentPage + 2);
                        @endphp
                        <nav aria-label="pagination">
                            <ul class="flex items-center gap-x-1">
                                <li>
                                    <a href="{{ $products->previousPageUrl() }}" aria-label="anterior"
                                        @class([
                                            'flex items-center justify-center size-8 rounded-lg bg-transparent hover:bg-neutral-100/50 transition-colors duration-200',
                                            'pointer-events-none text-neutral-200' => $products->onFirstPage(),
                                            'text-primary-200' => !$products->onFirstPage(),
                                        ])>
                                        <x-icon name="chevron-left" class="size-4" />
                                        <span class="sr-only">Anterior</span>
                                    </a>
                                </li>
                                @if ($start > 1)
                                    <li>
                                        <a href="{{ $products->url(1) }}"
                                            class="tabular-nums flex items-center justify-center size-8 rounded-lg text-neutral-600 bg-transparent hover:bg-neutral-100/50 transition-colors duration-200">1</a>
                                    </li>
                                    @if ($start > 2)
                                        <li>
                                            <span aria-hidden="true"
                                                class="text-nuetral-600 font-bold text-body flex items-end justify-center size-8 rounded-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="size-6">
                                                    <circle cx="12" cy="12" r="1" />
                                                    <circle cx="19" cy="12" r="1" />
                                                    <circle cx="5" cy="12" r="1" />
                                                </svg>
                                                <span class="sr-only">Más páginas</span>
                                            </span>
                                        </li>
                                    @endif
                                @endif
                                @for ($i = $start; $i <= $end; $i++)
                                    <li>
                                        <a href="{{ $products->url($i) }}"
                                            @if ($i == $currentPage) aria-current="page" @endif
                                            @class([
                                                'tabular-nums flex items-center justify-center size-8 rounded-lg hover:bg-neutral-100/50 transition-colors duration-200',
                                                'bg-primary-200 text-white pointer-events-none' => $i == $currentPage,
                                                'text-neutral-600 bg-transparent' => $i != $currentPage,
                                            ])>
                                            {{ $i }}</a>
                                    </li>
                                @endfor
                                @if ($end < $totalPages)
                                    @if ($end < $totalPages - 1)
                                        <li>
                                            <span aria-hidden="true"
                                                class="text-nuetral-600 font-bold text-body flex items-end justify-center size-8 rounded-lg">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                    class="size-6">
                                                    <circle cx="12" cy="12" r="1" />
                                                    <circle cx="19" cy="12" r="1" />
                                                    <circle cx="5" cy="12" r="1" />
                                                </svg>
                                                <span class="sr-only">Más páginas</span>
                                            </span>
                                        </li>
                                    @endif
                                    <li>
                                        <a href="{{ $products->url($totalPages) }}"
                                            class="tabular-nums flex items-center justify-center size-8 rounded-lg text-neutral-600 bg-transparent hover:bg-neutral-100/50 transition-colors duration-200">{{ $totalPages }}</a>
                                    </li>
                                @endif
                                <li>
                                    <a href="{{ $products->nextPageUrl() }}" aria-label="Siguiente"
                                        @class([
                                            'flex items-center justify-center size-8 rounded-lg bg-transparent hover:bg-neutral-100/50 transition-colors duration-200',
                                            'pointer-events-none text-neutral-200' => !$products->hasMorePages(),
                                            'text-primary-200' => $products->hasMorePages(),
                                        ])>
                                        <x-icon name="chevron-right" class="size-4" />
                                        <span class="sr-only">Siguiente</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </footer>
                </div>
                <div x-show="activeTab == 'about'" class="mt-4" role="tabpanel" x-cloak>
                    <article class="bg-white rounded-3xl overflow-clip">
                        <div class="p-4 space-y-3">
                            {!! $artist['embed_html'] !!}
                            <header>
                                <h3 class="text-lg text-neutral-500 font-semibold">
                                    {{ $artist['name'] }}</h3>
                            </header>
                            @if (!empty($artist['description']))
                                <p class="text-neutral-400 text-subtitle">
                                    {{ $artist['description'] }}
                                </p>
                            @endif
                            <footer class="space-y-3">
                                @if (
                                    !empty($artist['rs_facebook']) ||
                                        !empty($artist['rs_instagram']) ||
                                        !empty($artist['rs_youtube']) ||
                                        !empty($artist['rs_spotify']))
                                    <p class="text-neutral-400 text-xs">Sigue a {{ $artist['name'] }} en:
                                    </p>
                                @endif
                                <div class="flex items-center gap-3">
                                    @if (!empty($artist['rs_facebook']))
                                        <a href="{{ $artist['rs_facebook'] }}" target="_blank" rel="noopener noreferrer"
                                            class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                            <x-icon name="facebook" class="size-6" />
                                        </a>
                                    @endif
                                    @if (!empty($artist['rs_instagram']))
                                        <a href="{{ $artist['rs_instagram'] }}" target="_blank"
                                            rel="noopener noreferrer"
                                            class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                            <x-icon name="instagram" class="size-6" />
                                        </a>
                                    @endif
                                    @if (!empty($artist['rs_youtube']))
                                        <a href="{{ $artist['rs_youtube'] }}" target="_blank" rel="noopener noreferrer"
                                            class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                            <x-icon name="youtube" class="size-6" />
                                        </a>
                                    @endif
                                    @if (!empty($artist['rs_spotify']))
                                        <a href="{{ $artist['rs_spotify'] }}" target="_blank" rel="noopener noreferrer"
                                            class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                            <x-icon name="spotify" class="size-6" />
                                        </a>
                                    @endif
                                </div>
                            </footer>
                        </div>
                    </article>
                </div>
            </section>
            <section class="lg:-translate-y-[--spacing(24)] relative z-10">
                <article class="max-lg:hidden bg-white rounded-3xl overflow-clip drop-shadow-md">
                    <img src="{{ env('CDN_URL') }}/public/artists/{{ $artist['image_iconn'] }}"
                        class="w-full aspect-[3/2] object-cover object-center"
                        alt="Imagen del artista {{ $artist['name'] }}" decoding="async" loading="lazy" />
                    <div class="py-5 px-3 space-y-3">
                        <header>
                            <h3 class="text-body xl:text-heading-h4 text-neutral-500 font-semibold">
                                {{ $artist['name'] }}</h3>
                        </header>
                        @if (!empty($artist['description']))
                            <p class="text-neutral-400 text-subtitle xl:text-body">
                                {{ $artist['description'] }}
                            </p>
                        @endif
                        {!! $artist['embed_html'] !!}
                        <footer class="space-y-3">
                            @if (
                                !empty($artist['rs_facebook']) ||
                                    !empty($artist['rs_instagram']) ||
                                    !empty($artist['rs_youtube']) ||
                                    !empty($artist['rs_spotify']))
                                <p class="text-neutral-400 text-xs xl:text-subtitle">Sigue a {{ $artist['name'] }} en:</p>
                            @endif
                            <div class="flex items-center gap-3">
                                @if (!empty($artist['rs_facebook']))
                                    <a href="{{ $artist['rs_facebook'] }}" target="_blank" rel="noopener noreferrer"
                                        class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                        <x-icon name="facebook" class="size-6" />
                                    </a>
                                @endif
                                @if (!empty($artist['rs_instagram']))
                                    <a href="{{ $artist['rs_instagram'] }}" target="_blank" rel="noopener noreferrer"
                                        class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                        <x-icon name="instagram" class="size-6" />
                                    </a>
                                @endif
                                @if (!empty($artist['rs_youtube']))
                                    <a href="{{ $artist['rs_youtube'] }}" target="_blank" rel="noopener noreferrer"
                                        class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                        <x-icon name="youtube" class="size-6" />
                                    </a>
                                @endif
                                @if (!empty($artist['rs_spotify']))
                                    <a href="{{ $artist['rs_spotify'] }}" target="_blank" rel="noopener noreferrer"
                                        class="text-neutral-500 hover:text-primary-200 transition-colors duration-300">
                                        <x-icon name="spotify" class="size-6" />
                                    </a>
                                @endif
                            </div>
                        </footer>
                    </div>
                </article>
            </section>
        </div>
    </section>
@endsection