{% extends 'base.html' %}
{% load humanize i18n %}
{% block title %}
Daftar Chat
{% endblock %}

{% block data-page %}
style
{% 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-end ps-0">
                    <div class="row">
                        <div class="col-auto">
                            <a href="{% url 'chat_group_leave' ruanganchatfilter.pk %}">Keluar Group</a>
                        </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>
                        {% if request.notifycount == "0" or request.notifycount == 0 or request.notifycount is None %}
                        {% else %}
                        <span class="count-indicator"></span>
                        {% endif %}
                    </a>
                </div>
            </div>
        </header>
        <!-- Header ends -->

        <!-- main page content -->
        <div class="main-container container pt-0">

            <!-- chat user list -->
            <div class="container chat-list">
                <div class="row no-margin" id="box-chat">
        {% for x in textchatfilter %}
            {% if x.pengguna.id == request.user.id %}
                {% if x.produk != None %}
                <div class="right-chat" id="chat-item-produk">
                    <div class="col-12">
                        <div class="chat-block">
                            <div class="row">
                                <div class="col">
                                    <div class="mw-100 position-relative mb-2 figure">
                                        <img src="{{x.produk.foto_utama.foto.url}}" alt="{{ x.produk.nama }}" style="height: 300px; object-fit: cover;">
                                    </div>
                                    {{ x.produk.nama }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>

                    {% if waktusekarang == x.waktu %}
                    {% else %}{{ x.waktu }}
                    {% endif %}
                        </p></div>
                </div>
                {% else %}
                <div class="right-chat" id="chat-item">
                    <div class="col-12">
                        <div class="chat-block">
                            <div class="row">
                                <div class="col">
                                    <div class="mw-100 position-relative mb-2 figure">
                                        <strong>{{ x.pengguna }}</strong> <br>
                                            {% if x.file == 'False' %}
                                            {% else %}
                                            <img src="/media/{{ x.file }}" alt="image" class="mw-100" style="height: 300px; object-fit: cover;"><br>
                                            {% endif %}
                                            
                                            {{ x.text }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-end">
                        <p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>
                    {% if waktusekarang == x.waktu %}
                    {% else %}{{ x.waktu }}
                    {% endif %}
                        </p>
                    </div>
                </div>
                {% endif %}
            {% else %}
                {% if x.produk != None %}
                <div class="left-chat" id="chat-item-user-produk">
                    <div class="col-12">
                        <div class="chat-block">
                            <div class="row">
                                <div class="col">
                                    <div class="mw-100 position-relative mb-2 figure">
                                        <img src="{{x.produk.foto_utama.foto.url}}" alt="{{ x.produk.nama }}" class="mw-100" style="height: 300px; object-fit: cover;">
                                    </div>{{ x.produk.nama }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-end">
                        <p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>
                    {% if waktusekarang == x.waktu %}
                    {% else %}
                    {{ x.waktu }}
                    {% endif %}
                        </p>
                    </div>
                </div>
                {% else %}
                <div class="left-chat" id="chat-item-user">
                    <div class="col-12">
                        <div class="chat-block">
                            <div class="row">
                                <div class="col">
                                    <div class="mw-100 position-relative mb-2 figure">
                                        <strong>{{ x.pengguna }}</strong> <br>
                                            {% if x.file == 'False' %}
                                            {% else %}
                                            <img src="/media/{{ x.file }}" alt="image" class="mw-100" style="height: 300px; object-fit: cover;"><br>
                                            {% endif %}
                                            
                                            {{ x.text }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 text-start">
                        <p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>
                    {% if waktusekarang == x.waktu %}
                    {% else %}{{ x.waktu }}
                    {% endif %}
                        </p>
                    </div>
                </div>
                {% endif %}
            {% endif %}
        {% endfor %}
        </div>

            <div class="clearfix"></div>
            <div class="clearfix"></div>
            </div>
        </div>
        <!-- main page content ends -->

        <!-- chat message post -->
        <form  method="post" enctype="multipart/form-data" id="form-message">
        {% csrf_token %}
        <div class="position-fixed bottom-0 start-0 chat-post footer py-3">
            <div class="row mx-0">
                <div class="col-auto">
                    <label class="btn btn-default btn-icon">
                    <input type="file" id="image-message" class="btn btn-primary rounded-15" name="file" accept="image/*" data-bs-toggle="modal" data-bs-target="#attachefiles" style="display: none;" onchange="submit">
                        <i class="bi bi-file-earmark-image"></i>
                    </label>
                </div>
                <div class="col ps-0">
                    <div class="input-group">
                    <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" placeholder="Tulis Pesan...">
                        <button class="btn btn-outline-primary" type="submit"><i class="bi bi-cursor"></i></button>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <!-- chat message post page -->
    </main>
    <!-- Page ends-->


<script>
    var lastChatIdStr = '{% if textchatfilter.count == 0 %} 0 {% else %} {{ textchatfilter.last.id }} {% endif %}'
    var lastChatId = parseInt(lastChatIdStr.trim(), 10);
    var boxChat = document.getElementById('box-chat');
    var formChat = document.getElementById('form-message');

    const createElement = (tag, classlist)=>{
        let d = document;
        let element = d.createElement(tag);
        element.classList.add(...classlist);
        return element;
    };

    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) {

                let chatItemDiv = createElement('div', ['left-chat']);
                let textEndDiv = createElement('div', ['col-12', 'text-start']);
                let namaAnggota = createElement('p', ['text-start']);
                var br = document.createElement('br');

                if (parseInt('{{request.user.id }}') == chat.pengguna) {
                    chatItemDiv = createElement('div', ['right-chat']);
                    textEndDiv = createElement('div', ['col-12', 'text-end']);
                };

                let chatCol12Div = createElement('div', ['col-12']);
                let chatBlockDiv = createElement('div', ['chat-block']);
                let chatRowDiv = createElement('div', ['row']);
                let chatColDiv = createElement('div', ['col']);
                let mw1000Div = createElement('div', ['mw-100', 'position-relative', 'mb-2', 'figure'], 'teks');
                let textMutedP = createElement('p', ['text-muted', 'small', 'time']);

                namaAnggota.innerHTML = chat.nama;
                mw1000Div.appendChild(namaAnggota);
                chatColDiv.appendChild(mw1000Div);
                chatRowDiv.appendChild(chatColDiv);
                chatBlockDiv.appendChild(chatRowDiv);
                chatCol12Div.appendChild(chatBlockDiv);
                chatItemDiv.appendChild(chatCol12Div);
                chatItemDiv.appendChild(textEndDiv);

                let teksContent = chatItemDiv.children[0].children[0].children[0].children[0].children[0];

                if (chat.produk === null) {

                    if (chat.file !== '/media/False') {
                        var imgChat = document.createElement('img');
                        imgChat.classList.add('imageBlock', 'xlarge', 'rounded');
                        imgChat.setAttribute('src', chat.file);
                        teksContent.appendChild(imgChat);
                        teksContent.appendChild(br);
                        textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${chat.waktu}</p>`;
                    }

                    var textElem = document.createTextNode(chat.text)
                    teksContent.appendChild(textElem)
                    textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${chat.waktu}</p>`;
                } else {

                    var textElem = document.createTextNode(chat.text)
                    teksContent.appendChild(textElem)
                    textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${chat.waktu}</p>`

                    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

                    var textElem = document.createTextNode(produkElem)
                    teksContent.appendChild(textElem)
                    textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${chat.waktu}</p>`;
                }
                boxChat.appendChild(chatItemDiv);
                scrollToBottom();
                lastChatId = chat.id;
            })
        })
    }
    getMessage()
    setInterval(getMessage, 2000);

    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)
        data.append('url', '{% url "detail_group_chat" ruanganchatfilter.pk %}')

        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('right-chat', 'user')

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

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

                // var childFooter = document.createElement('footer')

                let chatItemDiv = createElement('div', ['right-chat']);
                let chatCol12Div = createElement('div', ['col-12']);
                let chatBlockDiv = createElement('div', ['chat-block']);
                let chatRowDiv = createElement('div', ['row']);
                let chatColDiv = createElement('div', ['col']);
                let mw1000Div = createElement('div', ['mw-100', 'position-relative', 'mb-2', 'figure'], 'teks');
                let textEndDiv = createElement('div', ['col-12', 'text-end']);
                let textMutedP = createElement('p', ['text-muted', 'small', 'time']);
                let namaAnggota = createElement('p', ['text-start']);
                var br = document.createElement('br');

                namaAnggota.innerHTML = resJson.nama;
                mw1000Div.appendChild(namaAnggota);
                chatColDiv.appendChild(mw1000Div);
                chatRowDiv.appendChild(chatColDiv);
                chatBlockDiv.appendChild(chatRowDiv);
                chatCol12Div.appendChild(chatBlockDiv);

                // textEndDiv.appendChild(textMutedP)

                chatItemDiv.appendChild(chatCol12Div);
                chatItemDiv.appendChild(textEndDiv);

                // col_12.appendChild(row)
                // chatItem.appendChild(col_12)
                // chatItem.children[0].appendChild(childBubble)
                // chatItem.children[0].appendChild(childFooter)

                let teksContent = chatItemDiv.children[0].children[0].children[0].children[0].children[0]

                if (resJson) {
                    if (typeof resJson.file !== 'undefined') {
                        if (resJson.file !== '/media/False') {
                            var imgChat = document.createElement('img')
                            imgChat.classList.add('imageBlock', 'xlarge', 'rounded')
                            imgChat.setAttribute('src', resJson.file)
                            // chatItemDiv.children[0].children[0].appendChild(imgChat)
                            // chatItemDiv.children[0].children[0].appendChild(br)
                            teksContent.appendChild(imgChat)
                            teksContent.appendChild(br)
                            textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${resJson.waktu}</p>`;
                        };
                    };

                    if(resJson.text !== 'undefined') {
                        var textElem = document.createTextNode(resJson.text)
                        teksContent.appendChild(textElem)
                        textEndDiv.innerHTML = `<p class="text-muted small time"><i class="bi bi-check-all text-primary"></i>${resJson.waktu}</p>`;
                        boxChat.appendChild(chatItemDiv);
                    }
                };

                // 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

                if (resJson && typeof resJson.id !== 'undefined') {
                    lastChatId = resJson.id
                } else {
                    lastChatId = 0
                }
        })
    });

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