@extends('layouts.app')
@section('title', 'Mis Entradas')
@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 rounded-bl-[18px] rounded-br-[18px] min-h-96 px-6 mb-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-primary-200 text-primary-200': activeTab === 1,
                                        'text-neutral-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-primary-200 text-primary-200': activeTab ===
                                            2,
                                        'text-neutral-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-neutral-100 rounded-md w-auto">
                                                        <img src="{{  env('VITE_CDN_URL_ASSETS').'/icons/calendar_today.svg' }}" />
                                                        <span class="text-primary-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-neutral-100 border-2 rounded-lg">
                                                        <span class="text-neutral-400 text-xs px-1 py-1">
                                                            Orden de compra: {{ $order['id'] ?? 'N/A' }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="font-bold my-2 text-base text-neutral-500 truncate">
                                                    {{ $product['title_small'] ?? 'Evento' }}
                                                </div>
                                                {{-- {{dd($product['address'])}} --}}
                                                <p class="text-neutral-300 text-base mb-2">
                                                    {{ \Illuminate\Support\Str::limit($product['address'] ?? 'Lugar no especificado', 40, '...') }}
                                                </p>
                                            </div>

                                            @if ($order['status'] == '1')
                                                <a href="{{ route('detalle-ticket', ['id' => $order['id']]) }}">
                                                    <button class="btn btn-primary w-full">
                                                        Ver Entradas ({{ $order['quantity_products'] ?? 0 }})
                                                    </button>
                                                </a>
                                            @else
                                                <button class="btn btn-primary w-full" disabled="true">
                                                    Tus entradas aun no están disponibles
                                                    {{-- <br />
                                                    {{ $order['status'] == '9' ? 'Pendiente de confirmación' : 'Pendiente de pago' }} --}}
                                                </button>
                                            @endif
                                        </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 rounded hover:bg-neutral-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 rounded {{ $link['active'] ? 'bg-primary-200 text-white' : 'hover:bg-neutral-50' }}">
                                                    {{ $link['label'] }}
                                                </a>
                                            @endif
                                        @endforeach

                                        @if ($orders['next_page_url'])
                                            <a href="{{ $orders['next_page_url'] }}"
                                                class="px-4 py-2 text-sm rounded hover:bg-neutral-50">
                                                Siguiente
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </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="{{  env('VITE_CDN_URL_ASSETS').'/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