@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 (count($detalleTicket) > 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="{{ asset('storage/icons/download.svg') }}" alt="">
                                    Descargar Tickets ({{ count($detalleTicket[0]['products']) }})</button>
                            </div>
                            <div class="flex items-center gap-x-2 ms-0 mb-3 hover:cursor-pointer">
                                <img src="{{ asset('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">
                                    @foreach ($detalleTicket[0]['products'] as $ticket)
                                        <div class="overflow-x-auto overflow-y-hidden w-full touch-pan-x scroll-smooth">
                                            <div class="min-w-[700px]">
                                                <div class="bg-[#F0F0FA] rounded-[20px] drop-shadow-lg">
                                                    <div class="grid grid-cols-7 gap-4 h-full">
                                                        <div class="col-span-2 p-3">
                                                            <img src="{{ asset('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° {{ $ticket['id'] }}</p>
                                                                @php
                                                                    $title = $ticket['product']['title_small'];
                                                                    $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">{{ $ticket['detail'] }}
                                                                </p>
                                                                <p class="text-xs">Póliza N°:
                                                                    {{ $detalleTicket[0]['purchase_number'] }}</p>
                                                                @if ($ticket['nom_dni'])
                                                                    <img class="mx-auto" src="{{ asset('storage/qr.png') }}"
                                                                        width="98px" alt="">
                                                                    <p class="text-xs text-grey-400">
                                                                        {{ $ticket['cupon_code'] }}</p>
                                                                @endif
                                                            </div>
                                                        </div>

                                                        <div class="col-span-5 border-l-2 border-dashed border-grey-200">
                                                            <div class="flex flex-col">
                                                                <div class="">
                                                                    @php
                                                                        $imgSrc =
                                                                            env('CDN_URL') .
                                                                            '/public/products/' .
                                                                            $ticket['product']['id'] .
                                                                            '/' .
                                                                            $ticket['product']['ticketing_super_img'] .
                                                                            '?w=750';
                                                                    @endphp
                                                                    @if ($ticket['product']['id'])
                                                                        <img class="w-full" src="{{ $imgSrc }}"
                                                                            alt="Event Image" loading="lazy"
                                                                            decoding="async">
                                                                    @else
                                                                        <img class="w-full"
                                                                            src="https://placehold.co/344x142"
                                                                            alt="Event Image">
                                                                    @endif
                                                                </div>
                                                                <div class="flex items-center justify-between w-full p-2">
                                                                    @if ($ticket['nom_dni'])
                                                                        <div class="">
                                                                            <h5
                                                                                class="text-sm text-grey-400 overflow-hidden whitespace-nowrap text-ellipsis max-w-full">
                                                                                {{ $ticket['nom_name'] }}
                                                                                {{ $ticket['nom_lastname'] }}
                                                                            </h5>
                                                                            <p class="text-grey-300">
                                                                                {{ $ticket['nom_dni'] }}</p>
                                                                        </div>
                                                                    @else
                                                                        <p class="text-grey-400 text-sm">En proceso de
                                                                            generar el código QR</p>
                                                                    @endif
                                                                    <div class="">
                                                                        <p class="text-grey-400 text-sm">
                                                                            {{ $ticket['detail'] }}</p>
                                                                        <p class="text-grey-400 font-semibold">S/
                                                                            {{ number_format($ticket['total_price'], 2) }}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div x-show="activeTab === 2" x-cloak>
                                <div class="grid grid-cols-2 py-5 gap-4" id="cards-container">
                                    <!-- Past events would go here -->
                                </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="{{ 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>
                            <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