37893-vm/assets/js/main.js
2026-01-29 06:11:43 +00:00

133 lines
4.5 KiB
JavaScript

document.addEventListener('DOMContentLoaded', () => {
// Inquiry Form Handling
const inquiryForm = document.getElementById('inquiryForm');
if (inquiryForm) {
inquiryForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(inquiryForm);
const submitBtn = inquiryForm.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Sending...';
try {
const response = await fetch('/api/inquiry.php', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
inquiryForm.innerHTML = `<div class="text-center py-4">
<div class="h1 text-gold mb-3"><i class="bi bi-check-circle"></i></div>
<h6>Thank you, ${formData.get('name')}!</h6>
<p class="small text-muted mb-0">We have received your inquiry and will contact you shortly.</p>
</div>`;
} else {
alert('Something went wrong. Please try again.');
submitBtn.disabled = false;
submitBtn.innerHTML = 'Send Inquiry';
}
} catch (error) {
console.error('Error:', error);
alert('Connection error. Please try again later.');
submitBtn.disabled = false;
submitBtn.innerHTML = 'Send Inquiry';
}
});
}
// Initialize cart count
updateCartCount();
});
function addToCart(id, name, price, image) {
const formData = new FormData();
formData.append('id', id);
formData.append('name', name);
formData.append('price', price);
formData.append('image', image);
fetch('/api/cart.php?action=add', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
if (data.success) {
updateCartCount(data.cart_count);
showToast(`<i class="bi bi-cart-check-fill me-2"></i> ${name} added to cart!`);
} else {
console.error('API Error:', data.error);
}
})
.catch(error => {
console.error('Error adding to cart:', error);
alert('Could not add item to cart. Please try again.');
});
}
function updateCartCount(count = null) {
if (count !== null) {
renderCartCount(count);
return;
}
fetch('/api/cart.php?action=get')
.then(response => response.json())
.then(data => {
if (data.success) {
renderCartCount(data.cart_count);
}
})
.catch(error => console.error('Error fetching cart count:', error));
}
function renderCartCount(count) {
const cartCountElement = document.getElementById('cart-count');
if (cartCountElement) {
cartCountElement.innerText = count;
if (count > 0) {
cartCountElement.classList.remove('d-none');
} else {
cartCountElement.classList.add('d-none');
}
}
}
function showToast(message) {
const toastContainer = document.getElementById('toast-container') || createToastContainer();
const toast = document.createElement('div');
toast.className = 'toast align-items-center text-white bg-charcoal border-0 show mb-2 shadow-lg';
toast.role = 'alert';
toast.ariaLive = 'assertive';
toast.ariaAtomic = 'true';
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body py-3">
${message}
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
toastContainer.appendChild(toast);
// Auto-remove after 4 seconds
setTimeout(() => {
toast.classList.remove('show');
setTimeout(() => toast.remove(), 500);
}, 4000);
}
function createToastContainer() {
const container = document.createElement('div');
container.id = 'toast-container';
container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
container.style.zIndex = '1100';
document.body.appendChild(container);
return container;
}