@using PAW.Contracts.Enums;
@model PantheonRA.WebApi.Contracts.PayOrder
<script src="~/Scripts/custom/payorders/payorders.js"></script>

@{
    ViewBag.Title = Loc.Create;
    Layout = null;
    string ActionMethod = Model != null && string.IsNullOrWhiteSpace(Model.AcKey) ? "Create" : "Edit";
}

@Html.Hidden("UrlPayOrders", Url.Action("Index", "PayOrders"))
@Html.Hidden("ShouldOpenNewRecord", "false")
@Html.Hidden("ActionMethod", ActionMethod)
@Html.Hidden("SubjectInfo", Url.Action("SubjectInfo", "PayOrders"))
@Html.Hidden("SubjectAccounts", Url.Action("GetSubjectAccounts", "PayOrders"))
@Html.Hidden("SubjectEdit", Url.Action("Edit", "Subjects"))
@Html.Hidden("BankInfo", Url.Action("BankInfo", "PayOrders"))
@Html.Hidden("OurBankInfo", Url.Action("OurBankInfo", "PayOrders"))
@Html.Hidden("UrlSave", Url.Action("Save", "PayOrders"))
@Html.Hidden("TxtConfirm", Loc.Confirm)
@Html.Hidden("TxtInfo", Loc.Info)
@Html.Hidden("TxtValidationModalError", Loc.ValidationModalError)
@Html.Hidden("Localization", Model.Localization)

