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

{% block title %}Agrinir · VetRation{% endblock %}

{% block body %}
<div class="h1">
    Nouvel aliment
</div>
    
    {{ form_start(form) }}
        <div id="contenu-formulaire-aliment">
            {{ form_widget(form) }}
        </div>
        <input type="submit" value="Créer" />
    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const agrinirType = document.getElementById('agrinir_type_plante');
            agrinirType.addEventListener('change', function() {
                const typeValue = this.value;
                const targetContainer = document.querySelector('#agrinir_type_fourrage');
                // Utiliser HTMX pour envoyer la requête avec l'URL formatée
                htmx.ajax('GET', '/agrinir/type_fourrage?type_plante=' + encodeURIComponent(typeValue), targetContainer);
            });
        });
    </script>
    <script>
        // initialize tom-select
        var tomSelect = new TomSelect('#agrinir_alimentDeReference', {
            sortField: {
                field: "text", // Trie les options par leur texte
                direction: "asc" // Dans un ordre ascendant
            },
            persist: false, // Les options créées ne seront pas ajoutées à la liste après rechargement de la page
            createOnBlur: true, // Crée l'option lorsque l'élément perd le focus
            createFilter: function(input) {
                var match, regex;
                regex = new RegExp('^[a-zA-Z0-9 ]+$'); // Exemple de filtre pour autoriser uniquement les caractères alphanumériques et les espaces
                match = input.match(regex);
                if (match) {
                    return !this.options.hasOwnProperty(match[0]);
                }
                return false; // Empêche la création si le filtre ne correspond pas
            },
            placeholder: "Sélectionnez ou tapez pour créer", // Texte d'indication pour l'utilisateur
        });
        tomSelect.on('initialize',function(){
            console.log('initialize');
            // remove form-select class from tom-select element whit ts-wrapper class
            document.querySelectorAll('.ts-wrapper').forEach(function (element) {
                element.classList.remove('form-select');
            });
        });
    </script>
{% endblock %}