Embed

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, viewport-fit=cover">
  <title>Feedback de Atendimento</title>

  <style>
    :root {
      --bg:#F1F8F4; --card:#ffffff; --muted:#6b7368; --text:#3F473C;
      --accent:#567861; --accent-2:#619B75; --danger:#c14254; --ok:#2e8053;
      --ink-weak:#3F473C22; --ring:#619B7533;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--text);
      background:var(--bg);
    }
    main{max-width:700px;margin:0 auto;padding:24px;}
    h1{text-align:center;margin-bottom:16px;font-size:22px}
    h2{font-size:18px;margin-bottom:8px}
    h3{font-size:14px;margin-bottom:16px;font-weight:500;color:var(--muted)}

    .card{
      background:var(--card);
      border:1px solid var(--ink-weak);
      border-radius:16px;
      padding:20px;
      margin-bottom:20px;
      box-shadow:0 6px 22px rgba(63,71,60,.08);
    }

    /* radio + checkbox vital assist style */
    input[type="radio"],
    input[type="checkbox"] {
      appearance:none;
      width:20px;height:20px;
      border:2px solid var(--accent-2);
      border-radius:50%;
      position:relative;
      cursor:pointer;
      transition:all .2s ease;
      flex-shrink:0;
    }

    input[type="checkbox"] {
      border-radius:6px;
    }

    input[type="radio"]:checked::before {
      content:"";
      position:absolute;
      top:4px;left:4px;
      width:8px;height:8px;
      background:var(--accent-2);
      border-radius:50%;
    }

    input[type="checkbox"]:checked {
      background:var(--accent-2);
      border-color:var(--accent-2);
    }
    input[type="checkbox"]:checked::after {
      content:"✓";
      position:absolute;
      color:#fff;
      font-size:13px;
      left:3px;
      top:0px;
    }

    label.option {
      display:flex;
      align-items:center;
      gap:10px;
      border:1px solid var(--ink-weak);
      border-radius:12px;
      padding:12px;
      margin-bottom:10px;
      cursor:pointer;
      transition:all .2s ease;
      background:#fff;
    }
    label.option:hover {
      border-color:var(--accent-2);
      box-shadow:0 2px 8px rgba(63,71,60,.08);
    }

    .btn{
      width:100%;
      padding:14px;
      font-size:16px;
      font-weight:700;
      border:0;
      border-radius:12px;
      cursor:pointer;
      color:#fff;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      margin-top:10px;
    }

    .status{
      text-align:center;
      font-size:14px;
      margin-top:12px;
    }
    .status.ok{color:var(--ok);}
    .status.error{color:var(--danger);}
  </style>
</head>
<body>
  <main>
    <div class="card">
      <h2>Qual foi o motivo para não seguir com o atendimento?</h2>

      <form id="followForm">
        <div id="reasonsContainer">
          
        </div>

        
          <label class="option">
            <input type="checkbox" id="contact" checked>
            Desejo ser contatado futuramente
          </label>

        <button type="submit" class="btn">Enviar Resposta</button>
        <div class="status" id="formStatus"></div>
      </form>
    </div>
  </main>

  <script>
    const BASE = "https://api.vitalassisthomecare.com.br/lifeassist/v1";
    const reasonsContainer = document.getElementById("reasonsContainer");
    const formStatus = document.getElementById("formStatus");
    const form = document.getElementById("followForm");

    // Captura phone da query string
    const params = new URLSearchParams(window.location.search);
    const phone = params.get("phone")?.replace(/\D/g, "");
    if (!phone) {
      formStatus.textContent = "Número de telefone ausente na URL.";
      formStatus.className = "status error";
      form.querySelector("button").disabled = true;
    }

    // Busca motivos do backend
    async function loadReasons() {
      try {
        const res = await fetch(`${BASE}/sales/followup/reasons`);
        if (!res.ok) throw new Error("Erro ao buscar motivos");
        const reasons = await res.json();

        reasons.forEach(r => {
          const label = document.createElement("label");
          label.className = "option";
          label.innerHTML = `<input type="radio" name="reason" value="${r.id}"> ${r.description}`;
          reasonsContainer.appendChild(label);
        });
      } catch (err) {
        reasonsContainer.innerHTML =
          `<p style="color:var(--danger);">Erro ao carregar motivos.</p>`;
      }
    }

    loadReasons();

    // Envio do formulário
    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      formStatus.textContent = "";
      formStatus.className = "status";

      const reason = form.querySelector('input[name="reason"]:checked')?.value;
      const contact = document.getElementById("contact").checked;

      if (!reason) {
        formStatus.textContent = "Por favor, selecione um motivo.";
        formStatus.className = "status error";
        return;
      }

      const payload = {
        phone,
        reason: parseInt(reason),
        contact
      };

      try {
        const res = await fetch(`${BASE}/sales/followup`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        });

        if (!res.ok) throw new Error("Erro ao enviar feedback");
        formStatus.textContent = "✅ Obrigado! Sua resposta foi registrada com sucesso.";
        formStatus.className = "status ok";

        // bloqueia inputs após envio
        form.querySelectorAll("input, button").forEach(i => i.disabled = true);

      } catch (err) {
        formStatus.textContent = "❌ " + err.message;
        formStatus.className = "status error";
      }
    });
  </script>
</body>
</html>

Vital Assist - Home Care

We offer a new standard in care: we find, train, and empower the best caregivers, supported by a system that records all tasks in real time and generates transparent reports.

All to provide comfort, care, and safety for those receiving care—and peace of mind for those accompanying care.