const startDateElement = document.querySelector(".startDate");
const endDateElement = document.querySelector(".endDate");
const mainBar = document.querySelector(".mainBar");
const progressBar = document.querySelector(".progressBar");

const startDate = new Date(startDateElement.textContent);
const endDate = new Date(endDateElement.textContent);
const currentDate = new Date();

// Function to calculate percentage
function calculatePercentage(current, start, end) {
    const passedTime = current - start;
    const totalDuration = end - start;
    return (passedTime / totalDuration) * 100;
}

// Function to set progress bar width and color
function setProgressBar(percentage) {
    progressBar.style.width = percentage + "%";
    if (percentage <= 50) {
        progressBar.classList.add('bg-green-700');
    } else if (percentage <= 80) {
        progressBar.classList.add('bg-yellow-400');
    } else {
        progressBar.classList.add('bg-red-500');
    }
}

if (endDate <= currentDate) {
    progressBar.style.width = "100%";
    progressBar.classList.add('bg-red-500');
} else if (startDate > currentDate) {
    progressBar.style.width = "0%";
} else {
    const percentage = calculatePercentage(currentDate, startDate, endDate);
    setProgressBar(percentage);
}
