{% extends "IcapDropzoneBundle:Correction:correct.html.twig" %}
{% set  commentInCorrectionRequired  = false %}
{% form_theme form "IcapDropzoneBundle::form_theme_bootstrap3.html.twig" %}

{% block dropzone_correct_content %}

    <div class="container">
        <div class="row">
            <form id="correct-form" method="POST"
                  action="{% if edit == false %}#{% elseif admin == true %}{{ path('icap_dropzone_drops_detail_correction_comment', {'resourceId': dropzone.id, 'state' : edit ? 'edit' : 'show', 'correctionId': correction.id}) }}{% else %}{{ path('icap_dropzone_correct_comment', {'resourceId': dropzone.id}) }}{% endif %}"
                  class="form-horizontal">

                {% if edit %}
                    <h3>{{ 'Warning'|trans({}, 'icap_dropzone') }}</h3>
                    <p>{{ 'You are about to make your correction. This action is final. The rating is %grade%/20'|trans({'%grade%': (totalGrade|number_format(2)) }, 'icap_dropzone') }}</p>
                    <p>{{ 'Are you sure you have done?'|trans({}, 'icap_dropzone') }}</p>
                {% endif %}

                {% if dropzone.allowCommentInCorrection %}

                    {{ form_errors(form) }}

                    {% if edit == true %}
                        {% if dropzone.forceCommentInCorrection %}
                            {% set commentInCorrectionRequired = 'required' %}
                            <p>{{ 'Please comment'|trans({}, 'icap_dropzone') }}</p>
                        {% else %}
                            <p>{{ 'Would you like to comment?'|trans({}, 'icap_dropzone') }}</p>
                        {% endif %}
                    {% else %}
                        <h3>{{ 'Comment'|trans({}, 'icap_dropzone') }}</h3>
                    {% endif %}


                    {% if edit %}

                        <div class="form-group ">
                            <div id="comment_part_div">
                                {{ form_row(form.comment, {'label_col_size': ' ', 'input_col_size': 'col-md-12', 'label_attr': {'style': 'display:none;' }}
                                ) }}
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="required_text" style="display:none;">
                                <p class="text-danger"><i class="fa fa-asterisk"></i>
                                    &nbsp;{{ "This field is required."|trans({},'icap_dropzone') }}</p>
                            </div>
                        </div>
                    {% else %}
                        <div class="well">
                            {{ correction.comment|raw }}
                        </div>
                    {% endif %}
                {% endif %}


                {{ form_rest(form) }}

                {% if edit == true %}
                    <div class="btn-group pull-right">
                        {% if admin == true %}
                            <a href="{{ path('icap_dropzone_drops_detail_correction_paginated', {'resourceId': dropzone.id, 'state' : state, 'correctionId': correction.id, 'page': nbPages}) }}"
                               class="btn btn-default back-button">{{ 'Previous'|trans({}, 'icap_dropzone') }}</a>
                        {% else %}
                            <a href="{{ path('icap_dropzone_correct_paginated', {'resourceId': dropzone.id, 'page': nbPages}) }}"
                               class="btn btn-default back-button">{{ 'Previous'|trans({}, 'icap_dropzone') }}</a>
                        {% endif %}
                        <button type="submit" class="btn btn-primary">
                            {{ 'Save and finished'|trans({}, 'icap_dropzone') }}</button>
                    </div>
                {% else %}
                    <div class="btn-group pull-right">
                        {% if state == 'preview' %}
                            <a href="{{ path('icap_dropzone_drop_detail_by_user', {'resourceId': dropzone.id,'dropId': correction.drop.id}) }}"
                               class="btn btn-default">
                                {{ 'Back to corrections'|trans({}, 'icap_dropzone') }}
                            </a>
                        {% endif %}
                        <a href="{{ path('icap_dropzone_drops_detail_correction_paginated', {'resourceId': dropzone.id, 'state' : state, 'correctionId': correction.id, 'page': nbPages}) }}"
                           class="btn btn-default">{{ 'Previous'|trans({}, 'icap_dropzone') }}</a>
                        <a href="#" class="btn btn-default disabled">{{ 'Next'|trans({}, 'icap_dropzone') }}</a>

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

        <div class="row">
            <strong>
                {{ nbPages+1 }} / {{ nbPages+1 }}
            </strong>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ tinymce_init() }}
    <script>
        tinymce.claroline.configuration.toolbar1 = 'bold italic strikethrough | alignleft aligncenter alignright alignjustify | ';
        $(document).on('ready', function () {
            $('#icap_dropzone_correct_comment_form_goBack').val(0);
            $('.back-button').on('click', function (event) {
                event.preventDefault();
                $('#icap_dropzone_correct_comment_form_goBack').val(1);
                $('#correct-form button[type="submit"]').trigger('click');
            });

            {% if dropzone.forceCommentInCorrection  == true and not admin %}
            $('#correct-form').submit(function (e) {
                if ($('#icap_dropzone_correct_comment_form_comment').val() == '') {
                    e.preventDefault();
                    setRequireStyle();
                    console.log(tinymce.get('icap_dropzone_correct_comment_form_comment'));
                    tinymce.get('icap_dropzone_correct_comment_form_comment').on('keyup', function (e) {
                        if (tinymce.get('icap_dropzone_correct_comment_form_comment').getContent() != '') {
                            removeRequiredStyle();
                        }
                    });
                }
            });
            {% endif %}
        });

        function removeRequiredStyle() {
            $('#comment_part_div').removeClass('required');
            $('.required_text').hide();
        }

        function setRequireStyle() {
            $('#comment_part_div').addClass('required');
            $('.required_text').show();
        }
    </script>

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        #comment_part_div.required .col-md-12 > div {
            border: 1px solid red;
        }
    </style>
{% endblock %}