{% extends "profile.html.twig" %}
{% set menu_selected = 'info' %}
{% set content_title = 'profile.info'|trans({}, 'FOSUserBundle') %}

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}
    {{ 'profile.profileEdit'|trans({}, 'FOSUserBundle') }}
{% endblock title%}


{% block css %}
    {{ parent() }}
    <style>
        body, div, a, h1, h2, h3, h4, h5, h6, p {
            font-family: 'Droid_Arabic_Kufi' , arial , helvetica !important;
        }
        .cropit-image-preview {
            background-color: #f8f8f8;
            background-size: cover;
            border: 1px solid #A0A0A0;
            border-radius: 3px;
            margin-top: 7px;
            width: 300px;
            height: 300px;
            cursor: move;
        }

        .cropit-image-preview-container {
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }

        .imageEditerWrapper {
            overflow: hidden;
        }

        .imageEditerWrapper #image-editor-slider {
            width: 300px;
            margin: 16px auto 0;
            position: relative;
            z-index: 10;
            display: block;
        }

        .cropit-image-background {
            opacity: .2;
            cursor: auto;
        }

        #selectImageBtn{
            margin-top: 16px;
        }


        .image-wrapper {
            width: 304px;
            height: 304px;
        }

        #profile_picture{
            width: 300px;
            height: 300px;
        }

      .scroller::-webkit-scrollbar { width: 15px;}
      .scroller::-webkit-scrollbar-track { background: #fdfdfd;}
      .scroller::-webkit-scrollbar-thumb { background: #00a55a; cursor: pointer;}
      .scroller::-webkit-scrollbar-thumb:hover {background: #ff8600;}

    </style>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/show.css?v=0.css') }}" />
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.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') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/tagmanager.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css') }}"/>
    
   
{% endblock %}

