{% load widget_tweaks %}

<div class="col-span-1 select-none" x-data="{
                                            expanded_form: true,
                                            selectAll : false,
                                            selected_{{ filter_form.html_name }}: [],
                                            toggleAllCheckboxes() {
                                            this.selectAll = !this.selectAll
                                            this.selected_{{ filter_form.html_name }} = [];

                                            checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
                                            [...checkboxes].map((el) => {
                                            el.checked = this.selectAll;
                                            (this.selectAll) ? this.selected_{{ filter_form.html_name }}.push(el.value) : this.selected_{{ filter_form.html_name }} = [];
                                            })

                                            this.updateSelectAllState()
                                            },
                                            updateSelectAllStateGroup() {
                                            this.updateSelectAllState()
                                            },
                                            updateSelectAllState() {

                                            checkboxes_group = document.querySelectorAll('input[group-select]');
                                            checkboxes = document.querySelectorAll('input[name={{ filter_form.html_name }}]');
                                            this.selected_{{ filter_form.html_name }}= [];
                                            [...checkboxes].map((el) => {
                                            if (el.checked) {

                                            this.selected_{{ filter_form.html_name }}.push(el.value);
                                            }
                                            })


                                            if (this.selected_{{ filter_form.html_name }}.length == 0) {
                                            this.selectAll = false;
                                            $refs.checkAll.indeterminate = false;
                                            [...checkboxes_group].map((el) => {
                                            el.checked = false
                                            })
                                            } else if (this.selected_{{ filter_form.html_name }}.length < checkboxes.length) {

                                            this.selectAll = false;
                                            $refs.checkAll.indeterminate = true;

                                            } else {
                                            this.selectAll = true;
                                            $refs.checkAll.indeterminate = false;

                                            [...checkboxes_group].map((el) => {
                                            el.checked = true
                                            })
                                            }

                                            this.selectAll = (this.selected_{{ filter_form.html_name }}.length == checkboxes.length) ? true : false;

                                            checkboxes_group = document.querySelectorAll('input[group-select]');
                                            }
                                            }"
     x-init="updateSelectAllStateGroup();"
>
  <h3 class="flow-root">
    <!-- Expand/collapse section button -->
    <div class="parent relative cursor-pointer" >
      <div class="py-3 w-full flex items-center text-sm px-2 bg-base-200  rounded-lg " @click="expanded_form = ! expanded_form" aria-controls="filter-section-1" aria-expanded_form="false">
        <span class="flex items-center" >

          <!-- Heroicon name: solid/minus-sm -->
          <svg class="h-5 w-5 transition-all" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" x-bind:class="!expanded_form ? '-rotate-90' : ''">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />

          </svg>

        </span>
        <label for="{{ filter_form.html_name }}" display="contents" class="ml-1 font-medium text-neutral-900 dark:text-white"> {{ filter_form.label }} </label>

        {% comment %} <a display="contents" class="hidden-child">All</a> {% endcomment %}
      </div>
      <div display="contents" class="absolute right-0 top-0 bottom-0 items-center flex pr-2 hidden-child" tooltip="Check all">
        {% comment %} <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 my-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
    </svg> {% endcomment %}
        <input type="checkbox" class="checkbox checkbox-sm" x-ref="checkAll" x-on:click="toggleAllCheckboxes(); " x-model="selectAll">
      </div>
    </div>
  </h3>
  <div class="pl-2 mt-2" x-show="expanded_form" x-collapse>
    {% render_field filter_form class="checkbox sm:text-sm checkbox-sm" %}
  </div>
</div>
