<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <title>Richiesta Privacy – Uazzappa.mi (WhatsApp HRMS / StoHRm)</title>
  <meta name="robots" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Uazzappa.me: crea survey e chatbot su WhatsApp e porta le risposte direttamente nel tuo ATS/HRMS. Opt-in privacy, template, flow e mapping verso stored procedure.">
  <meta name="theme-color" content="#1fb6e0">
  <link rel="icon" href="../assets/uazzappa-icon.jpg"> 
  <style>
    :root { --fg:#1f2937; --muted:#6b7280; --bg:#ffffff; --acc:#0ea5e9; --err:#dc2626; --ok:#16a34a }
    *{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
    .wrap{max-width:980px;margin:0 auto;padding:32px 20px}
    h1{font-size:28px;margin:0 0 8px} h2{font-size:20px;margin-top:28px}
    p,li{color:var(--fg)} small,.muted{color:var(--muted)}
    a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
    .box{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff}
    .grid{display:grid;gap:12px} @media(min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr 1fr} }
    label{display:block;font-weight:600;margin-bottom:4px}
    input[type="text"], input[type="email"], input[type="tel"], textarea, select {
      width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;outline:none
    }
    textarea{min-height:120px;resize:vertical}
    .help{font-size:12px;color:var(--muted);margin-top:4px}
    .row{margin:10px 0}
    .error{color:var(--err);font-size:13px;margin-top:4px}
    .success{color:var(--ok);font-size:14px;margin-top:4px}
    .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}
    .btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
    .btn.ghost{background:#fff}
    .badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef6ff;color:#0369a1;font-size:12px}
    .footer{margin-top:32px;padding-top:16px;border-top:1px solid #e5e7eb}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  </style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>Modulo Richiesta Privacy</h1>
    <p class="muted">Per Uazzappa.mi nell’ecosistema <strong>StoHRm</strong> / <strong>Portale HR</strong>.</p>
    <p><strong>Titolare:</strong> <u>StoHRm S.r.l.</u> – Email privacy: <a id="privacyMailTop" href="mailto:info@stohrm.it">info@stohrm.it</a></p>
  </header>

  <section class="box">
    <h2>1) Dati della richiesta</h2>
    <form id="reqForm" novalidate>
      <div class="grid grid-2">
        <div class="row">
          <label for="reqType">Tipo richiesta</label>
          <select id="reqType" required>
            <option value="Data Deletion">Cancellazione dati (Data Deletion)</option>
            <option value="Data Access">Accesso ai dati (Art. 15)</option>
            <option value="Rectification">Rettifica</option>
            <option value="Opt-out">Opposizione / Opt-out comunicazioni</option>
            <option value="Other">Altro</option>
          </select>
          <div class="error" data-err-for="reqType"></div>
        </div>
        <div class="row">
          <label for="fullName">Nome e cognome</label>
          <input id="fullName" type="text" placeholder="Mario Rossi" required>
          <div class="error" data-err-for="fullName"></div>
        </div>
      </div>

      <div class="grid grid-2">
        <div class="row">
          <label for="waNumber">Numero WhatsApp</label>
          <input id="waNumber" type="tel" inputmode="tel" placeholder="+39 333 1234567" required>
          <div class="help">Formato internazionale (E.164). Se non inserisci il prefisso, verrà usato <code>+39</code>.</div>
          <div class="error" data-err-for="waNumber"></div>
        </div>
        <div class="row">
          <label for="email">Email di contatto</label>
          <input id="email" type="email" placeholder="nome@dominio.it" required>
          <div class="error" data-err-for="email"></div>
        </div>
      </div>

      <div class="grid grid-2" style="display:none;">
        <div class="row">
          <label for="candidateId">ID Candidato (opzionale)</label>
          <input id="candidateId" type="text" placeholder="ID interno se noto">
        </div>
        <div class="row">
          <label for="submissionId">SubmissionId / FlowToken (opzionale)</label>
          <input id="submissionId" type="text" placeholder="wamid... / 0199...">
        </div>
      </div>

      <div class="row">
        <label for="details">Dettagli della richiesta</label>
        <textarea id="details" placeholder="Descrivi la tua richiesta e l’ambito (es. cancellare messaggi WhatsApp collegati alla candidatura X)..."></textarea>
      </div>

      <div class="row">
        <label class="sr-only" for="hpWeb">Lascia vuoto</label>
        <input id="hpWeb" type="text" class="sr-only" tabindex="-1" autocomplete="off">
      </div>

      <div class="row">
        <label><input id="identityChk" type="checkbox" required> Dichiaro di essere il titolare del numero WhatsApp indicato (o di agire per suo conto con delega).</label>
        <div class="error" data-err-for="identityChk"></div>
      </div>
      <div class="row">
        <label><input id="consentChk" type="checkbox" required> Acconsento all’uso dei dati forniti per evadere questa richiesta.</label>
        <div class="error" data-err-for="consentChk"></div>
      </div>

      <div class="btns">
        <button type="button" class="btn" id="previewBtn">Anteprima email</button>
        <a id="mailtoBtn" class="btn primary" href="#">Invia via Email</a>
        <button type="button" class="btn ghost" id="copyBtn">Copia testo email</button>
        <button type="button" class="btn ghost" id="emlBtn">Scarica .eml</button>
        <button type="reset" class="btn">Reset</button>
      </div>

      <div id="previewBox" class="row" style="display:none">
        <h3>Anteprima</h3>
        <div class="box">
          <div><span class="badge">Oggetto</span> <span id="prevSubject"></span></div>
          <pre id="prevBody" style="white-space:pre-wrap;margin-top:10px"></pre>
        </div>
      </div>

      <div id="status" class="row" aria-live="polite"></div>
    </form>
  </section>

  <section>
    <h2>2) Informazioni utili</h2>
    <ul>
      <li>Riceverai conferma di presa in carico; potremmo richiedere ulteriori informazioni per verificare l’identità.</li>
      <li>Alcuni dati potranno essere conservati se necessari per obblighi di legge o per l’esercizio/difesa di diritti.</li>
      <li>Consulta l’<a href="/privacy" target="_blank" rel="noopener">Informativa sulla Privacy</a> completa.</li>
    </ul>
  </section>

  <footer class="footer">
    <small class="muted">© <span id="year"></span> STOHRM SRL • Modulo Richiesta Privacy • Contatto: <a id="privacyMailBottom" href="mailto:info@stohrm.it">info@stohrm.it</a></small>
  </footer>
