@props(['event' => [], 'favoritos' => []])
<button onclick="handleFavoriteClick({{ $event['id'] ?? 0 }})" 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 {{ in_array($event['id'] ?? 0, array_column($favoritos, 'id')) ? 'fill-red-500 stroke-red-500' : 'fill-white 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>

<!-- Modal para usuarios invitados -->
<div id="guestFavoriteModal_{{ $event['id'] ?? 0 }}" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full">
        <h3 class="text-xl font-bold mb-4">{{ $event['title_small'] }}</h3>
        <p class="my-4">Para agregarlo a tus favoritos debes iniciar sesión o agrega tu correo:</p>
        <form class="guestFavoriteForm" data-event-id="{{ $event['id'] ?? 0 }}">
            <input type="hidden" name="product_id" value="{{ $event['id'] ?? 0 }}">
            <div>
                <input type="email" id="guestEmail_{{ $event['id'] ?? 0 }}" name="email" required class="form-control" placeholder="Correo electrónico">
            </div>
            <div class="flex justify-end space-x-2 mt-4">
                <button type="button" onclick="closeGuestModal({{ $event['id'] ?? 0 }})" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md">Cancelar</button>
                <button type="submit" class="px-4 py-2 bg-purple-200 text-white rounded-md hover:bg-purple-400">Guardar</button>
            </div>
        </form>
    </div>
</div>

<script>
    function handleFavoriteClick(productId) {
        @auth
            toggleFavorite(productId);
        @else
            showGuestModal(productId);
        @endauth
    }

    function showGuestModal(productId) {
        const modal = document.getElementById('guestFavoriteModal_' + productId);
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    
    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 heartButton = document.querySelector(
                    `button[onclick="handleFavoriteClick(${productId})"]`
                );
                if (heartButton) {
                    const svg = heartButton.querySelector('svg');
                    if (svg.classList.contains('fill-red-500')) {
                        // If already filled, remove fill
                        svg.classList.remove('fill-red-500', 'stroke-red-500');
                        svg.classList.add('fill-white', 'stroke-red-500');
                    } else {
                        // If not filled, add fill
                        svg.classList.remove('fill-white', 'stroke-red-500');
                        svg.classList.add('fill-red-500', 'stroke-red-500');
                    }
                }
                window.showSwalSuccess(data.message, "Exitoso", 2000);
            } else {
                window.showSwalError(data.message, "Error", 2000);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            window.showSwalError('Error al procesar la solicitud', "Fallido", 2000);
        });
    }

    function closeGuestModal(productId) {
        const modal = document.getElementById('guestFavoriteModal_' + productId);
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.guestFavoriteForm').forEach(form => {
        if (!form.dataset.listenerAdded) {
            form.dataset.listenerAdded = "true";

            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const productId = form.getAttribute('data-event-id');
                const email = form.querySelector('input[name="email"]').value;

                fetch('/agregar-favoritos-guest', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        product_id: productId,
                        email: email
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        closeGuestModal(productId);
                        window.showSwalSuccess('Evento agregado a favoritos', "Exitoso", 2000);
                        form.reset();

                        const heartButton = document.querySelector(
                            `button[onclick="handleFavoriteClick(${productId})"]`
                        );
                        if (heartButton) {
                            const svg = heartButton.querySelector('svg');
                            svg.classList.remove('fill-white', 'stroke-red-500');
                            svg.classList.add('fill-red-500', 'stroke-red-500');
                        }
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    window.showSwalError('Hubo un error al procesar la solicitud', "Fallido", 2000);
                });
            });
        }
    });
});
</script>