<div class="chat-box">
    <div class="chat-box__shape">
        <img src="{{ getImage($activeTemplateTrue . 'images/chat-bg.png') }}" alt="">
    </div>
    <div class="chat-box__header position-relative">
        <span class="message-inbox-btn">
            <i class="las la-angle-double-left"></i>
        </span>
        <div class="d-flex align-items-center gap-3">
            <div class="chat-box__item">
                <div class="chat-box__thumb">
                    <img class="avatar contact__profile"
                        src="{{ getImage($activeTemplateTrue . 'images/ch-1.png', isAvatar: true) }}" alt="image">
                </div>
                <div class="chat-box__content">
                    <p class="name contact__name"></p>
                    <p class="text contact__mobile"></p>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-center gap-2">
            <div class="dropdown chatbot-dropdown conversation-dropdown conversation-status-dropdown">
            </div>

            <div class="dropdown chatbot-dropdown ai-status-dropdown">
            </div>

            <div class="text-end d-flex justify-content-end gap-3 align-items-center">
                <span class="filter-icon"> <i class="fas fa-stream"></i> </span>
                <span class="user-icon"><i class="fa-regular fa-user"></i></span>
            </div>
            <div class="dropdown chatbot-dropdown conversation-options">
                <button class="chatbot-dropdown__btn conversation-option-btn" type="button">
                    <i class="fa-solid fa-ellipsis-vertical"></i>
                </button>

                <ul class="dropdown-menu dropdown-menu-end chatbot-dropdown__menu conversation-option-list">
                </ul>
            </div>
        </div>
    </div>
    <div class="msg-body">

    </div>
    <div class="chat-box__footer">
        <div class="block-wrapper d-flex align-items-center justify-content-center mb-3 d-none">
            <div class="blocked-message px-4 py-2 d-inline-flex align-items-center">
                <i class="las la-ban me-2 fs-5"></i>
                @auth
                    <span>@lang('This contact has been blocked')</span>
                @else
                    <span>@lang('This contact has been blocked')</span>
                @endauth
            </div>
        </div>

        <form class="chat-send-area no-submit-loader" id="message-form">
            @csrf
            <div class="btn-group">
                <div class="chat-media">
                    <button class="chat-media__btn" type="button"> <i class="las la-plus"></i> </button>
                    <div class="chat-media__list">
                        <label for="interactive_list" class="media-item interactive_list_btn">
                            <span class="icon">
                                <i class="fa-solid fa-list"></i>
                            </span>
                            <span class="title">@lang('Interactive List')</span>
                            <input hidden class="media-input" name="interactive_list_id" type="number">
                        </label>
                        <label for="cta_url" class="media-item cta-url-btn">
                            <span class="icon">
                                <i class="fa-solid fa-paperclip"></i>
                            </span>
                            <span class="title">@lang('CTA Url')</span>
                            <input hidden class="media-input" name="cta_url_id" type="number">
                        </label>
                        <label for="audio" class="media-item media_selector"
                            data-media-type="{{ Status::AUDIO_TYPE_MESSAGE }}">
                            <span class="icon">
                                <i class="fas fa-file-audio"></i>
                            </span>
                            <span class="title">@lang('Audio')</span>
                            <input hidden class="media-input" name="audio" type="file" accept="audio/*">
                        </label>
                        <label for="document" class="media-item media_selector"
                            data-media-type="{{ Status::DOCUMENT_TYPE_MESSAGE }}">
                            <span class="icon">
                                <i class="fas fa-file-alt"></i>
                            </span>
                            <span class="title">@lang('Document')</span>
                            <input hidden class="media-input" name="document" type="file"accept="application/pdf">
                        </label>
                        <label for="video" class="media-item media_selector"
                            data-media-type="{{ Status::VIDEO_TYPE_MESSAGE }}">
                            <span class="icon">
                                <i class="fas fa-video"></i>
                            </span>
                            <span class="title">@lang('Video')</span>
                            <input class="media-input" name="video" type="file" accept="video/*" hidden>
                        </label>
                        <label for="location" class="media-item location-modal-btn">
                            <span class="icon">
                                <i class="fa-solid fa-location-dot"></i>
                            </span>
                            <span class="title">@lang('Location')</span>
                        </label>
                    </div>
                    <div class="chat-url__list">
                        @forelse ($ctaUrls as $url)
                            <label class="url-item select-url" data-id="{{ @$url->id }}"
                                data-name="{{ @$url->name }}" data-bs-toggle="tooltip"
                                data-bs-title="{{ @$url->cta_url }}">
                                <span class="icon">
                                    <i class="fa-solid fa-paperclip"></i>
                                </span>
                                <span class="title">{{ @$url->name }}</span>
                            </label>
                        @empty
                            <label class="url-item">
                                <span class="icon">
                                    <i class="fa-solid fa-ban"></i>
                                </span>
                                <span class="title">@lang('No CTA Link')</span>
                            </label>
                        @endforelse
                    </div>
                    <div class="chat-list__wrapper">
                        @forelse ($interactiveLists as $list)
                            <label class="url-item select-list" data-id="{{ @$list->id }}"
                                data-name="{{ @$list->name }}" data-bs-toggle="tooltip"
                                data-bs-title="{{ @$list->button_text }}">
                                <span class="icon">
                                    <i class="fa-solid fa-list"></i>
                                </span>
                                <span class="title">{{ @$list->name }}</span>
                            </label>
                        @empty
                            <label class="url-item">
                                <span class="icon">
                                    <i class="fa-solid fa-ban"></i>
                                </span>
                                <span class="title">@lang('No Interactive List')</span>
                            </label>
                        @endforelse
                    </div>
                </div>
                <label for="image" class="btn-item image-upload-btn media_selector"
                    data-media-type="{{ Status::IMAGE_TYPE_MESSAGE }}">
                    <i class="fa-solid fa-image"></i>
                    <input hidden class="image-input" name="image" type="file" accept=".jpg, .jpeg, .png">
                </label>

                <span role="button" class="btn-item ecommerceBtn">
                    <i class="fa-solid fa-cart-shopping"></i>
                </span>
            </div>

            <div class="image-preview-container"></div>
            <div class="input-area d-flex align-center gap-2">
                <span class="emoji-icon cursor-pointer">
                    <i class="far fa-smile"></i>
                </span>
                <div class="emoji-container"></div>
                <div class="input-group">
                    <textarea name="message" class="form--control message-input" placeholder="@lang('Type your message here')" autocomplete="off"></textarea>
                </div>
                <button class="chating-btn" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none">
                        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M22 2L11 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </form>
    </div>
