{% extends "ClarolineCoreBundle:Administration:layout.html.twig" %}

{% block title %}
    {{ 
        parent() ~
        ' - ' ~
        'claroline_cursus_tool' | trans({}, 'tools') | striptags | raw ~
        ' - ' ~
        displayedWords['course'] ~
        ' - ' ~ 
        'course_creation'|trans({}, 'cursus')
    }}
{% endblock %}

{% block breadcrumb %}
    {{
        macros.breadcrumbs([
            {
                'icon': 'fa fa-cog',
                'name': 'administration'|trans({}, 'platform'),
                'href': path('claro_admin_index')
            },
            {
                'name': 'claroline_cursus_tool'|trans({}, 'tools'),
                'href': path('claro_cursus_tool_index')
            },
            {
                'name': displayedWords['course'],
                'href': path('claro_cursus_tool_course_index')
            },
            {
                'name': 'course_creation'|trans({}, 'cursus'),
                'href': ''
            }
        ])
    }}
{% endblock %}

{% block section_content %}
    <div class="panel-heading">
        <h3 class="panel-title">
            {{ 'course_creation'|trans({}, 'cursus') }}
        </h3>
    </div>
    <form action="{{ path('claro_cursus_course_create') }}" 
          method="POST"
          {{ form_enctype(form) }}
          novalidate
    >
        <div class="panel-body">
            {% include 'ClarolineCursusBundle:Cursus:toolMenuIndexTabs.html.twig'%}
            <br>
            
            {{ form_widget(form) }}
            <div id="role-name-choice">
                <div class="form-group row">
                    <label class="control-label col-md-3"
                           for="course_form_tutorRoleName"
                    >
                        {{ 'course_form_tutorRoleName'|trans({}, 'cursus') }}
                    </label>
                    <div class="col-md-9">
                        <select id="tutor-role-name-choice"
                                class="form-control"
                        >
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="control-label col-md-3"
                           for="course_form_learnerRoleName"
                    >
                        {{ 'course_form_learnerRoleName'|trans({}, 'cursus') }}
                    </label>
                    <div class="col-md-9">
                        <select id="learner-role-name-choice"
                                class="form-control"
                        >
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button type="submit" class="btn btn-primary">
                {{ 'ok'|trans({}, 'platform') }}
            </button>
            <a href="{{ path('claro_cursus_tool_course_index') }}"
               class="btn btn-default" 
               role="button"
            >
                {{ 'cancel'|trans({}, 'platform') }}
            </a>
        </div>
    </form>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        
        function manageModelValue()
        {
            var value = $('#course_form_workspaceModel').val();
            
            if (value === '') {
                $('#role-name-choice').addClass('hidden');
                $('.role-name-txt').each(function () {
                    $(this).parents('.form-group').removeClass('hidden');
                });
                $('#tutor-role-name-choice').empty();
                $('#learner-role-name-choice').empty();
            } else {
                var tutorValue = $('#course_form_tutorRoleName').val();
                var learnerValue = $('#course_form_learnerRoleName').val();
                
                $.ajax({
                    url: Routing.generate(
                        'ws_model_roles_translation_keys_retrieve',
                        {'model': value}
                    ),
                    type: 'GET',
                    success: function (datas) {
                        $('#tutor-role-name-choice').empty();
                        $('#tutor-role-name-choice').append('<option value></option>');
                        $('#learner-role-name-choice').empty();
                        $('#learner-role-name-choice').append('<option value></option>');
                        
                        for (var i = 0; i < datas.length; i++) {
                            var option = '<option value="' +
                                datas[i] +
                                '">' +
                                datas[i] +
                                '</option>';
                            $('#tutor-role-name-choice').append(option);
                            $('#learner-role-name-choice').append(option);
                        }
                        $('.role-name-txt').each(function () {
                            $(this).parents('.form-group').addClass('hidden');
                        });
                        $('#role-name-choice').removeClass('hidden');
                        $('#tutor-role-name-choice option[value="' + tutorValue + '"]').prop('selected', true);
                        $('#learner-role-name-choice option[value="' + learnerValue + '"]').prop('selected', true);
                        $('#course_form_tutorRoleName').val($('#tutor-role-name-choice').val());
                        $('#course_form_learnerRoleName').val($('#learner-role-name-choice').val());
                    }
                });
            }
        }
        
        $('#tutor-role-name-choice').on('change', function () {
            var value = $(this).val();
            $('#course_form_tutorRoleName').val(value);
        });
        
        $('#learner-role-name-choice').on('change', function () {
            var value = $(this).val();
            $('#course_form_learnerRoleName').val(value);
        });
        
        $('#course_form_workspaceModel').on('change', function () {
            manageModelValue();
        });
        
        manageModelValue();
    </script>
{% endblock %}