{% set products = __SELF__.userProducts %}
{% set categories = __SELF__.userCategories %}
{% set userProfile = __SELF__.userProfile %}
{% set params = __SELF__.params %}
{% set sliders = __SELF__.sliders %}
{% set chatroom = __SELF__.chatroom %}
{% set result = __SELF__.result %}
{% set authUser = __SELF__.authUser %}




{% for product in products %}
<!-- Quick View Modal Area -->
<div class="modal fade" id="quickview{{product.id}}" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal-body">
                <div class="quickview_body">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 col-lg-5">
                                <div class="quickview_pro_img">
                                    <img class="first_img" src="{{ product.images[0].path }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi, {{ product.name }}">
                                    {% if product.images_count > 1 %}
                                        <img class="hover_img" src="{{ product.images[1].path }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi, {{ product.name }}">
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 col-lg-7">
                                <div class="quickview_pro_des">
                                    <h4 class="title">{{ product.name }}</h4>
                                    <div class="top_seller_product_rating mb-15">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <h5 class="price">
                                        {% if product.vendor.web2 > 0 %}
                                            <del style="color: rgb(253, 0, 24);">{{ product.price }} TMT</del>
                                                <!-- {{ product.getDiscountedPrice(product.vendor.web2) }} TMT -->
                                                {{ product.vendor.web2 }}
                                            {% else %}
                                                {{ product.price }} TMT
                                        {% endif %}
                                    </h5> <span class="badge ml-2 {{ product.stock == 0 ? 'badge-secondary' : 'badge-success' }}">{{ product.stock == 0 ? 'productAdd.ZakazaGelyar'|_ : 'productAdd.ElimizdeBar'|_ }}</span>
                                    <p>{{ html_limit(product.description, 100) }}</p>
                                    <a href="{{ 'product'|page({id: product.id}) }}">{{ 'modal.GinisleyinMaglumat'|_ }}</a>
                                </div>
                                <!-- Add to Cart Form -->
                                <form class="cart" method="post">
                                    <div class="quantity">
                                        <input type="number" class="qty-text form-control" id="quantity{{ product.id }}" step="1" min="1" value="1">
                                    </div>
                                    {% if user %}
                                     <div class="product_add_to_cart addToCard" data-id="{{ product.id }}" data-price="{{ product.price }}" data-image="{{ product.images[0].path }}" data-name="{{ product.name }}"  data-vendor="{{ product.vendor.id }}">  
                                            <a href="#" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">{{ 'product.SebedeGos'|_ }}</a>
                                     </div>
                                    {% else %}
                                        <div class="product_add_to_cart" data-id="{{ product.id }}" data-price="{{ product.price }}" data-image="{{ product.images[0].path }}" data-name="{{ product.name }}"  data-vendor="{{ product.vendor.id }}">  
                                                <a href="{{ 'login'|page }}" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">{{ 'product.SebedeGos'|_ }}</a>
                                         </div>
                                    {% endif %}
                                    <!-- Wishlist -->
                                    <div class="modal_pro_wishlist">
                                        {% if user %}
                                            <a 
                                                data-request="onCreateFav" 
                                                data-request-flash
                                                data-request-validate
                                                data-request-data="product_id: {{ product.id }}" 
                                                href="#"><i class="icofont-heart"></i></a>
                                        {% else %}
                                            <a href="{{ 'login'|page }}"><i class="icofont-heart"></i></a>
                                        {% endif %}
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Quick View Modal Area -->
{% endfor %}




