<form id="stepByStepForm" class="form">
   <ul class="progress-bar">
      <li class="progress-bar__dot full"></li>
      <li class="progress-bar__connector"></li>
      <li class="progress-bar__dot"></li>
      <li class="progress-bar__connector"></li>
      <li class="progress-bar__dot"></li>
   </ul>

   <div class="step step1">
      <div class="input-group">
         <label for="firstname">First name</label>
         <input type="text" placeholder="James" name="firstname" id="firstname">
      </div>
      <div class="input-group">
         <label for="lastname">Last name</label>
         <input type="text" placeholder="Smith" name="lastname" id="lastname">
      </div>
   </div>

   <div class="step step2 hidden">
      <div class="input-group">
         <label for="mail">E-mail</label>
         <input type="mail" placeholder="jamessmith@gmail.com" name="mail" id="mail">
      </div>
      <div class="input-group">
         <label for="phone">Phone</label>
         <input type="text" placeholder="06 XX XX XX XX" name="phone" id="phone">
      </div>
   </div>

   <div class="step step3 hidden">
      <div class="input-group">
         <label for="address">Address</label>
         <input type="text" placeholder="221B Baker Street" name="address" id="address">
      </div>
      <div class="input-group">
         <label for="country">Country</label>
         <input type="text" placeholder="United States" name="country" id="country">
      </div>
   </div>

   <div class="button-group">
      <button id="previous" class="disabled button" disabled>
         previous
      </button>
      <button id="next" class="button">
         next
      </button>
   </div>
   <div class="button-group">
      <button id="validate" type="submit" class="hidden button">
         Submit
   </button>
   </div>

</form>

$darkgrey: #33312E;
$orange: #ff8552;
$lightgrey: #e6e6e6;
$lightblue: #A2C7E5;
$green: #1A936F;

html {
   background-color: $lightblue;
}

.hidden {
   display: none;
}

.button {
   width: 140px;
   cursor: pointer;
   padding: 1em;
   border-radius: 0.2em;
   border: none;
   color: white;
   font-weight: bold;
   font-size: 1em;
   transition: all .5s ease;
   background-color: $orange;

   &:hover {
      background-color: darken($orange, 15%);
   }
   &.disabled {
      opacity: 0.5;
      &:hover{
       background-color: $orange;
      }
   }
}
.form {
   width: 20em;
   margin: auto;
   margin-top:5em;

   padding: 5em;
   padding-top: 2em;
   padding-bottom: 2em;
   background-color: white;
   font-family: "Raleway", sans-serif;
   color: $darkgrey;
   border-radius: 0.2em;
   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
   .progress-bar {
      width: 100%;
      list-style-type: none;
      display: flex;
      padding: 0;
      justify-content: center;
      margin-bottom: 3.5em;
      
      li.progress-bar__dot {
         display: block;
         width: 0.6em;
         border-radius: 1000em;
         height: 0.6em;
         border: 0.2em solid $orange;
         background-color: white;
         cursor:pointer;
         transition: all .5s ease;

         &.full {
            background-color: $orange;
         }
      }
      li.progress-bar__connector {
         display: block;
         width: 5em;
         border-radius: 1000em;
         height: 0.1em;
         background-color: $orange;
         margin-top: 0.45em;
      }
   }
   label {
      font-weight: bold;
      font-size: 1.2em;
   }
   input {
      width: 100%;
      padding: 1.3em;
      margin-bottom: 3em;
      box-sizing: border-box;
      margin-top: 1em;
      border: none;
      border-radius: 0.5em;
      background-color:$lightgrey;
      font-size:1em;
      font-family: "Raleway", sans-serif;
      &:focus {
         border: none;
      }
   }
   .button-group {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top:50px;
   }
   
   button#validate{
      margin:auto;
      background-color: $green;
      width:12em;
      &:hover {
            background-color:darken($green, 10%);
      }
   }
}

const previousButton = document.getElementById("previous")
const nextButton = document.getElementById("next")
const submitButton = document.getElementById('validate')
const form = document.getElementById('stepByStepForm')
const dots = document.getElementsByClassName('progress-bar__dot')
const numberOfSteps = 3
let currentStep = 1

for(let i = 0 ; i < dots.length ; ++i){
   dots[i].addEventListener('click', ()=>{
     goToStep(i+1) 
   })
}

previousButton.onclick = goPrevious
nextButton.onclick = goNext


function goNext(e) {
   e.preventDefault()
   currentStep += 1
   goToStep(currentStep)
}

function goPrevious(e) {
   e.preventDefault()
   currentStep -= 1
   goToStep(currentStep)
}

function goToStep(stepNumber){   
   currentStep = stepNumber
   
   let inputsToHide = document.getElementsByClassName('step')
   let inputs = document.getElementsByClassName(`step${currentStep}`)
   let indicators = document.getElementsByClassName('progress-bar__dot')
   
   for(let i = indicators.length-1; i >= currentStep ; --i){
      indicators[i].classList.remove('full')
   }
   
   for(let i = 0; i < currentStep; ++i){
      indicators[i].classList.add('full')
   }
   
   //hide all input
   for (let i = 0; i < inputsToHide.length; ++i) {
      hide(inputsToHide[i])
   }
   
   //only show the right one
   for (let i = 0; i < inputs.length; ++i) {
      show(inputs[i])
   }
   
   //if we reached final step
   if(currentStep === numberOfSteps){
      enable(previousButton)
      disable(nextButton)
      show(submitButton)
   }
   
   //else if first step
   else if(currentStep === 1){
     disable(previousButton)
      enable(next)
      hide(submitButton)
   }
   
   else {
      enable(previousButton)
      enable(next)
      hide(submitButton)
   }
}

function enable(elem) {
   elem.classList.remove("disabled");
   elem.disabled = false;
}

function disable(elem) {
   elem.classList.add("disabled");
   elem.disabled = true;
}

function show(elem){
   elem.classList.remove('hidden')
}

function hide(elem){
   elem.classList.add('hidden')
}