{{ header }}
<div id="product-search" class="container">
    {{ oct_breadcrumbs }}
    <div class="row">
        <div class="col-12 rm-page-title">
            <h1>{{ heading_title }}</h1>
        </div>
    </div>
    <div class="content-top-box">{{ content_top }}</div>
    <div class="row no-gutters">
        {{ column_left }}
        {% if column_left and column_right %}
            {% set class = 'col-lg-6 is-cols' %}
        {% elseif column_left or column_right %}
            {% set class = 'col-lg-9' %}
        {% else %}
            {% set class = 'col-lg-12 no-col' %}
        {% endif %}
        <div id="content" class="{{ class }}">
            <div class="rm-content rm-category h-100">
                <div class="rm-search-block">
                    <div class="form-group">
                        <label class="rm-control-label" for="input-search">{{ entry_search }}</label>
                        <div class="rm-search-block-form d-flex flex-column flex-md-row">
                            <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control">
                            <select name="category_id" class="rm-select">
                                <option value="0">{{ text_category }}</option>
                                {% for category_1 in categories %}
                                    {% if category_1.category_id == category_id %}
                                        <option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
                                    {% else %}
                                        <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
                                    {% endif %}
                                    {% for category_2 in category_1.children %}
                                        {% if category_2.category_id == category_id %}
                                            <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                                        {% else %}
                                            <option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                                        {% endif %}
                                        {% for category_3 in category_2.children %}
                                            {% if category_3.category_id == category_id %}
                                                <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                                            {% else %}
                                                <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-checkbox-group">
                        <div class="checkbox">
                            <label>
                                {% if sub_category %}
                                    <input type="checkbox" id="sub-category" class="rm-form-checkbox-input" name="sub_category" value="1" checked="checked"/>
                                {% else %}
                                    <input type="checkbox" id="sub-category" class="rm-form-checkbox-input" name="sub_category" value="1"/>
                                {% endif %}
                                <span class="check-box"></span>
                                {{ text_sub_category }}
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                {% if description %}
                                    <input type="checkbox" id="description" class="rm-form-checkbox-input" name="description" value="1" checked="checked"/>
                                {% else %}
                                    <input type="checkbox" id="description" class="rm-form-checkbox-input" name="description" value="1"/>
                                {% endif %}
                                <span class="check-box"></span>
                                {{ entry_description }}
                            </label>
                        </div>
                    </div>
                    <input type="button" value="{{ button_search }}" id="button-search" class="rm-btn dark">
                </div>
                {% if products %}
                <div class="rm-content-title rm-search-content-title">{{ text_search }}</div>

                    {% if oct_remarket_data.category_view_sort_oder is defined and(oct_remarket_data.category_view_sort_oder or oct_remarket_data.category_view_sort_oder == 'on') %}
                        <div class="rm-category-sort d-flex flex-column flex-md-row justify-content-between">
                            <div class="rm-category-sort-limit d-flex align-items-center justify-content-between d-lg-block w-100 w-lg-auto">
                                <select id="input-sort" class="rm-category-sort-select w-100 w-md-auto" onchange="location = this.value;">
                                    {% for sorts in sorts %}
                                        {% if sorts.value == '%s-%s'|format(sort, order) %}
                                            <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                                        {% else %}
                                            <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <select id="input-limit" class="rm-category-limit-select d-none d-sm-inline-block" onchange="location = this.value;">
                                    {% for limits in limits %}
                                        {% if limits.value == limit %}
                                            <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
                                        {% else %}
                                            <option value="{{ limits.href }}">{{ limits.text }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="rm-category-appearance btn-group d-none d-lg-flex">
                                <button type="button" aria-label="List view" id="list-view" class="rm-category-appearance-btn" data-toggle="tooltip" data-placement="top" title="{{ button_list }}">
                                    <span></span>
                                </button>
                                <button type="button" aria-label="Grid view" id="grid-view" class="rm-category-appearance-btn" data-toggle="tooltip" data-placement="top" title="{{ button_grid }}">
                                    <span></span>
                                </button>
                            </div>
                        </div>
                    {% endif %}
                    <div class="row no-gutters rm-category-products">
                        {% for product in products %}
                            <div class="product-layout product-grid rm-module-col col-12 col-md-4 col-lg-4"{% if oct_remarket_data.category_show_type == 'width-100' %} data-width="width-100"{% endif %}{% if oct_remarket_data.category_show_type == 'width-50' %} data-width="width-50"{% endif %}{% if oct_remarket_data.category_show_more is defined and oct_remarket_data.category_show_more %} data-pid="{{ product.product_id }}"{% endif %}>
                                <div class="rm-module-item d-flex flex-md-column h-100{% if product.oct_grayscale %} rm-no-stock{% endif %}">
                                    <div class="rm-module-img d-flex flex-column d-md-block">
                                        {% if product.oct_stickers is not empty %}
                            			<div class="rm-module-stickers">
                            				{% for key, oct_sticker in product.oct_stickers %}
                            					{% if oct_sticker is not empty %}
                            					<div class="rm-module-stickers-sticker rm-module-stickers-sticker-{{ key }}">
                            						{{ oct_sticker }}
                            					</div>
                            					{% endif %}
                            				{% endfor %}
                            			</div>
                            			{% endif %}
                                        <div class="rm-module-buttons list-unstyled d-flex justify-content-center flex-md-column order-1">
                                            {% if oct_popup_view_status %}
                                			<button aria-label="Quick view" type="button" class="rm-module-buttons-item popup-view d-flex align-items-center justify-content-center" title="{{ oct_popup_view }}" onclick="octPopUpView('{{ product.product_id }}')">
                                                <span></span>
                                            </button>
                                			{% endif %}
                                            <button aria-label="Wishlist" type="button" onclick="wishlist.add('{{ product.product_id }}');" title="{{ button_wishlist }}" class="rm-module-buttons-item wishlist d-flex align-items-center justify-content-center">
                                                <span></span>
                                            </button>
                                            <button aria-label="Compare" type="button" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');" class="rm-module-buttons-item compare d-flex align-items-center justify-content-center">
                                                <span></span>
                                            </button>
                                        </div>
                                        <a class="order-0" href="{{ product.href }}">
                                            <img
                                                src="{{ product.thumb }}"
                                                {% if oct_lazyload is defined and oct_lazyload %}
                                                data-srcset="{{ product.thumb }} 100w"
                                                srcset="{{ oct_lazy_image }} 100w"
                                                sizes="100vw"
                                                class="img-fluid oct-lazy"
                                                {% else %}
                                                class="img-fluid"
                                                {% endif %}
                                                alt="{{ product.name }}"
                                                title="{{ product.name }}"
                                                width="{{ product.width }}"
                                                height="{{ product.height }}"/>
                                        </a>
                                        {% if product.rating is not same as(false) %}
                                            <div class="rm-module-rating d-flex align-items-center justify-content-center justify-content-md-start order-2">
                                                <div class="rm-module-rating-stars d-flex align-items-center">
                                                    {% for i in 1..5 %}
                                                        {% if product.rating < i %}
                                                            <span class="rm-module-rating-star"></span>
                                                        {% else %}
                                                            <span class="rm-module-rating-star rm-module-rating-star-is"></span>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                                <div class="rm-module-reviews">
                                                    <img src="catalog/view/theme/oct_remarket/img/sprite.svg#include--comments-icon" alt=""       width="12" height="11" />
                                                    <span>{{ product.reviews }}</span>
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if oct_remarket_data.category_view_quantity is defined and oct_remarket_data.category_view_quantity and product.can_buy is not empty %}
                            			<div class="rm-module-quantity d-flex align-items-center justify-content-center">
                            				<button type="button" aria-label="Minus" class="rm-module-quantity-btn d-flex align-items-center justify-content-center rm-minus"><span class="minus"></span></button>
                            				<input type="text" class="form-control" name="quantity" value="{{ product.minimum }}" />
                            				<button type="button" aria-label="Plus" class="rm-module-quantity-btn d-flex align-items-center justify-content-center rm-plus"><span class="plus"></span></button>
                            				<input type="hidden" name="product_id" value="{{ product.product_id }}" />
                            				<input class="min-qty" type="hidden" value="{{ product.minimum }}" name="min_quantity">
                            			</div>
                            			{% endif %}
                                    </div>
                                    <div class="rm-module-caption d-flex flex-column flex-grow-1">
                                        <div class="rm-module-title">
                                            <a href="{{ product.href }}">{{ product.name }}</a>
                                        </div>
                                        {% if not product.quantity %}
                                        <div class="rm-module-stock mt-auto">{{ oct_product_stock }}</div>
                                        {% else %}
                                        <div class="rm-module-stock rm-out-of-stock mt-auto">{{ product.stock }}</div>
                                        {% endif %}
                                        {% if product.oct_model is not empty %}
                                            <div class="rm-category-product-model"><span>{{ oct_view_model_cat }}</span>{{ product.oct_model }}</div>
                                        {% endif %}
                                        {% if product.oct_atributes is defined and product.oct_atributes %}
                            	        <div class="rm-module-attr">
                            			{% for attribute in product.oct_atributes %}
                            				<span class="rm-module-attr-item">
                            					<span>{{ attribute.name }}:</span> <span class="rm-module-attr-item-header">{{ attribute.text }}</span>
                            				</span>
                            			{% endfor %}
                            			</div>
                            			{% endif %}
                                        {% if (product.description is defined and product.description | length > 3) %}
                                            <div class="rm-module-description d-none d-md-block">{{ product.description }}</div>
                                        {% endif %}
                                        {% if product.price %}
                                            <div class="rm-module-price-box d-flex flex-column">
                                                {% if product.tax %}
                                                    <div class="price-tax">{{ text_tax }}
                                                        {{ product.tax }}
                                                    </div>
                                                {% endif %}
                                                {% if not product.special %}
                                                    <div class="rm-module-price-bottom d-flex align-items-md-end justify-content-between flex-column flex-md-row mt-md-auto flex-grow-1">
                                                        <span class="rm-module-price">{{ product.price }}</span>
                                                        {% if product.can_buy is not empty and product.can_buy %}
                                                        <button type="button" aria-label="To cart" class="rm-btn secondary rm-cart-btn d-flex align-items-center justify-content-center justify-content-md-start{% if oct_remarket_data.category_view_quantity is defined and oct_remarket_data.category_view_quantity and product.can_buy is not empty %} rm-cat-button-cart{% else %}" onclick="cart.add('{{ product.product_id }}');{% endif %}">
                                                            <span class="rm-cart-btn-icon"></span>
    		                                                <span class="rm-btn-text">{{ (product.stock and not product.can_buy) ? product.stock : button_cart }}</span>
    													</button>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <div class="rm-module-price-top d-flex align-items-center mt-md-auto">
                                                        <span class="rm-module-price-old">{{ product.price }}</span>
                                                        {% if product.oct_stickers is not empty %}
                                            				{% if oct_sticker_you_save and product.you_save %}
                                            					<div class="rm-module-sticker-discount">{{ product.you_save }}</div>
                                            				{% endif %}
                                            			{% endif %}
                                                    </div>
    												<div class="rm-module-price-bottom d-flex align-items-md-end justify-content-between flex-column flex-md-row flex-grow-1">
                                                        <span class="rm-module-price">{{ product.special }}</span>
                                                        {% if product.can_buy is not empty and product.can_buy %}
                                                        <button type="button" aria-label="To cart" class="rm-btn secondary rm-cart-btn d-flex align-items-center justify-content-center justify-content-md-start{% if oct_remarket_data.category_view_quantity is defined and oct_remarket_data.category_view_quantity and product.can_buy is not empty %} rm-cat-button-cart{% else %}" onclick="cart.add('{{ product.product_id }}');{% endif %}">
                                                            <span class="rm-cart-btn-icon"></span>
    		                                                <span class="rm-btn-text">{{ (product.stock and not product.can_buy) ? product.stock : button_cart }}</span>
    													</button>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            {% if oct_stock_notifier_status and not product.can_buy %}
                                                <button type="button" onclick="octStockNotifier('{{ product.product_id }}');" aria-label="Notice" class="rm-btn secondary">
                                                    <span class="rm-btn-text d-inline">{{ button_oct_stock_notifier }}</span>
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    {% if oct_remarket_data.category_show_more is defined and oct_remarket_data.category_show_more %}
                	<div class="d-flex justify-content-center oct-load-more">
                		<button class="rm-btn rm-btn-2x dark oct-load-more-button text-center d-none">
                            <span class="rm-btn-icon">
                                <img src="catalog/view/theme/oct_remarket/img/sprite.svg#include--show-more-icon" alt="" width="24" height="24">
                            </span>
                            <span class="rm-btn-text">{{ oct_show_more }}</span>
                        </button>
                	</div>
                    {% endif %}
                    {{ pagination }}
                    {% if oct_remarket_data.category_show_more is defined and oct_remarket_data.category_show_more %}
                        <script src="catalog/view/theme/oct_remarket/js/oct-show-more.js"></script>
                        <script>
                            window.addEventListener('DOMContentLoaded', () => {
                                let rmShowMoreButton = document.querySelector('.oct-load-more-button');
                                octCheckPagination();

                                rmShowMoreButton.addEventListener('click', () => {
                                    octLoadMore({% if oct_lazyload is defined and oct_lazyload %}1{% endif %});
                                });

                                {% if oct_infinite_scroll_status is defined and oct_infinite_scroll_status %}

                                let hasClicked = false;

                                const observerCallback = entries => {
                                    entries.forEach(entry => {
                                    if (entry.isIntersecting && !hasClicked) {
                                        hasClicked = true;
                                        rmShowMoreButton.click();
                                    } else if (!entry.isIntersecting) {
                                        hasClicked = false;
                                    }
                                    });
                                };

                                const observerOptions = {
                                    root: null,
                                    rootMargin: '0px',
                                    threshold: 0.5
                                };
                                
                                const observer = new IntersectionObserver(observerCallback, observerOptions);
                                observer.observe(rmShowMoreButton);

                                {% endif %}
                            });
                        </script>
                    {% endif %}
                </div>
                {% else %}
                <div class="p-4">
                    <p>{{ text_empty }}</p>
                </div>
                {% endif %}
            </div>
        </div>
        {{ column_right }}
    </div>
    {{ content_bottom }}
</div>
<script>
    $('#button-search').bind('click', function() {
        url = 'index.php?route=product/search';

        var search = $('#content input[name=\'search\']').prop('value');

        if (search) {
            url += '&search=' + encodeURIComponent(search);
        }

        var category_id = $('#content select[name=\'category_id\']').prop('value');

        if (category_id > 0) {
            url += '&category_id=' + encodeURIComponent(category_id);
        }

        var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');

        if (sub_category) {
            url += '&sub_category=true';
        }

        var filter_description = $('#content input[name=\'description\']:checked').prop('value');

        if (filter_description) {
            url += '&description=true';
        }

        location = url;
    });

    $('#content input[name=\'search\']').bind('keydown', function(e) {
        if (e.keyCode == 13) {
            $('#button-search').trigger('click');
        }
    });

    $('select[name=\'category_id\']').on('change', function() {
        if (this.value == '0') {
            $('input[name=\'sub_category\']').prop('disabled', true);
        } else {
            $('input[name=\'sub_category\']').prop('disabled', false);
        }
    });

    $('select[name=\'category_id\']').trigger('change');
</script>
{{ footer }}