{% set chatrooms = __SELF__.chatrooms %}

<div class="breadcumb_area">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <h5>{{ 'breadcrumbHabarlasmak'|_ }}</h5>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">{{ 'breadcrumbEsasySahypa'|_ }}</a></li>
                    <li class="breadcrumb-item active">{{ 'breadcrumbHabarlasmak'|_ }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Chat ============================================================ -->
<section class="chat">
    <div class="container">
        <div class="chat_wrap">
            {% if chatrooms is empty %}
            <div class="empty_area">
                <div class="chat_wall">
                    <div class="chat_wall_img">
                        <img src="{{ 'assets/img/logo/gurlushyk-logo2.png'|theme }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi">
                    </div>
                    <div class="chat_wall_text">
                       {{ 'chat.HazirlikceSizeYazylanHatYok'|_ }}
                    </div>
                </div>
            </div>
            {% else %}
            <div class="chat_burger">
                <svg viewBox="0 0 32 32" fill="#003197" xmlns="http://www.w3.org/2000/svg">
                    <g data-name="menu " id="menu_">
                        <path d="M29,6H3A1,1,0,0,0,3,8H29a1,1,0,0,0,0-2Z" />
                        <path d="M3,17H16a1,1,0,0,0,0-2H3a1,1,0,0,0,0,2Z" />
                        <path d="M25,24H3a1,1,0,0,0,0,2H25a1,1,0,0,0,0-2Z" />
                    </g>
                </svg>
            </div>
            <div class="chat_box">
                <div class="chat_people">

                    {% for chatroom in chatrooms %}
                    <a href="#" id="chatroom_{{ chatroom.id }}" class="person" style="display: block;"
                        data-request="onChatroom"
                        data-request-data="chatroom_id: {{chatroom.id}}"
                        data-request-success="showMessages(data)"
                        data-id="{{ chatroom.id}}"
                        data-partner-id="{{ chatroom.message_partner.id }}"
                    >
                        <div class="person_name">

                            {% if chatroom.message_partner.shop_title %}
                                {{ chatroom.message_partner.shop_title }}
                            {% elseif chatroom.message_partner.name %}
                                {{ chatroom.message_partner.name }}
                            {% else %}
                                {{chatroom.message_partner.email}}
                            {% endif %}
                            
                           
                        </div>
                        <div class="person_message">
                            {{chatroom.last_message.message}}
                        </div>
                        {% if chatroom.count_unread_messages %}
                            <div class="chat_alert">
                                {{chatroom.count_unread_messages}}
                            </div>
                        {% endif %}
                        <!-- <a id="chatBot" class="chatBot" href="#" style="position: fixed; z-index: 2147483647;"><i class="icofont-chat"></i></a> -->
                        <!-- <button type="button" class="delete" style="color: white;border: none;font-size: 18px;" onclick="event.stopPropagation(); deleteChat({{ chatroom.id }})">
                            <i class="icofont-ui-delete"></i>
                        </button>
                         -->
                    </a>
                    {% endfor %}
                    
                </div>
                <div class="chat_area" id="chatroom">

                    <!-- chat_area -->

                    <div class="chat_wall">
                        <div class="chat_wall_img">
                            <img src="{{ 'assets/img/logo/gurlushyk-logo2.png'|theme }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi">
                        </div>
                        <div class="chat_wall_text">
                            {{ 'chat.BiriniSaylan'|_ }}
                        </div>
                    </div>

                </div>
            </div>
            {% endif %}
        </div>
    </div>
</section>
<!-- Chat end ======================================================== -->

{% put scripts %}
<script>
    function showMessages(data) {
        $('#chatroom').html(data.chat_area);
        var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');    
        $('.chat_area-inner').scrollTop(bottom);
        $('.unread-messages-count').text('');
    }

    function deleteChat(chatId){
        $.get('onDeleteChat', function (data){
            if(data.length > 0)
            {
                $('#subcategoryEdit').attr("disabled", false);
                $('#subcategoryEdit').empty();
                for (let i = 0; i < data.length; i++) {
                    $('#subcategoryEdit').append('<option value ="'+data[i]['id']+'" data-file="'+data[i]['is_file_category']+'">'+data[i]['name']+'</option>');
                }
            }
            else
            {
                $('#subcategoryEdit').empty();
                $('#subcategoryEdit').append('<option value ="">Ikinji kategoriýa ýok</option>');
                $('#subcategoryEdit').attr("disabled", true);
            }
        });
    }

    $("[id^='chatroom_']").each(function() {
        var id = $(this).attr('id');
        id = id.replace("chatroom_",'');
        $('#chatroom_'+id).on('click', function(event){
            const person = document.getElementsByClassName('person');
            for(var index=0;index < person.length;index++){
                person[index].classList.remove('active');
            }
            $('#chatroom_'+id).addClass('active');
        });      
    });
</script>
<script>
    $(window).on('load', function() {
        var params = window
            .location
            .search
            .replace('?','')
            .split('&')
            .reduce(
                function(p,e){
                    var a = e.split('=');
                    p[ decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
                    return p;
                },
                {}
            );

        if(params['seller_id']) {
            $('.chat_people').find(`a[data-partner-id="${params['seller_id']}"]`)
                .click()
        }
    })
</script>
{% endput %}