{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{% block head_javascript %}
    {{ parent() }}
    <script
            src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
{% endblock head_javascript %}

{% block configured_stylesheets %}
    {{ parent() }}
    <style>
        .code{
            background-color: #000000;
            color: #ffffff !important;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 20px;
            font-family: "Courier New", Courier, monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
        }
        code{
            color: #ffffff !important;
        }

        .btn{
            height: 38px;
            width: 38px;
        }
        .human{
            background-color: #a6a6a6;
            color: #ffffff;
            float: right;
            padding: 10px;
            border-radius: 5px;
        }
        .bot{
            background-color: #e1e1e1;
            float: left;
            padding: 10px;
            border-radius: 5px;
        }

    </style>
{% endblock %}

{% block page_title 'Chatea con tu asistente' %}

{% block page_content %}
    {{ parent() }}
    <div class="container" style="position: relative;">
        <div class="text-center">
            <div class="row">
                <select class="form-select" id="type" required>
                    <option value="gpt-4">GPT-4</option>
                    <option value="gpt-3.5-turbo">GPT-3.5</option>
                </select>
            </div>
            <div id="spinner" class="spinner-border text-primary" role="status" style="display: none;">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

        <!-- Respuesta -->
        <div class="row">
            <div class="col-12">
                <div class="answer">
                </div>
            </div>
        </div>

        <div class="container-fluid fixed-bottom mb-4">
            <div class="row justify-content-center">
                <div class="col-10">
                    <div class="form_chat">
                        <div class="row align-items-center">
                            <div class="col-10">
                                <!-- Input de pregunta -->
                                <input class="form-control" id="question">
                            </div>
                            <div class="col-2">
                                <button class="btn btn-primary w-100 d-none" id="loading" type="button" disabled>
                                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                    <span class="visually-hidden" role="status">Loading...</span>
                                </button>
                                <button class="btn btn-primary w-100" id="submit"><i class="fa fa-send"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const btnSubmit = $("#submit");
        const loading = $("#loading");
        const spinner = $('#spinner');
        var question = $('#question')
        const divAnswer = $('.answer');
        const disabledAction = (disable)=>{
            if(disable){
                btnSubmit.addClass('d-none');
                loading.removeClass('d-none');
                return;
            }
            loading.addClass('d-none');
            btnSubmit.removeClass('d-none');
            spinner.hide();
            return;
        }
        const appendText = (text,type)=>{
            question.val('');
            divAnswer.append(`<div class="row"><div class="col-md-6 col-12 m-1 ${type}">${text.replace(/\r?\n/g,'<br/>')}<br> <div></div>` );
        }
        const enviar = ()=>{
            disabledAction(true);
            let text = question.val();
            appendText(text,'human offset-md-5');
            $.ajax({
                url: '/api/v1/chat',
                type: 'POST',
                data: {'question':text},
                success: function(d) {
                    console.log(d)
                    appendText(d,'bot');
                },
                error: function(xhr, status, error) {
                    console.error(xhr, status, error);
                },
                complete: function() {
                    disabledAction(false);
                }
            });
        };
        $(()=>{
            console.log("ready");
            btnSubmit.on('click',enviar);
            $('body').keypress((e)=> {
                let code = (e.keyCode ? e.keyCode : e.which);
                console.log(e);
                if(code==13){
                    enviar();
                }
            });
        })
    </script>
{% endblock %}