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

    @php
        $tickets = 1;
    @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, openModal: false }" class="relative">
                        <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 class="md:absolute flex justify-center right-0 top-6">
                            <button class="btn btn-secondary flex items-center gap-x-2">
                                <img src="storage/icons/download.svg" alt="">
                                Descargar Tickets (4)</button>
                        </div>
                        <div class="flex items-center gap-x-2 ms-0 mb-3 hover:cursor-pointer">
                            <img src="storage/icons/arrow_back.svg" alt="Volver">
                            <a href="/dashboard">
                                <p class="text-grey-600">Volver</p>
                            </a>
                        </div>
                        <div x-show="activeTab === 1">
                            <div class="grid grid-cols-1 py-5 gap-4">
                                <!-- Ticket 1 -->
                                <div class="overflow-x-auto overflow-y-hidden">
                                    <x-ticket>
                                        <div class="grid grid-cols-7 gap-4 h-full min-w-max">
                                            <div class="col-span-2 p-3">
                                                <img src="storage/logo-morado.png" width="60px" alt="">
                                                <div class="flex flex-col gap-y-[4px] justify-center text-center">
                                                    <p class="text-xs mt-2">Ticket N° 366197</p>
                                                    @php
                                                        $title = 'Peru vs Venezuela 2024';
                                                        $titleClass = strlen($title) > 50 ? 'text-xs' : 'text-sm';
                                                    @endphp
                                                    <h5 class="text-grey-200 font-semibold {{ $titleClass }} overflow-hidden whitespace-nowrap text-ellipsis max-w-full">{{ $title }}</h5>
                                                    <p class="text-xs text-purple-200">Occidente lateral</p>
                                                    <p class="text-xs">Póliza N°: 1012420000010</p>
                                                    <img class="mx-auto" src="storage/qr.png" width="98px" alt="">
                                                    <p class="text-xs text-grey-400">QW45TGA</p>
                                                </div>
                                            </div>
                                            <div class="col-span-5 border-l-2 border-dashed border-grey-200">
                                                <div class="flex flex-col">
                                                    <div class="">
                                                        <img src="https://placehold.co/460x213" alt="">
                                                    </div>
                                                    <div class="flex items-center justify-between w-[460px] p-2">
                                                        <div class="">
                                                            <h5 class="text-sm text-grey-400 overflow-hidden whitespace-nowrap text-ellipsis max-w-full">Valeria Margarita Martín Rodriguez</h5>
                                                            <p class="text-grey-300">DNI 72282298</p>
                                                        </div>
                                                        <div class="">
                                                            <p class="text-grey-400 text-sm">Occidente lateral</p>
                                                            <p class="text-grey-400 font-semibold">S/ 457.90</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </x-ticket>
                                </div>
                            
                                <!-- Ticket 2 -->
                                <div class="overflow-x-auto overflow-y-hidden">
                                    <x-ticket>
                                        <div class="grid grid-cols-7 gap-4 h-full min-w-max">
                                            <div class="col-span-2 p-3">
                                                <img src="storage/logo-morado.png" width="60px" alt="">
                                                <div class="flex flex-col gap-y-[4px] justify-center text-center">
                                                    <p class="text-xs mt-2">Ticket N° 366197</p>
                                                    @php
                                                        $title = 'Peru vs Venezuela 2024';
                                                        $titleClass = strlen($title) > 50 ? 'text-xs' : 'text-sm';
                                                    @endphp
                                                    <h5 class="text-grey-200 font-semibold {{ $titleClass }} overflow-hidden whitespace-nowrap text-ellipsis max-w-full">{{ $title }}</h5>
                                                    <p class="text-xs text-purple-200">Occidente lateral</p>
                                                    <p class="text-xs">Póliza N°: 1012420000010</p>
                                                </div>
                                            </div>
                                            <div class="col-span-5 border-l-2 border-dashed border-grey-200">
                                                <div class="flex flex-col">
                                                    <div class="">
                                                        <img src="https://placehold.co/460x213" alt="">
                                                    </div>
                                                    <div class="flex items-center justify-between w-[460px] p-1">
                                                        <div class="">
                                                            <button class="btn btn-primary nominar-entrada-btn" data-open-modal data-ticket-id="366198">Nominar Entrada</button>
                                                        </div>
                                                        <div class="">
                                                            <p class="text-grey-400 text-sm">Popular</p>
                                                            <p class="text-grey-400 font-semibold">S/ 57.90</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </x-ticket>
                                </div>
                            </div>
                        </div>
                        <div x-show="activeTab === 2" x-cloak>
                            <div class="grid 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="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">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="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">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="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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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>  
                                    <img class="w-full"  src="https://placehold.co/344x142" alt="Event Image">
                                    
                                    <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>
                        </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>
