@model IList<ProductDetailsModel.ProductAttributeModel>
@using System.Text;

<div id="product-attributes"></div>
@{
    //dynamic update support
    var attributesHaveAssociatedPictures = true;
    var attributeChangeScriptsBuilder = new StringBuilder();
    var productId = Model.First().ProductId;
    var attributeChangeHandlerFuncName = string.Format("attribute_change_handler_{0}", productId);
    var fileLink = @Url.RouteUrl("UploadFileProductAttribute");
    //generate change event script
    foreach (var attribute in Model)
    {
        string controlId = string.Format("product_attribute_{0}", attribute.Id);
        switch (attribute.AttributeControlType)
        {
            case AttributeControlType.DropdownList:
                {
                    attributeChangeScriptsBuilder.AppendFormat("document.querySelector('#{0}').addEventListener('change', function (){{{1}();}});\n", controlId, attributeChangeHandlerFuncName);
                }
                break;
            case AttributeControlType.RadioList:
            case AttributeControlType.ColorSquares:
            case AttributeControlType.ImageSquares:
                {
                    foreach (var attributeValue in attribute.Values)
                    {
                        attributeChangeScriptsBuilder.AppendFormat("document.querySelector('#{0}_{1}').addEventListener('click',function(e){{{2}();}},false);\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
                    }
                }
                break;
            case AttributeControlType.Checkboxes:
            case AttributeControlType.ReadonlyCheckboxes:
                {
                    foreach (var attributeValue in attribute.Values)
                    {
                        attributeChangeScriptsBuilder.AppendFormat("document.querySelector('#{0}_{1}').addEventListener('click',function(e){{{2}();}},false);\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
                    }
                }
                break;
            default:
                break;
        }
    }
    //render scripts
    <div id="product-attributes">
        <template v-if="standardProductAttributes.ProductAttributes !== 'undefined'">
            <div class="attributes">
                <table class="table">
                    <tr v-for="attribute in standardProductAttributes.ProductAttributes">
                        <td :id="'product_attribute_label_' + attribute.Id">
                            <span class="attribute-name">{{attribute.Name}}</span> <span v-if="attribute.IsRequired" class="required">*</span>
                            <template v-if="attribute.TextPrompt !==null">
                                <span class="text-prompt">{{attribute.TextPrompt}}</span>
                            </template>
                            <template v-if="attribute.Description !==null">
                                <span v-html="attribute.Description" class="attribute-description"></span>
                            </template>
                        </td>
                        <td :id="'product_attribute_input_' + attribute.Id">
                            <template v-if="attribute.AttributeControlType==4">
                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
                                <input :name="'product_attribute_' + attribute.Id" type="text" class="form-control textbox" :id="'product_attribute_' + attribute.Id" :value="attribute.DefaultValue" @@change="standardProductAttributes.attrchange" />
                            </template>
                            <template v-if="attribute.AttributeControlType==1">
                                <label :for="'product_attribute_' + attribute.Id" class="sr-only">product_attribute_{{attribute.Id}}</label>
                                <select :id="'product_attribute_' + attribute.Id" class="form-control custom-select" :name="'product_attribute_' + attribute.Id" @@change="standardProductAttributes.attrchange">
                                    <template v-if="attribute.IsRequired==false">
                                        <option value="">---</option>
                                    </template>
                                    <option v-for="attributeValue in attribute.Values" :selected="attributeValue.IsPreSelected" :value="attributeValue.Id" :data-disable="attributeValue.Id">
                                        <template v-if="attributeValue.PriceAdjustment==null">
                                            {{attributeValue.Name}}
                                        </template>
                                        <template v-else>
                                            {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                        </template>
                                    </option>
                                </select>
                            </template>
                            <template v-if="attribute.AttributeControlType==2">
                                <ul class="option-list px-0 mb-0">
                                    <li v-for="attributeValue in attribute.Values">
                                        <fieldset>
                                            <legend class="sr-only">product_attribute_{{attribute.Id}}</legend>
                                            <label class="custom-control custom-radio">
                                                <input class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="radio"
                                                       :name="'product_attribute_' + attribute.Id"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       :data-disable="attributeValue.Id"
                                                       @@change="standardProductAttributes.attrchange" />
                                                <span class="custom-control-label"></span>
                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                                    <template v-if="attributeValue.PriceAdjustment==null">
                                                        {{attributeValue.Name}}
                                                    </template>
                                                    <template v-else>
                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                                    </template>
                                                </span>
                                            </label>
                                        </fieldset>
                                    </li>
                                </ul>
                            </template>
                            <template v-if="attribute.AttributeControlType==3 || attribute.AttributeControlType==50">
                                <fieldset>
                                    <legend></legend>
                                    <ul class="option-list px-0 mb-0">
                                        <li v-for="attributeValue in attribute.Values">
                                            <label class="custom-control custom-checkbox">
                                                <input v-if="attribute.AttributeControlType==50"
                                                       class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="checkbox"
                                                       :name="'product_attribute_' + attribute.Id"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       @@change="standardProductAttributes.attrchange"
                                                       disabled="disabled" />
                                                <input v-else
                                                       class="custom-control-input"
                                                       :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id"
                                                       type="checkbox"
                                                       :name="'product_attribute_' + attribute.Id"
                                                       :value="attributeValue.Id"
                                                       :checked="attributeValue.IsPreSelected"
                                                       :data-disable="attributeValue.Id"
                                                       @@change="standardProductAttributes.attrchange" />
                                                <span class="custom-control-label"></span>
                                                <span class="custom-control-description" :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id">
                                                    <template v-if="attributeValue.PriceAdjustment==null">
                                                        {{attributeValue.Name}}
                                                    </template>
                                                    <template v-else>
                                                        {{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]
                                                    </template>
                                                </span>
                                            </label>
                                        </li>
                                    </ul>
                                </fieldset>
                            </template>
                            <template v-if="attribute.AttributeControlType==10">
                                <textarea :id="'product_attribute_' + attribute.Id" :name="'product_attribute_' + attribute.Id">{{attribute.DefaultValue}}</textarea>
                            </template>
                            <template v-if="attribute.AttributeControlType==30">
                                <template>
                                    <div :id="'product_attribute_' + attribute.Id + 'uploader'">
                                        <b-form-file :accept="attribute.AllowedFileExtensions"
                                                     type="file"
                                                     id="qqfile"
                                                     name="qqfile"
                                                     :data-url="'@fileLink/' + attribute.Id + '?productId=' + attribute.ProductId"
                                                     @@change="vm.uploadFile($event.target)" />
                                    </div>
                                </template>
                                <input class="hidden-upload-input"
                                       type="hidden"
                                       :id="'product_attribute_' + attribute.Id"
                                       :name="'product_attribute_' + attribute.Id"
                                       v-model="attribute.DefaultValue"
                                       :value="attribute.DefaultValue" />
                                <div id="download-message" class="alert my-2" style="display: none;"></div>
                                <div :id="'product_attribute_' + attribute.Id + 'downloadurl'" class="download-file" style="display: none;"><a class="btn btn-outline-info"> Download </a></div>
                            </template>
                            <template v-if="attribute.AttributeControlType==40">
                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                                            <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
                                            <template v-if="attributeValue.PriceAdjustment==null">
                                                <span class="color-container" :title="attributeValue.Name"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
                                            </template>
                                            <template v-else>
                                                <span class="color-container" :title="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'"> <span class="color" :style="'background-color:' + attributeValue.ColorSquaresRgb"></span> </span>
                                            </template>
                                        </label>
                                    </li>
                                </ul>
                            </template>
                            <template v-if="attribute.AttributeControlType==45">
                                <ul class="option-list color-squares w-100 d-inline-flex flex-wrap px-0 mb-0" :id="'color-squares-' + attribute.Id">
                                    <li v-for="attributeValue in attribute.Values" class="mr-1 p-0">
                                        <label :for="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" class="mb-0">
                                            <template v-if="attributeValue.PriceAdjustment==null">
                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
                                                <span :id="'imgSqr_' + attributeValue.Id" class="color-container">
                                                    <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span>
                                                </span>
                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
                                                    <div class="image-square-tooltip"><img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name" /> <span>{{attributeValue.Name}}</span></div>
                                                </b-tooltip>
                                            </template>
                                            <template v-else>
                                                <input :id="'product_attribute_' + attribute.Id + '_' + attributeValue.Id" type="radio" :name="'product_attribute_' + attribute.Id" :value="attributeValue.Id" :checked="attributeValue.IsPreSelected" :data-disable="attributeValue.Id" @@change="standardProductAttributes.attrchange" />
                                                <span :id="'imgSqr_' + attributeValue.Id" class="color-container"> <span class="color" :style="'background: url(' + attributeValue.ImageSquaresPictureModel.ImageUrl + ') 50% 50% no-repeat;'"></span> </span>
                                                <b-tooltip :target="'imgSqr_' + attributeValue.Id" placement="bottom">
                                                    <div class="image-square-tooltip">
                                                        <img :src="attributeValue.ImageSquaresPictureModel.FullSizeImageUrl" :alt="attributeValue.Name + ' [' + attributeValue.PriceAdjustment + ']'" />
                                                        <span>{{attributeValue.Name}}[{{attributeValue.PriceAdjustment}}]</span>
                                                    </div>
                                                </b-tooltip>
                                            </template>
                                        </label>
                                    </li>
                                </ul>
                            </template>
                        </td>
                    </tr>
                </table>
            </div>
        </template>
    </div>
    <script asp-location="Footer" asp-order="300">
        var standardProductAttributes = new Vue({
            data: function () {
                return {
                    ProductAttributes: null
                }
            },
            methods: {
                attrchange: function @(attributeChangeHandlerFuncName)() {
                    var form = document.getElementById('product-details-form');
                    var data = new FormData(form);
                    axios({
                        url: '@Html.Raw(Url.Action("productdetails_attributechange", "product", new { productId = productId, loadPicture = attributesHaveAssociatedPictures }))',
                        data: data,
                        method: 'post',
                        params: { product: '@productId' },
                    }).then(function (response) {
                        if (response.data.price) {
                            document.querySelector('.price-value-@productId').innerText = response.data.price;
                        }
                        if (response.data.sku) {
                            if(document.querySelector('#sku-@productId'))
                                document.querySelector('#sku-@productId').innerText = response.data.sku;
                        }
                        if (response.data.mpn) {
                            if(document.querySelector('#mpn-@productId'))
                                document.querySelector('#mpn-@productId').innerText = response.data.mpn;
                        }
                        if (response.data.gtin) {
                            if(document.querySelector('#gtin-@productId'))
                                document.querySelector('#gtin-@productId').innerText = response.data.gtin;
                        }
                        if (response.data.stockAvailability) {
                            if(document.querySelector('#stock-availability-value-@productId'))
                                document.querySelector('#stock-availability-value-@productId').innerText = response.data.stockAvailability;
                        }
                        if (response.data.outOfStockSubscription) {
                            var element = document.querySelector('#out-of-stock-subscribe-@productId');
                            if (element)
                                element.style.display = "block";
                        }
                        if (response.data.outOfStockSubscription == false) {
                            var element = document.querySelector('#out-of-stock-subscribe-@productId');
                            if (element) {
                                element.style.display = "none";
                            }
                        }
                        if (response.data.buttonTextOutOfStockSubscription) {
                            var element = document.querySelector('#out-of-stock-subscribe-@productId');
                            if (element)
                                element.value = response.data.buttonTextOutOfStockSubscription;
                        }
                        if (response.data.enabledattributemappingids) {
                            for (var i = 0; i < response.data.enabledattributemappingids.length; i++) {
                                document.querySelector('#product_attribute_label_' + response.data.enabledattributemappingids[i]).style.display = "table-cell";
                                document.querySelector('#product_attribute_input_' + response.data.enabledattributemappingids[i]).style.display = "table-cell";
                            }
                        }
                        if (response.data.disabledattributemappingids) {
                            for (var i = 0; i < response.data.disabledattributemappingids.length; i++) {
                                document.querySelector('#product_attribute_label_' + response.data.disabledattributemappingids[i]).style.display = "none";
                                document.querySelector('#product_attribute_input_' + response.data.disabledattributemappingids[i]).style.display = "none";
                            }
                        }
                        if (response.data.notAvailableAttributeMappingids) {
                            document.querySelectorAll('[data-disable]').forEach((element) => element.disabled = false);
                            for (var i = 0; i < response.data.notAvailableAttributeMappingids.length; i++) {
                                if (document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']").length > 0) {
                                    document.querySelectorAll("[data-disable='" + response.data.notAvailableAttributeMappingids[i] + "']")[0].disabled = true;
                                }
                            }
                        }
                        var product = this.product;
                        setTimeout(function () {
                            if (response.data.pictureDefaultSizeUrl) {
                                if (document.querySelector(".product-grouped")) {
                                    document.getElementById('main-product-img-' + product).setAttribute("src", response.data.pictureDefaultSizeUrl);
                                }
                                else {
                                    document.getElementById('main-product-img-@productId').setAttribute("src", response.data.pictureDefaultSizeUrl);
                                }
                            }
                        }, 100);
                    });
                },
            },
            created() {
                this.ProductAttributes = @Json.Serialize(Model);
            }
        });

        document.addEventListener("DOMContentLoaded", function () {
            standardProductAttributes.attrchange();
        });
    </script>
}