{% extends 'main_django.html' %}

{% load i18n %}
{% block headextra %}
    <style>
.courses-search {
	width: 80% !important;
	@include media-breakpoint-down(md) {
		width: 100% !important;
	}

	@include media-breakpoint-down(sm) {
		width: 100% !important;
	}
}
    </style>
{% endblock %}

{% block title %}{% trans "Curriculums" %} | {{ platform_name }}{% endblock %}

{% block body %}
    <section class="curriculums-section find-courses white-color-bg">
        <section class="courses-container holder">
            <div class="col-xs-12 my-3">
                <a class="w-100 filter-options-btn d-lg-none" id="filter">
                    <span>{{_("Filter Options")}}</span>
                    <span class="icon fa fa-filter ml-3" aria-hidden="true"></span>
                </a>
            </div>
            <div class="row">
                <div class="col-xs-12 col-lg-10 mx-auto">
                    <div class="row">
                        <!-- Filter List Column Start -->
                        {% include "curriculum/partial/curriculum_filter_list.html" %}
                        <!-- Filter Column End -->
                        <!-- Curriculums Column Start -->
                        <div class="col-xs-12 col-lg-9">
                            <div class="w-100">
                                <h1 class="main-heading">
                                    {{ _("Courses")}}
                                </h1>
                                <p class="sub-heading mb-5">
                                    {{ _("Click on the courses to view all available training locations and course dates.")}}
                                </p>
                            </div>
                            {% include "curriculum/partial/search.html" with objects=curriculums search_label=_("Search for a Course") %}
                            <div class="courses no-course-discovery"
                                 role="region"
                                 aria-label="{{ _('List of Courses')}}">
                                <ul class="courses-listing">
                                    {% for curriculum in curriculums %}
                                        {% include "curriculum/partial/curriculum_card.html" %}
                                    {% endfor %}
                                </ul>
                            </div>
                            {% if curriculums.has_next %}
                                <div class="curriculums-more-holder text-center">
                                    <a class="btn btn-primary view-more-link" href="#" onclick="return false;">
                                        <span>{{ _("View More") }}</span>
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var element = document.getElementById("content");
        element.classList.add("mb-0");

        $(document).ready(function() {
            var page = 1;
            var block_request = false;

            $(".view-more-link").click(function () {
                var self = this;
                var urlQueryParams = new URLSearchParams(window.location.search);

                if (!block_request) {
                    block_request = true;
                    page += 1;
                    urlQueryParams.set("page", page);

                    $.ajax({
                        type: "GET",
                        url: "{% url 'curriculums-list-view' %}",
                        data: urlQueryParams.toString(),
                        success: function (data) {
                            if (data.end_pagination) {
                                $(self).remove();
                            } else {
                                block_request = false;
                            }
                            $(".courses-listing").append(data.content);
                        }
                    })
                }
            });

            $(".courses-filter").submit(function (event) {
                event.preventDefault();
                const filterFormParams = $(this).serialize();
                buildUrlAndReloadPage(filterFormParams, "filter");
                return false;
            });

            $(".courses-search").submit(function (event) {
                event.preventDefault();
                const searchFormParams = $(this).serialize();
                buildUrlAndReloadPage(searchFormParams, "search");
                return false;
            });
        });

        function buildUrlAndReloadPage(givenFormParams, target) {
            var finalQueryParams = new URLSearchParams();
            var givenQueryParams = new URLSearchParams(givenFormParams);
            givenQueryParams.delete("csrfmiddlewaretoken");

            finalQueryParams = extendWithQueryParams(finalQueryParams, givenQueryParams)

            if (target === "search") {
                var otherFormParams = $("form.courses-filter").serialize();
            } else {
                otherFormParams = $("form.courses-search").serialize();
            }
            var otherQueryParams = new URLSearchParams(otherFormParams);
            otherQueryParams.delete("csrfmiddlewaretoken");

            finalQueryParams = extendWithQueryParams(finalQueryParams, otherQueryParams)
            window.location.search = finalQueryParams.toString();
        }

        function extendWithQueryParams(currentQueryParams, newQueryParams) {
            for (const [key, value] of newQueryParams.entries()) {
                if (key === "search" && !Boolean(value)) { continue; }
                currentQueryParams.append(key, encodeURIComponent(value))
            }
            return currentQueryParams;
        }

        function resetQueryParams(){
            if (window.location.href.indexOf("?") > -1) {
                window.location.href = window.location.pathname;
            }
        }
    </script>
{% endblock %}