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

{% block title %}Resources{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{% static "css/resources/resources.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="checkboxOption" 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="checkboxOption" 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="checkboxOption" 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="checkboxOption" 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>
<script>
    const initialParams = new URLSearchParams(window.location.search).get("checkboxOptions");
    const checkBoxes = document.querySelectorAll("input[name='checkboxOption']");
    console.log(initialParams);

    checkBoxes.forEach((x) => {
        if(initialParams.includes(x.value)){
            x.checked = true;
        }
    });

    function buildQueryParams(){
        let params = new URLSearchParams(window.location.search);
        let allOptions = "";
        checkBoxes.forEach((x) => {
            if(x.checked){
                allOptions += x.value + ",";
            }
        });
        params.set("checkboxOptions", allOptions);

        window.location.search = params;
    }

    function clearQueryParams(){
        checkBoxes.forEach((x) => {x.checked = false});
    }
</script>
{% endblock %}