{% extends 'base.html.twig' %}

{% block title %}Nos spécialités {{ parent() }}{% endblock %}

{% block body %}
<div class="container mx-auto p-4">
    <h1 class="text-5xl font-bold mb-4 mt-8">Spécialités</h1>
    <p class="text-3xl lg:text-xl mb-4">Trouvez la spécialité qui vous correspond en utilisant la barre de recherche ci-dessous</p>
    <div class="max-w-xl mx-auto">
        <input id="searchSpec" type="text" placeholder="Rechercher une spécialité..." class="border text-3xl lg:text-xl p-2 w-full mb-4">
    </div>

    <div id="specListContainer" class="space-y-4">
        {% for letter, specialities in specialitiesByLetter %}
            <div>
                <h2 class="text-4xl lg:text-xl font-semibold">{{ letter }}</h2>
                <ul class="list-disc list-inside ml-4">
                    {% for speciality in specialities %}
                        <li class="mb-4 lg:mb-0">
                            <a href="{{ path('app_admin_speciality', {'id': speciality.id}) }}" class="text-3xl lg:text-xl text-blue-500 hover:underline">
                                {{ speciality.name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>

    <div id="searchResults" class="space-y-4 hidden"></div>
</div>

<script>
  $(document).ready(function() {
      $('#searchSpec').on('input', function() {
          const query = $(this).val().trim().toLowerCase();

          if (query === '') {
              // Afficher le tableau principal et masquer les résultats de recherche
              $('#specListContainer').show();
              $('#searchResults').empty().hide();
          } else {
              // Masquer le tableau principal et afficher le conteneur de résultats de recherche
              $('#specListContainer').hide();
              $('#searchResults').empty().show();

              // Effectuer la recherche via AJAX
              $.ajax({
                  url: '{{ path("api_specialities_search", {"query": "__query__"}) }}'.replace('__query__', query),
                  method: 'GET',
                  success: function(data) {
                      $('#searchResults').empty();

                      if (data.totalItems > 0) {
                        const title = $('<h2>').addClass ('text-xl font-semibold').text('Résultats de recherche');
                        const list = $('<ul>').addClass('list-disc list-inside ml-4');
                        
                          
                          data.items.forEach(function(speciality) {
                              const listItem = $('<li>').addClass('text-blue-500 hover:underline').append(
                                  $('<a>').attr('href', "{{ path('app_admin_speciality', {'id': '__id__'}) }}".replace('__id__', speciality.id)).text(speciality.name)
                              );
                              list.append(listItem);
                          });

                          $('#searchResults').append(list);
                          $('#searchResults').prepend(title);
                      } else {
                          $('#searchResults').append('<p class="text-center text-red-500">Aucune spécialité trouvée.</p>');
                      }
                  },
                  error: function(error) {
                      console.error('Erreur lors de la récupération des spécialités :', error);
                  }
              });
          }
      });
  });
</script>
{% endblock %}