static/public/widget.js

(function() {
  console.log("WIDGET JS LOADED");

  const container = document.getElementById("my-signup-widget");
  if (!container) return;

  // --- Hardcoded tracking values ---
  const utm_source = "scholarix";
  const utm_campaign = "trial_widget";
  const default_product = "odoo_19";

  const shadow = container.attachShadow({ mode: "open" });

  const styles = `
    :host {
      all: initial;
      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
      display: block;
      max-width: 420px;
      margin: 0 auto;
      color: #cffaff;
    }

    .card {
      background: #084574;
      border: 1px solid #cffaff33;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
      padding: 24px;
    }

    .header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #cffaff22;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title {
      font-size: 18px;
      font-weight: 800;
      color: #cffaff;
    }

    .subtitle {
      font-size: 13px;
      color: #a9d8f3;
    }

    label, .label {
      display: block;
      font-size: 12px;
      color: #cffaff;
      font-weight: 600;
      margin: 12px 0 6px;
    }

    select, input[type="email"] {
      width: 100%;
      background: #08395f;
      border: 1px solid #cffaff44;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      color: #cffaff;
      outline: none;
      box-sizing: border-box;
    }

    button {
      margin-top: 16px;
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 15px;
      font-weight: 800;
      background: linear-gradient(135deg,#cffaff,#6ad7ff);
      color: #084574;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }

    button:hover {
      background: linear-gradient(135deg,#b3f2ff,#84e2ff);
    }

    .footnote {
      margin-top: 10px;
      font-size: 11px;
      color: #a9d8f3;
      text-align: center;
    }

    .status {
      padding: 20px;
      font-size: 15px;
      color: #cffaff;
      background: #08395f;
      border: 1px solid #cffaff55;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      word-break: break-word;
    }
    .status.success { background: #065f46; color: #cffaff; }
    .status.error { background: #991b1b; color: #fff; }
  `;

  const html = `
    <form class="card">
      <div class="header">
        <img class="icon" src="images/logo.jpg">
        <div>
          <div class="title">Try Managed ODOO - 4 Weeks Free</div>
          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
        </div>
      </div>

      <label for="location">Location</label>
      <select id="location" name="location" required>
        <option value="" disabled selected>Select a region</option>
        <option value="manchester">UK, Manchester</option>
        <option value="boston">US, Boston</option>
        <option value="mumbai">IN, Mumbai</option>
        <option value="saopaulo">BR, Sao Paulo</option>
        <option value="Meppel">NL, Meppel</option>
      </select>

      <label for="email">Work Email</label>
      <input id="email" name="email" type="email" required placeholder="you@company.com">

      <input type="hidden" name="product" value="${default_product}">
      <input type="hidden" name="utm_source" value="${utm_source}">
      <input type="hidden" name="utm_campaign" value="${utm_campaign}">

      <button type="submit" class="plausible-event-name=Trial">Start 4-Week Free Trial</button>

      <div class="footnote">
        By submitting, you agree to the T&C of Scholarix.
      </div>
    </form>

    <div id="status" class="status" style="display:none;"></div>
  `;

  shadow.innerHTML = `<style>${styles}</style>${html}`;

  const form = shadow.querySelector("form");
  const statusEl = shadow.getElementById("status");

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    statusEl.style.display = "block";
    statusEl.textContent = "Submitting...";
    statusEl.className = "status";

    try {
      const formData = new FormData(form);
      const res = await fetch("https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/47129739-e60b-4944-b6c2-d3fd5ce0991b", {
        method: "POST",
        body: formData,
      });

      const text = await res.text();

      form.style.display = "none";
      statusEl.textContent = text;
      statusEl.className = "status success";
    } catch (err) {
      statusEl.textContent = "❌ Failed to submit. Please try again.";
      statusEl.className = "status error";
    }
  });
})();