</div>

<script>
  // === Configurazione rapida ===
  const ORG_NAME = "STOHRM SRL";
  const PRIVACY_EMAIL = "info@stohrm.it";
  const DEFAULT_COUNTRY_CODE = "+39"; // se l'utente non mette prefisso
  const MAX_MAILTO_LEN = 1800; // limite prudenziale (browser/client variano ~2k)

  document.getElementById('year').textContent = new Date().getFullYear();
  document.getElementById('privacyMailTop').href = "mailto:" + PRIVACY_EMAIL;
  document.getElementById('privacyMailTop').textContent = PRIVACY_EMAIL;
  document.getElementById('privacyMailBottom').href = "mailto:" + PRIVACY_EMAIL;
  document.getElementById('privacyMailBottom').textContent = PRIVACY_EMAIL;

  const $ = (id)=>document.getElementById(id);
  const err = (name,msg)=>{ const el=document.querySelector(`.error[data-err-for="${name}"]`); if(el){ el.textContent=msg||""; } };

  function normPhone(input){
    if(!input) return "";
    let s = input.replace(/\s+/g,"").replace(/-/g,"");
    if(s.startsWith("00")) s = "+"+s.substring(2);
    if(!s.startsWith("+")) s = DEFAULT_COUNTRY_CODE + s.replace(/^0+/,'');
    return s;
  }
  function validPhoneE164(s){
    return /^\+[1-9]\d{7,14}$/.test(s); // 8-15 cifre totali
  }
  function isEmail(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v||""); }

  function validate(){
    let ok=true;
    const rt = $('reqType').value.trim();
    const fn = $('fullName').value.trim();
    let ph = normPhone($('waNumber').value.trim());
    const em = $('email').value.trim();
    const hp = $('hpWeb').value.trim();
    const idC = $('candidateId').value.trim();
    const sub = $('submissionId').value.trim();
    const idc = $('identityChk').checked;
    const cns = $('consentChk').checked;

    // honeypot
    if(hp){ ok=false; $('status').innerHTML = '<div class="error">Rilevato invio automatico. Riprova.</div>'; return {ok:false}; }

    err("reqType", rt? "": "");
    if(!fn){ err("fullName","Campo obbligatorio"); ok=false; } else err("fullName","");
    if(!ph || !validPhoneE164(ph)){ err("waNumber","Inserisci un numero in formato internazionale (es. +393331234567)"); ok=false; } else err("waNumber","");
    if(!isEmail(em)){ err("email","Inserisci un indirizzo email valido"); ok=false; } else err("email","");
    if(!idc){ err("identityChk","Necessario per procedere"); ok=false; } else err("identityChk","");
    if(!cns){ err("consentChk","Necessario per procedere"); ok=false; } else err("consentChk","");

    return {ok, rt, fn, ph, em, idC, sub,
      details: $('details').value.trim(),
      idc, cns
    };
  }

  function buildEmail(data){
    const now = new Date().toISOString();
    const subject = `${data.rt} – Uazzappa – ${data.ph} – ${data.fn}`;
    const lines = [
      `Tipo richiesta: ${data.rt}`,
      `Nome e cognome: ${data.fn}`,
      `Numero WhatsApp: ${data.ph}`,
      `Email: ${data.em}`,
      data.idC ? `ID Candidato: ${data.idC}` : null,
      data.sub ? `SubmissionId/FlowToken: ${data.sub}` : null,
      `Organizzazione: ${ORG_NAME}`,
      `Inviata il: ${now}`,
      ``,
      `Dettagli:`,
      data.details || "(nessun dettaglio aggiuntivo)",
      ``,
      `Dichiaro di essere il titolare del numero indicato o di agire per suo conto.`,
      ``,
      `Informazioni utili:`,
      `• Potremmo richiedere conferma dell'identità prima di eseguire la richiesta.`,
      `• Alcuni dati potrebbero essere conservati se necessari per obblighi di legge o per l’esercizio/difesa di diritti.`,
    ].filter(Boolean);
    return { subject, body: lines.join("\n") };
  }

  function updatePreview(){
    const v = validate();
    if(!v.ok) { $('previewBox').style.display='none'; return; }
    const mail = buildEmail(v);
    $('prevSubject').textContent = mail.subject;
    $('prevBody').textContent = mail.body;
    $('previewBox').style.display='block';
    $('status').innerHTML = '';
  }

  function buildMailto(mail){
    const to = encodeURIComponent(PRIVACY_EMAIL);
    const subj = encodeURIComponent(mail.subject);
    const body = encodeURIComponent(mail.body);
    const url = `mailto:${to}?subject=${subj}&body=${body}`;
    return url.length <= MAX_MAILTO_LEN ? url : null;
  }

  function copyToClipboard(text){
    navigator.clipboard?.writeText(text).then(()=>{
      $('status').innerHTML = '<div class="success">Testo email copiato negli appunti.</div>';
    }).catch(()=>{
      $('status').innerHTML = '<div class="error">Impossibile copiare automaticamente. Seleziona e copia manualmente l’anteprima.</div>';
    });
  }

  function downloadEml(mail){
    const dt = new Date().toUTCString();
    const eml =
`To: ${PRIVACY_EMAIL}
Subject: ${mail.subject}
Date: ${dt}
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

${mail.body}
`;
    const blob = new Blob([eml], {type: 'message/rfc822'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `RichiestaPrivacy_${new Date().toISOString().replace(/[:.]/g,'-')}.eml`;
    document.body.appendChild(a); a.click(); a.remove();
  }

  // Bind
  $('previewBtn').addEventListener('click', updatePreview);
  $('copyBtn').addEventListener('click', ()=>{
    const v = validate(); if(!v.ok) return;
    const mail = buildEmail(v);
    copyToClipboard(`Oggetto: ${mail.subject}\n\n${mail.body}`);
  });
  $('emlBtn').addEventListener('click', ()=>{
    const v = validate(); if(!v.ok) return;
    const mail = buildEmail(v);
    downloadEml(mail);
  });

  $('mailtoBtn').addEventListener('click', (e)=>{
    const v = validate(); if(!v.ok){ e.preventDefault(); return; }
    const mail = buildEmail(v);
    const url = buildMailto(mail);
    if(url){
      e.currentTarget.href = url;
      $('status').innerHTML = '';
    } else {
      e.preventDefault();
      $('status').innerHTML = '<div class="error">Il contenuto è troppo lungo per il client email. Scarica il file .eml o copia il testo.</div>';
      updatePreview();
    }
  });
</script>
</body>
</html>