<main class="wf-container">
  <section class="wf-card" id="wf-intro">
    <p>
      Beantwoord de stellingen eerlijk en op gevoel. Gebruik de schaal van
      <strong>1 (helemaal niet waar)</strong> tot <strong>5 (helemaal waar)</strong>.
      Het invullen duurt ongeveer 12–15 minuten.
    </p>
    <p class="wf-small" style="color:#666;">
      Na het invullen kun je op <strong>Bereken resultaten</strong> klikken. Je ziet dan:
      werkfit-index, scores per thema en het dominante werkprofiel. Via de browser kun je
      daarna <em>Afdrukken → Opslaan als PDF</em> kiezen.
    </p>
  </section>

  <section class="wf-card" id="wf-form"></section>

  <section class="wf-card" id="wf-results" style="display:none;">
    <h2>Resultaten</h2>
    <div class="wf-grid">
      <div>
        <h3>Werkfit-index</h3>
        <div class="wf-meter"><span id="wf-meter-bar"></span></div>
        <p>
          <strong id="wf-index-score">0</strong> / 100 –
          <span id="wf-index-label">-</span>
        </p>
      </div>
      <div>
        <h3>Werkstijlprofiel</h3>
        <p>
          <span class="wf-tag" id="wf-profile-main">-</span>
          <span class="wf-small" style="color:#333;">
            Secundair: <span id="wf-profile-second">-</span>
          </span>
        </p>
      </div>
    </div>

    <h3>Scores per thema</h3>
    <table id="wf-theme-table">
      <thead>
        <tr>
          <th>Thema</th>
          <th>Score (0–35)</th>
          <th>Interpretatie</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <h3>Korte duiding</h3>
    <p id="wf-short-expl"></p>
  </section>

  <div class="wf-footer">
    <button class="wf-btn" onclick="wfCalculate()">Bereken resultaten</button>
    <button class="wf-btn secondary" onclick="window.scrollTo(0,0)">Naar boven</button>
    <button class="wf-btn secondary" onclick="window.print()">Afdrukken / PDF</button>
  </div>
</main>

