{% form_theme formArticle 'bootstrap_3_layout.html.twig' %}
    <div class="panel panel-flat">

        <div class="panel-body">

            {% if elemento is defined and elemento is not null %}
                <div class="media">
                    <div class="media-left">
                        <a href="#" class="profile-thumb">
                            <img src="{{ elemento.getWebPath }}" class="img-thumbnail" alt="">
                        </a>
                    </div>

                    <div class="media-body">
                        <h1>{{ elemento.getBrand() }}</h1><span>{{ elemento.getArticleModel() }} - {{ elemento.getArticleColor() }}</span>
                    </div>

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

            <div class="row">

                <!-- barcode scan -->
                <div class="col-md-12" id="barcode_scan_article">
                    <div class="input-group form-group">
                        <span class="input-group-addon bg-pink"><i class="icon-search4"></i></span>
                        <input type="text" class="form-control typeahead" id="search_article" name="search_article" placeholder="Introduzca COD-Articulo a buscar">
                    </div>
                </div>

                <!-- client scan -->

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


                    <div class=" {% if order is defined %} hidden {% endif %}">
                        {{ 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="">
                        <script>

                        </script>
                        {% if orderId is defined and orderId is not null %}
                            {% if article.id is not defined or article.id is null %}
                                {{ form_row(formArticle.season, { 'value' : render(controller('CoreBundle:OrderArticle:getSeasonFromOrder', { 'orderId' : orderId })) })  }}
                            {% else %}
                                {{ form_row(formArticle.season , { 'attr': {'tabindex': '6'} })  }}
                            {% endif %}
                        {% else %}
                            {{ form_row(formArticle.season , { 'attr': {'tabindex': '6'} })  }}
                        {% endif %}

                    </div>

                    <div class="" id="series_div">
                        {% if order.dealer.defaultSerie is defined and order.dealer.defaultSerie is not null %}
                            {{ form_row(formArticle.serie , { 'attr': {'tabindex': '7'}, 'value' : order.dealer.defaultSerie.id }) }}
                        {% else %}
                            {{ form_row(formArticle.serie , { 'attr': {'tabindex': '7'} }) }}
                        {% endif %}
                    </div>


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

                    <div class="">
                        {{ form_row(formArticle.typeArticle, { 'attr': {'tabindex': '8'} }) }}
                    </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': '10'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.category , { 'attr': {'tabindex': '11'} })  }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.subcategory , { 'attr': {'tabindex': '12'} })  }}
                    </div>

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

                    <!-- DEFAULT PRICES -->

                    <div class="row hidden">
                        <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>



                    <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': '13'} }) }}
                        </div>

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

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


                </div>

                <div class="col-md-4">
                    <div class="">
                        {{ form_row(formArticle.shoeLast  , { 'attr': {'tabindex': '14'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeLine  , { 'attr': {'tabindex': '15'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeHeel  , { 'attr': {'tabindex': '16'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeSole  , { 'attr': {'tabindex': '17'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeInsole  , { 'attr': {'tabindex': '18'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeLining  , { 'attr': {'tabindex': '19'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.shoeSkin  , { 'attr': {'tabindex': '20'} }) }}
                    </div>
                    <div class="">
                        {{ form_row(formArticle.externalSoftwareId  , { 'attr': {'tabindex': '20'} }) }}
                    </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 article is defined %}
                    <a href="{{ article.webPath() | imagine_filter('big_prop') }}" data-popup="lightbox">
                        <img id="article-image" class="img-thumbnail" src="{{ article.webPath() | imagine_filter('medium') }}"/>
                    </a>
                    {% endif %}

                </div>

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

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

                    <div class="">
                        {{ form_row(formArticle.detail , { 'attr': {'tabindex': '21'} })  }}
                    </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>

            <!-- 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>

            <!-- 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>


        </div>

    </div>

<script>

    //FLAG VARIABLE FOR NO CHANGE SERIE IN CASE OF BINDIND DATA FROM AN ARTICLE INSERTED BY SEARCHER IN NEW ARTICLE CREATION.
    var isBinded = false;

    $(document).ready(function(){

        //FORCING INPUT AND SELECT RESTRICTIONS.
        $('#articleFormBasic_articleColorAssistant').select2();
        $('#articleFormBasic_subcategory').select2();
        $('#articleFormBasic_locatorAliasId').select2();
        $('#articleFormBasic_taxes').select2();
        $('#articleFormBasic_taxSupported').select2();

        $("#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;
        });

        $("input:text:visible:first").focus();
        $("#articleFormBasic_season").prop('required', true);

        //check if formArticle.articleModel comes empty -> if comes empty get default serie of dealer
        {% if formArticle['articleModel'] is null %}
            getSeries();
        {% endif %}

        {% if article is defined and article.id is not empty %}
            var serie = '{{ article.serie.id }}'

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

    });

    $('#articleFormBasic_dealer').change(function() {
        ajaxLoadBrands()
    });

    //ENABLED / DISABLED PRICES BY SIZE
    $('#articleFormBasic_serie').change(function() {
        checkSerieBySize();
    });

    function checkSerieBySize(){
        var data = {
            serieId: $('#articleFormBasic_serie').val()
        };

        $.ajax({
            type: "POST",
            url: " {{path('ajax_size_by_id')}}",
            data: data,
            success: function(result) {
                if (result == true){
                    $("#inputsPriceArticleByPrices1").addClass("hidden");
                    if ($('#collapsible-control-right-group2').attr('aria-expanded') === "false" || typeof($('#collapsible-control-right-group2').attr('aria-expanded')) === "undefined") {
                        $("#inputsPriceArticleByPrices2").click();
                    }
                }else{
                    $("#inputsPriceArticleByPrices1").removeClass("hidden");
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    }

    function isCheckSerieBySize(){
        var data = {
            serieId: $('#articleFormBasic_serie').val()
        };

        $.ajax({
            type: "POST",
            async: false,
            url: " {{path('ajax_size_by_id')}}",
            data: data,
            success: function(result) {
                if (result == true){
                    console.log("yes");
                    return 1;
                }else{
                    console.log("no");
                    return 0;
                }
            },
            error: function(err) {
                console.log(err);
                response = 0;
            }
        });
    }


    function ajaxLoadBrands(){

        var data = {
            idDealer: $('#articleFormBasic_dealer').val()
        };

        $.ajax({
            type: "POST",
            url: " {{path('ajax_getmarks_by_dealerid')}}",
            data: data,
            success: function(result) {
                // Remove current options
                actualBrand = $("#articleFormBasic_brand").val();
                //alert("actual brand:"+actualBrand);
                $('#articleFormBasic_brand').html('');
                //$('#articleFormBasic_brand').append('<option value=""></option>');
                $.each(result, function(k, v) {
                    $('#articleFormBasic_brand').append('<option value="' + v + '">' + k + '</option>');
                });

                found= false;
                $.each(result, function(k, v) {
                    if (v == actualBrand){
                        found = true;
                    }
                });
                if (!found){
                    $("#articleFormBasic_brand").select2();
                }
            },
            error: function(err) {
                console.log(err);
                $("#articleFormBasic_brand").select2("val","");
            }
        });
    }


    $('#search_article').typeahead({
        highlight: true,
        minLength: 1
    },{
        name: 'alias',
        display: function(value) {
            return value.alias + ' - ' +value.brand + ' - ' + value.model + ' - ' + value.color
        },
        source: function (query,sync, async) {
            var idDealer = $('#articleFormBasic_dealer').val();
            $.get(Routing.generate('ajax_alias_suggestions', {'text': query, 'dealerId': idDealer }), function (data) {
                async(data);
            })
        }
    }).bind("typeahead:select",function(e,data){

        $("#articleFormBasic_alias").typeahead('val',data.alias);
        var route = Routing.generate('ajax_fill_art_form',{'data':data.id});
        $.get(route, function(article){
            bindData(article);
        });
        return false;

    }).bind("typeahead:autocomplete",function(e,data){
        if(e.keyCode === 9) return false;
    });

    function bindData (data) {
        isBinded = true;

        $('#articleFormBasic_id').val(data['id']);
        $('#articleFormBasic_articleModel').val(data['article_model']['description']);

        if (data['article_color']){
            $('#articleFormBasic_articleColor').val(data['article_color']['description']);
        }
        if (data['dealer']) {
            $('#articleFormBasic_dealer').val(data['dealer']['id']).trigger("change");
            //$('#articleFormBasic_dealer').val(data['dealer']?data['dealer']['id']:null).trigger("change");
        }

        if (data['type_article']) {
            $('#articleFormBasic_typeArticle').val(data['type_article']?data['type_article']['id']:null).trigger("change");
        }

        $('#articleFormBasic_articleColorAssistant').val(data['article_color_assistant']?data['article_color_assistant']['id']:null).trigger("change");
        $('#articleFormBasic_brand').val(data['brand']?data['brand']['id']:null).trigger("change");
        $('#articleFormBasic_season').val(data['season']?data['season']['id']:null).trigger("change");
        $('#articleFormBasic_section').val(data['section']?data['section']['id']:null).trigger("change");
        $('#articleFormBasic_category').val(data['category']?data['category']['id']:null).trigger("change");
        $('#articleFormBasic_subcategory').val(data['subcategory']?data['subcategory']['id']:null).trigger("change");
        $('#articleFormBasic_serie').val(data['serie']?data['serie']['id']:null).trigger("change");
        $('#articleFormBasic_locatorAliasId').val(data['locator_alias_id']?data['locator_alias_id']['id']:null).trigger("change");
        $('#articleFormBasic_descriptionLabel').val(data['description_label']?data['description_label']:null).trigger("change");

        //TAX SUPPORTED
        var taxArray = [];
        if (data['taxes']){
            $.each( data['taxes'], function( key, value ) {
                taxArray.push(value["id"]);
            });
            $('#articleFormBasic_taxes').select2('val', taxArray);
        }else{
            $('#articleFormBasic_taxes').val(null).trigger("change");
        }

        //TAX SUPPORTED
        var taxSupportedArray = [];
        if (data['tax_supported']){
            $.each( data['tax_supported'], function( key, value ) {
                taxSupportedArray.push(value["id"]);
            });
            $('#articleFormBasic_taxSupported').select2('val', taxSupportedArray);
        }else{
            $('#articleFormBasic_taxSupported').val(null).trigger("change");
        }

        $('#articleFormBasic_shoeLast').val(data['shoe_last']?data['shoe_last']['description']:'');
        $('#articleFormBasic_shoeLine').val(data['shoe_line']?data['shoe_line']['description']:'');
        $('#articleFormBasic_shoeHeel').val(data['shoe_heel']?data['shoe_heel']['description']:'');
        $('#articleFormBasic_shoeSole').val(data['shoe_sole']?data['shoe_sole']['description']:'');
        $('#articleFormBasic_shoeInsole').val(data['shoe_insole']?data['shoe_insole']['description']:'');
        $('#articleFormBasic_shoeLining').val(data['shoe_lining']?data['shoe_lining']['description']:'');
        $('#articleFormBasic_shoeSkin').val(data['shoe_skin']?data['shoe_skin']['description']:'');

        $('#articleFormBasic_detail').val(data['detail']);
        $('#articleFormBasic_stockMin').val(data['stock_min']);
        $('#articleFormBasic_ref').val(data['ref']);
        $('#articleFormBasic_autoIncrement').val(data['auto_increment']);
        $('#articleFormBasic_defaultPVP').val(data['default_p_v_p']);
        $('#articleFormBasic_defaultCostPrice').val(data['default_cost_price']);
        $('#articleFormBasic_externalSoftwareId').val(data['external_software_id']);

        $('#pvp').val(data['default_p_v_p']);
        if(data['default_p_v_p']) {
            $('#costPrice').val(data['default_cost_price']);
            //WHEN COST PRICE IS CHANGED, TAX TABLE IS PAINTED
            paintTaxTable(data['default_cost_price']);
        }

        setArticleImage(data['id'], data['filename']);

        if (data['article_property']){
            $('#articleFormBasic_articleProperty_id').val(data['article_property']['id']);
            $('#articleFormBasic_articleProperty_property1').val(data['article_property']['property1']);
            $('#articleFormBasic_articleProperty_property2').val(data['article_property']['property2']);
            $('#articleFormBasic_articleProperty_property3').val(data['article_property']['property3']);
            $('#articleFormBasic_articleProperty_property4').val(data['article_property']['property4']);
            $('#articleFormBasic_articleProperty_property5').val(data['article_property']['property5']);
        }


    }

    $('#articleFormBasic_dealer').change(function () {
        {% if article.id is not defined or article.id is null %}
        if ($('#articleFormBasic_dealer').val() && !isBinded){
            getSeries();
        }
        isBinded = false;
        {% endif %}
    });

    //CHECK IF DEALER GOT DEFAULT SERIE AND PAINT SELECT WITH OPTION SELECTED
    function getSeries() {
        var dealerId = $('#articleFormBasic_dealer').val();
        var defaultSerie = null;

        var url = Routing.generate('get_default_serie_by_dealer', { 'dealerId' : dealerId });

        $.get(url, function (ds) {
            if(ds !== '' || ds !== null) {
                defaultSerie = ds;
            }

            if(dealerId) {
                var path = Routing.generate('get_series');

                $.get(path, function (series) {

                    var selectBrands = $('#articleFormBasic_serie');

                    selectBrands.find('option').remove();
                    selectBrands.select2('val', "");

                    selectBrands.append('<option value="">Seleccione una serie</option>');

                    for (var i = 0; i < series.length; i++) {
                        var option = $('<option>');

                        option.val(series[i].id);
                        if (series[i].id === defaultSerie) {
                            option.attr("selected", "selected");
                        }
                        option.text(series[i].name);

                        selectBrands.append(option);
                        selectBrands.select2();

                        generateSerieTable();
                        generatePriceTable();
                    }

                }).fail(function (error) {
                    console.log(error.responseText);
                });
            }
        }).fail(function (error) {
            console.log(error.responseText);
        });
    }

    $('#articleFormBasic_locatorAliasId').click(function(){
       var aliasLocatorId = $(this).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');
       }).fail(function (error) {
            console.log(error.responseText);
       });

    });

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

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

    $('#articleFormBasic_subcategory').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']) {
                    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)
            });
        }
    }

    //REMOVE COMMAS
    $(function(){

        $('#pvp').keypress(function(event) {
            if ((( (event.which != 46 && event.which != 110) || ( (event.which != 46 && event.which != 110) && $(this).val() == '')) ||
                $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }else{
            }
        }).on('paste', function(event) {
            event.preventDefault();
        });

    });

    $(function(){

        $('#costPrice').keypress(function(event) {
            if ((( (event.which != 46 && event.which != 110) || ( (event.which != 46 && event.which != 110) && $(this).val() == '')) ||
                $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                event.preventDefault();
            }else{
            }
        }).on('paste', function(event) {
            event.preventDefault();
        });
    });

</script>
<script src="{{ asset('assets/js/article.image.js') }}?v={{ "now"|date("d-m-Y") }}"></script>