@extends('layouts.app')
@section('title', 'Inicio')
@section('body')
    <section class="container py-6 md:py-12 space-y-6 md:space-y-8">
        <header class="space-y-8">
            @php
                $url = request()->url();
                $partes = explode('/', $url);
                $ubi = $partes[3] != 'eventos' ? $partes[3] : '/';
            @endphp
            <a href="{{ route('home.todos', ['ubicaciones' => $ubi]) }}"
                class="inline-flex gap-x-1.5 text-primary-200 items-center whitespace-nowrap text-subtitle md:text-body font-semibold">
                <svg class="size-6" aria-hidden="true" role="img">
                    <use href="{{ asset('/assets/sprite.svg#arrow-left') }}" />
                </svg>
                Regresar al inicio
            </a>
            {{-- @dd() --}}
            <h1 class="first-letter:uppercase text-body md:text-heading-h4 font-bold">
                {{ $category->name }}
                @if ($partes[3] != 'eventos')
                    de {{ $partes[3] }}
                @endif
            </h1>
        </header>
        <section class="grid grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-4 md:gap-x-7 md:gap-y-3">
            @foreach ($products as $product)
                <x-card class="space-y-3">
                    <div class="relative">
                        @php
                            $currentPath = request()->path();
                            $segments = explode('/', $currentPath);
                            $slug = end($segments);
                            $ubicacion = empty($segments) ? env('APP_PAIS') : $segments;
                        @endphp
                        <a href="{{ route('detalle-evento', [
                            'ubicacion' => $ubicacion[0],
                            'slug_categoria' => $product['productCategorie']['category']['slug'],
                            'slug' => $product['slug'],
                        ]) }}"
                            class="group 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">
                                    <svg class="size-6">
                                        <use xlink:href="{{ asset('/assets/sprite.svg#ticket') }}" />
                                    </svg>
                                    Comrpar
                                </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>
                        </a>
                        {{-- <x-favoritos-boton :product="$product" :favoritos="$userFavorites" />  --}}
                    </div>
                    <div class="space-y-2">
                        <div class="flex items-center flex-wrap 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">
                                <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['productCategorie']['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['productCategorie']['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>
            @endforeach
        </section>
        <footer class="flex items-center justify-center">
            @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(),
                        ])>
                            <svg class="size-4" aria-hidden="true" role="img">
                                <use href="{{ asset('/assets/sprite.svg#chevron-left') }}" />
                            </svg>
                            <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(),
                        ])>
                            <svg class="size-4" aria-hidden="true" role="img">
                                <use href="{{ asset('/assets/sprite.svg#chevron-right') }}" />
                            </svg>
                            <span class="sr-only">Siguiente</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </footer>
    </section>
@endsection