@model PantheonRA.WebApi.Contracts.DailyWageDetails
@{
    string ActionMethod = "Create";
    if (!string.IsNullOrEmpty(Model.DailyAllow))
    {
        ActionMethod = "Edit";
    }
    var dailyWageCreateRowId = "createDailyWage";
    var creteDailyWageValueId = "createDailyWageValueBtn";
}

<div class="row">
    <div class="col-xs-12">
        <div class="form-horizontal">
            <div class="col-xs-12 hidden-lg hidden-md">
                <div class="hr-line-dashed"></div>
            </div>
            <div>
                <table id="dailyWageItems" data-grid-id="daily-wages" class="table table-bordered showhidecolumns" role="grid">
                    <thead>
                        <tr>
                            <th data-column-id="EffectiveDateFrom">@Loc.EffectiveDateFrom</th>
                            <th data-column-id="Value">@Loc.Value</th>
                            <th data-column-id="FieldSupplement">@Loc.FieldSupplement</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="@dailyWageCreateRowId">
                            <td style="width: 33%">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                    <input id="dailyWageDate" type="text" class="form-control custom-datepicker" autocomplete="off" value="" required />
                                </div>
                            </td>
                            <td style="width: 21%;">
                                <input id="dailyWagePriceTo" type="text" class="form-control" autocomplete="off" placeholder="@Loc.Value" required 
                                       oninput="toThousandsDecimalsFormat('dailyWagePriceTo')"/>
                            </td>
                            <td style="width: 21%;">
                                <input id="dailyWagePriceAbove" type="text" class="form-control" autocomplete="off" placeholder="@Loc.FieldSupplement" required 
                                       oninput="toThousandsDecimalsFormat('dailyWagePriceAbove')"/>
                            </td>
                            <td style="width: 21%">
                                <select id="dailyWageCurrency"
                                        class="form-control select2withAPI"
                                        data-placeholder="@Loc.Currency"
                                        data-url=@Url.Action("CurrenciesDropDownValues", "TravelOrdersExpenses")
                                        required>
                                </select>
                            </td>
                            <td style="width: 4%" class="td-action">
                                <p id="@creteDailyWageValueId" class="btn btn btn-success btn-block" onclick="addDailyWage('@dailyWageCreateRowId', '@ActionMethod', '@creteDailyWageValueId')">
                                    <span class="far fa-plus cursor-pointer" aria-hidden="true"></span>
                                </p>
                            </td>
                        </tr>
                        @if (Model.DailyWages != null)
                        {
                            for (var i = 0; i < Model.DailyWages.Count(); i++)
                            {
                                var updateDailyWageValueRowId = "dailyWageRow-" + i;

                                <tr id="@updateDailyWageValueRowId" class="daily-wage-rows">
                                    <td style="width: 33%">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="far fa-calendar alt"></i></span>
                                            <input id="dailyWageHiddenDate-@i"
                                                   type="hidden"
                                                   value="@Model.DailyWages.ElementAt(i).Date.Value.ToString("dd.MM.yyyy")">
                                            <input id="dailyWageDate-@i"
                                                   class="form-control custom-datepicker"
                                                   type="text"
                                                   autocomplete="off"
                                                   value="@Model.DailyWages.ElementAt(i).Date.Value.ToString("dd.MM.yyyy")"
                                                   required
                                                   onchange="updateDailyWageValue('@updateDailyWageValueRowId', @i)">
                                        </div>
                                    </td>
                                    <td style="width: 21%;" class="text-right">
                                        <input id="dailyWagePriceTo-@i"
                                               type="text"
                                               class="form-control"
                                               value="@Model.DailyWages.ElementAt(i).PriceTo.ToString("N2")"
                                               autocomplete="off"
                                               required
                                               oninput="toThousandsDecimalsFormat('dailyWagePriceTo-@i')"
                                               onchange="updateDailyWageValue('@updateDailyWageValueRowId', @i)" />
                                    </td>
                                    <td style="width: 21%;" class="text-right">
                                        <input id="dailyWagePriceAbove-@i"
                                               type="text"
                                               class="form-control"
                                               value="@Model.DailyWages.ElementAt(i).PriceAbove.ToString("N2")"
                                               autocomplete="off"
                                               required
                                               oninput="toThousandsDecimalsFormat('dailyWagePriceAbove-@i')"
                                               onchange="updateDailyWageValue('@updateDailyWageValueRowId', @i)" />
                                    </td>
                                    <td style="width: 21%;">
                                        <select id="dailyWageCurrency-@i"
                                                class="form-control select2withAPI"
                                                data-url=@Url.Action("CurrenciesDropDownValues", "TravelOrdersExpenses")
                                                required
                                                onchange="updateDailyWageValue('@updateDailyWageValueRowId', @i)">
                                            <option value="@Model.DailyWages.ElementAt(i).Currency" selected>@Model.DailyWages.ElementAt(i).Currency</option>
                                        </select>
                                    </td>
                                    <td style="width: 4%" class="td-action">
                                        <p class="text-center" style="margin-top: 8px !important">
                                            <span onclick="openDeleteModal('@Model.DailyWages.ElementAt(i).Date.Value', 'dailyWageValue')" class="far fa-trash-alt cursor-pointer" aria-hidden="true"></span>
                                        </p>
                                    </td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>