<div class="container-fluid pay-order-panel" id="PoFormId">
    <div class="row">
        <div class="col-md-12 pay-order-cu-title">
            <label>@Loc.PayOrderAcKey: @Model.AcKeyView</label>
        </div>
    </div>


    @if (Localization.Parse(Model.Localization) == Localization.Code.RS)
    {
        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- DebtorAcct1 / IBAN plačnika -->
            <div class="col-xs-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct1, Loc.PayOrderDebtorAcct1Rs, new { @class = "control-label" })
                    <select id="DebtorAcct1"
                            name="DebtorAcct1"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-url=@Url.Action("GetOurAccounts", "PayOrders")>
                        <option value="@Model.DebtorAcct1" selected="selected">@Model.DebtorAcct1Text</option>
                    </select>
                    <label id="vl-DebtorAcct1" class="text-danger"></label>
                </div>
            </div>

            <!-- DebtorAcct2 -->
            <div class="col-xs-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.ReferenceDebt, Loc.Model, new { @class = "control-label" })
                    <select id="DebtorAcct2"
                            name="DebtorAcct2"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-3,col-md-9"
                            data-url=@Url.Action("GetRefCodes", "PayOrders")>
                        <option value="@Model.DebtorAcct2" selected="selected">@Model.DebtorAcct2</option>
                    </select>
                    <label id="vl-DebtorAcct2" class="text-danger"></label>
                </div>
            </div>

            <!-- DebtorAcct3 -->
            <div class="col-xs-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct3, Loc.PayOrderDebtorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.DebtorAcct3, new { htmlAttributes = new { @class = "form-control", @id = "DebtorAcct3", @autocomplete = "off" } })
                    <label id="vl-DebtorAcct3" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- Amount -->
            <div class="col-xs-6">
                <div class="form-group">
                    @{
                        var amountLabel = Loc.Amount + " (" + Model.PrimCurrency + ")";
                    }
                    @Html.LabelFor(model => model.Amount, amountLabel, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Amount,
                     new { htmlAttributes = new { @class = "form-control numberInput", @autocomplete = "off", @required = "required", @placeholder = @Loc.Amount } })
                    <label id="vl-Amount" class="text-danger"></label>
                </div>
            </div>

            <!-- DateDue -->
            <div class="col-xs-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateDue, Loc.DateDue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateDue, Model.DateDue.HasValue ? Model.DateDue.Value.ToString(Loc.DateFormat) : null,
                               HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateDue", false, Loc.DateDue))
                    </div>
                    <label id="vl-DateDue" class="text-danger"></label>
                </div>
            </div>

            <!-- Code 1, Code 2-3 -->
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.Code1, Loc.PaymentCode, new { @class = "control-label" })
                    </div>
                    <!-- Code1 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="Code1"
                                    name="Code1"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    class="form-control select2withAPI"
                                    data-selector-separator=" - "
                                    data-url=@Url.Action("GetPayCodes", "PayOrders")>
                                <option value="@Model.Code1" selected="selected">@Model.Code1</option>
                            </select>
                            <label id="vl-Code1" class="text-danger"></label>
                        </div>
                    </div>
                    <!-- Code23 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="Code2"
                                    name="Code2"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    class="form-control select2withAPI"
                                    data-selector-separator=" - "
                                    data-url=@Url.Action("GetPayCodes23", "PayOrders")>
                                <option value="@Model.Code2" selected="selected">@Model.Code2</option>
                            </select>
                            <label id="vl-Code2" class="text-danger"></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pay Purpose -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.Label(Loc.PaymentPurpose, new { @class = "control-label" })
                    @Html.EditorFor(model => model.PayPurpose2, new { htmlAttributes = new { @class = "form-control", @placeholder = Loc.PayPurpose } })
                    <label id="vl-PayPurpose2" class="text-danger"></label>
                </div>
            </div>

            <!-- DateOfAppr -->
            <div class="col-xs-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateOfAppr, Loc.DateOfPayment, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateOfAppr, Model.DateOfAppr.HasValue ? Model.DateOfAppr.Value.ToString(Loc.DateFormat) : null,
                           HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateOfAppr", false, Loc.DateOfApprove))
                    </div>
                    <label id="vl-DateOfAppr" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-creditor pay-order-cu-row">

            <!-- SubjectId -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjectId, Loc.Partner, new { @class = "control-label" })
                    <select id="SubjectId"
                            name="SubjectId"
                            data-placeholder="@Loc.Subject"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                            data-search-left="-50"
                            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-splitter=","
                            data-search-width="800">
                        <option value="@Model.SubjectId" selected="selected">@Model.SubjectId</option>
                    </select>
                    <label id="vl-SubjectId" class="text-danger"></label>
                </div>
            </div>

            <!-- SubjAcct -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjAcct, Loc.PayOrderSubjAcctRs, new { @class = "control-label" })
                    <select id="SubjAcct"
                            name="SubjAcct"
                            filter-by-subject="SubjectId"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetSubjectAccounts", "PayOrders")>
                        <option value="@Model.SubjAcct" selected="selected">@Model.SubjAcctText</option>
                    </select>
                    <label id="vl-SubjAcct" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct2 -->
            <div class="col-md-3">
                <div class="form-group">
                    <label>@Loc.Model</label>
                    <select id="CreditorAcct2"
                            name="CreditorAcct2"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-3,col-md-9"
                            data-url=@Url.Action("GetRefCodes", "PayOrders")>
                        <option value="@Model.CreditorAcct2" selected="selected">@Model.CreditorAcct2</option>
                    </select>
                    <label id="vl-CreditorAcct2" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct3 -->
            <div class="col-md-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.CreditorAcct3, Loc.CreditorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.CreditorAcct3,
                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @required = "required", @placeholder = Loc.CreditorAcct3 } })
                    <label id="vl-CreditorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Creditor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Creditor3, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Creditor2" class="text-danger"></label>
                </div>
            </div>
        </div>
    }

    else if (Localization.Parse(Model.Localization) == Localization.Code.ME)
    {
        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- DebtorAcct1 / IBAN plačnika -->
            <div class="col-xs-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct1, Loc.PayOrderDebtorAcct1Rs, new { @class = "control-label" })
                    <select id="DebtorAcct1"
                            name="DebtorAcct1"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-url=@Url.Action("GetOurAccounts", "PayOrders")>
                        <option value="@Model.DebtorAcct1" selected="selected">@Model.DebtorAcct1Text</option>
                    </select>
                    <label id="vl-DebtorAcct1" class="text-danger"></label>
                </div>
            </div>

            <!-- DebtorAcct2 -->
            <div class="col-xs-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.ReferenceDebt, Loc.Model, new { @class = "control-label" })
                    <select id="DebtorAcct2"
                            name="DebtorAcct2"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-3,col-md-9"
                            data-url=@Url.Action("GetRefCodes", "PayOrders")>
                        <option value="@Model.DebtorAcct2" selected="selected">@Model.DebtorAcct2</option>
                    </select>
                    <label id="vl-DebtorAcct2" class="text-danger"></label>
                </div>
            </div>

            <!-- DebtorAcct3 -->
            <div class="col-xs-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct3, Loc.PayOrderDebtorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.DebtorAcct3, new { htmlAttributes = new { @class = "form-control", @id = "DebtorAcct3", @autocomplete = "off" } })
                    <label id="vl-DebtorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- Debitor23 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Debitor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Debitor23, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Debitor3" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- Amount -->
            <div class="col-xs-6">
                <div class="form-group">
                    @{
                        var amountLabel = Loc.Amount + " (" + Model.PrimCurrency + ")";
                    }
                    @Html.LabelFor(model => model.Amount, amountLabel, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Amount,
                     new { htmlAttributes = new { @class = "form-control numberInput", @autocomplete = "off", @required = "required", @placeholder = @Loc.Amount } })
                    <label id="vl-Amount" class="text-danger"></label>
                </div>
            </div>

            <!-- DateDue -->
            <div class="col-xs-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateDue, Loc.DateDue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateDue, Model.DateDue.HasValue ? Model.DateDue.Value.ToString(Loc.DateFormat) : null,
                               HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateDue", false, Loc.DateDue))
                    </div>
                    <label id="vl-DateDue" class="text-danger"></label>
                </div>
            </div>

            <!-- Code 1, Code 2-3 -->
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.Code1, Loc.PaymentCode, new { @class = "control-label" })
                    </div>
                    <!-- Code1 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="Code1"
                                    name="Code1"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    class="form-control select2withAPI"
                                    data-selector-separator=" - "
                                    data-url=@Url.Action("GetPayCodes", "PayOrders")>
                                <option value="@Model.Code1" selected="selected">@Model.Code1</option>
                            </select>
                            <label id="vl-Code1" class="text-danger"></label>
                        </div>
                    </div>
                    <!-- Code23 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="Code2"
                                    name="Code2"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    class="form-control select2withAPI"
                                    data-selector-separator=" - "
                                    data-url=@Url.Action("GetPayCodes23", "PayOrders")>
                                <option value="@Model.Code2" selected="selected">@Model.Code2</option>
                            </select>
                            <label id="vl-Code2" class="text-danger"></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pay Purpose -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.Label(Loc.PaymentPurpose, new { @class = "control-label" })
                    @Html.EditorFor(model => model.PayPurpose2, new { htmlAttributes = new { @class = "form-control", @placeholder = Loc.PayPurpose } })
                    <label id="vl-PayPurpose2" class="text-danger"></label>
                </div>
            </div>

            <!-- DateOfAppr -->
            <div class="col-xs-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateOfAppr, Loc.DateOfPayment, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateOfAppr, Model.DateOfAppr.HasValue ? Model.DateOfAppr.Value.ToString(Loc.DateFormat) : null,
                           HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateOfAppr", false, Loc.DateOfApprove))
                    </div>
                    <label id="vl-DateOfAppr" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-creditor pay-order-cu-row">

            <!-- SubjectId -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjectId, Loc.Partner, new { @class = "control-label" })
                    <select id="SubjectId"
                            name="SubjectId"
                            data-placeholder="@Loc.Subject"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                            data-search-left="-50"
                            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-splitter=","
                            data-search-width="800">
                        <option value="@Model.SubjectId" selected="selected">@Model.SubjectId</option>
                    </select>
                    <label id="vl-SubjectId" class="text-danger"></label>
                </div>
            </div>

            <!-- SubjAcct -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjAcct, Loc.PayOrderSubjAcctRs, new { @class = "control-label" })
                    <select id="SubjAcct"
                            name="SubjAcct"
                            filter-by-subject="SubjectId"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetSubjectAccounts", "PayOrders")>
                        <option value="@Model.SubjAcct" selected="selected">@Model.SubjAcctText</option>
                    </select>
                    <label id="vl-SubjAcct" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct2 -->
            <div class="col-md-3">
                <div class="form-group">
                    <label>@Loc.Model</label>
                    <select id="CreditorAcct2"
                            name="CreditorAcct2"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-3,col-md-9"
                            data-url=@Url.Action("GetRefCodes", "PayOrders")>
                        <option value="@Model.CreditorAcct2" selected="selected">@Model.CreditorAcct2</option>
                    </select>
                    <label id="vl-CreditorAcct2" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct3 -->
            <div class="col-md-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.CreditorAcct3, Loc.CreditorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.CreditorAcct3,
                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @required = "required", @placeholder = Loc.CreditorAcct3 } })
                    <label id="vl-CreditorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Creditor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Creditor3, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Creditor2" class="text-danger"></label>
                </div>
            </div>
        </div>
    }

    else if (Localization.Parse(Model.Localization) == Localization.Code.BA)
    {
        <div class="row pay-order-debitor pay-order-cu-row">
            <!-- DebtorAcct1 / IBAN plačnika -->
            <div class="col-xs-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct1, Loc.PayOrderDebtorAcct1Rs, new { @class = "control-label" })
                    <select id="DebtorAcct1"
                            name="DebtorAcct1"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-url=@Url.Action("GetOurAccounts", "PayOrders")>
                        <option value="@Model.DebtorAcct1" selected="selected">@Model.DebtorAcct1Text</option>
                    </select>
                    <label id="vl-DebtorAcct1" class="text-danger"></label>
                </div>
            </div>

            <!-- Debitor23 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Debitor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Debitor23, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Debitor3" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- Amount -->
            <div class="col-xs-6">
                <div class="form-group">
                    @{
                        var amountLabel = Loc.Amount + " (" + Model.PrimCurrency + ")";
                    }
                    @Html.LabelFor(model => model.Amount, amountLabel, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Amount,
                     new { htmlAttributes = new { @class = "form-control numberInput", @autocomplete = "off", @required = "required", @placeholder = @Loc.Amount } })
                    <label id="vl-Amount" class="text-danger"></label>
                </div>
            </div>

            <!-- DateDue -->
            <div class="col-xs-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateDue, Loc.DateDue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateDue, Model.DateDue.HasValue ? Model.DateDue.Value.ToString(Loc.DateFormat) : null,
                               HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateDue", false, Loc.DateDue))
                    </div>
                    <label id="vl-DateDue" class="text-danger"></label>
                </div>
            </div>

            <!-- Pay Purpose -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.Label(Loc.PaymentPurpose, new { @class = "control-label" })
                    @Html.EditorFor(model => model.PayPurpose2, new { htmlAttributes = new { @class = "form-control", @placeholder = Loc.PayPurpose } })
                    <label id="vl-PayPurpose2" class="text-danger"></label>
                </div>
            </div>

            <!-- DateOfAppr -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateOfAppr, Loc.DateOfPayment, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateOfAppr, Model.DateOfAppr.HasValue ? Model.DateOfAppr.Value.ToString(Loc.DateFormat) : null,
                           HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateOfAppr", false, Loc.DateOfApprove))
                    </div>
                    <label id="vl-DateOfAppr" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-creditor pay-order-cu-row">

            <!-- SubjectId -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjectId, Loc.Partner, new { @class = "control-label" })
                    <select id="SubjectId"
                            name="SubjectId"
                            data-placeholder="@Loc.Subject"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                            data-search-left="-50"
                            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-splitter=","
                            data-search-width="800">
                        <option value="@Model.SubjectId" selected="selected">@Model.SubjectId</option>
                    </select>
                    <label id="vl-SubjectId" class="text-danger"></label>
                </div>
            </div>

            <!-- SubjAcct -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjAcct, Loc.PayOrderSubjAcctRs, new { @class = "control-label" })
                    <select id="SubjAcct"
                            name="SubjAcct"
                            filter-by-subject="SubjectId"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetSubjectAccounts", "PayOrders")>
                        <option value="@Model.SubjAcct" selected="selected">@Model.SubjAcctText</option>
                    </select>
                    <label id="vl-SubjAcct" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct3 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.CreditorAcct3, Loc.CreditorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.CreditorAcct3,
                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @required = "required", @placeholder = Loc.CreditorAcct3 } })
                    <label id="vl-CreditorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- Creditor3 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Creditor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Creditor3, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Creditor2" class="text-danger"></label>
                </div>
            </div>
        </div>
    }

    else if (Localization.Parse(Model.Localization) == Localization.Code.MK)
    {
        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- DebtorAcct1 / IBAN plačnika -->
            <div class="col-xs-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct1, Loc.PayOrderDebtorAcct1Mk, new { @class = "control-label" })
                    <select id="DebtorAcct1"
                            name="DebtorAcct1"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-url=@Url.Action("GetOurAccounts", "PayOrders")>
                        <option value="@Model.DebtorAcct1" selected="selected">@Model.DebtorAcct1Text</option>
                    </select>
                    <label id="vl-DebtorAcct1" class="text-danger"></label>
                </div>
            </div>

            <!-- DebtorAcct3 -->
            <div class="col-xs-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct3, Loc.PayOrderDebtorAcct3Mk, new { @class = "control-label" })
                    @Html.EditorFor(model => model.DebtorAcct3, new { htmlAttributes = new { @class = "form-control", @id = "DebtorAcct3", @autocomplete = "off" } })
                    <label id="vl-DebtorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- Debitor23 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.DebitorMk, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Debitor23, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Debitor3" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- Amount -->
            <div class="col-xs-6">
                <div class="form-group">
                    @{
                        var amountLabel = Loc.Amount + " (" + Model.PrimCurrency + ")";
                    }
                    @Html.LabelFor(model => model.Amount, amountLabel, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Amount,
                     new { htmlAttributes = new { @class = "form-control numberInput", @autocomplete = "off", @required = "required", @placeholder = @Loc.Amount } })
                    <label id="vl-Amount" class="text-danger"></label>
                </div>
            </div>

            <!-- DateDue -->
            <div class="col-xs-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateDue, Loc.DateDue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateDue, Model.DateDue.HasValue ? Model.DateDue.Value.ToString(Loc.DateFormat) : null,
                               HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateDue", false, Loc.DateDue))
                    </div>
                    <label id="vl-DateDue" class="text-danger"></label>
                </div>
            </div>

            <!-- Code 1, Code 2-3 -->
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.Code1, Loc.PaymentCodeMk, new { @class = "control-label" })
                    </div>
                    <!-- Code1 -->
                    <div class="col-md-12">
                        <div class="form-group">
                            <select id="Code1"
                                    name="Code1"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    class="form-control select2withAPI"
                                    data-selector-separator=" - "
                                    data-url=@Url.Action("GetPayCodes", "PayOrders")>
                                <option value="@Model.Code1" selected="selected">@Model.Code1</option>
                            </select>
                            <label id="vl-Code1" class="text-danger"></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pay Purpose -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.Label(Loc.PaymentPurposeMk, new { @class = "control-label" })
                    @Html.EditorFor(model => model.PayPurpose2, new { htmlAttributes = new { @class = "form-control" } })
                    <label id="vl-PayPurpose2" class="text-danger"></label>
                </div>
            </div>

            <!-- DateOfAppr -->
            <div class="col-xs-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateOfAppr, Loc.DateOfPayment, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateOfAppr, Model.DateOfAppr.HasValue ? Model.DateOfAppr.Value.ToString(Loc.DateFormat) : null,
                           HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateOfAppr", false, Loc.DateOfApprove))
                    </div>
                    <label id="vl-DateOfAppr" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-creditor pay-order-cu-row">

            <!-- SubjectId -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjectId, Loc.PaymentSubjectMk, new { @class = "control-label" })
                    <select id="SubjectId"
                            name="SubjectId"
                            data-placeholder="@Loc.Subject"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                            data-search-left="-50"
                            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-splitter=","
                            data-search-width="800">
                        <option value="@Model.SubjectId" selected="selected">@Model.SubjectId</option>
                    </select>
                    <label id="vl-SubjectId" class="text-danger"></label>
                </div>
            </div>

            <!-- SubjAcct -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjAcct, Loc.PayOrderSubjAcctMk, new { @class = "control-label" })
                    <select id="SubjAcct"
                            name="SubjAcct"
                            filter-by-subject="SubjectId"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetSubjectAccounts", "PayOrders")>
                        <option value="@Model.SubjAcct" selected="selected">@Model.SubjAcctText</option>
                    </select>
                    <label id="vl-SubjAcct" class="text-danger"></label>
                </div>
            </div>

            <!-- CreditorAcct3 -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.CreditorAcct3, Loc.CreditorAcct3Rs, new { @class = "control-label" })
                    @Html.EditorFor(model => model.CreditorAcct3,
                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @required = "required", @placeholder = Loc.CreditorAcct3 } })
                    <label id="vl-CreditorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.PaymentCreditorMk, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Creditor3, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Creditor2" class="text-danger"></label>
                </div>
            </div>
        </div>
    }

    else
    {
        <div class="row pay-order-debitor pay-order-cu-row">

            <!-- DebtorAcct1 / IBAN plačnika -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct1, Loc.PayOrderDebtorAcct1, new { @class = "control-label" })
                    <select id="DebtorAcct1"
                            name="DebtorAcct1"
                            class="form-control select2withAPI"
                            data-search-width="450"
                            data-url=@Url.Action("GetOurAccounts", "PayOrders")>
                        <option value="@Model.DebtorAcct1" selected="selected">@Model.DebtorAcct1Text</option>
                    </select>
                    <label id="vl-DebtorAcct1" class="text-danger"></label>
                </div>
            </div>

            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.ReferenceDebt, Loc.PayOrderReferenceDebt, new { @class = "control-label" })
                    </div>
                    <!-- ReferenceDebt -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="ReferenceDebt"
                                    data-search-width="150"
                                    name="ReferenceDebt"
                                    class="form-control select2withAPI"
                                    data-url=@Url.Action("GetOurRefs", "PayOrders")>
                                <option value="@Model.ReferenceDebt" selected="selected">@Model.ReferenceDebt</option>
                            </select>
                            <label id="vl-ReferenceDebt" class="text-danger"></label>
                        </div>
                    </div>
                    <!-- DebtorAcct2 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="DebtorAcct2"
                                    name="DebtorAcct2"
                                    class="form-control select2withAPI"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    data-url=@Url.Action("GetRefCodes", "PayOrders")>
                                <option value="@Model.DebtorAcct2" selected="selected">@Model.DebtorAcct2</option>
                            </select>
                            <label id="vl-DebtorAcct2" class="text-danger"></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DebtorAcct3 -->
            <div class="col-md-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.DebtorAcct3, Loc.PayOrderDebtorAcct3, new { @class = "control-label" })
                    @Html.EditorFor(model => model.DebtorAcct3, new { htmlAttributes = new { @class = "form-control", @id = "DebtorAcct3", @autocomplete = "off" } })
                    <label id="vl-DebtorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- Debitor -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.Debitor2, Loc.PayOrderDebitor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Debitor2, new { htmlAttributes = new { @class = "form-control", @placeholder = Loc.Debitor, @disabled = "disabled" } })
                </div>
            </div>

            <!-- Amount -->
            <div class="col-md-6">
                <div class="form-group">
                    @{
                        var amountLabel = Loc.Amount + " (" + Model.PrimCurrency + ")";
                    }
                    @Html.LabelFor(model => model.Amount, amountLabel, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Amount,
                     new { htmlAttributes = new { @class = "form-control numberInput", @autocomplete = "off", @required = "required", @placeholder = @Loc.Amount } })
                    <label id="vl-Amount" class="text-danger"></label>
                </div>
            </div>

            <!-- DateDue -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateDue, Loc.DateDue, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateDue, Model.DateDue.HasValue ? Model.DateDue.Value.ToString(Loc.DateFormat) : null,
                               HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateDue", false, Loc.DateDue))
                    </div>
                    <label id="vl-DateDue" class="text-danger"></label>
                </div>
            </div>

            <!-- UpnRFCode -->
            <div class="col-md-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.UpnRFCode, Loc.PurposeCode, new { @class = "control-label" })
                    <select id="UpnRFCode"
                            name="UpnRFCode"
                            data-search-width="450"
                            data-column-names="@Loc.Code,@Loc.Name"
                            data-bootstrap-columns="col-md-3,col-md-9"
                            class="form-control select2withAPI"
                            data-selector-separator=" - "
                            data-url=@Url.Action("GetPurposeCodes", "PayOrders")>
                        <option value="@Model.UpnRFCode" selected="selected">@Model.UpnRFCode</option>
                    </select>
                    <label id="vl-UpnRFCode" class="text-danger"></label>
                </div>
            </div>

            <!-- Pay Purpose -->
            <div class="col-md-6">
                <div class="form-group">
                    @Html.Label(Loc.PayPurpose, new { @class = "control-label" })
                    @Html.EditorFor(model => model.PayPurpose2, new { htmlAttributes = new { @class = "form-control", @placeholder = Loc.PayPurpose } })
                    <label id="vl-PayPurpose2" class="text-danger"></label>
                </div>
            </div>

            <!-- DateOfAppr -->
            <div class="col-md-3">
                <div class="form-group">
                    @Html.LabelFor(model => model.DateOfAppr, Loc.DateOfPayment, new { @class = "control-label" })
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        @Html.TextBoxFor(model => model.DateOfAppr, Model.DateOfAppr.HasValue ? Model.DateOfAppr.Value.ToString(Loc.DateFormat) : null,
                                HtmlAttributesHelper.CreateInputAttributes("form-control custom-datepicker pay-order-border-none", "DateOfAppr", false, Loc.DateOfApprove))
                    </div>
                    <label id="vl-DateOfAppr" class="text-danger"></label>
                </div>
            </div>

        </div>

        <div class="row pay-order-creditor pay-order-cu-row">

            <!-- SubjectId -->
            <div class="col-md-12 padding-top-10">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjectId, Loc.Partner, new { @class = "control-label" })
                    <select id="SubjectId"
                            name="SubjectId"
                            data-placeholder="@Loc.Subject"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                            data-search-left="-50"
                            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-splitter=","
                            data-search-width="800">
                        <option value="@Model.SubjectId" selected="selected">@Model.SubjectId</option>
                    </select>
                    <label id="vl-SubjectId" class="text-danger"></label>
                </div>
            </div>

            <!-- SubjAcct -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.SubjAcct, Loc.PayOrderSubjAcct, new { @class = "control-label" })
                    <select id="SubjAcct"
                            name="SubjAcct"
                            filter-by-subject="SubjectId"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetSubjectAccounts", "PayOrders")>
                        <option value="@Model.SubjAcct" selected="selected">@Model.SubjAcctText</option>
                    </select>
                    <label id="vl-SubjAcct" class="text-danger"></label>
                </div>
            </div>

            <div class="col-md-3">

                <div class="row">
                    <!-- ReferenceCred -->
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.ReferenceCred, Loc.PayOrderReferenceDebt, new { @class = "control-label" })
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="ReferenceCred"
                                    name="ReferenceCred"
                                    data-placeholder="@Loc.ReferenceCred"
                                    filter-by-subject="SubjectId"
                                    data-search-width="150"
                                    class="form-control select2withAPI"
                                    data-url=@Url.Action("GetSubjectRefs", "PayOrders")>
                                <option value="@Model.ReferenceCred" selected="selected">@Model.ReferenceCred</option>
                            </select>
                            <label id="vl-ReferenceCred" class="text-danger"></label>
                        </div>
                    </div>

                    <!-- CreditorAcct2 -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="CreditorAcct2"
                                    name="CreditorAcct2"
                                    class="form-control select2withAPI"
                                    data-search-width="450"
                                    data-column-names="@Loc.Code,@Loc.Name"
                                    data-bootstrap-columns="col-md-3,col-md-9"
                                    data-url=@Url.Action("GetRefCodes", "PayOrders")>
                                <option value="@Model.CreditorAcct2" selected="selected">@Model.CreditorAcct2</option>
                            </select>
                            <label id="vl-CreditorAcct2" class="text-danger"></label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CreditorAcct3 -->
            <div class="col-md-9">
                <div class="form-group">
                    @Html.LabelFor(model => model.CreditorAcct3, Loc.CreditorAcct3, new { @class = "control-label" })
                    @Html.EditorFor(model => model.CreditorAcct3,
                        new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", @required = "required", @placeholder = Loc.CreditorAcct3 } })
                    <label id="vl-CreditorAcct3" class="text-danger"></label>
                </div>
            </div>

            <!-- -->
            <div class="col-md-12">
                <div class="form-group">
                    @Html.Label(Loc.Creditor, new { @class = "control-label" })
                    @Html.EditorFor(model => model.Creditor3, new { htmlAttributes = new { @class = "form-control mt-2 mb-8", @placeholder = Loc.Creditor } })
                    <label id="vl-Creditor2" class="text-danger"></label>
                </div>
            </div>
        </div>
    }

    <div class="row document-head">

        <!-- Status -->
        <div class="col-md-4 col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.Status, Loc.Status, new { @class = "control-label" })
                <select id="Status"
                        name="Status"
                        class="form-control select2-focus-0 select2withAPI"
                        data-selector-separator=" | "
                        data-search-width="250"
                        data-url=@Url.Action("GetStatuses", "PayOrders")>
                    <option value="@Model.Status" selected>@Model.StatusText</option>
                </select>
                <label id="vl-Status" class="text-danger"></label>
            </div>
        </div>

        <!-- Type -->
        <div class="col-md-4 col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.Type, Loc.Type, new { @class = "control-label" })<br />
                <label>@Model.TypeText</label>
            </div>
        </div>

        <!-- Priority -->
        <div class="col-md-4 col-sm-4">
            <div class="form-group">
                @Html.LabelFor(model => model.Priority, Loc.Priority, new { @class = "control-label" })
                <select id="Priority"
                        name="Priority"
                        class="form-control select2withAPI"
                        data-selector-separator=" | "
                        data-url=@Url.Action("GetPriorities", "PayOrders")>
                    <option value="@Model.Priority" selected>@Model.Priority</option>
                </select>
                <label id="vl-Priority" class="text-danger"></label>
            </div>
        </div>
    </div>

    <div class="row">
        @Html.HiddenFor(m => m.AcKey)

        @Html.HiddenFor(m => m.Date)
        @Html.HiddenFor(m => m.DocType)
        @Html.HiddenFor(m => m.BankBranch)
        @Html.HiddenFor(m => m.Code2)
        @Html.HiddenFor(m => m.Code3)
        @Html.HiddenFor(m => m.Grouped)
        @Html.HiddenFor(m => m.Currency)
        @Html.HiddenFor(m => m.Debitor1)
        @Html.HiddenFor(m => m.Debitor2)
        @Html.HiddenFor(m => m.Debitor3)
        @Html.HiddenFor(m => m.TypeOfPayOrd)
        @Html.HiddenFor(m => m.OldStatus)
        @Html.HiddenFor(m => m.Status, new { @id = "PreviousStatus" })
        @Html.HiddenFor(m => m.Type)
        @Html.HiddenFor(m => m.IBANprefix)
        @Html.HiddenFor(m => m.BankNo, new { @id = "BankNo" })

        <!-- Pay Code - Will be added for HR loc -->
        @*@if (Loc.CurrentLocalization == LocTypes.HR.ToString())
            {
                <div class="col-md-3">
                    <select id="Code1"
                            name="Code1"
                            class="form-control select2withAPI"
                            data-url=@Url.Action("GetPayCodes", "PayOrders")>
                        <option value="@Model.Code1" selected="selected">@Model.Code1</option>
                    </select>
                    @Html.ValidationMessageFor(model => model.Code1, "", new { @class = "text-danger" })
                </div>
            }*@
    </div>

    <div class="row">
        <div class="pull-right m-t-sm m-r-lg">
            <button onclick="savePayOrder()" type="button" class="btn btn-lg btn-success"><i class="fas fa-save"></i> @Loc.Save</button>
        </div>
    </div>
