{% 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 is-hidden-mobile">
                <p class="panel-heading has-text-centered">Search Options</p>

                <div class="field">
                    <div class="columns">
                        <div class="column pl-6 is-two-fifths is-flex is-flex-direction-column">
                            <div class="title is-5 pt-2 has-text-centered">Topic</div>
                            <div class="columns">
                                <div class="column">
                                    {% for topic in topics_1 %}
                                    <div class="field">
                                        <label class="checkbox">
                                            <input class="topic" name="topic" type="checkbox" value="{{ topic }}">
                                            <span class="has-text-grey is-size-6">{{ topic }}</span>
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                                <div class="column">
                                    {% for topic in topics_2 %}
                                    <div class="field">
                                        <label class="checkbox">
                                            <input class="topic" name="topic" type="checkbox" value="{{ topic }}">
                                            <span class="has-text-grey is-size-6">{{ topic }}</span>
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
                                <button onclick="selectAllQueryParams('topic')" class="button is-success is-small">Select All</button>
                            </span>
                        </div>

                        <div class="column is-flex is-flex-direction-column pl-6">
                            <div class="title is-5 pt-2 has-text-centered">Type</div>

                            {% for tag_type in tag_types %}
                            <div class="field">
                                <label class="checkbox ml-0">
                                    <input class="type" name="type" type="checkbox" value="{{ tag_type }}">
                                    <span class="has-text-grey is-size-6">{{ tag_type }}</span>
                                </label>
                            </div>
                            {% endfor %}
                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
                                <button onclick="selectAllQueryParams('type')" class="button is-success is-small">Select All</button>
                            </span>
                        </div>

                        <div class="column is-flex is-flex-direction-column pl-6">
                            <div class="title is-5 pt-2 has-text-centered">Payment</div>

                            {% for payment_tier in payment_tiers %}
                            <div class="field">
                                <label class="checkbox ml-0">
                                    <input class="payment" name="payment" type="checkbox" value="{{ payment_tier }}">
                                     <span class="has-text-grey is-size-6">{{ payment_tier }}</span>
                               </label>
                            </div>
                            {% endfor %}
                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
                                <button onclick="selectAllQueryParams('payment')" class="button is-success is-small">Select All</button>
                            </span>
                        </div>

                        <div class="column is-flex is-flex-direction-column px-6">
                            <div class="title is-5 pt-2 has-text-centered">Level</div>

                            {% for complexity in complexities %}
                            <div class="field">
                                <label class="checkbox ml-0">
                                    <input class="complexity" name="complexity" type="checkbox" value="{{ complexity }}">
                                    <span class="has-text-grey is-size-6">{{ complexity }}</span>
                              </label>
                            </div>
                           {% endfor %}
                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
                                <button onclick="selectAllQueryParams('complexity')" class="button is-success is-small">Select All</button>
                            </span>
                        </div>
                    </div>

                    <div class="is-flex is-justify-content-center pb-3">
                        <span class="control mr-2">
                            <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
                        </span>

                        <span class="is-one-fifth control is-flex is-align-items-end is-justify-content-end mt-auto">
                            <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button>
                        </span>
                    </div>
                </div>
            </div>
    </section>

    {% if resources|length > 0 %}
    <section class="section">
        <div class="container">
            <div class="content is-flex is-justify-content-center">
                <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 %}
    <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
    {% endif %}

<script>
    "use strict";
    const initialParams = new URLSearchParams(window.location.search);
    const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];

    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;
        });
    });
    }

    function selectAllQueryParams(column){
        checkboxOptions.forEach((option) => {
        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
            if (checkbox.className == column) {
                checkbox.checked = true;
            }
        });
    });
    }

</script>
{% endblock %}