{% extends "ChakaUserBundle:User:layout.html.twig" %}
{% block title %}{{ parent() }}{% endblock %}
{% block pagetitle %}Utilisateurs{% endblock %}
{% block breadcrumb %}
    {{ parent() }}
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-md-4">
            <article class="content-block">
                <div id="form-content" class="form">
                    <div id="form-wrapper">
                        {% include "ChakaUserBundle:User:form_user.html.twig" %}
                    </div>
                    <div class="clear clearfix"></div>
                    <div id="formResponse" class="alert alert-dismissable alert-success">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <p></p>
                    </div>
                    <div class="wait-content"></div>
                </div>
            </article>
        </div>

        <div class="col-md-8">
            <article id="table-wrapper" class="content-block">
                {#<div id="delResponse" class="alert alert-dismissable alert-success">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <p></p>
                </div>#}
                <div id="table-content">
                    {% include "ChakaUserBundle:User:table_list.html.twig" %}
                </div>
            </article>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        function effacer (form) {
            $(':input',form)
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            $(':input[name="id"]',form)
                    .val('0');
        }


        //soumission formulaire
        $('#formResponse').hide();
        $(document.body).on("submit","#form-users",function () {
            $('#btn-save').html(" <i class='icon icon-spin5 animate-spin'></i> Patienter ...");
            var urlSubmit = $(this).attr('action');
            //alert(urlSubmit);

            $.ajax({
                type: "POST",
                url: urlSubmit,
                data: $(this).serialize(),
                success: function (data) {
                    $('#btn-save').html('<i class="icon icon-download"></i> Enregistrer');
                    $('#formResponse p').html("Utilisateur ajouté avec succès");
                    $('#formResponse').show('slow');
                    effacer('#form-camp');
                    $( "#table-content" ).html(data);

                    


                },
                error: function (event, xhr, ajaxOptions, thrownError) {
                    $('#btn-save').html('<i class="icon icon-download"></i> Enregistrer');
                }
            });
            return false;
        });


        $(document.body).on('click', 'a.update', function (e) {
            var link = $(this);
            var src = $(this).attr('href');

            link.html('<span class="icon icon-spin5 animate-spin"></span>');
            $("#form-wrapper").load(src, function (response, status, xhr) {
                if (status == "success") {
                    $(this).html(response);
                    link.html('<span class="icon icon-pencil"></span>');
                }
                else if (status == "error") {
                    alert(xhr.status + " " + xhr.statusText);
                    link.html('<span class="icon icon-pencil"></span>');
                }
            });
            return false;
        });

        //Chargement à la supression d'un élément
        $(document.body).on('click', 'a.delete', function (e) {
            var confirmation = confirm("Voulez vous vraiment supprimer cet utilisateur ?");
            if (confirmation == false) {
                return false;
            } else {
                var link = $(this);
                var src = $(this).attr('href');
                //alert(src)

                $("#table-content .wait").show();
                $('#table-wrapper').prepend("<div id='delResponse' class='alert alert-dismissable alert-success'> <button type='button' class='close' data-dismiss='alert'>×</button> <p></p></div>");
                $('#delResponse').hide();
                $(this).html('<span class="icon icon-spin5 animate-spin"></span>');
                $.ajax({
                    type: "GET",
                    url: src,
                    data: $(this).serialize(),
                    success: function (data) {

                        $('#delResponse p').html(data);
                        //Chargement du tableau
                        //var currentPage = $('.navigation .pagination .active span').text();
                        //var src = "{#{{ path('agences_table_list',  {'page': 'NUMPAGE'}) }}#}";
                        //src = src.replace("NUMPAGE", currentPage);

                        var src = '{{ path("chaka_user_table_list") }}';

                        $("#table-content").load(src, function (response, status, xhr) {
                            if (status == "success") {
                                $(this).html(response);
                                $(document.body).find('#delResponse').show('fast');
                            }
                            else if (status == "error") {
                                //alert( xhr.status + " " + xhr.statusText );

                                $("#delResponse").removeClass("alert-success");
                                $("#delResponse").addClass("alert-danger");
                                $('#delResponse p').text('Erreur lors de la supression de l\'élément message:[xhr.status ' + ' ' + xhr.statusText + ']');
                                $('#delResponse').show('fast');

                                link.html('<span class="icon icon-trash"></span>');
                            }
                        });
                    },
                    error: function (event, xhr, ajaxOptions, thrownError) {
                        link.html('<span class="icon icon-trash"></span>');
                        $('#table-wrapper').prepend("<div id='delResponse' class='alert alert-dismissable alert-danger'> <button type='button' class='close' data-dismiss='alert'>×</button> <p>Erreur lors de la supression de l'élément</p></div>");
                    }
                });
                return false;
            }
        });


        $('.clearForm').click(function () {
            effacer('#form-camp');
            return false;
        });



    </script>
{% endblock %}