<script>
  // --------------------------
  // CONFIGURATIE
  // --------------------------

  const WF_THEMES = [
    "Energie & Vitaliteit",
    "Zelfvertrouwen & Mindset",
    "Motivatie & Richting",
    "Structuur & Discipline",
    "Omgeving & Steun",
    "Communicatie & Samenwerking",
    "Flexibiliteit & Aanpassingsvermogen",
    "Werkstijl & Waarden"
  ];

  const WF_QUESTIONS = [
    // 1–7 Energie & Vitaliteit
    "Ik heb meestal voldoende energie om een werkdag vol te houden.",
    "Ik herstel snel na een drukke of stressvolle dag.",
    "Ik luister goed naar de signalen van mijn lichaam.",
    "Ik voel me vaak moe of uitgeput aan het einde van de dag. (omgekeerd)",
    "Mijn leefstijl (slaap, voeding, beweging) ondersteunt mijn energie.",
    "Ik merk dat spanning mijn energie snel uitput. (omgekeerd)",
    "Ik voel me fit genoeg om nieuwe dingen aan te pakken.",
    // 8–14 Zelfvertrouwen & Mindset
    "Ik geloof dat ik waardevol ben op de werkvloer.",
    "Ik durf fouten te maken en daarvan te leren.",
    "Ik voel me snel onzeker in nieuwe situaties. (omgekeerd)",
    "Ik kan mijn sterke kanten benoemen.",
    "Ik kan kritiek zien als kans om te groeien.",
    "Ik ben bang om afgewezen te worden. (omgekeerd)",
    "Ik vertrouw erop dat ik uitdagingen aankan.",
    // 15–21 Motivatie & Richting
    "Ik weet wat mij motiveert in werk.",
    "Ik heb een duidelijk doel voor ogen.",
    "Ik voel enthousiasme over mijn toekomst.",
    "Ik heb moeite om gemotiveerd te blijven. (omgekeerd)",
    "Mijn werkdoelen sluiten aan bij wat ik belangrijk vind.",
    "Ik weet welke stappen ik moet zetten om verder te komen.",
    "Ik voel me vastgelopen in mijn richting. (omgekeerd)",
    // 22–28 Structuur & Discipline
    "Ik houd me aan gemaakte afspraken.",
    "Ik stel prioriteiten in mijn dag.",
    "Ik stel dingen vaak uit. (omgekeerd)",
    "Ik behoud overzicht, ook bij drukte.",
    "Ik geef niet snel op bij tegenslag.",
    "Ik kan werk en privé goed scheiden.",
    "Ik werk planmatig, ook zonder toezicht.",
    // 29–35 Omgeving & Steun
    "Ik heb mensen om me heen die me aanmoedigen.",
    "Ik voel me gezien door mijn omgeving.",
    "Ik kan steun vragen als het moeilijk is.",
    "Ik voel me vaak alleen met mijn problemen. (omgekeerd)",
    "Mijn omgeving begrijpt mijn situatie.",
    "Ik heb een netwerk waarop ik kan terugvallen.",
    "Ik voel me thuis op plekken waar ik werk of leer.",
    // 36–42 Communicatie & Samenwerking
    "Ik durf mijn mening te geven.",
    "Ik luister met oprechte aandacht naar anderen.",
    "Ik heb moeite met kritiek ontvangen. (omgekeerd)",
    "Ik ga conflicten niet uit de weg maar pak ze constructief aan.",
    "Ik durf grenzen te stellen als iets te veel wordt.",
    "Ik kan samenwerken met verschillende soorten mensen.",
    "Ik voel me snel overvraagd door anderen. (omgekeerd)",
    // 43–49 Flexibiliteit & Aanpassingsvermogen
    "Ik kan goed omgaan met veranderingen.",
    "Ik leer snel nieuwe dingen.",
    "Onzekerheid maakt mij onrustig. (omgekeerd)",
    "Ik zie uitdagingen als kansen om te groeien.",
    "Ik heb moeite om controle los te laten. (omgekeerd)",
    "Ik kan relativeren als iets tegenzit.",
    "Ik herstel snel van teleurstelling of tegenslag.",
    // 50–56 Werkstijl & Waarden
    "Ik neem graag initiatief.",
    "Ik let op details en kwaliteit.",
    "Ik vind harmonie belangrijker dan resultaat.",
    "Ik haal energie uit nieuwe ideeën.",
    "Ik voel me prettig bij duidelijke regels en structuur.",
    "Ik geniet van samenwerken met anderen.",
    "Ik houd van afwisseling en vrijheid in mijn werk."
  ];

  // Deze vraagnummers zijn “omgekeerd” (reverse scoring):
  const WF_REVERSED = new Set([4,10,13,18,24,32,38,42,45,47]);

  // Profielberekening (DISC-achtig)
  // Let op: vragen zijn 1-based genummerd in deze definities.
  function wfProfileScores(getAnswer) {
    const a50 = getAnswer(50) || 0;
    const a51 = getAnswer(51) || 0;
    const a52 = getAnswer(52) || 0;
    const a53 = getAnswer(53) || 0;
    const a54 = getAnswer(54) || 0;
    const a55 = getAnswer(55) || 0;
    const a56 = getAnswer(56) || 0;

    return {
      "Doener (Rood)": a50 + a56,
      "Denker (Blauw)": a51 + a54,
      "Voeler (Groen)": a52 + a55,
      "Verbinder (Geel)": a50 + a53 + a55 + a56
    };
  }

  // --------------------------
  // RENDER FORMULIER
  // --------------------------

  function wfRenderForm() {
    const container = document.getElementById("wf-form");
    let html = "";
    let nummer = 1;

    for (let t = 0; t < WF_THEMES.length; t++) {
      html += `<div class="wf-theme">${t + 1}. ${WF_THEMES[t]}</div>`;
      html += `<div>`;

      for (let i = 0; i < 7; i++) {
        const qText = WF_QUESTIONS[t * 7 + i];
        const name = `wf-q${nummer}`;

        const isReversed = WF_REVERSED.has(nummer);
        const reverseNote = isReversed
          ? ' <span class="wf-small" style="color:#b33;">(wordt omgekeerd gescoord)</span>'
          : "";

        html += `
          <div class="wf-q">
            <div><strong>${nummer}.</strong> ${qText}${reverseNote}</div>
            <div class="wf-scale">
              <label><input type="radio" name="${name}" value="1"> 1</label>
              <label><input type="radio" name="${name}" value="2"> 2</label>
              <label><input type="radio" name="${name}" value="3"> 3</label>
              <label><input type="radio" name="${name}" value="4"> 4</label>
              <label><input type="radio" name="${name}" value="5"> 5</label>
            </div>
          </div>
        `;
        nummer++;
      }
      html += `</div>`;
    }

    container.innerHTML = html;
  }

  // Helper: antwoord ophalen
  function wfGetAnswer(nr) {
    const name = `wf-q${nr}`;
    const input = document.querySelector(`input[name="${name}"]:checked`);
    if (!input) return null;
    return parseInt(input.value, 10);
  }

  // Reverse scoring
  function wfCorrected(nr, val) {
    if (val == null) return 0;
    return WF_REVERSED.has(nr) ? 6 - val : val;
  }

  function wfInterpretScore(score) {
    if (score >= 28) return "Sterk";
    if (score >= 14) return "Ontwikkelbaar";
    return "Aandachtspunt";
  }

  function wfIndexLabel(index) {
    if (index >= 71) return "Werkfit";
    if (index >= 41) return "Gedeeltelijk werkfit";
    return "Niet werkfit";
  }

  // --------------------------
  // BEREKENING
  // --------------------------

  function wfCalculate() {
    const themeScores = [];

    // 8 thema's, elk 7 items
    for (let t = 0; t < WF_THEMES.length; t++) {
      let sum = 0;
      for (let i = 0; i < 7; i++) {
        const nr = t * 7 + i + 1; // 1-based nummer
        const raw = wfGetAnswer(nr);
        const corr = wfCorrected(nr, raw);
        sum += corr;
      }
      themeScores.push(sum);
    }

    const total = themeScores.reduce((a, b) => a + b, 0);
    const index = Math.round((total / 280) * 100);

    // Profielscore op basis van specifieke vragen
    const profileScores = wfProfileScores(wfGetAnswer);
    const sortedProfiles = Object.entries(profileScores).sort(
      (a, b) => b[1] - a[1]
    );

    // UI vullen
    document.getElementById("wf-results").style.display = "block";
    document.getElementById("wf-meter-bar").style.width = index + "%";
    document.getElementById("wf-index-score").textContent = index;
    document.getElementById("wf-index-label").textContent = wfIndexLabel(index);

    document.getElementById("wf-profile-main").textContent =
      sortedProfiles[0]?.[0] || "-";
    document.getElementById("wf-profile-second").textContent =
      sortedProfiles[1]?.[0] || "-";

    // Tabel met themascores
    const tbody = document.querySelector("#wf-theme-table tbody");
    tbody.innerHTML = "";
    themeScores.forEach((score, idx) => {
      const tr = document.createElement("tr");
      const td1 = document.createElement("td");
      const td2 = document.createElement("td");
      const td3 = document.createElement("td");

      td1.textContent = WF_THEMES[idx];
      td2.textContent = score;
      td3.textContent = wfInterpretScore(score);

      if (score < 14) td3.className = "wf-warn";
      if (score >= 28) td3.className = "wf-ok";

      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tbody.appendChild(tr);
    });

    // Korte duiding: top 2 sterktes en top 3 aandachtspunten
    const low = themeScores
      .map((v, i) => ({ v, i }))
      .sort((a, b) => a.v - b.v)
      .slice(0, 3)
      .map((o) => WF_THEMES[o.i]);

    const high = themeScores
      .map((v, i) => ({ v, i }))
      .sort((a, b) => b.v - a.v)
      .slice(0, 2)
      .map((o) => WF_THEMES[o.i]);

    const expl =
      "Sterktes: " +
      high.join(", ") +
      ". Aandachtspunten: " +
      low.join(", ") +
      ". Gebruik deze uitkomst als startpunt voor een gesprek en een concreet actieplan.";

    document.getElementById("wf-short-expl").textContent = expl;

    // Naar resultaten scrollen
    const resultsSection = document.getElementById("wf-results");
    window.scrollTo({
      top: resultsSection.offsetTop - 20,
      behavior: "smooth"
    });
  }

  // Init
  wfRenderForm();
</script>