@extends('layouts.app', ['title' => __tr('WhatsApp Chat')])
@section('content')
@include('users.partials.header', [
'title' => __tr('WhatsApp Chat'),
'description' => '',
// 'class' => 'col-lg-7'
])
@push('head')
{!! __yesset('dist/css/whatsapp-chat.css', true) !!}
@endpush
@if ($contact)
<div class="container-fluid">
    <div class="">
        <div class="card lw-whatsapp-chat-block-container">
            <div id="lwWhatsAppChatWindow"
                class="card-body lw-whatsapp-chat-window lw-contact-window-{{ $contact->_uid }}"
                data-contact-uid="{{ $contact->_uid }}">
                <div class="row" x-cloak x-data="{isContactListOpened:false}">
                    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 mb-4 lw-contact-list-block" x-show="isContactListOpened">
                        <h2 class="lw-contacts-header">{{ __tr('Contacts') }} <span class="btn btn-light btn-sm float-right d-sm-none" @click.prevent="isContactListOpened = false"><i class="fa fa-arrow-left"></i></span></h2>
                        <div class="list-group lw-contact-list shadow-lg list-group-flush" x-cloak
                            x-data="initialContactListData">
                            <template x-for="contactItem in contacts">
                                <a :data-messaged-at="contactItem.last_message?.messaged_at"
                                    :class="['lw-contact-' + contactItem._uid, ('{{ $contact->_uid }}' == contactItem._uid) ? 'list-group-item-light' : '']"
                                    :href="('{{ $contact->_uid }}' != contactItem._uid) ? __Utils.apiURL('{{ route('vendor.chat_message.contact.view', ['contactUid']) }}',{'contactUid': contactItem._uid}) : '#'"
                                    class="list-group-item list-group-item-action d-flex align-items-start lw-contact">
                                    <div class="ms-2 me-auto w-100 mt-1">
                                        <div class="float-left">
                                            <img class="lw-contact-avatar" :src="contactItem.gravatar"
                                                :alt="contactItem.full_name">
                                        </div>
                                        <div class="mt-1">
                                            <h3 x-text="contactItem.full_name"></h3>
                                        </div>
                                    </div>
                                    <div class="mt-2 text-right w-100 mt-3">
                                        <small class="text-muted lw-last-message-at"
                                            x-text="contactItem.last_message?.formatted_message_time"></small>
                                        <span x-show="contactItem.unread_messages_count"
                                            class="badge bg-success rounded-pill"
                                            x-text="contactItem.unread_messages_count"></span>
                                    </div>
                                </a>
                            </template>
                        </div>
                    </div>
                    <div class="page col-sm-12 col-md-6 col-lg-8 col-xl-9 mb-4">
                        <h2>{{ __tr('Chat') }}</h2>
                        <div class="marvel-device nexus5">
                            <div class="screen">
                                <div class="screen-container">
                                    <div class="chat">
                                        <div class="chat-container" x-clock x-data="initialMessageData">
                                            <div class="user-bar">
                                                <div class="back" @click.prevent="isContactListOpened = true">
                                                    <i class="fa fa-users"></i>
                                                </div>
                                                <div class="avatar">
                                                    <img src="https://www.gravatar.com/avatar/{{ md5(strtolower(trim($contact->email))) }}" alt="{{ $contact->full_name }}">
                                                </div>
                                                <div class="name">
                                                    <span>{{ $contact->full_name }}</span>
                                                    @if ($isDirectMessageDeliveryWindowOpened)
                                                    <abbr class="status text-success" title="{{ __tr('As you received message response in last 24 hours, you can send direct messages to this  contact for next __windowClosedTime__.', [
                                                        '__windowClosedTime__' => $directMessageDeliveryWindowOpenedTillMessage
                                                        ]) }}">{{  __tr('You can reply') }}</abbr>
                                                        @else
                                                        <abbr class="status text-warning" title="{{ __tr("As you may not received any response in last 24 hours, your direct message may not get delivered. However you can send template messages.") }}">{{  __tr('You can\'t reply') }}</abbr>
                                                        @endif
                                                </div>
                                                <div class="actions more lw-user-new-actions">
                                                    <a href="#" class="lw-whatsapp-bar-icon-btn" data-toggle="dropdown" aria-expanded="false">
                                                        <i class="fas fa-ellipsis-v text-muted"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                    <a href="{{ route('vendor.template_message.contact.view', ['contactUid' => $contact->_uid]) }}"
                                                        class="dropdown-item"><i class="fas fa-paper-plane"></i> {{ __tr('Send New Template Message') }}</a>
                                                    <a x-cloak
                                                        :class="whatsappMessageLogs.length <= 0 ? 'disabled' : ''"
                                                        data-method="post" data-confirm="#lwClearChatHistoryWarning"
                                                        href="{{ route('vendor.chat_message.delete.process', ['contactUid' => $contact->_uid]) }}"
                                                        class="dropdown-item text-danger lw-ajax-link-action"><i class="fas fa-eraser"></i> {{ __tr('Clear Chat History') }}</a>
                                                    <script type="text/template" id="lwClearChatHistoryWarning">
                                                        <h3>{{  __tr('Are you sure you want to clear chat history for this contact?') }}</h3>
                                                            <p>{{  __tr('All the history will be deleted permanently.') }}</p>
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="conversation">
                                                <div class="conversation-container" id="lwConversionChatContainer">
                                                        <template x-for="whatsappMessageLogItem in whatsappMessageLogs">
                                                            <div class="lw-chat-message-item"
                                                                :id="whatsappMessageLogItem._uid">
                                                                <template
                                                                    x-if="whatsappMessageLogItem.is_incoming_message">
                                                                    <div class="message received">
                                                                        <template
                                                                            x-if="whatsappMessageLogItem.replied_to_whatsapp_message_logs__uid">
                                                                            <a href="#"
                                                                                @click.prevent="lwScrollTo('#'+whatsappMessageLogItem.replied_to_whatsapp_message_logs__uid)"
                                                                                class="badge float-right text-muted"><i
                                                                                    class="fa fa-link"></i> {{
                                                                                __tr('Replied to') }}</a>
                                                                        </template>
                                                                        <template
                                                                            x-if="whatsappMessageLogItem.template_message">
                                                                            <div class="lw-template-message"
                                                                                x-show="whatsappMessageLogItem.template_message"
                                                                                x-html="whatsappMessageLogItem.template_message">
                                                                            </div>
                                                                        </template>
                                                                        <div x-show="whatsappMessageLogItem.message"><span class="lw-plain-message-text" x-html="whatsappMessageLogItem.message"></span></div>
                                                                        <span class="metadata"><span class="time"
                                                                                x-text="whatsappMessageLogItem.formatted_message_time"></span></span>
                                                                    </div>
                                                                </template>
                                                                <template
                                                                    x-if="!whatsappMessageLogItem.is_incoming_message">
                                                                    <div class="message sent">
                                                                        <template
                                                                            x-if="whatsappMessageLogItem.__data?.options?.bot_reply">
                                                                            <span class="badge float-right text-muted"
                                                                                title="{{ __tr('Bot Reply') }}">
                                                                                <i class="fas fa-robot text-muted"></i>
                                                                            </span>
                                                                        </template>
                                                                        <template
                                                                            x-if="whatsappMessageLogItem.template_message">
                                                                            <div class="lw-template-message"
                                                                                x-show="whatsappMessageLogItem.template_message"
                                                                                x-html="whatsappMessageLogItem.template_message">
                                                                            </div>
                                                                        </template>
                                                                        <template x-if="whatsappMessageLogItem.message">
                                                                            <div class="lw-template-message"
                                                                                x-show="whatsappMessageLogItem.message"
                                                                                ><span class="lw-plain-message-text" x-html="whatsappMessageLogItem.message"></span>
                                                                            </div>
                                                                        </template>
                                                                        <template
                                                                            x-if="whatsappMessageLogItem.status == 'failed'">
                                                                            <div class="p-1 mt-2">
                                                                                <small class="text-danger"> <i
                                                                                        class="fas fa-exclamation-circle text-danger text-shadow"></i>
                                                                                    <em
                                                                                        x-text="whatsappMessageLogItem.whatsapp_message_error"></em></small>
                                                                            </div>
                                                                        </template>
                                                                        <span class="metadata">
                                                                            <span class="time"
                                                                                x-text="whatsappMessageLogItem.formatted_message_time"></span>
                                                                            <span class="tick">
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.status == 'read'">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="15"
                                                                                        id="msg-dblcheck-ack" x="2063"
                                                                                        y="2076">
                                                                                        <path
                                                                                            d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"
                                                                                            fill="#4fc3f7" />
                                                                                    </svg>
                                                                                </template>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.status == 'delivered'">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                                        width="16" height="15"
                                                                                        id="msg-dblcheck" x="2047"
                                                                                        y="2061">
                                                                                        <path
                                                                                            d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z"
                                                                                            fill="#92a58c" />
                                                                                    </svg>
                                                                                </template>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.status == 'sent'">
                                                                                    <svg width="16" height="16"
                                                                                        viewBox="0 0 24 24" fill="none"
                                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                                        <path
                                                                                            d="M4 12.6111L8.92308 17.5L20 6.5"
                                                                                            stroke="#92a58c"
                                                                                            stroke-width="2"
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round" />
                                                                                    </svg>
                                                                                </template>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.status == 'failed'">
                                                                                    <i
                                                                                        class="fas fa-exclamation-circle text-danger"></i>
                                                                                </template>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.status == 'accepted'">
                                                                                    <i
                                                                                        class="far fa-clock text-muted"></i>
                                                                                </template>
                                                                            </span>
                                                                        </span>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        </template>
                                                    <div class="w-100" id="lwEndOfChats">&shy;</div>
                                                </div>
                                                <x-lw.form data-callback="appFuncs.resetForm" id="whatsAppMessengerForm"
                                                    class="conversation-compose" data-show-processing="false"
                                                    :action="route('vendor.chat_message.send.process')">
                                                    <input type="hidden" name="contact_uid"
                                                        value="{{ $contact->_uid }}">
                                                    {{-- emoji following blank tag as removing it may break input layout
                                                    --}}
                                                    <div class="emoji">
                                                    </div>
                                                    <textarea name="message_body" required class="input-msg lw-input-emoji"
                                                        name="input" placeholder="{{ __tr(' Type a message') }}" autocomplete="off" autofocus></textarea>
                                                        <div class="photo dropup">
                                                            <!-- Default dropup button -->
                                                            <a href="#" class="lw-whatsapp-bar-icon-btn" data-toggle="dropdown" aria-expanded="false">
                                                                <i class=" fa fa-paperclip text-muted"></i>
                                                            </a>
                                                            <div class="dropdown-menu dropdown-menu-right">
                                                                <a title="{{ __tr('Send Document') }}"
                                                            class="lw-ajax-link-action dropdown-item" data-toggle="modal"
                                                            data-response-template="#lwWhatsappAttachment"
                                                            data-target="#lwMediaUploadAndSend"
                                                            data-callback="appFuncs.prepareUpload" href="{{ route('vendor.chat_message_media.upload.prepare', [
                                                            'mediaType' => 'document'
                                                        ]) }}"><i class="fa fa-file text-muted"></i> {{ __tr('Send Document') }}</a>
                                                        <a title="{{ __tr('Send Image') }}" class="lw-ajax-link-action dropdown-item"
                                                        data-toggle="modal"
                                                        data-response-template="#lwWhatsappAttachment"
                                                        data-target="#lwMediaUploadAndSend"
                                                        data-callback="appFuncs.prepareUpload" href="{{ route('vendor.chat_message_media.upload.prepare', [
                                                        'mediaType' => 'image'
                                                    ]) }}"><i class="fa fa-image text-muted"></i> {{ __tr('Send Image') }}</a>
                                                    <a title="{{ __tr('Send Video') }}" class="lw-ajax-link-action dropdown-item"
                                                    data-toggle="modal"
                                                    data-response-template="#lwWhatsappAttachment"
                                                    data-target="#lwMediaUploadAndSend"
                                                    data-callback="appFuncs.prepareUpload" href="{{ route('vendor.chat_message_media.upload.prepare', [
                                                    'mediaType' => 'video'
                                                ]) }}"><i class="fa fa-video text-muted"></i> {{ __tr('Send Video') }}</a>
                                                <a title="{{ __tr('Send Audio') }}" class="lw-ajax-link-action dropdown-item"
                                                data-toggle="modal"
                                                data-response-template="#lwWhatsappAttachment"
                                                data-target="#lwMediaUploadAndSend"
                                                data-callback="appFuncs.prepareUpload" href="{{ route('vendor.chat_message_media.upload.prepare', [
                                                'mediaType' => 'audio'
                                            ]) }}"><i class="fa fa-headphones text-muted"></i> {{ __tr('Send Audio') }}</a>
                                                            </div>
                                                        </div>
                                                    <button class="send" type="submit">
                                                        <div class="circle pl-2">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em"
                                                                height="1.5em" viewBox="0 0 24 24">
                                                                <path fill="currentColor"
                                                                    d="M2.01 21L23 12L2.01 3L2 10l15 2l-15 2z" />
                                                            </svg>
                                                        </div>
                                                    </button>
                                                </x-lw.form>
                                                {{-- error container --}}
                                                <div data-form-id="#whatsAppMessengerForm"
                                                    class="lw-error-container-message_body p-2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<x-lw.modal id="lwMediaUploadAndSend" :header="__tr('Send Media')" :hasForm="true"
    data-pre-callback="clearModelContainer">
    <!--  document form -->
    <x-lw.form id="lwMediaUploadAndSendForm" :action="route('vendor.chat_message_media.send.process')"
        data-callback="appFuncs.modelSuccessCallback" :data-callback-params="['modalId' => '#lwMediaUploadAndSend']">
        <!-- form body -->
        <input type="hidden" name="contact_uid" value="{{ $contact->_uid }}">
        <div id="lwWhatsappAttachment" class="lw-form-modal-body"></div>
        <script type="text/template" id="lwWhatsappAttachment-template">
            <% if(__tData.mediaType == 'document') { %>
            <div class="form-group col-sm-12">
                <input id="lwDocumentMediaFilepond" type="file" data-allow-revert="true"
                    data-label-idle="{{ __tr('Select Document') }}" class="lw-file-uploader" data-instant-upload="true"
                    data-action="