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

{% block title "Gestion des utilisateurs" %}
{% block stylesheets %}
    <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-body">
                <div class="row">
                    <div class="col-sm-7">
                        <span class="btn btn-success" id="js-add">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>Ajouter un utilisateur</span>
                        </span>
                    </div>
                </div>
            </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">Liste des utilisateurs <span id="js-type-user"></span></div>
        <div class="panel-body">
            <div class="row hide-print">

                <div class="col-md-12" style="float: right!important;">

                    <div class="col-md-6 form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="js-keyword" placeholder="Recherche ..." maxlength="40">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="button" id="js-search"><span class="glyphicon glyphicon-search"></span></button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <select id="js-perpage" class="form-control">
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>

                    <div class="col-md-3">

                        <div class="btn-group pull-right">
                            <button class="btn btn-primary "><span class="glyphicon glyphicon-cog"></span>  Selectioner un rôle</button>
                            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <span class="dropdown-arrow dropdown-arrow-inverse"></span>
                            <ul class="dropdown-menu dropdown-inverse">
                                <li class="js-role active" data-action=""><a href="#"><span class="glyphicon glyphicon-ok-circle"></span> Tous</a></li>
                                <li class="divider"></li>
                                <li class="js-role" data-action="1"><a href="#"><span class="glyphicon glyphicon-user"></span> Administrateur</a></li>
                                <li class="divider"></li>
                                <li class="js-role" data-action="2"><a href="#"><span class="glyphicon glyphicon-user"></span> Employer</a></li>
                                <li class="divider"></li>
                            </ul>
                        </div>

                    </div>

                </div>

            </div>
            <div  id="dataContainer">
                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
            </div>

            <!-- Modal -->
            <div class="modal fade" id="js-info-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
                            <h4 class="modal-title" id="myModalLabel">Information utilisateur</h4>
                        </div>
                        <div {#class="modal-body"#}>
                            <div id="js-user-content" class="col-md-12 defaultBG" style="margin-top: 25px;padding-top: 25px;"></div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-top: 25px;">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="js-add-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
                            <h4 class="modal-title" id="myModalLabel">Ajouter un utilisateur</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row" id="js-add-content">
                                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="js-update-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modifier utilisateur</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row" id="js-update-content">
                                <img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascripts %}
    <!-- 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>
    <script src="{{ asset('backEnd/assets/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script>
        var userId = 0;
        function refreshList() {
            var dataContainer = $('#dataContainer');
            dataContainer.html('<img class="img-responsive" src="{{ asset('backEnd/assets/images/loading/loading.gif') }}" style="margin: 0 auto;">');
            var keyword = $('#js-keyword').val();
            var npg = $('#js-perpage').val();
            npg = typeof npg !== 'undefined' ? npg : 10;
            var param = 'limit=' + npg;
            if(keyword != "")
            {
                param+= "&keyword="+encodeURIComponent(keyword);
            }
            var role = $(".js-role.active").attr('data-action');
            if(role != "")
            {
                param+= "&role="+role;
            }
            $.ajax({
                url: "{{  path('admin_list_ajax')}}",
                type: "GET",
                data : param,
                dataType: "html",
                success: function (data) {
                    dataContainer.html(data);
                    $('#dataTableUser').DataTable(
                            settingsDataTable()
                    );
                }
            });
        }


        function formUser() {
            $.ajax({
                url: "{{  path('admin_add_user_ajax')}}",
                type: "POST",
                dataType: "html",
                success: function (data) {
                    $('#js-add-content').html(data);
                    $('.datepicker').datepicker({
                        format: "dd/mm/yyyy"
                    });
                    $('.chosen-select').select2({allowClear: true});

                }
            });
        }
        function updateUser(id) {
            userId = id;
            $.ajax({
                url: Routing.generate('admin_update_user_ajax', { id: id }),
                type: "POST",
                dataType: "html",
                success: function (data) {
                    $('#js-update-content').html(data);
                    $('.datepicker').datepicker({
                        format: "dd/mm/yyyy"
                    });
                    $('.chosen-select').select2({allowClear: true});
                    $('#js-update-user').modal('show');
                }
            });
        }
        function lockUser(id){
            bootbox.confirm({
                title: "Bloquer/Débloquer Utilisateur",
                message: "Voulez vous (activer/désactiver) cet utilisateur?",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Annuler'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirmer'
                    }
                },
                callback: function (result) {
                    if (result)
                    {
                        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
                        });
                        $.post(Routing.generate('admin_lock_user', { id: id }),
                            function(response){
                                if(response.code == 200 && response.success){
                                    refreshList();
                                    dialog.modal('hide');
                                    toastr.success('Utilisateur modifié avec succès');
                                }else{
                                    dialog.modal('hide');
                                    bootbox.alert("problème de mise à jour");
                                }

                            }, "json");
                    }
                }
            });
        }
        function removeUser(id){
            bootbox.confirm({
                title: "Supprimer Utilisateur",
                message: "Voulez vous Supprimer cet utilisateur? Cette action ne peut pas être annulé.",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Annuler'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirmer'
                    }
                },
                callback: function (result) {
                    if (result)
                    {
                        $.post(Routing.generate('admin_remove_user', { id: id }),
                                function(response){
                                    if(response.code == 200 && response.success){
                                        refreshList();
                                        toastr.success('Utilisateur supprimé avec succès');
                                    }else{
                                        bootbox.alert("problème de mise à jour");
                                    }

                                }, "json");
                    }
                }
            });
        }
        function detailUser(id){
            $.ajax({
                url: Routing.generate('admin_detail_ajax', { id: id }),
                type: "GET",
                dataType: "html",
                success: function (data) {
                    $("#js-user-content").html(data);
                    $('#js-info-user').modal('show');
                }
            });
        }

        $(function(){
            refreshList();
            $('#dataContainer').on('click', "ul.pagination a" , function(e){
                var url = $(this).attr('href');
                var keyword = $('#js-keyword').val();
                if(keyword != "")
                {
                    url+= "&keyword="+encodeURIComponent(keyword);
                }
                $.ajax({
                    type: "GET",
                    url: url
                })
                    .done(function( msg ) {
                        $('#dataContainer').html(msg);
                        $('#dataTableUser').DataTable(
                                settingsDataTable()
                        );
                    });
                e.preventDefault();
            });
            $('#js-perpage').change(function(e){
                refreshList();
            });

            $('#js-search').click(function(e){
                refreshList();
            });

            $('#js-keyword').keyup(function(e){
                refreshList();
            });

            $('.js-role').click(function(e){
                $('.js-role').removeClass("active");
                $('.js-role').find( "span" ).removeClass("glyphicon-ok-circle").addClass("glyphicon-user");
                $(this).addClass("active");
                $(this).find( "span" ).removeClass("glyphicon-user").addClass("glyphicon-ok-circle");
                $("#js-type-user").html("( "+$(this).text()+" )");
                refreshList();
            })
            $('#js-add').click(function(e){
                formUser();
                $('#js-add-user').modal('show');
                $('.chosen-select').select2({allowClear: true});
            })
            $('#js-add-user').on('submit', "form[name=dev_freelancebundle_user_admin]", function (e) {
                e.preventDefault();
                $('#js-add-user').modal('hide');
                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');
                            refreshList();
                        }else {
                            $('#js-add-content').html(data);
                            $('.datepicker').datepicker({
                                format: "dd/mm/yyyy"
                            });
                            $('#js-add-user').modal('show');
                        }
                    }
                });
            });

            $('#js-update-user').on('submit', "form[name=dev_freelancebundle_user_admin]", function (e) {
                e.preventDefault();
                $('#js-update-user').modal('hide');
                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: Routing.generate('admin_update_user_ajax', { id: userId }),
                    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 modifié avec succès');
                            refreshList();
                        }else {
                            $('#js-update-content').html(data);
                            $('.datepicker').datepicker({
                                format: "dd/mm/yyyy"
                            });
                            $('#js-update-user').modal('show');
                        }
                    }
                });
            });

        });
    </script>
{% endblock %}