document.addEventListener('DOMContentLoaded', function() {


    // Acción al hacer click en el botón de favoritos
    document.querySelectorAll('.favorite-btn').forEach(button => {
        button.addEventListener('click', function() {
            const courseId = this.getAttribute('data-course-id');
            const svg = this.querySelector('svg.corazon');
            const countSpan = this.parentElement.querySelector('.favorite-count');
            let currentCount = parseInt(countSpan.textContent); // Obtener el contador actual

            const isLiked = svg.classList.contains('active'); // Verificar si ya está marcado

            // Cambiar el contador de favoritos en el DOM
            if (isLiked) {
                currentCount--; // Desmarcar como favorito
                svg.classList.remove('active'); // Cambiar el estilo del corazón
            } else {
                currentCount++; // Marcar como favorito
                svg.classList.add('active'); // Cambiar el estilo del corazón
            }

            // Actualizar el contador en el frontend antes de la respuesta
            countSpan.textContent = currentCount;

            // Hacer la solicitud para cambiar el favorito
            fetch(this.dataset.url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                    body: JSON.stringify({ course_id: courseId })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        // Si la respuesta es exitosa, actualizar el contador con el valor correcto
                        countSpan.textContent = data.new_favorites_count; // Actualizamos el contador
                        svg.classList.toggle('active', data.isFavorited); // Cambiar el estado del corazón
                    } else {
                        // Si algo sale mal, revertimos los cambios en el contador y el corazón
                        countSpan.textContent = currentCount - (isLiked ? 1 : -1);
                        svg.classList.toggle('active', isLiked);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Si algo sale mal, revertimos los cambios
                    countSpan.textContent = currentCount - (isLiked ? 1 : -1);
                    svg.classList.toggle('active', isLiked);
                });
        });
    });

});