@extends('layouts/layoutMaster')

@section('title', 'Chat - Apps')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/tagify/tagify.css')}}" />
@endsection

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/app-chat.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/bootstrap-maxlength/bootstrap-maxlength.js')}}"></script>
<script src="{{asset('assets/vendor/libs/tagify/tagify.js')}}"></script>
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/app-chat.js')}}"></script>
<script>
    // const whitelist = [
    //     'LIM',
    //     'Due Diligence',
    //     'Solicitor Approval',
    //     'Insurance',
    //     'Finance',
    //     'Sale of Property',
    // ];
    const tagListEl = document.querySelector('#numbers');
    const contactList = null;

    const optionList = contactList.map(item => `${item.first_name}(${item.mobile})`)

    let tagList = new Tagify(tagListEl, {
        whitelist: optionList,
        maxTags: 10,
        dropdown: {
            maxItems: 100,
            classname: '',
            enabled: 0,
            closeOnSelect: false
        }
    });


    const chatHistoryBody = document.querySelector('.chat-history-body'),
        messageInput = document.querySelector('.message-input'),
        formSendSms = document.querySelector('.form-send-sms');


    function scrollToBottom() {
        chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
    }

    function scrollToUp() {
        chatHistoryBody.scrollTo(0, 0);
    }

    scrollToBottom();

    function displayChatHistory(chats) {
        // Create a div and add a class
        let chatEle = "";

        chats.map(chat => {
            if (chat.sender == 1) {
                let statusIcon = "";
                if (chat.status == 'sent') {
                    statusIcon = "<i class='ti ti-check ti-xs me-1 text-success'></i>";
                } else if (chat.status == 'delivered') {
                    statusIcon = "<i class='ti ti-checks ti-xs me-1 text-success'></i>";
                } else if (chat.status == 'failed' || chat.status == 'expired') {
                    statusIcon = "<i class='ti ti-x ti-xs me-1 text-danger'></i>";
                } else {
                    statusIcon = "<i class='ti ti-clock ti-xs me-1 text-warning'></i>";
                }

                chatEle += `
                    <li class="chat-message ${chat.sender == 1 ? 'chat-message-right' : ''}">
                        <div class="d-flex overflow-hidden">
                            <div class="chat-message-wrapper flex-grow-1">
                                <div class="chat-message-text">
                                    <p class="mb-0">${chat.content}</p>
                                </div>
                                <div class="text-end text-muted mt-1">
                                    ${statusIcon}
                                    <small> ${moment(chat.sent_at).format('DD, MMM YYYY - hh:mm A')} </small>
                                </div>
                            </div>
                            <div class="user-avatar flex-shrink-0 ms-3">
                                <div class="avatar avatar-sm">
                                    <img src="{{asset('assets/img/avatars/1.png')}}" alt="Avatar" class="rounded-circle">
                                </div>
                            </div>
                        </div>
                    </li>
                    `;
            } else {
                let fromPhoto = "";
                if (chat.from_photo.length == 2) {
                    fromPhoto = `<div class="avatar d-block flex-shrink-0">
                                    <span class="avatar-initial rounded-circle bg-label-primary">
                                        ${chat.from_photo}
                                    </span>
                                </div>`;
                } else {
                    const basePath = "