@extends('layout.layout1')

@php
$headTitle = 'Text Generator';
$toggle = "true";
@endphp

@section('content')

<!-- Main content -->
<div class="rbt-main-content">
    <div class="rbt-daynamic-page-content">

        <!-- Dashboard Center Content -->
        <div class="rbt-dashboard-content">
            <div class="content-page">

                @if (empty($message))
                    <div class="rainbow-generartor-section rainbow-section-gap">
                        <div class="section-title text-center sal-animate" data-sal="slide-up" data-sal-duration="700" data-sal-delay="100">
                            <h4 class="subtitle "><span class="theme-gradient">Cik Bayu</span></h4>
                            <h2 class="title w-600 mb--20">Chatbot pertama Sabah</h2>
                            <p class="description b1">Model kecerdasan buatan (AI) yang dari teknologi ChatGPT yang diolah mengunakan set-set data kawasan DUN sabah bersama maklumat Sabah dengan menggunakan bahasa tempatan Sabah</p>
                        </div>
                    </div>
                @else
                <div class="chat-box-list pt--30" id="chatContainer">

                    <!-- Text Generator -->
            
                </div>
                @endif

                <!--go to down -->
                <x-goToDown/>
                
            </div>

            <div class="rbt-static-bar">
                <form class="new-chat-form border-gradient">
                    @csrf
                    <textarea id="txtarea" rows="1" placeholder="Send a message..."></textarea>
                    <div class="left-icons">
                        <div title="ChatenAI" class="form-icon icon-gpt">
                            <i class="feather-aperture"></i>
                        </div>
                    </div>
                    <div class="right-icons">
                        <button type="submit" class="form-icon icon-send" id="sendButton" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Send message">
                            <i class="feather-send"></i>
                        </button>
                    </div>
                </form>
                <p class="b3 small-text">Cik Bayu can make mistakes. Consider checking important information.</p>
            </div>
        </div>

        <!-- Dashboard Right Content -->
        <div class="rbt-right-side-panel popup-dashboardright-section">

            <div class="right-side-top">
                <a class="btn-default bg-solid-primary" href="/generator/textgenerator">
                    <span class="icon"><i class="feather-plus-circle"></i></span>
                    <span>New Chat</span>
                </a>
            </div>
            <div class="right-side-bottom">
                <div class="small-search search-section mb--20">
                    <input type="search" placeholder="Search Here...">
                    <i class="feather-search"></i>
                </div>

                <div class="chat-history-section">
                    <h6 class="title">Today</h6>
                    <ul class="chat-history-list">
                        @if($conversation['today']->isEmpty())
                            <li class="history-box">
                                    Belum ada history
                            </li>
                        @else
                            @foreach ($conversation['today'] as $item)
                                <li class="history-box {{ $item->status }}">
                                    <a class="item-conversation" href="/generator/textgenerator?conversation_id={{ $item->id }}">
                                        {{ $item->title }}
                                    </a>
                                    <div class="dropdown history-box-dropdown">
                                        <button type="button" class="more-info-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="feather-more-horizontal"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item delete-item" data-id="{{ $item->id }}" href="#"><i class="feather-trash-2"></i> Delete Chat</a></li>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach
                        @endif

                    </ul>

                </div>

                @if(!$conversation['yesterday']->isEmpty())

                    <div class="rbt-sm-separator"></div>

                    <div class="chat-history-section">
                        <h6 class="title">Yesterday</h6>
                        <ul class="chat-history-list">
                            
                            @foreach ($conversation['yesterday'] as $item)
                                <li class="history-box {{ $item->status }}">
                                    <a class="item-conversation" href="/generator/textgenerator?conversation_id={{ $item->id }}">
                                        {{ $item->title }}
                                    </a>
                                    <div class="dropdown history-box-dropdown">
                                        <button type="button" class="more-info-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="feather-more-horizontal"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item delete-item" data-id="{{ $item->id }}" href="#"><i class="feather-trash-2"></i> Delete Chat</a></li>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>

                    <div class="rbt-sm-separator"></div>
                @endif


                @if(!$conversation['previousSevenDays']->isEmpty())

                    <div class="chat-history-section">
                        <h6 class="title">Previous 7 days</h6>
                        <ul class="chat-history-list">
                            
                            @foreach ($conversation['previousSevenDays'] as $item)
                                <li class="history-box {{ $item->status }}">
                                    <a class="item-conversation" href="/generator/textgenerator?conversation_id={{ $item->id }}">
                                        {{ $item->title }}
                                    </a>
                                    <div class="dropdown history-box-dropdown">
                                        <button type="button" class="more-info-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="feather-more-horizontal"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item delete-item" data-id="{{ $item->id }}" href="#"><i class="feather-trash-2"></i> Delete Chat</a></li>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>

                @endif
            </div>
        </div>

    </div>
</div>

