@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
<style>
.profile-pic {
    width: 42px;
    /* border-radius: 50%; */
    object-fit: cover;
  }
  .dots-btn {
    width: 36px;
    height: 36px;
    background-color: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .custom-none {
    display: none !important;
    }
  @media (max-width: 767px) {
    .custom-none {
         display: flex !important;
    }
  }
  @media (max-width: 1347px) {
    .col-xl-6 {
        max-width: 100% !important;
        flex: 0 0 100%;
        display: contents;
    }
    .d-md-none {
        display: inline-block !important;
    }
    .card.lw-whatsapp-chat-block-container .lw-contact-crm-block, .card.lw-whatsapp-chat-block-container .lw-contact-list-block {
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        background-color: hsla(0, 0%, 100%, .88);
        height: 100%;
        margin: 0;
        position: absolute;;
        width: 100vw;
        z-index: 2;
    }
}
@media (max-width: 768px) { 
    .card.lw-whatsapp-chat-block-container .lw-contact-crm-block, 
    .card.lw-whatsapp-chat-block-container .lw-contact-list-block {
        height: 100vh;
    }

}
.dots-loader {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
}

.dots-loader span {
  width: 10px;
  height: 10px;
  background: #555;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.dots-loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots-loader span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  from { transform: translateY(0); opacity: 0.5; }
  to   { transform: translateY(-8px); opacity: 1; }
}
/* .dropdown-menu.dropdown-menu-right.p-2.show {
    transform: translate3d(-114px, 30px, 0px) !important;
} */
/* .dropdown-menu.show {
    transform: translate3d(-114px, 30px, 0px) !important;
} */
.tab {
    transition: none;
}
.custom-margin {
    margin: 5px 0px 0px 5px !important;   
}
.toggle-switch {
    width: auto;
    /* height: 43px; */
    flex-wrap: wrap;
} 
.toggle-switch label {
    padding: 5px 20px;
    flex:auto;
    display: flex;
}
.dropdown-menu .dropdown-item {
    border-radius: 3px;
    text-align: left;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .message {
    padding: 5px 8px 8px 8px;
}
.contact-name-auto {
  max-width: 140px;
  /* max-width: 150px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.contact-auto {
    max-width: 140px ;
}
.name-auto {
    max-width: 77% !important;
}
.quoted-message {
    background-color: #f0f0f0;
    border-left: 4px solid #ccc;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-style: italic;
    max-height: 100px;
    overflow-y: auto;
}
label[for="lwAssignLabelsField-selectized"] {
    display: none;
}
@media (min-width: 1849px) {
    .contact-name-auto {
        max-width: 170px;
    }
}
@media (min-width: 1717px) {
    .contact-auto {
        max-width: 200px ;
    }
}
@media (max-width: 1813px) {
    .contact-auto {
        max-width: 140px;
    }
}
@media (max-width: 1636px) {
    .contact-auto {
        max-width: 100px;
    }
}
@media (max-width: 1350px) {
  .chat-container {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: block;
  }
}
@media (max-width: 586px) {
    .contact-name-auto {
        max-width: 100px;
    }
}
@media (max-width: 586px) {
    /* .toggle-switch {
        display: grid;
	    border-radius: 10px;
	    padding: 10px;
    } */
}
@media (max-width: 1440px) { 
    .contact-name-auto {
        max-width: 70px;
    }
}
@media (max-width: 1656px) { 
    .contact-name-auto {
        max-width: 100px;
    }
}
@media (max-width: 1348px) { 
    .contact-name-auto {
        max-width: 400px;
    }
}
@media (max-width: 926px) { 
    .contact-name-auto {
        max-width: 250px;
    }
}
@media (max-width: 499px) { 
    .contact-name-auto {
        max-width: 200px;
    }
}
@media (max-width: 400px) { 
    .contact-name-auto {
        max-width: 100px;
    }
}
@media (max-width: 400px) { 
    .contact-name-auto {
        max-width: 100px;
    }
}
@media (min-width: 1350px) and (max-width: 1500px) {
    .contact-name-auto {
        max-width: 70px;
    }
}
@media (max-width: 1064px) {
    .custom-align {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 1064px) { 
    .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar .name {
        width: 70%;
    }
}
@media (max-width: 950px) { 
    .toggle-switch {
        border-radius: 10px;
    }
    .toggle-switch label {
        border-radius: 10px;
        flex: 1;
    }
}
.dropdown-menu .dropdown-menu-right .show {
    transform: translate3d(-190px, 31px, 0px) !important;
}
.badge {
    align-self: center;
}
</style>
<div x-data="initialMessageData" class="p-0 custom-center col-lg-12">
{{-- @if ($contact) --}}
<div class="container-fluid" x-data="{
    myAssignedUnreadMessagesCount:null,
    myUnassignedUnreadMessagesCount:null,
    showUnreadContactsOnly:false,
    usersUnreadMessagesCounts:{}
    }">
    <div class="">
        <div class="card lw-whatsapp-chat-block-container container-fluid">
            @if (!getVendorSettings('current_phone_number_number'))
            <div class="card-header">
            <div class="text-danger">
                {{  __tr('Phone number does not configured yet.') }}
            </div>
            </div>
            @endif
            <div id="lwWhatsAppChatWindow"
                class="card-body lw-whatsapp-chat-window p-1" x-init="$watch('messagePaginatePage', function(value) {window.messagePaginatePage = value;});$watch('contactsPaginatePage', function(value) {window.contactsPaginatePage = value; });" 
                :data-paginate-page="messagePaginatePage" :data-unread-only="showUnreadContactsOnly" :data-search-value="search" :data-contact-uid="contact?._uid">
                
                <div class="justify-self-center w-100 text-center">
                    <div class="toggle-switch mb-2" 
                        x-data="{ tab: 'all', showUnreadContactsOnly: false }"
                        {{-- x-init="$watch('showUnreadContactsOnly', value => {
                            window.showUnreadContactsOnly = value;
                            _.defer(() => window.searchContacts());
                        })" --}}
                        >
                        <!-- All -->
                        <input type="radio" id="tabAll" name="tabToggle" class="tab-toggle" value="all" x-model="tab">
                            <label for="tabAll"
                                :class="{ 'active': tab === 'all' }"
                               @click="if(tab !== 'all') { tab = 'all'; window.showUnreadContactsOnly = false; switchTab($el, '{{ route('vendor.contacts.data.read') }}', '',false); }">
                                All
                                <span x-cloak x-show="allContactsCount > 0" x-text="'(' + allContactsCount + ')'"></span>
                                {{-- <span x-cloak x-show="unreadMessagesCount"
                                    class="badge bg-light-gray text-primary rounded-pill ml-1"
                                    x-text="unreadMessagesCount"></span> --}}
                                    <span x-cloak x-show="unreadMessagesCount"
                                    class="badge bg-white text-primary rounded-pill ml-2"
                                    x-text="unreadMessagesCount"></span>
                            </label>

                        <!-- Mine -->
                        <input type="radio" id="tabMine" name="tabToggle" class="tab-toggle" :checked="tab === 'mine'">
                        <label for="tabMine"
                            :class="{ 'active': tab === 'mine' }"
                            @click="tab = 'mine'; window.showUnreadContactsOnly = false; switchTab($el, '{{ route('vendor.contacts.data.read', ['assigned' => 'to-me']) }}', 'to-me',false)">
                            Mine
                            <span x-cloak x-show="myContactsCount > 0" x-text="'(' + myContactsCount + ')'"></span>
                            {{-- <span x-cloak x-show="myAssignedUnreadMessagesCount"
                                class="badge bg-light-gray text-primary rounded-pill ml-1"
                                x-text="myAssignedUnreadMessagesCount"></span> --}}
                                <span x-cloak x-show="myAssignedUnreadMessagesCount"
                                class="badge bg-white text-primary rounded-pill ml-2"
                                x-text="myAssignedUnreadMessagesCount"></span>
                        </label>

                        <!-- Unassigned -->
                        <input type="radio" id="tabUnassigned" name="tabToggle" class="tab-toggle" :checked="tab === 'unassigned'">
                        <label for="tabUnassigned"
                            :class="{ 'active': tab === 'unassigned' }"
                            @click=" tab = 'unassigned'; window.showUnreadContactsOnly = false; switchTab($el, '{{ route('vendor.contacts.data.read', ['assigned' => 'unassigned']) }}', 'unassigned',false)">
                            Unassigned
                            <span x-cloak x-show="unassignedContactsCount > 0"  x-text="'(' + unassignedContactsCount + ')'"></span>
                            {{-- <span x-cloak x-show="myUnassignedUnreadMessagesCount"
                                class="badge bg-light-gray text-primary rounded-pill ml-1"
                                x-text="myUnassignedUnreadMessagesCount"></span> --}}
                                <span x-cloak x-show="myUnassignedUnreadMessagesCount"
                                class="badge bg-white text-primary rounded-pill ml-2"
                                x-text="myUnassignedUnreadMessagesCount"></span>
                        </label>

                        <!-- Unread -->
                        <input type="radio" id="tabUnread" name="tabToggle" class="tab-toggle" :checked="tab === 'unread'">
                        <label for="tabUnread"
                            :class="{ 'active': tab === 'unread' }"
                            @click=" if(tab !== 'unread') { 
                                tab = 'unread';
                                contacts = {},
                                window.showUnreadContactsOnly = true;
                                window.currentAssigned = '';
                                const labelElement = document.querySelector('[name=\'selected_label\'][value=\'\']');
                                if (labelElement) labelElement.checked = true;
                                switchTab($el, '{{ route('vendor.contacts.data.read', ['unread_only' => true]) }}', '', true);
                                {{-- _.defer(() => window.searchContacts && window.searchContacts()) --}}
                                {{-- window.searchContacts(); --}}
                            }"
                                >
                            Unread
                            {{-- <span x-cloak x-show="unreadMessagesCount"
                                class="badge bg-light-gray text-primary rounded-pill ml-1"
                                x-text="unreadMessagesCount"></span> --}}
                                <span x-cloak x-show="unreadMessagesCount"
                                class="badge bg-white text-primary rounded-pill ml-2"
                                x-text="unreadMessagesCount"></span>
                        </label>

                        <!-- Assign (Dropdown) -->
                        <input type="radio" id="tabAssign" name="tabToggle" class="tab-toggle" :checked="tab === 'assign'">
                        <label for="tabAssign"
                            :class="{ 'active': tab === 'assign' }"
                            x-data="{
                                defaultTitle: 'Assign',
                                selectedAssignee: 'Assign',
                                updateAssignee(name) {
                                    this.selectedAssignee = name;
                                }
                            }"
                            x-init="$watch('tab', value => { if(value !== 'assign') selectedAssignee = defaultTitle })"
                            >

                            <!-- Dropdown toggle inside -->
                            <div class="dropdown">
                                <div class="dropdown-toggle d-flex align-items-center"
                                    id="assignDropdownMenu"
                                    data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false"
                                    title="Assign Contact">
                                    <span x-text="selectedAssignee"></span>
                                </div>

                                <!-- Dropdown menu -->
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="assignDropdownMenu">
                                    <!-- Dynamic users -->
                                    @foreach ($vendorMessagingUsers as $vendorMessagingUser)
                                        @if($vendorMessagingUser->_uid != getUserUID())
                                            <a href="javascript:void(0)"
                                            @click="
                                                tab = 'assign';
                                                window.showUnreadContactsOnly = false;
                                                switchTab($el, '{{ route('vendor.contacts.data.read', ['assigned' => $vendorMessagingUser->_id]) }}', '{{ $vendorMessagingUser->_id }}',false);
                                                updateAssignee('{{ $vendorMessagingUser->first_name . ' ' . $vendorMessagingUser->last_name }}')"
                                                class="dropdown-item {{ ($assigned ?? null) == $vendorMessagingUser->_id ? 'active' : '' }}" >
                                                {{ $vendorMessagingUser->first_name . ' ' . $vendorMessagingUser->last_name }}
                                                <span x-cloak x-show="usersContactsCounts['{{ $vendorMessagingUser->_uid }}'] > 0"
                                                    x-text="'(' + usersContactsCounts['{{ $vendorMessagingUser->_uid }}'] + ')'"></span>
                                                {{-- <span x-cloak 
                                                    x-show="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']" 
                                                    class="badge bg-yellow text-dark badge-white rounded-pill ml-1" 
                                                    x-text="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']"></span> --}}
                                                    <span x-cloak x-show="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']"
                                                    class="badge bg-light-gray text-primary rounded-pill ml-1"
                                                    x-text="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']"></span>
                                            </a>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </label>

                        <!-- Labels (Dropdown) -->
                        @if (isset($allLabels) && count($allLabels) > 0)
                        <input type="radio" id="tabLabels" name="tabToggle" class="tab-toggle" :checked="tab === 'labels'">
                        <label for="tabLabels"
                            :class="{ 'active': tab === 'labels' }"
                            @click=" window.currentAssigned = ''; "
                             x-data="{
                                    selectedLabelTitle: '{{ request('selected_label') ? $allLabels->firstWhere('_id', request('selected_label'))['title'] ?? 'All Labels' : 'All Labels' }}',
                                    updateLabelTitle(title) {
                                        this.selectedLabelTitle = title;
                                    }
                                }">

                            <!-- Dropdown toggle inside -->
                            <div class="dropdown"  x-data="{ open: false }"
                                x-on:show.bs.dropdown="open = true"
                                x-on:hide.bs.dropdown="open = false">
                                <div class="dropdown-toggle d-flex align-items-center"
                                    type="button" id="labelDropdownMenu" data-toggle="dropdown" :class="{ 'active': open }" aria-haspopup="true"
                                    aria-expanded="false" title="Filter by Label">
                                    <span x-text="selectedLabelTitle"></span>
                                </div>

                                <!-- Dropdown menu -->
                                <div class="dropdown-menu dropdown-menu-right p-2" aria-labelledby="labelDropdownMenu">
                                    <!-- Clear Filter -->
                                    <label class="dropdown-item">
                                        <input class="lw-search-labels mr-2 ml-1" type="radio" name="selected_label"
                                            value="" autocomplete="off"
                                            @click="
                                                contacts = {},
                                                updateLabelTitle('All Labels');
                                                _.defer(() => window.searchContacts && window.searchContacts())
                                            "
                                            {{ request('selected_label') ? '' : 'checked' }}> 
                                        Clear
                                    </label>

                                    <!-- Dynamic Labels -->
                                    @foreach ($allLabels as $label)
                                            <label class="dropdown-item"
                                            style="background-color: {{ $label['bg_color'] }};
                                                        color: {{ $label['text_color'] }};"
                                                        >
                                                <input class="lw-search-labels mr-2" type="radio" name="selected_label"
                                                    value="{{ $label['_id'] }}" autocomplete="off"
                                                    @click="
                                                        contacts = {},
                                                        tab = 'labels';
                                                        window.showUnreadContactsOnly = false;
                                                        updateLabelTitle('{{ $label['title'] }}');
                                                        _.defer(() => window.searchContacts && window.searchContacts())
                                                    "
                                                    {{ request('selected_label') == $label['_id'] ? 'checked' : '' }}>
                                                {{ $label['title'] }}
                                            </label>
                                        @endforeach
                                </div>
                            </div>
                        </label>
                        @endif

                        <span class="toggle-slider"></span>
                    </div>             
                </div>
                <div class="row" x-cloak x-data="{isContactListOpened:false,isContactCrmBlockOpened:false}" style="margin-bottom: -6px;">
                    <div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 lw-contact-list-block p-2 bx-shadow bg-white br-10 chat-container" x-show="isContactListOpened">
                        {{-- <h1>{{  __tr('WhatsApp Chat') }}</h1> --}}
                        @php
                            use App\Yantrana\Components\Vendor\Repositories\VendorRepository;
                            $vendorUid = getVendorUid();
                            $basicSettings = [
                                'title' => null,
                                'id' => null,
                                'uid' => null,
                                'slug' => null,
                                'logo_image' => null,
                                'logo_url' => null,
                            ];

                            if ($vendorUid) {
                                $vendorRepository = app(VendorRepository::class);
                                $vendorData = $vendorRepository->fetchIt($vendorUid);

                                if (!__isEmpty($vendorData)) {
                                    $basicSettings = [
                                        'title' => $vendorData->title,
                                        'id' => $vendorData->_id,
                                        'uid' => $vendorData->_uid,
                                        'slug' => $vendorData->slug,
                                        'logo_image' => $vendorData->logo_image,
                                        'logo_url' => $vendorData->logo_url,
                                    ];
                                }
                            }
                            $selectedPhoneNumberId = getVendorSettings('current_phone_number_id');
                            $whatsappNumbers = getVendorSettings('whatsapp_phone_numbers') ?? [];
                            $selectedPhoneNumber = null;
                            foreach ($whatsappNumbers as $number) {
                                if ($number['id'] == $selectedPhoneNumberId) {
                                    $selectedPhoneNumber = $number['display_phone_number'];
                                    break;
                                }
                            }
                            if (!$selectedPhoneNumber) {
                                $selectedPhoneNumber = getVendorSettings('current_phone_number_number') ?? '';
                            }
                            $rawPhone = $selectedPhoneNumber ?? '';
                            $isHashed = Str::startsWith($rawPhone, 'eyJ') && strlen($rawPhone) > 40;
                            @endphp
                            <div class="d-flex align-items-center justify-content-between bg-white p-2 rounded">
                                <div class="d-flex align-items-center">
                                    <img src="{{ asset('imgs/chat-img.png') }}" alt="Avatar" class="profile-pic me-1">

                                    <div class="d-flex flex-column">
                                    <div class="d-flex align-items-center gap-1">
                                        @if (!empty($basicSettings['title']))
                                            <strong class="me-1">{{ $basicSettings['title'] }}</strong>
                                        @endif
                                    </div>
                                    @if (!empty($rawPhone) && !$isHashed)
                                    <small class="text-muted">{{ $rawPhone }}</small>
                                    @endif
                                </div>
                            </div>
                            <span class="btn btn-light btn-sm float-right d-md-none" @click.prevent="isContactListOpened = false"><i class="mdi mdi-arrow-left-thick fs-15 "></i></span> 
                            {{-- <div class="dots-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="#6c757d" viewBox="0 0 16 16">
                                <path d="M3 9a1 1 0 100-2 1 1 0 000 2zm5 0a1 1 0 100-2 1 1 0 000 2zm5 0a1 1 0 100-2 1 1 0 000 2z"/>
                                </svg>
                            </div> --}}
                            </div>
                        <hr class="my-2">
                        {{-- <h2 class="lw-contacts-header"> <span class="btn btn-light btn-sm float-right d-md-none" @click.prevent="isContactListOpened = false"><i class="mdi mdi-arrow-left-thick fs-15 "></i></span>  <abbr class="float-right" title="{{  __tr('Once you get the response by the contact, they will be come in the chat list of this chat window, alternatively you can click on chat button of the contact list to chat with the contact.') }}">?</abbr></h2>
                        <div class="form-group m-0"><label for="lwShowUnreadOnlyContacts"><input data-lw-plugin="lwSwitchery" data-color="orange" data-size="small" x-model="showUnreadContactsOnly" x-init="$watch('showUnreadContactsOnly', function(value) {
                            window.showUnreadContactsOnly = value;
                            _.defer(function() {
                                window.searchContacts();
                            });
                        })" class="custom-checkbox" id="lwShowUnreadOnlyContacts" type="checkbox" name="unread_only_contacts" id=""> <span x-show="!showUnreadContactsOnly">{{  __tr('Show all') }}</span><span x-show="showUnreadContactsOnly">{{  __tr('Show unread only') }}</span></label></div> --}}
                        <nav>
                            <div class="form-group position-relative pl-2 pr-2">
                                <span class="position-absolute" style="left: 20px; top: 50%; transform: translateY(-50%);">
                                    <i class="mdi mdi-magnify fs-15 "></i>
                                </span>
                                <input 
                                    x-model="search"
                                    x-on:keyup.debounce.500ms="function(value) {
                                        window.searchValue = this.search;
                                        contacts = {};
                                         _.defer(() => window.searchContacts && window.searchContacts())
                                    }"
                                    x-ref="searchField"
                                    placeholder="{{ __tr('Type to Search') }}"
                                    type="search"
                                    class="form-control pl-4"
                                    style="padding-left: 35px !important; padding:1.3rem .75rem;"
                                >
                            </div>
                            {{-- <div class="nav nav-tabs justify-content-around mt-2" id="nav-tab" role="tablist">
                            @if (isVendorAdmin(getVendorId()) or !hasVendorAccess('assigned_chats_only'))
                              <a class="nav-link d-flex flex-column align-items-center {{ ($assigned ?? null) ? '' : 'active' }}" 
                              href="javascript:void(0)"
                               onclick="switchTab(this, '{{ route('vendor.contacts.data.read') }}')"
                                id="lw-all-contacts-tab"  
                              data-target="#lwAllContactsTab" type="button" role="tab" aria-controls="lwAllContactsTab" 
                              aria-selected="true">
                                <span x-cloak x-show="unreadMessagesCount" 
                                    class="badge bg-yellow text-dark badge-white rounded-pill ml-5 position-absolute fw-57" 
                                    x-text="unreadMessagesCount">
                                </span>
                              <div>
                                <i class="mdi mdi-account-group-outline fs-15 "></i>
                              </div>
                              <div class="text-center mt-1">
                                    {{ __tr('All') }}
                                </div>
                            </a>
                            @endif
                              <a href="javascript:void(0)"  onclick="switchTab(this, '{{ route('vendor.contacts.data.read', ['assigned' => 'to-me']) }}')" class="nav-link d-flex flex-column align-items-center {{ (($assigned ?? null) == 'to-me') ? 'active' : '' }}" id="lw-to-me-tab" 
                                >
                                    <span x-cloak x-show="myAssignedUnreadMessagesCount" 
                                        class="badge bg-yellow text-dark badge-white rounded-pill ml-5 position-absolute fw-57" x-text="myAssignedUnreadMessagesCount">
                                    </span>
                                    <div>
                                        <i class="mdi mdi-account-check fs-15 "></i>
                                    </div>
                                    <div class="text-center mt-1">
                                        {{  __tr('Mine') }} 
                                    </div>
                                </a>
                              @if (isVendorAdmin(getVendorId()) or !hasVendorAccess('assigned_chats_only'))
                                <a href="javascript:void(0)"
                                onclick="switchTab(this, '{{ route('vendor.contacts.data.read', ['assigned' => 'unassigned']) }}')" 
                                 class="nav-link d-flex flex-column align-items-center {{ ($assigned ?? null) == 'unassigned' ? 'active' : '' }}" id="lw-unassigned-tab"  
                                    data-target="#lwUnassignedTab" type="button" role="tab" aria-controls="lwUnassignedTab" aria-selected="false">
                                    <span x-cloak x-show="myUnassignedUnreadMessagesCount" class="badge bg-yellow text-dark badge-white rounded-pill ml-5 position-absolute fw-57"
                                        x-text="myUnassignedUnreadMessagesCount">
                                    </span>
                                    <div>
                                        <i class="mdi mdi-account-off fs-15 "></i>
                                    </div>
                                    <div class="text-center mt-1">
                                        {{  __tr('Unassigned') }}
                                    </div>
                                </a>
                                @if(!__isEmpty($vendorMessagingUsers))
                                    <li class="nav-item dropdown">
                                        <a class="nav-link d-flex flex-column align-items-center {{ (is_numeric(request()->get('assigned'))) ? 'active' : '' }}" 
                                        data-toggle="dropdown" 
                                        href="javascript:void(0)" 
                                        role="button" 
                                        aria-expanded="false">
                                        <div>
                                            <i class="mdi mdi-account-multiple fs-15 "></i>
                                        </div>
                                        <div class="text-center mt-1">
                                            <span class="mt-1">{{ __tr('Others') }}</span>
                                        </div>
                                        </a>

                                        <div class="dropdown-menu dropdown-menu-right">
                                            <div class=" dropdown-header noti-title">
                                                <h6 class="text-overflow m-0">{{ __tr('Others ') }}</h6>
                                            </div>
                                            <div class="dropdown-divider"></div>
                                            @foreach ($vendorMessagingUsers as $vendorMessagingUser)
                                                @if($vendorMessagingUser->_uid != getUserUID())
                                                    @if (($assigned ?? null) == $vendorMessagingUser->_id)
                                                        @continue
                                                    @endif
                                                    <a  onclick="switchTab(this, '{{ route('vendor.contacts.data.read', ['assigned' => $vendorMessagingUser->_id]) }}')" 
                                                    href="javascript:void(0)"
                                                    class="dropdown-item {{ ($assigned ?? null) == $vendorMessagingUser->_id ? 'active' : '' }}"
                                                    id="lw-unassigned-tab"
                                                    data-target="#lwUnassignedTab" 
                                                    type="button" 
                                                    role="tab" 
                                                    aria-controls="lwUnassignedTab" 
                                                    aria-selected="false">
                                                        {{ $vendorMessagingUser->first_name . ' ' . $vendorMessagingUser->last_name }}
                                                        <span x-cloak 
                                                            x-show="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']" 
                                                            class="badge bg-yellow text-dark badge-white rounded-pill ml-1" 
                                                            x-text="usersUnreadMessagesCounts['{{ $vendorMessagingUser->_uid }}']">
                                                        </span>
                                                    </a>
                                                @endif
                                            @endforeach
                                        </div>
                                    </li>
                                @endif
                            @endif
                            </div> --}}
                          </nav>

                          {{-- <div class="row d-flex align-items-center justify-content-between m-2">
                            @if (isset($allLabels) && count($allLabels) > 0)
                                <div class="dropdown" x-data="{
                                    selectedLabelTitle: '{{ request('selected_label') ? $allLabels->firstWhere('_id', request('selected_label'))['title'] ?? 'All' : 'All' }}',
                                    updateLabelTitle(title) {
                                        this.selectedLabelTitle = title;
                                    }
                                }">
                                    <div class="btn-sm secondary dropdown-toggle d-flex align-items-center w-100 bg-white pt-1 pb-1"
                                        type="button" id="labelDropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false" title="Filter by Label" style="border: 1px solid #d8d8d8;">
                                        <span x-text="selectedLabelTitle"></span>
                                    </div>

                                    <div class="dropdown-menu p-2" aria-labelledby="labelDropdownMenu"
                                        style="min-width: 200px;">
                                        <!-- Clear Filter -->
                                        <label class="dropdown-item">
                                            <input class="lw-search-labels mr-2 ml-1" type="radio" name="selected_label"
                                                value="" autocomplete="off"
                                                @click="
                                                    updateLabelTitle('All');
                                                    _.defer(() => window.searchContacts && window.searchContacts())
                                                "
                                                {{ request('selected_label') ? '' : 'checked' }}>
                                            Clear
                                        </label>

                                        <!-- Dynamic Labels -->
                                        @foreach ($allLabels as $label)
                                            <label class="dropdown-item"
                                            style="background-color: {{ $label['bg_color'] }};
                                                        color: {{ $label['text_color'] }};"
                                                        >
                                                <input class="lw-search-labels mr-2" type="radio" name="selected_label"
                                                    value="{{ $label['_id'] }}" autocomplete="off"
                                                    @click="
                                                        updateLabelTitle('{{ $label['title'] }}');
                                                        _.defer(() => window.searchContacts && window.searchContacts())
                                                    "
                                                    {{ request('selected_label') == $label['_id'] ? 'checked' : '' }}>
                                                {{ $label['title'] }}
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endif 
                            <!-- Unread Toggle -->
                            <div class="d-flex gap-2">
                            <label class="d-flex align-items-center mb-0">
                                <input data-lw-plugin="lwSwitchery" data-color="orange" data-size="small"
                                    x-model="showUnreadContactsOnly" x-init="$watch('showUnreadContactsOnly', value => {
                                        window.showUnreadContactsOnly = value;
                                        _.defer(() => window.searchContacts());
                                    })" class="custom-checkbox mr-2"
                                    id="lwShowUnreadOnlyContacts" type="checkbox" name="unread_only_contacts">
                                <span class="ml-2" x-show="!showUnreadContactsOnly">{{ __tr('Show all') }}</span>
                                <span class="ml-2" x-show="showUnreadContactsOnly">{{ __tr('Show unread only') }}</span>
                            </label>
                            <span class="btn btn-light btn-sm float-right d-md-none" @click.prevent="isContactListOpened = false"><i class="mdi mdi-arrow-left-thick fs-15 "></i></span>
                            <abbr class="float-right" title="{{  __tr('Once you get the response by the contact, they will be come in the chat list of this chat window, alternatively you can click on chat button of the contact list to chat with the contact.') }}">?</abbr>
                            </div>
                        </div>--}}
                    <div class="tab-content lw-contact-list-header" id="contacts-wrapper" x-cloak>
                            @include('whatsapp.chat_module.contacts_list')
                            <template x-if="!Object.keys(contacts).length">
                                <div class="text-center p-5 text-muted">
                                    {{ __tr('No contacts found.') }}
                                </div>
                            </template>
                    </div>
                    </div>
                    {{-- <div class="page col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-0 br-10" style="height: calc(80vh - 90px);" :class="(!contact) ? 'lw-disabled-block-content' : ''" class="chat-container" x-cloak> --}}
                    <div class="page col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-0 br-10 chat-container" style="height: calc(80vh - 90px);" x-cloak>
                        {{-- <h2>{{ __tr('Chat') }}</h2> --}}
                        <template x-if="!contact">
                            <div class="d-flex justify-content-center align-items-center text-muted bg-white br-10" style="height: calc(92vh - 90px);">
                                <div>
                                    <div class="text-center">
                                        <img src="{{ asset('imgs/help/no-chat.png') }}" alt="Select a chat" style="height: 220px;">
                                        <h4 class="mt-3">{{ __tr('No Data') }}</h4>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template x-if="contact">
                        <div class="marvel-device nexus5 bx-shadow br-10">
                            <div class="screen">
                                <div class="screen-container">
                                    <div class="chat shadow-sm" id="lwChatWindowBox">
                                        {{-- <template x-if="contact"> --}}
                                            <div>
                                                <template x-if="contact">
                                                <div class="user-bar">
                                                    <div class="back d-md-none" @click.prevent="isContactListOpened = true">
                                                        <i class="mdi mdi-account-group fs-15 "></i>
                                                    </div>
                                                    <div class="avatar d-none d-md-inline bg-success text-white text-center align-content-center fw-bold text-uppercase" style="background-color: #a2a2a2 !important;">
                                                        <span x-text="contact.name_initials"></span>
                                                    </div>
                                                    <div class="name">
                                                        <span ><div class="contact-name-auto name-auto text-capitalize"><span :title="contact.full_name" x-text="contact.full_name"></span></div>
                                                        <small> - <a target="_blank" x-bind:href="'https://api.whatsapp.com/send?phone=' + contact.wa_id" x-text="contact.wa_id"></a></small></span>
                                                        <template x-if="isDirectMessageDeliveryWindowOpened">
                                                            <span class="status text-success" x-text="directMessageDeliveryWindowOpenedTillMessage"></span>
                                                        </template>
                                                            <template x-if="!isDirectMessageDeliveryWindowOpened">
                                                            <span class="status text-danger" 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, they needs to reply back to start conversion.') }}</span>
                                                             </template>
                                                    </div>
                                                    
                                                    <template x-if="contact">
                                                    <div class="actions more lw-user-new-actions custom-align fs-5" x-data="{isAiChatBotEnabled:!contact.disable_ai_bot}" x-cloak>
                                                        {{-- @if(isAiBotAvailable())
                                                        <a :title="isAiChatBotEnabled ? '{{ __tr('Enable AI Bot') }}' : '{{ __tr('Disable AI Bot') }}'" x-bind:href="__Utils.apiURL('{{ route('vendor.contact.write.toggle_ai_bot', [ 'contactIdOrUid']) }}', {'contactIdOrUid': contact._uid})" :class="isAiChatBotEnabled ? 'text-yellow' : 'text-primary'" class="lw-whatsapp-bar-icon-btn mr-3 lw-ajax-link-action" data-method="post">
                                                           <i class="mdi mdi-robot fs-15 "></i>
                                                        </a>
                                                        @endif --}}
                                                        <a href="#" class="lw-whatsapp-bar-icon-btn text-custome-1" data-toggle="dropdown" aria-expanded="false">
                                                            <i class="mdi mdi-dots-vertical"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                        <div class=" dropdown-header noti-title">
                                                            <h6 class="text-overflow m-0">{{ __tr('Actions ') }}</h6>
                                                        </div>
                                                        <div class="dropdown-divider"></div>
                                                        <a x-bind:href="contact ? __Utils.apiURL('{{ route('vendor.template_message.contact.view', [ 'contactIdOrUid']) }}', {'contactIdOrUid': contact._uid}) : '#'" 
                                                            class="dropdown-item">
                                                            <i class="mdi mdi-send fs-15  mr-1"></i> 
                                                            {{ __tr('Send Template Message') }}
                                                        </a>
                                                        <a x-cloak
                                                            :class="whatsappMessageLogs.length <= 0 ? 'disabled' : ''"
                                                            data-method="post" data-confirm="#lwClearChatHistoryWarning" x-bind:href="contact ?__Utils.apiURL('{{ route('vendor.chat_message.delete.process', [ 'contactIdOrUid']) }}', {'contactIdOrUid': contact._uid}) : '#'"
                                                            class="dropdown-item text-danger lw-ajax-link-action"><i class="mdi mdi-eraser fs-15  mr-1"></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 class="text-warning">{{  __tr('Only chat history will be deleted permanently, it won\'t delete campaign messages.') }}</p>
                                                            </script>

                                                            <template x-if='contact && (_.isEmpty(contact?.wa_blocked_at))'>
                                                                <span :title="isDirectMessageDeliveryWindowOpened == false ? 'Blocking is not allowed as no response has been received within the past 24 hours' : ''">
                                                                <a x-cloak
                                                                    :class="{ 'disabled': isDirectMessageDeliveryWindowOpened == false }"
                                                                    :style="isDirectMessageDeliveryWindowOpened == false ? {
                                                                        'pointer-events': 'none',
                                                                        'color': 'gray',
                                                                        'cursor': 'not-allowed',
                                                                        'text-decoration': 'none'
                                                                        } : {}"
                                                                    :href="isDirectMessageDeliveryWindowOpened == false ? 'javascript:void(0)' : __Utils.apiURL('{{ route('vendor.contact.write.block', ['contactIdOrUid']) }}', { contactIdOrUid: contact._uid })"
                                                                    @click="if (isDirectMessageDeliveryWindowOpened == false) { $event.preventDefault(); console.log('blocked'); return; }"
                                                                    data-method="post"
                                                                    data-confirm="#lwBlockContact-template"
                                                                    title="{{ __tr('Block') }}"
                                                                    data-callback="appFuncs.modelSuccessCallback"
                                                                    class="dropdown-item lw-ajax-link-action-via-confirm"
                                                                    aria-disabled="true">
                                                                    <i class="fa fa-ban"></i> {{ __tr('Block') }}
                                                                </a>
                                                                </span>
                                                            </template>

                                                            <template x-if='contact && (!_.isEmpty(contact?.wa_blocked_at))'>
                                                                <a x-cloak 
                                                                :href="__Utils.apiURL('{{ route('vendor.contact.write.unblock', [ 'contactIdOrUid']) }}', {'contactIdOrUid': contact._uid})"
                                                                @click="if (isDirectMessageDeliveryWindowOpened == false) { $event.preventDefault(); console.log('blocked'); return; }"
                                                                data-method="post" class="dropdown-item lw-ajax-link-action-via-confirm" data-confirm="#lwUnblockContact-template" title="{{ __tr('Unblock') }}" data-callback="appFuncs.modelSuccessCallback" aria-disabled="true"><i class="fa fa-ban"></i> {{ __tr('Unblock') }}</a>
                                                            </template>
                                                        </div>
                                                        <span class="lw-whatsapp-bar-icon-btn d-md-none" @click.prevent="isContactCrmBlockOpened = true"><i class="mdi mdi-account-tie-hat fs-15 "></i></span>
                                                    </div>
                                                    </template>
                                                </div>
                                                </template>
                                                <div class="conversation">
                                                    <div class="conversation-container" id="lwConversionChatContainer">
                                                            <div class="w-100" id="lwEndOfChats">&shy;</div>
                                                            <template x-for="whatsappMessageLogItem in whatsappMessageLogs">
                                                                <div class="lw-chat-message-item"
                                                                    :id="whatsappMessageLogItem._uid">
                                                                    <template
                                                                        x-if="whatsappMessageLogItem.is_incoming_message && !whatsappMessageLogItem.is_system_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 d-flex text-muted justify-content-end"><i
                                                                                        class="mdi mdi-link-variant fs-15 "></i> {{
                                                                                    __tr('Replied to') }}</a>
                                                                            </template> --}}
                                                                            <template x-if="whatsappMessageLogItem.replied_to_whatsapp_message_logs__uid">
                                                                                <div class="quoted-message"  @click.prevent="lwScrollTo('#'+whatsappMessageLogItem.replied_to_whatsapp_message_logs__uid)">
                                                                                    <div x-html="getRepliedMessageContent(whatsappMessageLogItem.replied_to_whatsapp_message_logs__uid)"></div>
                                                                                </div>
                                                                            </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 && !whatsappMessageLogItem.__data?.interaction_message_data"><span class="lw-plain-message-text" x-html="whatsappMessageLogItem.message"></span></div>
                                                                            <template
                                                                                x-if="(whatsappMessageLogItem.whatsapp_message_error)">
                                                                                <div class="p-1 mt-2">
                                                                                    <small class="text-danger"> <i
                                                                                            class="mdi mdi-information-slab-circle fs-15  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>
                                                                        </div>
                                                                    </template>
                                                                    <template
                                                                        x-if="!whatsappMessageLogItem.is_incoming_message && !whatsappMessageLogItem.is_system_message">
                                                                        <div class="message sent" x-init="$nextTick(() => {
                                                                            let tooltips = [].slice.call($el.querySelectorAll('[data-toggle=\'tooltip\']'));
                                                                            tooltips.forEach(el => new bootstrap.Tooltip(el));
                                                                        })">
                                                                            {{-- <template
                                                                                x-if="whatsappMessageLogItem.__data?.options?.bot_reply">
                                                                                <span class="badge d-flex text-muted justify-content-end"
                                                                                    :title="whatsappMessageLogItem.__data?.options?.ai_bot_reply ? '{{ __tr('AI Bot Reply') }}' : '{{ __tr('Bot Reply') }}'">
                                                                                    <template x-if="whatsappMessageLogItem.__data?.options?.ai_bot_reply">
                                                                                        <span class="mr-1 text-warning">AI</span>
                                                                                    </template>
                                                                                    <i class="mdi mdi-robot fs-15  text-muted"></i>
                                                                                </span>
                                                                            </template>
                                                                            <template
                                                                                x-if="whatsappMessageLogItem.campaigns__id">
                                                                                <span class="badge d-flex justify-content-end" title="{{ __tr('Campaign Message') }}">
                                                                                    <i class="mdi mdi-bullhorn fs-15  text-info"></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 && !whatsappMessageLogItem.__data?.interaction_message_data">
                                                                                <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.whatsapp_message_error)">
                                                                                <div class="p-1 mt-2">
                                                                                    <small class="text-danger"> <i
                                                                                            class="mdi mdi-information-slab-circle fs-15  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 title="{{ __tr('Failed') }}"
                                                                                            class="fas fa-exclamation-circle text-danger"></i>
                                                                                    </template>
                                                                                    <template
                                                                                        x-if="(whatsappMessageLogItem.status == 'accepted')">
                                                                                        <i title="{{ __tr('Accepted') }}"
                                                                                            class="far fa-clock text-muted"></i>
                                                                                    </template>
                                                                                </span>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.__data?.options?.bot_reply">
                                                                                    <span class="justify-content-end"
                                                                                        :title="whatsappMessageLogItem.__data?.options?.ai_bot_reply ? '{{ __tr('AI Bot Reply') }}' : '{{ __tr('Bot Reply') }}'">
                                                                                        <template x-if="whatsappMessageLogItem.__data?.options?.ai_bot_reply">
                                                                                            <span class="mr-1 text-warning">AI</span>
                                                                                        </template>
                                                                                        <i class="mdi mdi-robot fs-15 text-info"></i>
                                                                                    </span>
                                                                                </template>
                                                                                <template
                                                                                    x-if="whatsappMessageLogItem.campaigns__id">
                                                                                    <span class="justify-content-end" title="{{ __tr('Campaign Message') }}">
                                                                                        <i class="mdi mdi-bullhorn fs-15  text-info"></i>
                                                                                    </span>
                                                                                </template>
                                                                                <span class="rounded-circle text-white d-inline-flex align-items-center justify-content-center"
                                                                                    style="cursor: pointer; width: 20px; height: 20px;font-size:10px;background-color: #a2a2a2 !important;"
                                                                                    data-toggle="tooltip"
                                                                                    data-placement="top"
                                                                                    :title="'Message By: ' + (whatsappMessageLogItem.entry_by_user_name || 'System')">
                                                                                    <template x-if="whatsappMessageLogItem.entry_by_user_name">
                                                                                        <span x-text="whatsappMessageLogItem.entry_by_user_name
                                                                                                        .split(' ')
                                                                                                        .map(w => w.charAt(0))
                                                                                                        .join('')
                                                                                                        .substring(0,2)
                                                                                                        .toUpperCase()"></span>
                                                                                    </template>
                                                                                    <template x-if="!whatsappMessageLogItem.entry_by_user_name">
                                                                                        <span>S</span>
                                                                                    </template>
                                                                                </span>
                                                                                {{-- <span class="text-muted" title="Message By: " 
                                                                                    style="cursor: pointer;" 
                                                                                    data-toggle="tooltip"
                                                                                    data-placement="top"
                                                                                    data-original-title="'Message By: ' + (whatsappMessageLogItem.entry_by_user_name || 'System')"
                                                                                    :title="'Message By: ' + (whatsappMessageLogItem.entry_by_user_name || 'System')">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.55 12L14 8.45l1.425-1.4l2.125 2.125l4.25-4.25l1.4 1.425zM9 12q-1.65 0-2.825-1.175T5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12m-8 8v-2.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2V20z"/></svg>
                                                                                </span> --}}
                                                                            </span>
                                                                        </div>
                                                                    </template>
                                                                    <template x-if="whatsappMessageLogItem.is_system_message">
                                                                        <div>
                                                                            <div class="text-center align-content-center lw-system-message-container">
                                                                                <span class="badge rounded-pill text-bg-secondary text-capitalize" x-text="whatsappMessageLogItem.formatted_updated_time"></span>
                                                                            </div>
                                                                            
                                                                            <div class="alert text-center align-content-center lw-chat-history-container">
                                                                                <div class="lw-chat-history-message" x-text="whatsappMessageLogItem.message"></div>
                                                                            </div>
                                                                        </div>
                                                                    </template>
                                                                </div>
                                                            </template>
                                                            <div class="w-100 px-4" id="lwEndOfChats">&shy; <button x-cloak x-show="messagePaginatePage" class="btn btn-sm btn-block btn-secondary" @click="loadEarlierMessages" ><i class="mdi mdi-download fs-15 "></i> {{  __tr('Load earlier messages') }}</button></div>
                                                    </div>
                                                    
                                                    <template x-if="contact && (!_.isEmpty(contact?.wa_blocked_at))">                                            
                                                        <div class="alert alert-light text-center align-content-center">
                                                            <strong class="text-danger" title="{{ __tr('Unblock') }}">{{  __tr('This contact is blocked, ') }}
                                                                <a data-method="post" 
                                                                class="lw-ajax-link-action-via-confirm"
                                                                :href="__Utils.apiURL('{{ route('vendor.contact.write.unblock', [ 'contactIdOrUid']) }}', {'contactIdOrUid': contact._uid})"
                                                                @click="if (isDirectMessageDeliveryWindowOpened == false) { $event.preventDefault(); console.log('blocked'); return; }"
                                                                data-confirm="#lwUnblockContact-template" title="{{ __tr('Click here to unblock.') }}" data-callback-params="{{ json_encode(['datatableId' => '#lwContactList']) }}" data-callback="appFuncs.modelSuccessCallback"><i class="fa fa-ban"></i> {{  __tr('Click here to unblock.') }}</a></strong>                                   
                                                        </div>
                                                    </template>

                                                    <span x-show="contact && (_.isEmpty(contact?.wa_blocked_at))">
                                                    
                                                    <x-lw.form data-event-stream-update="true" 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" x-bind: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" placeholder="{{ __tr(' Type a message') }}" autocomplete="off" autofocus 
                                                        x-ref="messageInput"
                                                        x-init="$nextTick(() => {
                                                            if ($refs.messageInput && ! $($refs.messageInput).data('emojioneArea')) {
                                                                $($refs.messageInput).emojioneArea({
                                                                    useInternalCDN: true,
                                                                    pickerPosition: 'top',
                                                                    searchPlaceholder: '{{ __tr('Search') }}',
                                                                    buttonTitle: '{{ __tr('Use the TAB key to insert emoji faster') }}',
                                                                    events: {
                                                                        'emojibtn.click': function(editor, event) {
                                                                            this.hidePicker();
                                                                        },
                                                                        keyUp: function(editor, event) {
                                                                            if (event && event.which == 13 && !event.shiftKey && $.trim(this.getText())) {
                                                                                $('.lw-input-emoji').val(this.getText());
                                                                                $('#whatsAppMessengerForm').submit();
                                                                                this.hidePicker();
                                                                                appFuncs.resetForm();
                                                                            }
                                                                        }
                                                                    }
                                                                });
                                                            }
                                                        })"
                                                        
                                                        ></textarea>
                                                            <div class="photo dropup">
                                                                <!-- Default dropup button -->
                                                                <a href="#" class="lw-whatsapp-bar-icon-btn" data-toggle="dropdown" aria-expanded="false">
                                                                    <i class=" mdi mdi-paperclip text-muted"></i>
                                                                </a>
                                                                <div class="dropdown-menu dropdown-menu-right">

                                                                <!-- Quick Bot Reply -->
                                                                <a title="{{ __tr('Quick Bot Reply') }}"
                                                                    class="lw-ajax-link-action dropdown-item" data-response-template="#lwQuickReplyContentBody" x-bind:href="contact ? __Utils.apiURL('{{ route('vendor.bot_reply.read.all.active.bots', ['contactIdOrUid']) }}', { 'contactIdOrUid': contact._uid}): '#'"  data-toggle="modal" data-target="#lwQuickReply"><i class="fa fa-bolt text-muted"></i> {{ __tr('Quick Bot Reply') }}
                                                                </a>
                                                                <!-- /Quick Bot Reply -->
                                                                
                                                                    <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="mdi mdi-file-document fs-15  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="mdi mdi-image-area fs-15  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="mdi mdi-video fs-15  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="mdi mdi-headphones fs-15  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>
                                                    </span>
                                                </div>
                                            </div>
                                        {{-- </template> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        </template>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3 col-xl-3 mb-0 lw-contact-crm-block bx-shadow bg-white br-10 p-0 chat-container"
                        :class="(!contact) ? 'lw-disabled-block-content' : ''"
                        x-show="isContactCrmBlockOpened"
                        style="overflow: auto; min-width: 260px;">
                        {{-- <div class="col-12 text-right">
                            <span class="btn btn-light btn-sm float-right d-md-none mt-3" @click.prevent="isContactCrmBlockOpened = false"><i class="mdi mdi-arrow-left-thick fs-15 "></i></span>
                        </div> --}}
                        <template x-if="contact">
                            <div class="bg-white">
                                <template x-if="contact">
                                    <div class="lw-contact-profile">
                                        <div class="lw-profile-header">
                                            <div class="lw-profile-avatar text-uppercase">
                                                <span x-text="contact.name_initials"></span>
                                            </div>
                                            
                                            <div class="lw-profile-info">
                                                <div class="justify-content-between align-items-start">
                                                    <!-- Name on the left -->
                                                    <div class="lw-profile-name fw-black contact-auto contact-name-auto text-capitalize" :title="contact.full_name || contact.wa_id" x-text="contact.full_name || contact.wa_id">
                                                    </div>
                                                </div>
                                                <!-- Phone Number below -->
                                                <div class="d-flex">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="20" width="17" viewBox="0 0 16 16" class="w-4 h-4 mr-2">
                                                        <path fill="currentColor" d="m7.86 9.473-2.18 2.18q-.36-.32-.7-.66a19 19 0 0 1-1.86-2.18c-.546-.76-.986-1.52-1.306-2.273q-.48-1.14-.48-2.18c0-.454.08-.887.24-1.287.16-.407.413-.78.767-1.113.426-.42.893-.627 1.386-.627.187 0 .374.04.54.12.174.08.327.2.447.373l1.547 2.18c.12.167.206.32.266.467.06.14.094.28.094.407q0 .242-.14.473a2.3 2.3 0 0 1-.374.473l-.506.527a.36.36 0 0 0-.107.267c0 .053.007.1.02.153.02.053.04.093.053.133q.18.332.62.854c.3.346.62.7.967 1.053.24.233.473.46.707.66" opacity="0.35"></path>
                                                        <path fill="currentColor" d="M14.647 12.22a1.7 1.7 0 0 1-.167.727 2.8 2.8 0 0 1-.453.68c-.327.36-.687.62-1.093.787-.007 0-.014.006-.02.006-.394.16-.82.247-1.28.247q-1.022.002-2.174-.487a11.7 11.7 0 0 1-2.293-1.32c-.26-.193-.52-.386-.767-.593l2.18-2.18q.282.21.494.32.05.021.12.053a.5.5 0 0 0 .166.027c.114 0 .2-.04.274-.113l.506-.5q.25-.252.48-.374a.9.9 0 0 1 .474-.14q.188-.002.406.087.219.09.467.26l2.207 1.567q.258.179.366.426c.067.167.107.334.107.52"></path>
                                                    </svg>
                                                    <div class="lw-profile-phone" :title="contact.wa_id" x-text="contact.wa_id"></div>
                                                </div>
                                                <div class="d-flex">
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="20" width="17" viewBox="0 0 24 24" class="w-4 h-4 mr-2">
                                                        <path fill="currentColor" d="M17 20.5H7c-3 0-5-1.5-5-5v-7c0-3.5 2-5 5-5h10c3 0 5 1.5 5 5v7c0 3.5-2 5-5 5" opacity="0.35"></path>
                                                        <path fill="currentColor" d="M12 12.87c-.84 0-1.69-.26-2.34-.79l-3.13-2.5a.748.748 0 0 1 .93-1.17l3.13 2.5c.76.61 2.05.61 2.81 0l3.13-2.5c.32-.26.8-.21 1.05.12.26.32.21.8-.12 1.05l-3.13 2.5c-.64.53-1.49.79-2.33.79"></path>
                                                    </svg>
                                                    <div class="lw-profile-phone contact-auto contact-name-auto" :title="contact.email || '{{ __tr('Not provided') }}'" x-text="contact.email || '{{ __tr('Not provided') }}'"></div>
                                                </div>
                                            </div>
                                            <div class="ml-auto d-flex flex-col">
                                                @if (hasVendorAccess('manage_contacts'))
                                                    <a data-pre-callback="appFuncs.clearContainer" title="{{  __tr('Edit') }}" 
                                                        class="lw-btn btn btn-sm btn-default lw-ajax-link-action" data-response-template="#lwEditContactBody"
                                                        style="padding: .1rem .3rem;"
                                                        x-bind:href="contact ? __Utils.apiURL(
                                                        '{{ route('vendor.contact.read.update.data', [ 'contactIdOrUid']) }}', 
                                                        {'contactIdOrUid': contact._uid}) : '#'"  data-toggle="modal" data-target="#lwEditContact">
                                                        <i class="mdi mdi-account-edit-outline fs-15 "></i>
                                                    </a>
                                                @endif
                                                <span class="btn btn-light btn-sm float-right d-md-none" @click.prevent="isContactCrmBlockOpened = false"><i class="mdi mdi-arrow-left-thick"></i></span>
                                                 
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <div class="col-12">
                            <label class="mt-2">Assign</label>
                            <x-lw.form id="lwAssignSystemUserForm" 
                                :action="route('vendor.chat.assign_user.process')" 
                                data-callback="onUpdateContactDetails">
                                <input type="hidden" name="contactIdOrUid" :value="contact?._uid" />

                                <select data-lw-plugin="lwSelectize"
                                    type="selectize"
                                    id="lwCurrentlyAssignedUserUid" 
                                    name="assigned_users_uid"
                                    class="form-control selectize mr-3" 
                                    x-model="currentlyAssignedUserUid"
                                    x-init="$nextTick(() => {
                                        $('#lwCurrentlyAssignedUserUid')[0].selectize.on('change', function() {
                                            $refs.assignFormBtn.click();
                                        });
                                    })"
                                    >
                                <option value="">{{ __tr('Unassigned') }}</option>
                                <option value="no_one">{{ __tr('Unassigned') }}</option>
                                @foreach ($vendorMessagingUsers as $vendorMessagingUser)
                                    <option value="{{ $vendorMessagingUser->_uid }}"
                                        @if ($currentlyAssignedUserUid == $vendorMessagingUser->_uid) selected @endif>
                                        {{ $vendorMessagingUser->first_name . ' ' . $vendorMessagingUser->last_name }}
                                        @if ($vendorMessagingUser->_uid == getUserUID())
                                            ({{ __tr('You') }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                                
                                <button type="submit" class="d-none" x-ref="assignFormBtn"></button>
                            </x-lw.form>
                            
                            <x-lw.form id="lwAssignContactGroupsForm" 
                                :action="route('vendor.contacts.selected.write.assign_groups')" 
                                data-callback="onUpdateContactDetails">
                                <input type="hidden" name="selected_contacts[]" :value="contact?._uid" />
                                
                                <x-lw.input-field type="selectize"
                                    data-lw-plugin="lwSelectize" id="lwContactGroupsField" data-form-group-class="m-0"
                                    :label="__tr('Groups Assign')" name="selected_groups[]" multiple
                                    x-init="$nextTick(() => {
                                        const selectize = $('#lwContactGroupsField')[0].selectize;
                                        selectize.on('change', function() {
                                            // Force update hidden inputs with current value
                                            const values = selectize.getValue(); // array of selected IDs
                                            $('#lwContactGroupsField').val(values);
                                            
                                            $refs.groupFormBtn.click();
                                        });
                                    })">
                                    <x-slot name="selectOptions">
                                        <option value="">{{ __tr('Select Groups') }}</option>
                                        @foreach ($vendorContactGroups as $vendorContactGroup)
                                            <option value="{{ $vendorContactGroup['_id'] }}">
                                                {{ $vendorContactGroup['title'] }}
                                                {{ $vendorContactGroup['status'] == 5 ? __tr('(Archived)') : '' }}</option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>
                                
                                <button type="submit" class="d-none" x-ref="groupFormBtn"></button>
                            </x-lw.form>

                            <x-lw.form id="lwAssignContactLabelsForm"
                                    :action="route('vendor.chat.assign_labels.process')"
                                    data-callback="onUpdateContactDetails">

                                <input type="hidden" name="contactUid" x-bind:value="contact._uid" />
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="mb-0">{{ __tr('Labels & Tags') }}</label>
                                
                             <a data-pre-callback="appFuncs.clearContainer" title="{{ __tr('Manage Labels') }}"
                                        class="lw-btn btn-sm btn-default lw-ajax-link-action shadow-0"
                                        data-response-template="#lwManageContactLabelsBody" style="padding: .1rem .3rem;"
                                        x-bind:href="contact ?__Utils.apiURL(
                                            '{{ route('vendor.chat.contact_labels.read', ['contactUid']) }}', {
                                                'contactUid': contact._uid
                                            }): '#'"
                                        data-toggle="modal" data-target="#lwManageContactLabels">
                                        <i class="mdi mdi-label-variant-outline fs-15"></i>
                                    </a>
                                    </div>
                                <x-lw.input-field type="selectize"
                                                data-lw-plugin="lwSelectize"
                                                id="lwAssignLabelsField"
                                                data-form-group-class="mt-2"
                                                name="contact_labels[]"
                                                multiple
                                                x-bind:data-selected="assignedLabelIds"
                                                x-init="$nextTick(() => {
                                                    const selectize = $('#lwAssignLabelsField')[0].selectize;
                                                    selectize.on('change', function() {
                                                        // Force update hidden inputs with current value
                                                        const values = selectize.getValue(); // array of selected IDs
                                                        $('#lwAssignLabelsField').val(values);
                                                        $refs.labelFormBtn.click();
                                                    });
                                                })">
                                    <x-slot name="selectOptions">
                                        <option value="">{{ __tr('Select Labels') }}</option>
                                        @foreach ($allLabels as $label)
                                            <option value="{{ $label['_id'] }}"
                                                    style="color: {{ $label['text_color'] }}; background-color: {{ $label['bg_color'] }};">
                                                {{ $label['title'] }}
                                            </option>
                                        @endforeach
                                    </x-slot>
                                </x-lw.input-field>

                                <!-- Hidden auto-submit trigger -->
                                <button class="d-none" type="submit" x-ref="labelFormBtn"></button>
                            </x-lw.form>

                            <x-lw.form id="lwBotsForm" 
                                :action="route('vendor.chat.assign_user.process')" 
                                data-callback="onUpdateContactDetails">
                            <input type="hidden" name="contactIdOrUid" :value="contact?._uid" />
                            <div class="my-2">
                                @if(isAiBotAvailable())                                                        
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" x-model="isAiChatBotEnabled" id="lwEnableAiBot" value="1"
                                        @change="$refs.botsFormBtn.click()">
                                        <label class="form-check-label" for="lwEnableAiBot">{{ __tr('Enable AI Bot') }}</label>
                                        <input type="hidden" name="enable_ai_bot" :value="isAiChatBotEnabled ? '1' : ''">
                                    </div>
                                @endif

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" x-model="isReplyBotEnable" id="lwEnableReplyBot" value="1"
                                    @change="$refs.botsFormBtn.click()">
                                    <label class="form-check-label" for="lwEnableReplyBot">{{ __tr('Enable Reply Bot') }}</label>
                                    <input type="hidden" name="enable_reply_bot" :value="isReplyBotEnable ? '1' : ''">
                                </div>
                            </div>
                               <button type="submit" class="d-none" x-ref="botsFormBtn"></button>
                            </x-lw.form>

                            <template x-if="contact">
                                <div class="my-2" x-data="{
                                    contactNotes: contact.__data?.contact_notes || '',
                                    init() {
                                        // Watch for contact changes
                                        this.$watch('contact', (newContact) => {
                                            this.contactNotes = newContact?.__data?.contact_notes || '';
                                        });
                                    },
                                    saveNotes() {
                                        if (!contact['__data']) contact['__data'] = {};
                                        contact['__data']['contact_notes'] = this.contactNotes;

                                        fetch(`{{ route('vendor.chat.update_notes.process') }}`, {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                            },
                                            body: JSON.stringify({
                                                contactIdOrUid: contact._uid,
                                                contact_notes: this.contactNotes
                                            })
                                        })
                                        .then(res => res.json())
                                        .then(data => {
                                            if (data.reaction === 1) {
                                                showSuccessMessage(data.data.message);
                                            } else {
                                                showErrorMessage(data.data.message || '{{ __tr("Something went wrong") }}');
                                            }
                                        })
                                        .catch(err => {
                                            console.error(err);
                                            showErrorMessage('{{ __tr("Something went wrong") }}');
                                        });
                                    }
                                }" x-init="init()">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <label class="mb-0"> {{ __tr('Notes') }}</label>
                                    </div>
                                    <div>
                                        <x-lw.form id="lwNotesForm" :action="route('vendor.chat.update_notes.process')">
                                            <input type="hidden" name="contactIdOrUid" :value="contact?._uid" />

                                            <div class="lw-form-group my-2">
                                                <textarea name="contact_notes" class="form-control lw-notes-textarea" 
                                                    x-model="contactNotes" 
                                                    rows="2" 
                                                    placeholder="{{ __tr('Add notes about this contact...') }}"
                                                    @input.debounce.1000ms="saveNotes()"></textarea>
                                            </div>
                                        </x-lw.form>
                                    </div>
                                </div>
                            </template>


                        <label class="my-2">{{  __tr('Other Contact Information') }}</label>
                         <!-- Language -->
                        {{-- <div
                            class="lw-detail-item d-flex justify-content-between align-items-start py-2 border-bottom border-bottom-c">
                            <div class="lw-detail-label d-flex align-items-center">
                                <strong class="fw-400">{{ __tr('Language') }}</strong>
                            </div>
                            <div class="lw-detail-value text-right text-muted ml-3"
                                x-text="contact.language_code || '{{ __tr('Not set') }}'"></div>
                        </div> --}}

                        <!-- Last Seen -->
                        {{-- <div class="other-info-item lw-detail-item d-flex justify-content-between align-items-start py-2 border-bottom border-bottom-c">
                            <span class="fw-medium"> {{ __tr('Last Seen') }}</span>
                            <span class="value text-muted ml-3"x-text="contact.last_message?.formatted_message_ago_time || '{{ __tr('-') }}'"></span>
                        </div> --}}
                        <div class="" x-show="contact.custom_field_values && contact.custom_field_values.length > 0">
                            <template x-for="field in contact.custom_field_values" :key="field._id">
                                <div class="other-info-item lw-detail-item d-flex justify-content-between align-items-start py-2 border-bottom border-bottom-c">
                                    <span class="fw-medium" x-text="field.field_label"></span>
                                    <span class="value text-muted ml-3" x-text="field.field_value || '{{ __tr('-') }}'"></span>
                                </div>
                            </template>
                        </div>
                        </div>
                            <!-- Team Assignment Section -->
                        {{-- <div class="col-12 p-0">
                        <div class="lw-section lw-assign-member-section">
                            <div class="card-header d-flex py-1 justify-content-between border border-tb bg-1">
                                <span class="fw-semibold align-content-center fw-black">
                                    {{ __tr('Team Assignment') }}
                                </span>
                                <div class="lw-btn btn-sm lw-ajax-link-action">
                                    <i class="mdi mdi-account-group-outline fs-15  text-primary-custom" aria-hidden="true"></i>
                                </div>
                            </div>

                            <div class="lw-section-content pt-0">
                                <x-lw.form id="lwAssignSystemUserForm" :action="route('vendor.chat.assign_user.process')">
                                    <input type="hidden" name="contactIdOrUid" :value="contact?._uid" />
                                        <div class="my-3">
                                            @if(isAiBotAvailable())                                                        
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" x-model="isAiChatBotEnabled" id="lwEnableAiBot" value="1">
                                                    <label class="form-check-label" for="lwEnableAiBot">{{ __tr('Enable AI Bot') }}</label>
                                                    <input type="hidden" name="enable_ai_bot" :value="isAiChatBotEnabled ? '1' : ''">
                                                </div>
                                            @endif

                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" x-model="isReplyBotEnable" id="lwEnableReplyBot" value="1">
                                                <label class="form-check-label" for="lwEnableReplyBot">{{ __tr('Enable Reply Bot') }}</label>
                                                <input type="hidden" name="enable_reply_bot" :value="isReplyBotEnable ? '1' : ''">
                                            </div>
                                        </div>
                                    <div class="align-items-center justify-content-between w-100">
                                        <select data-lw-plugin="lwSelectize" type="selectize"
                                            id="lwCurrentlyAssignedUserUid" name="assigned_users_uid"
                                            class="form-control selectize mr-3" x-model="currentlyAssignedUserUid">
                                            <option value="">{{ __tr('Unassigned') }}</option>
                                            <option value="no_one">{{ __tr('Unassigned') }}</option>
                                            @foreach ($vendorMessagingUsers as $vendorMessagingUser)
                                                <option value="{{ $vendorMessagingUser->_uid }}"
                                                    @if ($currentlyAssignedUserUid == $vendorMessagingUser->_uid) selected @endif>
                                                    {{ $vendorMessagingUser->first_name . ' ' . $vendorMessagingUser->last_name }}
                                                    @if ($vendorMessagingUser->_uid == getUserUID())
                                                        ({{ __tr('You') }})
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>

                                        <div class="lw-form-actions pt-2 text-right">
                                            <button type="submit" class="btn btn-sm primary">
                                                <i class="mdi mdi-check fs-15 mr-1"></i>{{ __tr('Save') }}
                                            </button>
                                        </div>
                                    </div>
                                </x-lw.form>
                            </div>
                        </div>
                        </div> --}}
                            <!-- Labels Section -->
                        {{-- <template x-if="contact">
                            <div class="lw-section lw-labels-section">
                                <div class="card-header d-flex py-1 justify-content-between border border-tb bg-1">
                                    <span class="fw-semibold align-content-center fw-black">
                                        {{ __tr('Labels/Tags') }}
                                    </span>
                                    <a data-pre-callback="appFuncs.clearContainer" title="{{ __tr('Manage Labels') }}"
                                        class="lw-btn btn-sm btn-default lw-ajax-link-action"
                                        data-response-template="#lwManageContactLabelsBody"
                                        x-bind:href="contact ?__Utils.apiURL(
                                            '{{ route('vendor.chat.contact_labels.read', ['contactUid']) }}', {
                                                'contactUid': contact._uid
                                            }): '#'"
                                        data-toggle="modal" data-target="#lwManageContactLabels">
                                        <i class="mdi mdi-cog fs-15"></i>
                                    </a>
                                </div>

                                <div class="lw-section-content">
                                    <x-lw.form data-callback="onUpdateContactDetails" id="lwAssignContactLabelsForm"
                                        :action="route('vendor.chat.assign_labels.process')">
                                        <input type="hidden" name="contactUid" x-bind:value="contact._uid" />
                                        <div x-show="labelsElement"></div>

                                        <div class="align-items-center gap-2">
                                            <select class="form-control mr-2" id="lwAssignLabelsField"
                                                x-bind:data-selected="assignedLabelIds" name="contact_labels[]" multiple>
                                                <option value="">{{ __tr('Select Labels') }}</option>
                                                @foreach ($allLabels as $label)
                                                    <option value="{{ $label['_id'] }}">{{ $label['title'] }}</option>
                                                @endforeach
                                            </select>

                                            <div class="lw-form-actions mt-2 text-right">
                                                <button type="submit" class="btn btn-sm primary">
                                                    <i class="mdi mdi-check fs-15 mr-1"></i>{{ __tr('Update') }}
                                                </button>
                                            </div>
                                        </div>
                                    </x-lw.form>
                                </div>

                            </div>
                        </template> --}}
                            {{-- check if stack has content --}}
                            @if ($__env->yieldPushContent('chatRightSidebarAdditionalLinksAndButtons'))
                            <fieldset class="col-12 p-2">
                                <legend>{{  __tr('Links and buttons') }}</legend>
                                @stack('chatRightSidebarAdditionalLinksAndButtons')
                            </fieldset>
                            @endif
                            {{-- stack the items in right sidebar at bottom --}}
                            @stack('chatRightSidebarFooter')
                        </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" x-bind: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="