@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')

    @php
        $tickets = 1;
        session()->put('tickets', $tickets);
    @endphp
    <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('backend.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 ($tickets > 0)
                    <div x-data="{ activeTab: 1 }">
                        <div class="py-5">
                            <button 
                                x-on:click="activeTab = 1" 
                                x-bind:class="{
                                    'border-b-2 border-purple-200 text-purple-200': activeTab === 1,
                                    'text-grey-500': activeTab !== 1
                                }"
                                class="me-5 text-base transition-colors duration-200"
                                id="tab-1">
                                Mis entradas
                            </button>
                            <button 
                                x-on:click="activeTab = 2"
                                x-bind:class="{
                                    'border-b-2 border-purple-200 text-purple-200': activeTab === 2,
                                    'text-grey-500': activeTab !== 2
                                }"
                                class="text-base transition-colors duration-200"
                                id="tab-2">
                                Eventos pasados
                            </button>
                        </div>
                        
                        <div x-show="activeTab === 1">
                            <div class="grid md:grid-cols-2 py-5 gap-4" id="cards-container">
                                <x-card>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>
                                    <a href="{{ route('detalle-ticket')}}">
                                        <button class="btn btn-primary w-full">
                                            Ver Entradas (4)
                                        </button>
                                    </a>
                                </x-card>
                                <x-card>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>
                        <div x-show="activeTab === 2">
                            <div class="grid md:grid-cols-2 py-5 gap-4" id="cards-container">
                                <x-card>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="text-purple-200 text-xs md:text-clip-sm">32 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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="text-purple-200 text-xs md:text-clip-sm">32 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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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="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>
                        </div>
                    </div>
                    @else
                        <h4 class="pt-10 font-bold">Mis Entradas</h4>
                        <p class="text-base mt-2 font-light">Aún no has realizado ningún pedido</p>
                        <div class="flex flex-col items-center justify-center text-center mt-10">
                            <img src="storage/icons/confirmation_number.svg" alt="" width="40px">
                            <h4 class="font-bold mt-5">Aún no tienes entradas</h4>
                            <p class="text-sm mt-2 font-light">Parece que todavía no has comprado ninguna entrada. <br /> ¿Por qué no echas un vistazo a los próximos eventos?</p>
                            <button class="btn btn-primary my-5">Explorar Eventos</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection