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

{% block site_content %}
    <div id="site_menu">

    {# permet d'utilisé la fonction ariane que j'ai fait qui génére le fil d'ariane #}
    {% import 'YOUCommercantBundle::macros.html.twig' as macros %}

    <br/>
    {{ macros.ariane({
    'Tableau de bord':{'url':path('you_commercant_secured_homepage')},
    'Mon site vitrine':{'url':path('you_commercant_monsite')},
    'Modifier le menu':{}
    }) }}
        <div class="container-fluid padded">

        <h1 class="titretdb">Modifier le menu</h1>
        <br/><br/>
            {% for flashMessage in app.session.flashbag.get('success') %}
                <div class="flash-message alert alert-success ">
                    {{ flashMessage }}
                </div>
            {% endfor %}     <div class="row-fluid">
                <br/><br/>
         <div class="span5 pull-right">
             <h4>SUGGESTIONS DE RUBRIQUES</h4>
             <ul>

                 <li>Actualités</li>
                 <li>Avantages</li>
                 <li>Blog</li>
                 <li>Catalogue</li>
                 <li>FAQ</li>
                 <li>Fournisseurs</li>
                 <li>Galerie</li>
                 <li>Menu</li>
                 <li>Offres</li>
                 <li>Partenaires</li>
                 <li>Points de vente</li>
                 <li>Prestations</li>
                 <li>Qui sommes-nous ?</li>
                 <li>Réalisations</li>
                 <li>Services</li>
                 <li>Tarifs</li>
                 <li>Témoignages</li>

             </ul>

         </div>
         <div class="span6">
             <div class="box">
                 <div class="box-content clearfix"  style="width:100%;">
                     <div id="dataTables" class="">

                         <div class="form-inline" role="grid" >

                             <table cellpadding="0" cellspacing="0" border="0" class="dataTable">
                                 <thead>
                                 <th></th>
                                 <th>Rubriques</th>
                                 <th>Actions</th>
                                 </thead>


                                 <tbody id="list-item-menu" role="alert" aria-live="polite" aria-relevant="all">

                                 <tr class="default" style="display: none;">
                                     <td>

                                     </td>
                                     <td>
                                         <input type="text" maxlength="20" value="" placeholder="Indiquez le nom de la rubrique" style="width: 100%;">
                                         <input type="hidden" name="position" value="-1">
                                         <input type="hidden" name="id" value="-1">
                                     </td>
                                     <td>
                                         <a href="#" class="btn btn-default btn-small pull-left"><i class="icon icon-move"></i></a>
                                         <a href="#" class="btn btn-danger btn-small pull-right"><i class="icon icon-trash"></i></a>
                                     </td>
                                 </tr>

                                 {% for rub in rubriques %}
                                     <tr>
                                         <td>
                                            {{ rub.ordre }}.
                                         </td>
                                         <td>
                                             <input type="text" placeholder="Indiquez le nom de la rubrique" value="{{ rub.name }}" style="width: 100%;">
                                             <input type="hidden" name="position" value="{{ rub.ordre }}">
                                             <input type="hidden" name="id" value="{{ rub.id }}">
                                         </td>
                                         <td>
                                             <a href="#" class="btn btn-default btn-small pull-left"><i class="icon icon-move"></i></a>
                                             <a href="#" class="btn btn-danger btn-small pull-right"><i class="icon icon-trash"></i></a>
                                         </td>
                                     </tr>
                                 {% endfor %}



                                 </tbody>
                             </table>
                             <div class="table-footer">
                                 <a href="" onclick="addMenuLine();return false;" class="btn btn-blue pull-right">Ajouter une rubrique</a>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>

             <p><i style="font-size: 13px!important;">Vous pouvez ajouter jusqu'à 8 rubriques à votre menu.
                 <br/>Si nécessaire vous pouvez les renommer pour coller à 100% avec votre activité.
                 <br/>Utiliser le bouton <span class="btn btn-default btn-small"><i class="icon icon-move"></i></span> pour modifier l'ordre des rubriques (maintenir et faire glisser avec la souris).</i></p>
         </div>


     </div>
<br/>
        <form method="POST" id="myform" action="">
            <input name="menudatas" type="hidden">
            <input type="submit" class="btn btn-blue" value="Sauvegarder le menu">

        </form>


    </div>
    </div>
{% endblock %}

{% block append_javascript %}
{# tout le contenu ici est placé en bas de page avec les scripts#}
<script>

    var datasMenu = {};
    $('#list-item-menu').sortable({handle:'.btn-default'}).on('sortstop',function(){
        genereNumber();
    });
    $('a.btn-danger').on('click',function(){
        $(this).parent().parent().remove();
        genereNumber();
    });
    function addMenuLine(){
        if(($('#list-item-menu tr')).length > 8){
            alert('Vous ne pouvez pas avoir plus de 8 rubriques.');
            return false;
        }
        $('#list-item-menu').append('<tr>'+$('.default','#list-item-menu').html()+'</tr>').sortable({handle:'.btn-default'}).on('sortstop',function(){
            genereNumber();
        });
        $('a.btn-danger').on('click',function(){
            $(this).parent().parent().remove();
            genereNumber();
        });
        genereNumber();
    }

    function genereNumber(){
        var cpt = 0;
        $('#list-item-menu > tr').each(function(){
           $("td:first-child",this).html(cpt+'.');
            $('input[name="position"]',this).val(cpt);
            cpt++;
        });
        generateDataMenu();
    }

    function generateDataMenu(){
        datasMenu = {};
        $('#dataTables tr').each(function(){
            if(!$(this).hasClass('default')){
                datasMenu[$('input[name="position"]',this).val()] = {
                    position:parseInt($('input[name="position"]',this).val()),
                    id:parseInt($('input[name="id"]',this).val()),
                    name:$('input[type="text"]',this).val()
                };
            }
        });
        $('input[name="menudatas"]').val(JSON.stringify(datasMenu));
    }

    $('#myform').submit(function(e){
        //e.preventDefault();
        genereNumber();
    });

</script>
{% endblock %}