@model PantheonRA.BackOffice.Models.CashTransactionItemsViewModel

@Html.Hidden("AddItem", Url.Action("AddItem", "CashTransactions"))
@Html.Hidden("CashItems", Url.Action("CashItems", "CashTransactions"))
@Html.Hidden("DeleteCashItem", Url.Action("DeleteItem", "CashTransactions"))
@Html.Hidden("TxtConfirmation", Loc.Confirmation)
@Html.Hidden("TxtConfirm", Loc.Confirm)
@Html.Hidden("TxtCancel", Loc.Cancel)
@Html.Hidden("TxtDeleteQuestion", Loc.ConfirmDeleteItemMessage)
@Html.Hidden("TotalItems", Model.Items.Count())
<input type="hidden" id="receipt-select2-columns" value="@Loc.Type,@Loc.Account,@Loc.Department,@Loc.CostCarrier" />

<div class="row">
    <div class="col-lg-8 col-md-10 col-sm-11 col-xs-12">
        <table id="cashItemTable" class="table table-bordered ident-search" role="grid">
            <thead>
                <tr role="row">
                    <th style="width:35%">@Loc.Name</th>
                    <th style="width:20%">@Loc.Document</th>
                    <th style="width:30%">@Loc.PaymentMethod</th>
                    <th style="width:15%">@Loc.Amount</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr role="row">
                    <td class="select2-td">
                        <input type="text" id="txtName" class="form-control" list="CashReceiptsList" placeholder="@Loc.Name" />
                    </td>

                    <td>
                        <input style="max-height:44px !important;"
                               type="text"
                               onkeyup="onEnterAddItem(event)"
                               class="form-control"
                               id="txtLinkDocKey"
                               maxlength="34"
                               autocomplete="off" />
                        <input id="txtLinkKey" hidden />
                    </td>

                    <td class="select2-td">
                        <select class="form-control select2withAPI"
                                tags="true"
                                data-url="@Url.Action("GetPaymentMethods", "CashTransactions", new { type = Model.Type })"
                                id="txtPaymentMethod"
                                data-column-names="@Loc.PaymentMethod,@Loc.Name"
                                data-bootstrap-columns="col-md-4,col-md-8"
                                data-search-width="400"
                                data-placeholder="@Loc.PaymentMethod"
                                required></select>
                    </td>

                    <td>
                        <div class="addable-button">
                            <input style="max-height:44px !important;"
                                   type="text" onkeyup="onEnterAddItem(event)"
                                   id="nmAmount" value=""
                                   step="2"
                                   autocomplete="off"
                                   class="form-control text-right numberInput" />
                        </div>
                    </td>
                    <td>
                        <button type="button" class="btn btn-success createNewButton" id="add-position" style="height: 50px;" title="@Loc.AddPosition" onclick="addCashRegItem()">
                            <i id="add-position-icon" class="fa fa-plus"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="table-responsive document-table m-b-md" style="display: block;">
    <div id="divCashItems" class="dt-bootstrap" style="position:relative">
        <table id="tblCashItems" data-grid-id="cash-items" class="table table-bordered showhidecolumns" style="margin-top: -20px" role="grid">
            <thead>
                <tr role="row">
                    <th style="width:40%" class="note-text-bg" data-column-id="Name">@Loc.Name</th>
                    <th style="width:20%" class="note-text-bg" data-column-id="Document">@Loc.Document</th>
                    <th style="width:20%" class="note-text-bg" data-column-id="PaymentMethod">@Loc.PaymentMethod</th>
                    <th style="width:20%" class="text-right note-text-bg" data-column-id="Amount">@Loc.Amount</th>
                    <th data-column-id="Delete"></th>
                </tr>
            </thead>
            <tbody>
                @for (var i = 0; i < Model.Items.Count(); i++)
                {
                    <tr role="row">
                        <td>
                            <input type="hidden" name="Items[@i].QId" value="@Model.Items[i].QId" />
                            <input type="hidden" name="Items[@i].OrdinalNumber" value="@Model.Items[i].OrdinalNumber" />
                            <input type="hidden" name="Items[@i].AcKey" value="@Model.Items[i].AcKey" />
                            <input type="text" name="Items[@i].Name" class="form-control" list="CashReceiptsList" value="@Model.Items[i].Name" />
                        </td>
                        <td>
                            <input id="@Model.Items[i].LinkDocumentKey"
                                   type="text"
                                   maxlength="34"
                                   class="form-control width100p"
                                   value="@Model.Items[i].LinkDocumentKey"
                                   name="Items[@i].LinkDocumentKey" />
                            <input id="@Model.Items[i].LinkKey"
                                   value="@Model.Items[i].LinkKey"
                                   name="Items[@i].LinkKey"
                                   hidden />
                        </td>
                        <td>
                            <div class="select2HideColumns">
                                <select class="form-control select2withAPI"
                                        tags="true"
                                        data-url="@Url.Action("GetPaymentMethods", "CashTransactions", new { type = Model.Type })"
                                        id="Items[@i].PaymentMethodId"
                                        name="Items[@i].PaymentMethodId"
                                        data-column-names="@Loc.PaymentMethod,@Loc.Name"
                                        data-bootstrap-columns="col-md-4,col-md-8"
                                        data-search-width="400"
                                        data-placeholder="@Loc.PaymentMethod">
                                    <option value="@Model.Items[i].PaymentMethodId" selected>@Model.Items[i].PaymentMethod</option>
                                </select>
                            </div>
                        </td>
                        <td class="text-right">
                            <input id="Items[@i].AmountString"
                                   type="text"
                                   class="amount form-control text-right numberInput"
                                   value="@Model.Items[i].AmountString"
                                   onchange="reloadTotals()"
                                   name="Items[@i].AmountString" />
                        </td>
                        <td class="itemActions">
                            <button type="button"
                                    onclick="removeCashItem(@Model.Items[i].QId)"
                                    class="btn btn-outline editableInput">
                                <span class="far fa-trash-alt" aria-hidden="true"></span>
                            </button>
                        </td>
                    </tr>
                    <tr class="po-between-row">&nbsp;</tr>
                }
            </tbody>
        </table>
    </div>
    <datalist id="CashReceiptsList">
        @for (var j = 0; j < Model.CashReceipts.Count; j++)
        {
            <option>@Model.CashReceipts[j].Key</option>
        }
    </datalist>

</div>

@* TODO: remove after refactor *@
@section pageScripts{
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
}

<script>
    $(document).ready(function () {
        let pmKey = $("#PaymentMethodId").val();
        let pmTxt = $("#select2-PaymentMethodId-container").text();

        if (!pmKey) {
            pmKey = $("#PmKey").val();
            pmTxt = $("#PmTxt").val();
        }

        var pmVal = new Option(pmTxt, pmKey, false, true);
        $('#txtPaymentMethod').append(pmVal).trigger('change');
    });
</script>
<script src="~/Scripts/custom/hideColumnTablesHelper.js"></script>

<!-- These nonsense will be removed after table refactor. -->
<style>
    #tblCashItems {
        border-collapse: separate;
        border-spacing: 0px;
    }

        #tblCashItems td {
            border-left: 0 !important;
        }

        #tblCashItems .itemActions {
            border-right: 0 !important;
        }

    .btn-outline {
        border: 0 !important;
    }
</style>