<div class="container">
  <div class="progress-container">
    <div class="progress-bar"></div>
    <div class="status-bar"></div>

    <div class="circle active">
       <span> Step&nbsp;1</span>
      <i class="fa-solid fa-check"></i>
    </div>
    <div class="circle">
       <span> Step&nbsp;2</span>
      <i class="fa-solid fa-check"></i>
    </div>
    <div class="circle">
     <span> Step&nbsp;3</span>
      <i class="fa-solid fa-check"></i>
    </div>
    <div class="circle">
      <span> Step&nbsp;4</span>
      <i class="fa-solid fa-check"></i>
    </div>
  </div>
  <div class="buttons">
    <button class="prev-btn">Previous</button>
    <button class="next-btn">Next</button>
    <button class="submit">Submit</button>
  </div>
</div>

<div class="message">
  <i class="fa-solid fa-check"></i>
  <p>Your details have been submitted</p>
</div>

body {
  min-height: 100vh;
  background-color: #f3f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
}

.container {
  width: 700px;
  height: 300px;
  /* display: none; */
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 50px auto;
  position: relative;
  margin-bottom: 100px;
}
.progress-bar {
  width: 99%;
  height: 5px;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 0;

  z-index: -1;
}
.status-bar {
  width: 100%;
  height: 5px;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
}

.circle {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  position: relative;
}
.circle span {
  position: absolute;
  top: 150%;
  left: 9%;
  color: #141d0d;
}

.circle i {
  position: absolute;
  top: 35%;
  left: 35%;
  display: none;
}
.circle.active i {
  display: block;
}

.active {
  display: block;
  background-color: #43880f;
}
.animate {
  animation: fill 0.5s ease-in-out 0.4s forwards;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  color: white;
  width: 100px;
  padding: 10px 20px;
  margin: 20px auto;
  border-radius: 3px;
  background-color: #43880f;
  border: none;
}
.next {
  color: white;
}
.submit {
  display: none;
}
button:disabled {
  cursor: not-allowed;
  background-color: gray;
}

.message {
  width: 500px;
  height: 300px;
  border-radius: 5px;
  border: 2px solid;
  gap: 10px;
  display: block;
  text-align: center;
  padding: 100px 5px;
  display: none;
}

.message i {
  margin-bottom: 50px;
  font-size: 25px;
  padding: 20px 20px;
  background-color: rgb(230, 111, 196);
  border-radius: 50%;
  animation: fillIcon 0.8s ease alternate;
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #43880f;
  }
}

@keyframes fillIcon {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

document.addEventListener("DOMContentLoaded", function () {
        const progressBar = document.querySelectorAll(".progress-bar")[0];
        const StatusBar = document.querySelectorAll(".status-bar")[0];

        const circles = document.querySelectorAll(".circle");
        const previousBtn = document.querySelector(".prev-btn");
        const nextBtn = document.querySelector(".next-btn");
        const submitBtn = document.querySelector(".submit");

        let activeStepperIndex = 0;

        previousBtn.addEventListener("click", function () {
        previousBtn.disabled = activeStepperIndex === 0;

          activeStepperIndex = Math.max(activeStepperIndex - 1, 0);
          const percentageWidth =
            (activeStepperIndex / (circles.length - 1)) * 100;
          StatusBar.style.width = percentageWidth + "%";
          StatusBar.style.backgroundColor = "green";
          updateStepper();
        });

        nextBtn.addEventListener("click", function () {
          activeStepperIndex++;
          console.log(activeStepperIndex);
          previousBtn.addEventListener("click", function () {});
          const percentageWidth =
            (activeStepperIndex / (circles.length - 1)) * 100;
          StatusBar.style.width = percentageWidth + "%";
          StatusBar.style.backgroundColor = "green";

          updateStepper();
        });

     
        function updateStepper() {
        previousBtn.disabled = activeStepperIndex === 0;

          circles.forEach((circle, index) => {
            const checkIcon = circle.querySelector("i");
            
            console.log(index);
        

            if (index === activeStepperIndex) {
              
              checkIcon.style.display = "block";
              circle.classList.add("animate");
            }
            if (activeStepperIndex === circles.length - 1) {
              nextBtn.style.display = "none";
              submitBtn.style.display = "block";
            }

            if(index >activeStepperIndex){
              circle.classList.remove("animate")

            }
            if(!(activeStepperIndex === circles.length - 1)){
              nextBtn.style.display = "block";
              submitBtn.style.display = "none";
            }
            
          });
        }
        

        const message = document.querySelector(".message");
        const container = document.querySelector(".container");

        submitBtn.addEventListener("click", function () {
          message.style.display = "block";
          container.style.display = "none";
        });
      });