<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="../images/logo-unipix-sm.png" />
    <title>Unipix</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />

    <style>
      html body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Montserrat, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        color: #464646;
        line-height: 1.218rem;
        background-color: transparent;
      }

      .form {
        max-width: 100%;
        padding: 2rem;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .form-field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .form-field input[type="text"] {
        height: 2.5rem;
        border: 1px solid #c6c6c6;
        border-radius: 0.75rem;
        padding: 0 1rem;
      }

      .form-field input[type="text"]:focus {
        outline: 2px solid #00ba80;
      }

      .form-field input[type="text"]::placeholder {
        color: #9a9a9a;
      }

      .form-field select {
        height: 2.5rem;
        border: 1px solid #c6c6c6;
        border-radius: 0.75rem;
        padding: 0 1rem;
        background-color: #ffffff;
      }

      .form-field select:focus {
        outline: 2px solid #00ba80;
      }

      .form-field select::placeholder {
        color: #9a9a9a;
      }

      .form-field textarea {
        height: 7.375rem;
        border: 1px solid #c6c6c6;
        border-radius: 0.75rem;
        padding: 1rem;
      }

      .form-field textarea:focus {
        outline: 2px solid #00ba80;
      }

      .form-field textarea::placeholder {
        color: #9a9a9a;
      }

      .radio-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .radio {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
      }

      .form-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .form-buttons input[type="submit"] {
        width: 17.25rem;
        height: 3.937rem;
        border: 1px solid #00ba80;
        border-radius: 0.75rem;
        background-color: #00ba80;
        color: #ffffff;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.218rem;
      }

      .form-buttons input[type="submit"]:hover {
        cursor: pointer;
        background-color: #00a36f;
      }

      .required {
        border: 2px solid #ff0000 !important;
      }

      input[type="radio"] {
        width: 1.185rem;
        height: 1.185rem;
      }

      small {
        color: #ff0000;
      }

      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
      }

      .modal-content {
        width: 100%;
        height: 100%;

        background-color: #fefefe;
        padding: 8rem 1.25rem;
        border: 1px solid #888;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
      }

      .modal-content p {
        font-size: 1.875rem;
      }

      .close {
        width: 17.25rem;
        height: 3.937rem;
        border: 1px solid #00ba80;
        border-radius: 0.75rem;
        background-color: #00ba80;
        color: #ffffff;
        font-weight: 700;
        font-size: 1rem;
        line-height: 1.218rem;
      }

      .close:hover {
        cursor: pointer;
        background-color: #00a36f;
      }

      .modal.open {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .ops {
        color: #ff0000;
      }

      #cliente-vonex.notselected span {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <form id="form" class="form">
      <div id="cliente-vonex" class="form-field">
        <span>Já é cliente Vonex? <small>*</small></span>
        <div class="radio-container">
          <div class="radio">
            <input type="radio" id="clienteY" name="cliente" value="Y" />
            <label for="clienteY">Sim sou cliente Vonex</label>
          </div>
          <div class="radio">
            <input type="radio" id="cliente" name="cliente" value="N" />
            <label for="cliente">Não</label>
          </div>
        </div>
      </div>

      <div class="form-field">
        <span>Com qual setor deseja se comunicar? <small>*</small></span>
        <select id="setor" name="setor">
          <option disabled selected value="">Selecione um setor...</option>
          <option value="comercial">Comercial</option>
          <option value="rh">RH</option>
          <option value="financeiro">Financeiro</option>
          <option value="suporte">Suporte técnico</option>
        </select>
      </div>

      <div class="form-field">
        <span>Nome</span>
        <input
          type="text"
          id="nome"
          name="nome"
          placeholder="Nome"
          autocomplete="off"
        />
      </div>

      <div class="form-field">
        <span>E-mail <small>*</small></span>
        <input
          type="text"
          id="email"
          name="email"
          placeholder="E-mail"
          autocomplete="off"
        />
      </div>

      <div class="form-field">
        <span>Telefone <small>*</small></span>
        <input
          type="text"
          id="fone"
          name="fone"
          placeholder="Fone"
          autocomplete="off"
        />
      </div>

      <div class="form-field">
        <span>Como podemos te ajudar?</span>
        <textarea
          id="mensagem"
          name="mensagem"
          placeholder="Mensagem"
          autocomplete="off"
        ></textarea>
      </div>

      <div class="form-buttons">
        <input type="submit" id="enviar" value="Enviar mensagem" />
      </div>
    </form>

    <div id="modal-success" class="modal">
      <div class="modal-content">
        <p>Mensagem enviada com sucesso!</p>
        <button id="modal-success-button" type="button" class="close">
          Voltar para enviar mensagem
        </button>
      </div>
    </div>

    <div id="modal-error" class="modal">
      <div class="modal-content">
        <p class="ops">Ops!</p>
        <p>Tivemos um erro inesperado.</p>
        <button id="modal-error-button" type="button" class="close">
          Voltar para enviar mensagem
        </button>
      </div>
    </div>

    <script>
      const form = document.getElementById("form");
      const vonex = document.getElementById("cliente-vonex");
      const inputs = document.querySelectorAll("input, select");
      const foneInput = document.getElementById("fone");
      const enviar = document.getElementById("enviar");
      const modalSuccess = document.getElementById("modal-success");
      const modalSuccessButton = document.getElementById(
        "modal-success-button"
      );
      const modalError = document.getElementById("modal-error");
      const modalErrorButton = document.getElementById("modal-error-button");

      form.addEventListener("submit", (e) => e.preventDefault());

      inputs.forEach((input) => {
        input.addEventListener("focus", () => {
          input.classList.remove("required");
        });
      });

      foneInput.addEventListener("input", (e) => {
        const value = e.target.value.replace(/\D/g, "").substring(0, 11);
        const regex =
          value.length >= 11
            ? /(\d{2})(\d{5})(\d{4})/g
            : /(\d{2})(\d{4})(\d{4})/g;
        const subst = `($1) $2-$3`;
        const result = value.replace(regex, subst);

        e.target.value = result;
      });

      enviar.addEventListener("click", async () => {
        const cliente = document.querySelector('input[name="cliente"]:checked');
        const checked = cliente ? cliente.value : "";

        const setor = document.getElementById("setor").value;
        const nome = document.getElementById("nome").value;
        const email = document.getElementById("email").value;
        const fone = document.getElementById("fone").value;
        const mensagem = document.getElementById("mensagem").value;

        if (!checked) {
          document.getElementById("cliente-vonex").classList.add("notselected");
        }

        if (!setor) {
          document.getElementById("setor").classList.add("required");
        }

        if (!email) {
          document.getElementById("email").classList.add("required");
        }

        if (!fone) {
          document.getElementById("fone").classList.add("required");
        }

        if (!checked || !setor || !email || !fone) {
          return;
        }

        const data = {
          cliente: checked,
          setor,
          nome,
          email,
          fone,
          mensagem,
        };

        try {
          const url = new URL(window.location.href);
          const response = await fetch(url, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
          }).then((res) => res.json());

          if (response.success) {
            modalSuccess.classList.add("open");
            form.reset();
          } else {
            modalError.classList.add("open");
          }
        } catch (error) {
          modalError.classList.add("open");
        }
      });

      modalSuccessButton.addEventListener("click", () => {
        modalSuccess.classList.remove("open");
      });

      modalErrorButton.addEventListener("click", () => {
        modalError.classList.remove("open");
      });

      vonex.addEventListener("click", () => {
        vonex.classList.remove("notselected");
      });
    </script>
  </body>
</html>
