{{ define "main" }}

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 pe-lg-4">
        <p>{{ .Content }}</p>
      </div>
      <div class="col-lg-8">
        <div class="p-4 p-sm-5 shadow rounded content">
          <h2 class="section-title">{{ .Title }}</h2>
          <div id="prefill-status" class="small fw-bold mb-3 text-primary"></div>
          
          <form id="multi-step-form">
            
            <div class="step" id="step-1">
              <div class="row gy-4">
                <div class="form-group col-md-12">
                  <label for="company_name" class="h4">Officiële Bedrijfsnaam</label>
                  <input type="text" class="form-control text-dark" id="company_name" name="accountName" placeholder="Zoals vermeld bij de KvK" required>
                </div>
                
                <div class="form-group col-md-6">
                  <label for="kvk" class="h4">KvK Nummer</label>
                  <input type="tel" class="form-control text-dark" id="kvk" name="kvk_number" pattern="[0-9]*" inputmode="numeric" maxlength="8" required>
                </div>

                <div class="form-group col-md-6">
                  <label for="website" class="h4">Website</label>
                  <input type="url" class="form-control text-dark" id="website" name="website" placeholder="https://www.uwbedrijf.nl">
                </div>

                <div class="form-group col-md-6">
                  <label for="telephone" class="h4">Telefoon</label>
                  <input type="tel" class="form-control text-dark" id="telephone" name="telephone" placeholder="+31 000 000 000">
                </div>

                <div class="form-group col-md-6">
                  <label for="email" class="h4">E-mail</label>
                  <input type="email" class="form-control text-dark" id="email" name="email" placeholder="info@uwbedrijf.nl">
                </div>
                
                <h3 class="pt-4">Bezoekadres</h3>
                <div class="form-group col-md-6">
                  <label for="address" class="h4">Straat + Huisnummer</label>
                  <input type="text" class="form-control text-dark" id="address" name="address">
                </div>
                <div class="form-group col-md-6">
                  <label for="postal_code" class="h4">Postcode</label>
                  <input type="text" class="form-control text-dark" id="postal_code" name="postalCode" placeholder="1234 AB" maxlength="7">
                </div>

                <div class="col-md-12 mt-5">
                  <button type="button" class="btn btn-primary next-step">Volgende stap</button>
                </div>
              </div>
            </div>

            <div class="step d-none" id="step-2">
              <div class="row gy-4">
                <div class="form-group col-md-8">
                  <label for="factory" class="h4">Beschikt u over eigen fabriek(en)?</label>
                  <select class="form-control text-dark" id="factory" name="has_factory" required>
                    <option value="Nee">Nee, wij besteden de bouw uit</option>
                    <option value="Ja">Ja, wij bouwen in eigen beheer</option>
                  </select>
                </div>
                
                <div class="form-group col-md-4">
                  <label for="factory_count" class="h4">Aantal locaties</label>
                  <input type="number" class="form-control text-dark" id="factory_count" name="factory_count" value="0" min="0">
                </div>

                <div class="form-group col-md-12">
                  <label class="d-block mb-3 h3">Financiële mogelijkheden</label>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="huurkoop" name="finance_options" value="Huurkoop">
                    <label class="form-check-label" for="huurkoop">Huur(-koop)</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="lease" name="finance_options" value="Lease">
                    <label class="form-check-label" for="lease">Lease</label>
                  </div>
                </div>

                <div class="form-group col-md-12">
                  <label for="second_hand" class="h4">Biedt u geregeld tweedehands modellen aan?</label>
                  <select class="form-control text-dark" id="second_hand" name="second_hand">
                    <option value="Nee">Nee, uitsluitend nieuwbouw</option>
                    <option value="Ja">Ja, wij hebben een wisselend aanbod</option>
                  </select>
                </div>

                <div class="col-md-12 mt-5">
                  <button type="button" class="btn btn-secondary prev-step">Vorige</button>
                  <button type="button" class="btn btn-primary next-step">Volgende stap</button>
                </div>
              </div>
            </div>

            <div class="step d-none" id="step-3">
              <div class="row gy-4">
                <div class="form-group col-md-12">
                  <label class="d-block mb-3 h4">Bouwwijze</label>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="prefab" name="build_method" value="Prefab">
                    <label class="form-check-label" for="prefab"><strong>Prefab:</strong> Volledig in fabriek</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="modulair" name="build_method" value="Modulair">
                    <label class="form-check-label" for="modulair"><strong>Modulair:</strong> Units/modules</label>
                  </div>
                </div>

                <div class="form-group col-md-6">
                  <label for="customization" class="h4">Maatwerk</label>
                  <select class="form-control text-dark" id="customization" name="customization" required>
                    <option value="Volledig">Volledig architectonisch maatwerk</option>
                    <option value="Aanpasbaar">Standaardmodellen met opties</option>
                    <option value="Standaard">Uitsluitend vaste modellen</option>
                  </select>
                </div>

                <div class="col-md-12 mt-5">
                  <button type="button" class="btn btn-secondary prev-step">Vorige</button>
                  <button type="button" class="btn btn-primary next-step">Volgende stap</button>
                </div>
              </div>
            </div>

            <div class="step d-none" id="step-4">
              <div class="row gy-4">
                <div class="form-group col-md-12">
                  <label for="slogan" class="h4">Slogan (Max. 30 tekens)</label>
                  <input type="text" class="form-control text-dark" id="slogan" name="slogan" maxlength="30" placeholder="Duurzaam bouwen met hart voor de zorg">
                  <small>Nog <span id="slogan-count">30</span> tekens</small>
                </div>

                <div class="form-group col-md-12">
                  <label for="intro" class="h4">Bedrijfsintroductie (Max. 320 tekens)</label>
                  <textarea id="intro" name="intro_text" class="form-control text-dark" rows="4" maxlength="320" placeholder="Wat maakt uw bedrijf uniek?"></textarea>
                  <small class="text-muted">Nog <span id="char-count">320</span> tekens over.</small>
                </div>

                <div class="col-md-12 mt-5">
                  <button type="button" class="btn btn-secondary prev-step">Vorige</button>
                  <button type="button" class="btn btn-primary next-step" id="review-btn">Gegevens controleren</button>
                </div>
              </div>
            </div>

            <div class="step d-none" id="step-5">
              <div class="row gy-3">
                <div class="col-md-12">
                  <div class="p-3 bg-light rounded border">
                    <p><strong>Bedrijf:</strong> <span id="summary-name"></span></p>
                    <p><strong>Slogan:</strong> <span id="summary-slogan"></span></p>
                    <p><strong>Bouwmethode:</strong> <span id="summary-build"></span></p>
                    <p><strong>Maatwerk:</strong> <span id="summary-custom"></span></p>
                    <hr>
                    <p><strong>Introductie:</strong></p>
                    <p class="font-italic" id="summary-intro" style="white-space: pre-wrap;"></p>
                  </div>
                </div>

                <div class="col-md-12 mt-4">
                  <button type="button" class="btn btn-secondary prev-step">Aanpassen</button>
                  <button type="submit" id="submit-btn" class="btn btn-success btn-lg">Definitief verzenden</button>
                </div>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
