@extends('site.layouts.master')
@section('content')
<style>
    .card{
        border-radius: 0 0 5px 5px;
        width: 100%;
        height: 81vh;
    }

    .main{
        padding-right: 0;
        padding-left: 0;
        padding-top: 60px;
    }

    .card-body{
        height: 74vh;
        background: #f0f0f0;
        padding: 30px !important;
    }

    .msg{
        width: auto;
        margin: 1em;
        border-radius: 7px;
        color: #fff;
        position: relative;
    }

    .msg p{
        margin: 15px;
        display: inline-block;
        letter-spacing: 0.2px;
        line-height: 27px;
    }

    .self-msg p{
        margin-right: 3.8em;
    }

    .rec-msg p{
        margin-left: 3.8em;
        text-align: right;
    }

    .self-msg{
        background: #3b1f61;
    }

    .rec-msg{
        background: #7e6e93;
        /* margin-top: 2em !important; */
    }

    .avatar-name{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        width: 43px;
        border-radius: 7px;
        padding: 10px;
        height: 100%;
        position: absolute;
        top: 0;
        letter-spacing: 1px;
    }

    .self-msg .avatar-name{
        right: 0;
        background: #614783
        /*writing-mode: vertical-lr;*/
    }

    .rec-msg .avatar-name{
        left: 0;
        background: #6a518b;
        /*writing-mode: sideways-lr;*/
    }

    .chat-inp{
        width: 99%;
        border: none !important;
        border-radius: 5px;
        height: 3em;
        transition: all .2s ease-in-out;
    }

    .chat-inp:focus, .chat-inp:focus-visible{
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.568) !important;
        outline: none;
    }

    .send-btn{
        background: #3b1f61;
        color: #fff;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        border: none;
        height: 100%;
    }
    .avatar-name p {
        rotate: 90deg;
        margin: 0;
    }

    .options{
        background: #3b1f61;
    }

    .form-group label{
        color: #fff
    }
