==
<!-- Shops  ============================ -->
<style>
    .pagination-buttons{
        margin-top: 30px;
    }
</style>
<section class="shops">
    <div class="auto_container">
        <div class="shops_wrap">
            <div class="shops_tab">
                <h4 class="shops_tab-link tabBtn active" data-tab="#all">
                    {{'ВСЕ'|_}}
                </h4>
                <h4 class="shops_tab-link tabBtn" data-tab="#news">
                    {{'Новости'|_}}
                </h4>
                <h4 class="shops_tab-link tabBtn" data-tab="#discount">
                    {{'Скидки'|_}}
                </h4>
                <h4 class="shops_tab-link tabBtn" data-tab="#stocks">
                    {{'АКЦИИ'|_}}
                </h4>
            </div>

            <div class="shops_block tabItem active" id="all">
                {% for sale in sales_all %}
                    <a href="{{ url('/') }}/sale/{{sale.id}}" class="shops_item wow fadeInUp shops_item_data" data-wow-duration=".3s" data-wow-delay=".1s">
                        <div class="shops_item-photo">
                            <img src="{{sale.images.first.path}}" alt="shop-photo">
                        </div>

                        <h6 class="shops_item-label">
                            {% if sale.type == "news"%}
                                {{'НОВОСТИ'|_}}
                            {% elseif sale.type == "promo"%}
                                {{'АКЦИЯ'|_}}
                            {% elseif sale.type == "discount"%}
                                {{'СКИДКИ'|_}}
                            {% endif %}
                        </h6>

                        <div class="shops_item-info">
                            <h5 class="shops_item-name">
                                {{sale.shop.name}}
                            </h5>

                            <h5 class="shops_item-floor">
                                {{sale.shop.floor}}
                                <span>
                                    {{'ЭТАЖ'|_}}
                                </span>
                            </h5>
                        </div>

                        <div class="shops_item-content">
                            {% if sale.start_date and sale.end_date%}
                            <p>
                                <span>
                                    <img src="{{ 'assets/images/svg/clock.svg'|theme }}" alt="clock-icon">
                                </span>

                                {{sale.start_date|date('Y-m-d')}} - {{sale.end_date|date('Y-m-d')}}
                            </p>
                            {% endif %}
                            <h4 class="shops_item-content-txt">
                                {{sale.name}}
                            </h4>
                        </div>
                    </a>
                {% endfor %}

            </div>
            <div class="pag_group pagination-buttons shops_block_all_pagination" id="all_pagination">
                <div class="pag_btn prev prev-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="50" y="50" width="50" height="50" rx="10" transform="rotate(-180 50 50)" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3784)">
                            <path d="M22.0212 25.0001C22.0211 24.9041 22.04 24.809 22.0767 24.7203C22.1134 24.6316 22.1673 24.551 22.2352 24.4831L26.7292 19.9881C26.8666 19.8507 27.0529 19.7736 27.2472 19.7736C27.4415 19.7736 27.6278 19.8507 27.7652 19.9881C27.9026 20.1255 27.9798 20.3118 27.9798 20.5061C27.9798 20.7004 27.9026 20.8867 27.7652 21.0241L23.7882 25.0001L27.7652 28.9741C27.8334 29.0421 27.8874 29.1229 27.9244 29.2119C27.9613 29.3008 27.9804 29.3961 27.9805 29.4924C27.9806 29.5887 27.9617 29.6841 27.9249 29.7731C27.8882 29.8621 27.8342 29.943 27.7662 30.0111C27.6982 30.0793 27.6174 30.1334 27.5285 30.1703C27.4395 30.2072 27.3442 30.2263 27.2479 30.2264C27.1516 30.2265 27.0562 30.2076 26.9672 30.1708C26.8782 30.1341 26.7974 30.0801 26.7292 30.0121L22.2352 25.5171C22.1673 25.4493 22.1134 25.3687 22.0767 25.2799C22.04 25.1912 22.0211 25.0961 22.0212 25.0001Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3784">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(27.9785 19.774) rotate(90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>

                <input type="text" name="page" value="1" class="input_page" disabled>

                <div class="pag_btn next next-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="50" height="50" rx="10" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3788)">
                            <path d="M27.9808 24.9999C27.9808 25.0959 27.962 25.191 27.9253 25.2797C27.8885 25.3684 27.8347 25.449 27.7668 25.5169L23.2728 30.0119C23.1354 30.1493 22.949 30.2264 22.7548 30.2264C22.5605 30.2264 22.3741 30.1493 22.2368 30.0119C22.0994 29.8745 22.0222 29.6882 22.0222 29.4939C22.0222 29.2996 22.0994 29.1133 22.2368 28.9759L26.2138 24.9999L22.2368 21.0259C22.1686 20.9579 22.1145 20.8771 22.0776 20.7881C22.0406 20.6992 22.0216 20.6039 22.0215 20.5076C22.0214 20.4113 22.0403 20.3159 22.077 20.2269C22.1138 20.1379 22.1677 20.057 22.2358 19.9889C22.3038 19.9207 22.3846 19.8666 22.4735 19.8297C22.5624 19.7928 22.6578 19.7737 22.754 19.7736C22.8503 19.7735 22.9457 19.7924 23.0347 19.8292C23.1237 19.8659 23.2046 19.9199 23.2728 19.9879L27.7668 24.4829C27.8347 24.5507 27.8885 24.6313 27.9253 24.7201C27.962 24.8088 27.9808 24.9039 27.9808 24.9999Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3788">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(22.0215 30.226) rotate(-90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
                
            </div>




            <div class="shops_block tabItem" id="news">
                {% for sale in sales_news %}
                    <a href="{{ url('/') }}/sale/{{sale.id}}" class="shops_item">
                        <div class="shops_item-photo">
                            <img src="{{sale.images.first.path}}" alt="shop-photo">
                        </div>

                        <h6 class="shops_item-label">
                            {{'НОВОСТИ'|_}}
                        </h6>

                    {% if sale.shop%}
                            <div class="shops_item-info">
                                <h5 class="shops_item-name">
                                    {{ sale.shop.name}}
                                </h5>
    
                                <h5 class="shops_item-floor">
                                    {{ sale.shop.floor}}
                                    <span>
                                        {{'ЭТАЖ'|_}}
                                    </span>
                                </h5>
                            </div>
                        {% endif %}

                        <div class="shops_item-content">
                            {% if sale.start_date and sale.end_date%}
                                <p>
                                    <span>
                                        <img src="{{ 'assets/images/svg/clock.svg'|theme }}" alt="clock-icon">
                                    </span>
    
                                    {{sale.start_date}} - {{sale.end_date}}
                                </p>
                            {% endif %}
                            <h4 class="shops_item-content-txt">
                                {{sale.name}}
                            </h4>
                        </div>
                    </a>
                {% endfor %}

            </div>
            <div class="pag_group pagination-buttons shops_block_news_pagination" id="news_pagination">
                <div class="pag_btn prev prev-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="50" y="50" width="50" height="50" rx="10" transform="rotate(-180 50 50)" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3784)">
                            <path d="M22.0212 25.0001C22.0211 24.9041 22.04 24.809 22.0767 24.7203C22.1134 24.6316 22.1673 24.551 22.2352 24.4831L26.7292 19.9881C26.8666 19.8507 27.0529 19.7736 27.2472 19.7736C27.4415 19.7736 27.6278 19.8507 27.7652 19.9881C27.9026 20.1255 27.9798 20.3118 27.9798 20.5061C27.9798 20.7004 27.9026 20.8867 27.7652 21.0241L23.7882 25.0001L27.7652 28.9741C27.8334 29.0421 27.8874 29.1229 27.9244 29.2119C27.9613 29.3008 27.9804 29.3961 27.9805 29.4924C27.9806 29.5887 27.9617 29.6841 27.9249 29.7731C27.8882 29.8621 27.8342 29.943 27.7662 30.0111C27.6982 30.0793 27.6174 30.1334 27.5285 30.1703C27.4395 30.2072 27.3442 30.2263 27.2479 30.2264C27.1516 30.2265 27.0562 30.2076 26.9672 30.1708C26.8782 30.1341 26.7974 30.0801 26.7292 30.0121L22.2352 25.5171C22.1673 25.4493 22.1134 25.3687 22.0767 25.2799C22.04 25.1912 22.0211 25.0961 22.0212 25.0001Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3784">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(27.9785 19.774) rotate(90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>

                <input type="text" name="page" value="1" class="input_page" disabled>

                <div class="pag_btn next next-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="50" height="50" rx="10" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3788)">
                            <path d="M27.9808 24.9999C27.9808 25.0959 27.962 25.191 27.9253 25.2797C27.8885 25.3684 27.8347 25.449 27.7668 25.5169L23.2728 30.0119C23.1354 30.1493 22.949 30.2264 22.7548 30.2264C22.5605 30.2264 22.3741 30.1493 22.2368 30.0119C22.0994 29.8745 22.0222 29.6882 22.0222 29.4939C22.0222 29.2996 22.0994 29.1133 22.2368 28.9759L26.2138 24.9999L22.2368 21.0259C22.1686 20.9579 22.1145 20.8771 22.0776 20.7881C22.0406 20.6992 22.0216 20.6039 22.0215 20.5076C22.0214 20.4113 22.0403 20.3159 22.077 20.2269C22.1138 20.1379 22.1677 20.057 22.2358 19.9889C22.3038 19.9207 22.3846 19.8666 22.4735 19.8297C22.5624 19.7928 22.6578 19.7737 22.754 19.7736C22.8503 19.7735 22.9457 19.7924 23.0347 19.8292C23.1237 19.8659 23.2046 19.9199 23.2728 19.9879L27.7668 24.4829C27.8347 24.5507 27.8885 24.6313 27.9253 24.7201C27.962 24.8088 27.9808 24.9039 27.9808 24.9999Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3788">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(22.0215 30.226) rotate(-90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
                
            </div>

            <div class="shops_block tabItem" id="discount">
                {% for sale in sales_discount %}
                    <a href="{{ url('/') }}/sale/{{sale.id}}" class="shops_item">
                        <div class="shops_item-photo">
                            <img src="{{sale.images.first.path}}" alt="shop-photo">
                        </div>

                        <h6 class="shops_item-label">
                            {{'СКИДКИ'|_}}
                        </h6>

                        {% if sale.shop%}
                            <div class="shops_item-info">
                                <h5 class="shops_item-name">
                                    {{ sale.shop.name}}
                                </h5>
    
                                <h5 class="shops_item-floor">
                                    {{ sale.shop.floor}}
                                    <span>
                                        {{'ЭТАЖ'|_}}
                                    </span>
                                </h5>
                            </div>
                        {% endif %}

                        <div class="shops_item-content">
                            {% if sale.start_date and sale.end_date%}
                                <p>
                                    <span>
                                        <img src="{{ 'assets/images/svg/clock.svg'|theme }}" alt="clock-icon">
                                    </span>
    
                                    {{sale.start_date}} - {{sale.end_date}}
                                </p>
                            {% endif %}
                            <h4 class="shops_item-content-txt">
                                {{sale.name}}
                            </h4>
                        </div>
                    </a>
                {% endfor %}

            </div>
            <div class="pag_group pagination-buttons shops_block_discount_pagination" id="discount_pagination">
                <div class="pag_btn prev prev-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="50" y="50" width="50" height="50" rx="10" transform="rotate(-180 50 50)" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3784)">
                            <path d="M22.0212 25.0001C22.0211 24.9041 22.04 24.809 22.0767 24.7203C22.1134 24.6316 22.1673 24.551 22.2352 24.4831L26.7292 19.9881C26.8666 19.8507 27.0529 19.7736 27.2472 19.7736C27.4415 19.7736 27.6278 19.8507 27.7652 19.9881C27.9026 20.1255 27.9798 20.3118 27.9798 20.5061C27.9798 20.7004 27.9026 20.8867 27.7652 21.0241L23.7882 25.0001L27.7652 28.9741C27.8334 29.0421 27.8874 29.1229 27.9244 29.2119C27.9613 29.3008 27.9804 29.3961 27.9805 29.4924C27.9806 29.5887 27.9617 29.6841 27.9249 29.7731C27.8882 29.8621 27.8342 29.943 27.7662 30.0111C27.6982 30.0793 27.6174 30.1334 27.5285 30.1703C27.4395 30.2072 27.3442 30.2263 27.2479 30.2264C27.1516 30.2265 27.0562 30.2076 26.9672 30.1708C26.8782 30.1341 26.7974 30.0801 26.7292 30.0121L22.2352 25.5171C22.1673 25.4493 22.1134 25.3687 22.0767 25.2799C22.04 25.1912 22.0211 25.0961 22.0212 25.0001Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3784">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(27.9785 19.774) rotate(90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>

                <input type="text" name="page" value="1" class="input_page" disabled>

                <div class="pag_btn next next-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="50" height="50" rx="10" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3788)">
                            <path d="M27.9808 24.9999C27.9808 25.0959 27.962 25.191 27.9253 25.2797C27.8885 25.3684 27.8347 25.449 27.7668 25.5169L23.2728 30.0119C23.1354 30.1493 22.949 30.2264 22.7548 30.2264C22.5605 30.2264 22.3741 30.1493 22.2368 30.0119C22.0994 29.8745 22.0222 29.6882 22.0222 29.4939C22.0222 29.2996 22.0994 29.1133 22.2368 28.9759L26.2138 24.9999L22.2368 21.0259C22.1686 20.9579 22.1145 20.8771 22.0776 20.7881C22.0406 20.6992 22.0216 20.6039 22.0215 20.5076C22.0214 20.4113 22.0403 20.3159 22.077 20.2269C22.1138 20.1379 22.1677 20.057 22.2358 19.9889C22.3038 19.9207 22.3846 19.8666 22.4735 19.8297C22.5624 19.7928 22.6578 19.7737 22.754 19.7736C22.8503 19.7735 22.9457 19.7924 23.0347 19.8292C23.1237 19.8659 23.2046 19.9199 23.2728 19.9879L27.7668 24.4829C27.8347 24.5507 27.8885 24.6313 27.9253 24.7201C27.962 24.8088 27.9808 24.9039 27.9808 24.9999Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3788">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(22.0215 30.226) rotate(-90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
                
            </div>

            <div class="shops_block tabItem" id="stocks">
                {% for sale in sales_promo %}
                    <a href="{{ url('/') }}/sale/{{sale.id}}" class="shops_item">
                        <div class="shops_item-photo">
                            <img src="{{sale.images.first.path}}" alt="shop-photo">
                        </div>

                        <h6 class="shops_item-label">
                            {{'АКЦИЯ'|_}}
                        </h6>

                        {% if sale.shop%}
                            <div class="shops_item-info">
                                <h5 class="shops_item-name">
                                    {{ sale.shop.name}}
                                </h5>
    
                                <h5 class="shops_item-floor">
                                    {{ sale.shop.floor}}
                                    <span>
                                        {{'ЭТАЖ'|_}}
                                    </span>
                                </h5>
                            </div>
                        {% endif %}

                        <div class="shops_item-content">
                            {% if sale.start_date and sale.end_date%}
                            <p>
                                <span>
                                    <img src="{{ 'assets/images/svg/clock.svg'|theme }}" alt="clock-icon">
                                </span>

                                {{sale.start_date}} - {{sale.end_date}}
                            </p>
                            {% endif %}
                            <h4 class="shops_item-content-txt">
                                {{sale.name}}
                            </h4>
                        </div>
                    </a>
                {% endfor %}

            </div>
            <div class="pag_group pagination-buttons shops_block_stocks_pagination" id="stocks_pagination">
                <div class="pag_btn prev prev-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="50" y="50" width="50" height="50" rx="10" transform="rotate(-180 50 50)" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3784)">
                            <path d="M22.0212 25.0001C22.0211 24.9041 22.04 24.809 22.0767 24.7203C22.1134 24.6316 22.1673 24.551 22.2352 24.4831L26.7292 19.9881C26.8666 19.8507 27.0529 19.7736 27.2472 19.7736C27.4415 19.7736 27.6278 19.8507 27.7652 19.9881C27.9026 20.1255 27.9798 20.3118 27.9798 20.5061C27.9798 20.7004 27.9026 20.8867 27.7652 21.0241L23.7882 25.0001L27.7652 28.9741C27.8334 29.0421 27.8874 29.1229 27.9244 29.2119C27.9613 29.3008 27.9804 29.3961 27.9805 29.4924C27.9806 29.5887 27.9617 29.6841 27.9249 29.7731C27.8882 29.8621 27.8342 29.943 27.7662 30.0111C27.6982 30.0793 27.6174 30.1334 27.5285 30.1703C27.4395 30.2072 27.3442 30.2263 27.2479 30.2264C27.1516 30.2265 27.0562 30.2076 26.9672 30.1708C26.8782 30.1341 26.7974 30.0801 26.7292 30.0121L22.2352 25.5171C22.1673 25.4493 22.1134 25.3687 22.0767 25.2799C22.04 25.1912 22.0211 25.0961 22.0212 25.0001Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3784">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(27.9785 19.774) rotate(90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>

                <input type="text" name="page" value="1" class="input_page" disabled>

                <div class="pag_btn next next-button">
                    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="50" height="50" rx="10" fill="#FFB100"></rect>
                        <g clip-path="url(#clip0_551_3788)">
                            <path d="M27.9808 24.9999C27.9808 25.0959 27.962 25.191 27.9253 25.2797C27.8885 25.3684 27.8347 25.449 27.7668 25.5169L23.2728 30.0119C23.1354 30.1493 22.949 30.2264 22.7548 30.2264C22.5605 30.2264 22.3741 30.1493 22.2368 30.0119C22.0994 29.8745 22.0222 29.6882 22.0222 29.4939C22.0222 29.2996 22.0994 29.1133 22.2368 28.9759L26.2138 24.9999L22.2368 21.0259C22.1686 20.9579 22.1145 20.8771 22.0776 20.7881C22.0406 20.6992 22.0216 20.6039 22.0215 20.5076C22.0214 20.4113 22.0403 20.3159 22.077 20.2269C22.1138 20.1379 22.1677 20.057 22.2358 19.9889C22.3038 19.9207 22.3846 19.8666 22.4735 19.8297C22.5624 19.7928 22.6578 19.7737 22.754 19.7736C22.8503 19.7735 22.9457 19.7924 23.0347 19.8292C23.1237 19.8659 23.2046 19.9199 23.2728 19.9879L27.7668 24.4829C27.8347 24.5507 27.8885 24.6313 27.9253 24.7201C27.962 24.8088 27.9808 24.9039 27.9808 24.9999Z" fill="#292929"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_551_3788">
                                <rect width="10.452" height="5.958" fill="white" transform="translate(22.0215 30.226) rotate(-90)"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
                
            </div>
        </div>
    </div>
</section>
<!-- Shops end ========================= -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var itemsPerPage = 9;
        var currentPage = 0;
        var items = document.querySelectorAll(".shops_item_data");
        var totalPages = Math.ceil(items.length / itemsPerPage);
        var nextButton = document.querySelector(".next-button");
        var prevButton = document.querySelector(".prev-button");
        var pageInput = document.querySelector(".input_page");
        var paginationBlock = document.querySelector("#all_pagination");

        // Initially hide all items except the first page
        for (var i = itemsPerPage; i < items.length; i++) {
            items[i].style.display = "none";
        }

        updatePagination();

        prevButton.addEventListener("click", function () {
            if (currentPage > 0) {
                currentPage--;
                updatePagination();
            }
        });

        nextButton.addEventListener("click", function () {
            if (currentPage < totalPages - 1) {
                currentPage++;
                updatePagination();
            }
        });

        function updatePagination() {
            var startIndex = currentPage * itemsPerPage;
            var endIndex = startIndex + itemsPerPage;

            for (var i = 0; i < items.length; i++) {
                if (i >= startIndex && i < endIndex) {
                    items[i].style.display = "block";
                } else {
                    items[i].style.display = "none";
                }
            }

            if(pageInput.value != null)
            {
                pageInput.value = currentPage + 1; // Update input field value
            }

            // if (currentPage === totalPages - 1) {
            //     nextButton.style.display = "none";
            // } else {
            //     nextButton.style.display = "block";
            // }

            // if (currentPage === 0) {
            //     prevButton.style.display = "none";
            // } else {
            //     prevButton.style.display = "block";
            // }

            // if (items.length > 0) {
            //     paginationBlock.style.display = "inline-flex";;
            // } else {
            //     paginationBlock.style.display = "none";
            // }
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var itemsPerPage = 9;
        var currentPage = 0;
        var items = document.querySelectorAll("#news .shops_item");
        var totalPages = Math.ceil(items.length / itemsPerPage);
        var nextButton = document.querySelector("#news .next-button");
        var prevButton = document.querySelector("#news .prev-button");
        var pageInput = document.querySelector("#news_pagination .input_page");
        var paginationBlock = document.querySelector("#news_pagination");

        // Initially hide all items except the first page
        for (var i = itemsPerPage; i < items.length; i++) {
            items[i].style.display = "none";
        }

        updatePagination();

        if(prevButton != null){
            prevButton.addEventListener("click", function () {
                if (currentPage > 0) {
                    currentPage--;
                    updatePagination();
                }
            });
        }

        if(nextButton != null){
            nextButton.addEventListener("click", function () {
                if (currentPage < totalPages - 1) {
                    currentPage++;
                    updatePagination();
                }
            });
        }



        function updatePagination() {
            var startIndex = currentPage * itemsPerPage;
            var endIndex = startIndex + itemsPerPage;

            for (var i = 0; i < items.length; i++) {
                if (i >= startIndex && i < endIndex) {
                    items[i].style.display = "block";
                } else {
                    items[i].style.display = "none";
                }
            }

            console.log(items.length);

            if(pageInput.value != null)
            {
                pageInput.value = currentPage + 1; // Update input field value
            }

            // if (items.length > 0) {
            //     paginationBlock.style.display = "inline-flex";;
            // } else {
            //     paginationBlock.style.display = "none";
            // }
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var itemsPerPage = 9;
        var currentPage = 0;
        var items = document.querySelectorAll("#discount .shops_item");
        var totalPages = Math.ceil(items.length / itemsPerPage);
        var nextButton = document.querySelector("#discount .next-button");
        var prevButton = document.querySelector("#discount .prev-button");
        var pageInput = document.querySelector("#discount_pagination .input_page");
        var paginationBlock = document.querySelector("#discount_pagination");

        // Initially hide all items except the first page
        for (var i = itemsPerPage; i < items.length; i++) {
            items[i].style.display = "none";
        }

        updatePagination();

        if(prevButton != null){
            prevButton.addEventListener("click", function () {
                if (currentPage > 0) {
                    currentPage--;
                    updatePagination();
                }
            });
        }

        if(nextButton != null){
            nextButton.addEventListener("click", function () {
                if (currentPage < totalPages - 1) {
                    currentPage++;
                    updatePagination();
                }
            });
        }

        function updatePagination() {
            var startIndex = currentPage * itemsPerPage;
            var endIndex = startIndex + itemsPerPage;

            for (var i = 0; i < items.length; i++) {
                if (i >= startIndex && i < endIndex) {
                    items[i].style.display = "block";
                } else {
                    items[i].style.display = "none";
                }
            }

            if(pageInput.value != null)
            {
                pageInput.value = currentPage + 1; // Update input field value
            }

            // console.log(items.length);
            // if (items.length > 0) {
            //     paginationBlock.style.display = "inline-flex";;
            // } else {
            //     paginationBlock.style.display = "none";
            // }
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var itemsPerPage = 9;
        var currentPage = 0;
        var items = document.querySelectorAll("#stocks .shops_item");
        var totalPages = Math.ceil(items.length / itemsPerPage);
        var nextButton = document.querySelector("#stocks .next-button");
        var prevButton = document.querySelector("#stocks .prev-button");
        var pageInput = document.querySelector("#stocks_pagination .input_page");
        var paginationBlock = document.querySelector("#stocks_pagination");

        // Initially hide all items except the first page
        for (var i = itemsPerPage; i < items.length; i++) {
            items[i].style.display = "none";
        }

        updatePagination();

        if(prevButton != null){
            prevButton.addEventListener("click", function () {
                if (currentPage > 0) {
                    currentPage--;
                    updatePagination();
                }
            });
        }

        if(nextButton != null){
            nextButton.addEventListener("click", function () {
                if (currentPage < totalPages - 1) {
                    currentPage++;
                    updatePagination();
                }
            });
        }

        function updatePagination() {
            var startIndex = currentPage * itemsPerPage;
            var endIndex = startIndex + itemsPerPage;

            for (var i = 0; i < items.length; i++) {
                if (i >= startIndex && i < endIndex) {
                    items[i].style.display = "block";
                } else {
                    items[i].style.display = "none";
                }
            }

            if(pageInput.value != null)
            {
                pageInput.value = currentPage + 1; // Update input field value
            }

            // if (items.length > 0) {
            //     paginationBlock.style.display = "inline-flex";;
            // } else {
            //     paginationBlock.style.display = "none";
            // }
        }
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Initially hide all pagination buttons except the one for the active tab
        var allPagination = document.querySelector('.shops_block_all_pagination');
        var newsPagination = document.querySelector('.shops_block_news_pagination');
        var discountPagination = document.querySelector('.shops_block_discount_pagination');
        var stocksPagination = document.querySelector('.shops_block_stocks_pagination');

        allPagination.style.display = "inline-flex";
        newsPagination.style.display = "none";
        discountPagination.style.display = "none";
        stocksPagination.style.display = "none";

        // Handle click events on tab links
        var tabLinks = document.querySelectorAll('.shops_tab-link');
        // console.log(tabLinks);
        tabLinks.forEach(function(tabLink) {
            tabLink.addEventListener('click', function() {
                // Remove 'active' class from all tab links
                tabLinks.forEach(function(link) {
                    link.classList.remove('active');
                });
                // Add 'active' class to the clicked tab link
                tabLink.classList.add('active');

                // Hide all pagination buttons
                allPagination.style.display = "none";
                newsPagination.style.display = "none";
                discountPagination.style.display = "none";
                stocksPagination.style.display = "none";

                // Get the data-tab attribute value of the clicked tab link
                var tabId = tabLink.getAttribute('data-tab');

                console.log(tabId + '_pagination');
                document.querySelector(tabId + '_pagination').style.display = "inline-flex";
            });
        });
    });

</script>