{% extends 'ChakaOutbandNumeroBundle:base.html.twig' %}
{% block pagetitle %}Chargement outband {% 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 "ChakaOutbandNumeroBundle:outbandNumero:edit_form.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>
            <article class="content-block" style="margin-top:30px">
                <div id="form-content1" class="form">
                    <div id="form-wrapper">
                        <header class="block-header">
                            <h2 class="block-title">Charger un fichier CSV
                                <a class="btn btn-primary" role="button" data-toggle="collapse" href="#formcontent"
                                   aria-expanded="false" aria-controls="formcontent">
                                    <i class="icon icon-down-open"></i>
                                </a></h2>
                        </header>
                        <div id="formcontent" class="collapse in">

                            <form id="form-outbandNumero-2" enctype="multipart/form-data" method="post" action="{{ path('outbandNumero_load_file') }}">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="file" name="fichier" id="fichier" class="form-control" required/>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button id="btn-save" type="submit" class="btn btn-primary btn-sm pull-right"><span
                                                    class="icon icon-download"></span> Enregistrer
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </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 "ChakaOutbandNumeroBundle:outbandNumero: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').slideUp();
        $(document.body).on("submit", "#form-outbandNumero", function () {
            $('.wait-content').slideDown();
            $('#btn-save').html(" <i class='icon icon-spin5 animate-spin'></i> Patienter ...");
            var urlSubmit = $(this).attr('action');
            //alert(urlSubmit);

            $("#table-content .wait").show();
            $.ajax({
                type: "POST",
                url: urlSubmit,
                data: $(this).serialize(),
                success: function (data) {
                    $('#btn-save').html('<i class="icon icon-download"></i> Enregistrer');

                    $("#formResponse").addClass("alert-success");
                    $('#formResponse p').html(data);
                    $('.wait-content').slideUp();
                    $('#formResponse').slideDown();

                    effacer('#form-outbandNumero');

                    //Chargement du tableau
                    var currentPage = $('.navigation .pagination .active span').text();

                    //alert(currentPage);
                    var src = "{{ path('outbandNumero_table_list',  {'page': 'NUMPAGE'}) }}";
                    src = src.replace("NUMPAGE", currentPage);

                    //alert(src);
                    $("#table-content").load(src, function (response, status, xhr) {
                        if (status == "success") {
                            $(this).html(response);
                        }
                        else if (status == "error") {
                            alert(xhr.status + " " + xhr.statusText);
                            $('#btn-save').html('<span class="glyphicon glyphicon-save"></span> Enregistrer');
                            $('#formResponse p').html(xhr.status + " " + xhr.statusText);
                            $('#formResponse').removeClass('alert-success').addClass('alert-danger').show('fast');
                        }
                    });
                    $("#form-outbandNumero").attr('action', '{{ path("outbandNumero_new") }}');
                },
                error: function (event, xhr, ajaxOptions, thrownError) {
                    //alert( xhr );
                    $("#formResponse").removeClass("alert-success");
                    $("#formResponse").addClass("alert-danger");
                    $("#formResponse p").text("Erreur lors de l'enregistrement [" + xhr + "]");
                    $('.wait-content').slideUp();
                    $('#formResponse').slideDown();
                    $('#btn-save').html('<i class="icon icon-download"></i> Enregistrer');
                    $('a.update').html('<i class="icon icon-pencil"></i>');
                }
            });

            //$("#table-content .wait").hide();
            return false;
        });

        //Appel du formulaire lors d'un click sur le lien update
        $(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-spin5 animate-spin"></span>');
                }
                else if (status == "error") {
                    alert(xhr.status + " " + xhr.statusText);
                }
            });
            return false;
        });

        //Chargement du tableau par click de la pagination
        $(document.body).on('click', '.nsavigation .pagination a', function (e) {
            $("#table-content .wait").show();
            var src = $(this).attr('href');
            src = src.split("=");
            var currentPage = src[1];
            alert(currentPage)

            var src = "{{ path('outbandNumero_table_list',  {'page': 'NUMPAGE'}) }}";
            src = src.replace("NUMPAGE", currentPage);

            $("#table-content").load(src, function (response, status, xhr) {
                if (status == "success") {
                    $(this).html(response);
                }
                else if (status == "error") {
                    alert(xhr.status + " " + xhr.statusText);
                }
            });

            return false;
        });


        //Chargement à la supression d'un élément
        $(document.body).on('click', 'a.delete', function (e) {
            var confirmation = confirm("Voulez vous vraiment supprimer ce numero ?");
            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('outbandNumero_table_list',  {'page': 'NUMPAGE'}) }}";
                        src = src.replace("NUMPAGE", currentPage);

                        $("#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-outbandNumero');
            return false;
        });
    </script>
{% endblock %}