// API Configuration
const API_BASE_URL = 'http://localhost:8000';  // เปลี่ยนเป็น HTTP

// Utility Functions
const showSuccessMessage = () => {
    const successMessage = document.getElementById('success-message');
    successMessage.style.display = 'block';
    
    setTimeout(() => {
        successMessage.style.display = 'none';
    }, 3000);
};

const showErrorMessage = (message) => {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error-message';
    errorDiv.innerHTML = `
        <div class="error-content">
            <i class="fas fa-exclamation-circle"></i>
            <p>${message || 'เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง'}</p>
            <button onclick="this.parentElement.parentElement.remove()">ปิด</button>
        </div>
    `;
    document.body.appendChild(errorDiv);
    
    setTimeout(() => {
        errorDiv.remove();
    }, 5000);
};

// Form Validation
const validateForm = (formData) => {
    const errors = [];
    
    if (!formData.name.trim()) {
        errors.push('กรุณากรอกชื่อ-นามสกุล');
    }
    
    if (!formData.facebook.trim()) {
        errors.push('กรุณากรอก Facebook');
    } else if (!formData.facebook.includes('facebook.com/') && !formData.facebook.includes('fb.com/')) {
        errors.push('กรุณากรอก Facebook URL ให้ถูกต้อง');
    }
    
    return errors;
};

// Submit Form Function
document.getElementById('booking-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const submitBtn = this.querySelector('.submit-btn');
    
    // Get form data
    const formData = {
        name: this.querySelector('input[name="name"]').value.trim(),
        facebook: this.querySelector('input[name="facebook"]').value.trim()
    };

    // Validate form data
    const errors = validateForm(formData);
    if (errors.length > 0) {
        showErrorMessage(errors.join('<br>'));
        return;
    }

    try {
        // Set loading state
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> กำลังดำเนินการ...';

        // Send data to API
        const response = await fetch(`${API_BASE_URL}/orders/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });

        const data = await response.json();

        if (!response.ok) {
            throw new Error(data.detail || 'Failed to submit order');
        }

        // Show success message
        showSuccessMessage();
        
        // Reset form
        this.reset();

    } catch (error) {
        console.error('Error submitting order:', error);
        showErrorMessage('ไม่สามารถส่งข้อมูลได้ กรุณาลองใหม่อีกครั้ง');
    } finally {
        // Reset button state
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'จองเลย <i class="fas fa-arrow-right"></i>';
    }
});