<!-- Breadcumb Area -->
<div class="breadcumb_area2">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
            <!--     <h5>Harytlar</h5> -->
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">{{ 'breadcrumbEsasySahypa'|_ }}</a></li>
                    <li class="breadcrumb-item active">{{ 'breadcrumbSatyjyHarytlar'|_ }}</li>
                    <li class="breadcrumb-item active">{{ userProfile.name }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Breadcumb Area -->

{% if userProfile.web1 == "variant1" %}
        
   {% partial "profile/style1" user=user userProfile=userProfile products=products categories=categories %}
   
{% elseif userProfile.web1 == "variant2" %} 

   {% partial "profile/style2" user=user userProfile=userProfile products=products categories=categories %}
   
{% else %}

    {% partial "profile/style1" user=user userProfile=userProfile products=products categories=categories %}

{% endif %}


{% if (user and chatroom) %}
<a id="chatBot" onclick="showChat()" class="chatBot" href="#" style="position: fixed; z-index: 2147483647;width: 70px;height: 70px;text-align: center;">
    <i class="icofont-chat" id="chatIcon" style="font-size: 36;"></i>
</a>
<section class="chat-wrapper-section display-none" id="chatSection" style="background-color: rgb(238, 238, 238); border-top: 5px solid #F37B1C;">
    <div class="chat_area2" id="chatroom">
        <div class="chat_area-inner">
            <button onclick="loadMoreMeassges()" id="more_btn" data-chatroom-id="{{ chatroom.id }}" data-skip="5">{{ 'chat.OnkiHatlar'|_ }}</button>

            {% for message in result %}
                <div class="{{ message.sender_id == authUser ? 'my_message2' : 'friend_message2' }}">
                    <div class="message_text">
                        {{ message.message }}
                    </div>
                </div>
            {% endfor %}

            <form action="#" class="message_form2"
                    data-request="onMessageInUserProfile" 
                    data-request-success="showLatestMessage(data)"
                    style="width: 100%;">
                <input type="hidden" name="reciver_id" value="{{ userProfile.id }}">
                <input type="hidden" name="chatroom_id" value="{{ chatroom.id }}">
                <div class="message_input2">
                    <input type="text" name="msg" id="order-notes" placeholder="{{ 'inputPlaceholder.Hatynyz'|_ }}" class="form-control" style="padding-right:45px">
                </div>
                <button class="message_btn2" type="submit" data-attach-loading="">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
                        <g id="paper-plane" transform="translate(0 0)">
                            <path id="Path_3270" data-name="Path 3270" d="M8.75,17.612V22.25a.75.75,0,0,0,1.354.444L12.817,19Z" fill="#f37b1c"></path>
                            <path id="Path_3271" data-name="Path 3271" d="M23.685.139A.75.75,0,0,0,22.9.085L.4,11.835a.75.75,0,0,0,.1,1.375l6.255,2.138L20.083,3.958,9.775,16.377,20.258,19.96A.767.767,0,0,0,20.5,20a.749.749,0,0,0,.742-.639l2.75-18.5a.751.751,0,0,0-.307-.722Z" fill="#f37b1c"></path>
                        </g>
                    </svg>
                </button>
            </form>
        </div>
    </div>
    
    <script>
        function loadMoreMeassges() {
            $('#more_btn').text('Ýüklenýär...');
    
            $(this).request('onLoadMore',{
                data: {
                    chatroom_id: $('#more_btn').attr('data-chatroom-id'),
                    skip: $('#more_btn').attr('data-skip')
                },
                success: function(data) {
                    $.each(data.more_messages,function(index,element) {
                        $(`
                        <div class="${ element.sender_id == data.currentUserId ? 'my_message2' : 'friend_message2' }">
                            <div class="message_text">
                                ${ element.message }
                            </div>
                        </div>
                        `).insertAfter('#more_btn');
                    });
    
                    skip = $('#more_btn').attr('data-skip');
                    
                    $('#more_btn').attr('data-skip',+skip + 5);
    
                    $('#more_btn').text('Öňki hatlar');
                }
            })
        }
    
        function showLatestMessage(data) {
            $('.message_form2 input').val('');
            $(data.latest_message_area).insertBefore('.message_form2')
    
            var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');    
            $('.chat_area-inner').scrollTop(bottom);
        }
        
    </script>
</section>
{% else %}
    {% if not user %}
    <a id="chatBot" class="chatBot" href="{{ 'login'|page }}" style="position: fixed; z-index: 2147483647;width: 70px;height: 70px;text-align: center;">
        <i class="icofont-chat" id="chatIcon" style="font-size: 36;"></i>
    </a>
    {% else %}
        Hello guys
    {% endif %}
{% endif %}

{% put scripts %}
<script>
    function sortHandle() {
        event.preventDefault();
        let sort = document.getElementById("sort_input");
        let value = sort.value;
        submitForm(value);
    }

    function submitForm(value) {
        let form = document.getElementById("sortOptionUserProfile");
        let sort = document.createElement("input");
        sort.name = "sort";
        sort.type = "hidden";
        sort.value = value;
        form.appendChild(sort);
        form.submit()
    }
    function showChat(){
        const chat = document.getElementById('chatSection')
        const chatIcon = document.getElementById('chatIcon');
        if (chat.classList.contains('display-block')){
            chat.classList.remove('display-block');
            chat.classList.add('display-none');
            chatIcon.className = 'icofont-chat';
        }else{
            chat.classList.remove('display-none');
            chat.classList.add('display-block');
            chatIcon.className = 'icofont-close'
        }
    }
</script>
{% endput %}