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

{% trans_default_domain "Academia" %}

{% block title %}
    {{ 'page.title.edit'|trans }}
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>
    <link rel="stylesheet"
          href="{{ asset('bower/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.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-pencil"></i>&nbsp; {{ 'page.title.edit'|trans }}</span>
                </div>
                <br>
                <form class="form-horizontal" action="{{ path('shamra_academia_research_edit',{'slug':research.slug}) }}" id="shamra_academia_research" name="shamra_academia_research" method="POST" novalidate enctype="multipart/form-data">

                    <div id="fields" class="form-group">
                        <label class="control-label">{{ 'research.fields'|trans }}</label>
                        <br>
                        {{ form_errors(edit_form.fields) }}
                        {{ form_widget(edit_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(edit_form.researchCategory) }}
                        {{ form_widget(edit_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(edit_form.language) }}
                        {{ form_widget(edit_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(edit_form.arabicFullTitle) }}
                        {{ form_widget(edit_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(edit_form.englishFullTitle) }}
                        {{ form_widget(edit_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(edit_form.arabicAbstract) }}
                        {{ form_widget(edit_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(edit_form.englishAbstract) }}
                        {{ form_widget(edit_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(edit_form.publisher) is not empty %}
                                {{ form_errors(edit_form.publisher) }}
                            {% else %}
                                {{ form_errors(edit_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(edit_form.publisher,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'research.publisher',
                                        'placeholder':'form.placeholder.textualPublisher'
                                    }}) }}
                                </div>
                                <div class="form-group col-sm-12 col-xs-12">
                                    {{ form_widget(edit_form.textualPublisher,
                                    {'attr': {'data-toggle':'tooltip',
                                        'data-placement':'left', 'title':'research.textualPublisher',
                                        'placeholder':'form.placeholder.textualPublisher', 'disabled':'disabled'
                                    }}) }}
                                </div>
                            </div>
                            <div class="col-md-6 col-xs-12">
                                <label class="control-label">{{ 'research.publicationDate'|trans }}</label>
                                {{ form_errors(edit_form.publicationDate) }}
                                {{ form_widget(edit_form.publicationDate,
                                {'attr': {'data-toggle':'tooltip','class':'input-group date',
                                    'data-placement':'left', 'title':'research.publicationDate'
                                }}) }}
                            </div>
                        </div>
                    </div>
                    <div id="tags-div" class="form-group">
                        <label class="control-label">{{ 'research.tags'|trans }}</label>
                        {{ form_errors(edit_form.tags) }}
                        {{ form_widget(edit_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(edit_form.researchContributersRoles) }}
                        <p>
                            <input type="text" id="numberOfContributers" value="{{ edit_form.researchContributersRoles|length }}" hidden>
                        </p>
                        <div id="contributers" class="col-md-12"
                             data-prototype="
                             {% apply escape() %}
                                 {{ include('@syndexAcademic/Research/prototype.html.twig', { 'form': edit_form.researchContributersRoles.vars.prototype }) }}
                             {% endapply %}">
                            {% for contributerRole in edit_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(edit_form.researchReferences) }}
                        <p>
                            <input type="text" id="numberOfReferences" value="{{ edit_form.researchReferences|length }}" hidden>
                        </p>
                        <div id="researchReference-fields-list" class="col-md-12"
                             data-prototype="{{ form_widget(edit_form.researchReferences.vars.prototype)|e }}">
                            {% for researchReference in edit_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>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4 col-xs-12">
                            <input type="submit" id="new-research-submit"  value="{{ 'form.submit.new'|trans }}" class="btn submit-button"/>
                        </div>
                    </div>
                    {{ form_row(edit_form.research_token) }}
                </form>
            </div>

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

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

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/syndexacademic/js/similar_entities.js') }}"></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";
            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 %}