{% extends "base.html" %}
{% load humanize i18n %}
{% block title %}
{% for x in ruanganchatdimaksud.parapengguna.all %}
{% if x == request.user %}
{% else %}
{{ x }}
{% endif %}
{% endfor %}
{% endblock %}
{% block content %}


<!-- Begin page -->
    <main class="h-100 has-header">

        <!-- Header -->
        <header class="header position-fixed">
            <div class="row">
                <div class="col-auto">
                    <a class="btn btn-light btn-44 back-btn" href="/chat/daftar">
                        <i class="bi bi-arrow-left"></i>
                    </a>
                </div>
                <div class="col align-self-center ps-0">
                    <div class="row">
                        <div class="col-auto">
                            <div class="avatar avatar-44 coverimg rounded-10">


            {% for x in ruanganchatfilter.parapengguna.all %}
            {% if x.id == request.user.id %}
            {% else %}
                                {% if x.anggota.foto %}
                                <img src="{{ x.anggota.foto.url }}" alt="">
                                            {% endif %}
                                            {% endif %}
            {% endfor %}
                            </div>
                        </div>
                        <div class="col align-self-center px-0">

            {% for x in ruanganchatfilter.parapengguna.all %}
            {% if x.id == request.user.id %}
            {% else %}
                            <p class="mb-0"><b>{{ x.anggota.nama_anggota }}</b><br>Last seen {{ x.last_login|naturaltime }}</p>
            {% endif %}
            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <a href="{% url 'daftar_notifikasi' %}" target="_self" class="btn btn-light btn-44">
                        <i class="bi bi-bell"></i>
                        <span class="count-indicator"></span>
                    </a>
                </div>
            </div>
        </header>
        <!-- Header ends -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent pt-2" id="box-chat">

            {% for x in textchatfilter %}
            {% if x.pengguna == request.user %}
                {% if x.produk != None %}
            <div class="row no-margin left-chat" id="chat-item-user-produk">
                <div class="col-12">
                    <div class="chat-block">
                        <a href="/">
                            <div class="row">
                            <div class="col col-auto">
                                <img src="{{x.produk.foto_utama.foto.url}}" alt="image" class="imageBlock xlarge rounded">
                            </div>
                            <div class="col">
                                {{ x.produk.nama }}<br>{{x.produk.deskripsi|truncatechars:100}}
                            </div>
                        </div>
                        </a>
                    </div>
                    {% if waktusekarang == x.waktu %}
                    {% else %}
                    <footer>{{ x.waktu }}</footer>
                    {% endif %}
                </div>
            </div>
                {% else %}
            <div class="chatItem user" id="chat-item-user">
                <div class="content">
                    <div class="bubble">
                        {% if x.file == 'False' %}
                        {% else %}
                        <img src="/media/{{ x.file }}" alt="image" class="imageBlock xlarge rounded"><br>
                        {% endif %}
                        {{ x.text }}
                    </div>
                    {% if waktusekarang == x.waktu %}
                    {% else %}
                    <footer>{{ x.waktu }}</footer>
                    {% endif %}
                </div>
            </div>
                {% endif %}

            {% else %}
                {% if x.produk != None %}
                    <div class="chatItem" id="chat-item-produk">
                <div class="content">
                    <div class="bubble">
                        <a href="/">
                            <div class="row">
                            <div class="col col-auto">
                                <img src="{{x.produk.foto_utama.foto.url}}" alt="image" class="imageBlock xlarge rounded">
                            </div>
                            <div class="col">
                                <h5>{{ x.produk.nama }}</h5>
                                <p style="color: #535353;">{{x.produk.deskripsi|truncatechars:100}}</p>
                            </div>
                        </div>
                        </a>
                        {% if x.produk.toko.pemilik != request.user %}
                            <form method="post" action="/">
                            {% csrf_token %}
                            <div class="row mt-2">
                                <div class="col-4">
                                    <input type="number" name="kuantitas" class="form-control" min="1" required aria-required="true">
                                </div>
                                <div class="col-8">
                                    <input type="hidden" name="id" value="{{ x.produk.id }}">
                                    <button type="submit" class="btn btn-success btn-block">
                                        <i class="icon ion-ios-cart"></i> Tambahkan
                                    </button>
                                </div>
                            </div>
                        </form>
                        {% endif %}
                    </div>
                    {% if waktusekarang == x.waktu %}
                    {% else %}
                    <footer>{{ x.waktu }}</footer>
                    {% endif %}
                </div>
            </div>
                {% else %}
            <div class="chatItem" id="chat-item">
<!--                <img src="/static/assets/img/sample/avatar6.jpg" alt="avatar" class="avatar">-->
                <div class="content">
                    <div class="bubble">
                        {% if x.file == 'False' %}
                        {% else %}
                        <img src="/media/{{ x.file }}" alt="image" class="imageBlock xlarge rounded"><br>
                        {% endif %}
                        {{ x.text }}
                    </div>
                    <footer>{{ x.waktu }}</footer>
                </div>
            </div>
                {% endif %}
            {% endif %}
            {% endfor %}


            <form  method="post" enctype="multipart/form-data" id="form-message">
                {% csrf_token %}
            <div class="chatFooter">
                <div class="leftButton">
                    <label class="btn btn-secondary btn-icon">
                        <input type="file" style="display: none;" name="file" accept="image/*" id="image-message">
                        <i class="icon ion-ios-camera"></i>
                    </label>
                </div>
                <div class="formArea">
                    <input type="hidden" name="kirimchat" value="kirimchat">
                    {% for x in ruanganchatfilter.parapengguna.all %}
                    {% if x == request.user %}
                    {% else %}
                    <input type="hidden" name="userdimaksudkan" value="{{ x.id }}">
                    {% endif %}
                    {% endfor %}
                    <input type="text" class="form-control" name="text" id="text-message">
                    <button type="submit" class="btn btn-primary btn-icon">
                        <i class="icon ion-ios-send"></i>
                    </button>
                </div>
            </div>