</div>

<script src="~/Scripts/custom/global-helpers.js"></script>
<script src="~/Scripts/custom/initializers.js"></script>

<script>
    function getData() {
        return {
            AcKey: $("#AcKey").val(),

            DebtorAcct1: $("#DebtorAcct1").val(),
            ReferenceDebt: $("#ReferenceDebt").val(),
            DebtorAcct2: $("#DebtorAcct2").val(),
            DebtorAcct3: $("#DebtorAcct3").val(),
            Debitor2: $("#Debitor2").val(),
            Amount: $("#Amount").val(),
            AmountTxt: $("#Amount").val(),
            DateOfApprString: $("#DateOfAppr").val(),
            UpnRFCode: $("#UpnRFCode").val(),
            PayPurpose2: $("#PayPurpose2").val(),
            DateDueString: $("#DateDue").val(),
            SubjectId: $("#SubjectId").val(),
            SubjAcct: $("#SubjAcct").val(),
            ReferenceCred: $("#ReferenceCred").val(),
            CreditorAcct2: $("#CreditorAcct2").val(),
            CreditorAcct3: $("#CreditorAcct3").val(),
            Creditor3: $("#Creditor3").val(),
            Status: $("#Status").val(),
            Type: $("#Type").val(),
            Priority: $("#Priority").val(),

            DateString: $("#Date").val(),
            DocType: $("#DocType").val(),
            BankBranch: $("#BankBranch").val(),
            Code1: $("#Code1").val(),
            Code2: $("#Code2").val(),
            Code3: $("#Code3").val(),
            Grouped: $("#Grouped").val(),
            Currency: $("#Currency").val(),
            Debitor1: $("#Debitor1").val(),
            Debitor3: $("#Debitor3").val(),
            Debitor23: $("#Debitor23").val(),
            TypeOfPayOrd: $("#TypeOfPayOrd").val(),
            OldStatus: $("#OldStatus").val(),
            IBANprefix: $("#IBANprefix").val(),
            BankNo: $("#BankNo").val(),
        };
    }

    function savePayOrder() {
        $('[id^="vl-"]').text("");
        $('[id^="vl-"]').css("display", "none");
        $.ajax({
            url: $("#UrlSave").val(),
            dataType: 'json',
            contentType: 'application/json',
            method: "POST",
            data: JSON.stringify(getData()),
            success: function (data) {
                if (data.length == 1 && data[0].Key == 'AcKey') {
                    let url = $("#UrlPayOrders").val() + '?acKey=' + data[0].Value;

                    window.location.replace(url);
                }

                handleErrors(data);
            },
            fail: function (error) {
                swal(error);
            }
        });
    }

    function openPayOrderPanel(acKey) {
        let url = acKey ? $("#PayOrderEditUrl").val() + "?acKey=" + acKey : $("#PayOrderCreateUrl").val();

        refreshPayOrderRow(acKey);

        loadSidePanelContent($("#payOrderPanel"), url, true);
    }

    function handleErrors(errors) {
        if (!errors || errors.length == 0
            || errors.length == 1 && errors[0].Key == 'AcKey') {
            return;
        }

        for (i = 0; i < errors.length; i++) {
            let id = "#vl-" + errors[i].Key;
            let err = errors[i].Value;

            $(id).text(err);
            $(id).css("display", "block");
        }

        $("#" + errors[0].Key).focus();

        $().customModal({
            destroyOnClose: true,
            showCloseButton: true,
            title: $("#TxtInfo").val(),
            text: $("#TxtValidationModalError").val(),
            type: "error",
            buttons: [{
                text: $("#TxtConfirm").val(),
                icon: 'fa fa-check',
                closeOnAction: true,
                type: 'primary',
                action: () => {
                    $("#" + errors[0].Key).focus();
                }
            }]
        });
    }

    $(document).ready(function () {
        select2withAPI();

        formatNumberInput($("#Amount"));
    });
</script>

@* TODO: remove after refactor *@
@section pageScripts{
    @Scripts.Render("~/bundles/validation")

}

<style>
    .select2-container .select2-selection--single .select2-selection__rendered {
        overflow: unset !important;
        text-overflow: unset !important;
    }
</style>