{% extends 'main_django.html' %}

{% load i18n %}
{% load custom_permission %}
{% 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 "Courses" %} | {{ platform_name }}{% endblock %}

{% block body %}
    <section class="curriculums-section curriculums-about find-courses white-color-bg">
        <div class="curriculums-about-head">
            {% include "curriculum/partial/curriculum_detail.html" %}
        </div>
        <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-12 mx-auto">
                    <div class="row">
                        <div class="col-12">
                            <div class="curriculums-return">
                                <a href="{% url 'curriculums-list-view' %}">
                                    {% if request.LANGUAGE_CODE == "ar" %}
                                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                    {% else %}
                                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                    {% endif %}
                                    {{ _("Courses List") }}
                                </a>
                            </div>
                        </div>
                    </div>
                        <div class="row">
                            <!-- Filter List Column Start -->
                            {% include "curriculum/partial/course_filter_list.html" %}
                            <!-- Filter Column End -->
                            <!-- Courses Column Start -->
                            <div class="col-xs-12 col-lg-9">
                                <div class="w-100 mb-5">
                                    <h1 class="main-heading">
                                        {{ _("Training Locations and Course Dates")}}
                                    </h1>
                                </div>
                                <!-- {% include "curriculum/partial/search.html" with objects=ccx_courses search_label=_("Search for Courses") %} -->
                                <div class="courses no-course-discovery"
                                     role="region"
                                     aria-label="{{ _('List of Courses') }}">
                                    <ul class="courses-listing curriculum-about-listing">
                                        {% for ccx_course in ccx_courses %}
                                            {% include "curriculum/partial/course_card.html" with is_SRCA_employer=request.user|is_SRCA_employer %}
                                        {% endfor %}
                                    </ul>
                                </div>
                                {% if ccx_courses.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 'curriculum-about' curriculum.id %}",
                        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 %}