{% extends '::base.html.twig' %}
{% form_theme form 'AppBundle:Form:form_div_layout.html.twig' %}
{% block body -%}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h6>Exams Conclusions</h6></div>
                <div class="panel-body">
                    <div class="button_container">
                        <a class="" href="{{ path('exam') }}">
                            Back to the list
                        </a>
                    </div>
                    {{ form_errors(form) }}

                    <form action="" method="post" {{ form_enctype(form) }}>
                        <h5><strong> Overall Conclusion</strong> </h5>
                        <ul class="examConclusions" data-prototype="">
                            {% for examConclusions in form.examConclusions %}
                                <li>
                                    {{ form_row(examConclusions.fromPercentage) }}
                                    {{ form_row(examConclusions.toPercentage) }}
                                    {{ form_row(examConclusions.image) }}
                                </li>
                            {% endfor %}
                        </ul>
                        <h5> <strong>Subjectwise Conclusion </strong> </h5>
                        <ul class="examConclusionsSubjectwise" data-prototype="">
                            {% for examConclusionsSubjectwise in form.examConclusionsSubjectwise %}
                                <li>
                                    {{ form_row(examConclusionsSubjectwise.subject) }}
                                    {{ form_row(examConclusionsSubjectwise.fromPercentage) }}
                                    {{ form_row(examConclusionsSubjectwise.toPercentage) }}
                                    {{ form_row(examConclusionsSubjectwise.image) }}
                                </li>
                            {% endfor %}
                        </ul>
                        {{ form_widget(form._token) }}
                        {{ form_errors(form._token) }}
                        {{ form_widget(form.submit) }}
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="examConclusionsContainer" data-prototype="{{form_widget(form.examConclusions.vars.prototype)|e}}" ></div>
    <div id="examConclusionsSubjectwiseContainer" data-prototype="{{ form_widget(form.examConclusionsSubjectwise.vars.prototype)|e }}"></div>
    <iframe id="form_target" name="form_target" style="display:none"></iframe>
    <form id="my_form" action="{{ path('text_editor_image_upload') }}" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden">
        <input name="image" type="file" onchange="$('#my_form').ajaxSubmit({success: function (d) {
                        eval(d);
                    }});
                this.value = '';">
    </form>
{% endblock %}
{% block userscripts %}
    <script type="text/javascript" >
        var $collectionHolder;
        var $collectionHolderSub;


        var $addConclusionLink = $('<button class="add_examConclusions_link btn btn-sm btn-default">Add Conclusion</button>');
        var $newLinkLi = $('<li></li>').append($addConclusionLink);

        var $addSubConclusionLink = $('<button  class="add_examSubjectConclusions_link btn btn-sm btn-default">Add Subject Conclusion</button>');
        var $newSubLinkLi = $('<li></li>').append($addSubConclusionLink);

        jQuery(document).ready(function () {

            loadTinyMCEEditor();
            // Get the ul that holds the collection of tags
            $collectionHolder = $('ul.examConclusions');

            $collectionHolder.find('li').each(function () {
                addConclusionDeleteLink($(this));
            });


            // add the "add a tag" anchor and li to the tags ul
            $collectionHolder.append($newLinkLi);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $addConclusionLink.on('click', function (e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addConclusion($collectionHolder, $newLinkLi, "examConclusionsContainer");
            });


            // Get the ul that holds the collection of tags
            $collectionHolderSub = $('ul.examConclusionsSubjectwise');

            $collectionHolderSub.find('li').each(function () {
                addConclusionDeleteLink($(this));
            });

            // add the "add a tag" anchor and li to the tags ul
            $collectionHolderSub.append($newSubLinkLi);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $collectionHolderSub.data('index', $collectionHolderSub.find(':input').length);

            $addSubConclusionLink.on('click', function (e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addConclusion($collectionHolderSub, $newSubLinkLi, "examConclusionsSubjectwiseContainer");
            });



        });

        function addConclusion($collectionHolder, $newLinkLi, $container) {


            // Get the data-prototype explained earlier
        {#            var prototype = $collectionHolder.data('prototype');#}
                var prototype = $("#" + $container).data("prototype");

                // get the new index
                var index = $collectionHolder.data('index');

                // Replace '__name__' in the prototype's HTML to
                // instead be a number based on how many items we have
        {#            #}
        {#            var newForm = $("#" + $container).html();#}
                var newForm = prototype.replace(/__name__/g, index);

                var textAreaId = $(newForm).attr("id");

        {#  tinyMCE.execCommand("mceAddControl",false, textAreaId);           #}


                // increase the index with one for the next item
                $collectionHolder.data('index', index + 1);

                // Display the form in the page in an li, before the "Add a tag" link li
                var $newFormLi = $('<li></li>').append(newForm);
                $newLinkLi.before($newFormLi);

                addConclusionDeleteLink($newFormLi);
                loadTinyMCEEditor();
            }

            function addConclusionDeleteLink($tagFormLi) {
                var $removeFormA = $('<button class="btn btn-sm btn-danger">delete this conclusion</button>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    // prevent the link from creating a "#" on the URL
                    e.preventDefault();

                    // remove the li for the tag form
                    $tagFormLi.remove();
                });
            }
    </script>

    <script type="text/javascript" src="{{ asset('bundles/app/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/app/js/jquery.form.js') }}"></script>
    <script type="text/javascript" >
        function loadTinyMCEEditor() {
            tinymce.init({
                selector: 'textarea',
                plugins: ["image"],{#            relative_urls: true,#}{#            remove_script_host: false,#}
                convert_urls: false,
                remove_script_host: true,
                file_browser_callback: function (field_name, url, type, win) {
                    if (type == 'image')
                        $('#my_form input').click();
                }
            });
        }

    </script>
{% endblock %}