{{ define "main" }}
<section class="section section-lg-bottom bg-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mx-auto">
        <form id="leadcapture-form" class="row">
          <div class="col-lg-6">
            <input type="text" name="firstName" class="form-control mb-4" placeholder="Voornaam">
          </div>
          <div class="col-lg-6">
            <input type="text" name="lastName" class="form-control mb-4" placeholder="Achternaam *" required>
          </div>
          <div class="col-lg-6">
            <input type="email" name="emailAddress" class="form-control mb-4" placeholder="E-mail *" required>
          </div>
          <div class="col-lg-6">
            <input type="text" name="phoneNumber" class="form-control mb-4" placeholder="Telefoon">
          </div>
          <div class="col-lg-12">
            <textarea name="description" class="form-control mb-4" placeholder="Bericht *" required></textarea>
          </div>

          <div style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">
            <label for="company">Bedrijfsnaam</label>
            <input type="text" id="company" name="company" tabindex="-1" autocomplete="off">
          </div>

          <div class="col-lg-12">
            <hr>
            <h5>Prijsberekening (schatting)</h5>
          </div>

          <div class="col-lg-4">
            <label for="pages" class="form-label">Aantal pagina's</label>
            <input type="number" id="pages" name="pages" class="form-control mb-3" value="1" min="0" step="1">
            <small class="text-muted">Prijs per pagina: €50</small>
          </div>

          <div class="col-lg-4">
            <label for="websiteType" class="form-label">Website type</label>
            <select id="websiteType" name="websiteType" class="form-select mb-3">
              <option value="800">HUGO — €800</option>
              <option value="1150" selected>Wordpress — €1150</option>
              <option value="2350">Shopify — €2350</option>
            </select>
          </div>

          <div class="col-lg-4">
            <label class="form-label d-block">Extra modules</label>
            <div class="form-check">
              <input class="form-check-input calc-extra" type="checkbox" value="300" id="extraBlog" name="extraBlog">
              <label class="form-check-label" for="extraBlog">Blog — €100</label>
            </div>
            <div class="form-check">
              <input class="form-check-input calc-extra" type="checkbox" value="100" id="extraContact" name="extraContact">
              <label class="form-check-label" for="extraContact">Extra contactformulier — €100</label>
            </div>
            <div class="form-check">
              <input class="form-check-input calc-extra" type="checkbox" value="400" id="extraWebshopPayment" name="extraWebshopPayment">
              <label class="form-check-label" for="extraWebshopPayment">Webshop — €400</label>
            </div>
          </div>

          <div class="col-12 mt-3 d-flex">
            <button type="button" id="calculate" class="btn btn-outline-primary me-3">Bereken totaal</button>
            <p class="mb-0">Totaal: <strong>€<span id="total">0</span></strong></p>
          </div>

          <!-- Verborgen input zodat backend het totaal krijgt bij submit -->
          <input type="hidden" name="estimatedTotal" id="estimatedTotal" value="0">

          <!-- -------- einde calculator -------- -->

          <div class="col-12 mt-4">
            <button type="submit" class="btn btn-primary">{{ i18n "submit_now"}}</button>
          </div>

          <div class="col-12 mt-2">
            <p id="leadcapture-status" class="text-success" hidden>Bedankt! We nemen zo spoedig mogelijk contact op.</p>
            <p id="leadcapture-error" class="text-danger" hidden>Er ging iets mis. Probeer het opnieuw.</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<script>
  (function () {
    const pagesEl = document.getElementById('pages');
    const websiteTypeEl = document.getElementById('websiteType');
    const extrasEls = document.querySelectorAll('.calc-extra');
    const totalEl = document.getElementById('total');
    const hiddenTotalEl = document.getElementById('estimatedTotal');
    const calculateBtn = document.getElementById('calculate');
    const form = document.getElementById('leadcapture-form');

    function toIntSafe(value) {
      const s = String(value).replace(/[^\d\-]/g, '');
      const n = parseInt(s, 10);
      return Number.isNaN(n) ? 0 : n;
    }

    function computeTotal() {
      const pages = toIntSafe(pagesEl.value);
      const websiteBase = toIntSafe(websiteTypeEl.value);

      let extrasSum = 0;
      extrasEls.forEach(el => {
        if (el.checked) {
          extrasSum += toIntSafe(el.value);
        }
      });

      const total = websiteBase + (pages * pricePerPage) + extrasSum;
      return total;
    }

    function updateUI(total) {
      totalEl.textContent = total;
      hiddenTotalEl.value = total;
    }

    [pagesEl, websiteTypeEl].forEach(el => el.addEventListener('input', () => updateUI(computeTotal())));
    extrasEls.forEach(el => el.addEventListener('change', () => updateUI(computeTotal())));
    calculateBtn.addEventListener('click', () => updateUI(computeTotal()));

    // Initial render
    updateUI(computeTotal());

    form.addEventListener('submit', function (ev) {
      const honeypot = document.getElementById('company').value;
      if (honeypot && honeypot.trim() !== '') {
        // vermoedelijke bot — blokkeer submit
        ev.preventDefault();
        // toon fout (optioneel)
        document.getElementById('leadcapture-error').hidden = false;
        document.getElementById('leadcapture-status').hidden = true;
        return;
      }
      hiddenTotalEl.value = computeTotal();
    });
  })();
</script>
{{ end }}