{% extends 'base.html.twig' %}

{% trans_default_domain "community" %}

{% block title %}
 {{ 'title.new'|trans }}
{% endblock %} 


{% block stylesheets %}
    {{ parent() }}
    {# progress bar setting #}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/new.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/community.css?v2.6') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/academia.min.css') }}" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css?v.3.2 ') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/tagmanager.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/academia-section.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>

{% endblock %}

 {% block body %}
  {{ include('@syndexAcademic/Default/header.html.twig') }}
  <div class="container p-5">
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new"  class="col-xs-12 col-md-6 shadow">
                {# <center> 
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active bg-success" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="2">1/2</div>
                    </div>
                </center> #}
                <div id="page-header" class="new-research-header">
                    <span><i class="fa fa-plus"></i>&nbsp;  {{ 'title.new'|trans }}</span>
                </div>
                <br>
                <form id="community-form" class="form-horizontal"  action="{{ path('create_community') }}"   name="new_community" method="POST" novalidate  enctype="multipart/form-data">
                    {{form_row(form.community_token)}}

                    <div class="form-group">
                        <label class="control-label">{{ 'form.title'|trans }}</label>
                        {{ form_errors(form.title) }}
                        {{ form_widget(form.title) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.english_title'|trans }}</label>
                        {{ form_errors(form.englishTitle) }}
                        {{ form_widget(form.englishTitle) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.description'|trans }}</label>
                        {{ form_errors(form.description) }}
                        {{ form_widget(form.description) }}
                    </div>

                    <div class="form-group">
                        <label class="control-label">{{ 'form.cover_image'|trans }}</label>
                        {{ form_errors(form.coverImage) }}
                        {{ form_widget(form.coverImage) }}
                    </div>

                     <div id="tags-div" class="form-group">
                        <label class="control-label">{{ 'form.keywords.name'|trans }}</label>
                        {{ form_errors(form.keywords) }}
                        {{ form_widget(form.keywords) }}
                        <div class="row">
                            <div class="col-md-4">
                                <input id="tag-value" type="text" title="{{ 'form.keywords.placeholder'|trans }}" placeholder="{{ 'form.keywords.placeholder'|trans }}" name="keywords" size="35" class="tm-input form-control scroller"/>
                            </div>
                            <div class="col-md-4">
                                <input id="push-tag" type="button" value="{{ 'form.keywords.add'|trans }}" class="btn btn-secondary"/>
                            </div>
                        </div>

                    </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>
                        {{form_errors(form)}}               
                    {% endif %}
                   
                   

                     <div class="row">
                        <div class="col-md-5"></div>
                        <div class="button-placeholder">
                            <input type="submit" id="new-lesson-submit"  value="{{ 'form.submit'|trans }}" class="btn submit-button"/>
                        </div>
                    </div> 
            </form>
        </div>
    </div>
</div>
 {% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('bundles/syndexacademic/js/bootstrap-filestyle.min.js') }}"></script>
    <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/tagmanager.js') }}" ></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.2/jquery.qtip.js"></script>
    <script src="{{ asset('bundles/syndexacademic/js/jquery.are-you-sure.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jsconf.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/file.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/date.js"></script>
    <script>

        var config = {
            // ordinary validation config
            form: '#community-form',
            // reference to elements and the validation rules that should be applied
            validate: {
                '#community_title': {
                    validation: 'required, length',
                    length: 'max100',
                    'error-msg-required': "{{'form.error.title.blank'|trans}}",
                    'error-msg-length': "{{'form.error.title.length'|trans}}"
                },
                '#community_englishTitle': {
                    validation: 'required, length',
                    length: 'max100',
                    'error-msg-required': "{{'form.error.english_title.blank'|trans}}",
                    'error-msg-length': "{{'form.error.english_title.length'|trans}}"
                },
                '#community_description': {
                    validation: 'required, length',
                    length: 'max254',
                    'error-msg-required': "{{'form.error.description.blank'|trans}}",
                    'error-msg-length': "{{'form.error.description.length'|trans}}"
                },
                '#community_coverImage': {
                    validation: 'required, size, document_mime',
                    'max-size': '5M',
                    'error-msg-required': "{{'form.error.cover_image.blank'|trans}}",
                    'error-msg-size': "{{'form.error.cover_image.size'|trans}}"
                },
            }
        };

        $.formUtils.addValidator({
            name: 'document_mime',
            validatorFunction: function (value, $el, config, language, $form) {
                var ext = $('#course_imageCover').val().split('.').pop().toLowerCase();
                if ($.inArray(ext, ['png','jpg', 'jpeg']) !== -1) {
                    return true;
                }
            },
            errorMessage: "{{'form.error.cover_image.type'|trans}}"
        });

        $.validate({
            modules: 'jsconf, file, date',
            validateOnBlur : true,
            borderColorOnError: '#00FF00',
            onModulesLoaded: function () {
                $.setupValidation(config);
            }
        });

        $(document).ready(function () {
            // Processing and rendering tags.

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

            var lastentry = "";
            $('.ui-helper-hidden-accessible').hide();
        });

        jQuery(".tm-input").tagsManager();
        $("input[name=hiddenTagListA]").change(function () {
            $("#community_keywords").val($("input[name=hiddenTagListA]").val());
        });
        // Applying jQuery plugin - Autocomplete
        function processTags(tags){
            var r=[];
            //var t = JSON.parse(tags)
            for(var i in tags){
                r.push(tags[i].context)
            }
            return r
        }
        $(".tm-input").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: Routing.generate('shamra_academia_get_tag_suggestions'),
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        response( processTags(data) );
                    }
                });
            },
                //data :: JSON list defined
                //processTags(Routing.generate('shamra_academia_get_tag_suggestions')),
            minLength: 1
        });
        $('#push-tag').click(function () {
            jQuery(".tm-input").tagsManager('pushTag', $('#tag-value').val());
        });
        // Document upload processing...
        $(":file").filestyle({
            buttonText: "&nbsp;استعراض",
            size: "nr",
            iconName: "glyphicon glyphicon-inbox",
            buttonBefore: true,
            badge: true,
            placeholder: "لم يتم اختيار ملف بـعد"
        });
        // Applying jQuery plugin - Autocomplete
        $(document).on('keyup', '[id$=email]', function (e) {
            $(this).autocomplete({
                source: Routing.generate('shamra_academia_user_autoComplete'),
                minLength: 8
            });
        });
        
    </script>

    <script type="text/javascript">
        var pageNumber = $(".progress-bar").attr("aria-valuenow") == ""?0:parseInt($(".progress-bar").attr("aria-valuenow"));
        var numberOfPages =  parseInt( $(".progress-bar").attr("aria-valuemax") )
        $(".progress-bar").css("width", (pageNumber/numberOfPages)*100 + "%");
    </script>
{% endblock %}