{% set chatrooms = __SELF__.chatrooms %}

<!-- Chat ============================================================ -->
<section class="chat">
    <div class="auto_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/images/big_logo.png'|theme }}" alt="logo">
                    </div>
                    <div class="chat_wall_text">
                        {{ 'auth.messages_no'|_ }}
                    </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="#" 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.name or chatroom.message_partner.surname %}
                                {{chatroom.message_partner.name}} {{chatroom.message_partner.surname}}
                            {% 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 %}
                        <button type="button" class="delete" onclick="event.stopPropagation(); deleteChat({{ chatroom.id }})">
                            <img src="{{ 'assets/images/svg/trash.svg'|theme }}" alt="delete-icon">
                        </button>
                    </a>
                    {% endfor %}
                    
                </div>
                <div class="chat_area" id="chatroom">

                    <!-- chat_area -->

                    <div class="chat_wall">
                        <div class="chat_wall_img">
                            <img src="{{'assets/images/big_logo.png'|theme}}" alt="logo">
                        </div>
                        <div class="chat_wall_text">
                            {{'account.choose_chat'|_}}
                        </div>
                    </div>

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

<!--Delete modal ========================================================= -->
<div class="modal" id="delete-modal">
    <div class="modal_inner">
        <form data-request="onDeleteChat">
            <h2 class="modal_title">
                {{ 'auth.messages_modal_question'|_ }}
            </h2>
            <input type="hidden" value="" name="chatroom_id">
            <div class="modal_btn-box">
                <button class="reset-form" type="reset">
                    {{ 'auth.modal_no'|_ }}
                </button>
                <button class="accept-form" type="submit">
                    {{ 'auth.modal_yes'|_ }}
                </button>
            </div>
        </form>
    </div>
</div>
<!--Delete modal 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('');
        }
    </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 %}