{% 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 services':{'url':path('you_commercant_product')},
        'Ajouter un service':{}
        }) }}

        {% set productType = 'service' %}

        <div class="selectServiceOrProduct clearfix span12">
            <p>Je souhaite ajouter :</p>

            <a onclick="document.location.href='{{ path('you_commercant_product_ajouter',{type:"produit"}) }}';" href="{{ path('you_commercant_product_ajouter',{type:"produit"}) }}">
                <input id="selectTheProductType" type="radio" name="selectTypeProduct" />
                <label for="selectTheProductType">
                    <span>Un produit</span>
                    (article vendu en ligne, puis livré ou retiré sur place)
                </label>
            </a>
            <a onclick="document.location.href='{{ path('you_commercant_product_ajouter',{type:"service"}) }}';" href="{{ path('you_commercant_product_ajouter',{type:"service"}) }}">
                <input checked="checked" id="selectTheServiceType" type="radio" name="selectTypeProduct" />
                <label for="selectTheServiceType">
                    <span>Un service</span>
                    (prestation réservée en ligne, puis réalisée sur place ou à domicile)
                </label>
            </a>
        </div>


        <form action="{% if isCopy is defined %}{{ path('you_commercant_product_ajouter',{type:'service'}) }}{% endif %}" class="longForm" id="formulaireAjout" novalidate method="post" {{ form_enctype(form) }}>

            <div class="container-fluid padded">
                <div class="row-fluid" id="tocomplettoverify">
                    <div class="span12">

                        <div class="box">
                            <div class="box-header">
                                <span class="title">Caractéristiques du service</span>
                            </div>



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

                                <div class="span8">
                                    <div class="padded separate-sections">

                                        {{ form_errors(form) }}

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

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

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

                <div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="box hideIfnotOk" style="display: none;">
                                <div class="box-header">
                                    <span class="title">Stock et prix</span>
                                </div>



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

                                    <div class="span8">
                                        <div class="padded separate-sections">
                                            <fieldset>
                                                <div class="label_form span3">
                                                    {{ form_label(form.service.ou) }}
                                                </div>
                                                <div class="content_form span9">
                                                    <div class="error">
                                                        {{ form_errors(form.service.ou) }}
                                                    </div>
                                                    <div class="inline span9">
                                                        {{ form_widget(form.service.ou[0]) }}
                                                        {{ form_label(form.service.ou[0]) }}
                                                    </div>
                                                    <div class="inline span9">
                                                        {{ form_widget(form.service.ou[1]) }}
                                                        {{ form_label(form.service.ou[1]) }}
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <fieldset>
                                                <div class="label_form span3">
                                                    {{ form_label(form.service.multy) }}
                                                </div>
                                                <div class="content_form span9">
                                                    <p class="information span6 permanence">
                                                        Selon la prestation, votre service peut se décliner en plusieurs options.
                                                        <i></i><br/>Ex de service à plusieurs options : massage thaïlandais :
                                                        <br/>Option 1 : massage en solo 30 minutes
                                                        <br/>Option 2 : massage en solo 60 minutes
                                                        <br/>Option 3 : massage en couple 30 minutes
                                                        <br/>Option 4 : massage en couple 60 minutes</i>
                                                    </p>
                                                    <div class="error">
                                                        {{ form_errors(form.service.multy) }}
                                                    </div>
                                                    <div class="inline span9">
                                                        {{ form_widget(form.service.multy[0]) }}
                                                        {{ form_label(form.service.multy[0]) }}
                                                        {{ form_widget(form.service.tarif) }}
                                                        {{ form_label(form.service.tarif) }}
                                                    </div>
                                                    <div class="inline  span9">
                                                        {{ form_widget(form.service.multy[1]) }}
                                                        {{ form_label(form.service.multy[1]) }}
                                                    </div>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <fieldset id="tableOptions">
                                            <div class="label_form span3">
                                            </div>
                                            <div class="content_form span9">
                                                <div class="box span8 tableBox">
                                                    <div class="box-content">
                                                        <table id="stockTable" class="table table-normal">
                                                            <thead>
                                                            <tr>
                                                                <td style="width:10%;"></td>
                                                                <td style="width:60%;">Nom de l'option</td>
                                                                <td style="width:20%;">Tarif</td>
                                                                <td style="width:20%;"><i class="icon-trash"></i></td>
                                                            </tr>
                                                            </thead>

                                                            <tbody>
                                                            </tbody>
                                                            <tfoot>
                                                            <tr>
                                                                <td colspan="4">
                                                                    <a href="#" class="btn btn-green btnAjouterLine">Ajouter une option</a>
                                                                </td>
                                                            </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="padded separate-sections">
                                            <fieldset>
                                                <div class="label_form span3">
                                                    {{ form_label(form.service.paiement) }}
                                                </div>
                                                <div class="content_form span9">
                                                    <div class="error">
                                                        {{ form_errors(form.service.paiement) }}
                                                    </div>
                                                    {% for child in form.service.paiement %}

                                                        <div class="inline">
                                                            {{ form_widget(child) }}
                                                            {% autoescape false %}
                                                            <label for="{{ child.vars.id }}">{{ child.vars.label }}</label>
                                                            {% endautoescape %}
                                                        </div>
                                                    {% endfor %}

                                                </div>
                                            </fieldset>

                                            {#{%  include "YOUCommercantBundle:Product:materialProductForm.html.twig" %}#}

                                        </div>

                                        {#{%  include "YOUCommercantBundle:Product:materialProductStockForm.html.twig" %}#}



                                        <div style="clear:both;"></div>


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


                    <div class="messageIfnotOk">
                        <p style="text-align: center">Compléter la partie ci-dessus pour accéder au reste du formulaire</p>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="box hideIfnotOk2" style="display: none;">
                                <div class="box-header">
                                    <span class="title">Déroulement de la commande</span>
                                </div>



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

                                    <div class="span12">
                                        <div class="padded separate-sections">
                                            <fieldset class="inline">
                                                <div class="error">
                                                    {{ form_errors(form.service.reservation.horaire) }}
                                                </div>
                                                <div class="content_form span12">
                                                    <p>
                                                        Horaires pendant lesquels vous proposez ce service : <a class="btn btn-green" href="#" id="openPopupHoraire">Définir les horaires</a>
                                                    </p>
                                                </div>
                                                <div id="CurrentHoraireSelect" class="span12">
                                                    <p class="horaire-name">Horaire : non défini</p>
                                                </div>
                                            </fieldset>

                                            <div style="clear:both;"></div>
                                            <fieldset class="inline span9">
                                                <div class="error">
                                                    {{ form_errors(form.service.reservation.heures) }}
                                                </div>
                                                <div class="content_form span12">
                                                    {{ form_label(form.service.reservation.heures) }}
                                                    {{ form_widget(form.service.reservation.heures) }}
                                                    heures avant la prestation
                                                </div>
                                            </fieldset>
                                            <fieldset class="inline span9">
                                                <div class="error">
                                                    {{ form_errors(form.service.reservation.methode) }}
                                                </div>
                                                <div class="content_form span12">
                                                    {{ form_label(form.service.reservation.methode) }}
                                                    {{ form_widget(form.service.reservation.methode) }}
                                                </div>
                                            </fieldset>
                                            <fieldset class="inline span9">
                                                <div class="error">
                                                    {{ form_errors(form.service.reservation.recevoir) }}
                                                </div>
                                                <div class="content_form span12" style="display: none;">
                                                    {{ form_label(form.service.reservation.recevoir) }}
                                                    {{ form_widget(form.service.reservation.recevoir) }}
                                                </div>
                                            </fieldset>
                                            {#{%  include "YOUCommercantBundle:Product:materialProductCommandeForm.html.twig" %}#}

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

                    </div>

                </div>
                </div>



            <div id="hiddenForm">

                {{ form_rest(form) }}

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

            </div>

            <input class="btn btn-green save_product" style="display: none;" type="submit" onclick="return beforeSubmit();" value="SAUVEGARDER">

        </form>

    </div>


{% endblock %}

        {% block append_javascript %}

            {{ parent() }}



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

                function verifIfTopIsOk(){

                    var error = 0;
                    if(!$('#you_productbundle_producttype_domaine').val()){
                        error++;
                    }
                    if(!$('#you_productbundle_producttype_activity').val()){
                        error++;
                    }
                    if($('#you_productbundle_producttype_ref').val().length < 3){
                        error++;
                    }
                    if($('#you_productbundle_producttype_titre').val().length < 3){
                        error++;
                    }
                    CKEDITOR.on( 'instanceReady', function( evt ) {
                        if(CKEDITOR.instances.you_productbundle_producttype_description.getData().length < 3){
                            error++;
                        }
                    } );
                    if(!$('.photoBox')[0]){
                        error++;
                    }

                    if(error == 0 ){
                        $('.hideIfnotOk').show();
                    }

                }

                function verifIfTopIsOk2(){
                    var error = 0;

                    if(!$('input[name="you_productbundle_producttype__c_s__service__c_e____c_s__ou__c_e__"]:checked')[0]){
                        error++;
                    }
                    if(!$('input[name="you_productbundle_producttype__c_s__service__c_e____c_s__multy__c_e__"]:checked')[0]){
                        error++;
                    }
                    if(!$('input[name="you_productbundle_producttype__c_s__service__c_e____c_s__paiement__c_e__"]:checked')[0]){
                        error++;
                    }
                    if($('input[name="you_productbundle_producttype__c_s__service__c_e____c_s__multy__c_e__"]:checked').val() == 0){
                        if($('#you_productbundle_producttype_service_tarif').val().length ==0){
                            error++;
                        }
                    }

                    if(error == 0 ){
                        $('.messageIfnotOk').hide();
                        $('.hideIfnotOk2').show();
                        $('.save_product').show();
                    }
                }

                verifIfTopIsOk();
                verifIfTopIsOk2();

                setTimeout(verifIfTopIsOk,500);
                setTimeout(verifIfTopIsOk,1000);
                setTimeout(verifIfTopIsOk,1500);
                setTimeout(verifIfTopIsOk,2000);
                setTimeout(verifIfTopIsOk2,500);
                setTimeout(verifIfTopIsOk2,1000);
                setTimeout(verifIfTopIsOk2,1500);
                setTimeout(verifIfTopIsOk2,2000);

                $('input,select,textarea',"#tocomplettoverify").on('change',function(){
                    verifIfTopIsOk();
                });
                $('.productImageSelect').on('change',function(){
                    verifIfTopIsOk();
                });
                $('input,select,textarea',".hideIfnotOk").on('change',function(){
                    verifIfTopIsOk2();
                });




                formServiceIndex = 0;
                function addRowFormProductService(){
                    formServiceIndex++;

                    var $prototype = $('#you_productbundle_producttype_service_tariflist').attr('data-prototype').replace(/__label__/g,'')
                            .replace(/__name__/g, formServiceIndex);

                    $('#tempStockForm').append($prototype);

                    return formServiceIndex;

                }

                function countAgainServiceList(){

                    var num = 0;
                    $('tr','#stockTable tbody').each(function(){
                       num++;
                        $('.num',this).html(num+'.');
                    });

                }

                function generateTableRowService(){

                    var num = addRowFormProductService();

                    var realnum = ($('tr','#stockTable tbody')).length+1;



                    html = "<tr>";

                    html += '<td class="num">'+realnum+'.</td>';
                    html += '<td id="toAppendFieldName_'+num+'"></td>';
                    html += '<td id="toAppendFieldTarif_'+num+'">€</td>';
                    html += '<td><a href="#" class="btndeleteLine btn btn-danger"><i class="icon-trash"></i></a></td>';
                    html += '</tr>';

                    $('#stockTable tbody').append(html);

                    $('.tarifFieldServiceOption','#tempStockForm').val('0,00');
                    $('.nameFieldServiceOption','#tempStockForm').attr('placeholder','massage en solo 30 minutes').addClass('liveHide');
                    $('#toAppendFieldName_'+num).prepend($('.nameFieldServiceOption','#tempStockForm'));
                    $('#toAppendFieldTarif_'+num).prepend($('.tarifFieldServiceOption','#tempStockForm'));

                    $('.liveHide')
                            .off('focus').off('blur')
                            .on('focus',function(){

                                $(this).attr('liveHidePH',$(this).attr('placeholder')).attr('placeholder','');

                            })
                            .on('blur',function(){

                                $(this).attr('placeholder',$(this).attr('liveHidePH'));

                            });
                    $('#tempStockForm').html('');

                    return num;
                }

                function reloadServiceList(){

                    $('.serviceListData','#you_productbundle_producttype_service_tariflist').each(function(){

                        if($('.nameFieldServiceOption',this).val() != '' && $('.tarifFieldServiceOption',this).val() !=0){
                            var num = generateTableRowService();

                            $('input','#toAppendFieldName_'+num).attr('name',$('.nameFieldServiceOption',this).attr('name')).val($('.nameFieldServiceOption',this).val());
                            $('input','#toAppendFieldTarif_'+num).attr('name',$('.tarifFieldServiceOption',this).attr('name')).val($('.tarifFieldServiceOption',this).val());
                        }
                    });

                    $('#you_productbundle_producttype_service_tariflist').html('');

                    generateTableRowService();
                }

                popupServiceHoraireChoisirAction = function(popup){
                    var value = popup.getValue();
                    if(value.id === false){
                        popup.addMessage('Vous devez selectionner un horaire.');
                    }else{
                        $('.realValue_horaire').val(value.id);
                        $('#CurrentHoraireSelect').html(value.html);
                        popup.close();
                    }
                };

                $(document).ready(function(){

                    $("#openPopupHoraire").click(function(e){
                        e.preventDefault();
                        nino_OverlayShow(
                                '{{ path('you_commercant_horaire') }}',
                                [

                                    {text:'Choisir ces horaires',class:'btn-green',action:'popupServiceHoraireChoisirAction(popup)'},
                                    {text:'Annuler',class:'btn-default',action:'popup.cancel()'}

                                ]
                        );
                    });

                    $('.btnAjouterLine').click(function(e){
                        e.preventDefault();
                        generateTableRowService();
                    });
                    $('.btndeleteLine').live('click',function(e){
                        e.preventDefault();
                        $(this).parent().parent().remove();
                        countAgainServiceList();
                    });
                    $('.tarifFieldServiceOption').live('focus',function(){
                        if($(this).val() == '0,00' || $(this).val() == '0.00' || $(this).val() == '0,0' || $(this).val() == '0.0' || $(this).val() == '0'){
                            $(this).val('');
                        }
                    }).live('blur',function(){
                                if($(this).val() == ''){
                                    $(this).val('0,00');
                                }
                            });

                    $('input[type="radio"]').each(function(){
                        $(this).attr('name',($(this).attr('name')).replace(/\[/g,'__c_s__').replace(/\]/g,'__c_e__')).iCheck({radioClass:'iradio_flat-aero'});
                    });

                    if(!$('#you_productbundle_producttype_service_multy_1').is(':checked')){
                        $('#tableOptions').hide();
                    }

                    /*$('#you_productbundle_producttype_service_multy_0').on('ifChecked',function(){
                        $('#tableOptions').fadeOut(250);
                    });
                    $('#you_productbundle_producttype_service_multy_1').on('ifChecked',function(){
                        console.log('test');
                        $('#tableOptions').fadeIn(250);
                    });*/

                    $('#you_productbundle_producttype_service_multy_1,#you_productbundle_producttype_service_multy_0').change(
                            function(){
                                if($(this).attr('id') == 'you_productbundle_producttype_service_multy_1'){
                                    if($(this).is(':checked')){
                                        $('#tableOptions').fadeIn(250);
                                    }else{
                                        $('#tableOptions').fadeOut(250);
                                    }
                                }else{
                                    if(!$(this).is(':checked')){
                                        $('#tableOptions').fadeIn(250);
                                    }else{
                                        $('#tableOptions').fadeOut(250);
                                    }
                                }
                            }
                    );


                    $('#formulaireAjout').submit(function(){
                        $('input[type="radio"]').each(function(){
                            $(this).attr('name',($(this).attr('name')).replace(/__c_s__/g,'[').replace(/__c_e__/g,']'));
                        });
                    });


                    if($('.realValue_horaire').val() > 0){
                        var url = "{{ path('you_commercant_horaire_name_list',{id:'__value__'}) }}";
                        url = url.replace(/__value__/g,$('.realValue_horaire').val());

                        $("#CurrentHoraireSelect").load(url);
                    }

                    reloadServiceList();
                });
            </script>

        {% endblock %}