@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($userFavorites) > 0)
                        <div>
                            <h4 class="font-bold pt-5">Favoritos</h4>
                            <div class="grid md:grid-cols-1 lg:grid-cols-2 py-5 gap-4" id="cards-container">
                                @foreach ($userFavorites as $favorite)
                                    <div class="w-full rounded overflow-hidden shadow-lg bg-grey-50 border-2 border-grey-100 p-2 relative h-full py-5" id="favorite-card-{{ $favorite->id }}">
                                        <div class="relative">
                                            <img class="w-full"
                                                src="{{ env('CDN_URL') }}/public/products/{{ $favorite->event->id }}/{{ $favorite->event->ticketing_super_img }}"
                                                alt="{{ $favorite->event->title_small }}" loading="lazy" decoding="async"
                                                onerror="this.onerror=null;this.src='{{ asset('storage/default/imageDefault2.jpg') }}';">
                                            <button onclick="toggleFavorite({{ $favorite->event->id }})"
                                                class="absolute bottom-2 right-2 flex items-center justify-center border border-red-500 bg-white text-purple-200 rounded-full w-10 h-10 z-10 transition-transform duration-300 hover:scale-110">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="p-1 fill-red-500 stroke-red-500 transition-colors duration-300 hover:fill-red-400" 
                                                    style="width: 40px;" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                                </svg>
                                            </button>
                                        </div>
                                        <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="inline-flex text-purple-200 text-xs md:text-clip-sm">
                                                        {{ \Carbon\Carbon::parse($favorite->event->fecha_evento)->format('d \d\e F') }}
                                                        •
                                                        {{ \Carbon\Carbon::parse($favorite->event->hora_evento)->format('H:i') }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="font-bold my-2 text-base text-grey-500 truncate">
                                                {{ $favorite->event->title_small }}</div>
                                        </div>
                                        <div class="py-4">
                                            <a href="/detalle-evento/{{ $favorite->event->slug }}"
                                                class="btn btn-primary w-full">
                                                Ver Evento
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            @if ($userFavorites->lastPage() > 1)
                                <div class="flex justify-center gap-2 py-4">
                                    @if ($userFavorites->previousPageUrl())
                                        <a href="{{ $userFavorites->previousPageUrl() }}"
                                            class="px-4 py-2 text-sm border rounded hover:bg-gray-50">
                                            Anterior
                                        </a>
                                    @endif

                                    @foreach ($userFavorites->links()->elements[0] as $page => $url)
                                        <a href="{{ $url }}"
                                            class="px-4 py-2 text-sm border rounded {{ $page == $userFavorites->currentPage() ? 'bg-purple-200 text-white' : 'hover:bg-gray-50' }}">
                                            {{ $page }}
                                        </a>
                                    @endforeach

                                    @if ($userFavorites->nextPageUrl())
                                        <a href="{{ $userFavorites->nextPageUrl() }}"
                                            class="px-4 py-2 text-sm border rounded hover:bg-gray-50">
                                            Siguiente
                                        </a>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="flex flex-col items-center justify-center text-center mt-10 pt-20">
                            <img src="{{ asset('storage/icons/favorite.svg') }}" alt="" width="40px">
                            <h4 class="font-bold mt-5">Tu lista de favoritos está vacía</h4>
                            <p class="text-sm mt-2 font-light">Agrega tus eventos favoritos aquí para tenerlos siempre a
                                mano. <br />Así podrás regresar y comprar entradas para las <br />experiencias que más te
                                interesan.</p>
                            <a href="{{ route('home.todos') }}" class="btn btn-primary my-5">Explorar Eventos</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
function toggleFavorite(productId) {
    fetch('/agregar-favoritos-auth', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        body: JSON.stringify({ product_id: productId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const card = document.getElementById(`favorite-card-${productId}`);
            window.showSwalSuccess(data.message,'¡Éxito!', 1000);
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        window.showSwalError('No se pudo procesar la solicitud','Error',1000);
    });
}
</script>