@model ProductAttributeMappingModel
@using Nop.Core.Domain.Catalog
@using Nop.Services.Catalog

@if(Model.Id > 0)
{
    <script>
    $(function() {
        $("#@Html.IdFor(model => model.ConditionModel.EnableCondition)").click(toggleEnableCondition);
        toggleEnableCondition();
    });

    function toggleEnableCondition() {
        if ($('#@Html.IdFor(model => model.ConditionModel.EnableCondition)').is(':checked')) {
            $('#pnlAttributes').showElement();
        } else {
            $('#pnlAttributes').hideElement();
        }
    }
    </script>
    <div class="card-body">
        <p>
            @T("Admin.Catalog.Products.ProductAttributes.Attributes.Condition.Description")
        </p>

        <div class="form-group row">
            <div class="col-sm-3">
                <nop-label asp-for="ConditionModel.EnableCondition" />
            </div>
            <div class="col-sm-9">
                <nop-editor asp-for="ConditionModel.EnableCondition" />
                <span asp-validation-for="ConditionModel.EnableCondition"></span>
            </div>
        </div>

        <div id="pnlAttributes" style="margin-bottom: 10px;">
            @if (Model.ConditionModel.ProductAttributes.Count > 0)
            {
                var attributesList = new List<SelectListItem>();
                foreach (var attribute in Model.ConditionModel.ProductAttributes)
                {
                    attributesList.Add(new SelectListItem { Text = attribute.Name, Value = attribute.Id.ToString() });
                }
                <div class="form-group row" id="pnlBasepriceUnit">
                    <div class="col-sm-3">
                        <nop-label asp-for="ConditionModel.SelectedProductAttributeId" />
                    </div>
                    <div class="col-sm-9">
                        <nop-select asp-for="ConditionModel.SelectedProductAttributeId" asp-items="@attributesList" />

                        <script>
                        $(function() {
                            $("#@Html.IdFor(model => model.ConditionModel.SelectedProductAttributeId)")
                                .change(toggleProductAttributes);

                            toggleProductAttributes();
                        });

                        function toggleProductAttributes() {
                            var selectedProductAttributeId =
                                $("#@Html.IdFor(model => model.ConditionModel.SelectedProductAttributeId)")
                                    .val();
                            $('[id^="pnl_attribute_values_"]').hideElement();
                            $('#pnl_attribute_values_' + selectedProductAttributeId).showElement();
                        }
                        </script>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-9 offset-sm-3">
                        @foreach (var attribute in Model.ConditionModel.ProductAttributes)
                        {
                            var controlId = $"{NopCatalogDefaults.ProductAttributePrefix}{attribute.Id}";
                            <div id="@($"pnl_attribute_values_{attribute.Id}")">
                                @switch (attribute.AttributeControlType)
                                {
                                    case AttributeControlType.DropdownList:
                                        {
                                            <select name="@(controlId)" id="@(controlId)" class="form-control">
                                                @if (!attribute.IsRequired)
                                                {
                                                    <option value="0">---</option>
                                                }
                                                @foreach (var attributeValue in attribute.Values)
                                                {
                                                    <option selected="@attributeValue.IsPreSelected" value="@attributeValue.Id">
                                                        @attributeValue.Name
                                                    </option>
                                                }
                                            </select>
                                        }
                                        break;
                                    case AttributeControlType.RadioList:
                                    case AttributeControlType.ColorSquares:
                                    case AttributeControlType.ImageSquares:
                                        {
                                            foreach (var attributeValue in attribute.Values)
                                            {
                                                <div class="form-check">
                                                    <input type="radio" class="form-check-input" name="@(controlId)" id="@(controlId)_@(attributeValue.Id)" value="@attributeValue.Id" checked="@attributeValue.IsPreSelected" >
                                                    <label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
                                                        @attributeValue.Name
                                                    </label>
                                                </div>
                                            }
                                        }
                                        break;
                                    case AttributeControlType.Checkboxes:
                                        {
                                            foreach (var attributeValue in attribute.Values)
                                            {
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="@attributeValue.Id" id="@(controlId)_@(attributeValue.Id)" name="@(controlId)" checked="@attributeValue.IsPreSelected" @(attribute.AttributeControlType == AttributeControlType.ReadonlyCheckboxes ? Html.Raw(" disabled=\"disabled\"") : null)>
                                                    <label class="form-check-label" for="@(controlId)_@(attributeValue.Id)">
                                                        @attributeValue.Name
                                                    </label>
                                                </div>
                                            }
                                        }
                                        break;
                                    case AttributeControlType.ReadonlyCheckboxes:
                                    case AttributeControlType.TextBox:
                                    case AttributeControlType.MultilineTextbox:
                                    case AttributeControlType.Datepicker:
                                    case AttributeControlType.FileUpload:
                                    default:
                                        //not supported as conditions
                                        break;
                                }
                            </div>
                        }
                    </div>
                </div>
            }
            else
            {
                <div class="form-group row" id="pnlBasepriceUnit">
                    <div class="col-sm-9 offset-sm-3">
                        No attribute exists that could be used as condition
                    </div>
                </div>
            }
        </div>
    </div>
}
else
{
    <div class="card-body">
        @T("Admin.Catalog.Products.ProductAttributes.Attributes.Condition.SaveBeforeEdit")
    </div>
}