<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const terapiaSelect = document.getElementById('terapia');
  const sedeSelect = document.getElementById('sede');
  const medicoSelect = document.getElementById('medico');
  let token;

  // Funzione per ottenere il token di autenticazione
  async function getToken() {
    const response = await fetch('https://fisiokinehub.atobit.it/api/auth/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        type: 'apikey',
        username: 'CL-qPak95N73Bck0PddheX32VzxXc'
      })
    });
    const data = await response.json();
    token = data.token;
  }

  // Funzione per popolare le terapie
  async function populateTerapie() {
    const response = await fetch('https://fisiokinehub.atobit.it/api/terapie', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const terapie = await response.json();
    terapie.forEach(terapia => {
      const option = document.createElement('option');
      option.value = terapia.id;
      option.textContent = terapia.nome;
      terapiaSelect.appendChild(option);
    });
  }

  // Funzione per popolare le sedi in base alla terapia selezionata
  async function populateSedi(terapiaId) {
    sedeSelect.innerHTML = '<option value="">Seleziona una sede</option>';
    const response = await fetch(`https://fisiokinehub.atobit.it/api/sedi?terapiaId=${terapiaId}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const sedi = await response.json();
    sedi.forEach(sede => {
      const option = document.createElement('option');
      option.value = sede.id;
      option.textContent = sede.nome;
      sedeSelect.appendChild(option);
    });
  }

  // Funzione per popolare i medici in base alla sede e alla terapia selezionate
  async function populateMedici(terapiaId, sedeId) {
    medicoSelect.innerHTML = '<option value="">Seleziona un medico</option>';
    const response = await fetch(`https://fisiokinehub.atobit.it/api/medici?terapiaId=${terapiaId}&sedeId=${sedeId}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    const medici = await response.json();
    medici.forEach(medico => {
      const option = document.createElement('option');
      option.value = medico.id;
      option.textContent = medico.nome;
      medicoSelect.appendChild(option);
    });
  }

  // Event listener per il cambio di selezione della terapia
  terapiaSelect.addEventListener('change', function() {
    const terapiaId = this.value;
    if (terapiaId) {
      populateSedi(terapiaId);
    }
  });

  // Event listener per il cambio di selezione della sede
  sedeSelect.addEventListener('change', function() {
    const terapiaId = terapiaSelect.value;
    const sedeId = this.value;
    if (terapiaId && sedeId) {
      populateMedici(terapiaId, sedeId);
    }
  });

  // Inizializzazione
  getToken().then(() => {
    populateTerapie();
  });
});
</script>