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

{% block container %}

<div class="promos">

    <div id="formPromos" style="display:none;">
        {% include 'YOUCommercantBundle:Promos:formGroupe.html.twig' %}
    </div>
    {% import 'YOUCommercantBundle::macros.html.twig' as macros %}
<br/>
    {{ macros.ariane({
    'Tableau de bord':{'url':path('you_commercant_secured_homepage')},
    'Promotions':{}
    }) }}


    <div class="container-fluid padded">
        <h1 class="titretdb">Promotions</h1>
<br/><br/>
<br/>
        <div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">×</button>
            Le tableau ci-dessous indique vos promos en cours. Vous devez ranger vos articles en promotion dans des "groupes". Un groupe = un montant (%).
            <br/>Cliquez sur le bouton bleu ci dessous pour ajouter un nouveau groupe. Puis cliquez sur l'action "+" pour y ajouter des articles.
        </div>
        <div id="appendMessageHere">

        </div>
        <a href="#" id="addGroupe" class="btn btn-blue"><i class="icon icon-plus"></i> Ajouter un groupe</a>
        <br/><br/>
        <div class="box" id="boxContentTable">
            <div class="box-content clearfix" style="width:100%;">
                <div id="dataTables" class="">

                    <table cellpadding="0" cellspacing="0" border="0" class="dataTable">
                        <thead>
                            <tr role="row">
                                <th style="width:40%">Groupe</th>
                                <th style="width:15%">Réduction</th>
                                <th style="width:15%">Nombre d'articles</th>
                                <th style="width:10%">Etat</th>
                                <th style="">Actions</th>
                            </tr>
                        </thead>

                        <tbody role="alert" aria-live="polite" aria-relevant="all" id="contentTable">

                            {% include "YOUCommercantBundle:Promos:tableauGroupe.html.twig" %}

                        </tbody>
                    </table>

                </div>
            </div>

        </div>

        {% if promos|length == 0 %}
        <p style="text-align: center">Vous n'avez actuellement aucune promotion sur votre boutique.</p>
        {% endif %}

        <br/><br/>
        <div class="legendAction pull-left">
            <p>Légende : </p>
            <ul>
                <li>
                                    <div class="pull-left">
                                        <input type="checkbox" class="iButton-icons" checked="checked"/>
                                    </div>
                                    Activer / désactiver le groupe</li>
                <li><span class="btn btn-small btn-default"><i class="icon-plus"></i></span> Ajouter des articles au groupe</li>
                <li><span class="btn btn-small btn-default"><i class="icon-search"></i></span> Ouvrir le groupe</li>
                <li><span class="btn btn-small btn-default"><i class="icon-edit"></i></span> Modifier le groupe </li>
                <li><span class="btn btn-small btn-default"><i class="icon-trash"></i></span> Supprimer le groupe</li>
            </ul>
        </div>
    </div>

</div>

{% endblock %}
{% block append_javascript %}
    <script>

        var urlEdit = '{{ path('you_commercant_promos_editer',{id:'__id__'}) }}';

        var definedFormSubmit = false;

        function editPromos(id,value,type,name){
            nino_OverlayShow(
                    '<div id="formGroupe">'+$("#formPromos").html()+'</div>',
                    [
                        {text:'Sauvegarder',class:'btn-default',action:'sendForm();'},
                        {text:'Annuler',class:'btn-default',action:'popup.cancel()'}
                    ],
                    true,
                    351
            );

            currentUrlForEditPromo = urlEdit.replace(/__id__/gi,id);
            addSubmitEvent();

            $('#you_productbundle_promostype_titre').val(name);
            $('#you_productbundle_promostype_valeur').val(value);
            $('#you_productbundle_promostype_type').val(type);

            return false;
        }

        $('#addGroupe').click(function(e){

            nino_OverlayShow(
                    '<div id="formGroupe">'+$("#formPromos").html()+'</div>',
                    [
                        {text:'Sauvegarder',class:'btn-default',action:'sendForm();'},
                        {text:'Annuler',class:'btn-default',action:'popup.cancel()'}
                    ],
                    true,
                    351
            );


            currentUrlForEditPromo = '{{ path('you_commercant_promos_add') }}';
            addSubmitEvent();

        });

        var currentUrlForEditPromo = '{{ path('you_commercant_promos_add') }}';
        function addSubmitEvent(){
            if(!definedFormSubmit){
                definedFormSubmit = true;
                $('#formGroupe form').submit(function(e){

                    e.preventDefault();

                    $.post(
                            currentUrlForEditPromo,
                            $(this).serialize(),
                            function(data){
                                if(data.error){
                                    $('#formGroupe').html(data.error);
                                }else{
                                    $('#contentTable').html(data.html);
                                    nino_Popup.cancel();
                                    $('#formGroupe input').val('');
                                }
                            },
                            'json'
                    );

                });
            }
        }


        function sendForm(){
            $('#formGroupe form').submit();
        }

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

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

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

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

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