</style>
        <div class="container-fluid px-0 overflow-hidden">
            <div class="chat" data-chat-id="{{ $chat->id }}">
                <div class="card">
                    <div class="card-head shadow text-left p-3">
                        <div class="row mb-2">
                            <div class="col-9">
                                <p>هر سوالی درمورد دوره {{ $course->title }} داری بپرس</p>
                            </div>
                            <div class="col-3 text-right">
                                @canany(['admin', 'adviser'])
                                    @if($chat->status != 'closed')
                                        <span class="badge badge-danger px-2 py-1 closeChat" style="cursor: pointer" data-id="{{ $chat->id }}">بستن چت</span>
                                    @endif
                                @else
                                    @if($chat->status == 'closed')
                                        <span class="badge badge-danger px-2 py-1">{{ App\Models\Chatgpt::STATUS[$chat->status] }}</span>
                                    @endif
                                @endcanany
                            </div>

                        </div>
                        <p><span class="float-right" style="font-size: 12px"> تعداد سوالات مجاز:  {{ $license->used ?? 0 }}/{{ $license->limit ?? 0 }}</span><span style="color: #e78dff" class="float-left" dir="ltr">{{ $course->license->courseExpire() }}</span></p>
                    </div>
                    <div class="card-body" style="overflow-y: auto;">
                        @if($chat->answers()->count() < 1)
                            <div class="options shadow rounded p-4">
                                <div class="row">
                                    <div class="col-12 my-3">
                                        <div class="form-group">
                                            <label for="">موضوع 1</label>
                                            <select name="option_1" class="form-control">
                                                <option value="1">آپشن 1</option>
                                                <option value="2">آپشن 2</option>
                                                <option value="3">آپشن 3</option>
                                                <option value="4">آپشن 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 my-3">
                                        <div class="form-group">
                                            <label for="">موضوع 2</label>
                                            <select name="option_2" class="form-control">
                                                <option value="1">آپشن 1</option>
                                                <option value="2">آپشن 2</option>
                                                <option value="3">آپشن 3</option>
                                                <option value="4">آپشن 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 my-3">
                                        <div class="form-group">
                                            <label for="">موضوع 3</label>
                                            <select name="option_3" class="form-control">
                                                <option value="1">آپشن 1</option>
                                                <option value="2">آپشن 2</option>
                                                <option value="3">آپشن 3</option>
                                                <option value="4">آپشن 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 my-3">
                                        <div class="form-group">
                                            <label for="">موضوع 4</label>
                                            <select name="option_4" class="form-control">
                                                <option value="1">آپشن 1</option>
                                                <option value="2">آپشن 2</option>
                                                <option value="3">آپشن 3</option>
                                                <option value="4">آپشن 4</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @foreach ($chat->answers as $item)
                            @if($item->answer == null && $item->adviser_id == auth()->id())
                            {{-- @dd(1) --}}
                                <div class="row mt-3 mb-2">
                                    <div class="msg self-msg shadow">
                                        <div class="avatar-name">
                                            <p>شما</p>
                                        </div>
                                        <p>{{ $item->question }}</p>
                                    </div>
                                </div>
                            @elseif($item->answer == null && $item->adviser_id != null && $item->adviser_id != auth()->id())
                            {{-- @dd(2) --}}
                                <div class="row mt-2" dir="ltr">
                                    <div class="msg rec-msg shadow">
                                        <div class="avatar-name">
                                            <p>کارشناس</p>
                                        </div>
                                        <p>{{ $item->question }}</p>
                                    </div>
                                </div>
                            @elseif($item->answer == null && $item->adviser_id == null && $item->chatgpt->user_id != auth()->id())
                            {{-- @dd(3) --}}
                                <div class="row mt-2" dir="ltr">
                                    <div class="msg rec-msg shadow">
                                        <div class="avatar-name">
                                            <p>کاربر</p>
                                        </div>
                                        <p>{{ $item->question }}</p>
                                    </div>
                                </div>
                            @elseif($item->answer == null && $item->adviser_id == null && $item->chatgpt->user_id == auth()->id())
                            {{-- @dd(4) --}}
                                <div class="row mt-2 mb-2">
                                    <div class="msg self-msg shadow">
                                        <div class="avatar-name">
                                            <p>شما</p>
                                        </div>
                                        <p>{{ $item->question }}</p>
                                    </div>
                                </div>
                            @elseif($item->answer != null)
                            {{-- @dd(5) --}}
                                <div class="row mt-3 mb-2">
                                    <div class="msg self-msg shadow">
                                        <div class="avatar-name">
                                            <p>شما</p>
                                        </div>
                                        <p>{{ $item->question }}</p>
                                    </div>
                                </div>
                                <div class="row" dir="ltr">
                                    <div class="msg rec-msg shadow">
                                        <div class="avatar-name">
                                            <p>{{ $item->adviesr_id == null ? 'هوش مصنوعی' : 'کارشناس' }}</p>
                                        </div>
                                        <p>{{ $item->answer }}</p>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                        @cannot('adviser')
                            <div class="text-right typing my-3" style="display: none;">
                                <div style="background: #614783; border-radius: 7px;" class="shadow text-white">
                                    <span>هوش مصنوعی در حال فکر کردن است </span>
                                <img src="{{ asset('assets/typing.gif') }}" width="50" alt="typing...">
                                </div>
                            </div>
                        @endcannot
                    </div>
                    <div class="card-footer py-0">
                        @can('user')
                            @if(!$chat->userRequest && $chat->answers()->count() > 0)
                                <div class="row text-center poll p-3" style="border-radius: 5px 5px 0 0">
                                    <p>از پاسخ ها رضایت دارید یا نیاز به پشتیبانی بیشتر دارید؟</p>
                                    <div class="col-6 p-3 bg-success text-white shadow-sm yes-poll" style="border-radius: 0 5px 5px 0">
                                        <p>راضیم</p>
                                    </div>
                                    <div class="col-6 p-3 bg-danger text-white shadow-sm no-poll" style="border-radius: 5px 0 0 5px">
                                        <p>نیاز به پشتیبانی بیشتر دارم</p>
                                    </div>
                                </div>
                            @endif
                        @endcan

                        <div class="row position-relative">
                            @can('user')
                                @if($chat->status == 'open')
                                    <input type="text" class="chat-inp shadow mx-auto" autocomplete="off" placeholder="سوالتو بپرس...">
                                    <button type="button" data-course-id="{{ $course->id }}" data-chat-id="{{ $chat->id }}" class="send-btn px-3">بپرس</button>
                                @else
                                    @if($chat->adviser_id != null)
                                        <div class="row poll w-100 p-3" style="border-radius: 5px 5px 0 0;display: flex;
                                            justify-content: center;
                                            align-content: center;
                                            align-items: center;">
                                            <div class="col-6">
                                                <p>به مشاورت امتیاز بده</p>
                                            </div>
                                            <div class="col-6">
                                                <button class="btn btn-primary float-right rateAdviser" data-id="{{ $chat->id }}">ثبت امتیاز</button>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            @elsecan('admin')
                                @if($chat->userRequest && $chat->userRequest->adviser)
                                    <input type="text" class="chat-inp shadow mx-auto" autocomplete="off" placeholder="پاسخ بده...">
                                    <button type="button" data-course-id="{{ $course->id }}" data-chat-id="{{ $chat->id }}" class="send-btn px-3">ارسال</button>
                                @endif
                            @elsecan('adviser')
                                @if($chat->userRequest)
                                    @if($chat->userRequest->adviser && $chat->userRequest->adviser->id == $authUser->id)
                                        <input type="text" class="chat-inp shadow mx-auto" autocomplete="off" placeholder="پاسخ بده...">
                                        <button type="button" data-course-id="{{ $course->id }}" data-chat-id="{{ $chat->id }}" class="send-btn px-3">ارسال</button>
                                    @endif
                                @endif
                            @endcan
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('scripts')
<script>
    $('.chat-inp').focusin(function() {
        $('.footer').fadeOut();
    });

    $('.chat-inp').focusout(function() {
        // Add the element back when the keyboard is closed (optional)
        $('.footer').fadeIn();
    });

    // Function to start the counter
    function startCounter() {
        let counter = 6;
        let interval = setInterval(() => {
            // Update the counter text
            Swal.getConfirmButton().textContent = `قبول (${counter} ثانیه)`;
            counter--;

            // Enable the confirm button after 5 seconds
            if (counter < 0) {
                Swal.getConfirmButton().textContent = 'قبول'
                Swal.enableButtons();
                clearInterval(interval);
            }
        }, 1000);
    }


    $(document).on('click', '.send-btn', function(e){
        e.preventDefault();
        let self = $(this);
        let courseId = self.data('course-id');
        let chatId = self.data('chat-id');
        let messageInp = $('.chat-inp')
        let message = messageInp.val();
        let typing = $('.typing');
        self.attr('disabled', 'disabled')
        messageInp.val('')
        @if ($chat->adviser_id == null)
            typing.show(1000);
        @endif
        messageInp.attr('disabled', 'disabled')

        let options = {};
        $('select').each(function(key, value){
            options[key] = $(value).val()
        })

        Swal.fire({
            title: 'مهم',
            text: `کاربر محترم لطفاً در زمان پرسش هر سوال موارد زیر را در نظر داشته باشید:
            ۱-اولین پاسخی که شما برای این سوال  دریافت خواهید کرد توسط هوش مصنوعی وب سایت به شما داده شده و ممکن است در پردازش اعداد و ارقام و فهم مطالب با درصدی خطا همراه باشد لذا از معیار قرار دادن اعداد پاسخ اول در کارهای حساس خودداری کنید.
            ۲-در صورتی که نتوانستید از پاسخ اول که توسط هوش مصنوعی به شما داده میشود پاسخ مورد نیاز خود را دریافت کنید میتوانید با زدن دکمه قانع نشدن به یک کارشناس مجموعه ما متصل شوید تا پاسخ دقیق تری دریافت کنید.`,
                confirmButtonText: 'قبول',
                timerProgressBar: true,
                allowOutsideClick: false,
                didOpen: () => {
                    // Swal.showLoading();
                    Swal.disableButtons();
                    // Start the counter
                    startCounter();
                },
                onClose: () => {
                }
            });

        $.ajax({
            method: 'POST',
            url: '{{ route('chatgpt.send') }}',
            data:{
                course_id : courseId,
                chat_id : chatId,
                message: message,
                options: options
            }, success: function(res){
                console.log(res)
                if(res.error){
                    Swal.fire({
                        title: res.error,
                        icon: 'error',
                        showConfirmButton: false,
                        toast: true,
                        timer: 5000,
                        timerProgressBar: true,
                        position: 'top-start',
                        customClass: {
                            popup: 'my-toast',
                            icon: 'icon-center',
                            title: 'left-gap',
                            content: 'left-gap',
                        }
                    })

                    messageInp.val(res.error)
                }else{
                    if(res['id'] != null){
                        window.location.href = `/chat-adviser/${courseId}/${chatId}`
                    }else{
                        $('.card').html($(res).find('.card').html())
                        typing.hide(1000)
                        $('.options').fadeOut(500);
                        messageInp.val('')
                        messageInp.removeAttr('disabled')
                        self.removeAttr('disabled')
                    }

                }
            }
        })
    })

    $(document).on('click', '.closeChat', function(e){
        e.preventDefault();
        let self = $(this);
        let chatId = self.data('id');

        $.ajax({
            method: 'POST',
            url: '{{ route("chatgpt.close") }}',
            data:{
                chat_id: chatId
            }, success: function(res){
                self.remove();
            }
        })
    })

    $(document).on('click', '.yes-poll', function(e){
        $('.poll').fadeOut()
    })

    $(document).on('click', '.no-poll', function(e){
        $('.poll').fadeOut()
        let self = $(this);
        let sendBtn = $('.send-btn');
        let chatId = $('.chat').data('chat-id');
        let messageInp = $('.chat-inp')
        let message = messageInp.val();

        $.ajax({
            method: 'POST',
            url: '{{ route('assignAdviser') }}',
            data:{
                chat_id : chatId,
            }, success: function(res){
                if(res[0] == 200){
                    Swal.fire({
                        title: res[1],
                        icon: 'success',
                        showConfirmButton: false,
                        toast: true,
                        timer: 5000,
                        timerProgressBar: true,
                        position: 'top-start',
                        customClass: {
                            popup: 'my-toast',
                            icon: 'icon-center',
                            title: 'left-gap',
                            content: 'left-gap',
                        }
                    })
                }else{
                    Swal.fire({
                        title: res[1],
                        icon: 'error',
                        showConfirmButton: false,
                        toast: true,
                        timer: 5000,
                        timerProgressBar: true,
                        position: 'top-start',
                        customClass: {
                            popup: 'my-toast',
                            icon: 'icon-center',
                            title: 'left-gap',
                            content: 'left-gap',
                        }
                    })
                }
                sendBtn.attr('disabled', 'disabled')
                messageInp.attr('disabled', 'disabled')
                messageInp.val('تا بررسی کارشناس مربوطه لطفا صبر کنید...')
            }
        })
    })
</script>
@endsection