@using PantheonRA.BackOffice.Enums
@model PantheonRA.BackOffice.Models.TravelOrdersDistancesViewModel

@using PantheonRA.BackOffice.Models

@{
    ViewBag.Title = Loc.Create;
    Layout = null;
    var decimalFormat = "{0:N2}";
}

@Html.HiddenFor(m => m.Message, new { @class = "message" })
<input type="hidden" id="AjpesUrl" value="@Url.Action("AjpesSearch", "Subjects")" />
<input type="hidden" id="CreateSubjectUrl" value="@Url.Action("CreateFromPartial", "Subjects")" />
<input type="hidden" id="PartnerId" />
@Html.Hidden("searchSubjectsUrl", @Url.Action("GetSubjectById", "TravelOrdersDistances"))
@Html.Hidden("AddNewDistance", @Url.Action("CreateDistance", "TravelOrdersDistances"))
@Html.HiddenFor(m => m.acKey)

<br />
<div class="col-md-12">
    <div id="distance-accordion">
        @foreach (var item in Model.travelOrderDistanceList)
        {
            if (item.OrdinalNumber != 0)
            {
                <table class="table table-bordered destination-table">
                    <tbody>
                        <tr>
                            <td style="width: 40%">
                                <div class="row">
                                    <div class="col-md-1">
                                        @Html.Hidden("RowId", item.OrdinalNumber)
                                        <h4 class="panel-title padding-top-10">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#distance-accordion" href="#collapse-@item.OrdinalNumber">
                                            </a>
                                        </h4>
                                    </div>
                                    <div class="col-md-1">
                                        <i class="far fa-map-marker-alt text-success padding-top-10"></i>
                                    </div>
                                    <div class="col-md-10">
                                        <select data-placeholder="@Loc.Destination"
                                                class="form-control select2withAPI select2selection"
                                                data-url=@Url.Action("SearchSubjects", "TravelOrdersDistances")
                                                id="editNode-@item.OrdinalNumber"
                                                tags="True"
                                                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-search-width="700"
                                                data-splitter=","
                                                onchange="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                required>
                                            <option value="@item.Node" selected>@item.Node</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td style="width: 10%">
                                @{
                                    var min = item.DateHourFrom.HasValue && item.DateHourTo.HasValue ? item.DateHourTo.Value.Subtract(item.DateHourFrom.Value).TotalMinutes : 0;
                                    var dateFrom = item.DateHourFrom.HasValue ? item.DateHourFrom.Value.ToString("dd.MM.yyyy HH:mm") : "";
                                    var dateTo = item.DateHourTo.HasValue ? item.DateHourTo.Value.ToString("dd.MM.yyyy HH:mm") : "";
                                }
                                <i class="far fa-clock alt text-success padding-top-10"></i> @min
                            </td>
                            <td style="width: 20%">
                                <i class="far fa-calendar alt text-success padding-top-10"></i> @dateFrom
                            </td>
                            <td style="width: 10%">
                                <i class="far fa-road alt text-success padding-top-10"></i> @string.Format(decimalFormat, item.Km) @Loc.Km
                            </td>
                            <td style="width: 10%">
                                <i class="far fa-coins alt text-success padding-top-10"></i> @string.Format(decimalFormat, item.Mileage)
                            </td>
                            <td class="text-right" style="width: 10%">
                                <span class="badge">@item.KMCounterAfter</span>
                                <a class="btn btn-outline"
                                   data-ajax="true"
                                   data-ajax-method="POST"
                                   data-ajax-mode="replace"
                                   data-ajax-success="distanceDeleteCallBack(@Model.acKey);"
                                   data-ajax-update="#TravelOrdersDistancesID"
                                   href="@Url.Action("Delete", "TravelOrdersDistances", new { acKey = item.AcKey, distanceId = item.OrdinalNumber })">
                                    <span class="far fa-trash-alt"></span>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="collapse-@item.OrdinalNumber" class="collapse">
                    <table class="table table-bordered destination-collapse-table">
                        <tbody>
                            <tr>
                                <td style="width: 15%" class="DateHourFromMax">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.DateFrom</label>
                                        <div class="input-group">
                                            <span class="input-group-addon" style="border-bottom:none"><i class="far fa-calendar alt"></i></span>
                                            <input id="editDateFrom-@item.OrdinalNumber"
                                                   class="form-control datetimepicker distanceFromDate"
                                                   onblur="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   type="text"
                                                   value="@dateFrom" TABINDEX="1"/>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 15%" class="DateHourFromMin">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.DateTo</label>
                                        <div class="input-group">
                                            <span class="input-group-addon" style="border-bottom:none"><i class="far fa-calendar alt"></i></span>
                                            <input id="editDateTo-@item.OrdinalNumber"
                                                   class="form-control datetimepicker distanceToDate"
                                                   onblur="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   type="text"
                                                   value="@dateTo" TABINDEX="2"/>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 10%">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.CounterBefore</label>
                                        <div>
                                            <input id="editCounterBefore-@item.OrdinalNumber"
                                                   class="form-control"
                                                   onchange="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   value="@string.Format(decimalFormat, item.KMCounterBefore)" TABINDEX="3"/>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 10%">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.Km</label>
                                        <div>
                                            <input id="editKilometer-@item.OrdinalNumber"
                                                   class="form-control"
                                                   onchange="updateKMCounterAfter(@item.OrdinalNumber); checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   value="@string.Format(decimalFormat, item.Km)" TABINDEX="4"/>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 10%">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.CounterBy</label>
                                        <div>
                                            <input id="editCounterAfter-@item.OrdinalNumber"
                                                   class="form-control"
                                                   onchange="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   value="@string.Format(decimalFormat, item.KMCounterAfter)" TABINDEX="5"/>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 10%;background-color:#eee">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.Mileage</label>
                                        <div>
                                            <input id="@item.Mileage"
                                                   class="form-control"
                                                   onchange="checkAndSave(@item.OrdinalNumber, 'distances')"
                                                   type="text"
                                                   value="@string.Format(decimalFormat, item.Mileage)"
                                                   readonly />
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 10%">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.Purpose</label>
                                        <div>
                                            <select id="travel-note-@item.OrdinalNumber"
                                                    data-placeholder="@Loc.Purpose"
                                                    class="form-control select2withAPI"
                                                    onchange="setNote(@item.OrdinalNumber)"
                                                    data-url=@Url.Action("GetNotes", "TravelOrders", new { acKey = Model.acKey }) TABINDEX="6"></select>
                                        </div>
                                    </div>
                                </td>
                                <td style="width: 20%">
                                    <div class="form-group">
                                        <label class="control-label">@Loc.Description</label>
                                        <div>
                                            <input id="editPurpose-@item.OrdinalNumber" onblur="checkAndSave(@item.OrdinalNumber, 'distances')" type="text"
                                                   class="form-control" placeholder="@Loc.Description" value="@item.Purpose" TABINDEX="7"/>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!--daily allows and expenses-->
                    <div id="partial-accordion-@item.OrdinalNumber">
                        <div class="panel">
                            <div class="panel-heading" id="partial-heading-@item.OrdinalNumber">
                                <h4 class="panel-title">
                                    <a role="button" class="collapsed text-primary" data-toggle="collapse"
                                       data-parent="#partial-accordion-@item.OrdinalNumber"
                                       href="#partial-collapse-@item.OrdinalNumber">
                                        @Loc.DailyAllow - @Loc.TravelExpenses
                                    </a>
                                </h4>
                            </div>
                            <div id="partial-collapse-@item.OrdinalNumber" class="panel-collapse collapse">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel-body" style="border:none">
                                            <!--Daily allows-->
                                            <div id="TravelOrdersDailyAllowsID-@item.OrdinalNumber">
                                                @{Html.RenderAction("Create", "TravelOrdersDailyAllows", new { anNo = item.OrdinalNumber, acKey = item.AcKey });}
                                            </div>
                                            <br />
                                            <!--Daily Expenses-->
                                            <div id="TravelOrdersExpensesId-@item.OrdinalNumber">
                                                @{Html.RenderAction("Create", "TravelOrdersExpenses", new { anNo = item.OrdinalNumber, acKey = item.AcKey }); }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
            else
            {
                @Html.Hidden("DefaultDestination", item.Node)
            }
        }
    </div>
</div>

<a id="refresh-distances"
   data-ajax="true"
   data-ajax-mode="replace"
   data-ajax-update="#TravelOrdersDistancesID"
   data-ajax-success="select2withAPI();dateTimePicker();getKilometers();calculateAbsence();getTotals('@Model.acKey');"
   href="@Url.Action("Create", "TravelOrdersDistances", new { acKey = Model.acKey })">
</a>

<a id="refresh-google-map-distances"
   data-ajax="true"
   data-ajax-mode="replace"
   data-ajax-update="#TravelOrdersMapId"
   data-ajax-success="select2withAPI();dateTimePicker();getKilometers();calculateAbsence();getTotals('@Model.acKey');initializeMap();"
   href="@Url.Action("GoogleMap", "TravelOrdersDistances", new { acKey = Model.acKey })">
</a>

<div class="modal inmodal fade" id="subjectModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="closeModal" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <a class="btn-transparent m-r-xs pull-right" href="@SiteHelpAttributeHelper.GetHelpUrl(HelpIds.ExampleSubjectsNewInModal)" target="_blank"><i class="fas fa-book-reader"></i></a>
                <h3 class="text-left container">@Loc.CreateNewSubject</h3>
            </div>
            <div class="modal-body">
                @{Html.RenderPartial("~/Views/Subjects/_CreateSubjectFormPartial.cshtml",
                      new SubjectCreateViewModel() { SubjectEditData = new SubjectEditData() { SelectedCountryId = ViewBag.CountryName }, Countries = ViewBag.Countries, ForCountry = PantheonRA.BackOffice.CurrentUser.Localization.ToString() });}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveSubjectInDistances()"><i class="fa fa-check m-r-xs"></i>@Loc.Add</button>
                <button type="button" data-dismiss="modal" class="btn btn-link"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        calculateAbsence();
        getKilometers();

        var errorMessage = $('.message').val();
        errorNotify(errorMessage);
        initializeSubjectsEdit();

        initializePlacesSearch('streetSearch');
        $("#streetSearchWrapper").hide();
    });

    function distanceDeleteCallBack(key) {
        select2withAPI();
        dateTimePicker();
        getKilometers();
        calculateAbsence();
        getTotals(key);
        updateDailyAllows();
        updateExpense();
        updateGoogleMapDistances();
    }
</script>

<script src="~/Scripts/custom/products/subjects.js"></script>
