@if (env('APP_PROJECT') == 'Mora')
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-{{ $readonly != '1' ? '8' : '12' }} px-0">
        <div class="card custom-card">
            <div class="main-content-app pt-0">
                <div class="main-content-body main-content-body-chat">
@else
  <div class="d-lg-flex">
    <!-- start chat conversation section -->
    <div class="w-100 overflow-hidden position-relative">
@endif
                    <div class="p-3 p-lg-4 border-bottom user-chat-topbar">
                        <div class="row align-items-center">
                            <div @if($readonly != '1') class="col-sm-12 col-lg-6" @endif>
                                <div class="d-flex align-items-center">
                                    <div class="d-block d-lg-none me-2 ms-0">
                                        <a href="javascript: void(0);"
                                            class="user-chat-remove text-muted font-size-16 p-2"><i
                                                class="ri-arrow-left-s-line"></i></a>
                                    </div>
                                    <div class="me-3 ms-0">
                                        <img src="{{ $conversation->contact->image_url }}"
                                            class="rounded-circle avatar-xs" alt="">
                                    </div>
                                    <div class="flex-grow-1 overflow-hidden">
                                        <h5 class="font-size-16 mb-0 text-truncate">
                                            <a href="javascript: void(0);" class="text-reset user-profile-show">
                                                {{ $conversation->contact->name }}
                                                @if ($readonly == '1' && $canViewContactInfo)
                                                    <br>{{ $conversation->contact->mobile }}
                                                @endif
                                            </a>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                            @if ($readonly != '1')
                            <div class="col-sm-12 col-lg-6">
                                <ul class="list-inline user-chat-nav text-end mb-0">    
                                    <li class="list-inline-item">@lang('user.assign_to'):</li>
                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button class="btn dropdown-toggle bg-light rounded-pill assigned-to p-1" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
                                                <img width="32" height="32" class="rounded-circle" src="{{ $conversation->assignedTo->image_url ?? '' }}" /> {{ $conversation->assignedTo->name ?? '' }}
                                            </button>
                                            <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-md" style="min-width: 360px;">
                                                <div class="search-box p-2">
                                                    <input type="text" id="seach_agents_input" class="form-control bg-light border-0" placeholder="@lang('user.search').." onkeyup="searchAgents()">
                                                </div>
                                                <div class="row border-bottom px-3">
                                                    <div class="col pb-2 border-primary border-bottom assign-to" rel="all">{{ __('user.all') }} <span class="badge text-bg-secondary">{{ count($agents ?? []) + count($teams ?? []) }}</span></div>
                                                    <div class="col pb-2 border-primary assign-to" rel="agents">{{ __('user.agents') }} <span class="badge text-bg-secondary">{{ count($agents ?? []) }}</span></div>
                                                    <div class="col pb-2 border-primary assign-to" rel="teams">{{ __('user.teams') }} <span class="badge text-bg-secondary">{{ count($teams ?? []) }}</span></div>
                                                </div>
                                                <div class="agents_and_teams">
                                                    @foreach ($agents as $agent)
                                                        <div class="agent_or_team agent-row p-2 {{ $conversation->user_id && $conversation->user_id == $agent->id ? 'active' : '' }}" 
                                                            rel="{{ $agent->id }}" data-type="agent">
                                                            <img width="32" height="32" class="rounded-circle" src="{{ $agent->image_url }}" /> {{ $agent->name }}
                                                        </div>
                                                    @endforeach
                                                    @foreach ($teams as $team)
                                                        <div class="agent_or_team team-row p-2 {{ $conversation->team_id && $conversation->team_id == $team->id ? 'active' : '' }}" 
                                                            rel="{{ $team->id }}" data-type="team">
                                                            <img width="32" height="32" class="rounded-circle" src="{{ $team->image_url }}" /> {{ $team->name }} 
                                                            <span class="badge text-bg-primary float-end">@lang('user.team')</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-inline-item d-none d-lg-inline-block me-2 ms-0">
                                        <button type="button" class="btn nav-btn mark_as_closed" title="@lang('user.close_chat')">
                                            <i class="ri-close-circle-line ri-2x"></i>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            @endif
                        </div>
                    </div>
                    <!-- end chat user head -->

                    <!-- start chat conversation -->
                    <div class="chat-conversation main-chat-list p-lg-4 pb-lg-0" id="chat-conversation">
                        <ul class="list-unstyled mb-0 main-chat-body" id="main-chat-body">
                            @php
                                $readStatusClasses = [
                                    '1' => 'ri-check-fill',
                                    '2' => 'ri-check-double-fill',
                                    '4' => 'ri-check-double-fill text-success',
                                    '6' => 'ri-alert-line text-danger',
                                ];
                            @endphp
                            @foreach ($messagesGrouped as $date => $messages)
                            @php
                                $diff = \Carbon\Carbon::parse($date)->diff(now())->days;
                                if ($diff < 1) { $label = __('user.today'); }
                                elseif ($diff < 2) { $label = __('user.yesterday'); }
                                elseif ($diff < 7) { $label = \Carbon\Carbon::parse($date)->translatedFormat('l'); }
                                else { $label = $date; }
                            @endphp
                            <li>
                                <div class="chat-day-title main-chat-time">
                                    <span class="title {{ $label == __('user.today') ? 'today_label' : '' }}">{{ $label }}</span>
                                </div>
                            </li>
                            @foreach ($messages as $message)
                                @if ($message->direction == 0)
                                <li id="message-{{ $message->id }}">
                                    <div class="chat-day-title main-chat-time">
                                        <span class="title text-dark bg-white">{{ $message->message . ' ' . __('user.on') . ' ' . $message->datetime }}</span>
                                    </div>
                                </li>
                                @else
                                @php
                                    $label = $message->direction == 2 ? __('user.from_whatsapp') : __('user.sent_by_user');
                                    if ($message->direction == 3) {
                                        $label = __('user.private_message_added_by') . ' ' . ($message->user->name ?? '') . ' ' . __('user.at') . ' ' . $message->datetime->format('h:i A') . '. ' . __('user.only_visible_for_agents');
                                    }
                                @endphp
                                <li id="message-{{ $message->id }}" class="media {{ $message->direction != 2 ? 'flex-row-reverse right' : '' }}">
                                    <div class="conversation-list">
                                        <div class="user-chat-content {{ $message->direction == 3 ? 'private-message' : '' }}">
                                            <div class="ctext-wrap">
                                                <div class="ctext-wrap-content main-msg-wrapper">
                                                    @if (!empty($message->parent_id) && $message->parent)
                                                        <div class="bg-white text-black p-2 rounded">
                                                            @if (!empty($message->parent->template_id))
                                                                @include('web/partials/template-message', ['template' => $message->parent->template, 'message' => $message->parent])
                                                            @elseif (!empty($message->parent->flow_node_id) && !empty($message->parent->flow_node_data))
                                                                @include('web/partials/flow-message', ['message' => $message->parent])
                                                            @else
                                                                @include('web/partials/message', ['message' => $message->parent])
                                                            @endif
                                                        </div>
                                                    @endif

                                                    @if (!empty($message->template_id))
                                                        @include('web/partials/template-message', ['template' => $message->template, 'message' => $message])
                                                    @elseif (!empty($message->flow_node_id) && !empty($message->flow_node_data))
                                                        @include('web/partials/flow-message', ['message' => $message])
                                                    @else
                                                        @include('web/partials/message', ['message' => $message])
                                                    @endif
                                                    @php 
                                                        $readClass = '';
                                                        if ($message->direction == '1' && isset($readStatusClasses[$message->status])) {
                                                            $readClass = $readStatusClasses[$message->status];
                                                        }
                                                    @endphp
                                                    @if (env('APP_PROJECT') != 'Mora')
                                                        <p class="chat-time mb-0"><i class="{{ $readClass }} ri-xl align-middle"></i>
                                                            <span class="align-middle">{{ $message->datetime->format('h:i A') }}</span>
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        @if (env('APP_PROJECT') == 'Mora')
                                          </div>
                                            <div class="chat-time mb-0"><i class="{{ $readClass }} ri-xl align-middle"></i>
                                                <span class="align-middle">{{ $message->datetime->format('h:i A') }}</span>
                                            </div>
                                        @endif
                                        <div class="conversation-name">{{ $label }}</div>
                                    </div>
                                    @if (env('APP_PROJECT') != 'Mora')
                                      </div>
                                    @endif
                                    @if (!isset($isAdmin) && !$isExpired && $readonly != '1')
                                        <a class="btn btn-light {{ $message->direction != 2 ? 'float-end' : '' }} me-2 message-reply" rel="{{ $message->id }}"><i class="ri-reply-line font-size-16"></i></a>
                                    @endif
                                </li>
                                @endif
                            @endforeach
                            @endforeach
                        </ul>
                        
                        @if ($isExpired && $readonly != '1')
                            <div class="alert alert-info clearfix conversation-expiration-alert">
                                <h5>@lang('user.customer_service_window_expired')</h5>
                                <p>
                                    @lang('user.customer_service_window_expired_detailed_message')
                                    <a href="https://www.whatsapp.com/legal/business-policy/?lang={{ config('app.locale') }}" target="_blank">@lang('user.learn_more')</a>
                                </p>
                            </div>
                        @endif

                        @if (!isset($isAdmin) && !$isExpired && $readonly != '1')
                            <div class="row alert alert-secondary m-0 mb-1" id="chat-reply-preview-container" style="display: none">
                                <div class="col-lg-1 position-absolute top-0 end-0">
                                    <button type="button" class="btn m-0 p-0 float-end chat-reply-cancel" title="">
                                        <i class="ri-close-circle-line ri-2x"></i>
                                    </button>
                                </div>
                                <div class="col-lg-11" id="chat-reply-preview"></div>
                            </div>
                        @endif
                    </div>
                    <!-- end chat conversation end -->

                    <!-- start chat input section -->
                    <div class="chat-input-section p-3 p-lg-4 border-top mb-0">
                    @if ($readonly == '1' && !isset($isAdmin) && (empty($business->expire_date) || !\Carbon\Carbon::parse($business->expire_date)->isPast()))
                        <a href="{{ route('web.conversations.new', $conversation->contact_id) }}" class="btn btn-light w-100">@lang('user.go_to_chat')</a>
                    @elseif (!isset($isAdmin))
                        <div class="row g-0" id="chat-input-fields">
                            <div class="col-auto d-flex align-items-end">
                                <ul class="list-inline user-chat-nav text-end mb-0">    
                                    <li class="list-inline-item">
                                        <div class="dropdown">
                                            <button type="button"
                                                class="btn btn-secondary font-size-16 btn-lg me-2 open-quick-replies"
                                                data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
                                                <i class="ri-flashlight-line"></i>
                                            </button>
                                            <div class="dropdown-menu p-0 dropdown-menu-start dropdown-menu-md" style="width: 500px;max-width: 100vw;">
                                                <div class="row m-0">
                                                    <div class="col-md-1 border-end p-1">
                                                        <button type="button" class="btn py-0 px-1 show-quick-replies" title="{{ __('user.quickReplies') }}"
                                                            @if($isExpired) style="display: none" @endif>
                                                            <i class="ri-message-2-line font-size-24"></i>
                                                        </button>
                                                        <button type="button" class="btn py-0 px-1 show-templates" title="{{ __('user.templates') }}">
                                                            <i class="ri-message-3-line font-size-24"></i>
                                                        </button>
                                                    </div>
                                                    <div class="col-md-11">
                                                        <div class="search-box p-2">
                                                            <input type="text" id="seach-quick-replies-input" class="form-control bg-light border-0" placeholder="@lang('user.search').." onkeyup="searchQuickReplies()">
                                                        </div>
                                                        <div class="quick-replies">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col @if ($isExpired) text-center @endif">
                                @if ($isExpired)
                                    <a href="javascript:void(0)" class="btn btn-warning get-templates">@lang('user.click_to_send_template')</a>
                                @endif
                                <div class="conversation-attachments clearfix mb-2" style="display: none;">

                                </div>
                                <textarea class="form-control bg-light border-light mt-1 @if($isExpired) hidden @endif" placeholder="@lang('user.enter_message')..."
                                    rows="1" id="chat-message" oninput="auto_grow(this)"></textarea>
                            </div>
                            <div class="col-auto d-flex align-items-end">
                                <div class="chat-input-links ms-md-2 me-md-0">
                                    <ul class="list-inline mb-0">
                                        <li class="list-inline-item">
                                            <button type="button" title="@lang('user.send_private_message')"
                                                class="btn text-decoration-none font-size-16 btn-lg waves-effect show-private-message">
                                                <i class="ri-sticky-note-line"></i>
                                            </button>
                                        </li>
                                        <li class="list-inline-item">
                                            <label for="attachment" class="btn font-size-32 btn-lg waves-effect" id="attachment-label"
                                                @if($isExpired) style="display: none" @endif>
                                                <i class="{{ env('APP_PROJECT') == 'Mora' ? 'fe fe-paperclip' : 'ri-attachment-2' }}"></i>
                                            </label>
                                            <input type="file" id="attachment" style="display: none" multiple />
                                        </li>
                                        <li class="list-inline-item">
                                            <label for="voice-recorder" class="btn font-size-16 btn-lg waves-effect ps-1 pe-2" id="voice-recorder-btn"
                                                @if($isExpired) style="display: none" @endif>
                                                <i class="{{ env('APP_PROJECT') == 'Mora' ? 'fe fe-mic' : 'ri-mic-fill' }}"></i>
                                            </label>
                                        </li>
                                        <li class="list-inline-item">
                                            @if (env('APP_PROJECT') == 'Mora')
                                                <button type="button" id="send-chat-message"
                                                    class="text-primary btn"
                                                    style="font-size: 20px; @if($isExpired) display: none @endif">
                                                    <i class="far fa-paper-plane"></i>
                                                </button>
                                            @else
                                                <button type="button" id="send-chat-message"
                                                    class="btn btn-primary font-size-16 btn-lg chat-send waves-effect waves-light"
                                                    @if($isExpired) style="display: none" @endif>
                                                    <i class="ri-send-plane-2-fill"></i>
                                                </button>
                                            @endif
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="h-100 send-attachment-loader-container" style="display: none">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        </div>
                    </div>
                </div>
