@extends('layouts.app')

@section('title', 'Ассистент')

@section('content')
    <div>
        <div class="page-title">Справочная информация</div>
    </div>

    <div class="lokoRules" style="margin: 50px 0;">
        <p>Чат-бот предназначен для предоставления информации по помощи в выборе домашего питомца:</p>
        <div class="list">
            <div>особенности животного: характер, потребности, здоровье,</div>
            <div>обучение и воспитание,</div>
            <div>финансовые траты на уход за питомцем,</div>
            <div>и многое другое.</div>
        </div>
        <p>Напиши свой вопрос в чат и получи квалифицированный ответ в части помощи с домашними животными.</p>
    </div>

    <section class="chat_section">
        <div class="head-cons chat-client">
            <x-back-button></x-back-button>

            <div class="user-info">
                <div style="width: 100%;">
                    <div class="name">AI Assistant</div>
                    <div class="role">chat-bot</div>
                </div>
                <div class="photo-wrap">
                    <div class="photo">
                        <img src="https://medoblako.ru/newdesign/img/cons/chat_bot.png" alt="bot">
                    </div>
                </div>
            </div>
        </div>

        <div class="pet_chat__section">
            <div class="chat__block" id="chatBlock">
                @foreach($messages as $message)
                    <div class="message__block {{ $message->is_answer ? '' : 'right' }}">
                        <div class="message__text">
                            {{ $message->text }}
                            <small>{{ $message->created_at->format('H:i:s d.m.Y') }}</small>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="chat_input__block">
                <textarea name="message" id="messageText" rows="1" class="form-control chat_input__text" placeholder="Введите свое сообщение здесь.."></textarea>
                <input type="hidden" name="src" value="{{ route('message.send') }}">
                <button type="submit" id="sendMessage" class="btn chat_input__button" disabled></button>
            </div>
        </div>
    </section>

    <script>

        function getDateTime() {
            const dt = new Date();

            let day = ("0" + dt.getDate()).slice(-2);
            let month = ("0" + (dt.getMonth() + 1)).slice(-2);
            let year = dt.getFullYear();

            let hours = ("0" + dt.getHours()).slice(-2);
            let minutes = ("0" + dt.getMinutes()).slice(-2);
            let seconds = ("0" + dt.getSeconds()).slice(-2);

            return `${hours}:${minutes}:${seconds} ${day}.${month}.${year}`;
        }

        function addMessage(message, isAuthor = false) {
            let html = `
                <div class="message__block ${isAuthor ? 'right' : ''}">
                    <div class="message__text">${message}<small>${getDateTime()}</small></div>
                </div>
                `;

            $('#chatBlock').append(html);
            typing(isAuthor);
        }

        function typing(is_active) {
            if (is_active) {
                let html = `<div class="print-text-status">Ассистент готовит ответ...</div>`;
                $('#chatBlock').append(html);
            } else {
                $('.print-text-status').remove();
            }
        }

        function scrollBot() {
            $('#chatBlock').animate({
                scrollTop: $("#chatBlock").offset().top + $("#chatBlock")[0].scrollHeight
            }, 1000);
        }

        $(document).ready(function() {

            scrollBot();

            $('#messageText').on('keyup', function(e) {
                if (e.keyCode === 32) { // disable space
                    return;
                }

                let button = $('#sendMessage');

                if ($(this).val().length && button.attr('disabled') === 'disabled') {
                    button.attr('disabled', false);
                }

                if ($(this).val().length === 0 && button.attr('disabled') === undefined) {
                    button.attr('disabled', 'disabled');
                }

                // enter
                if (e.keyCode === 13 && button.attr('disabled') !== 'disabled') {
                    $('#sendMessage').click();
                }
            });

            $('#sendMessage').on('click', function(e) {
                let button = $(this);

                // make disabled button
                button.attr('disabled', 'disabled');

                let csrf = $('meta[name="csrf-token"]').attr('content');
                let message = $('#messageText').val();
                let src = $('input[name="src"]').val();

                addMessage(message, true);
                scrollBot();

                if (message.length === 0) {
                    console.log('Пустое значение');
                    return;
                }

                $('#messageText').val('');

                $.ajax({
                    type: "POST",
                    data: {"message": message},
                    url: src,
                    headers: {"X-CSRF-TOKEN": csrf},
                    success: function(result) {
                        button.attr('disabled', false);
                        addMessage(result.message);
                        scrollBot();
                    },
                    error: function(result) {
                        typing(false);
                        alert('Ошибка при отправке сообщения');
                    }
                });
            });
        });

    </script>
@endsection