yessssssssssssßssssssssssssssssssssssss

// Function to track parcel status and fetch data from backend (Java Servlet)
function trackParcel() {
const trackingID = document.getElementById("trackingID").value;
const resultDiv = document.getElementById("trackingResult");

// Fetch data from Java servlet via an API
fetch(`YourServletURL?trackingID=${trackingID}`) // Replace with your actual servlet URL
    .then(response => response.json())
    .then(parcel => {
        if (parcel && parcel.status) {
            resultDiv.innerHTML = `<p>Status: <strong>${parcel.status}</strong></p>`;
            handleParcelStatus(parcel.status);  // Pass the status to the JS filling logic
        } else {
            resultDiv.innerHTML = "<p>Tracking ID not found. Please try again.</p>";
            resetProgress();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        resultDiv.innerHTML = "<p>Failed to fetch data. Please try again.</p>";
        resetProgress();
    });

}

// Function to handle the parcel status and fill progress accordingly
function handleParcelStatus(status) {
let progressStep;

switch (status) {
    case "Ordered":
        progressStep = 1;
        break;
    case "Dispatched":
        progressStep = 2;
        break;
    case "In Transit":
        progressStep = 3;
        break;
    case "Out for Delivery":
        progressStep = 4;
        break;
    case "Delivered":
        progressStep = 5;
        break;
    default:
        progressStep = 0;  // If the status is unknown or not found
}

if (progressStep > 0) {
    animateProgress(progressStep);
} else {
    resetProgress();
}

}

function animateProgress(step) {
resetProgress(); // Reset all circles and progress bar

const progressFill = document.getElementById("progressFill");
const totalDuration = 5;  // Total animation duration in seconds
const stepPercentage = 25;  // 25% for each step (as there are 4 intervals)

// Set the width of the progress bar based on the step with smooth transition
progressFill.style.transition = `width ${totalDuration / 5}s ease`;
progressFill.style.width = ((step - 1) * stepPercentage) + "%";

// Wait for the progress bar to fill before activating circles
for (let i = 1; i <= step; i++) {
    setTimeout(() => {
        const circle = document.getElementById(`step${i}`);
        circle.classList.add('active');

        if (i < step) {
            circle.classList.add('completed');
        }
    }, ((i - 1) * totalDuration * 1000 / 5));  // Adjust the timing for each step
}

}

function resetProgress() {
// Reset all circles and progress bar to inactive state
for (let i = 1; i <= 5; i++) {
const circle = document.getElementById(step${i});
circle.classList.remove('active');
circle.classList.remove('completed');
}

// Reset the progress bar fill
const progressFill = document.getElementById("progressFill");
progressFill.style.transition = 'none';
progressFill.style.width = "0%";

}