{% extends 'base.html.twig' %}

{% trans_default_domain "AISearch" %}

{% block title %}
        {{prompt.title}}
{% endblock %}

{% block stylesheets %}

	{{parent()}}
	<link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/community.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/loader.css') }}"/>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <style>
        .status-div{
            padding: 30px;
            border: 1px solid;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .study-text{
            white-space: pre-line;
        }
        #processing_div{
            display:flex;
            flex-direction:column;
        }
    </style>
{% endblock %}

{% block body %}

	<div id="_study">
            {% include('ai_search/reference_study/study_brief.html.twig') with {
                'prompt' : prompt,
                'can_update':can_update,
                } only 
            %}
	</div>

    {% if can_update and prompt.status == prompt.getStatusComplete %}
        {% include "partner_content/contentConfirmationModal.html.twig" with {
            fileName : prompt.title,
        } %}
    {% endif %}

{% endblock %}

{% block javascripts %}

	{{ parent() }}
	<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/vendor/jquery.noty.min.js') }}"></script>
    {% if can_update and prompt.status == prompt.getStatusComplete %}   
        <script>
            let translations = {
                "confirm":"{{'study.update.confirm' | trans}}",
                "cancel":"{{'study.update.cancel' | trans}}",
                "research":"{{'study.update.research' | trans}}",
            }
            $('#content_delete').click(function(){
				$('#content-confirm-delete-modal').modal('show');
			});
			$('.contentConfirmDeleteBtn').click(function() {
				window.location = $('#content_delete').data('href');
			});
        </script>
        <script src="{{ asset('bundles/user/js/ai_search_study.js') }}"></script>
        
    {% endif %}

    {% if prompt.status != prompt.getStatusComplete and prompt.status != prompt.getStatusError %}
        <script>
            /* every second update the status */
            const statusInterval = setInterval(() => {
                $.ajax({
                    type: "GET",
                    url: "{{path('reference_study_check_status' , {request_id:prompt.requestId} )}}",
                    data: {
                        "status":$("#study_brief").data("status"),
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if(data["change"]){
                            $("#_study").html(data["study"]);
                            $("#study_brief").data("status", data["status"]);
                        }
                        if(data["end"]){
                            clearInterval(statusInterval);
                        }
                    }
                });
            }, 2000);

            const userWaitingLongTime = setTimeout(() => {
                console.log("aous oud the king of age");
                if($("#study_brief").data("status") == prompt.getStatusProcessing){
                    $("#processing_div").append("<p>{{'study.status.processing_30' | trans}}</p>");
                }
            }, 30000);
        </script>
    {% endif %}
{% endblock %}