{% load static %}

{% block scripts %}
<script src="{% static 'admin-lte/plugins/jquery/jquery.min.js' %}"></script>
<script src="{% static 'admin-lte/plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="{% static 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js' %} "></script>


{% block datatable_js %}{% endblock %}

<script src="{% static 'admin-lte/dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'admin-lte/dist/js/demo.js' %}"></script>



<style>
    #professionnel_form > div.card.card-info > div.card-body > div.form-group.row.form-row.field-location > div > span > span.selection > span{
        padding: 0 !important;
    }
</style>

<script>

    // alert("TEST")
    document.addEventListener("DOMContentLoaded", function () {
    const secteursField = document.querySelector("#id_secteurs");
    const tagsField = document.querySelector("#id_tags");

    if (!secteursField || !tagsField) return;

    function updateTags() {
        let selectedSecteurs = Array.from(secteursField.selectedOptions).map(option => option.value);
        let selectedTags = Array.from(tagsField.selectedOptions).map(option => option.value);
        let url = `/admin/get_filtered_tags/?secteurs=${selectedSecteurs.join(",")}&tags=${selectedTags.join(",")}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                tagsField.innerHTML = "";
                data.tags.forEach(tag => {
                    let option = document.createElement("option");
                    option.value = tag.id;
                    option.textContent = tag.nom;
                    option.selected = tag.checked
                    tagsField.appendChild(option);
                });
            });
    }

    updateTags()
    secteursField.addEventListener("change", updateTags);
});



(function($) {
    $(document).ready(function() {
        function updateLocationOptions() {
            var adresse = $("#id_adresse").val();
            var locationField = $("#id_location");

            if (adresse) {
                $.ajax({
                    url: `/admin/get_filtered_locations/?adresse=${adresse}`,
                    // data: { "adresse": adresse },
                    success: function(data) {
                        locationField.find("option").remove();
                        locationField.append('<option value="">---------</option>');
                        
                        $(data.results).each(function(index, item) {
                            locationField.append(
                                '<option value="' + item.id + '">' + item.nom + '</option>'
                            );
                        });
                    }
                });
            }
        }

        $("#id_adresse").change(updateLocationOptions);
    });
})(django.jQuery);


</script>
{% endblock %}
