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);

// Get the current date
const currentDate = new Date();

if (endDate <= currentDate) {
    // If the end date is before or equal to the current date
    progressBar.style.width = "100%";
    progressBar.classList.add('bg-red-500');
} else if (startDate > currentDate) {
    // If the start date is after the current date
    progressBar.style.width = "0%";
} else {
    // Calculate the passed time in milliseconds
    const passedTime = currentDate - startDate;

    // Calculate the total project duration in milliseconds
    const totalDuration = endDate - startDate;

    // Calculate the percentage of passed time
    const percentage = (passedTime / totalDuration) * 100;

    // Set the width of progressBar based on the 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 if (percentage <= 100) {
        progressBar.classList.add('bg-red-500');
    }
}