{{ 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>
          <form id="multi-step-form">
            <div class="step" id="step-1">
              <h4 class="mb-4">Stap 1: Bedrijfsgegevens</h4>
              <div class="row gy-4">
                <div class="form-group col-md-12">
                  <label for="company_name">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">KvK Nummer</label>
                  <input type="text" class="form-control text-dark" id="kvk" name="kvk_number" required>
                </div>

                <div class="form-group col-md-6">
                  <label for="website">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-8">
                  <label for="address">Straat + Huisnummer</label>
                  <input type="text" class="form-control text-dark" id="address" name="address">
                </div>
                <div class="form-group col-md-4">
                  <label for="postal_code">Postcode</label>
                  <input type="text" class="form-control text-dark" id="postal_code" name="postalCode">
                </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">
              <h4 class="mb-4">Stap 2: Bedrijfsvoering & Aanbod</h4>
              <div class="row gy-4">
                
                <div class="form-group col-md-8">
                  <label for="factory">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>
                  <small class="form-text text-muted">Let op: conform de voorwaarden dient dit feitelijk juist te zijn[cite: 73].</small>
                </div>
                
                <div class="form-group col-md-4">
                  <label for="factory_count">Aantal locaties</label>
                  <input type="number" class="form-control text-dark" id="factory_count" name="factory_count" placeholder="0" min="0">
                </div>

                <div class="form-group col-md-12">
                  <label class="d-block mb-2">Financiële mogelijkheden (meerdere opties mogelijk)</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">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 tweedehands aanbod</option>
                  </select>
                </div>

                <div class="form-group col-md-12">
                  <label for="service_contract">Biedt u nazorg middels een service-overeenkomst?</label>
                  <select class="form-control text-dark" id="service_contract" name="service_contract">
                    <option value="Nee">Nee</option>
                    <option value="Ja">Ja, wij bieden structurele nazorg/onderhoud</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">
              <h4 class="mb-4">Stap 3: Bouwstijl & Levering</h4>
              <div class="row gy-4">
                
                <div class="form-group col-md-12">
                  <label class="d-block mb-2">Welke bouwstijlen hanteert u? (meerdere opties mogelijk)</label>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="modern" name="build_style" value="Modern">
                    <label class="form-check-label" for="modern">Modern</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="landelijk" name="build_style" value="Landelijk">
                    <label class="form-check-label" for="landelijk">Landelijk</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="houtbouw" name="build_style" value="Houtbouw">
                    <label class="form-check-label" for="houtbouw">Houtbouw / Chaletstijl</label>
                  </div>
                </div>

                <div class="form-group col-md-12">
                  <label for="customization">In hoeverre is maatwerk mogelijk?</label>
                  <select class="form-control text-dark" id="customization" name="customization" required>
                    <option value="Volledig">Volledig maatwerk (architectonisch)</option>
                    <option value="Modulair">Modulair (aanpasbare standaardmodellen)</option>
                    <option value="Standaard">Uitsluitend standaardmodellen</option>
                  </select>
                </div>

                <div class="form-group col-md-6">
                  <label for="stock">Levert u direct uit voorraad?</label>
                  <select class="form-control text-dark" id="stock" name="delivery_stock">
                    <option value="Nee">Nee, alles op bestelling</option>
                    <option value="Ja">Ja, wij hebben showmodellen/voorraad direct leverbaar</option>
                  </select>
                </div>

                <div class="form-group col-md-6">
                  <label for="lead_time">Indicatieve levertijd (gemiddeld)</label>
                  <select class="form-control text-dark" id="lead_time" name="lead_time">
                    <option value="Snel">Minder dan 3 maanden</option>
                    <option value="Gemiddeld">3 tot 6 maanden</option>
                    <option value="Lang">Meer dan 6 maanden</option>
                  </select>
                </div>

                <div class="form-group col-md-12">
                  <label class="d-block mb-2">Specifieke zorgfaciliteiten mogelijk?</label>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="rolstoel" name="care_features" value="Rolstoeltoegankelijk">
                    <label class="form-check-label" for="rolstoel">Volledig rolstoeltoegankelijk</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="tillen" name="care_features" value="Plafondlift">
                    <label class="form-check-label" for="tillen">Voorbereiding voor til-/plafondliften</label>
                  </div>
                </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>

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

<script>
document.querySelectorAll('.next-step').forEach(button => {
    button.addEventListener('click', () => {
        const currentStep = button.closest('.step');
        const nextStep = currentStep.nextElementSibling;
        
        // Simpele validatie check
        const inputs = currentStep.querySelectorAll('input[required]');
        let valid = true;
        inputs.forEach(i => { if(!i.value) valid = false; });

        if(valid && nextStep) {
            currentStep.classList.add('d-none');
            nextStep.classList.remove('d-none');
            window.scrollTo(0, 0); // Terug naar boven voor de focus
        } else {
            alert('Vul a.u.be. de verplichte velden in.');
        }
    });
});

document.querySelectorAll('.prev-step').forEach(button => {
    button.addEventListener('click', () => {
        const currentStep = button.closest('.step');
        const prevStep = currentStep.previousElementSibling;
        if(prevStep) {
            currentStep.classList.add('d-none');
            prevStep.classList.remove('d-none');
        }
    });
});
</script>

{{ end }}