@model PantheonRA.BackOffice.Models.SetItemCreateViewModel
@using PantheonRA.BackOffice.Enums
@using PantheonRA.WebApi.Contracts
@using PantheonRA.WebApi.Contracts.Enums

@Html.Hidden("Ident", Model.Id)
@Html.Hidden("ViewType", Model.ViewType)
@Html.Hidden("UrlPriceList", Url.Action("Edit", "Products", new { type = ProductsMenuType.ContractPriceList, id = Model.Id }))
@Html.Hidden("TxtConfirm", Loc.Confirm)
@Html.Hidden("ConfirmDeleteMessage", Loc.ConfirmDeleteMessage)
@Html.Hidden("TxtCancel", Loc.Cancel)
@Html.Hidden("TxtConfirmation", Loc.Confirmation)
@Html.Hidden("UrlDeletePriceItem", Url.Action("DeletePriceItem", "Products"))
@Html.Hidden("UrlSavePriceItem", Url.Action("SavePriceItem", "Products"))
@Html.Hidden("UrlGetSubjectIdentCode", Url.Action("GetSubjectIdentCode", "Products"))

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        <div class="tab-content">
            <form action="@Url.Action("PrintDocument", "OutstandingItems")" method="post" target="_blank">
                <div class="row document-head">
                    <div class="col-md-3 col-xs-6">
                        <div class="form-group">
                            @{
                                var subjectSelected = Model.ViewType != ProductPriceItemViewType.SubjectType ? "selected" : string.Empty;
                                var subjectTypeSelected = Model.ViewType == ProductPriceItemViewType.SubjectType ? "selected" : string.Empty;
                            }
                            @Html.Label(Loc.TypeOfView, new { @class = "control-label" })
                            <select name="SelectViewType"
                                    id="SelectViewType"
                                    onchange="reloadPriceItems()"
                                    class="form-control select2">
                                <option value="@ProductPriceItemViewType.Subject" @subjectSelected>@Loc.Subject</option>
                                <option value="@ProductPriceItemViewType.SubjectType" @subjectTypeSelected>@Loc.SubjectType</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        <div class="form-group">
                            <label class="control-label">@Loc.SearchFilter</label>
                            @Html.TextBoxFor(model => model.Keywords, new { @id = "Keywords", @class = "form-control search-input", @placeholder = Loc.Search, autocomplete = "off" })
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        @{
                            var dateFrom = Model.DateFrom == default(DateTime) ? null : Model.DateFrom.ToString(Loc.DateFormat);
                        }
                        <div class="form-group">
                            <label class="control-label">@Loc.DateFrom</label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                <input class="form-control custom-datepicker"
                                       id="DateFrom"
                                       onblur="reloadPriceItems()"
                                       value="@dateFrom"
                                       type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-6">
                        @{
                            var dateTo = Model.DateTo == default(DateTime) ? null : Model.DateTo.ToString(Loc.DateFormat);
                        }
                        <div class="form-group">
                            <label class="control-label">@Loc.DateTo</label>
                            <div class="input-group">
                                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                <input class="form-control custom-datepicker"
                                       id="DateTo"
                                       onblur="reloadPriceItems()"
                                       value="@dateTo"
                                       type="text">
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div id="panelProductPriceItems">
                <table id="tblProductPriceItems" class="table table-bordered table-min" role="grid">
                    <thead>
                        @{
                            var rebate1 = Loc.Discount + " 1 (%)";
                            var rebate2 = Loc.Discount + " 2 (%)";
                            var rebate3 = Loc.Discount + " 3 (%)";
                            var subjOrSubjTypeLabel = Model.ViewType == ProductPriceItemViewType.SubjectType ? Loc.SubjectType : Loc.Subject;
                        }
                        <tr>
                            <th style="width: 10px"></th>
                            <th style="width: 200px">@subjOrSubjTypeLabel</th>
                            @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                            {
                                <th class="dyn-col-1">@Loc.ProductPriceItemTypeTitle</th>
                            }
                            <th class="dyn-col-2">@Loc.Type</th>
                            <th class="dyn-col-3">@Loc.Price</th>
                            <th class="dyn-col-4">@Loc.RetailPrice</th>
                            <th class="dyn-col-5">@Loc.Currency</th>
                            <th class="dyn-col-6">@rebate1</th>
                            <th class="dyn-col-7">@rebate2</th>
                            <th class="dyn-col-8">@rebate3</th>
                            <th class="dyn-col-9">@Loc.Formula</th>
                            <th class="dyn-col-10">@Loc.DateFrom</th>
                            <th class="dyn-col-11">@Loc.DateTo</th>
                            <th class="dyn-col-12">@Loc.PaymentDeadline</th>
                            <th class="dyn-col-13">@Loc.DeliveryDeadlinePeriod</th>
                            @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                            {
                                <th class="p-x-14 dyn-col-14">@Loc.Document</th>
                            }
                            <th style="width: 42px;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.ProductPriceItems ?? new List<ProductPriceItem>())
                        {
                            var dateStartFormatted = item.DateStart.HasValue ? item.DateStart.Value.ToString(Loc.DateFormat) : string.Empty;
                            var dateEndFormatted = item.DateEnd.HasValue ? item.DateEnd.Value.ToString(Loc.DateFormat) : string.Empty;
                            var typeFormatted = item.InvoInOut == ProductInOutType.Sales ? Loc.Sales : Loc.Pruchase;
                            var salePriceFormatted = item.SalePrice != null ? item.SalePrice.Value.ToString("#.##") : string.Empty;
                            var subjOrSubjType = item.SubjOrSubjType;

                            if (Model.ViewType == ProductPriceItemViewType.SubjectType && item.SubjOrSubjType == DebtStructureType.Suppliers)
                            {
                                subjOrSubjType = Loc.Supplier;
                            }
                            else if (Model.ViewType == ProductPriceItemViewType.SubjectType && item.SubjOrSubjType == DebtStructureType.Buyers)
                            {
                                subjOrSubjType = Loc.Buyer;
                            }

                            <tr id="tr-@item.AnQid">
                                <!-- Expand Button -->
                                <td class="border-right-none" onclick="showHideRow(@item.AnQid);">
                                    <span id="expand-icon-@item.AnQid" class="fa fa-caret-right table-expand-button"></span>
                                </td>
                                <!-- Subject Or SubjectType -->
                                <td class="border-left-none dyn-col-0">
                                    @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                                    {
                                        <select id="input-subject-@item.AnQid"
                                                data-placeholder="@subjOrSubjTypeLabel"
                                                class="form-control select2withAPI"
                                                data-column-names="@Loc.Company,@Loc.Name,@Loc.Address,@Loc.Post"
                                                data-bootstrap-columns="col-md-4,col-md-4,col-md-3,col-md-1"
                                                data-allow-clear="true"
                                                data-search-width="700"
                                                data-input-width="230"
                                                onchange="onSubjectChange(@item.AnQid)"
                                                data-url="@Url.Action("SearchSubjects", "TravelOrdersDistances")">
                                            <option selected>@item.SubjOrSubjType</option>
                                        </select>
                                    }
                                    else
                                    {
                                        <select id="input-subjecttype-@item.AnQid"
                                                data-placeholder="@subjOrSubjTypeLabel"
                                                class="form-control select2withAPI"
                                                data-allow-clear="true"
                                                data-search-width="300"
                                                data-input-width="230"
                                                onchange="saveProductPriceItem(@item.AnQid)"
                                                data-url="@Url.Action("GetSubjTypes", "Products")">
                                            <option selected>@item.SubjOrSubjTypeShowText</option>
                                        </select>
                                    }
                                </td>
                                @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                                {
                                    <!-- Code -->
                                    <td id="td-code-@item.AnQid" class="dyn-col-1">
                                        <input id="input-code-@item.AnQid"
                                               value="@item.Code"
                                               type="text"
                                               maxlength="10"
                                               placeholder="@Loc.ProductPriceItemTypeTitle"
                                               class="form-control"
                                               autocomplete="off" disabled />
                                    </td>
                                }
                                <!-- InOut -->
                                <td class="dyn-col-2">
                                    @{
                                        var selectedSales = item.InvoInOut == ProductInOutType.Sales ? "selected" : string.Empty;
                                        var selectedPurchase = item.InvoInOut == ProductInOutType.Purchase ? "selected" : string.Empty;
                                    }
                                    <select id="input-inout-@item.AnQid" class="form-control select2" onchange="onInOutChange(@item.AnQid, 'input-inout')">
                                        <option value="@ProductInOutType.Sales" @selectedSales>@Loc.Sales</option>
                                        <option value="@ProductInOutType.Purchase" @selectedPurchase>@Loc.Pruchase</option>
                                    </select>
                                </td>
                                @{
                                    var priceValue = item.AnQid == 0 ? (decimal?)null : item.Price;
                                }
                                <!-- Price -->
                                <td class="dyn-col-3">
                                    <input id="input-price-@item.AnQid"
                                           type="text"
                                           value="@priceValue"
                                           step="2"
                                           placeholder="@Loc.Price"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           autocomplete="off"
                                           class="form-control text-right numberInput" />
                                </td>
                                <!-- Sale Price -->
                                <td class="dyn-col-4">
                                    <input id="input-sale-price-@item.AnQid"
                                           type="text"
                                           value="@item.SalePrice"
                                           step="2"
                                           placeholder="@Loc.RetailPrice"
                                           onblur="onSalePriceChange(@item.AnQid, 'input-sale-price')"
                                           autocomplete="off"
                                           class="form-control text-right numberInput" />
                                </td>
                                <!-- Currency -->
                                <td class="dyn-col-5">
                                    <select id="input-currency-@item.AnQid"
                                            class="form-control select2withAPI"
                                            data-search-width="120"
                                            data-placeholder="@Loc.Currency"
                                            onchange="saveProductPriceItem(@item.AnQid)"
                                            data-url="@Url.Action("GetCurrencies", "TravelOrdersExpenses")">
                                        <option selected>@item.Currency</option>
                                    </select>
                                </td>
                                @{
                                    var rebate1Value = item.AnQid == 0 ? (decimal?)null : item.Rebate;
                                    var rebate2Value = item.AnQid == 0 ? (decimal?)null : item.Rebate2;
                                    var rebate3Value = item.AnQid == 0 ? (decimal?)null : item.Rebate3;
                                }
                                <!-- Rebate 1 -->
                                <td class="dyn-col-6">
                                    <input id="input-rebate1-@item.AnQid"
                                           type="text"
                                           value="@rebate1Value"
                                           step="2"
                                           placeholder="@rebate1"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           autocomplete="off"
                                           class="form-control text-right numberInput" />
                                </td>
                                <!-- Rebate 2 -->
                                <td class="dyn-col-7">
                                    <input id="input-rebate2-@item.AnQid"
                                           type="text"
                                           value="@rebate2Value"
                                           step="2"
                                           placeholder="@rebate2"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           autocomplete="off"
                                           class="form-control text-right numberInput" />
                                </td>
                                <!-- Rebate 3 -->
                                <td class="dyn-col-8">
                                    <input id="input-rebate3-@item.AnQid"
                                           type="text"
                                           value="@rebate3Value"
                                           step="2"
                                           placeholder="@rebate3"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           autocomplete="off"
                                           class="form-control text-right numberInput" />
                                </td>
                                <!-- Formula -->
                                <td class="dyn-col-9">
                                    <select id="input-formula-@item.AnQid"
                                            data-placeholder="@Loc.Formula"
                                            class="form-control select2withAPI"
                                            data-column-names="@Loc.Code,@Loc.Name,@Loc.Formula"
                                            data-bootstrap-columns="col-md-2,col-md-2,col-md-8"
                                            data-allow-clear="true"
                                            data-search-width="600"
                                            data-input-width="230"
                                            onchange="onFormulaChange(@item.AnQid, 'input-formula')"
                                            data-selector-separator=" | "
                                            data-url="@Url.Action("GetFormulaList", "Products")">
                                        <option selected>@item.Formula</option>
                                    </select>
                                </td>
                                <!-- Date Start -->
                                <td class="dyn-col-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                        <input class="form-control custom-datepicker"
                                               id="input-date-start-@item.AnQid"
                                               value="@dateStartFormatted"
                                               placeholder="@Loc.DateFrom"
                                               onchange="saveProductPriceItem(@item.AnQid)"
                                               type="text">
                                    </div>
                                </td>
                                <!-- Date End -->
                                <td class="dyn-col-11">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                        <input class="form-control custom-datepicker"
                                               id="input-date-end-@item.AnQid"
                                               value="@dateEndFormatted"
                                               placeholder="@Loc.DateTo"
                                               onchange="saveProductPriceItem(@item.AnQid)"
                                               type="text">
                                    </div>
                                </td>
                                <!-- Payment Deadline -->
                                <td class="dyn-col-12">
                                    <input id="input-payment-deadline-@item.AnQid"
                                           value="@item.PaymentDeadline"
                                           type="number"
                                           min="-10"
                                           max="10"
                                           step="1"
                                           placeholder="@Loc.PaymentDeadline"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           class="form-control"
                                           autocomplete="off" />
                                </td>
                                <!-- Delivery Deadline -->
                                <td class="dyn-col-13">
                                    <input id="input-delivery-deadline-@item.AnQid"
                                           value="@item.DeliveryDeadline"
                                           type="number"
                                           min="-10"
                                           max="10"
                                           step="1"
                                           placeholder="@Loc.DeliveryDeadline"
                                           onblur="saveProductPriceItem(@item.AnQid)"
                                           class="form-control"
                                           autocomplete="off" />
                                </td>
                                @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                                {
                                    <!-- Doc Key -->
                                    <td class="dyn-col-14">
                                        <input id="input-dockey-@item.AnQid"
                                               value="@item.DocKey"
                                               type="text"
                                               maxlength="20"
                                               placeholder="@Loc.DocumentKey"
                                               class="form-control"
                                               autocomplete="off"
                                               disabled />
                                    </td>
                                }
                                <!-- Action -->
                                <td class="td-action">
                                    @if (item.AnQid == 0)
                                    {
                                        <p class="btn btn btn-success btn-table-action" title="@Loc.AddPosition" onclick="saveProductPriceItem(0, true)">
                                            <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                        </p>
                                    }
                                    else
                                    {
                                        <p class="text-center" title="@Loc.Delete">
                                            <span onclick="deleteProductPriceItem(@item.AnQid)" class="m-t far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                        </p>
                                    }
                                </td>
                            </tr>
                            <tr id="tr-detail-@item.AnQid" class="pace-inactive border-left-success">
                                <td colspan="100%">
                                    <!-- Code -->
                                    <div class="dyn-row-1 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.Code</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-code-@item.AnQid"
                                                   value="@item.Code"
                                                   type="text"
                                                   maxlength="10"
                                                   placeholder="@Loc.Code"
                                                   class="form-control"
                                                   autocomplete="off" />
                                        </div>
                                    </div>
                                    @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                                    {
                                        <!-- InOut -->
                                        <div class="dyn-row-2 row m-t-3">
                                            <div class="col-md-4 col-lg-1">
                                                <label>@Loc.ProductPriceItemTypeTitle</label>
                                            </div>
                                            <div class="col-md-4 col-lg-2">
                                                <select id="row-input-inout-@item.AnQid"
                                                        data-placeholder="@subjOrSubjTypeLabel"
                                                        class="form-control select2withAPI"
                                                        data-allow-clear="true"
                                                        data-search-width="300"
                                                        data-input-width="230"
                                                        onchange="onInOutChange(@item.AnQid, 'row-input-inout')"
                                                        data-url="@Url.Action("GetSubjTypes", "Products")">
                                                    <option selected>@item.SubjOrSubjTypeShowText</option>
                                                </select>
                                            </div>
                                        </div>
                                    }
                                    <!-- Price -->
                                    <div class="dyn-row-3 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.Price</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-price-@item.AnQid"
                                                   type="text"
                                                   value="@priceValue"
                                                   placeholder="@Loc.Price"
                                                   step="2"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   autocomplete="off"
                                                   class="form-control numberInput" />
                                        </div>
                                    </div>
                                    <!-- Sale Price -->
                                    <div class="dyn-row-4 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.RetailPrice</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-sale-price-@item.AnQid"
                                                   type="text"
                                                   value="@item.SalePrice"
                                                   placeholder="@Loc.RetailPrice"
                                                   step="2"
                                                   onblur="onSalePriceChange(@item.AnQid, 'row-input-sale-price')"
                                                   autocomplete="off"
                                                   class="form-control numberInput" />
                                        </div>
                                    </div>
                                    <!-- Currency -->
                                    <div class="dyn-row-5 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.Currency</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <select id="row-input-currency-@item.AnQid"
                                                    class="form-control select2withAPI"
                                                    data-search-width="120"
                                                    data-placeholder="@Loc.Currency"
                                                    onchange="saveProductPriceItem(@item.AnQid)"
                                                    data-url="@Url.Action("GetCurrencies", "TravelOrdersExpenses")">
                                                <option selected>@item.Currency</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- Rebate 1 -->
                                    <div class="dyn-row-6 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@rebate1</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-rebate1-@item.AnQid"
                                                   type="text"
                                                   value="@rebate1Value"
                                                   placeholder="@rebate1"
                                                   step="2"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   autocomplete="off"
                                                   class="form-control numberInput" />
                                        </div>
                                    </div>
                                    <!-- Rebate 2 -->
                                    <div class="dyn-row-7 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@rebate2</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-rebate2-@item.AnQid"
                                                   type="text"
                                                   value="@rebate2Value"
                                                   placeholder="@rebate2"
                                                   step="2"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   autocomplete="off"
                                                   class="form-control numberInput" />
                                        </div>
                                    </div>
                                    <!-- Rebate 3 -->
                                    <div class="dyn-row-8 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@rebate3</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-rebate3-@item.AnQid"
                                                   type="text"
                                                   value="@rebate3Value"
                                                   placeholder="@rebate3"
                                                   step="2"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   autocomplete="off"
                                                   class="form-control numberInput" />
                                        </div>
                                    </div>
                                    <!-- Formula -->
                                    <div class="dyn-row-9 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.Formula</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <select id="row-input-formula-@item.AnQid"
                                                    data-placeholder="@Loc.Formula"
                                                    class="form-control select2withAPI"
                                                    data-column-names="@Loc.Code,@Loc.Name,@Loc.Formula"
                                                    data-bootstrap-columns="col-md-2,col-md-2,col-md-8"
                                                    data-allow-clear="true"
                                                    data-search-width="600"
                                                    data-input-width="230"
                                                    onchange="onFormulaChange(@item.AnQid, 'row-input-formula')"
                                                    data-selector-separator=" | "
                                                    data-url="@Url.Action("GetFormulaList", "Products")">
                                                <option selected>@item.Formula</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!-- Date Start -->
                                    <div class="dyn-row-10 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.DateFrom</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                                <input class="form-control custom-datepicker"
                                                       id="row-input-date-start-@item.AnQid"
                                                       value="@dateStartFormatted"
                                                       placeholder="@Loc.DateFrom"
                                                       onchange="saveProductPriceItem(@item.AnQid)"
                                                       type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Date End -->
                                    <div class="dyn-row-11 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.DateTo</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                                <input class="form-control custom-datepicker"
                                                       id="row-input-date-end-@item.AnQid"
                                                       value="@dateEndFormatted"
                                                       placeholder="@Loc.DateTo"
                                                       onchange="saveProductPriceItem(@item.AnQid)"
                                                       type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Payment Deadline -->
                                    <div class="dyn-row-12 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.PaymentDeadline</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-payment-deadline-@item.AnQid"
                                                   value="@item.PaymentDeadline"
                                                   type="number"
                                                   min="-10"
                                                   max="10"
                                                   step="1"
                                                   placeholder="@Loc.PaymentDeadline"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   class="form-control"
                                                   autocomplete="off" />
                                        </div>
                                    </div>
                                    <!-- Delivery Deadline -->
                                    <div class="dyn-row-13 row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.DeliveryDeadline</label>
                                        </div>
                                        <div class="col-md-4 col-lg-2">
                                            <input id="row-input-delivery-deadline-@item.AnQid"
                                                   value="@item.DeliveryDeadline"
                                                   type="number"
                                                   min="-10"
                                                   max="10"
                                                   step="1"
                                                   placeholder="@Loc.DeliveryDeadline"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   class="form-control"
                                                   autocomplete="off" />
                                        </div>
                                    </div>
                                    @if (Model.ViewType != ProductPriceItemViewType.SubjectType)
                                    {
                                        <!-- Doc Key -->
                                        <div class="dyn-row-14 row m-t-3">
                                            <div class="col-md-4 col-lg-1">
                                                <label>@Loc.Document </label>
                                            </div>
                                            <div class="col-md-4 col-lg-2">
                                                <input id="row-input-dockey-@item.AnQid"
                                                       value="@item.DocKey"
                                                       type="text"
                                                       maxlength="20"
                                                       placeholder="@Loc.Document"
                                                       class="form-control"
                                                       autocomplete="off"
                                                       disabled />
                                            </div>
                                        </div>
                                    }
                                    <!-- Note -->
                                    <div class="row m-t-3">
                                        <div class="col-md-4 col-lg-1">
                                            <label>@Loc.Note </label>
                                        </div>
                                        <div class="col-md-4 col-lg-11">
                                            <input id="row-input-note-@item.AnQid"
                                                   value="@item.Note"
                                                   type="text"
                                                   maxlength="20"
                                                   placeholder="@Loc.Note"
                                                   onblur="saveProductPriceItem(@item.AnQid)"
                                                   class="form-control"
                                                   autocomplete="off" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/custom/global-helpers.js"></script>
<script src="~/Scripts/custom/initializers.js"></script>
<script>
    const colWidths = [250, 150, 150, 120, 120, 120, 120, 120, 120, 120, 200, 200, 120, 120, 120];

    /* TODO: This function should be in the some global script. Will be moved on the finish of task about new table behavior. */
    function initializeDynamicColumns(tablePanelId, columnWidths) {
        let panelWidth = $('#' + tablePanelId).width();

        let widthSum = 0;

        for (let i = 0; i < columnWidths.length; i++) {
            let colClass = '.dyn-col-' + i;
            let rowClass = '.dyn-row-' + i;

            widthSum += columnWidths[i];

            $(colClass).css('width', columnWidths[i] + 'px');

            if (widthSum > panelWidth) {
                $(colClass).hide();
                $(rowClass).show();
            }
            else {
                $(colClass).show();
                $(rowClass).hide();
            }
        }

        let expandedRow = localStorage.getItem("dyn-table-expanded-row");
        let expandedUrl = localStorage.getItem("dyn-table-expanded-url");

        if (expandedRow > 0 && expandedUrl == window.location) {
            setTimeout(() => {
                showHideRow(expandedRow);
            }, 100);
        }
    }

    function showHideRow(anQid) {
        $("#tr-detail-" + anQid).toggle();

        if ($("#tr-" + anQid).hasClass("border-left-success")) {
            $("#tr-" + anQid).removeClass("border-left-success");
            $("#tr-" + anQid).removeClass("primary-background");
            $("#tr-" + anQid + " input").removeClass("primary-background");
            $("#tr-" + anQid + " select").removeClass("primary-background");
            $("#tr-" + anQid + " .select2-selection__rendered").removeClass("primary-background");
            $("#tr-" + anQid + " .select2-selection").removeClass("primary-background");
            $("#expand-icon-" + anQid).removeClass("fa-caret-down");
            $("#expand-icon-" + anQid).addClass("fa-caret-right");
        }
        else {
            $("#tr-" + anQid).addClass("border-left-success");
            $("#tr-" + anQid).addClass("primary-background");
            $("#tr-" + anQid + " input").addClass("primary-background");
            $("#tr-" + anQid + " select").addClass("primary-background");
            $("#tr-" + anQid + " .select2-selection__rendered").addClass("primary-background");
            $("#tr-" + anQid + " .select2-selection").addClass("primary-background");
            $("#expand-icon-" + anQid).removeClass("fa-caret-right");
            $("#expand-icon-" + anQid).addClass("fa-caret-down");
        }
    }

    function getExpandTableValue(fieldId) {
        return $("#" + fieldId).is(":visible") ? $("#" + fieldId).val() : $("#row-" + fieldId).val();
    }

    function initializeDynamicColors() {
        var items = @Html.Raw(Json.Encode(Model.ProductPriceItems));

        for (var i = 0; i < items.length; i++) {

            let backColor = $("#input-code-" + items[i].AnQid).css("background-color");

            $("#td-code-" + items[i].AnQid).css("background-color", backColor);
        }
    }

    function initializeDynamicSelects() {
        var items = @Html.Raw(Json.Encode(Model.ProductPriceItems));

        for (var i = 0; i < items.length; i++) {

            let anQid = items[i].AnQid;

            $('#input-subject-' + anQid).on('select2:opening', function (e) {
                if (!$("#tr-" + anQid).hasClass("border-left-success")) {
                    showHideRow(anQid);
                }
            });

            $('#input-subjecttype-' + anQid).on('select2:opening', function (e) {
                if (!$("#tr-" + anQid).hasClass("border-left-success")) {
                    showHideRow(anQid);
                }
            });
        }
    }

    function initializeDynamicHiddenFields() {
        var items = @Html.Raw(Json.Encode(Model.ProductPriceItems));

        for (var i = 0; i < items.length; i++) {

            let anQid = items[i].AnQid;

            onInOutChange(anQid, 'input-inout', false);
        }
    }

    $(document).ready(function () {
        initializeDynamicColumns('panelProductPriceItems', colWidths);
        initializeDynamicColors();
        initializeDynamicSelects();
        initializeDynamicHiddenFields();
        $("#importContractPricesContainer").removeClass("hidden");
    });

    function reloadPriceItems() {
        window.location = $("#UrlPriceList").val()
            + "&ViewType=" + $("#SelectViewType").val()
            + "&DateFrom=" + $("#DateFrom").val()
            + "&DateTo=" + $("#DateTo").val();
    }

    function onSubjectChange(anQid) {
        let subjectId = $("#input-subject-" + anQid).val();
        let ident = $("#Ident").val();

        if (!subjectId) {
            return;
        }

        $.ajax({
            url: $("#UrlGetSubjectIdentCode").val() + "?ident=" + ident + "&subjectId=" + subjectId,
            type: 'GET',
            success: function (data) {
                $("#input-code-" + anQid).val(data.Key);

                saveProductPriceItem(anQid);
            }
        });
    }

    function onFormulaChange(anQid, idPrefix) {
        let formulaId = $("#" + idPrefix + "-" + anQid).val();

        $("#select2-" + idPrefix + "-" + anQid + "-container").text(formulaId);

        saveProductPriceItem(anQid);
    }

    function onSalePriceChange(anQid, idPrefix) {
        //let salePrice = $("#" + idPrefix + "-" + anQid).val();

        //let price = (parseFloat(salePrice) - parseFloat(0));

        //$("#input-price-" + anQid).val(price);
        //$("#row-input-price-" + anQid).val(price);

        //if (("#input-price-" + anQid).length) {
        //    formatNumberInput($("#input-price-" + anQid));
        //}
        //if (("#row-input-price-" + anQid).length) {
        //    formatNumberInput($("#row-input-price-" + anQid));
        //}

        saveProductPriceItem(anQid);
    }

    function onInOutChange(anQid, idPrefix, saveOnChange = true) {
        let inOut = $("#" + idPrefix + "-" + anQid).val();

        if (inOut == '@ProductInOutType.Purchase') {
            $("#input-sale-price-" + anQid).val(null);
            $("#row-input-sale-price-" + anQid).val(null);
            $("#input-sale-price-" + anQid).attr("disabled", "disabled");
            $("#row-input-sale-price-" + anQid).attr("disabled", "disabled");
        }
        else {
            $("#input-sale-price-" + anQid).removeAttr("disabled");
            $("#row-input-sale-price-" + anQid).removeAttr("disabled");
        }

        if (saveOnChange) {
            saveProductPriceItem(anQid);
        }
    }

    function saveProductPriceItem(anQid, addEmpty) {
        if (anQid == 0 && !addEmpty) {
            return;
        }

        let viewType = $("#ViewType").val();
        let subjOrSubjTypeId = viewType != '@ProductPriceItemViewType.SubjectType' ? "input-subject-" + anQid : "input-subjecttype-" + anQid;

        let data = {
            AnQid: anQid,
            ItemType: viewType,
            Ident: $("#Ident").val(),
            SubjOrSubjType: $("#" + subjOrSubjTypeId).val(),
            Code: getExpandTableValue("input-price-" + anQid),
            InvoInOut: getExpandTableValue("input-inout-" + anQid),
            Type: "P",
            Price: getExpandTableValue("input-price-" + anQid),
            SalePrice: getExpandTableValue("input-sale-price-" + anQid),
            Rebate: getExpandTableValue("input-rebate1-" + anQid),
            Rebate2: getExpandTableValue("input-rebate2-" + anQid),
            Rebate3: getExpandTableValue("input-rebate3-" + anQid),
            SetOf: "",
            Formula: getExpandTableValue("input-formula-" + anQid),
            DocKey: getExpandTableValue("input-dockey-" + anQid),
            Note: $("#row-input-note-" + anQid).val(),
            Currency: getExpandTableValue("input-currency-" + anQid),
            DeliveryDeadline: getExpandTableValue("input-delivery-deadline-" + anQid),
            PaymentDeadline: getExpandTableValue("input-payment-deadline-" + anQid),
            DateStart: getExpandTableValue("input-date-start-" + anQid),
            DateEnd: getExpandTableValue("input-date-end-" + anQid),
        };

        let requiredFields = '';

        if (!data.SubjOrSubjType) {
            requiredFields = appendRequiredField(requiredFields, '@Loc.Subject');
        }
        if (!data.InvoInOut) {
            requiredFields = appendRequiredField(requiredFields, '@Loc.Type');
        }
        if (!data.Currency) {
            requiredFields = appendRequiredField(requiredFields, '@Loc.Currency');
        }
        if (!data.DateStart) {
            requiredFields = appendRequiredField(requiredFields, '@Loc.StartDate');
        }

        if (requiredFields) {
            $().customModal({
                destroyOnClose: true,
                showCloseButton: true,
                text: '@Loc.RequiredInput<br><br>' + requiredFields,
                type: "error",
                buttons: [{
                    text: '@Loc.Confirm',
                    icon: 'fa fa-check',
                    closeOnAction: true,
                    type: 'primary'
                }]
            });
        }
        else {
            localStorage.setItem("dyn-table-expanded-row", anQid);
            localStorage.setItem("dyn-table-expanded-url", window.location);

            $.ajax({
                url: $("#UrlSavePriceItem").val(),
                type: 'POST',
                data: data,
                success: function (data) {
                    if (data.Status) {
                        location.reload();
                    }
                    else {
                        $().customModal({
                            destroyOnClose: true,
                            showCloseButton: true,
                            text: '@Loc.PriceItemWrongInputMessage',
                            type: "error",
                            buttons: [{
                                text: '@Loc.Confirm',
                                icon: 'fa fa-check',
                                closeOnAction: true,
                                type: 'primary'
                            }]
                        });
                    }
                }
            });
        }
    }

    function appendRequiredField(requiredFields, newField) {
        let separator = requiredFields ? ', ' : '';

        return requiredFields + separator + newField;
    }

    function deleteProductPriceItem(anQid) {
        var deleteText = $("#ConfirmDeleteMessage").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();
        var viewType = $("#SelectViewType").val();

        $(document).ready(function () {
            $().customModal({
                destroyOnClose: true,
                title: deleteTitle,
                showCloseButton: true,
                id: "modalDeletePriceItem",
                type: "question",
                text: deleteText,
                buttons: [{
                    icon: 'fa fa-times',
                    text: cancelText,
                    closeOnAction: true,
                    type: 'ghost'
                },
                {
                    icon: 'fa fa-check',
                    text: confirmText,
                    closeOnAction: true,
                    action: async function () {
                        await new Promise((resolve, reject) => setTimeout(function () {
                            removeProductPriceItem(anQid, viewType);
                            resolve();
                        }, 1500));
                    },
                    closeOnAction: true,
                    type: 'primary'
                }]
            });
        });
    }

    function removeProductPriceItem(anQid, viewType) {
        $.ajax({
            url: $("#UrlDeletePriceItem").val() + '?anQId=' + anQid + '&viewType=' + viewType,
            type: 'GET',
            success: function (data) {
                $("#tr-" + anQid).remove();
            }
        });
    }

    $(document).ready(function () {
        $(this).find('input[type="checkbox"]').customCheckbox();

        $("#Keywords").on("keyup", function () {
            var filter = $(this).val().toLowerCase();

            $('#tblProductPriceItems tr').each(function (i, row) {
                if (i <= 1
                    || row.innerHTML.toLowerCase().indexOf('value="' + filter) > -1
                    || row.innerHTML.toLowerCase().indexOf('>' + filter) > -1) {
                    row.style.display = "";
                }
                else {
                    row.style.display = "none";
                }
            });

        });
    });
</script>