<!DOCTYPE html>
<html lang="pt-br">
<head>
  <?php include_once 'application/views/imports/head.php' ?>
  <link rel="stylesheet" href="<?= base_url('assets/site/scripts/plugins/EasyModal/EasyModal.css') ?>">
</head>
<body class="overflow-x-hidden">
  <?php include_once 'application/views/imports/header.php' ?>

  <section class="flex items-center w-screen py-12 bg-cover bg-center bg-no-repeat" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(<?= base_url('assets/uploads/images/intern-banners/' . $banner->image) ?>)">
    <div class="wrapper">
      <h2 class="text-white font-bold uppercase text-center text-xl md:text-4xl leading-relaxed">
        Cotação online
      </h2>
      <ul class="mt-4 flex justify-center items-center text-white">
        <li class="text-white font-semibold"><a href="<?= base_url() ?>">Início</a></li>
        <li class="mx-4">/</li>
        <li class="text-gray-300 font-semibold">Cotação online</li>
      </ul>
    </div>
  </section>

  <section class="py-12 md:py-20 bg-gray-50">
    <div class="wrapper">
      <div class="md:w-3/5 mx-auto bg-white border border-gray-100 shadow-md rounded-md p-6">
        <h2 class="mb-1 text-xl uppercase text-dark font-bold">Cotação Online</h2>
        <p class="text-sm text-gray-600">Precisa de um orçamento? Preencha o formulário, em breve retornaremos.</p>
        
        <?php if ($this->session->flashdata('success')) : ?>
          <div class="alert border-l-8 border-green-800 mt-6 flex items-center justify-between p-4 bg-gray-100 shadow-md rounded-md">
            <div class="flex items-center">
              <div>
                <i class="text-green-800" data-feather="check-circle"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-dark text-sm font-semibold">Sucesso</h3>
                <p class="text-sm text-gray-500"><?= $this->session->flashdata('success') ?></p>
              </div>
            </div>
            <div class="flex items-center">
              <button class="close" title="Fechar">
                <i class="text-dark" data-feather="x-circle"></i>
              </button>
            </div>
          </div>
        <?php endif ?>
        <?php if ($this->session->flashdata('error')) : ?>
          <div class="alert border-l-8 border-red-800 mt-6 flex items-center justify-between p-4 bg-gray-100 shadow-md rounded-md">
            <div class="flex items-center">
              <div>
                <i class="text-red-800" data-feather="x-circle"></i>
              </div>
              <div class="ml-4">
                <h3 class="text-dark text-sm font-semibold">Erro</h3>
                <p class="text-sm text-gray-500"><?= $this->session->flashdata('error') ?></p>
              </div>
            </div>
            <div class="flex items-center">
              <button class="close" title="Fechar">
                <i class="text-dark" data-feather="x-circle"></i>
              </button>
            </div>
          </div>
        <?php endif ?>
        
        <form action="<?= base_url('onlineQuotes/save') ?>" method="post" class="mt-10 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="input-label">CNPJ</label>
            <input type="text" name="cnpj" class="cnpj input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Nome da empresa *</label>
            <input type="text" required name="company_name" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div class="col-span-full">
            <label class="input-label">Email *</label>
            <input type="email" required name="email" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Telefone *</label>
            <input type="text" required name="phone" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Cidade de origem *</label>
            <input type="text" required name="origin_city" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Cidade de destino *</label>
            <input type="text" required name="destination_city" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Peso (KG) *</label>
            <input type="text" required name="weight" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Volume (M³) *</label>
            <input type="text" required name="volume" class="input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <label class="input-label">Valor da mercadoria (R$) *</label>
            <input type="text" required name="merchandise_value" class="money input">
            <label class="input-label--error mt-1"></label>
          </div>
          <div class="col-span-full">
            <label class="input-label">Alguma mensagem adicional?</label>
            <textarea name="message" rows="4" class="input"></textarea>
            <label class="input-label--error mt-1"></label>
          </div>
          <div class="col-span-full">
            <button class="btn btn--primary w-full text-sm">Enviar mensagem</button>
          </div>
        </form>
      </div>
    </div>
  </section>

  <div class="success-modal easy-modal easy-modal--fade">
    <div class="easy-modal__content p-4 rounded-sm">
      <h1 class="text-xl font-semibold">Cotação enviada com sucesso!</h1>
      <p class="text-sm text-gray-600">Aguarde, em breve entraremos em contato</p>
      <div class="mt-8">
        <button class="close-easy-modal w-full btn btn--primary text-sm">Ok</button>
      </div>
    </div>
  </div>

  <div class="error-modal easy-modal easy-modal--fade">
    <div class="easy-modal__content p-4 rounded-sm">
      <h1 class="text-xl font-semibold">Error ao enviar cotação, tente novamente!</h1>
      <div class="mt-8">
        <button class="close-easy-modal w-full btn btn--primary text-sm">Ok</button>
      </div>
    </div>
  </div>

  <?php include_once 'application/views/imports/footer.php' ?>
  <?php include_once 'application/views/imports/scripts.php' ?>

  <script type="module">
    import EasyModal from '<?= base_url('assets/site/scripts/plugins/EasyModal/EasyModal.js') ?>'

    window.addEventListener('load', function () {
      initEasyModal()
      onFormSubmit()
      closeAlert()
    })

    function initEasyModal () {
      const successModal = getEasyModal('.success-modal')
      successModal.start()

      const errorModal = getEasyModal('.error-modal')
      errorModal.start()
    }

    function getEasyModal (el) {
      const modal = new EasyModal({
        el,
        persistent: true,
        open: `${el} .open-easy-modal`,
        close: `${el} .close-easy-modal`
      })

      return modal
    }

    function onFormSubmit () {
      const form = document.querySelector('form')

      form.addEventListener('submit', (event) => {
        event.preventDefault()
        saveForm(form)
      })
    }

    async function saveForm (form) {
      try {
        const url = form.getAttribute('action')
        const body = new FormData(form)
        
        const response = await fetch(url, {
          method: 'POST',
          body
        }).then(response => response.json())

        const { success, error } = response

        if (!success) {
          const errorModal = getEasyModal('.error-modal')
          errorModal.open()
        } else {
          const successModal = getEasyModal('.success-modal')
          successModal.open()
          form.reset()
        }
      } catch (error) {
        console.error(error)
      }
    }

    function closeAlert () {
      const alerts = document.querySelectorAll('.alert')

      alerts.forEach(alert => {
        const close = alert.querySelector('.close')
        close.addEventListener('click', () => {
          alert.remove()
        })
      })
    }
  </script>
</body>
</html>