{% extends "layouts/layout.html.twig" %}

{% block content %}

    <h1>{{ page_title ? page_title : '' }}</h1>

    <div class="overview fill">
        <div class="col-md-2 filter-panel">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">Filter resultaten
                        <span class="float-right expand-filter fa fa-bars d-md-none" style="color: #777;"></span>
                    </h5>
                </div>
                <div class="panel-body fill">
                    <form class="form-horizontal fill">

                        {% if search_query %}
                            <input type="hidden" name="query" value="{{ search_query }}"/>
                        {% endif %}

                        <div class="form-group fill">
                            <div class=" col-12">

                                {% for brand in brands %}
                                    <div class="checkbox">
                                        <label class="checkbox-custom" id="brand-{{ brand.id }}">
                                            <input name="brands[]" type="checkbox"
                                                   value="{{ brand.id }}"{{ brand.id in selected_brands ? ' checked="checked"' : '' }}>
                                            <span class="checkbox-label">{{ brand.name }}</span>
                                        </label>
                                    </div>
                                {% endfor %}

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-12">
                                <div class="checkbox">
                                    <label class="checkbox-custom" id="0">
                                        <input name="show_unavailable_items" type="checkbox"
                                               value="true" {{ show_unavailable ? 'checked="checked"' : '' }}>
                                        <span class="checkbox-label">Toon ook niet voorraadige producten</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary pull-left">Filter</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="product-list col-md-10">
            <!-- Search in category -->
            <form class="form-horizontal fill">
                <!-- Save old selected brands input -->
                {% if selected_brands %}
                    {% for brand in selected_brands %}
                        <input type="hidden" name="brands[{{ loop.index0 }}]" value="{{ brand }}"/>
                    {% endfor %}
                {% endif %}
                <div class="form-group">
                    <div class="col-12 no-padding">
                        <h4 class="float-left">Zoeken binnen categorie</h4>

                        <!-- View toggle buttons -->
                        {#<button class="btn list-btn float-right ml-2 mb-2" type="button" title="list view"><i class="fa fa-list"></i></button>#}
                        {#<button class="btn blocks-btn float-right" type="button" title="blocks view"><i class="fa fa-th-large"></i></button>#}

                        <div class="search-category input-group" data-initialize="search" role="search">
                            <input id="query" name="query" class="form-control"
                                   placeholder="Naam, beschrijving, EAN of SKU"
                                   type="search" value="{{ search_query ? search_query : '' }}">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit">
                                    <span><i class="fa fa-search"></i></span>
                                    <span class="sr-only">{{ lang.site_header.search }}</span>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </form>

            <!-- View toggle blocks -->
            {#<div id="blocks-view">#}
                {#{% include 'blocks/products/products_block.html.twig' %}#}
            {#</div>#}
            {#<div id="list-view" class="hidden">#}
                {#{% include 'blocks/products/products_list.html.twig' %}#}
            {#</div>#}

            {% if product_overview == 'list' %}
                {% include 'blocks/products/products_list.html.twig' %}
            {% elseif product_overview == 'blocks' %}
                {% include 'blocks/products/products_block.html.twig' %}
            {% endif %}

            <div class="pagination-block col-12">
                <p>
                    {{ total_on_current_page ~ ' resultaten op deze pagina' }}
                    {{ 'van de ' ~ total ~ ' in totaal.' }}
                </p>

                <ul class="pagination">
                    <!-- SELECTED BRAND PARAMETER URL (ADD URL PARAMETERS BELOW -->
                    {#<?php#}
                    {#if ($selected_brands) {#}
                    {#$vars = "&" . http_build_query(['brands' => $selected_brands]);#}
                    {#} else {#}
                    {#$vars = '';#}
                    {#}#}

                    {#if (isset($query)) {#}
                    {#$vars = $vars."&" . http_build_query(['query' => $query]);#}
                    {#} else {#}
                    {#$vars = $vars.'&';#}
                    {#}#}
                    {#?>#}

                    <!-- PREVIOUS PAGE -->
                    {% if current_page is not defined or current_page < 2 %}
                        <li class="page-item disabled"><span class="page-link">Vorige</span></li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{{ query_string ? query_string ~ '&page=' ~ (current_page - 1) : '?page=' ~ (current_page - 1) }}"
                               rel="previous">Vorige</a></li>
                    {% endif %}


                    <!-- PAGES BEFORE CURRENT -->
                    {% if total_pages == 1 %}
                        <li class="page-item {{ current_page == 1 ? 'active' : '' }} disabled"><a class="page-link"
                                                                                                  href="{{ query_string ? query_string ~ '&page=1' : '?page=1' }}">1</a></li>
                    {% else %}
                        <li class="page-item {{ current_page == 1 ? 'active' : '' }}"><a class="page-link"
                                                                                         href="{{ query_string ? query_string ~ '&page=1' : '?page=1' }}">1</a></li>
                    {% endif %}

                    {% if current_page > 1 %}
                        {% if current_page > 3 %}
                            <li class="page-item disabled"><span class="page-link">...</span></li>
                        {% endif %}

                        {% for count in 3..1 if (current_page - count) > 1 %}
                            <li class="page-item">
                                <a class="page-link" href="{{ query_string ? query_string ~ '&page=' ~ (current_page - count) : '?page=' ~ (current_page - count) }}">{{ current_page - count }}</a>
                            </li>
                        {% endfor %}

                        <!-- ACTIVE PAGE -->
                        <li class="page-item active">
                            <a class="page-link" href="{{ query_string ? query_string ~ '&page=' ~ current_page : '?page=' ~ current_page }}">{{ current_page }}</a>
                        </li>

                    {% endif %}

                    {% if current_page < total_pages %}
                        {% for count in (current_page + 1)..(current_page + 3) if count < total_pages %}
                            <li class="page-item">
                                <a class="page-link" href="{{ query_string ? query_string ~ '&page=' ~ count : '?page=' ~ count }}">{{ count }}</a>
                            </li>
                        {% endfor %}
                    {% endif %}

                    {% if current_page < (total_pages - 2) %}
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                    {% endif %}

                    {% if total_pages > 1 and current_page < total_pages %}
                        <li class="page-item {{ current_page == total_pages ? 'active' : '' }}"><a class="page-link"
                                                                                                   href="{{ query_string ? query_string ~ '&page=' ~ total_pages : '?page=' ~ total_pages }}">{{ total_pages }}</a>
                        </li>
                    {% endif %}

                    {% if current_page < total_pages %}
                        <li class="page-item"><a class="page-link" href="{{ query_string ? query_string ~ '&page=' ~ (current_page + 1) : '?page=' ~ (current_page + 1) }}"
                                                 rel="next">Volgende</a></li>
                    {% else %}
                        <li class="page-item disabled"><span class="page-link">Volgende</span></li>
                    {% endif %}

                </ul>
            </div>
        </div>


    </div>

{% endblock %}

{% block post_js %}
    {{ parent() }}
    {% include 'blocks/ajax_shoppingcart.html.twig' %}

    <!-- View toggle script -->
    {#<script type="text/javascript">#}
        {#$('.list-btn').on('click', function() {#}
           {#$('#list-view').removeClass('hidden');#}
           {#$('#blocks-view ').addClass('hidden');#}
        {#});#}
        {#$('.blocks-btn').on('click', function() {#}
           {#$('#list-view').addClass('hidden');#}
           {#$('#blocks-view ').removeClass('hidden');#}
        {#});#}
    {#</script>#}
{% endblock %}