<script>
    $(function () {

        scrolltoBottom();

        var params = new URLSearchParams(window.location.search);
        var conversation_id = params.get('conversation_id');

        loadMessage(conversation_id);

        $('.new-chat-form').submit(function(e) {
            e.preventDefault();
            sendChat(conversation_id);            
        });

        const txtarea = document.getElementById("txtarea");
     
        txtarea.addEventListener("keydown", function (e) {

            if (e.key === "Enter" && !e.shiftKey && txtarea.value.trim() != "") {
            e.preventDefault();
            sendChat(conversation_id);
            }
        });

        $('.delete-item').click(function(e) {
            e.preventDefault();
            
            var id = $(this).data('id');
            var token = $('input[name=_token]');

            hitApi(
                '/conversations/delete/'+id,
                'post', {
                    _token: token.val(),
                    id: id,
                },
                function(response) {
                    token.val(response.newToken);
                    if (response.isSuccess) {
                        //show data message
                        window.location.reload();

                    } else {
                        Swal.fire({
                            title: "Warning!",
                            text: response.message,
                            icon: "warning"
                        });
                    }
                }
            )

        })
       

    });

    function scrolltoBottom() {
        const list = $('#chatContainer');

        setTimeout(function () {
            list.scrollTop(list.prop('scrollHeight') + 1);
        }, 0);
    }

    function loadMessage(conversation_id) {

        hitApi(
            '/conversations/get-message',
            'get', {
                conversation_id: conversation_id,
            },
            function(response) {
                $('#loadingModal').fadeOut();
                if (response.isSuccess) {
                    //show data message
                    scrolltoBottom();
                    response.data['message'].forEach(element => {
                        if (element.sender == "user") {
                            const userMessageElement = createMessageElementUser(
                                "You",
                                element['message'],
                                "author-speech",
                                "/storage/"+response.data.user['photo_profile']
                            );
                            appendMessage(userMessageElement);
                        } else {
                            const userMessageElement = createMessageElement(
                                "Cik Bayu",
                                element['message'],
                                "ai-speech",
                                "/assets/images/logo/fav.png",
                                false,
                                element['id']
                            );
                            appendMessage(userMessageElement);
                        }
                    });

                } else {
                    Swal.fire({
                        title: "Warning!",
                        text: response.message,
                        icon: "warning"
                    });
                }
            }
        )
    }

    function latestMessage(conversation_id, latest, assistant) {

        hitApi(
            '/conversations/get-message',
            'get', {
                conversation_id: conversation_id,
                latest: latest,
                assistant: assistant,
            },
            function(response) {
                if (response.isSuccess) {
                    //show data message

                    scrolltoBottom();
                    var item = response.data.latest_message;

                    if (item.sender == "user") {
                        const userMessageElement = createMessageElementUser(
                            "You",
                            item['message'],
                            "author-speech",
                            "/storage/"+response.data.user['photo_profile']
                        );
                        appendMessage(userMessageElement);
                    } else {
                        const userMessageElement = createMessageElement(
                            "Cik Bayu",
                            item['message'],
                            "ai-speech",
                            "/assets/images/logo/fav.png",
                            false,
                            item['id']
                        );
                        appendMessage(userMessageElement);
                    }

                } else {
                    Swal.fire({
                        title: "Warning!",
                        text: response.message,
                        icon: "warning"
                    });
                }
            }
        )
    } 

    function sendChat(conversation_id) {
        const txtarea = document.getElementById("txtarea");

        const userMessage = txtarea.value.trim();
        var token = $('input[name=_token]');

        scrolltoBottom();
        
        hitApi(
            '/conversations/send-message',
            'post', {
                _token: token.val(),
                conversation_id: conversation_id,
                chat: userMessage,
            },
            function(response) {
                if (response.isSuccess) {
                    if (response.data) {
                        location.href="/generator/textgenerator?conversation_id="+response.data
                    } else {
                        latestMessage(conversation_id, true);
                        scrolltoBottom();
                    }
                    txtarea.value = "";
                } else {
                    Swal.fire({
                        title: "Warning!",
                        text: response.message,
                        icon: "warning"
                    });
                }

                scrolltoBottom();
            }
        );

        setTimeout(() => {
            replyChat(conversation_id);
        }, 2000);
        
    }

    function replyChat(conversation_id) {
        // const txtarea = document.getElementById("txtarea");

        const userMessage = "Tentu boleh, saya adalah Cik Bayu, apa boleh saya dapat bantu ?";
        var token = $('input[name=_token]');

        scrolltoBottom();
        latestMessage(conversation_id, true, true);
        scrolltoBottom();
        
        // hitApi(
        //     '/conversations/reply-message',
        //     'post', {
        //         _token: token.val(),
        //         conversation_id: conversation_id,
        //         chat: userMessage,
        //     },
        //     function(response) {
        //         if (response.isSuccess) {
        //             if (response.data) {
        //                 location.href="/generator/textgenerator?conversation_id="+response.data
        //             } else {
        //                 latestMessage(conversation_id, true, true);
        //                 scrolltoBottom();
        //             }
        //             txtarea.value = "";
        //         } else {
        //             Swal.fire({
        //                 title: "Warning!",
        //                 text: response.message,
        //                 icon: "warning"
        //             });
        //         }

        //         scrolltoBottom();
        //     }
        // );
    }
</script>

@endsection