window.addEventListener('load', solution);

function solution() {
  const nameElement=document.getElementById('fname');
  const emailElement=document.getElementById('email');
  const phoneElement=document.getElementById('phone');
  const addressElement=document.getElementById('address');
  const postalCodeElement=document.getElementById('code');
  const submitButtonElement=document.getElementById('submitBTN');
  const infoPreviewElement=document.getElementById('infoPreview');
  const editButtonElement=document.getElementById('editBTN');
  const continueButtonElement=document.getElementById ('continueBTN');
  const blockElement=document.getElementById('block');
  const bodyElement=document.querySelector('body');

  submitButtonElement.addEventListener('click', (e)=>{
    e.preventDefault();

    submitButtonElement.disabled=true;
    editButtonElement.disabled=false;
    continueButtonElement.disabled=false;

    const name=nameElement.value;
    const email=emailElement.value;
    const phone=phoneElement.value;
    const address=addressElement.value;
    const code=postalCodeElement.value;

    nameElement.value='';
    emailElement.value='';
    phoneElement.value='';
    addressElement.value='';
    postalCodeElement.value='';

    const nameLi=document.createElement('li');
    nameLi.textContent=`Full Name: ${name}`;
    const emailLi=document.createElement('li');
    emailLi.textContent=`Email: ${email}`;
    const phoneLi=document.createElement('li');
    phoneLi.textContent=`Phone Number: ${phone}`;
    const addressLi=document.createElement('li');
    addressLi.textContent=`Address: ${address}`;
    const codeLi=document.createElement('li');
    codeLi.textContent=`Postal Code: ${code}`;

    editButtonElement.addEventListener('click', (e)=>{
      nameElement.value=name;
      emailElement.value=email;
      phoneElement.value=phone;
      addressElement.value=address;
      postalCodeElement.value=code;


      nameLi.remove();
      emailLi.remove();
      phoneLi.remove();
      addressLi.remove();
      codeLi.remove();



      submitButtonElement.disabled=false;
      editButtonElement.disabled=true;
      continueButtonElement.disabled=true;
    })

    continueButtonElement.addEventListener('click', (e)=>{
      blockElement.remove();

      const newBlockElement=document.createElement('div');
      newBlockElement.setAttribute('id', 'block');

      const messageElement=document.createElement('h3');
      messageElement.textContent="Thank you for your reservation!";

      newBlockElement.appendChild(messageElement);
      bodyElement.appendChild(newBlockElement);
    })

    infoPreviewElement.appendChild(nameLi);
    infoPreviewElement.appendChild(emailLi);
    infoPreviewElement.appendChild(phoneLi);
    infoPreviewElement.appendChild(addressLi);
    infoPreviewElement.appendChild(codeLi);


  })
}