(() => {
  'use strict';

  const CFG = {
    prefillEndpoint: '/api/prefill/account',
    useProxyForSubmit: false,
    submitEndpointDirect: 'https://crm.start-it.nl/api/v1/LeadCapture/38887b5457c35e15f669c4c3ce69fe52',
    fallbackEmail: 'info@mantelzorgwoning.info',
    queryParamId: 'id'
  };

  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));

  const getVal = (id) => {
    const el = document.getElementById(id);
    return el ? (el.value || '').trim() || '-' : '-';
  };

  const getChecked = (name) => {
    const picked = $$(`input[name="${CSS.escape(name)}"]:checked`).map(cb => cb.value);
    return picked.length ? picked.join(', ') : 'Geen';
  };

  function setFieldValue(fieldId, value) {
    const el = document.getElementById(fieldId);
    if (!el || !value) return false;
    if (el.value.trim() && el.value !== 'https://') return false; 
    el.value = value;
    el.dispatchEvent(new Event('input', { bubbles: true }));
    return true;
  }

  function showInlineStatus(msg) {
    const box = document.getElementById('prefill-status');
    if (box) box.textContent = msg;
  }

  // Formatting helpers
  const kvkEl = document.getElementById('kvk');
  if (kvkEl) kvkEl.addEventListener('input', e => e.target.value = e.target.value.replace(/\D/g, '').slice(0, 8));

  // Counters
  const setupCounter = (fId, cId, max) => {
    const el = document.getElementById(fId), cnt = document.getElementById(cId);
    if (!el || !cnt) return;
    const up = () => { cnt.innerText = max - el.value.length; };
    el.addEventListener('input', up);
    up();
  };
  setupCounter('slogan', 'slogan-count', 30);
  setupCounter('intro', 'char-count', 320);

  // Navigation
  $$('.next-step').forEach(btn => {
    btn.addEventListener('click', () => {
      const curr = btn.closest('.step');
      const inputs = $$('[required]', curr);
      let valid = true;
      inputs.forEach(i => { if(!i.checkValidity()) { valid = false; i.classList.add('is-invalid'); } else { i.classList.remove('is-invalid'); }});
      
      if (!valid) return;

      const next = curr.nextElementSibling;
      if (next) {
        if (next.id === 'step-5') {
            document.getElementById('summary-name').innerText = getVal('company_name');
            document.getElementById('summary-slogan').innerText = getVal('slogan');
            document.getElementById('summary-custom').innerText = getVal('customization');
            document.getElementById('summary-intro').innerText = getVal('intro');
            document.getElementById('summary-build').innerText = getChecked('build_method');
        }
        curr.classList.add('d-none');
        next.classList.remove('d-none');
        window.scrollTo(0,0);
      }
    });
  });

  $$('.prev-step').forEach(btn => {
    btn.addEventListener('click', () => {
      const curr = btn.closest('.step'), prev = curr.previousElementSibling;
      if (prev) { curr.classList.add('d-none'); prev.classList.remove('d-none'); }
    });
  });

  // Prefill Logic
  async function prefillCRM() {
    const id = new URLSearchParams(window.location.search).get(CFG.queryParamId);
    if (!id) return;
    showInlineStatus('Bezig met ophalen gegevens...');
    try {
      const res = await fetch(`${CFG.prefillEndpoint}?id=${id}`);
      if (!res.ok) throw new Error();
      const data = await res.json();
      
      setFieldValue('company_name', data.name);
      setFieldValue('website', data.website);
      setFieldValue('address', data.billingAddressStreet);
      setFieldValue('postal_code', data.billingAddressPostalCode);
      setFieldValue('kvk', data.cKvk);
      setFieldValue('telephone', data.phoneNumber);
      setFieldValue('email', data.emailAddress || data.emailAddressData?.[0]?.emailAddress);
      
      showInlineStatus('Gegevens succesvol geladen.');
    } catch (e) {
      showInlineStatus('Kon geen gegevens vinden voor dit ID.');
    }
  }

  document.getElementById('multi-step-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const btn = document.getElementById('submit-btn');
    btn.disabled = true; btn.innerText = 'Verzenden...';

    const payload = {
      lastName: getVal('company_name'),
      website: getVal('website'),
      emailAddress: getVal('email') !== '-' ? getVal('email') : CFG.fallbackEmail,
      description: `KVK: ${getVal('kvk')}\nINTRO: ${getVal('intro')}\nBOUW: ${getChecked('build_method')}`
    };

    try {
      const res = await fetch(CFG.submitEndpointDirect, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (res.ok) window.location.href = '/bedankt?bedrijf=' + encodeURIComponent(getVal('company_name'));
      else throw new Error();
    } catch (err) {
      alert('Fout bij verzenden.');
      btn.disabled = false; btn.innerText = 'Definitief verzenden';
    }
  });

  document.addEventListener('DOMContentLoaded', prefillCRM);
})();
</script>

{{ end }}