{{ block title }}
    Eingabe Ihrer persönlichen dreistelligen Nummer
{{ endblock }}
{{ block content }}
<div class="tab" id="firstTab">
  {{ formfield 'number_part1' }}
  <p>
    <button type="button" class="btn-tab" data-offset="1" onclick="showNextTab()">Weiter</button>
  </p>
</div>

<div class="tab" id="secondTab" style="display: none;">
  {{ formfield 'number_part1_textinput' }}
  <p>
    <button type="button" class="btn-tab" data-offset="-1" onclick="goToPreviousTab()">Zurück</button>
    <button type="button" class="btn-tab" data-offset="1" onclick="showNextTab()">Weiter</button>
  </p>
</div>

<div class="tab" id="thirdTab" style="display: none;">
  Gehen Sie nun auf Weiter. Stimmen Ihre Eingaben überein, werden Sie zum nächsten Bildschirm geleitet. Stimmen Ihre Eingaben nicht überein, erscheint eine Fehlermeldung und Sie werden gebeten den Eingabeprozess zu wiederholen.
  <br><br> Mit Zurück wiederholen Sie den Eingabeprozess direkt.
  <br>
  <p><br><br>
    <button type="button" class="btn-tab" data-offset="-1" onclick="goToPreviousTab()">Zurück</button>
    <button class="btn btn-primary">Weiter</button>
  </p>
</div>
<script>
  let activeTab = 1; // Variable to track the active tab, initially set to 1

  function showNextTab() {
    const numberPart1 = document.getElementById('id_number_part1'); // Replace 'id_number_part1' with the actual ID of the number_part1 field
    const inputField = document.getElementById('id_number_part1_textinput'); // Replace 'id_number_part1_textinput' with the actual ID of the input field
    const firstTab = document.getElementById('firstTab');
    const secondTab = document.getElementById('secondTab');
    const thirdTab = document.getElementById('thirdTab');

    if (activeTab === 1) {
      if (numberPart1.value) {
        firstTab.style.display = 'none';
        secondTab.style.display = 'block';
        thirdTab.style.display = 'none';
        activeTab = 2; // Update the active tab to 2
      } else {
        alert('Bitte wählen Sie Ihre dreistellige Nummer aus der Liste aus');
      }
    } else if (activeTab === 2) {
      if (inputField.value) {
        firstTab.style.display = 'none';
        secondTab.style.display = 'none';
        thirdTab.style.display = 'block';
        activeTab = 3; // Update the active tab to 3
      } else {
        alert('Bitte geben Sie Ihre persönliche dreistellige Nummer ein');
      }
    }
  }

  function goToPreviousTab() {
    const firstTab = document.getElementById('firstTab');
    const secondTab = document.getElementById('secondTab');
    const thirdTab = document.getElementById('thirdTab');

    if (activeTab === 2) {
      firstTab.style.display = 'block';
      secondTab.style.display = 'none';
      thirdTab.style.display = 'none';
      activeTab = 1; // Update the active tab to 1
    } else if (activeTab === 3) {
      firstTab.style.display = 'none';
      secondTab.style.display = 'block';
      thirdTab.style.display = 'none';
      activeTab = 2; // Update the active tab to 2
    }
  }
</script>

{{ endblock }}