@model PantheonRA.BackOffice.Models.DailyWagesViewModel
@{ 
    var mileageCreateRowId = "createMileage";
}

<div>
    <table id="mileageTable" data-grid-id="mileage" class="table table-bordered showhidecolumns" role="grid">
        <thead>
            <tr>
                <th data-column-id="EffectiveDateFrom">@Loc.EffectiveDateFrom</th>
                <th class="text-right" data-column-id="PriceUpTo">@Loc.PriceUpTo</th>
                <th class="text-right" data-column-id="KmUpperCase">@Loc.KmUpperCase</th>
                <th class="text-right" data-column-id="PriceAbove" data-default-hidden="true">@Loc.PriceAbove</th>
                <th data-column-id="Currency">@Loc.Currency</th>
                <th data-column-id="Delete" data-sortable="false"></th>
            </tr>
        </thead>
        <tbody id="sortable-body">
            <tr id="@mileageCreateRowId">
                <td style="width: 30%">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                        <input id="mileageDate"
                                name="Mileage.Date"
                                type="text"
                                class="form-control custom-datepicker"
                                autocomplete="off"
                                value=""
                                required />
                    </div>
                </td>
                <td style="width: 15%;">
                    <input id="mileagePriceTo"
                            name="Mileage.PriceTo"
                            type="text"
                            class="form-control text-right"
                            autocomplete="off"
                            placeholder="@Loc.Price"
                            required
                            oninput="toThousandsDecimalsFormat('mileagePriceTo')"/>
                </td>
                <td style="width: 15%;">
                    <input id="mileageKm"
                            name="Mileage.Km"
                            type="text"
                            class="form-control text-right"
                            autocomplete="off"
                            placeholder="@Loc.KmUpperCase"
                            oninput="toThousandsNoDecimalsFormat('mileageKm')"
                             />
                </td>
                <td style="width: 15%;">
                    <input id="mileagePriceAbove"
                            name="Mileage.PriceAbove"
                            type="text"
                            class="form-control text-right"
                            autocomplete="off"
                            placeholder="@Loc.Price" 
                            oninput="toThousandsDecimalsFormat('mileagePriceAbove')"/>
                </td>
                <td style="width: 20%">
                    <select id="mileageCurrency"
                            name="Mileage.Currency"
                            class="form-control select2withAPI"
                            data-placeholder="@Loc.Currency"
                            data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/travel-orders/expenses/currencies-lookupitems" })
                            required>
                    </select>
                </td>
                <td style="width: 5%" class="td-action">
                    <p class="btn btn btn-success btn-block" id="createMileageBtn" onclick="addMileage('@mileageCreateRowId')">
                        <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                    </p>
                </td>
            </tr>
            @for (var i = 0; i < Model.Mileage.Count(); i++)
            {
                var updateMilegaRowId = "mileageRow-" + i;

                <tr id="@updateMilegaRowId" class="mileage-rows">
                    <td style="width: 30%">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                            <input id="mileageHiddenDate-@i"
                                    type="hidden"
                                    value="@Model.Mileage.ElementAt(i).Date.Value.ToString("dd.MM.yyyy")" />
                            <input id="mileageDate-@i" 
                                    name="Mileage.Date"
                                    class="form-control custom-datepicker"
                                    type="text"
                                    autocomplete="off"
                                    value="@Model.Mileage.ElementAt(i).Date.Value.ToString("dd.MM.yyyy")"
                                    required
                                    onchange="updateMileage('@updateMilegaRowId', @i)" />
                        </div>
                    </td>
                    <td style="width: 15%;" class="text-right">
                        <input id="mileagePriceTo-@i"
                                name="Mileage.PriceTo"
                                type="text"
                                class="form-control text-right"
                                autocomplete="off"
                                value="@Model.Mileage.ElementAt(i).PriceTo.ToString("N2")"
                                required
                                oninput="toThousandsDecimalsFormat('mileagePriceTo-@i')"
                                onchange="updateMileage('@updateMilegaRowId', @i)" />
                    </td>
                    <td style="width: 15%;" class="text-right">
                        <input id="mileageKm-@i"
                                name="Mileage.Km"
                                type="text"
                                class="form-control text-right int-thousands-with-dot"
                                autocomplete="off"
                                value="@Model.Mileage.ElementAt(i).Km"
                                oninput="toThousandsNoDecimalsFormat('mileageKm-@i')"
                                onchange="updateMileage('@updateMilegaRowId', @i)" />
                    </td>
                    <td style="width: 15%;" class="text-right">
                        <input id="mileagePriceAbove-@i"
                                value="@Model.Mileage.ElementAt(i).PriceAbove.ToString("N2")"
                                name="Mileage.PriceAbove"
                                type="text"
                                class="form-control text-right"
                                autocomplete="off"
                                oninput="toThousandsDecimalsFormat('mileagePriceAbove-@i')"
                                onchange="updateMileage('@updateMilegaRowId', @i)" />
                    </td>
                    <td style="width: 20%;">
                        <select id="mileageCurrency-@i"
                                class="form-control select2withAPI"
                                data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/travel-orders/expenses/currencies-lookupitems" })
                                required
                                onchange="updateMileage('@updateMilegaRowId', @i)">
                            <option value="@Model.Mileage.ElementAt(i).Currency" selected>@Model.Mileage.ElementAt(i).Currency</option>
                        </select>
                    </td>
                    <td style="width: 5%" class="td-action">
                        <p class="text-center" style="margin-top: 8px !important">
                            <span onclick="openDeleteModal('@Model.Mileage.ElementAt(i).Date.Value', 'mileage')" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                        </p>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>