<x-modal name="nominar-entrada-modal">
    <form class="p-6" id="nominar-entrada-form">
        <h2 class="text-xl font-semibold mb-4">Nominar entrada</h2>
        <p id="ticket-id" class="text-sm text-grey-400 mb-4">Ticket N° 366197</p>
        
        <div class="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="form-label">Tipo de documento</label>
                <select class="form-control">
                    <option value="DNI">DNI</option>
                </select>
            </div>
            <div>
                <label class="form-label">Número de documento</label>
                <input type="text" class="form-control" placeholder="45667890">
            </div>
        </div>
        
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div>
                <label class="form-label">Nombres</label>
                <input type="text" class="form-control" placeholder="Fresia">
            </div>
            <div>
                <label class="form-label">Apellidos</label>
                <input type="text" class="form-control" placeholder="Linares Campos">
            </div>
        </div>

        <div class="space-y-4 mb-6">
            <label class="flex items-start gap-2">
                <input type="checkbox" class="mt-1">
                <span class="text-sm">Confirmo que los datos ingresados son correctos y corresponden al asistente asociado al boleto, asimismo, acepto que estos datos no podrán ser modificados.</span>
            </label>
            
            <label class="flex items-start gap-2">
                <input type="checkbox" class="mt-1">
                <span class="text-sm">Acepto los <a href="#" class="text-purple-200">Términos y Condiciones</a> y <a href="#" class="text-purple-200">Política de Privacidad</a>.</span>
            </label>
        </div>

        <div class="flex justify-end gap-4">
            <button type="button" id="close-modal" class="btn btn-secondary" x-on:click="openModal = false">Cancelar</button>
            <button type="submit" class="btn btn-primary">Nominar</button>
        </div>
    </form>
</x-modal>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.querySelector('x-modal[name="nominar-entrada-modal"]');
    const closeModalButton = document.getElementById('close-modal');
    const ticketIdElement = document.getElementById('ticket-id');
    const form = document.querySelector('#nominar-entrada-form');

    document.querySelectorAll('.nominar-entrada-btn').forEach(button => {
        button.addEventListener('click', function() {
            const ticketId = this.getAttribute('data-ticket-id');
            ticketIdElement.textContent = `Ticket N° ${ticketId}`;
        });
    });

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        form.innerHTML = `
            <h2 class="text-xl font-semibold mb-4">Nominar entrada</h2>
            <p class="text-sm text-grey-400 mb-4">${ticketIdElement.textContent}</p>
            <div class="flex flex-col items-center">
                <img src="storage/logo-morado.png" width="254" alt="Logo" class="mb-2">
                <p class="text-lg text-purple-200 font-semibold mb-4">¡Tu entrada ha sido registrada con éxito!</p>
                <p class="text-sm text-grey-400 mb-4 text-center">Tu entrada ya cuenta con los datos del asistente del evento. Podrás descargar la entrada nominada desde la sección “Mis entradas”.</p>
                <div class="flex justify-end gap-4">
                    <button type="button" id="close-modal" class="btn btn-primary">Volver a mis entradas</button>
                </div>
            </div>
        `;
        closeModalButton.addEventListener('click', function() {
            modal.style.display = 'none';
        });
    });
});
</script>
@endsection