@if (env('APP_PROJECT') == 'Mora')
            </div>
        </div>
    </div>
@endif
    @if ($readonly != '1' && $canViewContactInfo)
        @if (env('APP_PROJECT') == 'Mora')
            <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-4 col-xl-6 px-2">
                <div class="card custom-card chat-account">
                    <div class="main-content-app d-block pt-0">
                        <div class="chat-user-details" id="chat-user-details">
                            <div class="card-body text-center">
                                <div class="user-lock text-center">
                                    <a href="javascript:void(0)"><img alt="avatar" class="rounded-4"
                                            src="{{ $conversation->contact->image_url }}"></a>
                                </div>
                                <a href="javascript:void(0)">
                                    <h5 class=" mb-1 mt-3 fs-13 main-content-label">{{ $conversation->contact->name }}</h5>
                                </a>
                            </div>
                            <div class="card-body">
                                <h6 class="mb-3 tx-semibold">Contact Details</h6>
                                <div class="d-flex">
                                    <div>
                                        <p class="contact-icon text-primary m-0"><i class="fe fe-phone"></i></p>
                                    </div>
                                    <div class="ms-3">
                                        <p class="tx-13 mb-0 tx-semibold">@lang('user.mobile')</p>
                                        <p class="fs-12 text-muted">{{ $conversation->contact->mobile }}</p>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div>
                                        <p class="contact-icon text-primary m-0"><i class="fe fe-mail"></i></p>
                                    </div>
                                    <div class="ms-3">
                                        <p class="tx-13 mb-0 tx-semibold">@lang('user.email')</p>
                                        <p class="fs-12 text-muted">{{ $conversation->contact->email }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <!-- start User profile detail sidebar -->
            <div class="user-profile-sidebar">
                <div class="px-3 px-lg-4 pt-3 pt-lg-4">
                    <div class="user-chat-nav text-end">
                        <button type="button" class="btn nav-btn" id="user-profile-hide">
                            <i class="ri-close-line"></i>
                        </button>
                    </div>
                </div>

                <div class="text-center p-4 border-bottom">
                    <div class="mb-4">
                        <img src="{{ $conversation->contact->image_url }}"
                            class="rounded-circle avatar-lg img-thumbnail" alt="">
                    </div>

                    <h5 class="font-size-16 mb-1 text-truncate">{{ $conversation->contact->name }}</h5>
                </div>
                <!-- End profile user -->

                <!-- Start user-profile-desc -->
                <div class="p-4 user-profile-desc" data-simplebar>
                    <div class="accordion" id="myprofile">
                        <div class="accordion-item card border mb-2">
                            <div class="accordion-header" id="about3">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#aboutprofile" aria-expanded="true" aria-controls="aboutprofile">
                                    <h5 class="font-size-14 m-0">
                                        <i class="ri-user-2-line me-2 ms-0 align-middle d-inline-block"></i> @lang('user.about')
                                    </h5>
                                </button>
                            </div>
                            <div id="aboutprofile" class="accordion-collapse collapse show" aria-labelledby="about3"
                                data-bs-parent="#myprofile">
                                <div class="accordion-body">
                                    <div>
                                        <p class="text-muted mb-1">@lang('user.name')</p>
                                        <h5 class="font-size-14">{{ $conversation->contact->name }}</h5>
                                    </div>

                                    <div class="mt-4">
                                        <p class="text-muted mb-1">@lang('user.email')</p>
                                        <h5 class="font-size-14">{{ $conversation->contact->email }}</h5>
                                    </div>

                                    <div class="mt-4">
                                        <p class="text-muted mb-1">@lang('user.mobile')</p>
                                        <h5 class="font-size-14">{{ $conversation->contact->mobile }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end profile-user-accordion -->
                    </div>
                    <!-- end user-profile-desc -->
                </div>
                <!-- end User profile detail sidebar -->
            </div>
        @endif
    @endif
</div>
@if ($readonly != '1')
    <div class="modal fade" id="templatesModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">@lang('user.templates')</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('user.close')</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="sendTemplateConfirmationModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header py-1">
                    <h4 class="modal-title">@lang('user.template')</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body py-0">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('user.cancel')</button>
                    <button type="button" class="btn btn-primary send-template-message" data-template-id="">@lang('user.post_message')</button>
                </div>
            </div>
        </div>
    </div>
@endif

<style>
    .cards-container {
        display: flex;
        overflow-x: auto;
        gap: 25px;
        padding: 20px 10px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    .cards-container .card {
        flex: 0 0 auto;
        width: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        min-height: 50px;
        overflow: hidden;
    }
    .user-chat-content {
        overflow-x: auto;
    }
</style>