{% extends '@syndexAcademic/CustomizedLayouts/new_research_layout.html.twig' %}

{% trans_default_domain "Academia" %}

{% block title %}
    {{ 'page.title.new'|trans }}
{% endblock title %}
{% block css %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
{% endblock %}
{% block body %} 
    {{ parent() }}
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new" class="col-xs-12 col-md-6">
                <div id="page-header" class="new-research-header">
                    <span><i class="fa fa-plus"></i>&nbsp; {{ 'page.title.new'|trans }}</span>
                </div>
                <br>
                <form class="form-horizontal" action="{{ path('shamra_academia_research_new') }}" id="shamra_academia_research" name="shamra_academia_research" method="POST" novalidate enctype="multipart/form-data">

                    <div class="form-group">
                        <label class="control-label">{{ 'research.fields'|trans }}</label>
                        {{ form_errors(form.fields) }}
                        {{ form_widget(form.fields,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.fields'} }) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'research.researchCategory'|trans }}</label>
                        {{ form_errors(form.researchCategory) }}
                        {{ form_widget(form.researchCategory,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.researchCategory'
                        }}) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'research.language'|trans }}</label>
                        {{ form_errors(form.language) }}
                        {{ form_widget(form.language,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.language'
                        }}) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'research.arabicFullTitle'|trans }}</label>
                        {{ form_errors(form.arabicFullTitle) }}
                        {{ form_widget(form.arabicFullTitle,
                        {'attr': {'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.arabicFullTitle',
                            'placeholder':'form.placeholder.arabicFullTitle'
                        }}) }}
                        <span id="arabicFullTitleCharacters"></span>
                    </div>
                    <div class="form-group">
                        <div id="similar-researches-div" class="col-xs-12" style=" border: 1px solid #666;
                             display: none;
                             "   >
                            <label class="control-label">{{ 'research.similarResearches'|trans }}</label>
                            &nbsp;&nbsp;<i id="similar_researches_spinner" class="fa fa-spinner fa-spin fa-fw margin-bottom"></i>
                            <ul id="similar_researches"></ul>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'research.englishFullTitle'|trans }}&nbsp; {{ 'optional'|trans }}</label>
                        {{ form_errors(form.englishFullTitle) }}
                        {{ form_widget(form.englishFullTitle,
                        {'attr': {'dir':'ltr', 'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.englishFullTitle',
                            'placeholder':'form.placeholder.englishFullTitle'
                        }}) }}
                        <span id="englishFullTitleCharacters"></span>
                    </div>

                    <div id="arabicAbstract" class="form-group">
                        <label class="control-label">{{ 'research.arabicAbstract'|trans }}</label>
                        {{ form_errors(form.arabicAbstract) }}
                        {{ form_widget(form.arabicAbstract,
                        {'attr': {'rows':'4', 'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.arabicAbstract',
                            'placeholder':'form.placeholder.arabicAbstract'
                        } }) }}
                        <span id="arabicAbstractCharacters"></span>
                    </div>

                    <div id="englishAbstract" class="form-group">
                        <label class="control-label">{{ 'research.englishAbstract'|trans }}&nbsp; {{ 'optional'|trans }}</label>
                        {{ form_errors(form.englishAbstract) }}
                        {{ form_widget(form.englishAbstract,
                        {'attr': {'dir':'ltr', 'rows':'4', 'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'research.englishAbstract',
                            'placeholder':'form.placeholder.englishAbstract'
                        } }) }}

                        <span id="englishAbstractCharacters"></span>
                    </div>

                    <div class="form-group">
                        <div>
                            {% if form_errors(form.publisher) is not empty %}
                                {{ form_errors(form.publisher) }}
                            {% else %}
                                {{ form_errors(form.textualPublisher) }}
                            {% endif %}
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-6" >
                                <div class="form-group col-sm-12 col-xs-12">
                                    <label class="control-label">{{ 'research.publisher'|trans }}</label>
                                    <br>
                                    {{ form_widget(form.publisher,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'research.publisher',
                                        'placeholder':'form.placeholder.publisher'
                                    }}) }}
                                </div>

                                <div class="form-group col-sm-12 col-xs-12">
                                    {{ form_widget(form.textualPublisher,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'research.textualPublisher',
                                        'placeholder':'form.placeholder.textualPublisher', 'disabled':'disabled'
                                    }}) }}
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-6">
                                <label class="control-label">{{ 'research.publicationDate'|trans }}</label>
                                {{ form_errors(form.publicationDate) }}
                                {{ form_widget(form.publicationDate,
                                {'attr': {'data-toggle':'tooltip',
                                    'data-placement':'left', 'title':'research.publicationDate'
                                }}) }}
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-group col-md-10 col-sm-10 col-xs-10">
                            <label class="control-label">{{ 'research.document'|trans }}</label>
                            {{ form_errors(form.document) }}
                            {{ form_widget(form.document) }}
                        </div>
                        <div class="col-sm-6 col-xs-12">
                        </div>
                    </div>

                    <div id="tags-div" class="form-group">
                        <label class="control-label">{{ 'research.tags'|trans }}</label>
                        {{ form_errors(form.tags) }}
                        {{ form_widget(form.tags) }}
                        <div class="row">
                            <div class="col-md-4">
                                <input id="tag-value" type="text" name="tags" size="35" class="tm-input form-control"/>
                            </div>
                            <div class="col-md-4">
                                <input id="push-tag" type="button" value="{{ 'form.add.tag'|trans }}" class="btn"/>
                            </div>
                        </div>
                    </div>
                    <div id="contributers_div" class="form-group">
                        <label class="control-label">{{ 'research.contributers'|trans }}</label>
                        {{ form_errors(form.researchContributersRoles) }}
                        <p>
                            <input type="text" id="numberOfContributers" value="{{ form.researchContributersRoles|length }}" hidden/>
                        </p>
                        <div id="contributers" class="col-md-12" data-prototype="
                        {% apply escape %}
                            {{ include('@syndexAcademic/Research/prototype.html.twig', { 'form': form.researchContributersRoles.vars.prototype }) }}
                        {% endapply %}
                        ">

                            {% for contributerRole in form.researchContributersRoles %}
                                <div class="row contributerRole">
                                    <div class="col-md-12">
                                        <div class="col-md-6">
                                            {{ form_errors(contributerRole.contributer.fullName) }}
                                            {{ form_errors(contributerRole.contributer.email) }}
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="col-md-4">
                                            <label class="control-label">{{ 'contributer.fullName'|trans }}</label>
                                            {{ form_widget(contributerRole.contributer.fullName) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="control-label">{{ 'contributer.email'|trans }}</label>
                                            {{ form_widget(contributerRole.contributer.email) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="control-label">{{ 'contributer.role'|trans }}</label>
                                            {{ form_widget(contributerRole.role) }}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                    <div id="researchReferences" class="form-group">
                        <label class="control-label">{{ 'research.researchReferences'|trans }}</label>
                        {{ form_errors(form.researchReferences) }}
                        <p>
                            <input type="text" id="numberOfReferences" value="{{ form.researchReferences|length }}" hidden>
                        </p>
                        <div id="researchReference-fields-list" class="col-md-12"
                             data-prototype="{{ form_widget(form.researchReferences.vars.prototype)|e }}">
                            {% for researchReference in form.researchReferences %}
                                <div class="ref" class="form-group">
                                    {{ form_errors(researchReference) }}
                                    {{ form_widget(researchReference,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'researchReference.title',
                                        'placeholder':'form.placeholder.researchReference'
                                    }}) }}
                                </div>
                            {% endfor %}
                        </div>
                        <a href="#" id="add-another-researchReference"><i class="fa fa-plus" style="color: #00a55a"></i>&nbsp;&nbsp;{{ 'form.add.researchReference'|trans }}</a>
                    </div>

                    {% if form.reCaptcha is defined %}
                          <div class="form-group">
                        {{ form_errors(form.reCaptcha) }}
                        {{ form_widget(form.reCaptcha,
                            {'attr': {'data-toggle':'reCaptcha',
                                'data-type':'checkbox',
                            }}) }}
                        </div>
                    {% endif %}

                    <div class="form-group">
                        {{ form_errors(form.terms) }}
                        {{ form_widget(form.terms) }}
                    </div>

                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="button-placeholder">
                            <input type="submit" id="new-research-submit"  value="{{ 'form.submit.new'|trans }}" class="btn submit-button"/>
                        </div>
                    </div>
                    {{ form_row(form.research_token) }}
                    {{ form_errors(form) }}
                </form>
            </div>

        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>
    <script src="{{ asset('bundles/syndexacademic/js/similar_entities.js') }}?v=1"></script>
    <script type="text/template" id="similar_research_template">
        <li>
            <a href="<%= Routing.generate('shamra_academia_research_show', { slug: slug }) %>">
                <%- title %>
            </a>&nbsp;
            <i id="more-details" slug="<%= slug %>" title="التفاصيل" class="fa fa-exclamation-circle" aria-hidden="true"></i>
        </li>
    </script>

    <script>
        $(function () {
            $('#shamra_academia_research_publicationDate').datepicker({
                dateFormat: 'dd-mm-yy',
            })
        })
        var title = document.getElementById('shamra_academia_research_arabicFullTitle');
        var abstract = document.getElementById('shamra_academia_research_arabicAbstract');
        var similarResearchesEl = document.getElementById('similar_researches');
        var similarResearchesSpinnerEl = document.getElementById('similar_researches_spinner');
        var similarResearchesDivEl = document.getElementById('similar-researches-div');
        var res_temp = _.template(document.getElementById('similar_research_template').innerHTML);
        var successHandler = function (researches) {
            var html = '';
            //researches is JSON object
            for (var obj in researches) {
                html += res_temp({title: researches[obj].title_ar, slug: researches[obj].slug});
            }
            if (html === '') {
                html += "<p>{{ 'research.noSimilar'|trans }}</p>";
            }
            similarResearchesSpinnerEl.style.visibility = "hidden";
            //similarResearchesDivEl.style.display = 'none';
            similarResearchesEl.innerHTML = html;
            similarResearchesEl.style.visibility = "visible";
            similarResearchesDivEl.style.visibility = "visible";
        };

        var errorHandler = function (errorMsg) {
        };

        var startHandler = function () {
            similarResearchesSpinnerEl.style.visibility = "visible";
            similarResearchesDivEl.style.display = 'block';
            similarResearchesEl.innerHTML = '';
        };

        new SimilarResearchesHandler(title, abstract, successHandler, errorHandler, startHandler);
    </script>
    {# ---------------------------------- #}


    {# I need to keep these snippts of JavaScript here because I need some data from returned entities. #}
    <script>
        $(document).ready(function () {
            // Processing and rendering tags.
            {% for tag in research.tags %}
            jQuery(".tm-input").tagsManager('pushTag', '{{ tag.context }}');
            {% endfor %}

            $('#shamra_academia_research_arabicFullTitle').keyup(function () {
                $('#similar-researches-div').show();
            });

            var lastentry = "";
            $('.ui-helper-hidden-accessible').hide();
        });
    </script>
{% endblock %}