@model IEnumerable<PantheonRA.WebApi.Contracts.TravelOrderExpense>

@{
    var expenseNum = (int)ViewBag.Enumerator;
    var ExpensesId = "DistanceViewModels" + expenseNum + "Expenses{0}{1}{2}";
    var ExpensesName = "DistanceViewModels[" + expenseNum + "].Expenses[{0}].{1}";
    var type = "Expenses";
}

@Html.Hidden("ExpensesPrefix-" + expenseNum, string.Format(ExpensesName, "OrdinalNumberNo", "Property"))

<table id="ExpensesTable-@expenseNum" class="table table-bordered input-no-bottom-border to-panel-table allows-expenses-table">
    <thead>
        <tr>
            <th style="width:15%">@Loc.Cost</th>
            <th>@Loc.Amount</th>
            <th style="width:10%">@Loc.Currency</th>
            <th style="min-width:160px">@Loc.DateAndTime</th>
            <th>@Loc.FxRate</th>
            <th>@Loc.Value</th>
            <th style="min-width:55px;">@Loc.NotInCurrency</th>
            <th>@Loc.NotForPayout</th>
            <th>@Loc.Description</th>
            <th id="th-button"></th>
        </tr>
    </thead>

    <tbody>
        @Html.Partial("_ExpensesCreate")

        @for (var i = 0; i < Model.Count(); i++)
        {
            <tr id="@i">

                <td class="hidden">
                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "Deleted", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "Deleted")"
                           value="@Model.ElementAt(i).Deleted" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "AcKey", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "AcKey")"
                           value="@Model.ElementAt(i).AcKey" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "AnCostNo", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "AnCostNo")"
                           value="@Model.ElementAt(i).AnCostNo" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "ExpenseAnNo", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "ExpenseAnNo")"
                           value="@Model.ElementAt(i).ExpenseAnNo" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "CostNo", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "CostNo")"
                           value="@Model.ElementAt(i).CostNo" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "ExpenseOrdinalNumber", Model.ElementAt(i).ExpenseOrdinalNumber)"
                           name="@string.Format(ExpensesName, i, "ExpenseOrdinalNumber")"
                           value="@Model.ElementAt(i).ExpenseOrdinalNumber" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "Name", Model.ElementAt(i).Name)"
                           name="@string.Format(ExpensesName, i, "Name")"
                           value="@Model.ElementAt(i).Name" />

                    <input type="hidden"
                           id="@string.Format(ExpensesId, i, "QId", Model.ElementAt(i).QId)"
                           name="@string.Format(ExpensesName, i, "QId")"
                           value="@Model.ElementAt(i).QId" />
                </td>

                <td label="@Loc.Cost">
                    <select id=@string.Format(ExpensesId, i, "CostType", Model.ElementAt(i).AnCostNo)
                            name="@string.Format(ExpensesName, i, "CostType")"
                            class="form-control select2withAPI"
                            style="width:200px !important;"
                            filter-by="HeaderDocumentType"
                            data-placeholder="@Loc.Type"
                            onchange="setNotForPayout('@expenseNum', this.id, '@string.Format(ExpensesId, i, "NotForPayment", Model.ElementAt(i).AnCostNo)', 'ExpensesTable-@expenseNum', '@i', '@type');"
                            data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/travel-orders/expenses/types-lookupitems" })>
                        <option selected value="@Model.ElementAt(i).CostType">@Model.ElementAt(i).Name</option>
                    </select>
                </td>

                <td label="@Loc.Amount">
                    <input type="text"
                           id="@string.Format(ExpensesId, i, "PriceCurrencyString", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "PriceCurrencyString")"
                           value="@Model.ElementAt(i).PriceCurrencyString"
                           class="form-control thousands-with-decimals"
                           onchange="convertCurrency(
                                        '@string.Format(ExpensesId, i, "DateCost", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Currency", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "FxRate", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "PriceCurrencyString", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Value", Model.ElementAt(i).AnCostNo)',
                                        'ExpensesTable-@expenseNum',
                                        '@i',
                                        '@type');" />
                </td>

                <td label="@Loc.Currency">
                    <select id=@string.Format(ExpensesId, i, "Currency", Model.ElementAt(i).AnCostNo)
                            name=@string.Format(ExpensesName, i, "Currency")
                            class="form-control select2withAPI"
                            data-placeholder="@Loc.Currency"
                            onchange="convertCurrency(
                                        '@string.Format(ExpensesId, i, "DateCost", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Currency", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "FxRate", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "PriceCurrencyString", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Value", Model.ElementAt(i).AnCostNo)',
                                        'ExpensesTable-@expenseNum',
                                        '@i',
                                        '@type');"
                            data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/travel-orders/expenses/currencies-lookupitems" })>
                        <option value="@Model.ElementAt(i).Currency" selected>@Model.ElementAt(i).Currency</option>
                    </select>
                </td>

                <td label="@Loc.DateAndTime">
                    <input type="text"
                           id="@string.Format(ExpensesId, i, "DateCost", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "DateCost")"
                           value="@Model.ElementAt(i).DateCost"
                           onblur="convertCurrency(
                                        '@string.Format(ExpensesId, i, "DateCost", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Currency", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "FxRate", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "PriceCurrencyString", Model.ElementAt(i).AnCostNo)',
                                        '@string.Format(ExpensesId, i, "Value", Model.ElementAt(i).AnCostNo)',
                                        'ExpensesTable-@expenseNum',
                                        '@i',
                                        '@type');"
                           class="form-control custom-datetimepicker expense-dt-picker" />
                </td>

                <td label="@Loc.FxRate">
                    <input type="text"
                           id="@string.Format(ExpensesId, i, "FxRate", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "FxRate")"
                           value="@Model.ElementAt(i).FxRate"
                           data-change-url="@Url.Action("GetFxRate", "TravelOrders")"
                           class="form-control" 
                           onchange="updateTravelOrderInput('ExpensesTable-@expenseNum', '@i', '@type');" />
                </td>

                <td label="@Loc.Value">
                    <input type="text"
                           id="@string.Format(ExpensesId, i, "Value", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "Value")"
                           value="@Model.ElementAt(i).Value.ToString("N2")"
                           class="form-control"
                           disabled />
                </td>

                <td label="@Loc.NotInCurrency" class="text-center">
                    <input type="checkbox"
                           class="travelorders-checkbox custom-checkbox"
                           id="@string.Format(ExpensesId, i, "NotInCurrency", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "NotInCurrency")"
                           value="@Model.ElementAt(i).NotInCurrency"
                           checked="@Model.ElementAt(i).NotInCurrency"
                           onchange="setCheckedValue(this.id);
                                     updateTravelOrderInput('ExpensesTable-@expenseNum', '@i', '@type');" />
                </td>

                <td label="@Loc.NotForPayout" class="text-center">
                    <input type="checkbox"
                           class="travelorders-checkbox custom-checkbox"
                           id="@string.Format(ExpensesId, i, "NotForPayment", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "NotForPayment")"
                           value="@Model.ElementAt(i).NotForPayment"
                           checked="@Model.ElementAt(i).NotForPayment"
                           onchange="setCheckedValue(this.id);
                                     updateTravelOrderInput('ExpensesTable-@expenseNum', '@i', '@type');" />
                </td>

                <td label="@Loc.Description">
                    <input type="text"
                           id="@string.Format(ExpensesId, i, "Note", Model.ElementAt(i).AnCostNo)"
                           name="@string.Format(ExpensesName, i, "Note")"
                           value="@Model.ElementAt(i).Note"
                           class="form-control"
                           onchange="updateTravelOrderInput('ExpensesTable-@expenseNum', '@i', '@type');" />
                </td>

                <td>
                    <button type="button" onclick='DeleteRow("ExpensesTable-@expenseNum", @i)'
                            class="btn btn-outline add-del-allow-expense">
                        <span class="far fa-trash-alt"></span>
                    </button>
                </td>

            </tr>
        }
    </tbody>
</table>
<br />