{% block fos_user_content %}
    <div>
        <div id="tabs" class="row-fluid" >
            <ul class="nav nav-tabs shamra-tabs" role="tablist">
                <li class="tab active" role="tab" tabindex="0" tab-content="info_tab"><a href="#home" role="presentation" >{{ 'profile.basic_info' | trans({}, 'FOSUserBundle')}}</a></li>
                <li class="tab added_places_tab" role="tab" tab-content="picture_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.picture' | trans({}, 'FOSUserBundle')}}</a></li>
                <li class="tab added_places_tab" role="tab" tab-content="second_info_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.additional_info' | trans({}, 'FOSUserBundle')}}</a></li>
                {% if user.partner is not null and user.partner.frontPrivateCardImage is not null and user.partner.backPrivateCardImage is not null %}
                    <li class="tab added_places_tab" role="tab" tab-content="privateCard_tab" ><a disabled="disabled" role="presentation" >{{ 'profile.privateCard' | trans({}, 'FOSUserBundle')}}</a></li>
                {% endif %}
            </ul>
        </div>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="info_tab">
                <div class="row">
                    <div class="col-md-7">
                        <h2>{{ 'profile.basic_info' | trans({}, 'FOSUserBundle')}}</h2>
                        {% for flashMessage in app.session.flashbag.get('user_change_info_success') %}
                            <div class="alert alert-success" role="alert">
                                {{ flashMessage | trans({},'FOSUserBundle') }}
                            </div>
                        {% endfor %}
                        <form action="{{ path('user_profile_edit', {'username':app.user.getUsername()}) }}" enctype="multipart/form-data" method="POST" class="form-horizontal fos_user_profile_edit" novalidate>

                            {{form_row(form._token)}}

                            <div class="form-group" id="email">
                                <label for="{{ form.email.vars.id }}" class="col-md-4 control-label"> {{ 'form.email'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.email ,{'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.email'|trans}} ) }}
                                    {{ form_errors(form.email) }}
                                </div>
                            </div>
                            {% if form.firstName is defined %}
                                <div class="form-group">
                                    <label for="{{ form.firstName.vars.id }}" class="col-md-4 control-label"> {{ 'form.firstname'|trans }} </label>
                                    <div class="col-md-8">
                                        {{ form_widget(form.firstName, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.firstname'|trans}}) }}
                                        {{ form_errors(form.firstName) }}
                                    </div>
                                </div>
                            {% endif %}

                            {% if form.lastName is defined %}
                                <div class="form-group">
                                    <label for="{{ form.lastName.vars.id }}" class="col-md-4 control-label">  {{ 'form.lastname'|trans }}  </label>
                                    <div class="col-md-8">
                                        {{ form_widget(form.lastName, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.lastname'|trans}}) }}
                                        {{ form_errors(form.lastName) }}
                                    </div>
                                </div>
                            {% endif %}

                            {% if form.studyField is defined %}
                                <div class="form-group">
                                    <label for="{{ form.studyField.vars.id }}" class="col-md-4 control-label">{{ 'form.study_field' | trans({},'FOSUserBundle') }} <span style="color:grey;font-size:11px"> ({{ 'form.parantheses' | trans({},'FOSUserBundle') }}) </span></label>
                                    <div class="col-md-8">
                                        {{ form_widget(form.studyField) }}
                                        {{ form_errors(form.studyField) }}
                                    </div>
                                </div>
                            {% endif %}
                            <div class="form-group">
                                <label for="{{ form.country.vars.id }}" class="col-md-4 control-label"> {{ 'form.country'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.country, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.country'|trans}}) }}
                                    {{ form_errors(form.country) }}
                                </div>
                            </div>

                        
                            <div class="form-group">
                                <label for="{{ form.cell.vars.id }}" class="col-md-4 control-label"> {{ 'form.cell'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.cell, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.cell'|trans}}) }}
                                    {{ form_errors(form.cell) }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.gender.vars.id }}" class="col-md-4 control-label"> {{ 'form.gender'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.gender, {'attr':{'class' : 'form-control'}}) }}
                                    {{ form_errors(form.gender) }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.birthdate.vars.id }}" class="col-md-4 control-label"> {{ 'form.birthdate'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.birthdate) }}
                                    {{ form_errors(form.birthdate) }}
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="{{ form.publicProfile.vars.id }}" class="col-md-4 control-label"> {{ 'registration.publicProfile'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(form.publicProfile ) }}
                                    {{ form_errors(form.publicProfile ) }}
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-2 control-label" style="padding-top:0;">
                                    <label>
                                        <input type="radio" name="emailRecivedType" id="email-checkbox-all" value="true"/>
                                    </label>
                                </div>
                                <div class="col-sm-10">
                                    <div id="email-all">
                                        {{ 'profile.show.switchAll'|trans({}, 'FOSUserBundle') }}
                                    </div> 
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-2 control-label" style="padding-top:0;">
                                    <label>
                                        <input type="radio" name="emailRecivedType" id="email-checkbox-not-all" value="false"/>
                                    </label>
                                </div>
                                <div class="col-sm-10">
                                    <div id="email-not-all">
                                        {{ 'profile.show.switchNotAll'|trans({}, 'FOSUserBundle') }}
                                    </div>
                                </div>
                            </div>

                            {{ form_errors(form) }}
                            <span class="input-group-btn">
                                <button type="submit" class="btn" style="color:white;background-color: #00a550;margin:auto;display: block;">
                                    <i class="fa fa-save" data-placement="bottom" data-toggle="tooltip" title="{{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}"></i>
                                    {{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}
                                </button>
                            </span>
                        </form>
                    </div>


                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="picture_tab">

                <div class="row">
                    <div class=' col-md-7'>
                        <h2>{{ 'profile.picture' | trans({}, 'FOSUserBundle')}}</h2>
                        <div class="image-wrapper thumbnail center-block">
                            <img id="profile_picture" src="{{ asset(userman.getProfileImagePath ~ app.user.image) }}" alt='Profile Picture' class='img-rounded img-responsive center-block profile-image'>
                        </div>

                        <form action="{{ path('profile_image_echosan') }}" method="POST" enctype="multipart/form-data">
                            <input id="imageFileInput" type="file" accept="image/*" name="image" style="position:fixed;top:-1000px">
                        </form>

                        <button id="selectImageBtn" disabled="disabled" class="btn btn-shamra center-block">{{ 'profile.editor_modal.select_image'|trans({},'FOSUserBundle') }}  <i class="fa fa-spinner fa-pulse" style="display: none"></i></button>
                    </div>
                </div>

                  <div id="tui-image-editor"></div>

            </div>
            <div role="tabpanel" class="tab-pane" id="second_info_tab">
                <div class="row">
                    <div class="container">
                        <h2>{{ 'profile.additional_info' | trans({}, 'FOSUserBundle')}}</h2>
                    </div>
                    {% for flashMessage in app.session.flashbag.get('user_change_info_success') %}
                        <div class="alert alert-success" role="alert">
                            {{ flashMessage | trans({},'FOSUserBundle') }}
                        </div>
                    {% endfor %}
                    <div class="col-md-7">
                        <form name="additionalForm" action="{{ path('user_profile_edit', {'username':app.user.getUsername()}) }}" enctype="multipart/form-data" method="POST" class="form-horizontal fos_user_profile_edit" novalidate>

                            {{form_row(additionalForm._token)}}

                            <div class="form-group">
                                <label for="{{ additionalForm.facebookUrl.vars.id }}" class="col-md-4 control-label"> {{ 'form.facebookUrl'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.facebookUrl, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.facebookUrl'|trans}}) }}
                                    {{ form_errors(additionalForm.facebookUrl) }}
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="{{ additionalForm.linkedinUrl.vars.id }}" class="col-md-4 control-label"> {{ 'form.linkedinUrl'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.linkedinUrl, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.linkedinUrl'|trans}}) }}
                                    {{ form_errors(additionalForm.linkedinUrl) }}
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="{{ additionalForm.address.vars.id }}" class="col-md-4 control-label"> {{ 'form.address'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.address, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.address'|trans}}) }}
                                    {{ form_errors(additionalForm.address) }}
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="{{ additionalForm.work.vars.id }}" class="col-md-4 control-label"> {{ 'form.work'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.work, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.work'|trans}}) }}
                                    {{ form_errors(additionalForm.work) }}
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="{{ additionalForm.studyDegree.vars.id }}" class="col-md-4 control-label"> {{ 'form.studyDegree'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.studyDegree, {'attr':{'class' : 'form-control', 'placeholder' : 'form.placeholder.studyDegree'|trans}}) }}
                                    {{ form_errors(additionalForm.studyDegree) }}
                                </div>
                            </div>

                             <div id="tags-div" class="form-group">
                                <div class="col-md-4">
                                    <label class="control-label"  style="width: -webkit-fill-available;">{{ 'form.interests'|trans }}</label>
                                </div>
                                <div class="row col-md-8">
                                    {{ form_errors(additionalForm.interests) }}
                                    {{ form_widget(additionalForm.interests) }}
                                    <div class="col-md-4">
                                        <input id="tag-value" type="text" name="tags" size="35" class="tm-input form-control scroller"/>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="push-tag" type="button" value="{{ 'form.tags.add'|trans({},'lesson') }}" class="btn"/>
                                    </div>
                                </div>
                            </div>

                             <div class="form-group">
                                <label for="{{ additionalForm.languages.vars.id }}" class="col-md-4 control-label"> {{ 'form.languages'|trans }} </label>
                                <div class="col-md-8">
                                    {{ form_widget(additionalForm.languages) }}
                                    {{ form_errors(additionalForm.languages) }}
                                </div>
                            </div>


                            {{ form_errors(additionalForm) }}
                            <span class="input-group-btn">
                                <button type="submit" class="btn" style="color:white;background-color: #00a550;margin:auto;display: block;">
                                    <i class="fa fa-save" data-placement="bottom" data-toggle="tooltip" title="{{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}"></i>
                                    {{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}
                                </button>
                            </span>
                        </form>
                    </div>
                    <div class="col-md-5">
                         <form name="additionalForm" action="{{ path('user_profile_edit', {'username':app.user.getUsername()}) }}" enctype="multipart/form-data" method="POST" class="form-horizontal fos_user_profile_edit" novalidate>
                            <input type="hidden" name="_csrf_token"
                                value="{{ csrf_token('additionalForm') }}"
                            />                            
                            <h4> {{ 'form.just_biography'|trans }} </h4>
                            <div class="form-group">
                                <label for="additionalForm.bio" class="col-md-4 control-label"> {{ 'profile.Biography'|trans }} </label>
                                <div class="col-md-8">
                                    <textarea class="form-control" id="additionalForm.bio" name="bio"> {% if user.bio is not null %} {{ user.bio }} {% endif %} </textarea>
                                </div>
                            </div>
                            {{ form_errors(additionalForm) }}
                            <span class="input-group-btn">
                                <button type="submit" class="btn" style="color:white;background-color: #00a550;margin:auto;display: block;">
                                    <i class="fa fa-save" data-placement="bottom" data-toggle="tooltip" title="{{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}"></i>
                                    {{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}
                                </button>
                            </span>
                        </form>
                    </div>
                </div>
            </div>
             <div role="tabpanel" class="tab-pane" id="privateCard_tab">
                {% if user.partner is not null and user.partner.frontPrivateCardImage is not null and user.partner.backPrivateCardImage is not null %}
                    <form action="{{path('changePrivateCard',{'username':user.username})}}" method="POST"  enctype="multipart/form-data">
                        <div class="row" style="margin-top:10px;">
                            <div class="form-group col-md-12">
                                <div class="form-group col-md-6">
                                    <label>الجهة الامامية للهوية الشخصية:</label>
                                    <img class="img-responsive" src="{{asset('uploads/privateCard/') ~ user.partner.frontPrivateCardImage }}"/><br/>
                                    <b><input name="frontPrivateCardImage" type="file"   style="border-width:0px;" /></b>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>الجهة الخلفية للهوية الشخصية:</label>
                                    <img class="img-responsive" src="{{asset('uploads/privateCard/') ~ user.partner.backPrivateCardImage}}"/><br/>
                                    <b><input name="backPrivateCardImage" type="file"   style="border-width:0px;" /></b>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:10px;">
                            <span class="input-group-btn">
                                <button type="submit" class="btn" style="color:white;background-color: #00a550;margin:auto;display: block;">
                                    <i class="fa fa-save" data-placement="bottom" data-toggle="tooltip" title="{{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}"></i>
                                    {{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}
                                </button>
                            </span>
                        </div>
                    </form>
                {% endif %}
             </div>
                                    </div>        
            </div>
        </div>

    </div>
                            </div>    
    </div>

    <hr>


{% endblock fos_user_content %}


{% block nassJs %}
    {{ parent() }}

{% endblock %}


{% block jqueryui %}
    <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        var emailNotification = {{ email_notification }};
        if(emailNotification){
            document.getElementById('email-checkbox-all').checked = true;
        } else {
            document.getElementById('email-checkbox-not-all').checked = true;
        }
    </script>

    <script src="{{ asset('bundles/syndexacademic/js/bootstrap-filestyle.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/vendor/jquery.cropit.js') }}"></script>
    <script src="{{ asset('bundles/syndexacademic/js/tagmanager.js') }}" ></script>
    <script src="{{ asset('bundles/syndexacademic/js/bootstrap-filestyle.min.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>
     $(document).ready(function () {
            $("#registration_form_studyField").select2({width:'100%'});
            $('#registration_form_country').select2({
                placeholder: "اختر بلدك",
                width:'100%',
            });
    });
        $(document).ready(function () {
            var  $list_element = $('.cities-select');
            if ($list_element.val() === "") {
                $('.other-city').removeAttr('disabled');
            }else{
                $('.other-city').attr('disabled','disabled');
            }
            $list_element.select2();
            $list_element.on("select2:select", function (e) {
                if (e.params.data.id === "") {
                    $('.other-city').removeAttr('disabled').focus();
                }else{
                    $('.other-city').attr('disabled','disabled').val('');
                }
            });
        });
          $( ".tab" ).on("click",function () {
            var elm = this;
            $(this).tab("show");
            $(".tab-pane").fadeOut(300);
            setTimeout(function () {
                $("#"+$(elm).attr("tab-content")).fadeIn(300);
            },300)

        });
        $(document).ready(function(){
            $("#info_tab").fadeIn("slow");
            $("#fos_user_profile_form_studyField").select2({width:'100%'});
            $('#fos_user_profile_form_country').select2({
                placeholder: "اختر بلدك",
                width:'100%',
            });
        })
    </script>
   
    {# Profile picture things #}
    <script type="text/template" id="profile-image-editor-template">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{ 'profile.editor_modal.title'|trans({},'FOSUserBundle') }}</h4>
                    </div>
                    <div class="modal-body imageEditerWrapper">
                        <div id="image-editor" dir="ltr" style="direction: ltr">
                            <!-- The preview container is needed for background image to work -->
                            <div class="cropit-image-preview-container">
                                <div class="cropit-image-preview"></div>
                            </div>

                            <!--[if gt IE 9]> <!-- -->
                            <input id="image-editor-slider" type="range" class="cropit-image-zoom-input"/>
                            <![endif]-->

                            <!--[if lte IE 9]> <!-- -->
                            <div id="image-editor-slider"></div>
                            <![endif]-->


                        </div>

                    </div>
                    <div class="modal-footer">
                        <button id="btn-close" type="button" class="btn btn-default" data-dismiss="modal">{{ 'profile.editor_modal.close'|trans({},'FOSUserBundle') }}</button>
                        <button id="btn-crop" type="button" class="btn btn-shamra">{{ 'profile.editor_modal.done'|trans({},'FOSUserBundle') }} <i class="fa fa-spinner fa-pulse" style="display: none"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </script>
    
    <script>
        var ImageEditer = Backbone.View.extend({
            el: function () {
                return this.template();
            },
            template: _.template($('#profile-image-editor-template').html()),

            notyObject: null,

            lackClosing: false,

            events: {
                "hide.bs.modal": "modalHideCallBack",
                "hidden.bs.modal": "modalCloseCallBack",
                "click #btn-crop": "cropAndSend",
                "click button.close": "close",
                "click #btn-close": "close"
            },

            initialize: function (options) {
                this.$profileImgEl = options.profileImgEl;
                this.imageSrc = options.imageSrc;

                this.render();
            },

            render: function () {
                $('body').append(this.el);
                this.$imageEditor = this.$('#image-editor');
                this.$slider= this.$('#image-editor-slider');
                var that = this;
                this.$imageEditor.cropit({
                    imageBackground: true,
                    imageState: {
                        src: this.imageSrc
                    },
                    smallImage: 'stretch',
                    /**
                    * @param error {object} its value will be { code: 0, message: 'Image failed to load.' } or { code: 1, message: 'Image is too small.' }
                    */
                    onImageError: function (error){
                        var errors = {
                            0: "{{ 'profile.editor_modal.failed_to_load' | trans({},'FOSUserBundle') }}",
                            1: "{{ 'profile.editor_modal.failed_too_small' | trans({},'FOSUserBundle') }}"
                        }
                        that.showError(errors[error.code]);
                        that.close();
                    }
                });

                //use jquery ui slider if ie 9 and earlier
                if(this.getInternetExplorerVersion() < 10) {
                    this.$slider.slider({
                        min: 0,
                        max: 1,
                        step: 0.01,
                        slide: function (e, ui) {
                            that.$imageEditor.cropit('zoom', ui.value);
                        }
                    });
                }


                this.showModal();
                return this.el;
            },
            // Returns the version of Internet Explorer or a -1
            // (indicating the use of another browser).
            getInternetExplorerVersion: function(){
                var rv = 100000; // Return value assumes failure.
                if (navigator.appName == 'Microsoft Internet Explorer')
                {
                    var ua = navigator.userAgent;
                    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null)
                        rv = parseFloat( RegExp.$1 );
                }
                return rv;
            },
            showModal: function(){
                this.$el.modal({
                    show:true
                });
            },
            cropAndSend: function(e){
                this.hideMessage();
                this.lackClosing = true;
                var imageData = this.$imageEditor.cropit('export',{
                    type: 'image/jpeg',
                    quality: 1,
                    originalSize: true
                });
                var that = this;
                this.$imageEditor.cropit('disable');
                this.$('#btn-crop i').show();
                this.$('#btn-crop').prop('disabled', true);
                this.$('#btn-close').prop('disabled', true);

                {# TODO: handle errors #}
                var jqxhr = $.ajax({
                    type: "POST",
                    data: {'image': imageData},
                    url: "{{ path('profile_picture_upload') }}",
                    headers:{
                    'X-CSRF-Token': "{{ csrf_token('delete-item') }}"
                }
            }).done(function (data) {
                        if (data.success !== true) {
                            that.showError(data.message);
                        } else {
                            that.$profileImgEl.attr('src', imageData);
                            that.lackClosing = false;
                            that.close();
                        }
                    })
                    .fail(function () {
                        that.showError('{{ 'profile.editor_modal.uploading_image_error'|trans({},'FOSUserBundle') }}');
                    })
                    .always(function () {
                        that.$imageEditor.cropit('reenable');
                        that.$('#btn-crop i').hide();
                        that.$('#btn-crop').prop('disabled', false);
                        that.$('#btn-close').prop('disabled', false);
                        that.lackClosing = false;
                    });
        },
        close: function(){
            if(!this.lackClosing){
                this.$el.modal('hide');
            }
        },
        modalCloseCallback: function(){
            this.remove();
        },
        showError: function(msg){
            if( this.notyObject !== null && typeof(this.notyObject) !== "undefined" && this.notyObject.closed === false ){
                this.notyObject.setText(msg);
            }else{
                this.notyObject = noty({
                    text: msg,
                    layout: 'topCenter',
                    theme: 'relax',
                    type: 'error',
                    timeout: 5000
                });
            }
        },
        hideMessage: function(){
            if( this.notyObject !== null && typeof(this.notyObject) !== "undefined" && this.notyObject.closed === false ){
                this.notyObject.close();
            }
        },
        modalHideCallBack: function(e){
            if(this.lackClosing){
                return e.preventDefault();
            }
        }

        });

       var $profileImageForm = $('form'),
                $imageFileInput = $('#imageFileInput'),
                $selectImageBtn = $('#selectImageBtn'),
                $profilePictureEl = $('.profile-image'),
                notyObject = null;

        $selectImageBtn.prop('disabled',false);

        $selectImageBtn.on('click', function () {
            $imageFileInput.click();
        });

        $imageFileInput.on('change', function () {
            if(Modernizr.filereader){
                var file    = this.files[0];
                var reader  = new FileReader();

                reader.onloadend = function () {
                    cropImageModal(reader.result);
                    $imageFileInput.val('');
                };
                if (file) {
                    reader.readAsDataURL(file);
                } else {
                    formError();
                }
            }else{
                echosan();
            }

        });

        function echosan(){
            {# TODO: ie8 compability #}

            var options = {
                success: formSuccess,
                error: formError,
                complete: formComplete,
                type: 'post',
                dataType: 'html'
            };

            // bind form using 'ajaxForm'
            $profileImageForm.ajaxSubmit(options);
            $selectImageBtn.prop('disabled',true);
            $selectImageBtn.children('i').show();
            $imageFileInput.val('');
        }


        function formSuccess(responseText, statusText, xhr, $form) {
            if(statusText !== 'success'){
                formError();
                return;
            }
            cropImageModal(responseText);
        }

        function formComplete() {
            $selectImageBtn.prop('disabled',false);
            $selectImageBtn.children('i').hide();
        }

        function formError() {
            var msg = '{{ 'profile.editor_modal.uploading_image_error'|trans({},'FOSUserBundle') }}';
            if( notyObject !== null && typeof(notyObject) !== "undefined" && notyObject.closed === false ){
                notyObject.setText(msg);
            }else{
                notyObject = noty({
                    text: msg,
                    layout: 'topCenter',
                    theme: 'relax',
                    type: 'error',
                    timeout: 5000
                });
            }
        }

        function cropImageModal(imageSrc) {
            new ImageEditer({
                imageSrc: imageSrc,
                profileImgEl: $profilePictureEl
            });
        }

        $(document).ready(function () {
            {% for tag in user.interests %}
                jQuery(".tm-input").tagsManager('pushTag', '{{ tag.context }}');
            {% endfor %}
             var lastentry = "";
            $('.ui-helper-hidden-accessible').hide();
        })

        jQuery(".tm-input").tagsManager();
        $("input[name=hiddenTagListA]").change(function () {
            $("#additional_user_info_interests").val($("input[name=hiddenTagListA]").val());
        });
        
         // Applying jQuery plugin - Autocomplete
        function processTags(tags){
            var r= [];
            //var t = JSON.parse(tags)
            for(var i in tags){
                
            }
            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());
        });

        $("#additional_user_info_languages").select2({width:'100%'});

         $(":file").filestyle({
                buttonText: "&nbsp;استعراض",
                size: "nr",
                iconName: "glyphicon glyphicon-inbox",
                buttonBefore: true,
                badge: true,
                placeholder: "لم يتم اختيار ملف بـعد"
            });
        </script>

    </script>
{% endblock %}