</div>

@push('script')
    <script>
        "use strict";
        (function($) {
            $('.conversation-dropdown').on('click', ".dropdown-item", function() {
                let value = $(this).data('value');
                let route = "{{ route('user.inbox.conversation.status', ':id') }}";

                $.ajax({
                    type: "POST",
                    url: route.replace(':id', window.conversation_id),
                    data: {
                        status: value,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status == 'success') {
                            $("body").find('.conversation-status-dropdown').html(response.data
                                .status_html);
                        }
                        notify(response.status, (response.message ?? 'Something went to wrong'));
                    },
                    error: function() {
                        notify('error', "@lang('Something went wrong.')");
                    }
                });
            });
            $('.ai-status-dropdown').on('click', ".ai-reply-button", function() {
                let value = $(this).data('value');
                let route = "{{ route('user.inbox.conversation.ai.reply', ':id') }}";


                $.ajax({
                    type: "POST",
                    url: route.replace(':id', window.conversation_id),
                    data: {
                        status: value,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status == 'success') {
                            $("body").find('.ai-status-dropdown').html(response.data
                                .ai_reply_html);
                        }
                        notify(response.status, (response.message ?? 'Something went to wrong'));
                    },
                    error: function() {
                        notify('error', "@lang('Something went wrong.')");
                    }
                });
            });

            $('.conversation-options').on('click', ".conversation-option-btn", function() {
                let route = "{{ route('user.inbox.conversation.options', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: route.replace(':id', window.conversation_id),
                    success: function(response) {
                        if (response.status == 'success') {
                            $('.conversation-options').find(".conversation-option-list").html(response.data.html);
                            $('.conversation-option-btn').dropdown('toggle'); // show menu
                        } else {
                            notify(response.status, (response.message ??
                                'Something went to wrong'));
                        }
                    },
                    error: function() {
                        notify('error', "@lang('Something went wrong.')");
                    }
                });
            });



        })(jQuery);
    </script>
@endpush