</form>
        </div>

    </div>
    <!-- appCapsule -->
    </main>


<script>
    var lastChatId = {% if textchatfilter.count == 0 %} 0 {%else%} {{textchatfilter.last.id}} {%endif%}
    function getMessage() {
        fetch(`{% url "chat-list-chat" ruanganchatfilter.id%}?last_id=${lastChatId}`).then(function(res) {
            if (res.status === 200) {
                return res.json()
            }
        }).then(function(resJson) {
            var list_chat = resJson
            list_chat.forEach(function(chat) {
                if ({{request.user.id}} === chat.pengguna) {
                    var chatItem = document.createElement('div')
                    chatItem.classList.add('chatItem', 'user')
                } else {
                    var chatItem = document.createElement('div')
                    chatItem.classList.add('chatItem')
                }

                if (chat.produk === null) {
                    var childContent = document.createElement('div')
                    childContent.classList.add('content')

                    var childBubble = document.createElement('div')
                    childBubble.classList.add('bubble')

                    var childFooter = document.createElement('footer')


                    chatItem.appendChild(childContent)
                    chatItem.children[0].appendChild(childBubble)
                    chatItem.children[0].appendChild(childFooter)

                    if (chat.file !== '/media/False') {
                        var imgChat = document.createElement('img')
                        imgChat.classList.add('imageBlock', 'xlarge', 'rounded')
                        imgChat.setAttribute('src', chat.file)
                        var br = document.createElement('br')
                        chatItem.children[0].children[0].appendChild(imgChat)
                        chatItem.children[0].children[0].appendChild(br)
                    }

                    var textElem = document.createTextNode(chat.text)
                    chatItem.children[0].children[0].appendChild(textElem)
                    chatItem.children[0].children[1].textContent = chat.waktu
                } else {
                    var childContent = document.createElement('div')
                    childContent.classList.add('content')

                    var childBubble = document.createElement('div')
                    childBubble.classList.add('bubble')

                    var childFooter = document.createElement('footer')

                    chatItem.appendChild(childContent)
                    chatItem.children[0].appendChild(childBubble)
                    chatItem.children[0].appendChild(childFooter)

                    var strProdukElem = `<div class="row">` +
                    `<div class="col col-auto">` +
                    `<img src="${chat.produk.foto_utama.foto}" alt="image" class="imageBlock xlarge rounded">` +
                    `</div>` +
                    `<div class="col">` +
                    `<h5>${chat.produk.nama}</h5>` +
                    `<p style="color: #535353;">${chat.produk.deskripsi.slice(0,100)}...</p></div></div>`

                    var produkElem = document.createElement('a')
                    produkElem.setAttribute(`href`, `/produk/detail/${chat.produk.id}`)
                    produkElem.innerHTML = strProdukElem

                    chatItem.children[0].children[0].appendChild(produkElem)

                    chatItem.children[0].children[1].textContent = chat.waktu
                }
                boxChat.appendChild(chatItem)
                scrollToBottom()
                lastChatId = chat.id
            })
        })
    }
    getMessage()
    setInterval(getMessage, 2000)
</script>

<script>
    var boxChat = document.getElementById('box-chat')
    var formChat = document.getElementById('form-message')

    formChat.addEventListener('submit', function(e) {
        e.preventDefault()
        var data = new FormData()
        var csrf_token = document.querySelector('[name=csrfmiddlewaretoken]')
        var text_message = document.getElementById('text-message')
        data.append('csrfmiddlewaretoken', csrf_token.value)
        data.append('text', text_message.value)

        var file = document.getElementById('image-message')
        if (file.files.length > 0) {
            data.append('file', file.files[0])
        }

        fetch('{% url "chat-send-chat" ruanganchatfilter.id %}', {
            method: 'POST',
            body: data
        }).then(function(res) {
            if (res.status == 201) {
                text_message.value = ''
                file.value = ''
                return res.json()
            }
        }).then(function(resJson) {

                var chatItem = document.createElement('div')
                chatItem.classList.add('chatItem', 'user')

                var childContent = document.createElement('div')
                childContent.classList.add('content')

                var childBubble = document.createElement('div')
                childBubble.classList.add('bubble')

                var childFooter = document.createElement('footer')

                chatItem.appendChild(childContent)
                chatItem.children[0].appendChild(childBubble)
                chatItem.children[0].appendChild(childFooter)

                if (resJson.file !== '/media/False') {
                    var imgChat = document.createElement('img')
                    imgChat.classList.add('imageBlock', 'xlarge', 'rounded')
                    imgChat.setAttribute('src', resJson.file)
                    var br = document.createElement('br')
                    chatItem.children[0].children[0].appendChild(imgChat)
                    chatItem.children[0].children[0].appendChild(br)
                }

                var textElem = document.createTextNode(resJson.text)
                chatItem.children[0].children[0].appendChild(textElem)
                chatItem.children[0].children[1].textContent = resJson.waktu
                boxChat.appendChild(chatItem)
                scrollToBottom()
                lastChatId = resJson.id
        })
    })

</script>

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

{% endblock %}