document.addEventListener('DOMContentLoaded', function() {
    const bookingForm = document.getElementById('bookingForm');
    
    if (bookingForm) {
        bookingForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = bookingForm.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerText;
            submitBtn.disabled = true;
            submitBtn.innerText = 'Sending...';
            
            const formData = new FormData(bookingForm);
            
            fetch('/api_book.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Request sent successfully! We will contact you soon.', 'success');
                    bookingForm.reset();
                } else {
                    showToast(data.error || 'Something went wrong. Please try again.', 'danger');
                }
            })
            .catch(error => {
                showToast('Network error. Please check your connection.', 'danger');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerText = originalBtnText;
            });
        });
    }
});

function showToast(message, type = 'success') {
    const toastContainer = document.getElementById('toastPlacement');
    if (!toastContainer) return;
    
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type} border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;
    
    const toastElement = document.createElement('div');
    toastElement.innerHTML = toastHtml;
    toastContainer.appendChild(toastElement);
    
    setTimeout(() => {
        toastElement.remove();
    }, 5000);
}