{% extends "settings.html" %}
{% block settings %}
{% load i18n %}
<div id="response" hidden>
</div>
<div
  class="oh-inner-sidebar-content__header d-flex justify-content-between align-items-center"
>
  <h2 class="oh-inner-sidebar-content__title oh-label__info">
    {% trans "Default Accessibility" %}
    <span class="oh-info mr-2 mb-2" title="{% trans "Limit default view access to horilla feature" %}">
    </span>
  </h2>

</div>
<div class="oh-card" id="accessibilityContainer">
    <div class="oh-accordion-meta">
    {% for accessibility, display in accessibility %}
      <div class="oh-accordion-meta__item">
        <div class="oh-accordion-meta__header">
          <span class="oh-accordion-meta__title"
            >{{display}}</span
          >
          <div class="oh-accordion-meta__actions" onclick="event.stopPropagation()">
            <div class="oh-dropdown" x-data="{open: false}">
              <button
                class="oh-btn oh-stop-prop oh-accordion-meta__btn"
                @click="open = !open"
                @click.outside="open = false"
              >
                {% trans "Actions" %}
                <ion-icon
                  class="ms-2 oh-accordion-meta__btn-icon"
                  name="caret-down-outline"
                ></ion-icon>
              </button>
              <div
                class="oh-dropdown__menu oh-dropdown__menu--right"
                x-show="open"
              >
                <ul class="oh-dropdown__items">
                  {% comment %} <li class="oh-dropdown__item">
                    <a href="#" class="oh-dropdown__link">Archive</a>
                  </li> {% endcomment %}
                  <li class="oh-dropdown__item">
                    <a
                      href="#"
                      class="oh-dropdown__link oh-dropdown__link--danger"
                      onclick="
                        Swal.fire({
                          title: 'Are you sure?',
                          text: `{% trans "You won't be able to revert this!" %}`,
                          icon: 'warning',
                          showCancelButton: true,
                          confirmButtonColor: '#3085d6',
                          cancelButtonColor: '#d33',
                          confirmButtonText: '{% trans 'Yes' %}, {% trans 'Clear it' %}!'
                          }).then((result) => {
                          if (result.isConfirmed) {
                             $('#{{accessibility}}_body select').val('')
                             $('#{{accessibility}}_body').find('input[type=submit]').click()
                             $('#{{accessibility}}_body select').parent().find('span').remove()
                             $('#{{accessibility}}_body select').select2()
                          }
                        });

                      "
                      >{% trans "Clear Filter" %}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="oh-accordion-meta__body d-none" id="{{accessibility}}_body">
            <form hx-post="" hx-target="#response" hx-swap="afterend">
                <input hidden type="text" name="feature" value="{{accessibility}}">
                {{accessibility_filter.form.structured}}
                <input hidden type="submit" value="submit">
            </form>
            <script>
                $(document).ready(function () {
                    setTimeout(() => {
                      $.ajax({
                        url: "{% url 'get-initial-accessibility-data' %}?feature={{accessibility}}",
                        success: function (response) {
                                for (let key in response) {
                                    if (response.hasOwnProperty(key)) {
                                        let values = response[key];
                                        let field = document.querySelector(`#{{accessibility}}_body [name="${key}"]`);

                                        if (field) {
                                            // Handle select fields
                                            if (field.tagName === 'SELECT') {
                                                // Check if it's a multiple select
                                                if (field.multiple) {
                                                    // Loop through the options and set selected if the value matches
                                                    for (let option of field.options) {
                                                      option.selected = values.includes(option.value);
                                                    }
                                                  } else {
                                                    // For single select, set the value
                                                    field.value = values[0];
                                                  }
                                                }
                                              }
                                      }
                                    }
                                    select = $("#accessibilityContainer #{{accessibility}}_body").find("select")
                                    select.parent().find('span').remove()
                                    select.select2()

                            }
                        });

                    }, 100);
                });
            </script>
        </div>
      </div>
    {% endfor %}
    </div>
  </div>
  <script>
    // Save the filter form while change the filter form
    $("#accessibilityContainer select").change(function (e) {
        $(this).parent().closest("form").find("input[type=submit]").click();
    });
    $(document).mouseup(function(e) {
        var container = $('.select2.select2-container');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            setTimeout(() => {
                $(".select2-container.select2-container--default.select2-container--open").removeClass("select2-container--open")
            }, 10);
        }
    });
  </script>
  <script>
    const items = document.querySelectorAll("#accessibilityContainer select");
    items.forEach((item, index) => {
        item.id = `select-${index + 1}`;
    });

</script>
{% endblock settings %}