@props(['event' => [], 'favoritos' => []])
<button onclick="handleFavoriteClick({{ $event['id'] ?? 0 }})"
    class="cursor-pointer absolute bottom-2 right-2 pointer-events-auto shadow-md flex items-center justify-center border border-red-500 bg-white text-primary-200 rounded-full size-8 md:size-10 z-10 transition-transform duration-300 hover:scale-110">
    <svg xmlns="http://www.w3.org/2000/svg"
        class="size-6 md:size-8 {{ 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" 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-secondary-blue-200/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 border-primary-100" placeholder="Correo electrónico">
            </div>
            <div class="flex justify-end space-x-2 mt-4">
                <button type="button" onclick="closeGuestModal({{ $event['id'] ?? 0 }})"
                    class="btn btn-secondary">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </form>
    </div>
</div>

@once
    @push('scripts')
        <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(e) {
                e.preventDefault();
                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-error-500');
                                            svg.classList.add('fill-error-500', 'stroke-error-500');
                                        }
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    window.showSwalError('Hubo un error al procesar la solicitud',
                                        "Fallido", 2000);
                                });
                        });
                    }
                });
            });
        </script>
    @endpush
@endonce