@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 ($orders['total'] > 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">
                                    {{ $title_orders }}
                                </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">
                                    @foreach ($orders['data'] as $key => $order)
                                        @php
                                            $product = $order['products'][0]['product'] ?? null;
                                            $imgSrc = $product ? 
                                                env('CDN_URL') . '/public/products/' . $product['id'] . '/' . ($product['ticketing_super_img'] ?? '') . '?w=350' : 
                                                'https://placehold.co/344x142';
                                        @endphp
                                        <x-card>
                                            <img class="w-full" src="{{ $imgSrc }}" alt="Event Image" loading="lazy" decoding="async">
                                
                                            <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="{{ asset('storage/icons/calendar_today.svg') }}" />
                                                        <span class="text-purple-200 text-xs md:text-clip-sm">
                                                            {{ $product ? \Carbon\Carbon::parse($product['fecha_evento'])->format('d \d\e F') : 'Fecha no disponible' }} •
                                                            {{ $product ? \Carbon\Carbon::parse($product['hora_evento'])->format('g:ia') : 'Hora no disponible' }}
                                                        </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: {{ $order['purchase_number'] ?? 'N/A' }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="font-bold my-2 text-base text-grey-500 truncate">
                                                    {{ $product['title_small'] ?? 'Evento' }}
                                                </div>
                                                <p class="text-grey-300 text-base mb-2">
                                                    {{ \Illuminate\Support\Str::limit($product['address'] ?? 'Lugar no especificado', 40, '...') }}
                                                </p>
                                            </div>
                                
                                            <a href="{{ route('detalle-ticket', ['id' => $order['id']]) }}">
                                                <button class="btn btn-primary w-full">
                                                    Ver Entradas ({{ $order['quantity_products'] ?? 0 }})
                                                </button>
                                            </a>
                                        </x-card>
                                    @endforeach
                                </div>

                                @if ($orders['last_page'] > 1)
                                    <div class="flex justify-center gap-2 py-4">
                                        @if ($orders['prev_page_url'])
                                            <a href="{{ $orders['prev_page_url'] }}"
                                                class="px-4 py-2 text-sm border rounded hover:bg-gray-50">
                                                Anterior
                                            </a>
                                        @endif

                                        @foreach ($orders['links'] as $link)
                                            @if (is_numeric($link['label']))
                                                <a href="{{ $link['url'] }}"
                                                    class="px-4 py-2 text-sm border rounded {{ $link['active'] ? 'bg-purple-200 text-white' : 'hover:bg-gray-50' }}">
                                                    {{ $link['label'] }}
                                                </a>
                                            @endif
                                        @endforeach

                                        @if ($orders['next_page_url'])
                                            <a href="{{ $orders['next_page_url'] }}"
                                                class="px-4 py-2 text-sm border rounded hover:bg-gray-50">
                                                Siguiente
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </div>

                            <!-- <div x-show="activeTab === 2">
                                                                                    Contenido de eventos pasados
                                                                                </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="{{ asset('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>
                            <a href="{{ route("home.todos") }}">
                                <button class="btn btn-primary my-5">Explorar Eventos</button>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection