@model IList<ProductDetailsModel.ProductAttributeModel>
@using System.Text;
@{
    //dynamic update support
    var attributesHaveAssociatedPictures = true;
    var attributeChangeScriptsBuilder = new StringBuilder();
    var bundleProductId = ViewData["BundleProductId"]?.ToString();
    var productId = ViewData["ProductId"]?.ToString();
    var format = "attribute_change_handler_{0}";
    var attributeChangeHandlerFuncName = string.Format(format, productId);
    //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
    <script asp-location="Footer" asp-order="300">
        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 = bundleProductId, loadPicture = attributesHaveAssociatedPictures }))',
                data: data,
                method: 'post',
                params: { product: '@bundleProductId' },
            }).then(function (response, url) {
                @*TODO*@
                if (response.data.price) {
                    document.querySelector('.price-value-@bundleProductId').innerText = response.data.price;
                }
            });
        }        
        Vue.component('product-attributes-bundle-@(productId)', {
            template: '#product-attributes-bundle',
            data() {
                return { productAttributes: @Json.Serialize(Model)}
            },
            mounted() {
                @(attributeChangeHandlerFuncName)();
                @Html.Raw(attributeChangeScriptsBuilder.ToString());
            }
        });

    </script>
    

}


<div id="product-attributes">
    <product-attributes-bundle-@(productId)></product-attributes-bundle-@(productId)>
</div>
