static/js/index.js

// ฟังก์ชันสำหรับแสดงชื่อไฟล์ที่อัปโหลด (โค้ดเดิม)
function displayFilename() {
    const fileInput = document.getElementById('file');
    const filenameLabel = document.getElementById('filename');

    if (fileInput && fileInput.files.length > 0) {
        let fileName = fileInput.files[0].name;
        const maxLength = 20;

        if (fileName.length > maxLength) {
            const start = fileName.substring(0, 10);
            const end = fileName.substring(fileName.length - 7);
            fileName = `${start}...${end}`;
        }
        if(filenameLabel) {
            filenameLabel.textContent = fileName;
        }
    }
}

// ฟังก์ชันสำหรับตรวจสอบชนิดของไฟล์ (โค้ดเดิม)
function validateFileType() {
    const fileInput = document.getElementById('file');
    const filePath = fileInput.value;
    const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
    
    if (fileInput && !allowedExtensions.exec(filePath)) {
        alert('Please upload a valid image file (JPG, JPEG, PNG, BMP).');
        fileInput.value = '';
        return false;
    }
    return true;
}

// ใช้ Event Listener เพื่อให้แน่ใจว่า DOM (โครงสร้างหน้าเว็บ) โหลดเสร็จก่อน
document.addEventListener("DOMContentLoaded", function() {

    // --- 1. ส่วนจัดการฟอร์มและ Loader ---
    const sectionForm = document.getElementById('sectionForm');
    const loadingOverlay = document.getElementById('loading');
    const fileInput = document.getElementById('file');
    const symptomTextArea = document.getElementById('symptomTextArea'); // เพิ่มเข้ามาเพื่อเข้าถึงง่าย

    if (sectionForm) {
        sectionForm.addEventListener('submit', function (event) {
            // ตรวจสอบว่ามีไฟล์ถูกอัปโหลดหรือยัง
            if (!fileInput.value) {
                alert('กรุณาอัปโหลดรูปภาพ');
                event.preventDefault(); // หยุดการส่งฟอร์ม
                return;
            }

            // <<< DEBUG START: พิมพ์ข้อมูลที่จะส่งไปยัง Backend >>>
            console.clear(); // ล้าง console เก่าเพื่อความสะอาดตา
            console.log("=============================================");
            console.log("🔬 DATA TO BE SENT TO BACKEND (main.py)");
            console.log("=============================================");

            // 1. เก็บค่าจาก Checkbox ที่ถูกติ๊ก
            const checkedBoxes = document.querySelectorAll('input[name="checkboxes"]:checked');
            const checkboxValues = Array.from(checkedBoxes).map(cb => cb.value);
            console.log("✅ Checkbox values (name='checkboxes'):", checkboxValues);

            // 2. เก็บค่าจาก Text Area
            const textAreaValue = symptomTextArea.value;
            console.log("📝 Text Area value (name='symptom_text'):", textAreaValue);
            
            // Bonus: พิมพ์ค่า Model Version ที่เลือกด้วย
            const modelVersion = document.querySelector('input[name="model_version"]:checked').value;
            console.log("🤖 Model Version (name='model_version'):", modelVersion);
            
            console.log("---------------------------------------------");
            console.log("Backend (main.py) จะได้รับข้อมูล 3 ส่วนนี้จากฟอร์ม");
            console.log("คุณสามารถนำข้อมูลเหล่านี้ไปสร้างเป็น 'final_prompt' สำหรับ preprocessingwangchan.py ต่อไป");
            console.log("=============================================");
            // <<< DEBUG END >>>


            // ถ้าผ่าน ให้แสดง Loader
            if (loadingOverlay) {
                loadingOverlay.classList.remove('d-none');
            }
        });
    }

    // --- 2. ส่วนจัดการ Logic ของ Checkbox (ควบคุมการ Disable เท่านั้น) ---
    const noSymptomCheckbox = document.getElementById('check6');
    const spicyFoodCheckbox = document.getElementById('check4');
    const alwaysHurtsCheckbox = document.getElementById('check7');
    
    function manageCheckboxStates() {
        if (!noSymptomCheckbox || !spicyFoodCheckbox || !alwaysHurtsCheckbox) return;

        const isAnySymptomChecked = spicyFoodCheckbox.checked || alwaysHurtsCheckbox.checked;

        noSymptomCheckbox.disabled = isAnySymptomChecked;
        spicyFoodCheckbox.disabled = noSymptomCheckbox.checked;
        alwaysHurtsCheckbox.disabled = noSymptomCheckbox.checked;
    }

    if (noSymptomCheckbox && spicyFoodCheckbox && alwaysHurtsCheckbox) {
        [noSymptomCheckbox, spicyFoodCheckbox, alwaysHurtsCheckbox].forEach(checkbox => {
            checkbox.addEventListener('change', manageCheckboxStates);
        });
    }

    // --- 3. ส่วนจัดการการแสดง Modal ผลลัพธ์ ---
    const resultImageDataElement = document.getElementById('result-image-data');
    if (resultImageDataElement) {
        const imageUrl = resultImageDataElement.getAttribute('data-url');
        
        if (imageUrl) {
            const outputModalElement = document.getElementById('outputModal');
            if (outputModalElement) {
                const outputModal = new bootstrap.Modal(outputModalElement);
                outputModal.show();
                if (loadingOverlay) {
                    loadingOverlay.classList.add('d-none');
                }
            }
        }
    }

    // --- 4. ส่วนจัดการไฟล์อินพุต ---
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            if (!this.value) return;
            const allowedExtensions = /(\.jpg|\.jpeg|\.png|\.bmp)$/i;
            if (!allowedExtensions.exec(this.value)) {
                alert('กรุณาอัปโหลดไฟล์รูปภาพที่ถูกต้อง (JPG, JPEG, PNG, BMP)');
                this.value = '';
            }
        });
    }

    // เรียกใช้ฟังก์ชันครั้งแรกเมื่อหน้าเว็บโหลดเสร็จ
    manageCheckboxStates();
    
    const resultTrigger = document.getElementById('result-data-trigger');
    if (resultTrigger) {
        const outputModalElement = document.getElementById('outputModal');
        if (outputModalElement) {
            const outputModal = new bootstrap.Modal(outputModalElement);
            outputModal.show();
            if (loadingOverlay) {
                loadingOverlay.classList.add('d-none');
            }
        }
    }
});

const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});