{% extends "layoutBack.html.twig" %}

{% block title "Ajouter utilisateur" %}
{% block stylesheets %}
    <!-- Typeahead Styling  -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/typeahead/typeahead.css') }}" />
    <!-- DateTime Picker  -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/bootstrap-datepicker.css') }}" />

    <!-- Switch Buttons  -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/switch-buttons/switch-buttons.css') }}" />

    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload.css') }}" />
    <link rel="stylesheet" href="{{ asset('backEnd/assets/css/plugins/file-upload/jquery.fileupload-ui.css') }}" />

{% endblock %}
{% block body %}
    <div class="warper container-fluid">
        <div class="panel panel-primary">
            <div class="panel-heading">Ajouter un utilisateur </div>
            <div class="panel-body">
                <div class="row" id="dataContainer">
                    <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <!-- TypeaHead -->
    <script src="{{ asset('backEnd/assets/js/plugins/typehead/typeahead.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('backEnd/assets/js/plugins/typehead/typeahead.bundle-conf.js') }}" type="text/javascript"></script>

    <!-- InputMask -->
    <script src="{{ asset('backEnd/assets/js/plugins/inputmask/jquery.inputmask.bundle.js') }}" type="text/javascript"></script>

    <!-- moment -->
    <script src="{{ asset('backEnd/assets/js/moment/moment.js') }}" type="text/javascript"></script>

    <!-- DateTime Picker -->
    <script src="{{ asset('backEnd/assets/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script>
        function refresh() {
            var dataContainer = $('#dataContainer');
            $.ajax({
                url: "{{  path('admin_add_user_ajax')}}",
                type: "POST",
                dataType: "html",
                success: function (data) {
                    dataContainer.html(data);
                    $('.datepicker').datepicker({
                        format: "dd/mm/yyyy"
                    });
                    $('.chosen-select').select2({allowClear: true});
                }
            });
        }

        $(function(){

            refresh();
            $('.chosen-select').select2({allowClear: true});
            $('body').on('submit', "form[name=dev_freelancebundle_user_admin]", function (e) {
                e.preventDefault();
                var dialog = bootbox.dialog({
                    message: '<p class="text-center">En cours...</p><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% Complete</span> </div> </div>',
                    closeButton: false
                });
                $.ajax({
                    type: "POST",
                    url: "{{  path('admin_add_user_ajax')}}",
                    data: new FormData($(this)[0]),
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function (data) {
                        dialog.modal('hide');
                        if(data == "success")
                        {
                            toastr.success('L\'utilisateur est ajouté avec succès');
                            refresh();
                        }else {
                            $('#dataContainer').html(data);
                            $('.datepicker').datepicker({
                                format: "dd/mm/yyyy"
                            });
                        }
                    }
                });
            });

        });
    </script>

{% endblock %}