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

{% block container %}

    <style>




    </style>

    <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 produits':{'url':path('you_commercant_product')},
        'Décliner un produit':{}
        }) }}


        <div class="container-fluid padded">

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

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


                    <h1 class="titretdb">Déclinaisons du produit "{{ decline.titre }}"</h1>
                    <br/><br/><p>{{ decline.declinaisons|length }} declinaison{% if decline.declinaisons|length > 1 %}s{% endif %} existante{% if decline.declinaisons|length > 1 %}s{% endif %} :</p>

                    <form action="" class="longForm" style="padding-bottom: 0;" id="formulaireAjout" novalidate method="post" {{ form_enctype(formBase) }}>

                    <div class="box">
                        <div class="box-content">

                            <table cellpadding="0" cellspacing="0" border="0" class="dataTable">
                                <thead>
                                <tr role="row">
                                    <th style="width:10%">
                                        <div>Référence</div>
                                    </th>
                                    <th style="width:20%">
                                        <div>Titre</div>
                                    </th>
                                    <th style="width:20%">
                                        <div>Désignation*</div>
                                    </th>
                                    <th>
                                        <div>Photos</div>
                                    </th>
                                    <th>
                                        <div>Prix TTC</div>
                                    </th>
                                    <th>
                                        <div>Stock</div>
                                    </th>
                                    <th>
                                        <div>Etat</div>
                                    </th>
                                    <th style="width:180px">
                                        <div>Actions</div>
                                    </th>
                                </tr>
                                </thead>


                                <tbody role="alert" aria-live="polite" aria-relevant="all">
                                <tr class="odd">
                                    <td>{{ decline.ref }}</td>
                                    <td>
                                        {{ decline.titre }}
                                    </td>
                                    <td>
                                        {{ form_widget(formBase.declinaisonOption) }}
                                        <button type="submit" class="btn btn-blue pull-right">
                                            <i class="icon icon-ok"></i>
                                        </button>
                                    </td>
                                    <td>
                                        {% for img in decline.images %}
                                            {% if img.etat > 0 %}
                                                <img width="25" src="http://{{ app.request.host }}/{{ img.webPath }}"/>
                                            {% endif %}
                                        {% endfor %}
                                    </td>
                                    <td class="center">{{ decline.material.prix|toeuro }}</td>

                                    <td class="center">{{ decline.stock|tostock }}</td>
                                    <td class="center">
                                        {% if decline.etat > 0 %}
                                            <input type="checkbox" productId="{{ decline.id }}" class="iButton-icons" checked="checked"/>
                                        {% else %}
                                            <input type="checkbox" productId="{{ decline.id }}" class="iButton-icons"/>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <a title="Voir l'article en ligne" target="_blank" href="http://{{ decline.boutique.baseSite }}{{ path('you_product_page',{boutique:decline.boutique.slug,produit:decline.slug}) }}" class="btn btn-small btn-default noajax"><i class="icon icon-search"></i></a>
                                        <a title="Modifier l'article" href="{{ path('you_commercant_product_editer',{id:decline.id}) }}" class="btn btn-small btn-default noajax"><i class="icon icon-edit"></i></a>
                                    </td>
                                </tr>
                                {% for product in decline.declinaisons %}
                                {% if product.etat > -9 %}
                                    <tr class="odd">
                                        <td>{{ product.ref }}</td>
                                        <td>
                                            {{ product.titre }}
                                        </td>
                                        <td>{{ product.declinaisonOption }}</td>
                                        <td>
                                            {% for img in product.images %}
                                                {% if img.etat > 0 %}
                                                    <img width="25" src="http://{{ app.request.host }}/{{ img.webPath }}"/>
                                                {% endif %}
                                            {% endfor %}
                                        </td>
                                        <td class="center">{{ product.material.prix|toeuro }}</td>

                                        <td class="center">{{ product.stock|tostock }}</td>
                                        <td class="center">
                                            {% if product.etat > 0 %}
                                                <input type="checkbox" productId="{{ product.id }}" class="iButton-icons" checked="checked"/>
                                            {% else %}
                                                <input type="checkbox" productId="{{ product.id }}" class="iButton-icons"/>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <a title="Voir l'article en ligne" target="_blank" href="http://{{ product.boutique.baseSite }}{{ path('you_product_page',{boutique:product.boutique.slug,produit:product.slug}) }}" class="btn btn-small btn-default noajax"><i class="icon icon-search"></i></a>
                                            <a title="Modifier l'article" href="{{ path('you_commercant_product_decliner_editer',{id:product.id}) }}" class="btn btn-small btn-default noajax"><i class="icon icon-edit"></i></a>
                                            <a title="Supprimer l'article" class="btn btn-small btn-default pull-right noajax" href="{{ path('you_commercant_product_supprimer',{id:product.id}) }}"><i class="icon icon-trash"></i></a>
                                        </td>
                                    </tr>
								{% endif %}
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>
                    </div>
                        {{ form_rest(formBase) }}
                        {{ form_errors(formBase) }}
                    </form>
                    {% if afficher == false %}


                    <a href="#" id="addDecline" class="btn btn-blue pull-right"><i class="icon-plus"></i> Ajouter une déclinaison</a>
{% endif %}
                    <a href="#" onclick="$('.infosHelp').toggle();" style="margin-right: 10px;" class="btn btn-blue pull-right"><i class=" icon-question-sign
