@model PantheonRA.BackOffice.Models.SetItemCreateViewModel

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        @Html.Hidden("UrlSave", Url.Action("SaveCode", "Products"))
        @Html.Hidden("UrlDelete", Url.Action("DeleteCode", "Products"))
        @Html.Hidden("TxtConfirm", Loc.Confirm)
        @Html.Hidden("TxtDeleteQuestion", Loc.DeleteQuestionRecord)
        @Html.Hidden("TxtCancel", Loc.Cancel)
        @Html.Hidden("TxtConfirmation", Loc.Confirmation)
        @Html.Hidden("TxtDelNotPossible", Loc.DeleteEntryTypeNotPossible)
        @Html.Hidden("TxtInputFields", Loc.FieldIsRequired)
        @Html.Hidden("TxtAlreadyExists", Loc.AlreadyExists)
        @Html.Hidden("PrimaryKeyExists", Loc.PrimaryKeyExists)
        @Html.Hidden("ProductId", Model.ProductEditData.Id)
        @Html.Hidden("PageUrl", Url.Action("Edit", "Products"))

        <div class="tab-content set-wh-content m-t-sm">
            <div class="row setwh-100-h">
                <div class="col-md-12 containerSetCalEntryTypes p-r-0">
                    <h4>@Loc.SubjectCodes</h4>
                    <table id="tblProductCodes"
                           class="table table-bordered setwh-table m-t-md"
                           style="margin-bottom: 0;" role="grid">
                        <thead>
                            <tr>
                                <th data-column-id="SubjectId">@Loc.Subject</th>
                                <th data-column-id="GtinCode">@Loc.GtinCode</th>
                                <th data-column-id="Name">@Loc.Name</th>
                                <th data-column-id="DefaultCode" class="text-center">@Loc.DefaultCode</th>
                                <th data-column-id="ExportGtin" class="text-center">@Loc.ExportGtin</th>
                                <th data-column-id="SKU" class="text-center">@Loc.SKU</th>
                                <th style="width: 34px"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id="tr-code-0" class="sortable-row">
                                <td class="p-top-none padding-bottom-none" label="@Loc.SetSubjApprovalType">
                                    <div class="ddw-full-width select2HideColumns">
                                        <select id="input-code-subject"
                                                data-placeholder="@Loc.Subject"
                                                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"
                                                data-url="@Url.Action("SearchSubjects", "TravelOrdersDistances")"></select>
                                    </div>
                                </td>
                                <td class="p-top-none padding-bottom-none" label="@Loc.GtinCode">
                                    <input id="input-code-gtin"
                                           maxlength="4000"
                                           type="text"
                                           class="form-control border-bottom-none"
                                           autocomplete="off"
                                           placeholder="@Loc.GtinCode" />
                                </td>
                                <td class="p-top-none padding-bottom-none" label="@Loc.Name">
                                    <input id="input-code-name"
                                           maxlength="4000"
                                           type="text"
                                           class="form-control border-bottom-none"
                                           autocomplete="off"
                                           placeholder="@Loc.Name" />
                                </td>
                                <td class="p-top-none padding-bottom-none text-center" label="@Loc.DefaultCode">
                                    <div class="m-t-xs">
                                        <input id="input-code-default"
                                               type="checkbox"
                                               class="form-control custom-checkbox border-bottom-none"
                                               autocomplete="off"
                                               placeholder="@Loc.DefaultCode" />
                                    </div>
                                </td>
                                <td class="p-top-none padding-bottom-none text-center" label="@Loc.ExportGtin">
                                    <div class="m-t-xs">
                                        <input id="input-code-is-gtin"
                                               type="checkbox"
                                               class="form-control custom-checkbox border-bottom-none"
                                               autocomplete="off"
                                               placeholder="@Loc.ExportGtin" />
                                    </div>
                                </td>
                                <td class="p-top-none padding-bottom-none text-center" label="@Loc.SKU">
                                    <div class="m-t-xs">
                                        <input id="input-code-sku"
                                               type="checkbox"
                                               class="form-control custom-checkbox border-bottom-none"
                                               autocomplete="off"
                                               placeholder="@Loc.SKU" />
                                    </div>
                                </td>
                                <td class="td-action">
                                    <p class="btn btn-success" onclick="saveSetItemCode(0)">
                                        <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                    </p>
                                </td>
                            </tr>
                            @foreach (var item in Model.SetItemCodes)
                            {
                                <tr id="tr-code-@item.Qid" class="sortable-row" data-id="@item.Qid">
                                    <td class="p-top-none padding-bottom-none" label="@Loc.Subject">
                                        <div class="ddw-full-width select2HideColumns">
                                            <select id="input-code-subject-@item.Qid"
                                                    data-placeholder="@Loc.Subject"
                                                    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="saveSetItemCode(@item.Qid)"
                                                    data-url="@Url.Action("SearchSubjects", "TravelOrdersDistances")">
                                                <option selected>@item.Subject</option>
                                            </select>
                                        </div>
                                    </td>
                                    <td class="p-top-none padding-bottom-none" label="@Loc.GtinCode">
                                        <input id="input-code-gtin-@item.Qid"
                                               value="@item.Code"
                                               maxlength="4000"
                                               type="text"
                                               class="form-control border-bottom-none"
                                               autocomplete="off"
                                               placeholder="@Loc.GtinCode"
                                               onchange="saveSetItemCode(@item.Qid)" />
                                    </td>
                                    <td class="p-top-none padding-bottom-none" label="@Loc.Name">
                                        <input id="input-code-name-@item.Qid"
                                               value="@item.Name"
                                               maxlength="4000"
                                               type="text"
                                               class="form-control border-bottom-none"
                                               autocomplete="off"
                                               placeholder="@Loc.Name"
                                               onchange="saveSetItemCode(@item.Qid)" />
                                    </td>
                                    <td class="p-top-none padding-bottom-none text-center" label="@Loc.DefaultCode">
                                        <div class="m-t-xs">
                                            <input id="input-code-default-@item.Qid"
                                                   value="@item.IsDefault"
                                                   type="checkbox"
                                                   class="form-control custom-checkbox border-bottom-none"
                                                   autocomplete="off"
                                                   placeholder="@Loc.DefaultCode"
                                                   onchange="saveSetItemCode(@item.Qid)"
                                                   @(item.IsDefault == true ? "checked" : "") />
                                        </div>
                                    </td>
                                    <td class="p-top-none padding-bottom-none text-center" label="@Loc.ExportGtin">
                                        <div class="m-t-xs">
                                            <input id="input-code-is-gtin-@item.Qid"
                                                   value="@item.IsGTIN"
                                                   type="checkbox"
                                                   class="form-control custom-checkbox border-bottom-none"
                                                   autocomplete="off"
                                                   placeholder="@Loc.ExportGtin"
                                                   onchange="saveSetItemCode(@item.Qid)"
                                                   @(item.IsGTIN == true ? "checked" : "") />
                                        </div>
                                    </td>
                                    <td class="p-top-none padding-bottom-none text-center" label="@Loc.SKU">
                                        <div class="m-t-xs">
                                            <input id="input-code-sku-@item.Qid"
                                                   value="@item.IsSKU"
                                                   type="checkbox"
                                                   class="form-control custom-checkbox border-bottom-none"
                                                   autocomplete="off"
                                                   placeholder="@Loc.SKU"
                                                   onchange="saveSetItemCode(@item.Qid)"
                                                   @(item.IsSKU == true ? "checked" : "") />
                                        </div>
                                    </td>
                                    <td class="p-top-none padding-bottom-none td-action">
                                        <p class="text-center" title="@Loc.Delete">
                                            <span onclick="deleteSetItemCode(@item.Qid)" style="margin-top: 12px" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                        </p>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@section pageScripts{
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
}

<script>
    $(document).ready(function () { });

    $(document).ajaxError(function () {
        location.reload();
    });

    function deleteSetItemCode(anQid) {
        var deleteText = $("#TxtDeleteQuestion").val();
        var deleteTitle = $("#TxtConfirmation").val();
        var confirmText = $("#TxtConfirm").val();
        var cancelText = $("#TxtCancel").val();

        $().customModal({
            destroyOnClose: true,
            title: deleteTitle,
            showCloseButton: true,
            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 () {
                        removeSetItemCode(anQid);
                        resolve();
                    }, 1500));
                },
                closeOnAction: true,
                type: 'primary'
            }]
        });
    }

    function removeSetItemCode(anQid) {
        $.ajax({
            url: $("#UrlDelete").val() + '?anQId=' + anQid,
            type: 'GET',
            success: function (data) {
                if (data && data.Status) {
                    $("#tr-code-" + anQid).remove();
                }
                else {
                    $(document).ready(function () {
                        $().customModal({
                            destroyOnClose: true,
                            title: '',
                            showCloseButton: true,
                            type: "alert",
                            text: "@Loc.GeneralError",
                            buttons: [
                                {
                                    icon: 'fa fa-check',
                                    text: $("#TxtConfirm").val(),
                                    closeOnAction: true,
                                    type: 'primary'
                                }]
                        });
                    });
                }
            }
        });
    }

    function saveSetItemCode(anQid) {
        let sufix = anQid != 0 ? "-" + anQid : "";

        let data = {
            Qid: anQid ? anQid : 0,
            Ident: $("#ProductId").val(),
            Subject: $("#input-code-subject" + sufix).val(),
            Name: $("#input-code-name" + sufix).val(),
            Code: $("#input-code-gtin" + sufix).val(),
            IsGTIN: $("#input-code-is-gtin" + sufix).is(':checked'),
            IsDefault: $("#input-code-default" + sufix).is(':checked'),
            IsSKU: $("#input-code-sku" + sufix).is(':checked'),
        };

        postSetItemCode(data);
    }

    function postSetItemCode(data) {
        $.ajax({
            url: $("#UrlSave").val(),
            type: 'POST',
            data: data,
            success: function (data) {
                location.reload();
            }
        });
    }
</script>