{% extends 'Admin/base.html.twig' %}
{% block title %}
    OceanExpert | Events
{% endblock %}
{% block stylesheets %}

    <link rel="stylesheet" type="text/css" href="{{ asset('css/select.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/responsive.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-editable.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/ionicons.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/calendar.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datepicker.min.css') }}" />


{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <div class="wrapper">

        {% block sidebar %}
            {% include('Event/sidebar.html.twig') %}
        {% endblock %}

        <div class="content-wrapper">

            <!-- Content Header (Page header) -->
            <section class="content-header">
                <ol class="breadcrumb">
                    <li>
                        <a href="{{ path('frontend_homepage') }}">
                            <i class="fa fa-home"></i>
                            home
                        </a>
                    </li>
                    <li>
                        <a href="{{ path('event_calendar') }}">
                            <i class="fa fa-calendar"></i>
                            events/calendar
                        </a>
                    </li>
                </ol>
            </section>
            {% block content %}
                <!-- Main content -->
                <section class="content">
                    <div class="box box-primary">
                        <div class="box-header">
                            <div class="col-sm-10 col-md-10 ">
                            <h3>Events Calendar</h3>
                                <h4>( {{ date(data.date.start) |date('d F Y') }} - {{ date(data.date.end) |date('d F Y') }} )</h4>
                            </div>
                            <div class="col-sm-2 col-md-2 ">
                                {% if is_granted('ROLE_USER') %}
                                    <div class="createLink">
                                        <a
                                                href="{{ path('edit_event') }}">
                                            [Add a new Event]
                                        </a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row top-padding20">
                            <div class="col-md-1 col-xs-1">
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <a
                                        href="javascript:void(0);"
                                        class="date-range"
                                        data-start="{{ data.range.earlier.start }}"
                                        data-end="{{ data.range.earlier.end }}">
                                    <i class="fa fa-backward fa-fw fa-1x" aria-hidden="true"></i>
                                    Earlier Events ( {{ date(data.range.earlier.start) |date('d F Y') }} - {{ date( data.range.earlier.end) |date('d F Y') }})
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <a
                                        href="javascript:void(0);"
                                        class="pull-right date-range"
                                        data-start="{{ data.range.later.start }}"
                                        data-end="{{ data.range.later.end }}">
                                    Later Events ( {{ date(data.range.later.start) |date('d F Y') }} - {{ date( data.range.later.end) |date('d F Y') }})
                                    <i class="fa fa-forward fa-fw fa-1x" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                        {% if data.events | length > 0 %}
                            {% for  monthYear, events in data.events %}
                                <div class="row">
                                    <div class="col-md-1 col-xs-1">
                                    </div>
                                    <div class="col-md-8 col-xs-8">
                                        <h4>
                                            {{ monthYear }}
                                        </h4>
                                    </div>
                                </div>
                                <div class="row top-padding20">
                                    <div class="col-md-1 col-xs-1">
                                    </div>
                                    <div class="col-md-8 col-xs-8">
                                        <ul class="list-group">
                                            {% for event in events %}

                                                <li class="list-group-item eventtype{{ event.idEventtype }}">
                                                    <div class="row">
                                                        <div class="col-md-2">
                                                            {% if event.startOn|date('Y') != event.endOn|date('Y') %}
                                                                {{ event.startOn|date('d M Y') }}&nbsp;-&nbsp;{{ event.endOn|date('d M Y') }}</br>
                                                            {% else %}
                                                                {{ event.startOn|date('d M') }}&nbsp;-&nbsp;{{ event.endOn|date('d M') }}</br>
                                                            {% endif %}
                                                        </div>
                                                        <div class="col-md-6">
                                                            {% if event.status == 0 %}
                                                                {% set class = "text-inactive" %}
                                                                {% set title = "Inactive Event" %}
                                                            {% elseif event.status == 1 %}
                                                                {% set class = "" %}
                                                                {% set title = "" %}
                                                            {% elseif event.status == 2 %}
                                                                {% set class = "text-danger" %}
                                                                {% set title = "Deleted Event" %}
                                                            {% elseif event.status == 3 %}
                                                                {% set class = "text-danger" %}
                                                                {% set title = "Deleted Event" %}
                                                            {% endif %}
                                                            <a
                                                                    href="{{ path('view_event', {'event': event.idEvent}) }}"
                                                                    class="event-title {{ class }} tipso"
                                                                    title="{{ title }}" >
                                                                {% if event.shorttitle is defined and event.shorttitle | trim | length > 0 %}
                                                                    <strong>{{ event.shorttitle }}</strong> :
                                                                {% endif %}
                                                                {{ event.title|length > 40 ? event.title|slice(0, 40) ~ '...' : event.title }}
                                                            </a><br />{{ data.eventTypes.list[event.idEventtype] }}
                                                            {% if event.isOpen == 1 %}
                                                                - Open attendance
                                                            {% elseif event.isOpen == 2 %}
                                                                - Attendance by invitation
                                                            {% elseif event.isOpen ==3 %}
                                                                - Attendance by application
                                                            {% endif %}
                                                        </div>
                                                        <div class="col-md-2">
                                                            {% if event.city is defined and event.city | trim | length >0 %}
                                                                {{ event.city }},
                                                            {% endif %}
                                                            {% if event.country is defined and event.country | trim | length >0 %}
                                                                {{ event.country }}
                                                            {% endif %}
                                                        </div>
                                                        <div class="col-md-2">
                                                            {% if event.participants is defined and event.participants > 0 %}
                                                                <a
                                                                        href="{{ path('view_event',{'event':event.idEvent}) }}#participants">
                                                                    <div
                                                                            class="event-count tipso"
                                                                            title="This event has {{ event.participants }} participants.">
                                                                        <i class="fa fa-users fa-fw fa-1x tipso" aria-hidden="true"></i>
                                                                        <strong>{{ event.participants }}</strong>
                                                                    </div>
                                                                </a>
                                                            {% endif %}
                                                            {% if event.documents is defined and event.documents > 0 %}
                                                                <a
                                                                        href="{{ path('view_event',{'event':event.idEvent}) }}#documents" >
                                                                    <div
                                                                            class="event-count tipso"
                                                                            title="This event has {{ event.documents }} documents.">
                                                                        <i class="fa fa-file-o fa-1x" aria-hidden="true"></i>
                                                                        <strong>{{ event.documents }}</strong>
                                                                    </div>
                                                                </a>
                                                            {% endif %}
                                                            {#  #647 if is_granted('ROLE_ADMIN') #}
                                                            {#  restored ROLE_ADMIN instead of ROLE_USER to avoid #689 #}
                                                            {% if is_granted('ROLE_ADMIN') %}
                                                                <div class="createLink">
                                                                    <div
                                                                            class="event-count tipso"
                                                                            title="copy this event">
                                                                        <a href="{{ path('copy_event') }}/{{ event.idEvent }}">
                                                                            <i class="fa fa-copy fa-1x" aria-hidden="true"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center alert alert-warning top-buffer70">
                                <i class="fa fa-info-circle fa-fw fa-2x" aria-hidden="true"></i>
                                There are no events in the period
                                {{ date(data.date.start) |date('d F Y') }} - {{ date(data.date.end) |date('d F Y') }}.<br />
                                {% if data.eventTypes.active|length %}
                                    for the type(s):
                                    {% for activeTypeId in data.eventTypes.active %}
                                        {% if activeTypeId != 0 %}
                                            {{ data.eventTypes.list[activeTypeId] }}
                                        {% elseif data.eventTypes.active|length == 1 %}
                                            all event types
                                        {% endif %}
                                    {% endfor %}<br />
                                {% endif %}
                                {% if data.groups.active|length %}
                                    for the group(s):
                                    {% for activeGroupId in data.groups.active %}
                                        {% if activeGroupId != 0 %}
                                            {{ data.groups.list[activeGroupId] }}&nbsp;
                                        {% elseif data.groups.active|length == 1 %}
                                            all groups
                                        {% endif %}
                                    {% endfor %}<br />
                                {% endif %}
                                {% if data.eventLabels.active|length %}
                                    for the label(s):
                                    {% for activeLabelId in data.eventLabels.active %}
                                        {% if activeLabelId != 0 %}
                                            {{ data.eventLabels.list[activeLabelId]['type'] }}&nbsp;
                                        {% elseif data.eventLabels.active|length == 1 %}
                                            all labels
                                        {% endif %}
                                    {% endfor %}<br />
                                {% endif %}
                                To view other events, click on the corresponding year at the top of the page.
                            </div>
                        {% endif %}
                        <div class="row top-padding20 bottom-padding20">
                            <div class="col-md-1 col-xs-1">
                            </div>
                            <div class="col-md-4 col-xs-4">
                                <a
                                        href="javascript:void(0);"
                                        class="date-range"
                                        data-start="{{ data.range.earlier.start }}"
                                        data-end="{{ data.range.earlier.end }}">
                                    <i class="fa fa-backward fa-fw fa-1x" aria-hidden="true"></i>
                                    Earlier Events  ( {{ date(data.range.earlier.start) |date('d F Y') }} - {{ date( data.range.earlier.end) |date('d F Y') }})
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-12">
                                <a
                                        href="javascript:void(0);"
                                        class="pull-right date-range"
                                        data-start="{{ data.range.later.start }}"
                                        data-end="{{ data.range.later.end }}">
                                    Later Events ( {{ date(data.range.later.start) |date('d F Y') }} - {{ date( data.range.later.end) |date('d F Y') }})
                                    <i class="fa fa-forward fa-fw fa-1x" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
            {% endblock %}
        </div>
    </div>

    {% include "footer.html.twig" %}

    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/responsive.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootbox.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-tooltip.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-confirmation.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.select.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/admin-tables.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/admin-action.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        //show or hide events depending on the eventtypes choosen
        $('.eventtype').click(function() {
            let eventtypeclass = $(this).val();
            $('.' + eventtypeclass).toggle(this.checked);

            //activate the parent of the parent if this is visible
            if ($('.' + eventtypeclass).is(':visible')) {
                $('.' + eventtypeclass).parent().parent().show();
            }

            //hide empty dates
            hideEmptyDates();
        });

        /**
         *
         */
        function hideEmptyDates() {
            //get all the eventgroups under a date
            $('.eventsPerMonth > ul').each(function() {
                //check if there is at least 1 element that is not hidden
                if (!($(this).find('.list-group-item').is(':visible'))) {
                    $(this).prev().hide();
                    $(this).prev().parent().hide();
                } else {
                    $(this).prev().show();
                }
            });
        }

        //@todo no idea why this is needed here
        $(".calendar").addClass('navactive');

        //create the tipso space
        Tipped.create(
            '.tipso',
            {maxWidth: 250}
        );


        $(function(){

            const typesselectElement = $('#typesselect');
            const groupsselectElement = $('#groupsselect');
            const labelsselectElement = $('#labelsselect');

            /**
             * remember the last type that has been (un)selected
             */
            typesselectElement.on("select2:selecting", function (e) {
                $('#newTypeValue').val(e.params.args.data.id);
            });

            typesselectElement.on("select2:unselecting", function (e) {
                $('#deleteTypeValue').val(e.params.args.data.id);
            });

            /**
             * remember the last group that has been (un)selected
             */
            groupsselectElement.on("select2:selecting", function (e) {
                $('#newGroupValue').val(e.params.args.data.id);
            });

            groupsselectElement.on("select2:unselecting", function (e) {
                $('#deleteGroupValue').val(e.params.args.data.id);
            });

            /**
             * remember the last label that has been (un)selected
             */
            labelsselectElement.on("select2:selecting", function (e) {
                $('#newLabelValue').val(e.params.args.data.id);
            });

            labelsselectElement.on("select2:unselecting", function (e) {
                $('#deleteLabelValue').val(e.params.args.data.id);
            });

            /**
             * what to do when the types select is changed
             */
            typesselectElement.on('change', function () {

                //get the list of parameters
                let params = urlParameter();
                if (params === null) {
                    params = {};
                }

                //check for the types in the parameters
                //if it does not exist, create it
                if (params.types === null
                    || params.types === undefined
                ) {
                    //params.types does not exist yet
                    params.types = ['0'];
                } else {
                    params.types = JSON.parse(params.types);
                }

                //check for the year in the parameters
                //if it does not exist, create it
                //this is a special case, you can only choose one year
                if (params.year === null
                    || params.year === undefined
                ) {
                    params.year = new Date().getFullYear();
                }
                let paramsYear = 'year=' + params.year;

                //remove unselected types
                if ($('#deleteTypeValue').val() !== '0'
                    && $('#deleteTypeValue').val() !== null
                    && $('#deleteTypeValue').val() !== undefined
                    && $('#deleteTypeValue').val() !== ''
                ) {
                    let index = params.types.indexOf($('#deleteTypeValue').val());
                    if (index > -1) {
                        params.types.splice(index, 1);
                    }
                }

                //add the new selected type
                if ($('#newTypeValue').val() === '0' ) {
                    //if the last chosen type was the 'all'
                    //remove all the other types
                    params.types = ['0'];
                } else if ($('#newTypeValue').val() !== null
                        && $('#newTypeValue').val() !== undefined
                        && $('#newTypeValue').val() !== ''
                    ) {
                        //add the new type
                        params.types.push($('#newTypeValue').val());
                }

                //remove empty elements from array
                //and make the params for the types
                params.types = params.types.filter(item => item);
                let paramsTypes = 'types=' + JSON.stringify(params.types);

                //make the params for the groups also
                if (params.groups === null
                    || params.groups === undefined
                ) {
                    params.groups = JSON.stringify(["0"]);
                }
                let paramsGroups = 'groups=' + params.groups;

                //make the params for the labels also
                if (params.labels === null
                    || params.labels === undefined
                ) {
                    params.labels = JSON.stringify(["0"]);
                }
                let paramsLabels = 'labels=' + params.labels;

                //redirect to the new url
                let finalLocation = window.location.href.split('?')[0] + '?' +
                    paramsTypes + '&' +
                    paramsGroups + '&' +
                    paramsLabels + '&' +
                    paramsYear;
                console.log('final location' + finalLocation);
                window.location = finalLocation;
            });

            /**
             * what to do when the groups select is changed
             */
            groupsselectElement.on('change', function () {

                //
                let params = urlParameter();
                if (params === null) {
                    params = {};
                }

                //check for the groups in the parameters
                //if it does not exist, create it
                if (params.groups === null
                    || params.groups === undefined
                ) {
                    //params.groups does not exist yet
                    params.groups = ['0'];
                } else {
                    params.groups = JSON.parse(params.groups);
                }

                //check for the year in the parameters
                //if it does not exist, create it

                if (params.year === null
                    || params.year === undefined
                ) {
                    params.year = new Date().getFullYear();
                }
                let paramsYear = 'year=' + params.year;

                //remove unselected groups
                console.log('deleteGroupValue' + $('#deleteGroupValue').val());
                if ($('#deleteGroupValue').val() !== '0'
                    && $('#deleteGroupValue').val() !== null
                    && $('#deleteGroupValue').val() !== undefined
                    && $('#deleteGroupValue').val() !== ''
                ) {
                    let index = params.groups.indexOf($('#deleteGroupValue').val());
                    console.log('index' + index);
                    if (index > -1) {
                        params.groups.splice(index, 1);
                    }
                }

                //add the new selected group
                if ($('#newGroupValue').val() === '0' ) {
                    //if the last chosen group was the 'all'
                    //remove all the other groups
                    params.groups = ['0'];
                } else if ($('#newGroupValue').val() !== null
                    && $('#newGroupValue').val() !== undefined
                    && $('#newGroupValue').val() !== ''
                ) {
                    //add the new group
                    params.groups.push($('#newGroupValue').val());
                }

                //remove empty elements from array
                //and make the params for the groups
                params.groups = params.groups.filter(item => item);
                let paramsGroups = 'groups=' + JSON.stringify(params.groups);

                //make the params for the types also
                if (params.types === null
                    || params.types === undefined
                ) {
                    params.types = JSON.stringify(["0"]);
                }
                let paramsTypes = 'types=' + params.types;

                //make the params for the labels also
                if (params.labels === null
                    || params.labels === undefined
                ) {
                    params.labels = JSON.stringify(["0"]);
                }
                let paramsLabels = 'labels=' + params.labels;

                //
                let finalLocation = window.location.href.split('?')[0] + '?' +
                    paramsTypes + '&' +
                    paramsGroups + '&' +
                    paramsLabels + '&' +
                    paramsYear;
                console.log(finalLocation);
                window.location = finalLocation;
            });

            /**
             * what to do when the labels select is changed
             */
            labelsselectElement.on('change', function () {

                // get the list of parameters
                let params = urlParameter();
                if (params === null) {
                    params = {};
                }

                //check for the labels in the parameters
                //if it does not exist, create it
                if (params.labels === null
                    || params.labels === undefined
                ) {
                    //params.labels does not exist yet
                    params.labels = ['0'];
                } else {
                    params.labels = JSON.parse(params.labels);
                }

                //check for the year in the parameters
                //if it does not exist, create it
                //this is a special case, you can only choose one year
                if (params.year === null
                    || params.year === undefined
                ) {
                    params.year = new Date().getFullYear();
                }
                let paramsYear = 'year=' + params.year;

                //remove unselected labels
                if ($('#deleteLabelValue').val() !== '0'
                    && $('#deleteLabelValue').val() !== null
                    && $('#deleteLabelValue').val() !== undefined
                    && $('#deleteLabelValue').val() !== ''
                ) {
                    let index = params.labels.indexOf($('#deleteLabelValue').val());
                    if (index > -1) {
                        params.labels.splice(index, 1);
                    }
                }

                //add the new selected label
                if ($('#newLabelValue').val() === '0' ) {
                    //if the last chosen labels was the 'all'
                    //remove all the other labels
                    params.labels = '0';
                } else if ($('#newLabelValue').val() !== null
                    && $('#newLabelValue').val() !== undefined
                    && $('#newLabelValue').val() !== ''
                ) {
                    //add the new label
                    params.labels.push($('#newLabelValue').val());
                }

                //remove empty elements from array
                //and make the params for the labels
                params.labels = params.labels.filter(item => item);
                let paramsLabels = 'labels=' + JSON.stringify(params.labels);

                //make the params for the types also
                if (params.types === null
                    || params.types === undefined
                ) {
                    params.types = JSON.stringify(["0"]);
                }
                let paramsTypes = 'types=' + params.types;

                //make the params for the groups also
                if (params.groups === null
                    || params.groups === undefined
                ) {
                    params.groups = JSON.stringify(["0"]);
                }
                let paramsGroups = 'groups=' + params.groups;

                let finalLocation = window.location.href.split('?')[0] + '?' +
                    paramsTypes + '&' +
                    paramsGroups + '&' +
                    paramsLabels + '&' +
                    paramsYear;
                console.log(finalLocation);
                window.location = finalLocation;
            });

            /**
             * what to do when the year select is changed
             */
            $(".yearselect").on('change', function () {

                //get the list of parameters
                let params = urlParameter();
                if (params === null) {
                    params = {};
                }

                //make the params for the year
                if (params.year === null
                    || params.year === undefined
                ) {
                    params.year = $(this).val();
                } else {
                    //it's either a year or a date range
                    delete params.start;
                    delete params.end;
                    params.year = $(this).val();
                }
                let paramsYear = 'year=' + params.year;

                //make the params for the labels also
                if (params.labels === null
                    || params.labels === undefined
                ) {
                    params.labels = JSON.stringify(["0"]);
                }
                let paramsLabels = 'labels=' + params.labels;

                //make the params for the types also
                if (params.types === null
                    || params.types === undefined
                ) {
                    params.types = JSON.stringify(["0"]);
                }
                let paramsTypes = 'types=' + params.types;

                //make the params for the groups also
                if (params.groups === null
                    || params.groups === undefined
                ) {
                    params.groups = JSON.stringify(["0"]);
                }
                let paramsGroups = 'groups=' + params.groups;

                //redirect to the new url
                let finalLocation = window.location.href.split('?')[0] + '?' +
                    paramsTypes + '&' +
                    paramsGroups + '&' +
                    paramsLabels + '&' +
                    paramsYear;
                console.log(finalLocation);
                window.location = finalLocation;
            });

            /**
             * what to do when the date range is clicked
             */
            $(".date-range").click(function () {

                //get the list of parameters
                let params = urlParameter();
                if (params === null) {
                    params = {};
                }

                //as we are setting start and end, we can remove the year
                if (params.year !== null
                    && params.year !== undefined
                ) {
                    delete params.year;
                }

                params.start = $(this).data("start");
                let paramsStart = 'start=' + params.start;

                params.end = $(this).data("end");
                let paramsEnd = 'end=' + params.end;

                //make the params for the labels also
                if (params.labels === null
                    || params.labels === undefined
                ) {
                    params.labels = JSON.stringify(["0"]);
                }
                let paramsLabels = 'labels=' + params.labels;

                //make the params for the types also
                if (params.types === null
                    || params.types === undefined
                ) {
                    params.types = JSON.stringify(["0"]);
                }
                let paramsTypes = 'types=' + params.types;

                //make the params for the groups also
                if (params.groups === null
                    || params.groups === undefined
                ) {
                    params.groups = JSON.stringify(["0"]);
                }
                let paramsGroups = 'groups=' + params.groups;

                //redirect to the new url
                let finalLocation = window.location.href.split('?')[0] + '?' +
                    paramsTypes + '&' +
                    paramsGroups + '&' +
                    paramsLabels + '&' +
                    paramsStart + '&' +
                    paramsEnd;
                console.log(finalLocation);
                window.location = finalLocation;









            })
        });

        /**
         * get the url parameters
         * will be used to make a new url
         *
         * @return object|null
         */
        function urlParameter() {
            var url = decodeURI(window.location.href), retObject = {}, parameters;
            if (url.indexOf('?') === -1) {
                return null;
            }

            url = url.split('?')[1];
            parameters = url.split('&');
            for (var i = 0; i < parameters.length; i++) {
                retObject[parameters[i].split('=')[0]] = parameters[i].split('=')[1];
            }
            return retObject;
        }
    </script>

{% endblock %}