@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="max-w-[1180px] mx-auto">
        <div class="grid grid-cols-12">
            <div class="hidden md:block md:col-span-4 lg:col-span-3 m-10">
                @include('pages.cuenta.components.sidebar-menu-perfil')
            </div>
            <div class="col-span-12 mx-4 md:col-span-8 lg:col-span-9">
                <div class="bg-white border-b-2 border-l-2 border-r-2 rounded-bl-[18px] rounded-br-[18px] min-h-96 px-6">
                    @if ($favoritos > 0)
                        <div>
                            <h4 class="font-bold pt-5">Favoritos</h4>
                            <div class="grid md:grid-cols-1 lg:grid-cols-2 py-5 gap-4" id="cards-container">
                                <x-card class="">
                                    <div class="relative">
                                        <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                                        <button
                                            class="absolute bottom-2 right-2 flex items-center justify-center border border-purple-200 bg-white text-purple-200 rounded-full w-10 h-10 z-10">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="p-1" style="width: 40px;"
                                                fill="#FF0000" viewBox="0 0 24 24" stroke="#FF0000">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="md:px-1 md:pt-4">
                                        <div
                                            class="block md:flex md:flex-row items-center sm:items-center gap-y-2 sm:gap-x-2">
                                            <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md w-auto">
                                                <img src="storage/icons/calendar_today.svg" />
                                                <span class="inline-flex text-purple-200 text-xs md:text-clip-sm">31 de
                                                    Octubre • 8:00pm</span>
                                            </div>
                                            <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                                <span class="text-grey-400 text-xs px-1 py-1">Orden de compra:
                                                    1231245</span>
                                            </div>
                                        </div>
                                        <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To
                                            The Earth?</div>
                                        <p class="text-grey-300 text-base mb-2">
                                            Estadio Nacional
                                        </p>
                                    </div>
                                    <button class="btn btn-primary w-full">
                                        Ver Entradas (4)
                                    </button>
                                </x-card>
                                <x-card class="">
                                    <div class="relative">
                                        <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                                        <button
                                            class="absolute bottom-2 right-2 flex items-center justify-center border border-purple-200 bg-white text-purple-200 rounded-full w-10 h-10 z-10">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="p-1" style="width: 40px;"
                                                fill="#FF0000" viewBox="0 0 24 24" stroke="#FF0000">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="md:px-1 md:pt-4">
                                        <div
                                            class="flex flex-col sm:flex-row items-center sm:items-center gap-y-2 sm:gap-x-2">
                                            <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                                <img src="storage/icons/calendar_today.svg" />
                                                <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre •
                                                    8:00pm</span>
                                            </div>
                                            <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                                <span class="text-grey-400 text-xs px-1 py-1">Orden de compra:
                                                    1231245</span>
                                            </div>
                                        </div>
                                        <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To
                                            The Earth?</div>
                                        <p class="text-grey-300 text-base mb-2">
                                            Estadio Nacional
                                        </p>
                                    </div>
                                    <button class="btn btn-primary w-full">
                                        Ver Entradas (4)
                                    </button>
                                </x-card>
                                <x-card class="">
                                    <div class="relative">
                                        <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                                        <button
                                            class="absolute bottom-2 right-2 flex items-center justify-center border border-purple-200 bg-white text-purple-200 rounded-full w-10 h-10 z-10">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="p-1" style="width: 40px;"
                                                fill="#FF0000" viewBox="0 0 24 24" stroke="#FF0000">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="md:px-1 md:pt-4">
                                        <div
                                            class="flex flex-col sm:flex-row items-center sm:items-center gap-y-2 sm:gap-x-2">
                                            <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                                <img src="storage/icons/calendar_today.svg" />
                                                <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre •
                                                    8:00pm</span>
                                            </div>
                                            <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                                <span class="text-grey-400 text-xs px-1 py-1">Orden de compra:
                                                    1231245</span>
                                            </div>
                                        </div>
                                        <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened To
                                            The Earth?</div>
                                        <p class="text-grey-300 text-base mb-2">
                                            Estadio Nacional
                                        </p>
                                    </div>
                                    <button class="btn btn-primary w-full">
                                        Ver Entradas (4)
                                    </button>
                                </x-card>
                                <x-card class="">
                                    <div class="relative">
                                        <img class="w-full" src="https://placehold.co/344x142" alt="Event Image">
                                        <button
                                            class="absolute bottom-2 right-2 flex items-center justify-center border border-purple-200 bg-white text-purple-200 rounded-full w-10 h-10 z-10">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="p-1" style="width: 40px;"
                                                fill="#FF0000" viewBox="0 0 24 24" stroke="#FF0000">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="md:px-1 md:pt-4">
                                        <div
                                            class="flex flex-col sm:flex-row items-center sm:items-center gap-y-2 sm:gap-x-2">
                                            <div class="inline-flex gap-x-2 px-2 py-1 bg-grey-100 rounded-md">
                                                <img src="storage/icons/calendar_today.svg" />
                                                <span class="text-purple-200 text-xs md:text-clip-sm">31 de Octubre •
                                                    8:00pm</span>
                                            </div>
                                            <div class="inline-flex border-grey-100 border-2 rounded-lg">
                                                <span class="text-grey-400 text-xs px-1 py-1">Orden de compra:
                                                    1231245</span>
                                            </div>
                                        </div>
                                        <div class="font-bold my-2 text-base text-grey-500 truncate">AURORA What Happened
                                            To The Earth?</div>
                                        <p class="text-grey-300 text-base mb-2">
                                            Estadio Nacional
                                        </p>
                                    </div>
                                    <button class="btn btn-primary w-full">
                                        Ver Entradas (4)
                                    </button>
                                </x-card>
                            </div>
                            <!-- Paginación -->
                            <div class="flex justify-center items-center mt-10">
                                <div class="flex items-center space-x-4">
                                    <img src="storage/icons/arrow_back_ios.svg" width="8px" />
                                    <!-- Flecha izquierda (anterior) -->
                                    <button id="prev-btn" class="text-gray-500 hover:text-gray-700">
                                        <i class="fas fa-chevron-left"></i>
                                    </button>

                                    <!-- Página 1 (botón activo) -->
                                    <button id="page-1"
                                        class="bg-purple-200 text-white rounded-[8px] w-8 h-8 flex items-center justify-center">1</button>

                                    <!-- Páginas 2, 3, 4, etc. -->
                                    <button id="page-2" class="text-gray-700 hover:text-gray-900">2</button>
                                    <button id="page-3" class="text-gray-700 hover:text-gray-900">3</button>
                                    <button id="page-4" class="text-gray-700 hover:text-gray-900">4</button>
                                    <button id="page-5" class="text-gray-700 hover:text-gray-900">5</button>

                                    <!-- Puntos suspensivos -->
                                    <span class="text-gray-700">...</span>

                                    <!-- Página 10 -->
                                    <button id="page-10" class="text-gray-700 hover:text-gray-900">10</button>

                                    <!-- Flecha derecha (siguiente) -->
                                    <button id="next-btn" class="text-purple-600 hover:text-purple-800">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                    <img src="storage/icons/arrow_forward_ios.svg" width="8px" />
                                </div>
                            </div>

                        </div>
                    @else
                        <div class="flex flex-col items-center justify-center text-center mt-10 pt-20">
                            <img src="storage/icons/favorite.svg" alt="" width="40px">
                            <h4 class="font-bold mt-5">Tu lista de favoritos está vacía</h4>
                            <p class="text-sm mt-2 font-light">Agrega tus eventos favoritos aquí para tenerlos siempre a
                                mano. <br />Así podrás regresar y comprar entradas para las <br />experiencias que más te
                                interesan.</p>
                            <button class="btn btn-primary my-5">Explorar Eventos</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection