@extends($_layout . 'chat')
@section('content')
    @php
        $user = get_user_login();
        $expired_at = $user->getServiceExpiredInfo('d/m/Y');
    @endphp
    @if ($expired_at)
        <!-- Left Sidebar Menu -->
        @include($_template . 'chat.sidebar-menu')
        <!-- /Left Sidebar Menu -->

        <!-- sidebar group -->
        @include($_template . 'chat.sidebar-history')
        <!-- /Sidebar group -->

        <!-- Chat -->
        <div class="chat" id="middle">
            <div class="slimscroll chat-scrollable">
                @include($_template . 'chat.chat-header')
                <div class="chat-body">
                    <div class="messages chat-message-list">

                        <div class="chat-line">
                            <span class="chat-date">Bắt đầu cuộc trò chuyện</span>
                        </div>


                    </div>
                </div>
            </div>
            @include($_template . 'chat.chat-footer')
        </div>
        {{-- <div id="copyable-block" contenteditable="true" style="display: none"></div> --}}
        <!-- /Chat -->
        <script type="text/template" id="message-block-template" role="messageBlock">
            <div class="message-block" id="message-block-{uuid}">

                <div class="chat-line">
                    <span class="chat-date chat-name">{name}</span>
                </div>
            </div>
        </script>

        <script type="text/template" id="user-message-item-template" role="userMessageItem">
            <div class="chats {role}" id="message-box-{uuid}">
                <div class="chat-content">
                    <div class="message-content">
                        <div class="inner-content">
                            <div class="inner-message-content">{message}</div>
                        </div>
                        <!--
                        <div class="chat-time">
                            <div>
                                <div class="time"><i class="fas fa-clock"></i> 10:02</div>
                            </div>
                        </div>
                        -->
                    </div>

                    <div class="chat-profile-name text-end">
                        <h6>{name}</h6>
                    </div>
                </div>
                <div class="chat-avatar">
                    <img src="{avatar}" class="rounded-circle dreams_chat" alt="{name}">
                </div>
                <div class="chat-action-btns me-2">
                    <div class="chat-action-col">
                        <a href="#" class="btn-copy-message"><span ><i class="far fa-copy"></i></span></a>
                    </div>
                </div>
            </div>
        </script>


        <script type="text/template" id="assistant-message-item-template" role="assistantMessageItem">
            <div class="chats {role}" id="message-box-{uuid}">
                <div class="chat-avatar">
                    <img src="{avatar}" class="rounded-circle dreams_chat" alt="image">
                </div>
                <div class="chat-content">
                    <div class="message-content">
                        <div class="inner-content">
                            <div class="inner-message-content">{message}</div>
                        </div>
                        <!--
                        <div class="chat-time">
                            <div>
                                <div class="time"><i class="fas fa-clock"></i> 10:02</div>
                            </div>
                        </div>
                        -->
                    </div>

                    <div class="chat-profile-name">
                        <h6>{name}</h6>
                    </div>
                </div>
                <div class="chat-action-btns me-2">
                    <div class="chat-action-col">

                        <a class="#" href="#" data-bs-toggle="dropdown">
                            <i class="fas fa-ellipsis-h"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="#" class="dropdown-item dream_profile_menu btn-copy-message" data-id="{id}">Sao chép <span><i class="far fa-copy"></i></span></a>
                            {{-- <a href="#" class="dropdown-item btn-save-message" data-id="{id}">Lưu <span class="material-icons">save</span></a> --}}
                            <a href="#" class="dropdown-item btn-download-message" data-id="{id}" data-chat-id="{chat_id}">Tải về <span><i class="fa fa-download"></i></span></a>
                            <a href="#" class="dropdown-item btn-delete-message" data-id="{id}">Xoá <span><i class="far fa-trash-alt"></i></span></a>
                        </div>

                    </div>
                </div>
            </div>
        </script>

        <script type="text/template" id="reply-writting-template" role="replyWritting">
            <div class="chats reply-writting" id="reply-writing-{uuid}">
                <div class="chat-avatar">
                    <img src="{avatar}" class="rounded-circle dreams_chat" alt="image">
                </div>
                <div class="chat-content">
                    <div class="chat-profile-name text-end">
                        <h6>| <span></span></h6>
                    </div>
                </div>
            </div>
        </script>
    @else
        <div class="expired-at warning">
            <div class="chat status-middle-bar d-flex align-items-center justify-content-center">
                <div class="status-right">
                    <div><img src="{{ $siteinfo->logo }}" alt="{{ $siteinfo->site_name }}"></div>
                    <div>
                        <p>Bạn đã hết thời hạn sử dụng dịch vụ. <br>
                            Vui lòng đăng ký gói để sử dụng dịch vụ
                        </p>
                        <p class="text-center">
                            <a href="{{ route('web.payments.options') }}" target="_top">
                                Đăng ký gói
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@if ($expired_at)
    @section('js')
        <script>
            window.__AI_DATA__ = {
                urls: {
                    inputs: "{{ route('web.ai.chat.prompt-inputs') }}",
                    data: "{{ route('web.ai.chat.data') }}",
                    history: "{{ route('web.ai.chat.get-history') }}"
                },
                data: {

                    users: {
                        bot: {
                            name: "{{ siteinfo('site_name') }}",
                            avatar: "{{ ai_startup_asset('img/logo/default.png') }}"
                        },
                        user: {
                            name: "{{ auth()->user()->name }}",
                            avatar: "{{ auth()->user()->getAvatar() }}"
                        }
                    },

                    history: @json($history),

                    chats: @json($data)
                }
            };
        </script>
        <script src="{{ ai_startup_asset('chat/js/chatbox.js') }}"></script>
    @endsection
@endif