function solve() {

  let fields = Array.from(document.querySelectorAll('input')).slice(0, 5)
  let nextBtn = document.querySelector('#next-btn')
  let infoSection = document.querySelector('.info-list')
  let confirmSection = document.querySelector('.confirm-list')
  let verification = document.getElementById('verification');

    nextBtn.addEventListener("click", onClick);
  function onClick(e) {
    e.preventDefault();
    let[firstName, lastName, dateIn, dateOut, count] = fields
    if(!firstName.value || !lastName.value || !dateIn.value
       || !dateOut.value || !count.value) return

    // point 1, 2
    infoSection.innerHTML = `<li class="reservation-content">
       <article>
         <h3>Name: ${firstName.value} ${lastName.value}</h3>
         <p>From date: ${dateIn.value}</p>
         <p>To date: ${dateOut.value}</p>
         <p>For ${count.value} people</p>
       </article>
       <button class="edit-btn">Edit</button>
       <button class="continue-btn">Continue</button>
    </li>
    `

        let editFirstName = firstName.value;
        let editLastName = lastName.value;
        let editDateIn = dateIn.value;
        let editDateOut = dateOut.value;
        let editcount = count.value;

        firstName.value = "";
    lastName.value = "";
    dateIn.value = "";
    dateOut.value = "";
    count.value = "";
   buttonsState(true)

   document.querySelector('.edit-btn').addEventListener('click', onEdit)
  function onEdit(){
        firstName.value = editFirstName;
        lastName.value = editLastName;
        dateIn.value = editDateIn;
        dateOut.value = editDateOut;
        count.value = editcount;
   buttonsState(false)
   infoSection.innerHTML = ''

}

function buttonsState(nextDisabled = true){
  if(nextDisabled){
      nextBtn.disabled = true
      document.querySelector('.edit-btn').disabled = false
      document.querySelector('.continue-btn').disabled = false
  } else {
      nextBtn.disabled = false
     if(document.querySelector('.edit-btn') != null) {      // point 3
      document.querySelector('.edit-btn').disabled = true
      document.querySelector('.continue-btn').disabled = true
     }
  }
}

document.querySelector('.continue-btn').addEventListener('click', onContinue)
function onContinue(){

    // point 1, 2, 4
  confirmSection.innerHTML = `<li class="reservation-content">
       <article>
         <h3>Name: ${editFirstName} ${editLastName}</h3>
         <p>From date: ${editDateIn}</p>
         <p>To date: ${editDateOut}</p>
         <p>For ${editcount} people</p>
       </article>
  <button class="confirm-btn">Confirm</button>
  <button class="cancel-btn">Cancel</button>
</li>
`
infoSection.innerHTML = ''

document.querySelector('.confirm-btn').addEventListener('click', onConfirm);
  function onConfirm() {
    confirmSection.innerHTML = ''
     buttonsState(false)

      verification.setAttribute('class', 'reservation-confirmed');
      verification.textContent = 'Confirmed.';
  }

  document.querySelector('.cancel-btn').addEventListener('click',onCancel);
  function onCancel() {
    confirmSection.innerHTML = ''
      buttonsState(false)

      verification.setAttribute('class', 'reservation-cancelled');
      verification.textContent = 'Cancelled.';

  }
 }
}

}