Spaces:
Runtime error
Runtime error
| /* ===================================================== | |
| Theme Toggle Logic (Dark/Light Mode) | |
| ===================================================== */ | |
| const toggleBtn = document.getElementById("themeToggle"); | |
| if (toggleBtn) { | |
| toggleBtn.addEventListener("click", () => { | |
| // تبديل كلاس الوضع النهاري | |
| document.body.classList.toggle("light-mode"); | |
| // تغيير أيقونة الشمس والقمر | |
| if (document.body.classList.contains("light-mode")) { | |
| toggleBtn.innerHTML = '<i class="fa-solid fa-sun"></i>'; | |
| } else { | |
| toggleBtn.innerHTML = '<i class="fa-solid fa-moon"></i>'; | |
| } | |
| }); | |
| } | |
| /* ===================================================== | |
| Flow State Management | |
| ===================================================== */ | |
| let chosenAmount = 50; | |
| let isCustom = false; | |
| let chosenMethod = 'visa'; | |
| function showView(viewId) { | |
| document.querySelectorAll('.flow-view').forEach(el => el.classList.remove('active')); | |
| document.getElementById(viewId).classList.add('active'); | |
| } | |
| /* ===================================================== | |
| Select Amount Logic | |
| ===================================================== */ | |
| function selectAmount(element, value) { | |
| const listItems = document.getElementById('view-amount').querySelectorAll('.selection-item'); | |
| listItems.forEach(item => item.classList.remove('selected')); | |
| element.classList.add('selected'); | |
| const customInputArea = document.getElementById('customInputWrapper'); | |
| if (value === 'custom') { | |
| isCustom = true; | |
| customInputArea.style.display = 'block'; | |
| document.getElementById('customInput').focus(); | |
| } else { | |
| isCustom = false; | |
| chosenAmount = value; | |
| customInputArea.style.display = 'none'; | |
| } | |
| } | |
| function confirmAmountAndProceed() { | |
| if (isCustom) { | |
| const customVal = document.getElementById('customInput').value; | |
| if (!customVal || customVal < 10) { | |
| Swal.fire({ | |
| title: 'Invalid Amount', | |
| text: 'Please enter a minimum of 10 EGP.', | |
| icon: 'warning', | |
| confirmButtonColor: '#00c2b8', // لون البراند | |
| customClass: { popup: 'rounded-2xl' } | |
| }); | |
| return; | |
| } | |
| chosenAmount = customVal; | |
| } | |
| document.getElementById('finalPayBtn').innerText = `Pay ${chosenAmount} EGP`; | |
| showView('view-method'); | |
| } | |
| /* ===================================================== | |
| Payment Processing | |
| ===================================================== */ | |
| function selectMethod(element, method) { | |
| const listItems = document.getElementById('view-method').querySelectorAll('.selection-item'); | |
| listItems.forEach(item => item.classList.remove('selected')); | |
| element.classList.add('selected'); | |
| chosenMethod = method; | |
| } | |
| /* ===================================================== | |
| Payment Processing (Linked to Backend) | |
| ===================================================== */ | |
| function processFinalPayment() { | |
| const btn = document.getElementById('finalPayBtn'); | |
| btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Processing...`; | |
| btn.style.opacity = '0.8'; | |
| // نبعت الـ Request للـ Backend عشان يزود الفلوس في الداتابيز | |
| fetch('/api/add_balance', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ amount: parseFloat(chosenAmount) }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.status === 'success') { | |
| Swal.fire({ | |
| title: 'Success!', | |
| text: `Successfully added ${chosenAmount} EGP to your wallet.`, | |
| icon: 'success', | |
| confirmButtonColor: '#00c2b8', | |
| customClass: { popup: 'rounded-2xl' } | |
| }).then(() => { | |
| // تحديث الرصيد ديناميكياً من الداتا اللي راجعة من السيرفر | |
| let newBalance = parseFloat(data.new_balance); | |
| let [newInt, newDec] = newBalance.toFixed(2).split('.'); | |
| // تحديث الكارت الكبير | |
| document.getElementById('balance-int').innerText = newInt; | |
| document.getElementById('balance-dec').innerText = newDec; | |
| // تحديث الرقم اللي فوق في الـ Header لو موجود | |
| const topBadge = document.getElementById('top-balance-badge'); | |
| if (topBadge) { | |
| topBadge.innerText = `${newBalance.toFixed(2)} EGP`; | |
| } | |
| // إرجاع الزر لشكله الطبيعي | |
| btn.innerHTML = `Pay ${chosenAmount} EGP`; | |
| btn.style.opacity = '1'; | |
| showView('view-overview'); | |
| }); | |
| } else { | |
| // لو حصل خطأ في السيرفر | |
| Swal.fire('Error!', data.message, 'error'); | |
| btn.innerHTML = `Pay ${chosenAmount} EGP`; | |
| btn.style.opacity = '1'; | |
| } | |
| }) | |
| .catch(err => { | |
| console.error("Error:", err); | |
| Swal.fire('Error!', 'Something went wrong. Please try again.', 'error'); | |
| btn.innerHTML = `Pay ${chosenAmount} EGP`; | |
| btn.style.opacity = '1'; | |
| }); | |
| } | |
| /* ===================================================== | |
| Save New Card Logic | |
| ===================================================== */ | |
| function saveNewCard() { | |
| const btn = document.getElementById('saveCardBtn'); | |
| const newCardInput = document.getElementById('newCardInput').value; | |
| btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Saving...`; | |
| btn.style.opacity = '0.8'; | |
| setTimeout(() => { | |
| if(newCardInput.length >= 4) { | |
| const last4 = newCardInput.slice(-4); | |
| document.getElementById('displayCard').innerText = `VisaCard - ${last4}`; | |
| } | |
| Swal.fire({ | |
| title: 'Card Linked!', | |
| text: 'Card successfully linked securely.', | |
| icon: 'success', | |
| confirmButtonColor: '#00c2b8', // لون البراند | |
| customClass: { popup: 'rounded-2xl' } | |
| }).then(() => { | |
| btn.innerHTML = `Save Payment Method`; | |
| btn.style.opacity = '1'; | |
| showView('view-overview'); | |
| }); | |
| }, 1500); | |
| } |