"></i> Comment ça marche ?</a>

                    <div class="infosHelp" style="display: none;">

                        <h3>Comment ça marche ?</h3>
                        <p>Si le produit "{{ decline.titre }}" existe en plusieurs versions,
                        <br/>utilisez "Ajouter une déclinaison" pour créer rapidement ces différentes versions.</p>

                        <p class="mini">Exemple de déclinaison : vous vendez des pizzas à emporter, elles existent en pâte fine et en pâte épaisse.</p>

                        <p>La liste des déclinaisons s'affichent dans le tableau ci-contre.</p>
                        <p>Chaque déclinaisons de votre produit possède sa "désignation".
                        <br/>Dans le site, la désignation s'affiche sous le prix de l'article. Elle permet de passer d'une déclinaison à l'autre.
                        <br/>Voir exemple ci-dessous :</p>

                        <img src="/images/imgDecline.jpg" alt="">

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

        <div class="longForm">
            <div class="container-fluid padded">


                {% if needBase == false %}



        <div class="row-fluid" id="ajouterDeclinaison">
            <div class="span12">
                <div class="box">
                    <div class="box-header">
                        <span class="title"><i class="icon icon-plus"></i> Ajouter une déclinaison</span>
                    </div>
                    <form action="#ajouterDeclinaison" class="longForm" id="formulaireAjout" novalidate method="post" {{ form_enctype(form) }}>
                    <div class="box-content row-fluid">

                        <div class="span8">

                                    <div class="padded separate-sections" id="formAdd">

                                           <fieldset>
                                                <div class="label_form span2">
                                                    {{ form_label(form.declinaisonOption) }}
                                                </div>
                                                <div class="content_form span10">
                                                    <div class="error">
                                                        {{ form_errors(form.declinaisonOption) }}
                                                    </div>
                                                    {{ form_widget(form.declinaisonOption) }}
                                                </div>
                                            </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                {{ form_label(form.ref) }}
                                            </div>
                                            <div class="content_form span10">
                                                <div class="error">
                                                    {{ form_errors(form) }}
                                                    {{ form_errors(form.ref) }}
                                                </div>
                                                <p class="information span6">
                                                    Vous pouvez utiliser les mêmes références que dans votre magasin ou bien en inventer de nouvelles. Vous êtes libre.
                                                    <br/>Exemple pour un massage thaïlandais de 90 minutes en couple : MASTHA-C90
                                                </p>
                                                {{ form_widget(form.ref) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                {{ form_label(form.titre) }}
                                            </div>
                                            <div class="content_form span10">
                                                <div class="error">
                                                    {{ form_errors(form.titre) }}
                                                </div>
                                                <p class="information span6">
                                                    Le titre est très important ! Il doit se rapprocher de ce qu’un internaute tapera sur Google pour trouver votre service. Exemple : forfait révision + vidange à petit prix
                                                </p>
                                                {{ form_widget(form.titre) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                {{ form_label(form.soustitre) }}
                                            </div>
                                            <div class="content_form span10">
                                                <p class="information span6">
                                                    Avec une phrase courte, donnez aux internautes davantage de précisions sur votre service. Exemple : Garage toutes marques à Limoges propose un forfait révision auto, 30 points de contrôles + vidange à prix mini.
                                                </p>
                                                {{ form_widget(form.soustitre) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                {{ form_label(form.description) }}
                                            </div>
                                            <div class="content_form span10">
                                                <p class="information span6">
                                                    Décrivez le plus en détail possible votre service.
                                                    <br/>Ex : déroulement, contenu de la prestation, conditions particulières, …
                                                </p>
                                                {{ form_widget(form.description) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                <p class="labelise">Couleurs :</p>
                                            </div>
                                            <div class="content_form span10">

                                                <ul class="multyInline">
                                                    <li>
                                                        {{ form_label(form.material.couleur) }}
                                                        {{ form_widget(form.material.couleur) }}
                                                    </li>
                                                    <li>
                                                        {{ form_label(form.material.couleur2) }}
                                                        {{ form_widget(form.material.couleur2) }}
                                                    </li>
                                                </ul>
                                                <p class="indice">Si cela est utile, précisez la couleur du produit, sinon cochez "pas de couleur"</p>

                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="label_form span2">
                                                <p class="labelise">Photos :</p>
                                            </div>
                                            <div class="content_form span10">
                                                <div class="error">
                                                    {{ form_errors(form.images) }}
                                                </div>
                                                <div class="clearfix" id="photoContainer">
                                                    <a href="#" class="photosBox">Ajouter</a>
                                                </div>
                                            </div>
                                        </fieldset>

                                    </div>

                                    <fieldset>
                                        <div class="label_form span2">
                                            <p class="labelise">Stock :</p>
                                        </div>
                                        <div class="content_form span10">
                                            <div class="error">
                                                {% for child in form.material.stocks %}
                                                    {{ form_errors(child.taille) }}
                                                {% endfor %}
                                            </div>
                                            <div class="box span8 tableBox">
                                                <div class="box-content">
                                                    <table id="stockTable" class="table table-normal">
                                                        <thead>
                                                        <tr>
                                                            <td style="width:16%;">Taille</td>
                                                            <td style="width:42%;">Stock</td>
                                                            <td style="width:30%;">Prix</td>
                                                            <td style="width:12%;"><i class="icon-trash"></i></td>
                                                        </tr>
                                                        </thead>

                                                        <tbody>
                                                        <td colspan="3">Chargement ...</td>
                                                        </tbody>
                                                        <tfoot>
                                                        <tr>
                                                            <td colspan="4">
                                                                <a href="#" class="btn btn-default btnAjouterLine hide">Ajouter une ligne</a>
                                                            </td>
                                                        </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>



                                        <div id="hiddenForm">

                                            {{ form_widget(form.aucun) }}
                                            <input type="hidden" disabled="disabled" value="{{ decline.material.taille.id }}" class="selectProductSizeType" >
                                            {{ form_rest(form) }}

                                        </div>
                                        <div id="tempStockForm">

                                        </div>

                                    </div>
                                </div>
                                <div class="form-actions">
                                    <a class="btn btn-default pull-right" style="margin-left: 10px;" href="{{ path('you_commercant_product_decliner',{id:decline.id}) }}">Annuler</a>

                                    <button type="submit" class="btn btn-blue pull-right">
                                        {% if btnSave == "edit" %}Sauvegarder les modifications{% else %}Ajouter la déclinaison{% endif %}
                                    </button>
                                </div>
                            </form>
                            </div>

                        </div>
                    </div>


            {% endif %}
                </div>
            </div>





    </div>


{% endblock %}

        {% block append_javascript %}

            {{ parent() }}

<script>
    {% if afficher == false %}
        $('#ajouterDeclinaison').hide();
    $('#addDecline').click(function(e){
        e.preventDefault();
        $(this).remove();
        $('#ajouterDeclinaison').fadeIn(250);
    });
    {% endif %}
    var setStockPrototypeId = "form_material_stocks";
    var urlPhotos = "{{ path('you_commercant_product_get_picture',{id:'__ID__'}) }}";


    listIMGid = [];
    function setUploadEnd(id,path){

        listIMGid[listIMGid.length] = id;
        if(listIMGid.length == 5){
            $('.photosBox').hide();
        }
        $('#photoContainer').prepend('<a class="photoBox">Photo<img src="'+path+'" /></a>');

        var htmlSelect = '';
        for(var i = 0; i!= listIMGid.length; i++){
            htmlSelect += '<option value="'+listIMGid[i]+'">'+listIMGid[i]+'</option>';
        }
        $('.productImageSelect').html(htmlSelect).val(listIMGid);

    }


    </script>
            {%  include "YOUCommercantBundle:Product:stockJs.html.twig" %}
    <script>
        function changeSelectDecline(){
            if($('#form_declinaisonType').val() == 1){
                $('#setByOption').html('');
                if($('#setByColor').html() == ''){
                    $('#setByColor').html(contenthtmlColor);
                }
            }else if($('#form_declinaisonType').val() == 2){
                $('#setByColor').html('');
                if($('#setByOption').html() == ''){
                    $('#setByOption').html(contenthtmlOption);
                }
            }
        }
        function changeSelectDeclineBase(){
            if($('#formBase_declinaisonType').val() == 1){
                $('#BASEsetByOption').html('');
                if($('#BASEsetByColor').html() == ''){
                    $('#BASEsetByColor').html(bcontenthtmlColor);
                }
            }else if($('#formBase_declinaisonType').val() == 2){
                $('#BASEsetByColor').html('');
                if($('#BASEsetByOption').html() == ''){
                    $('#BASEsetByOption').html(bcontenthtmlOption);
                }
            }
        }
    $(document).ready(function() {

        $('.selectProductPriceType').val({{ decline.material.price }});
        $('p.information').hide();
        $('p.permanence').show();

        contenthtmlColor = $('#setByColor').html();
        $('#setByColor').html('');
        contenthtmlOption = $('#setByOption').html();
        $('#setByOption').html('');

        bcontenthtmlColor = $('#BASEsetByColor').html();
        $('#BASEsetByColor').html('');
        bcontenthtmlOption = $('#BASEsetByOption').html();
        $('#BASEsetByOption').html('');

        $('#formBase_declinaisonType').bind('change',changeSelectDeclineBase);
        $('#form_declinaisonType').bind('change',changeSelectDecline);
        changeSelectDecline();
        changeSelectDeclineBase();
        $('input,textarea').bind('focus',function(){
            $(this).parent().find('p.information').fadeIn(100);
        }).bind('blur',function(){
                    $(this).parent().find('p.information').fadeOut(100);
                });


    });

        $(":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);
                    }
                }});
            }
        });
</script>


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

        {% endblock %}