@model IList<AddProductToOrderModel.ProductAttributeModel>

@using System.Text
@using Nop.Core.Domain.Catalog;
@using Nop.Services.Catalog;
@inject CatalogSettings catalogSettings

@if (Model.Count > 0)
{
    //dynamic update support
    var attributeChangeScriptsBuilder = new StringBuilder();
    var productId = Convert.ToInt32(ViewData["productId"]);
    var attributesHaveConditions = Model.Any(a => a.HasCondition);
    var attributeChangeHandlerFuncName = $"attribute_change_handler_{productId}";

    var getAttributeValueName = new Func<AddProductToOrderModel.ProductAttributeValueModel, string>((attributeValue) =>
        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);

    <div class="card card-default">
        <div class="card-body">
            @foreach (var attribute in Model)
            {
                <div id="@(NopCatalogDefaults.ProductAttributePrefix)row_@(attribute.Id)" class="form-group row">
                    @{
                        var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                        var textPrompt = !string.IsNullOrEmpty(attribute.TextPrompt) ? attribute.TextPrompt : attribute.Name;
                    }
                    <div class="col-md-3">
                        <div class="label-wrapper">
                            <label class="col-form-label">
                                @textPrompt
                            </label>
                        </div>
                    </div>
                    <div class="col-md-9 attributes">
                        <div class="input-group input-group-required">
                            @switch (attribute.AttributeControlType)
                            {
                                case AttributeControlType.DropdownList:
                                    {
                                        <select name="@(controlId)" id="@(controlId)" @(attribute.Values.Any(value => value.CustomerEntersQty) ? Html.Raw($"onchange=\"showHideDropdownQuantity('{controlId}')\"") : null)>
                                            @if (!attribute.IsRequired)
                                            {
                                                <option value="0">---</option>
                                            }
                                            @foreach (var attributeValue in attribute.Values)
                                            {
                                                <option selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">
                                                    @getAttributeValueName(attributeValue)
                                                </option>
                                            }
                                        </select>
                                        foreach (var attributeValue in attribute.Values.Where(value => value.CustomerEntersQty))
                                        {
                                            <div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
                                                <label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                                <input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                            </div>
                                        }
                                        <script>
                                            $(function() {
                                                showHideDropdownQuantity("@controlId");
                                            });
                                        </script>
                                    }
                                    break;
                                case AttributeControlType.RadioList:
                                case AttributeControlType.ColorSquares:
                                case AttributeControlType.ImageSquares:
                                    {
                                        foreach (var attributeValue in attribute.Values)
                                        {
                                            <div class="form-check">
                                                <label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
                                                    <input class="form-check-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) />
                                                    @getAttributeValueName(attributeValue)
                                                </label>

                                                @if (attributeValue.CustomerEntersQty)
                                                {
                                                    <div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
                                                        <label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                                        <input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                                    </div>
                                                }
                                            </div>
                                            <script>
                                                $(function() {
                                                    showHideRadioQuantity("@controlId");
                                                });
                                            </script>
                                        }
                                    }
                                    break;
                                case AttributeControlType.Checkboxes:
                                case AttributeControlType.ReadonlyCheckboxes:
                                    {
                                        foreach (var attributeValue in attribute.Values)
                                        {
                                            <div class="form-check">
                                                <label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
                                                    <input class="form-check-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) />
                                                    @getAttributeValueName(attributeValue)
                                                </label>

                                                @if (attributeValue.CustomerEntersQty)
                                                {
                                                    <div id="@(controlId)_@(attributeValue.Id)_qty_box" style="display: none">
                                                        <label class="margin-l-10 margin-r-5" for="@(controlId)_@(attributeValue.Id)_qty">@(T("Products.ProductAttributes.PriceAdjustment.Quantity").Text)</label>
                                                        <input class="qty-box form-control" type="text" name="@(controlId)_@(attributeValue.Id)_qty" id="@(controlId)_@(attributeValue.Id)_qty" value="@(attributeValue.Quantity)" />
                                                        <script>
                                                            $(function() {
                                                                showHideCheckboxQuantity('@(controlId)_@(attributeValue.Id)');
                                                            })
                                                        </script>
                                                    </div>
                                                }
                                            </div>
                                        }
                                    }
                                    break;
                                case AttributeControlType.TextBox:
                                    {
                                        <input name="@(controlId)" type="text" id="@(controlId)" class="form-control" />
                                    }
                                    break;
                                case AttributeControlType.MultilineTextbox:
                                    {
                                        <textarea cols="20" id="@(controlId)" name="@(controlId)" rows="2" class="form-control"></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))" />
                                    }
                                    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);
                                        }

                                        @* 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 class="file-upload-container">
                                            <div id="@(controlId + "element")" class="filepond"></div>
                                        </div>
                                        <input id="@(controlId)" name="@(controlId)" type="hidden" />


                                        <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,
                                                    server: {
                                                        process: {
                                                            url: '@(Url.RouteUrl("UploadFileProductAttribute", new {attributeId = attribute.Id}))',
                                                            onload: function(response) {
                                                                $("#@(controlId)").val(JSON.parse(response).downloadGuid);
                                                            }
                                                        },
                                                        revert: null,
                                                    },
                                                    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>
                                        <nop-alert asp-alert-id="uploadFileProductAttributeFailed" />
                                    }
                                    break;
                            }
                            <div class="input-group-btn">
                                @if (attribute.IsRequired)
                                {
                                    <nop-required />
                                }
                            </div>
                        </div>
                    </div>
                </div>
            }

            @*generate change event script*@
            @foreach (var attribute in Model)
            {
                var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                switch (attribute.AttributeControlType)
                {
                    case AttributeControlType.DropdownList:
                        {
                            attributeChangeScriptsBuilder.AppendFormat("$('#{0}').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}').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}').click(function(){{{2}();}});\n", controlId, attributeValue.Id, attributeChangeHandlerFuncName);
                            }
                        }
                        break;
                    default:
                        break;
                }

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

            @*render scripts*@
            <script>
                function @(attributeChangeHandlerFuncName)() {
                    $.ajax({
                        cache: false,
                        url: "@Html.Raw(Url.Action("productdetails_attributechange", "Order", new {productId = productId, validateAttributeConditions = attributesHaveConditions}))",
                        data: $('#product-details-form').serialize(),
                        type: "POST",
                        success: function (data, textStatus, jqXHR) {
                            if (data.enabledattributemappingids) {
                                for (var i = 0; i < data.enabledattributemappingids.length; i++) {
                                    $('#product_attribute_row_' + data.enabledattributemappingids[i]).show();
                                }
                            }
                            if (data.disabledattributemappingids) {
                                for (var i = 0; i < data.disabledattributemappingids.length; i++) {
                                    $('#product_attribute_row_' + data.disabledattributemappingids[i]).hide();
                                }
                            }
                            if (data.message) {
                                $('#productdetails_attributechangeMessage-info').text(data.message);
                                $("#productdetails_attributechangeMessage").trigger("click");
                            }
                        }
                    });
                }

                $(function() {
                    @(attributeChangeHandlerFuncName)();
                    @Html.Raw(attributeChangeScriptsBuilder.ToString())
                });
            </script>
            <nop-alert asp-alert-id="productdetails_attributechangeMessage" />
        </div>

        <script>
            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>
}