{% form_theme formArticle 'bootstrap_3_layout.html.twig' %}

    {{ form_start(formArticle, {'attr': {'id': 'articleFormBasic'}}) }}
    {{ form_errors(formArticle) }}

<div class="panel-body">

    <fieldset class="content-group">

        <div class="row">
            <div class="col-md-4">


                <div class="hidden">
                    {{ form_row(formArticle.isWhiteLabel  , { 'attr': {'tabindex': '0'} }) }}
                </div>


                {{ form_row(formArticle.articleModel, { 'attr': {'tabindex': '2'} }) }}
                {{ form_row(formArticle.articleColor, { 'attr': {'tabindex': '3'} }) }}

                <div class="">
                    <div class="">
                        {{ form_row(formArticle.articleColorAssistant, { 'attr': {'tabindex': '3'} }) }}
                    </div>
                </div>

                <div class="">
                    <div class="">
                        {{ form_row(formArticle.dealer, { 'attr': {'tabindex': '4'} }) }}
                    </div>
                </div>

                <div class="">
                    {{ form_row(formArticle.brand, { 'attr': {'tabindex': '5'} }) }}
                </div>

                <div class="">
                    {{ form_row(formArticle.season , { 'attr': {'tabindex': '6'} })  }}

                </div>

                <div class="">
                    {{ form_row(formArticle.serie , { 'attr': {'tabindex': '7'} })  }}
                </div>


                <div {% if groupConfiguration.setupAutoincrementNumberForArticle == 0 %}  class="hidden" {% endif %}>
                    {{ form_row(formArticle.autoIncrement , { 'attr': {'tabindex': '7'} })  }}
                </div>

            </div>

            <div class="col-md-4">

                <div {% if not groupConfiguration.useLocatorAlias %} class="hidden" {% endif %}>
                    {{ form_row(formArticle.locatorAliasId, { 'attr': {'tabindex': '9'} }) }}
                </div>

                <div class="">
                    {{ form_row(formArticle.section  , { 'attr': {'tabindex': '9'} }) }}
                </div>

                <div class="">
                    {{ form_row(formArticle.category , { 'attr': {'tabindex': '8'} })  }}
                </div>

                <div class="">
                    {{ form_row(formArticle.subcategory , { 'attr': {'tabindex': '8'} })  }}
                </div>

                <div class="">
                    {{ form_row(formArticle.typeArticle, { 'attr': {'tabindex': '10'} }) }}
                </div>

                <div class="">
                    {{ form_row(formArticle.ref, { 'attr': {'tabindex': '11'} }) }}
                </div>



                <!-- DEFAULT PRICES -->
                <div class="row {% if elemento.statsAvailable > 0 %} hidden {% endif %}">
                    <div class="col-md-5">
                        <div class="">
                            {{ form_row(formArticle.defaultCostPrice  , { 'attr': {'tabindex': '12'} }) }}
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="">
                            {{ form_row(formArticle.defaultPVP, { 'attr': {'tabindex': '13'} }) }}
                        </div>
                    </div>
                </div>
                <!-- DEFAULT PRICES -->


                <div class="row {% if groupConfiguration.isLite == true %} hidden {% endif %}" style="border: 1px solid;padding:5px; border-radius: 20px;margin-bottom: 15px;border-color: #cecece;">
                    <div class="col-md-12">
                        {{ form_row(formArticle.isInvolvedInStockOptimization, { 'attr': {'tabindex': '14'} }) }}
                    </div>

                    <div class="col-md-12">
                        {{ form_row(formArticle.stockMin, { 'attr': {'tabindex': '15'} }) }}
                    </div>

                    <div class="col-md-12">
                        {{ form_row(formArticle.stockMinToReplenishment, { 'attr': {'tabindex': '16'} }) }}
                    </div>
                </div>



            </div>

            <div class="col-md-4">
                <div class="">
                    {{ form_row(formArticle.shoeLast  , { 'attr': {'tabindex': '21'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeLine  , { 'attr': {'tabindex': '22'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeHeel  , { 'attr': {'tabindex': '23'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeSole  , { 'attr': {'tabindex': '24'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeInsole  , { 'attr': {'tabindex': '25'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeLining  , { 'attr': {'tabindex': '26'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.shoeSkin  , { 'attr': {'tabindex': '27'} }) }}
                </div>
                <div class="">
                    {{ form_row(formArticle.externalSoftwareId  , { 'attr': {'tabindex': '27'} }) }}
                </div>

            </div>

        </div>

        <div class="row" style="margin-bottom: 10px;">
            <hr>
        </div>

        <div class="row">

            <div class="col-md-4" style="margin-top:25px;">
                {% if elemento %}
                <a href="{{ elemento.webPath() | imagine_filter('big_prop') }}" data-popup="lightbox">
                    <img id="article-image" class="img-thumbnail" src="{{ elemento.webPath() | imagine_filter('medium') }}"/>
                </a>
                {% endif %}

            </div>
            <div class="col-md-8">

                <div class="">
                    {{ form_row(formArticle.descriptionLabel , { 'attr': {'tabindex': '28'} })  }}
                </div>

                <div class="">
                    {{ form_row(formArticle.detail , { 'attr': {'tabindex': '29'} })  }}
                </div>

            </div>


        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="">
                    {{ form_widget(formArticle.file, { 'attr': {'tabindex': '22'} }) }}
                    <div class="alert alert-danger alert-dismissible hidden" id="fileArticleError">
                        <span class="font-weight-semibold" id="lblSize"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-left" style="margin-top: 10px"><b>NOTA:</b> El tamaño recomendado para la imagen es 1000x1000 y formato .jpg</div>

        <!-- ARTICLE PROPERTY -->
        <div class="row mt-20">
            <div class="col-md-12">
                <div class="panel panel-white">
                    <div class="panel-body">
                        <h4 class="panel-title">Atributos extra de artículos</h4>

                            <div class="col-md-3 {% if groupConfiguration.property1 is empty %} hidden {% endif %}">
                                <label class="control-label" for="articleFormBasic_articleProperty_property1">{{ groupConfiguration.property1 }}</label>
                                {{ form_row(formArticle.articleProperty.property1 , { 'attr': {'tabindex': '70'} })  }}
                            </div>


                            <div class="col-md-3 {% if groupConfiguration.property2 is empty %} hidden {% endif %}">
                                <label class="control-label" for="articleFormBasic_articleProperty_property2">{{ groupConfiguration.property2 }}</label>
                                {{ form_row(formArticle.articleProperty.property2 , { 'attr': {'tabindex': '71'} })  }}
                            </div>

                            <div class="col-md-3 {% if groupConfiguration.property3 is empty %} hidden {% endif %}">
                                <label class="control-label" for="articleFormBasic_articleProperty_property3">{{ groupConfiguration.property3 }}</label>
                                {{ form_row(formArticle.articleProperty.property3 , { 'attr': {'tabindex': '72'} })  }}
                            </div>

                            <div class="col-md-3 {% if groupConfiguration.property4 is empty %} hidden {% endif %}">
                                <label class="control-label" for="articleFormBasic_articleProperty_property4">{{ groupConfiguration.property4 }}</label>
                                {{ form_row(formArticle.articleProperty.property4 , { 'attr': {'tabindex': '73'} })  }}
                            </div>

                            <div class="col-md-3 {% if groupConfiguration.property5 is empty %} hidden {% endif %}">
                                <label class="control-label" for="articleFormBasic_articleProperty_property5">{{ groupConfiguration.property5 }}</label>
                                {{ form_row(formArticle.articleProperty.property5 , { 'attr': {'tabindex': '74'} })  }}
                            </div>

                    </div>

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

        <!-- ARTICLE TRENDICO PROPERTY -->
        {% if articleTrendico %}
        <div class="row mt-20">
            <div class="col-md-12">
                <div class="panel panel-white">
                    <div class="panel-body">
                        <h4 class="panel-title">Atributos Tréndico</h4>

                        <div class="col-md-3">
                            <label class="control-label">Division</label>
                            <strong>{{ articleTrendico.typeTrendicoPricatDivision }}</strong>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Gender</label>
                            <strong>{{ articleTrendico.typeTrendicoPricatGender }}</strong>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Category</label>
                            <strong>{{ articleTrendico.typeTrendicoPricatCategory }}</strong>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Subcategory</label>
                            <strong>{{ articleTrendico.typeTrendicoPricatSubcategory }}</strong>
                        </div>

                    </div>

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

        <!-- SPECIALS TAXES -->
        <div class="row mt-20">
            <div class="col-md-12">
                <div class="panel panel-white">
                    <div class="panel-body">
                        <h4 class="panel-title">Impuestos especiales de artículo</h4>

                        <div class="col-md-6">
                            {{ form_row(formArticle.taxes , { 'attr': {'tabindex': '7'} })  }}
                        </div>

                        <div class="col-md-6">
                            {{ form_row(formArticle.taxSupported , { 'attr': {'tabindex': '7'} })  }}
                        </div>

                    </div>
                    <div class="panel-footer">
                        <div class="text-right">
                            <strong>Nota.</strong>
                            Rellenar solo en el caso de que este artículo tenga impuestos especiales distintos a los seleccionados en la empresa.
                        </div>
                    </div>

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


        {% if roleRight == true or (user.isWebManager and user.isWebManagerAndCanUpdateArticles) or isOffice %}
            <div class="text-right">
                <button type="submit" class="btn btn-flat btn-rounded text-color3 border-color3"><i class="icon-download position-left"></i>Guardar cambios</button>
            </div>
        {% endif %}

    </fieldset>
{{ form_end(formArticle) }}
</div>

<script>
    $(document).ready(function(){

        $("#articleFormBasic_descriptionLabel").attr('maxlength','30');

        //AMAZON MAX LENGTH
        $("#articleAmazonFormBasic_amazonKey1").attr('maxlength','240');
        $("#articleAmazonFormBasic_amazonKey2").attr('maxlength','240');
        $("#articleAmazonFormBasic_amazonKey3").attr('maxlength','240');
        $("#articleAmazonFormBasic_amazonKey4").attr('maxlength','240');
        $("#articleAmazonFormBasic_amazonKey5").attr('maxlength','240');
        $("#articleAmazonFormBasic_recommendedBrowseNodes").attr('maxlength','100');

        $("#articleAmazonFormBasic_amazonDescription").attr('maxlength','2000');
        $('#articleAmazonFormBasic_amazonDescription').on('keyup',function() {
            var maxlen = $(this).attr('maxlength');
            var length = $(this).val().length;
        });

        {% if elemento is not null %}
            var serie = '{{ elemento.serie.id }}'

            //VALIDATE FORM
            applyValidationPlugin();
            $("#articleFormBasic").validate();

            $('#articleFormBasic_serie option').each(
                function () {
                    if($(this).val() !== serie) {
                        $(this).attr('disabled', true);
                    }
                }
            );

        {% endif %}
    });

    applyValidationPlugin = function() {
        $("#articleFormBasic").validate({
            ignore: 'input[type=hidden], .select2-input', // ignore hidden fields
            errorClass: 'validation-error-label',
            successClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },

            // Different components require proper error label placement
            errorPlacement: function (error, element) {

                // Styled checkboxes, radios, bootstrap switch
                if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                    if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                        error.appendTo(element.parent().parent().parent().parent());
                    }
                    else {
                        error.appendTo(element.parent().parent().parent().parent().parent());
                    }
                }

                // Unstyled checkboxes, radios
                else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                    error.appendTo(element.parent().parent().parent());
                }

                // Input with icons
                else if (element.parents('div').hasClass('has-feedback')) {
                    error.appendTo(element.parent());
                }

                // Inline checkboxes, radios
                else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent());
                }

                // Input group, styled file input
                else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                    error.appendTo(element.parent().parent());
                }
                else {
                    error.insertAfter(element);
                }
            },
            validClass: "validation-valid-label",
            success: function (label) {
                label.addClass("validation-valid-label").text("Perfecto.")
            },
            rules: {
                vali: "required",
                password: {
                    minlength: 5
                },
                repeat_password: {
                    equalTo: "#password"
                },
                email: {
                    email: true
                },
                repeat_email: {
                    equalTo: "#email"
                },
                minimum_characters: {
                    minlength: 10
                },
                maximum_characters: {
                    maxlength: 10
                },
                minimum_number: {
                    min: 10
                },
                maximum_number: {
                    max: 10
                },
                number_range: {
                    range: [10, 20]
                },
                url: {
                    url: true
                },
                date: {
                    date: true
                },
                date_iso: {
                    dateISO: true
                },
                numbers: {
                    number: true
                },
                digits: {
                    digits: true
                },
                card: {
                    creditcard: true
                },
                basic_checkbox: {
                    minlength: 2
                },
                styled_checkbox: {
                    minlength: 2
                },
                switchery_group: {
                    minlength: 2
                },
                switch_group: {
                    minlength: 2
                }
            },
            messages: {
                custom: {
                    required: "This is a custom error message",
                },
                agree: "Please accept our policy"
            }
        });
    };

    $('#articleFormBasic_locatorAliasId').click(function(){
        fillSectionCategorySubcategoryNodesFromAliasLocator();
    });

    function fillSectionCategorySubcategoryNodesFromAliasLocator(){
        var aliasLocatorId = $('#articleFormBasic_locatorAliasId').val();
        var route = Routing.generate('fill_sections_categories_and_subcategories', {'id' : aliasLocatorId});

        $.get(route, function () {

        }).done(function (result) {
            $('#articleFormBasic_section').val(result['section']).trigger('change');
            $('#articleFormBasic_category').val(result['category']).trigger('change');
            $('#articleFormBasic_subcategory').val(result['subcategory']).trigger('change');
            $('#articleAmazonFormBasic_recommendedBrowseNodes').val(result['nodeAmazon']);
        }).fail(function (error) {
            console.log(error.responseText);
        });
    }

    $('#articleFormBasic_section').click(function(){
        checkIfSectionCategoryAndCategoryIsFilledAndLocatorAliasIdIsDistinctThanReceived()
    });

    $('#articleFormBasic_category').click(function(){
        checkIfSectionCategoryAndCategoryIsFilledAndLocatorAliasIdIsDistinctThanReceived()
    });

    $('#articleFormBasic_subcategory').click(function(){
        checkIfSectionCategoryAndCategoryIsFilledAndLocatorAliasIdIsDistinctThanReceived()
    });

    $('#articleAmazonFormBasic_isAvailableOnAmazon').click(function(){
        checkIfSectionCategoryAndCategoryIsFilledAndLocatorAliasIdIsDistinctThanReceived()
    });

    function checkIfSectionCategoryAndCategoryIsFilledAndLocatorAliasIdIsDistinctThanReceived() {
        var section = $('#articleFormBasic_section').val();
        var category = $('#articleFormBasic_category').val();
        var subcategory = $('#articleFormBasic_subcategory').val();
        if(section && category && subcategory){
            var route = Routing.generate('checkAliasLocatorIdAndFilledIfIsDistinctThanReceived', {'section': section, 'category': category, 'subcategory': subcategory });

            $.get(route, function () {

            }).done(function(result){
                if(result['locatorAliasId']) {
                    $('#articleAmazonFormBasic_recommendedBrowseNodes').val(result['nodeAmazon']);
                    var locatorAliasId = $('#articleFormBasic_locatorAliasId').val();
                    if(locatorAliasId !== result['locatorAliasId']) {
                        $('#articleFormBasic_locatorAliasId').val(result['locatorAliasId']).trigger('change');
                    }
                } else {
                    $('#articleFormBasic_locatorAliasId').prop('selectedIndex', 0).trigger('change');
                }
            }).fail(function(error) {
                console.log(error.responseText)
            });
        }
    }

</script>