@model ProductAttributeCombinationModel
@inject Grand.Business.Core.Interfaces.Common.Stores.IStoreService _storeService
@inject Grand.Business.Core.Interfaces.Common.Directory.IGroupService _groupService
@{
    Layout = "";
    if (string.IsNullOrEmpty(Model.Id))
    {
        ViewBag.Title = Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.AddTitle"];
    }
    else
    {
        ViewBag.Title = Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.Update"];
    }
}
<form id="AttributeCombinationPopup" asp-area="@Constants.AreaAdmin" asp-controller="Product" asp-action="AttributeCombinationPopup" enctype="multipart/form-data"
      asp-route-productId="@Context.Request.Query["productId"]"
      asp-route-Id="@Context.Request.Query["Id"]"
      asp-route-btnId="@Context.Request.Query["btnId"]"
      asp-route-formId="@Context.Request.Query["formId"]">

    
    <div asp-validation-summary="All"></div>
    <input asp-for="Id" type="hidden" />
    <input asp-for="ProductId" type="hidden" />

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel light form-fit">
                <div class="x_title">
                    <div class="caption">
                        <i class="fa fa-cube"></i>
                        @if (string.IsNullOrEmpty(Model.Id))
                        {
                            @Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.AddTitle"]
                        }
                        else
                        {
                            @Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.Update"]
                        }
                    </div>
                </div>
                <div class="x_content">
                    <div class="form-horizontal">
                        <div class="form-body">
                            @if (Model.Warnings.Count > 0)
                            {
                                <div class="message-box message-box-error">
                                    @foreach (var warning in Model.Warnings)
                                    {
                                        @warning
                                        <br />
                                    }
                                </div>
                            }
                            @if (string.IsNullOrEmpty(Model.Id))
                            {
                                <partial name="Partials/ProductAttributes" model="Model.ProductAttributes" />
                            }
                            else
                            {
                                <div class="form-group">
                                    <label class="control-label col-sm-3">
                                        @Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.Fields.Attributes"]
                                    </label>
                                    <div class="col-md-9 col-sm-9">
                                        <text>@Html.Raw(Model.Attributes)</text>
                                    </div>
                                </div>

                            }
                            <br />
                        </div>
                    </div>
                    <div class="form-horizontal">
                        <div class="form-body">
                            @if (!Model.UseMultipleWarehouses)
                            {
                                <div class="form-group">
                                    <admin-label asp-for="StockQuantity" class="col-sm-3 control-label" />
                                    <div class="col-md-9 col-sm-9">
                                        <admin-input asp-for="StockQuantity" />
                                        <span asp-validation-for="StockQuantity"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <admin-label asp-for="ReservedQuantity" class="col-sm-3 control-label" />
                                    <div class="col-md-9 col-sm-9">
                                        <admin-input asp-for="ReservedQuantity" />
                                        <span asp-validation-for="ReservedQuantity"></span>
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="form-group" id="pnlMultipleWarehouses">

                                    <div class="col-md-9 col-sm-9">
                                        @if (Model.WarehouseInventoryModels.Count > 0)
                                        {
                                            <table style="width: 600px; border-collapse: collapse;">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            @Loc["Admin.Catalog.Products.ProductWarehouseInventory.Fields.Warehouse"]
                                                        </th>
                                                        <th align="center">
                                                            @Loc["Admin.Catalog.Products.ProductWarehouseInventory.Fields.WarehouseUsed"]
                                                        </th>
                                                        <th align="center">
                                                            @Loc["Admin.Catalog.Products.ProductWarehouseInventory.Fields.StockQuantity"]
                                                        </th>
                                                        <th align="center">
                                                            @Loc["Admin.Catalog.Products.ProductWarehouseInventory.Fields.ReservedQuantity"]
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @for (int i = 0; i < Model.WarehouseInventoryModels.Count; i++)
                                                    {
                                                        var item = Model.WarehouseInventoryModels[i];
                                                        <tr style="height:40px;">
                                                            <td style="width: 35%;">
                                                                <div style="padding-left: 5px; padding-right: 5px;">
                                                                    @item.WarehouseName
                                                                    <input asp-for="@Model.WarehouseInventoryModels[i].WarehouseId" type="hidden" />
                                                                </div>
                                                            </td>
                                                            <td align="center" style="width: 10%;">
                                                                <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                                                                    <admin-input asp-for="@Model.WarehouseInventoryModels[i].WarehouseUsed" />
                                                                    <div class="control__indicator"></div>
                                                                </label>
                                                            <td align="center" style="width: 20%;">
                                                                <admin-input asp-for="@Model.WarehouseInventoryModels[i].StockQuantity" />
                                                            </td>
                                                            <td align="center" style="width: 20%;">
                                                                <admin-input asp-for="@Model.WarehouseInventoryModels[i].ReservedQuantity" />
                                                            </td>

                                                        </tr>
                                                    }
                                                </tbody>
                                            </table>
                                        }
                                        else
                                        {
                                            @Loc["Admin.Catalog.Products.ProductWarehouseInventory.Fields.Warehouse.NotDefined"]
                                        }
                                    </div>
                                </div>
                            }
                            <div class="form-group">
                                <admin-label asp-for="AllowOutOfStockOrders" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <label class="mt-checkbox mt-checkbox-outline control control-checkbox">
                                        <admin-input asp-for="AllowOutOfStockOrders" />
                                        <div class="control__indicator"></div>
                                    </label>
                                    <span asp-validation-for="AllowOutOfStockOrders"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="Text" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="Text" />
                                    <span asp-validation-for="Text"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="Sku" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="Sku" />
                                    <span asp-validation-for="Sku"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="Mpn" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="Mpn" />
                                    <span asp-validation-for="Mpn"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="Gtin" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="Gtin" />
                                    <span asp-validation-for="Gtin"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="OverriddenPrice" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="OverriddenPrice" /> [@Model.PrimaryStoreCurrencyCode]
                                    <span asp-validation-for="OverriddenPrice"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="NotifyAdminForQuantityBelow" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <admin-input asp-for="NotifyAdminForQuantityBelow" />
                                    <span asp-validation-for="NotifyAdminForQuantityBelow"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <admin-label asp-for="PictureId" class="col-sm-3 control-label" />
                                <div class="col-md-9 col-sm-9">
                                    <ul style="list-style: none;">
                                        <li style="float: left; width: 110px;">
                                            <p style="float: left; padding-top: 20px;">
                                                <input type="radio" name="@Html.NameFor(x => x.PictureId)" value="0" id="id_image_0"
                                                       @if (!String.IsNullOrEmpty(Model.PictureId)) { <text> checked="checked" </text> }>
                                            </p>
                                            <p style="float: left; padding-top: 20px;">
                                                <label for="id_image_0">
                                                    @Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.Fields.Picture.NoPicture"]
                                                </label>
                                            </p>
                                        </li>
                                        @foreach (var picture in Model.ProductPictureModels)
                                        {
                                            <li style="float: left; width: 110px;">
                                                <p style="float: left; padding-top: 20px;">
                                                    <input type="radio" name="@Html.NameFor(x => x.PictureId)" value="@picture.PictureId" id="id_image_@picture.PictureId"
                                                           @if (picture.PictureId == Model.PictureId) { <text> checked="checked" </text> }>
                                                </p>
                                                <p style="float: left;">
                                                    <label for="id_image_@picture.PictureId">
                                                        <img src="@picture.PictureUrl" alt="" title="" width="75">
                                                    </label>
                                                </p>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="offset-sm-3 offset-md-3 col-md-9 col-sm-9">
                                    <button class="btn btn-success" type="submit" name="save"><i class="fa fa-check"></i> @Loc["Admin.Common.Save"] </button>
                                    <vc:admin-widget widget-zone="product_details_attribute_combination_buttons" additional-data="Model" />
                                </div>
                            </div>
                        </div>
                        @if (!string.IsNullOrEmpty(Model.Id))
                        {
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    @Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.TierPrices"] [@Model.PrimaryStoreCurrencyCode]
                                </div>
                                <div class="panel-body">
                                    <div id="tierprices-grid"></div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var mfp = $.magnificPopup.instance;
        $("#AttributeCombinationPopup").submit(function (e) {
            e.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function (data) {
                    if (data == "") {
                        mfp.close();
                        $('#btnRefreshCombinations').click();
                    } else {
                        $.magnificPopup.open({
                            items: {
                                src: data,
                                type: 'inline'
                            },
                            callbacks: {
                                open: function () {
                                    $('.mfp-wrap').removeAttr('tabindex');
                                }
                            }
                        });
                    }
                }
            });
        });
    </script>
    @if (!string.IsNullOrEmpty(Model.Id))
    {
        <script>
                //local datasource
                var allStores = [
                    {
                        Id : ' ',
                        Name : "@Loc["Admin.Settings.AllSettings.Fields.StoreName.AllStores"]"
                    }
                    @{
                        var allStores = await _storeService.GetAllStores();
                    }
                    @foreach (var store in allStores)
                    {
                        <text>
                                , {
                                    Id: "@(store.Id)",
                                    Name: "@(Html.Raw(System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(string.IsNullOrEmpty(store.Shortcut) ? "" : store.Shortcut)))"
                                }
                                </text>
                    }

                ];

                var allCustomerGroups = [
                    {
                        Id : ' ',
                        Name : "@Loc["Admin.Catalog.Products.TierPrices.Fields.CustomerGroup.All"]"
                    }
                    @{
                        var allCustomerGroups = await _groupService.GetAllCustomerGroups(showHidden: true);
                    }
                    @foreach (var customerGroup in allCustomerGroups)
                    {
                        <text>
                            , {
                    Id: "@(customerGroup.Id)",
                    Name: "@(Html.Raw(System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(string.IsNullOrEmpty(customerGroup.Name) ? "": customerGroup.Name))))"
                }
                </text>
                    }
                ];

                function storeDropDownEditor(container, options) {
                    $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:StoreId"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: true,
                            dataSource: allStores,
                        });
                }

                function customerGroupDropDownEditor(container, options) {
                    $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:CustomerGroupId"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: true,
                            dataSource: allCustomerGroups,

                        });
                }

                    $("#tierprices-grid").kendoGrid({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("ProductAttributeCombinationTierPriceList", "Product", new { productId = Model.ProductId, productAttributeCombinationId = Model.Id, area = Constants.AreaAdmin }))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                },
                                create: {
                                    url: "@Html.Raw(Url.Action("ProductAttributeCombinationTierPriceInsert", "Product", new { productId = Model.ProductId, productAttributeCombinationId = Model.Id, area = Constants.AreaAdmin }))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                },
                                update: {
                                    url:"@Html.Raw(Url.Action("ProductAttributeCombinationTierPriceUpdate", "Product", new { productId = Model.ProductId, productAttributeCombinationId = Model.Id, area = Constants.AreaAdmin }))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                },
                                destroy: {
                                    url: "@Html.Raw(Url.Action("ProductAttributeCombinationTierPriceDelete", "Product", new { productId = Model.ProductId, productAttributeCombinationId = Model.Id, area = Constants.AreaAdmin }))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors",
                                model: {
                                    id: "Id",
                                    fields: {
                                        Store: { editable: true, type: "string" },
                                        StoreId: { editable: true, type: "string" },
                                        CustomerGroup: { editable: true, type: "string" },
                                        CustomerGroupId: { editable: true, type: "string" },
                                        Quantity: { editable: true, type: "number" },
                                        Price: { editable: true, type: "number" },
                                        Id: { editable: false, type: "string" }
                                    }
                                }
                            },
                            requestEnd: function (e) {
                                if (e.type == "create" || e.type == "update") {
                                    this.read();
                                }
                            },
                            error: function (e) {
                                display_kendoui_grid_error(e);
                                // Cancel the changes
                                this.cancelChanges();
                            },
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        pageable: {
                            refresh: true,
                            numeric: false,
                            previousNext: false,
                            info: false
                        },
                        toolbar: [{ name: "create", text: "@Loc["Admin.Common.AddNewRecord"]" }],
                        editable: {
                            confirmation: false,
                            mode: "inline"
                        },
                        scrollable: false,
                        columns: [{
                            field: "StoreId",
                            title: "@Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.TierPrices.Store"]",
                            width: 250,
                            editor: storeDropDownEditor,
                            template: "#:Store#"
                        },
                        {
                            field: "CustomerGroupId",
                            title: "@Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.TierPrices.CustomerGroup"]",
                            width: 250,
                            editor: customerGroupDropDownEditor,
                            template: "#:CustomerGroup#"
                        },

                        {
                            field: "Quantity",
                            title: "@Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.TierPrices.Quantity"]",
                            width: 150,
                            format: "{0:0}"
                        }, {
                            field: "Price",
                            title: "@Loc["Admin.Catalog.Products.ProductAttributes.AttributeCombinations.TierPrices.Price"]",
                            width: 150,
                            editor: function (container, options) {
                                $('<input name="' + options.field + '"/>')
                                        .appendTo(container)
                                        .kendoNumericTextBox({
                                            format: "{0:n4}",
                                            decimals: 4
                                        });
                            }
                        },{
                            command: [{
                                name: "edit",
                                text: {
                                    edit: "@Loc["Admin.Common.Edit"]",
                                    update: "@Loc["Admin.Common.Update"]",
                                    cancel: "@Loc["Admin.Common.Cancel"]"
                                }
                            }, {
                                name: "destroy",
                                text: "@Loc["Admin.Common.Delete"]"
                            }],
                            width: 200
                        }]
                    });

        </script>
    }
</form>