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

{% trans_default_domain "AISearch" %}

{% block title %}
        {{"title" | trans}}
{% 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>
        .filter-item-add{
            display: inline-block;
            text-align: start;
            margin-top: 3px;
        }
        .event-header { border-bottom: 1px solid #dfdfdf; padding: 0 5px; }
        .event-header h4 {color: #888888;font-weight: 600;font-size: 15px;}
        input , li.select2-search{
            width : 100% !important;
        }
        .button-disabled{
            background: #acacac;
            margin-top: 15px;
            width: 100%;
            color: black !important;
            opacity: 0.5 !important;
        }
        .form-group-new{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .form-input{
            display: flex;
            flex-direction: column;
        }
        .added-researches{
            border: 1px solid #e5e5e5;
            padding: 10px;
            margin-bottom: 50px;

        }
        .x-mark{
            color:red;
            font-size: 22px !important;
        }
        .added-researches > .empty-title{
            display: flex;
            justify-content: center;
            color: rgba(0, 0, 0, 0.6);
        }
        #fake_click{
            width: 100%;
            height: 100%;
            padding: 6px 12px;
        }
    </style>

{% endblock %}

{% block body %}

	<div class="container">
        <div style="display:flex;flex-wrap: wrap-reverse;">
            <h3 style="flex-grow:1">
                <span>
                    <i class="fa fa-search" aria-hidden="true"></i>
                </span>
                {{ 'title'|trans }}
            </h3>
        </div>
        <hr>
		<div>
			<div id="" style="" class="filter-container">
				{% if not app.user %}
					{{ 'ocr.file_processor.info_bar_not_authenticated'|trans({}, 'ShamraOcr') }}
				{% else %}
					<div class="filter-container">
                        <div id="seeimg_form" style="display: block;">
                            <div class="sh-spin">
                                <div class="bon1"></div>
                                <div class="bon2"></div>
                                <div class="bon3"></div>
                            </div>
                        </div>
						<form id="filter_form" class="" style="display: none;">
							<div class="academia-filters">
								<div class="filter-content">
									<div class="form-group form-group-new">
                                        <div style="display:block;margin-bottom: 40px;">
                                            <div class="form-input">
                                                <div class="filter-item filter-item-add" style="">
                                                    <label class="control-label">{{ 'filter.desc'|trans }}:</label>
                                                    <textarea type="text" class="res_desc" id="res_desc" name="description" style="width:100%" rows="4"></textarea>
                                                </div>
                                                <div class="filter-item filter-item-add" style="">
                                                    <label class="control-label">{{ 'filter.keywords.title'|trans}}:</label>
                                                    <select id="res_tag_select" class="tag_select" name="tags[]" multiple></select>
                                                </div>
                                                <br>
                                                <div>
                                                    <div class="filter-item filter-item-add" style="margin-inline-end: 10px;">
                                                        <label class="control-label">{{ 'filter.lang.select'|trans }}:</label>
                                                        <div class="select-input-jq" style="max-width:100px;">
                                                            <select class="language_select" id="res_language_select" name="language">
                                                                <option value="AR">{{ 'filter.lang.ar'|trans }}</option>
                                                                <option value="EN">{{ 'filter.lang.en'|trans }}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="filter-item filter-item-add" style="margin-inline-end: 10px;">
                                                        <label class="control-label">{{ 'filter.resNumber'|trans }}:</label>
                                                        <div class="select-input-jq" style="max-width:100px;">
                                                            <select class="res_numb" id="res_numb" name="researches_number">
                                                                <option value="5">5</option>
                                                                <option value="10">10</option>
                                                                <option value="15">15</option>
                                                                <option value="20">20</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="filter-item filter-item-add">
                                                        <label class="control-label">{{ 'filter.sortBy.label'|trans }}:</label>
                                                        <div class="select-input-jq" style="max-width:100px;">
                                                            <select class="res_sort" id="res_sort" name="researches_sortBy">
                                                                <option value="">{{'filter.sortBy.nothing'|trans}}</option>
                                                                <option value="ASC">{{'filter.sortBy.date.asc'|trans}}</option>
                                                                <option value="DECS">{{'filter.sortBy.date.decs'|trans}}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="buttons" style="display: flex;"> 
                                                <button id="search_btn" type="button" id="add-btn" class="new-button  btn"  style="float:none; max-width:240px; margin-inline-end: 5px;">
                                                    {{ 'submit_search'|trans }}
                                                </button>
                                                <button disabled id="study_btn" type="button" id="add-btn" class="button-disabled  btn"  style="padding:0; float:none; max-width:240px; margin-inline-start: 5px;">
                                                    <div id="fake_click">
                                                        {{ 'submit_study'|trans }}
                                                    </div>
                                                </button>
                                            </div>
										</div>
									</div>
								</div>


								<p id="reset_triggerd" hidden>false</p>
							</div>
						</form>
						<p id="parameters" hidden></p>
					</div>
					{# new filter end #}


					<div id="seeimg" style="display: none">
						<div class="sh-spin">
							<div class="bon1"></div>
							<div class="bon2"></div>
							<div class="bon3"></div>
						</div>
					</div>

					<div id="search_result">

                    </div>
				{% endif %}
			</div>
		</div>
	</div>

{% 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>

    <script>
        var messages = {
            "title" : "{{'research_addition.title' | trans}}",
            "empty" : "{{'research_addition.empty' | trans}}",
            "remove" : "{{'research_addition.remove' | trans}}",
            "max_researches" : "{{'research_addition.max_researches' | trans}}",
            "submit_study" : "{{'submit_study' | trans}}",
            "public_submit_study" : "{{'public_submit_study' | trans}}",
            "study_error" : "{{'study.status.error' | trans}}"
            
        }
    </script>
	<script src="{{ asset('bundles/user/js/ai_search.js') }}"></script>
	<script>
         $(document).ready(function () {

            $('.language_select').select2({
                placeholder: "{{ 'filter.lang.select'|trans }}",
                width: '100% ',
                tags:true,
                dir: "inherit"
            });

            $('.res_numb').select2({
                width: '100% ',
                tags:true,
                dir: "inherit"
            });

             $('.res_sort').select2({
                width: '100% ',
                tags:true,
                dir: "inherit"
            });


            $('.tag_select').select2({
                placeholder: '{{"filter.keywords.placeholder"|trans}}',
                tag:true,
                width: '100% ',
                minimumInputLength: 1,
                dir: "inherit",
                ajax:{
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    dataType: 'json',
                    type: "GET",
                    quietMillis: 50,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.context,
                                    id: item.context
                                }
                            })
                        };
                    },
                    cache: true
                },
                tags:true
            })

            // hide the form until it loads
            $("#seeimg_form").remove();
            $("#filter_form").show();

            $(document).on('click',".k-show-more a",function (e) {
                e.preventDefault()
                var thisObj=$(this)
                var abstractObj=(thisObj).closest('.keywords')
                var extraObjs=$(abstractObj).find('.extra-content')

                for (var i=0;i<extraObjs.length;i++)
                    if($(extraObjs[i]).hasClass('r-hidden')){
                        $(extraObjs[i]).removeClass('r-hidden')
                        $(thisObj).html('إخفاء <i class="fa fa-angle-double-right"></i>')
                    }
                    else{
                        $(extraObjs[i]).addClass('r-hidden')
                        $(thisObj).html('المزيد.. <i class="fa fa-angle-double-left"></i>')
                    }
            });

        });

	    jQuery(".tm-input").tagsManager();

        // Applying jQuery plugin - Autocomplete
        function processTags(tags){
            var r=[];
            //var t = JSON.parse(tags)
            for(var i in tags){
                r.push(tags[i].context)
            }
            return r
        }
        $(".tm-input").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( processTags(data) );
                    }
                });
            },
                //data :: JSON list defined
                //processTags(Routing.generate('shamra_academia_get_tag_suggestions')),
            minLength: 1
        });

        $('#push-tag').click(function () {
            jQuery(".tm-input").tagsManager('pushTag', $('#tag-value').val());

            
        });
    </script>
    <script>
        $(document).ready(function () {
            
            $("#search_btn").click(function (e) { 
                search();
            });
            $(".filter-item").on("change", function () {
                search();
            });

            $("#study_btn").click(function (e) { 
                send_researches(e.currentTarget);
            });

            $("#fake_click").click(function (e) { 
                if(Object.keys(added_researches).length == 0){
                    // show a massage
                    noty({
                        text: "{{'research_addition.please_add_research'|trans}}",
                        timeout: 5000,
                        layout: 'topCenter',
                        theme: 'relax',
                        type: "warning"
                    });
                }
            });


        });

        function search(){

            added_researches={};
            // disable the study btn
            $('#study_btn').prop('disabled', true);
            $('#study_btn').removeClass("new-button");
            $('#study_btn').removeClass("btn-secondary");
            $('#study_btn').addClass("button-disabled");

            var req_data = $("#filter_form").serialize()
            let parmas = new URLSearchParams(req_data);
            if (parmas.get('hiddenTagListA')) {
            if (parmas.get('keywords'))
                parmas.set('keywords', parmas.get('keywords') + ',' + parmas.get('hiddenTagListA'));
            else
                parmas.set('keywords', parmas.get('hiddenTagListA'));
            }
            req_data = parmas.toString();
            
            $.ajax({
                url: `{{path('advanced_search')}}?${req_data}`,
                type: "GET",
                cache: false,
                beforeSend: function () {
                    $("#seeimg").show();
                    $("#search_result").html("");
                },
                success: function (data, status) {
                    $("#seeimg").hide();
                    $("#search_result").html(data["data"]);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $("#seeimg").hide();
                    $("#search_result").html("{{'filter.error'|trans}}");
                    // console.log(xhr);
                    // console.log(ajaxOptions);
                    // console.log(thrownError);
                },
            });
        }
        function send_researches(e) {
            let slugs = [];
            let titles = []; 
            for (let slug  in added_researches) {
                titles.push(added_researches[slug]["title"]);
                slugs.push(slug);
            }
            let lang = "{{app.request.locale}}";
            let research_lang = $("#res_language_select").val();
            let title = $("#res_desc").val();
            let public = $(e).data("public");
            $.ajax({
                url: `{{path('reference_study')}}`,
                type: "POST",
                cache: false,
                data:{
                    lang:lang,
                    slugs:slugs,
                    titles:titles,
                    title:title,
                    research_lang:research_lang,
                },
                beforeSend: function () {
                    // clicked btn reload
                    var loader = `<div id="loader" style="text-align: center;vertical-align: middle">
                                    <div class="loadingio-spinner-dual-ring-fbofjcjq6x4"><div class="ldio-unzl005xvm">
                                    <div></div><div><div>
                                    </div></div></div></div>
                                </div>`
                    $(e).html(loader);
                },
                success: function (data, status) {
                    var path = "{{ path('show_reference_study', {request_id: '__ID__'}) }}".replace('__ID__', data["request_id"]);
                    window.location.href = path;
                    // console.log(data);
                },

                error: function (xhr, ajaxOptions, thrownError) {
                    noty({
                        text: messages["study_error"],
                        timeout: 5000,
                        layout: 'topCenter',
                        theme: 'relax',
                        type: "error"
                    });
                    if(public)
                        $(e).html("{{'public_submit_study' | trans}}");
                    else 
                        $(e).html("{{ 'submit_study'|trans }}");

                    // console.log(xhr);
                    // console.log(ajaxOptions);
                    // console.log(thrownError);
                },
            });
        }

    </script>
    




{% endblock %}