{% extends 'base/base.html' %}
{% load as_icon %}
{% load static %}

{% block title %}Resources{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
    <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
{% endblock %}

{% block content %}
  {% include "base/navbar.html" %}

  <section class="section">
      <div class="container">
          <div class="content">
             <h1 class="resource-title has-text-centered">Resources</h1>
              <hr/>
          </div>
          <div class="panel">
              <p class="panel-heading has-text-centered">Search Options</p>

              <div class="field">
                  <div class="columns">
                      <div class="column has-text-centered">
                          Topic

                          {% for topic in topics %}
                            <div class="field">
                              <label class="checkbox ml-0">
                                <input name="topicOption" type="checkbox" value="{{ topic }}">
                                  <span class="has-text-grey is-size-7">{{ topic }}</span>
                              </label>
                            </div>
                          {% endfor %}
                      </div>

                        <div class="column has-text-centered">
                            Type

                            {% for tag_type in tag_types %}
                            <div class="field">
                              <label class="checkbox ml-0">
                                <input name="typeOption" type="checkbox" value="{{ tag_type }}">
                                  <span class="has-text-grey is-size-7">{{ tag_type }}</span>
                              </label>
                            </div>
                          {% endfor %}
                        </div>

                        <div class="column has-text-centered">
                            Payment

                            {% for payment_tier in payment_tiers %}
                            <div class="field">
                              <label class="checkbox ml-0">
                                <input name="paymentOption" type="checkbox" value="{{ payment_tier }}">
                                  <span class="has-text-grey is-size-7">{{ payment_tier }}</span>
                              </label>
                            </div>
                          {% endfor %}
                        </div>

                        <div class="column has-text-centered">
                            Level

                            {% for complexity in complexities %}
                            <div class="field">
                              <label class="checkbox ml-0">
                                <input name="complexityOption" type="checkbox" value="{{ complexity }}">
                                  <span class="has-text-grey is-size-7">{{ complexity }}</span>
                              </label>
                            </div>
                          {% endfor %}
                        </div>
                  </div>

                  <div class="ml-3 pb-3">

                      <span class="control">
                        <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
                      </span>

                      <span class="is-one-fifth control">
                        <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button>
                      </span>

                  </div>

              </div>
          </div>
      </div>
  </section>

    {% if resources|length > 0 %}
    <section class="section">
        <div class="container">
            <div class="content">
                <div>
                    {% for resource in resources %}
                        {% include "resources/resource_box.html" %}
                    {% endfor %}

                    {% for subcategory in subcategories %}
                        <h2 id="{{ subcategory.category_info.raw_name }}">
                            <a href="{% url "resources:resources" category=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}">
                                {{ subcategory.category_info.name }}
                            </a>
                        </h2>
                        <p>{{ subcategory.category_info.description|safe }}</p>

                        {% for resource in subcategory.resources %}
                            {% with category_info=subcategory.category_info %}
                                {% include "resources/resource_box.html" %}
                            {% endwith %}
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    {% else %}
    <p>No resources matching search.</p>
    {% endif %}

<script>
    "use strict";
    const initialParams = new URLSearchParams(window.location.search);
    const checkboxOptions = ['topicOption', 'typeOption', 'paymentOption', 'complexityOption'];
    // const topicOptions = document.querySelectorAll("input[name='topicOption']");

    const createQuerySelect = (opt) => {
        return "input[name=" + opt + "]"
    }

    checkboxOptions.forEach((option) => {
        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
            if(initialParams.get(option).includes(checkbox.value)){
                checkbox.checked = true
            }
        });
    });


    function buildQueryParams(){
        let params = new URLSearchParams(window.location.search);
        checkboxOptions.forEach((option) => {
            let tempOut = ""
            document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
                if(checkbox.checked){
                    tempOut += checkbox.value + ",";
                }
            });
            params.set(option, tempOut);
    });

        window.location.search = params;
    }

    function clearQueryParams(){
        checkboxOptions.forEach((option) => {
        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
            checkbox.checked = false;
        });
    });
    }
</script>
{% endblock %}