{% extends "YOUCommercantBundle::layout.html.twig" %}

{% block container %}

    <div class="form-creation-produit">


        {% import 'YOUCommercantBundle::macros.html.twig' as macros %}

<br/>
        {{ macros.ariane({
        'Tableau de bord':{'url':path('you_commercant_secured_homepage')},
        'Mes services':{}
        }) }}

        <style>

            .dottedPath {
                margin:15px 0 0 15px;
                color:#666;
                list-style: none;
            }
            .dottedPath ul {
                list-style: none;
                padding:0px;
                margin:0px;
                color:#666;
            }
            .dottedPath ul {
                padding-left:15px;
                margin-left:8px;
                margin-bottom: 16px;
                border-left:1px dotted #666;
            }
            .dottedPath li {
                padding:0 0;
                margin:2px 0 4px -4px;
                font:12px tahoma;
                width:150px;
            }
            .dottedPath li input {
                float:left;
                margin:2px 6px 0 2px;
            }

            .dottedPath ul li:before {
                content:'';
                display:block;
                border-bottom:1px dotted #666;
                width:8px;
                position:absolute;
                margin-left:-10px;
                margin-top:8px;
            }

            #boxContentTable .box-content .btn-small {
                padding:2px 5px 2px 7px!important;
            }
            #boxContentTable .box-content {
                width:100%;
            }



            img {
                max-height:25px;
                margin:0 10px 0 0;
                max-width:25px;
            }

            .search-head select,.search-head .select2,.search-head input {
                float:left!important;
                margin-top:15px;
            }
            .search-head .select2 {
                margin-right:25px;
            }
            .search-head input {
                margin-right:5px;
            }
            .search-head .btn {
                float:right;
                margin-top:15px;
            }

        </style>

        <div class="container-fluid padded">

            <h1 class="titretdb">Mes services</h1>
<br/><br/>
            <div id="appendMessageHere"></div>
            {% for flashMessage in app.session.flashbag.get('message') %}
                <div class="flash-message alert alert-success ">
                    {{ flashMessage }}
                </div>
            {% endfor %}

            <div class="row-fluid">
                <div class="span12" id="boxContentTableContent">


                    {%  include "YOUCommercantBundle:Product:tableList.html.twig" %}


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



    </div>


{% endblock %}

        {% block append_javascript %}

            {{ parent() }}

            <script>



                function loadTableJS(){

                    $('.select2').select2({width:200});

                    $('#boxContentTable a').bind('click',function(e){

                        if($(this).hasClass('noajax')){
                            return true;
                        }

                        e.preventDefault();

                        var url = $(this).attr('href');
                        $.post(url,{},function(data){
                            $('#boxContentTableContent').html(data);
                            loadTableJS();
                        });

                    });

                    $(":checkbox").iButton({
                        labelOn:"<i class='icon-ok'></i>",
                        labelOff:"<i class='icon-remove'></i>",
                        handleWidth:30,
                        change:function($e){

                            var url = "{{ path('you_commercant_product_etat',{id:'__id__',state:'__state__'}) }}";

                            if($e.is(":checked")){
                                var etat = 'active';
                            }else{
                                var etat = 'desactive';
                            }

                            url = url.replace(/__id__/g,$e.attr('productId')).replace(/__state__/g,etat);

                            $.ajax({url:url,success:function(data){
                                if(data.etat == data.demande){
                                    var etat = 'activé';
                                    if(data.etat < 1){
                                        etat = 'désactivé';
                                    }
                                    var id = Math.floor((Math.random()*100000)+1);
                                    $('#appendMessageHere').append('<div id="messageNum'+id+'" class="flash-message alert alert-success ">Le produit "'+data.name+'" est maintenant '+etat+'</div>');
                                    setTimeout(function(){
                                        $('#messageNum'+id).fadeOut(500,function(){
                                            $(this).remove();
                                        });
                                    },5000);
                                }
                            }});
                        }
                    });

                }

                function sortURL(url){
                    $.post(url,{},function(data){
                        $('#boxContentTableContent').html(data);
                        loadTableJS();
                    });
                }


                loadTableJS();



            </script>

        {% endblock %}