src/static/script.js

document.addEventListener('DOMContentLoaded', function() {
    
    //  INITIALIZE ALL NUMBER INPUTS 
    const containers = document.querySelectorAll('.number-input-container');

    containers.forEach(container => {
        const input = container.querySelector('.number-input');
        const decreaseBtn = container.querySelector('.decrease-btn');
        const increaseBtn = container.querySelector('.increase-btn');

        // Helper: Validate and clamp value based on min/max attributes
        function validateAndClamp(value) {
            const min = parseFloat(input.getAttribute('min')) || 0;
            const max = parseFloat(input.getAttribute('max')) || Infinity;
            const step = parseFloat(input.getAttribute('step')) || 1;
            
            if (value > max) return max;
            if (value < min) return min;
            return value;
        }

        // Helper: Update value logic
        function updateValue(change) {
            let current = parseFloat(input.value) || 0;
            let step = parseFloat(input.getAttribute('step')) || 1;
            
            // Fix float math issues (e.g. 0.1 + 0.2)
            let newValue = current + (change * step);
            newValue = Math.round(newValue * 1000) / 1000;

            const clamped = validateAndClamp(newValue);
            input.value = clamped;
            input.dispatchEvent(new Event('input')); // Trigger events
        }

        // Button Listeners
        decreaseBtn.addEventListener('click', () => updateValue(-1));
        increaseBtn.addEventListener('click', () => updateValue(1));

        // Validation on Blur (Flash Red if corrected)
        input.addEventListener('blur', function() {
            let current = parseFloat(this.value) || 0;
            const clamped = validateAndClamp(current);
            
            if (current !== clamped) {
                this.value = clamped;
                this.style.color = '#f87171';
                setTimeout(() => this.style.color = '#ffffff', 300);
            }
        });

        // Mouse Wheel Support
        input.addEventListener('wheel', function(e) {
            if (document.activeElement === input) {
                e.preventDefault();
                updateValue(e.deltaY < 0 ? 1 : -1);
            }
        });
    });
});

//  PREDICTION LOGIC (Sends data to Flask) 
async function makePrediction() {
    const submitBtn = document.querySelector('.submit-btn');
    const originalText = submitBtn.innerText;
    
    // Loading State
    submitBtn.innerText = "Analyzing...";
    submitBtn.disabled = true;
    submitBtn.style.opacity = "0.7";

    // Collect Data
    const data = {
        Pregnancies: Number(document.getElementById('Pregnancies').value),
        Glucose: Number(document.getElementById('Glucose').value),
        BloodPressure: Number(document.getElementById('BloodPressure').value),
        SkinThickness: Number(document.getElementById('SkinThickness').value),
        Insulin: Number(document.getElementById('Insulin').value),
        BMI: Number(document.getElementById('BMI').value),
        DiabetesPedigreeFunction: Number(document.getElementById('DiabetesPedigreeFunction').value),
        Age: Number(document.getElementById('Age').value)
    };

    try {
        // Send to Flask
        const response = await fetch('/predict', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        const result = await response.json();

        // Update UI
        const resultCard = document.getElementById('resultCard');
        
        const isHighRisk = result.prediction === 1;
        const colorClass = isHighRisk ? 'danger-color' : 'safe-color';
        const barColor = isHighRisk ? '#f87171' : '#34d399';
        const title = isHighRisk ? 'High Risk' : 'Low Risk';
        const message = isHighRisk 
            ? 'The model suggests a high probability of diabetes.' 
            : 'The model suggests a low probability of diabetes.';

        resultCard.innerHTML = `
            <div class="result-box">
                <p style="color: #9ca3af; font-size: 0.9rem; letter-spacing: 1px; margin-bottom:10px;">PREDICTION RESULT</p>
                <div class="risk-level ${colorClass}">${title}</div>
                <p style="margin-bottom: 20px; color: #e0e0e0;">${message}</p>
                
                <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
                    <div style="display:flex; justify-content:space-between; font-size: 0.9rem; color: #ccc; margin-bottom: 8px;">
                        <span>Confidence Score</span>
                        <span style="color: #fff; font-weight: bold;">${result.confidence.toFixed(1)}%</span>
                    </div>
                    <div class="confidence-bar-bg">
                        <div class="confidence-bar-fill" style="width: ${result.confidence}%; background-color: ${barColor};"></div>
                    </div>
                </div>
            </div>
        `;

    } catch (error) {
        console.error("Error:", error);
        alert("Server Error: Make sure the Flask app is running.");
    }

    // Reset Button
    submitBtn.innerText = originalText;
    submitBtn.disabled = false;
    submitBtn.style.opacity = "1";
}