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

{% block container %}

    <style>
        .inline-short-field.sizes{min-width: 200px;}
        .inline-short-field > div{display:inline-block;}
        .inline-short-field input{width:50px;}
        .inline-label label{display:inline-block;}

        .precommande-glob-input{display: block !important;width: 100% !important;float:none !important;}
        .precommande-glob-input label{display: inline-block;width: auto !important;float:none !important;}
        .precommande-glob-input input{float:left !important;position: initial !important;top:0 !important;margin:5px !important;width: auto !important;}
    </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')},
        'Ajouter un produit':{}
        }) }}

        {% set productType = 'material' %}

        {% if isEdit is not defined %}

            <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 checked="checked" 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 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>

        {% endif %}

        <form action="{% if isCopy is defined %}{{ path('you_commercant_product_ajouter',{type:'produit'}) }}{% 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 produit</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 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 hideIfnotOk" style="display: none;">
                    <div class="span12">
                        <div class="box">
                            <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">
                                        {%  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="row-fluid hideIfnotOk" style="display: none;">
                    <div class="span12">
                        <div class="box">
                            <div class="box-header">
                                <span class="title">Options</span>
                            </div>
                            <div class="box-content row-fluid">

                                <div class="span8">
                                    <div class="padded separate-sections">
                                        <p>Sélectionnez les options que vous souhaitez activer pour ce produit.</p>
                                        {{ form_widget(form.productOptions) }}
                                        <ul id="productOptionsList"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid hideIfnotOk" style="display: none;">
                    <div class="span12">
                        <div class="box">
                            <div class="box-header">
                                <span class="title">Options avancées</span>
                            </div>
                            <div class="box-content row-fluid">
                                <div class="span8">
                                    <div class="padded separate-sections">
                                        <p>Sélectionnez les options avancées que vous souhaitez activer pour ce produit.</p>
                                        {{ form_widget(form.advancedProductOptions) }}
                                        <ul id="advancedProductOptionsList"></ul>
                                    </div>
                                    <div class="padded separate-sections">
                                        {%  include "YOUCommercantBundle:Product:materialProductCompositionForm.html.twig" %}
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid hideIfnotOk" style="display: none;">
                    <div class="span12">
                        <div class="box">
                            <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">
                                        {%  include "YOUCommercantBundle:Product:materialProductCommandeForm.html.twig" %}
                                    </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) {
                $('.messageIfnotOk').hide();
                $('.hideIfnotOk').show();
                $('.save_product').show();
            }
        }
        verifIfTopIsOk();
        setTimeout(verifIfTopIsOk, 500);
        setTimeout(verifIfTopIsOk, 1000);
        setTimeout(verifIfTopIsOk, 1500);
        setTimeout(verifIfTopIsOk, 2000);

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

        var setStockPrototypeId = "you_productbundle_producttype_material_stocks";
        var urlCategory = "{{ path('you_commercant_product_category_list',{id:'__ID__',level:'__LEVEL__'}) }}";

        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);
            setTimeout(verifIfTopIsOk, 250);
            setTimeout(verifIfTopIsOk, 500);
            setTimeout(verifIfTopIsOk, 1000);
            setTimeout(verifIfTopIsOk, 1500);
            setTimeout(verifIfTopIsOk, 2000);
        }

        popupLivraisonChoisirAction = function (popup) {
            var value = popup.getValue();
            if (value.id === false) {
                popup.addMessage('Vous devez selectionner un tarif.');
            } else {
                $('.RealValue_livraisonEntity').html('<option value="' + value.id + '">option</option>');
                $('.RealValue_livraisonEntity').val(value.id);
                $('#CurrentLivraisonSelect').html(value.name);
                popup.close();
            }
        };

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

    </script>
    {% include "YOUCommercantBundle:Product:stockJs.html.twig" %}
    {% include "YOUCommercantBundle:Product:composition.js.twig" %}
    <script>

        $(document).ready(function () {
            $("#openPopupLivraison").click(function (e) {
                e.preventDefault();
                nino_OverlayShow(
                        '{{ path('you_commercant_livraison') }}',
                        [
                            {text: 'Choisir ce groupe', class: 'btn-green', action: 'popupLivraisonChoisirAction(popup)'},
                            {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                        ]
                        );
            });
            $("#openPopupHoraire").click(function (e) {
                e.preventDefault();
                nino_OverlayShow(
                        '{{ path('you_commercant_horaire') }}',
                        [
                            {text: 'Choisir ces horaires', class: 'btn-green', action: 'popupHoraireChoisirAction(popup)'},
                            {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                        ]
                        );
            });
            $('.selectProductSizeType').bind('change', function () {
                updateTable(this.value);
            });
            $('.selectProductPriceType').bind('change', function () {
                var priceType = $('option[value="' + $('.selectProductPriceType').val() + '"]', '.selectProductPriceType').text();
                var smallPriceType = priceType.split('/');
                smallPriceType = smallPriceType[1] + 's';

                $('.smallPriceType').html(smallPriceType);
                $('.priceType').html(priceType);
            });
            $('.stockTypeFormInput').live('focus', function () {
                if ($(this).val() == '0') {
                    $(this).val('');
                }
            }).live('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('0');
                }
            })
            $('.priceTypeFormInput').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');
                }
            });
            $('.checkIllimity').live('change', function () {
                if ($(this).is(':checked')) {
                    $(this).parent().parent().find('.stockTypeFormInput').val('99999').attr('disabled', 'disabled');
                } else {
                    $(this).parent().parent().find('.stockTypeFormInput').val('0').removeAttr('disabled');
                }
            });
            $('.selectRetraitDelais').bind('change', function () {
                if (this.value == 2) {
                    $('.retrait .custom').show();
                } else {
                    $('.retrait .custom').hide();
                }
            });

            $('.icheck').iCheck({checkboxClass: 'icheckbox_flat-aero'});
            $('.iradio,.selectServiceOrProduct input').iCheck({radioClass: 'iradio_flat-aero'});
            $('.contentRadio input[type="radio"]').on('change', function () {
                $(this).parent().parent().parent().find('label').removeClass('checked');
                $(this).parent().parent().find('label').addClass('checked');
            });

            if ($('.selectRetraitDelais').val() == 2) {
                $('.retrait .custom').show();
            }

            var method = $('.RealValue_retraitType').val();
            var opt1 = $('.RealValue_option1').val();
            var opt2 = $('.RealValue_option2').val();

            $('#radio' + method).iCheck('check');

            if (method == 1) {
                $('#selectRDV').val(opt1);
            }
            if (method == 3) {
                $('#heure_retrait').val(opt1);
                $('#min_retrait').val(opt2);
            }
            if (method == 4 && opt1 > 0) {
                var url = "{{ path('you_commercant_horaire_name',{id:'__value__'}) }}";
                url = url.replace(/__value__/g, opt1);
                $("#CurrentHoraireSelect").load(url);
                $('#selectHoraire').val(opt1);
            }

            if ($('.RealValue_livraisonEntity').val() != "" && $('.RealValue_livraisonEntity').val() > 0) {
                var url = "{{ path('you_commercant_livraison_name',{id:'__value__'}) }}";
                url = url.replace(/__value__/g, $('.RealValue_livraisonEntity').val());
                $("#CurrentLivraisonSelect").load(url);
            }
            //
            displayCheckboxOnlyPayment();
            $('input.precommande').on('change', function () {
                displayCheckboxOnlyPayment();
            });

        });

        function displayCheckboxOnlyPayment() {
            if ($("input.precommande-livraison").is(':checked')) {
                $(".only-offline-payment-livraison").css("display", "block");
            } else {
                $(".only-offline-payment-livraison").css("display", "none");
            }
            if ($("input.precommande-retrait").is(':checked')) {
                $(".only-offline-payment-retrait").css("display", "block");
            } else {
                $(".only-offline-payment-retrait").css("display", "none");
            }
        }

        function beforeSubmit() {
            $('[disabled]').each(function () {
                $(this).removeAttr('disabled');
            });

            $('.RealValue_option1').val(0);
            $('.RealValue_option2').val(0);
            var radioval = $('.radio_retrait:checked').val();
            $('.RealValue_retraitType').val(radioval);
            if (radioval == 1) {
                $('.RealValue_option1').val($('#selectRDV').val());
            }
            if (radioval == 3) {
                $('.RealValue_option1').val($('#heure_retrait').val());
                $('.RealValue_option2').val($('#min_retrait').val());
            }
            if (radioval == 4) {
                $('.RealValue_option1').val($('#selectHoraire').val());
            }
            document.getElementById('formulaireAjout').submit();
            /*var $myForm = $('#formulaireAjout');
             if (!$myForm[0].checkValidity()) {
             $myForm.find('#simplesubmit:submit').click();
             }*/
            return false;
        }
    </script>
    <script>
        function toggleHiddenCheckZone(init) {
            $('.hiddenCheckZone').each(function () {
                if (!$('.checker input[type="checkbox"]', $(this).parent()).is(':checked')) {
                    $(this).toggle(false);
                } else {
                    $(this).toggle(true);
                }
            });
            if (init) {
                $('.hiddenCheckZone').each(function () {
                    $('.checker input[type="checkbox"]', $(this).parent()).on('change', function () {
                        toggleHiddenCheckZone();
                    });
                });
            }
        }
        toggleHiddenCheckZone(true);
    </script>
    <script>
        $(document).ready(function () {
            $("#you_productbundle_producttype_productOptions").multiselect({
                'onChange': function (option, checked, select) {
                    if (checked) {
                        $('ul#productOptionsList').append('<li data-id="' + $(option).val() + '">' + $(option).text() + '</li>');
                    } else {
                        $('li[data-id="' + $(option).val() + '"]').remove();
                    }
                },
                buttonText: function (options, select) {
                    if (options.length === 0) {
                        return 'Aucune option sélectionnée ...';
                    } else if (options.length > 3) {
                        return 'Plus de 3 options sélectionnées!';
                    } else {
                        var labels = [];
                        options.each(function () {
                            if ($(this).attr('label') !== undefined) {
                                labels.push($(this).attr('label'));
                            } else {
                                labels.push($(this).html());
                            }
                        });
                        return labels.join(', ') + '';
                    }
                }
            });
            $("#you_productbundle_producttype_advancedProductOptions").multiselect({
                'onChange': function (option, checked, select) {
                    if (checked) {
                        $('ul#advancedProductOptionsList').append('<li data-id="' + $(option).val() + '">' + $(option).text() + '</li>');
                    } else {
                        $('li[data-id="' + $(option).val() + '"]').remove();
                    }
                },
                buttonText: function (options, select) {
                    if (options.length === 0) {
                        return 'Aucune option sélectionnée ...';
                    } else if (options.length > 3) {
                        return 'Plus de 3 options sélectionnées!';
                    } else {
                        var labels = [];
                        options.each(function () {
                            if ($(this).attr('label') !== undefined) {
                                labels.push($(this).attr('label'));
                            } else {
                                labels.push($(this).html());
                            }
                        });
                        return labels.join(', ') + '';
                    }
                }
            });
        });
    </script>
{% endblock %}