{{ define "main" }}

<section class="section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="p-4 p-sm-5 shadow rounded content">
          <h2 class="section-title">{{ .Title }}</h2>
          <form id="contact-form">
            <div class="row gy-4">
              <div class="form-group col-md-6">
                <label for="fname">{{ i18n "first_name" }}</label>
                <input type="text" class="form-control text-dark" id="fname" name="fname" placeholder="{{ i18n "ph_first_name" }}" required>
              </div>
              <div class="form-group col-md-6">
                <label for="lname">{{ i18n "last_name" }}</label>
                <input type="text" class="form-control text-dark" id="lname" name="lname">
              </div>
              <div class="form-group col-md-6">
                <label for="email">{{ i18n "email" }}</label>
                <input type="email" class="form-control text-dark" id="email" name="email" placeholder="{{ i18n "ph_email" }}" required>
              </div>
              <div class="form-group col-md-6">
                <label for="phone">Telefoonnummer</label>
                <input type="tel" class="form-control text-dark" id="phone" name="phone" placeholder="Bijv. 0612345678">
              </div>
              <div class="form-group col-md-12">
                <label for="reason">Reden van contact</label>
                <select class="form-control text-dark" id="reason" name="reason" required>
                  <option value="" disabled selected>Maak een keuze...</option>
                  <option value="Kavel laten toetsen">Kavel laten toetsen</option>
                  <option value="Aanmelden nieuwsbrief">Aanmelden nieuwsbrief</option>
                  <option value="Zakelijk">Zakelijk</option>
                </select>
              </div>
              <div class="form-group col-md-12">
                <label for="message">{{ i18n "write_message" }}</label>
                <textarea name="message" id="message" class="form-control text-dark" placeholder="{{ i18n "ph_message" }}"></textarea>
              </div>
              <div class="col-md-12">
                <button type="submit" id="submit-btn" class="btn btn-primary">{{ i18n "send" }}</button>
              </div>
            </div>
            <div id="form-response" class="mt-3" style="display:none;"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const btn = document.getElementById('submit-btn');
    const responseDiv = document.getElementById('form-response');
    btn.disabled = true;
    const originalBtnText = btn.innerText;
    btn.innerText = 'Verzenden...';

    const reason = document.getElementById('reason').value;
    const message = document.getElementById('message').value;

    // We combineren de reden en het bericht voor het 'description' veld in EspoCRM
    const fullDescription = "Reden van contact: " + reason + "\n\nBericht:\n" + message;

    const payload = {
        "firstName": document.getElementById('fname').value,
        "lastName": document.getElementById('lname').value,
        "emailAddress": document.getElementById('email').value,
        "phoneNumber": document.getElementById('phone').value,
        "description": fullDescription,
        "salutationName": "" // Je kunt dit leeg laten als je het hebt opgelost
    };

    fetch('https://crm.start-it.nl/api/v1/LeadCapture/1eeab8e3c9f41fd45419a012fb8696ac', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(payload)
    })
    .then(response => {
        if (response.ok) {
            responseDiv.style.display = 'block';
            responseDiv.className = 'alert alert-success mt-3';
            responseDiv.innerText = 'Bedankt! Uw bericht is succesvol verzonden.';
            document.getElementById('contact-form').reset();
        } else {
            throw new Error('Server respons was niet ok');
        }
    })
    .catch(error => {
        responseDiv.style.display = 'block';
        responseDiv.className = 'alert alert-danger mt-3';
        responseDiv.innerText = 'Er is een fout opgetreden bij het verzenden. Controleer uw verbinding.';
        console.error('Error:', error);
    })
    .finally(() => {
        btn.disabled = false;
        btn.innerText = originalBtnText;
    });
});
</script>

{{ end }}