<!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">
        Contato
      </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">Contato</li>
      </ul>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div class="md:w-3/5 mx-auto">
        <p class="text-sm text-center text-gray-500">Precisa conversar?</p>
        <h2 class="my-2 text-xl text-center uppercase font-bold">Nos envie uma mensagem</h2>
        <span style="height: 2px" class="mx-auto block w-32 bg-primary"></span>
        <form id="contact-form" action="<?= base_url('contact/saveContactMessage') ?>" method="post" class="mt-10 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <input type="text" required name="name" placeholder="Nome / Empresa *" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none">
            <label class="input-label--error mt-1"></label>
          </div>
          <div>
            <input type="text" required name="phone" placeholder="Telefone / WhatsApp *" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none">
            <label class="input-label--error mt-1"></label>
          </div>
          <div class="col-span-full">
            <input type="email" required name="email" placeholder="Email *" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none">
            <label class="input-label--error mt-1"></label>
          </div>
          <div class="col-span-full">
            <textarea name="message" rows="4" placeholder="Explique a sua necessidade" class="text-sm w-full border boder-dark p-2 rounded-sm outline-none"></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>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <h2 class="font-semibold text-xl text-dark uppercase">Faça uma visita</h2>
      <span style="height: 2px" class="mt-2 block w-24 bg-primary"></span>

      <p class="text-sm leading-relaxed mt-4">Rua Raineri Petrini, 1881
        Bairro Santo Antônio, Farroupilha - RS</p>
      <div class="mt-10">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3481.1589400217936!2d-51.346725685330064!3d-29.248283982178904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x951c1fc3bcda9813%3A0x2a41da14e92029e0!2sTransportadora%20Tempo%20Maioli!5e0!3m2!1spt-BR!2sbr!4v1627058437927!5m2!1spt-BR!2sbr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </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">Mensagem enviada com sucesso!</h1>
      <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 mensagem, 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()
      onContactFormSubmit()
    })

    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 onContactFormSubmit () {
      const form = document.querySelector('form#contact-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())

        console.log(response)

        if (response.success === false) {
          const errorModal = getEasyModal('.error-modal')
          errorModal.open()
        } else {
          const successModal = getEasyModal('.success-modal')
          successModal.open()
          form.reset()
        }
      } catch (error) {
        console.error(error)
      }
    }
  </script>
</body>
</html>