@model ProductDetailsModel
@using Nop.Core
@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Media
@using System.Text
@using Nop.Services.Catalog
@using Nop.Services.Media
@inject IDownloadService downloadService
@inject CatalogSettings catalogSettings
@if (Model.ProductAttributes.Count > 0)
{
    <div class="attributes">
        <dl>
            @foreach (var attribute in Model.ProductAttributes)
            {
                var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                var textPrompt = !string.IsNullOrEmpty(attribute.TextPrompt) ? attribute.TextPrompt : attribute.Name;
                <dt id="@($"{NopCatalogDefaults.ProductAttributePrefix}label_{attribute.Id}")" @(attribute.HasCondition ? Html.Raw("style = \"display: none\"") : null)>
                    <label class="text-prompt">
                        @textPrompt
                    </label>
                    @if (attribute.IsRequired)
                    {
                        <span class="required">*</span>
                    }
                    @if (!string.IsNullOrEmpty(attribute.Description))
                    {
                        <div class="attribute-description">
                            @Html.Raw(attribute.Description)
                        </div>
                    }
                </dt>
                <dd id="@($"{NopCatalogDefaults.ProductAttributePrefix}input_{attribute.Id}")" @(attribute.HasCondition ? Html.Raw("style = \"display: none\"") : null)>
                    @switch (attribute.AttributeControlType)
                    {
                        case AttributeControlType.DropdownList:
                            {
                                <select data-attr="@(attribute.Id)" name="@(controlId)" id="@(controlId)" @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onchange=\"showHideDropdownQuantity('{controlId}')\"") : null)>
                                    <option value="0">@T("Products.ProductAttributes.DropdownList.DefaultItem")</option>
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        var attributeName = attributeValue.PriceAdjustmentValue == 0 ?
                                            attributeValue.Name :
                                            T("Products.ProductAttributes.PriceAdjustment", attributeValue.Name, attributeValue.PriceAdjustment,
                                                attributeValue.CustomerEntersQty ? T("Products.ProductAttributes.PriceAdjustment.PerItem").Text : string.Empty).Text;
                                        <option data-attr-value="@attributeValue.Id" selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">@attributeName</option>
                                    }
                                </select>
                                foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
                                {
                                    <div class="qty-box" id="@(controlId)_@(attributeValue.Id)_qty_box" style="display:none">
                                        <label for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                        <input type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                    </div>
                                }
                                <script asp-location="Footer">
                                    $(function() {
                                        showHideDropdownQuantity("@controlId");
                                    });
                                </script>
                            }
                            break;
                        case AttributeControlType.RadioList:
                            {
                                <ul data-attr="@(attribute.Id)" class="option-list">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        var attributeName = string.IsNullOrEmpty(attributeValue.PriceAdjustment) ?
                                            attributeValue.Name :
                                            T("Products.ProductAttributes.PriceAdjustment", attributeValue.Name, attributeValue.PriceAdjustment,
                                                attributeValue.CustomerEntersQty ? T("Products.ProductAttributes.PriceAdjustment.PerItem").Text : string.Empty).Text;
                                        <li data-attr-value="@attributeValue.Id">
                                            <input id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected"
                                                   @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onclick=\"showHideRadioQuantity('{controlId}')\"") : null) />
                                            <label for="@(controlId)_@(attributeValue.Id)">@attributeName</label>

                                            @if (attributeValue.CustomerEntersQty)
                                            {
                                                <div class="qty-box" id="@(controlId)_@(attributeValue.Id)_qty_box" style="display:none">
                                                    <label for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                                    <input type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                                </div>
                                            }
                                        </li>
                                    }
                                </ul>
                                <script asp-location="Footer">
                                    $(function() {
                                        showHideRadioQuantity("@controlId");
                                    });
                                </script>
                            }
                            break;
                        case AttributeControlType.Checkboxes:
                        case AttributeControlType.ReadonlyCheckboxes:
                            {
                                <ul @(attribute.AttributeControlType == AttributeControlType.Checkboxes ? Html.Raw("data-attr=" + attribute.Id) : null) class="option-list">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        var attributeName = string.IsNullOrEmpty(attributeValue.PriceAdjustment) ?
                                            attributeValue.Name :
                                            T("Products.ProductAttributes.PriceAdjustment", attributeValue.Name, attributeValue.PriceAdjustment,
                                                attributeValue.CustomerEntersQty ? T("Products.ProductAttributes.PriceAdjustment.PerItem").Text : string.Empty).Text;
                                        <li @(attribute.AttributeControlType == AttributeControlType.Checkboxes ? Html.Raw("data-attr-value=" + attributeValue.Id) : null)>
                                            <input id="@(controlId)_@(attributeValue.Id)" type="checkbox" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null)
                                                   @(attributeValue.CustomerEntersQty ? Html.Raw($"onchange=\"showHideCheckboxQuantity('{controlId}_{attributeValue.Id}')\"") : null) />
                                            <label for="@(controlId)_@(attributeValue.Id)">@attributeName</label>

                                            @if (attributeValue.CustomerEntersQty)
                                            {
                                                <div class="qty-box" id="@(controlId)_@(attributeValue.Id)_qty_box" style="display:none">
                                                    <label for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                                    <input type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                                    <script asp-location="Footer">
                                                        $(function() {
                                                            showHideCheckboxQuantity('@(controlId)_@(attributeValue.Id)');
                                                        })
                                                    </script>
                                                </div>
                                            }
                                        </li>
                                    }
                                </ul>
                            }
                            break;
                        case AttributeControlType.TextBox:
                            {
                                <input name="@(controlId)" type="text" class="textbox" id="@(controlId)" value="@(attribute.DefaultValue)" />
                            }
                            break;
                        case AttributeControlType.MultilineTextbox:
                            {
                                <textarea cols="20" id="@(controlId)" name="@(controlId)">@(attribute.DefaultValue)</textarea>
                            }
                            break;
                        case AttributeControlType.Datepicker:
                            {
                                <nop-date-picker asp-day-name="@(controlId + "_day")"
                                                asp-month-name="@(controlId + "_month")"
                                                asp-year-name="@(controlId + "_year")"
                                                asp-begin-year="@DateTime.UtcNow"
                                                asp-end-year="@DateTime.UtcNow.AddYears(catalogSettings.CountDisplayedYearsDatePicker)"
                                                asp-selected-date="@CommonHelper.ParseDate(attribute.SelectedYear, attribute.SelectedMonth, attribute.SelectedDay)" />
                            }
                            break;
                        case AttributeControlType.FileUpload:
                            {
                                var allowedFileTypes = string.Empty;

                                if (attribute.AllowedFileExtensions.Any())
                                {
                                    var fileTypeList = attribute.AllowedFileExtensions
                                        .Select(x => new FileExtensionContentTypeProvider().TryGetContentType($".{x}", out var contentType) ? $"'{contentType}'" : null)
                                        .Where(ft => !string.IsNullOrEmpty(ft))
                                        .ToList();

                                    allowedFileTypes = string.Join(", ", fileTypeList);
                                }

                                Download download = null;
                                if (!string.IsNullOrEmpty(attribute.DefaultValue) && Guid.TryParse(attribute.DefaultValue, out var downloadGuid))
                                {
                                    download = await downloadService.GetDownloadByGuidAsync(downloadGuid);
                                }

                                @* register CSS and JS *@
                                <link rel="stylesheet" href="~/lib_npm/filepond/filepond.min.css" />
                                <link rel="stylesheet" href="~/lib_npm/filepond-plugin-get-file/filepond-plugin-get-file.min.css" />
                                <script asp-exclude-from-bundle="true" src="~/lib_npm/filepond/filepond.min.js" asp-location="Footer"></script>
                                <script asp-exclude-from-bundle="true" src="~/lib_npm/filepond-plugin-file-validate-type/filepond-plugin-file-validate-type.min.js" asp-location="Footer"></script>
                                <script asp-exclude-from-bundle="true" src="~/lib_npm/filepond-plugin-get-file/filepond-plugin-get-file.min.js" asp-location="Footer"></script>

                                <div id="@(controlId)element" class="filepond"></div>

                                <input id="@(controlId)" name="@(controlId)" type="hidden" value="@(download?.DownloadGuid.ToString() ?? "")" />
                                
                                <script asp-location="Footer">
                                    $(function () {
                                        // Register the plugins
                                        FilePond.registerPlugin(FilePondPluginFileValidateType,FilePondPluginGetFile);

                                        // Create a FilePond instance
                                        FilePond.create(document.querySelector('#@(controlId)element'), {
                                            credits: false,
                                            acceptedFileTypes: [@Html.Raw(allowedFileTypes)],
                                            allowMultiple: false,
                                            maxFiles: 1,
                                            allowDownloadByUrl: true,
                                            @if (download != null)
                                            {
                                            <text>
                                            files: [
                                                {
                                                    source: '@Html.Raw($"{download.Filename ?? download.DownloadGuid.ToString()}{download.Extension}")',
                                                    options: {
                                                        type: 'local',
                                                        metadata: {
                                                            url: '@(Url.RouteUrl("DownloadGetFileUpload", new { downloadId = download.DownloadGuid }))' 
                                                        }
                                                    },
                                                }
                                            ],
                                            </text>
                                            }
                                            server: {
                                                process: {
                                                    url: '@(Url.RouteUrl("UploadFileProductAttribute", new { attributeId = attribute.Id }))',
                                                    onload: (response) => {
                                                        $("#@(controlId)").val(JSON.parse(response).downloadGuid);
                                                    }
                                                },
                                                remove: (source, load, error) => {                                      
                                                    $("#@(controlId)").val('');
                                                    load();
                                                },
                                                revert: (uniqueFileId, load, error) => {
                                                    $("#@(controlId)").val('');
                                                    load();
                                                },
                                            },
                                            onprocessfiles: (error) => {
                                                if (error) {
                                                    alert(error);
                                                }
                                            },
                                            labelIdle: '@T("Common.FileUploader.DropFiles") / <span class="filepond--label-action">@T("Common.FileUploader.Browse")</span>',
                                            labelFileProcessing: '@T("Common.FileUploader.Processing")',
                                        });
                                    });
                                </script>

                            }
                            break;
                        case AttributeControlType.ColorSquares:
                            {
                                <ul data-attr="@(attribute.Id)" class="option-list attribute-squares color-squares" id="color-squares-@(attribute.Id)">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        var attributeName = string.IsNullOrEmpty(attributeValue.PriceAdjustment) ?
                                            attributeValue.Name :
                                            T("Products.ProductAttributes.PriceAdjustment", attributeValue.Name, attributeValue.PriceAdjustment, string.Empty).Text;
                                        <li data-attr-value="@attributeValue.Id" @(attributeValue.IsPreSelected ? @Html.Raw(" class=\"selected-value\"") : null)>
                                            <label for="@(controlId)_@(attributeValue.Id)">
                                                <span class="attribute-square-container" title="@attributeName">
                                                    <span class="attribute-square" style="background-color:@(attributeValue.ColorSquaresRgb);">&nbsp;</span>
                                                </span>
                                                <input id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected"
                                                       @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onclick=\"showHideRadioQuantity('{controlId}')\"") : null) />
                                            </label>
                                            <div class="tooltip-container">
                                                <div class="not-available-text">@T("Products.ProductAttributes.NotAvailable")</div>
                                            </div>
                                        </li>
                                    }
                                </ul>
                                foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
                                {
                                    <div class="qty-box" id="@(controlId)_@(attributeValue.Id)_qty_box" style="display:none">
                                        <label for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                        <input type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                    </div>
                                }
                                <script asp-location="Footer">
                                    $(function() {
                                        $('.attributes #color-squares-@(attribute.Id)').on('click', 'input', function(event) {
                                            $('.attributes #color-squares-@(attribute.Id)').find('li').removeClass('selected-value');
                                            $(this).closest('li').addClass('selected-value');
                                        });
                                        showHideRadioQuantity("@controlId");
                                    });
                                </script>
                            }
                            break;
                        case AttributeControlType.ImageSquares:
                            {
                                <ul data-attr="@(attribute.Id)" class="option-list attribute-squares image-squares" id="image-squares-@(attribute.Id)">
                                    @foreach (var attributeValue in attribute.Values)
                                    {
                                        var attributeName = string.IsNullOrEmpty(attributeValue.PriceAdjustment) ?
                                            attributeValue.Name :
                                            T("Products.ProductAttributes.PriceAdjustment", attributeValue.Name, attributeValue.PriceAdjustment, string.Empty).Text;
                                        <li data-attr-value="@attributeValue.Id" @(attributeValue.IsPreSelected ? @Html.Raw(" class=\"selected-value\"") : null)>
                                            <label for="@(controlId)_@(attributeValue.Id)">
                                                <span class="attribute-square-container">
                                                    <span class="attribute-square" style="background: url('@(attributeValue.ImageSquaresPictureModel.ImageUrl)') 50% 50% no-repeat;">&nbsp;</span>
                                                </span>
                                                <input id="@(controlId)_@(attributeValue.Id)" type="radio" name="@(controlId)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected"
                                                       @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onclick=\"showHideRadioQuantity('{controlId}', true)\"") : null) />
                                            </label>
                                            <div class="tooltip-container">
                                                <div class="tooltip-header">@attributeName</div>
                                                <div class="tooltip-body"><img src="@(attributeValue.ImageSquaresPictureModel.FullSizeImageUrl)" alt="@attributeName" /></div>
                                                <div class="not-available-text">@T("Products.ProductAttributes.NotAvailable")</div>
                                            </div>
                                        </li>
                                    }
                                </ul>
                                foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
                                {
                                    <div class="qty-box" id="@(controlId)_@(attributeValue.Id)_qty_box" style="display:none">
                                        <label for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                        <input type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                    </div>
                                }
                                <script asp-location="Footer">
                                    $(function() {
                                        $('.attributes #image-squares-@(attribute.Id)').on('click', 'input', function(event) {
                                            $('.attributes #image-squares-@(attribute.Id)').find('li').removeClass('selected-value');
                                            $(this).closest('li').addClass('selected-value');
                                        });
                                        showHideRadioQuantity("@controlId", true);
                                    });
                                </script>
                            }
                            break;
                    }
                </dd>
            }
        </dl>
        <script asp-location="Footer">
            function showHideDropdownQuantity(id) {
                $('select[name=' + id + '] > option').each(function () {
                    $('#' + id + '_' + this.value + '_qty_box').hide();
                });
                $('#' + id + '_' + $('select[name=' + id + '] > option:selected').val() + '_qty_box').css('display', 'inline-block');
            };

            function showHideRadioQuantity(id) {
                $('input[name=' + id + ']:radio').each(function () {
                    $('#' + $(this).attr('id') + '_qty_box').hide();
                });
                $('#' + id + '_' + $('input[name=' + id + ']:radio:checked').val() + '_qty_box').css('display', 'inline-block');
            };

            function showHideCheckboxQuantity(id) {
                if ($('#' + id).is(':checked'))
                    $('#' + id + '_qty_box').css('display', 'inline-block');
                else
                    $('#' + id + '_qty_box').hide();
            };
        </script>
    </div>

    if (Model.AllowAddingOnlyExistingAttributeCombinations && catalogSettings.AttributeValueOutOfStockDisplayType == AttributeValueOutOfStockDisplayType.Disable)
    {
        <script src="~/js/public.combinationsbehavior.js" asp-location="Footer"></script>

        <script asp-location="Footer">
            var combinationsBehavior_@(Model.Id);
            $(function() {
                combinationsBehavior_@(Model.Id) = createCombinationsBehavior({
                    contentEl: '[data-productid="@Model.Id"]',
                    fetchUrl: '@Html.Raw(Url.RouteUrl("GetProductCombinations", new { productId = Model.Id }))'
                });
                combinationsBehavior_@(Model.Id).init();
            });
        </script>
    }

    //dynamic update support
    var attributesHaveConditions = Model.ProductAttributes.Any(x => x.HasCondition);
    var attributesHaveAssociatedPictures = Model.ProductAttributes.Any(x => x.ProductId > 0);
    var attributeChangeScriptsBuilder = new StringBuilder();
    var attributeChangeHandlerFuncName = $"attribute_change_handler_{Model.Id}";
    if (catalogSettings.AjaxProcessAttributeChange)
    {
        if (Model.AllowAddingOnlyExistingAttributeCombinations && catalogSettings.AttributeValueOutOfStockDisplayType == AttributeValueOutOfStockDisplayType.Disable)
        {
            <script asp-location="Footer">
                $(function() {
                    $(combinationsBehavior_@(Model.Id)).on('processed', function () {
                        @(attributeChangeHandlerFuncName)();
                    });
                });
            </script>
        }
        else
        {
            //generate change event script
            foreach (var attribute in Model.ProductAttributes)
            {
                var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                switch (attribute.AttributeControlType)
                {
                    case AttributeControlType.DropdownList:
                        {
                            attributeChangeScriptsBuilder.AppendFormat("$('#{0}').on('change', function(){{{1}();}});\n", controlId, attributeChangeHandlerFuncName);
                        }
                        break;
                    case AttributeControlType.RadioList:
                    case AttributeControlType.ColorSquares:
                    case AttributeControlType.ImageSquares:
                        {
                            foreach (var attributeValue in attribute.Values)
                            {
                                attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}').on('click', function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
                            }
                        }
                        break;
                    case AttributeControlType.Checkboxes:
                    case AttributeControlType.ReadonlyCheckboxes:
                        {
                            foreach (var attributeValue in attribute.Values)
                            {
                                attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}').on('click', function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
                            }
                        }
                        break;
                    default:
                        break;
                }
            }
        }

        foreach (var attribute in Model.ProductAttributes)
        {
            foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
            {
                var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                attributeChangeScriptsBuilder.AppendFormat("$('#{0}_{1}_qty').on('input propertychange paste', function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
            }
        }

        //render scripts
        //almost the same implementation is used in the \Views\Product\_RentalInfo.cshtml file
        <script asp-location="Footer">
            function @(attributeChangeHandlerFuncName)() {
                $.ajax({
                    cache: false,
                    url: "@Html.Raw(Url.RouteUrl("ProductDetailsAttributeChange", new { productId = Model.Id, validateAttributeConditions = attributesHaveConditions, loadPicture = attributesHaveAssociatedPictures }))",
                    data: $('#product-details-form').serialize(),
                    type: "POST",
                    success: function (data, textStatus, jqXHR) {
                        if (data.price) {
                            $('.price-value-@Model.Id').text(data.price);
                        }
                        if (data.basepricepangv) {
                            $('#base-price-pangv-@Model.Id').text(data.basepricepangv);
                        } else {
                            $('#base-price-pangv-@Model.Id').hide();
                        }
                        if (data.sku) {
                            $('#sku-@Model.Id').text(data.sku).parent(".sku").show();
                        } else {
                            $('#sku-@Model.Id').parent(".sku").hide();
                        }
                        if (data.mpn) {
                            $('#mpn-@Model.Id').text(data.mpn).parent(".manufacturer-part-number").show();
                        } else {
                            $('#mpn-@Model.Id').parent(".manufacturer-part-number").hide();
                        }
                        if (data.gtin) {
                            $('#gtin-@Model.Id').text(data.gtin).parent(".gtin").show();
                        } else {
                            $('#gtin-@Model.Id').parent(".gtin").hide();
                        }
                        if (data.stockAvailability) {
                            $('#stock-availability-value-@Model.Id').text(data.stockAvailability);
                        }
                        if (data.enabledattributemappingids) {
                            for (var i = 0; i < data.enabledattributemappingids.length; i++) {
                                $('#@(NopCatalogDefaults.ProductAttributePrefix)label_' + data.enabledattributemappingids[i]).show();
                                $('#@(NopCatalogDefaults.ProductAttributePrefix)input_' + data.enabledattributemappingids[i]).show();
                            }
                        }
                        if (data.disabledattributemappingids) {
                            for (var i = 0; i < data.disabledattributemappingids.length; i++) {
                                $('#@(NopCatalogDefaults.ProductAttributePrefix)label_' + data.disabledattributemappingids[i]).hide();
                                $('#@(NopCatalogDefaults.ProductAttributePrefix)input_' + data.disabledattributemappingids[i]).hide();
                            }
                        }
                        if (data.pictureDefaultSizeUrl) {
                            $('#main-product-img-@Model.Id').attr("src", data.pictureDefaultSizeUrl);
                        }
                        if (data.pictureFullSizeUrl) {
                            $('#main-product-img-lightbox-anchor-@Model.Id').attr("href", data.pictureFullSizeUrl);
                        }
                        @if (Model.DisplayAttributeCombinationImagesOnly) 
                        {
                            <text>
                            $.each($('.thumb-item'), function(i, elem) { 
                                var id = $(elem).data('pictureid');
                                elems = elem
                                if (data.pictureIds.length == 0 || data.pictureIds.includes(id)) {
                                    $(elem).show();
                                }
                                else { 
                                    $(elem).hide();
                                }
                            });
                            </text>    
                        }
                        if (data.message) {
                            alert(data.message);
                        }
                        $(document).trigger({ type: "product_attributes_changed", changedData: data });
                    }
                });
            }
            $(function() {
                @(attributeChangeHandlerFuncName)();
                @Html.Raw(attributeChangeScriptsBuilder.ToString())
            });
        </script>
    }
}