assets/js/single.js

@@ -1,3 +1,4 @@
+const recipeId = document.getElementById('recipe-id').textContent;
 const toggleBtn = document.getElementById('day-select');
 const dropdown = document.getElementById('custom-select-dropdown');
 
@@ -68,4 +69,44 @@ document.addEventListener('click', (e) =>{
         qrPopup.classList.add("hidden");
         overlay.classList.add("hidden");
     }
+});
+
+const favoriteBtn = document.getElementById('favorite-btn');
+const favoriteIcon = favoriteBtn.querySelector('i');
+
+
+favoriteBtn.addEventListener('click', async (e) => {
+    const isFavorite = favoriteBtn.classList.contains('active');
+    const type = isFavorite ? 'remove' : 'add';
+
+    const formData = new FormData();
+    formData.append('action', 'favorites');
+    formData.append('recipe_id', recipeId);
+    formData.append('type', type);
+
+    favoriteBtn.disabled = true;
+    const response = await fetch('/ajax', { 
+        method: 'POST',
+        body: formData
+    });
+    favoriteBtn.disabled = false;
+
+    const json = await response.json();
+
+    if(!response.ok) {
+        const message = json.error;
+        showToastify(message, 'error');
+        return;
+    }
+    favoriteBtn.classList.toggle('active');
+
+    if(type == 'add') {
+        favoriteIcon.classList.remove('fa-regular');
+        favoriteIcon.classList.add('fa-solid');
+    } else {
+        favoriteIcon.classList.add('fa-regular');
+        favoriteIcon.classList.remove('fa-solid');
+    }
+    
+    showToastify(json.success, 'success');
 });