@model AddSpecificationAttributeModel

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

@{
    NopHtml.SetActiveMenuItemSystemName("Products");

    if(Model.SpecificationId == 0)
        ViewBag.PageTitle = T("Admin.Catalog.Products.SpecificationAttributes.AddNew").Text;
    else
        ViewBag.PageTitle = T("Admin.Catalog.Attributes.SpecificationAttributes.SpecificationAttribute.EditAttributeDetails").Text;
}

<form asp-controller="Product" asp-action="ProductSpecAttrUpdate" id="spec-form" method="post">
    <div class="content-header clearfix">
        <h1 class="float-left">
            @if (Model.SpecificationId == 0)
            {
                <text>@T("Admin.Catalog.Products.SpecificationAttributes.AddNew")</text>
            }
            else
            {
                <text>@T("Admin.Catalog.Attributes.SpecificationAttributes.SpecificationAttribute.EditAttributeDetails") - @Model.AttributeName</text>
            }
            <small>
                <i class="fas fa-arrow-circle-left"></i>
                <a asp-action="Edit" asp-route-id="@Model.ProductId">
                    @T("Admin.Catalog.Products.ProductAttributes.Attributes.BackToProduct")
                </a>
            </small>
        </h1>
        <div class="float-right">
            @if (Model.AttributeId == 0)
            {
                <button type="submit"
                        name="save"
                        formaction="@Url.Action("ProductSpecificationAttributeAdd")"
                        formmethod="post"
                        class="btn btn-primary">
                    <i class="far fa-save"></i>
                    @T("Admin.Common.Save")
                </button>
                <button type="submit"
                        name="save-continue"
                        formaction="@Url.Action("ProductSpecificationAttributeAdd")"
                        formmethod="post"
                        class="btn btn-primary">
                    <i class="far fa-save"></i>
                    @T("Admin.Common.SaveContinue")
                </button>
            }
            else
            {
                <button type="submit" name="save" class="btn btn-primary">
                    <i class="far fa-save"></i>
                    @T("Admin.Common.Save")
                </button>
                <button type="submit" name="save-continue" class="btn btn-primary">
                    <i class="far fa-save"></i>
                    @T("Admin.Common.SaveContinue")
                </button>
                <button type="submit"
                        name="delete"
                        formaction="@Url.Action("ProductSpecAttrDelete")"
                        formmethod="post"
                        class="btn btn-danger">
                    <i class="far fa-trash-alt"></i>
                    @T("Admin.Common.Delete")
                </button>
            }
        </div>
    </div>
     <section class="content">
        <div class="container-fluid">
            <div class="form-horizontal">
                <div class="cards-group">
                    @await Component.InvokeAsync(typeof(AdminWidgetViewComponent), new { widgetZone = AdminWidgetZones.ProductDetailsSpecificationAttributeDetailsTop, additionalData = Model })
                    <div class="card card-default">
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="AttributeTypeName" />
                                </div>
                                <div class="col-md-9">
                                    @if (Model.SpecificationId != 0)
                                    {
                                        <nop-editor asp-for="AttributeTypeName" html-attributes="@(new { disabled = true })" />
                                    }
                                    else
                                    {
                                        <nop-select asp-for="AttributeTypeId" asp-items="@(await ((SpecificationAttributeType) Model.AttributeTypeId).ToSelectListAsync())" />
                                    }
                                    <span asp-validation-for="AttributeTypeId"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="AttributeName" />
                                </div>
                                <div class="col-md-9">
                                    @if (Model.SpecificationId != 0)
                                    {
                                        <nop-editor asp-for="AttributeName" html-attributes="@(new { disabled = true })" />
                                    }
                                    else
                                    {
                                        <nop-select asp-for="AttributeId" asp-items="@Model.AvailableAttributes" />
                                    }
                                </div>
                            </div>

                            <script>
                                $(function() {
                                    var valueContainers = {
                                        @((int) SpecificationAttributeType.Option): $('#AttributeValueOptionSection'),
                                        @((int) SpecificationAttributeType.CustomText): $('#AttributeValueCustomTextSection'),
                                        @((int) SpecificationAttributeType.CustomHtmlText): $('#AttributeValueCustomHtmlTextSection'),
                                        @((int) SpecificationAttributeType.Hyperlink): $('#AttributeValueHyperlinkSection')
                                    }

                                    $('#@Html.IdFor(model => model.AttributeTypeId)').on('change',
                                        function() {
                                            var attrTypeId = $('#@Html.IdFor(model => model.AttributeTypeId)').val();

                                            var values = Object.values(valueContainers);
                                            values.forEach(function(value) {
                                                value.hideElement();
                                                value.find("input").prop("disabled", true);
                                            });
                                            valueContainers[attrTypeId].showElement();
                                            valueContainers[attrTypeId].find("input").prop("disabled", false);

                                            var allowFilteringSection = $('#AllowFilteringSection');
                                            var allowFilteringField = $('#@Html.IdFor(model => model.AllowFiltering)');

                                            if (attrTypeId == '@((int) SpecificationAttributeType.Option)') {
                                                allowFilteringSection.showElement();
                                            } else {
                                                allowFilteringField.prop('checked', false);
                                                allowFilteringSection.hideElement();
                                            }
                                        });

                                    $('#@Html.IdFor(model => model.AttributeTypeId)').trigger('change');
                                })
                            </script>

                            @if (Model.SpecificationId == 0)
                            {
                                <script>
                                    $(function() {
                                        $("#@Html.IdFor(model => model.AttributeId)").change(function() {
                                            var selectedAttributeId = $(this).val();
                                            //get options list
                                            $.ajax({
                                                cache: false,
                                                type: "GET",
                                                url: "@(Url.Action("GetOptionsByAttributeId", "SpecificationAttribute"))",
                                                data: {
                                                    "attributeId": selectedAttributeId
                                                },
                                                success: function (data, textStatus, jqXHR) {
                                                    var ddlSpecOptions = $("#@Html.IdFor(model => model.SpecificationAttributeOptionId)");
                                                    ddlSpecOptions.html('');
                                                    $.each(data,
                                                        function(id, option) {
                                                            ddlSpecOptions.append($('<option></option>').val(option.id)
                                                                .html(option.name));
                                                        });
                                                },
                                                error: function (jqXHR, textStatus, errorThrown) {
                                                    $("#getOptionsByAttributeIdAlert").trigger("click");
                                                }
                                            });
                                        });
                                        $("#@Html.IdFor(model => model.AttributeId)").trigger('change');
                                    })
                                </script>
                            }

                            <div class="form-group row" id="AttributeValueOptionSection">
                                <div class="col-md-3">
                                    <nop-label asp-for="SpecificationAttributeOptionId" />
                                </div>
                                <div class="col-md-9">
                                    <nop-select asp-for="SpecificationAttributeOptionId" asp-items="Model.AvailableOptions" />
                                    <span asp-validation-for="SpecificationAttributeOptionId"></span>
                                </div>
                            </div>
                        
                            <div id="AttributeValueCustomHtmlTextSection">
                                @(await Html.LocalizedEditorAsync<AddSpecificationAttributeModel, AddSpecificationAttributeLocalizedModel>("AttributeValueCustomHtmlTextSection-localized",
                                @<div>
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <nop-label asp-for="@Model.Locales[item].ValueRaw" />
                                        </div>
                                        <div class="col-md-9">
                                            <nop-editor asp-for="@Model.Locales[item].ValueRaw" asp-template="RichEditor" />
                                            <span asp-validation-for="@Model.Locales[item].ValueRaw"></span>
                                        </div>
                                    </div>
                                    <input type="hidden" asp-for="@Model.Locales[item].LanguageId" />
                                </div>,
                                @<div>
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <nop-label asp-for="ValueRaw" />
                                        </div>
                                        <div class="col-md-9">
                                            <nop-editor asp-for="ValueRaw" asp-template="RichEditor" />
                                            <span asp-validation-for="ValueRaw"></span>
                                        </div>
                                    </div>
                                </div>))
                            </div>

                            <div id="AttributeValueCustomTextSection">
                                @(await Html.LocalizedEditorAsync<AddSpecificationAttributeModel, AddSpecificationAttributeLocalizedModel>("AttributeValueCustomTextSection-localized",
                                @<div>
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <nop-label asp-for="@Model.Locales[item].Value" />
                                        </div>
                                        <div class="col-md-9">
                                            <nop-editor asp-for="@Model.Locales[item].Value" />
                                            <span asp-validation-for="@Model.Locales[item].Value"></span>
                                        </div>
                                    </div>
                                    <input type="hidden" asp-for="@Model.Locales[item].LanguageId" />
                                </div>,
                                @<div>
                                    <div class="form-group row">
                                        <div class="col-md-3">
                                            <nop-label asp-for="Value" />
                                        </div>
                                        <div class="col-md-9">
                                            <nop-editor asp-for="Value" />
                                            <span asp-validation-for="Value"></span>
                                        </div>
                                    </div>
                                </div>))
                            </div>
                        
                            <div class="form-group row" id="AttributeValueHyperlinkSection">
                                <div class="col-md-3">
                                    <nop-label asp-for="Value" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="Value" />
                                    <span asp-validation-for="Value"></span>
                                </div>
                            </div>
                            <div class="form-group row" id="AllowFilteringSection">
                                <div class="col-md-3">
                                    <nop-label asp-for="AllowFiltering" />
                                </div>
                                <div class="col-md-9">
                                    @if(Model.AttributeTypeId != (int)SpecificationAttributeType.Option)
                                    {
                                        <nop-editor asp-for="AllowFiltering" html-attributes="@(new { disabled = "true" })" />
                                    }
                                    else
                                    {
                                        <nop-editor asp-for="AllowFiltering" />
                                    }
                                    <span asp-validation-for="AllowFiltering"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="ShowOnProductPage" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="ShowOnProductPage" />
                                    <span asp-validation-for="ShowOnProductPage"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-3">
                                    <nop-label asp-for="DisplayOrder" />
                                </div>
                                <div class="col-md-9">
                                    <nop-editor asp-for="DisplayOrder" />
                                    <span asp-validation-for="DisplayOrder"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @await Component.InvokeAsync(typeof(AdminWidgetViewComponent), new { widgetZone = AdminWidgetZones.ProductDetailsSpecificationAttributeDetailsBottom, additionalData = Model })
                </div>
            </div>
        </div>
    </section>
    @if (Model.SpecificationId != 0)
    {
        <input asp-for="AttributeId" hidden="hidden" />
        <input asp-for="AttributeTypeId" hidden="hidden" />
        <input asp-for="SpecificationId" hidden="hidden" />
    }
    <input asp-for="ProductId" hidden="hidden" />
</form>
<nop-alert asp-alert-id="getOptionsByAttributeIdAlert" asp-alert-message="@T("Admin.Catalog.Products.SpecificationAttributes.Alert.FailedRetrieving")" />
