class Modal {
    constructor(vehicle) {
      this.vehicle = vehicle;
  
      this.modalDiv;
      this.initModal();
    }
    toggleModal(html) {
      if (this.modalDiv) {
        const modalBody = this.modalDiv.querySelector('#ac-modal-body');
        modalBody.innerHTML = '';
        if (html) {
          modalBody.appendChild(html.initForm());
        }
      }
      const body = document.querySelector('body');
      const modal = document.querySelector('.modal');
      modal.classList.toggle('opacity-0');
      modal.classList.toggle('pointer-events-none');
      body.classList.toggle('modal-active');
    }
    initModal() {
      // Create a new div element
      const modalDiv = document.createElement('div');
      modalDiv.classList.add(
        'modal',
        'z-50',
        'opacity-0',
        'pointer-events-none',
        'fixed',
        'w-full',
        'h-full',
        'top-0',
        'left-0',
        'flex',
        'items-center',
        'justify-center'
      );
      modalDiv.innerHTML = `
          <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
          <div class="modal-container bg-white w-11/12 md:w-3/4 h-3/4 lg:h-11/12 mx-auto rounded shadow-lg z-50 overflow-y-scroll relative no-scrollbar">
            <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
              <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
              </svg>
              <span class="text-sm">(Esc)</span>
            </div>
  
            <div class="modal-content py-4 text-left px-6">
              <!--Title-->
              <div class="flex justify-between items-center pb-3">
                  <p class="text-2xl font-bold">Private Vehicle Appointment Booking</p>
                      <div class="modal-close cursor-pointer z-50">
                  <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                  </svg>
                </div>
              </div>
              <!-- BODY -->
              <div id="ac-modal-body"></div>
            </div>
          </div>
          `;
  
      const overlay = modalDiv.querySelector('.modal-overlay');
  
      overlay.addEventListener('click', function () {
        const activeModal = modalDiv.querySelector('.modal');
        activeModal &&
          activeModal.classList.contains('opacity-0') &&
          this.toggleModal();
      });
  
      var closemodal = modalDiv.querySelectorAll('.modal-close');
      for (var i = 0; i < closemodal.length; i++) {
        closemodal[i].addEventListener('click', this.toggleModal);
      }
  
      document.onkeydown = (evt) => {
        evt = evt || window.event;
        var isEscape = false;
        if ('key' in evt) {
          isEscape = evt.key === 'Escape' || evt.key === 'Esc';
        } else {
          isEscape = evt.keyCode === 27;
        }
        if (isEscape && document.body.classList.contains('modal-active')) {
          this.toggleModal();
        }
      };
      this.modalDiv = modalDiv;
      return modalDiv;
    }
  }
  document.addEventListener('DOMContentLoaded', function () {
    
  });