{% 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 dark:bg-neutral-700 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-style" 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-style sm:text-sm h-4 w-4 " %}
  </div>
</div>
