@model PantheonRA.BackOffice.Models.TaRequestModal
@using PantheonRA.WebApi.Contracts.Enums
@using PantheonRA.BackOffice.Enums

@{
    var dateBegin = DateTime.Now;
    var dateEnd = DateTime.Now;
}

@Html.Hidden("RequestTypeNumber", string.Empty)
@Html.Hidden("AbsenceType", Loc.AbsenceType)
@Html.Hidden("ObligationType", Loc.ObligationType)
@Html.Hidden("AbsencePlaceholder", Loc.SelectAbsenceType)
@Html.Hidden("ObligationPlaceholder", Loc.SelectObligationType)
@Html.Hidden("OtherPlaceholder", Loc.SelectTaskType)
@Html.Hidden("RequestType", Loc.RequestType)
@Html.Hidden("Absences", TimeRecordRequestTypes.Absences)
@Html.Hidden("Obligations", TimeRecordRequestTypes.WorkObligations)
@Html.Hidden("Other", TimeRecordRequestTypes.Other)

<div class="modal" id="new-request-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog ta-modal-size">
        <div class="modal-content">
            <div class="modal-header">
                <form action="@Url.Action("AddRequest", "TimeRecordRequests")" method="post" id="new-request-modal-form">
                    <div class="row" style="padding:0px 15px">
                        <div>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <a href="@Loc.HelpUrl@HelpIds.AddTaCalendarRequest"
                               target="_blank" class="pull-right m-r-sm default-icon-color"><i class="fa fa-question"></i></a>
                            <h3>@Loc.AddRequest</h3>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                @Html.LabelFor(model => model.Worker, Loc.Worker, new { @class = "control-label" })
                            </div>
                            <div class="col-sm-9 height-34">
                                <div class="form-group">
                                    @Html.DropDownListFor(model => model.Worker,
                                        new SelectList(Model.TimeRecordsFilterData.PermissionEmployees, "WorkerCode", "WorkerName", Model.Worker),
                                        HtmlAttributesHelper.CreateInputAttributes("form-control selectpicker",
                                            "Worker", false, Loc.Employees, true,
                                            new { @title = Loc.Employees, data_live_search = "true" }))
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm padding-right-0">
                                @Html.LabelFor(model => model.Leader, string.Format("{0} / {1}", Loc.Leader, Loc.Certifier.ToLower()), new { @class = "control-label" })
                            </div>
                            <div class="col-sm-9">
                                <div>
                                    @Html.DropDownListFor(model => model.Leader,
                                        new SelectList(Model.TimeRecordsFilterData.Employees.Where(x => x.Active == ActiveStatus.Active), "WorkerCode", "WorkerName",
                                            Model.Leader != null ? Model.Leader : string.Empty),
                                        HtmlAttributesHelper.CreateInputAttributes("form-control selectpicker",
                                            "Leader", false, Loc.Leader, true,
                                            new { @title = Loc.Leader, data_live_search = "true" }))
                                </div>
                                <span class="field-validation-error text-danger hidden m-l-sm" id="LeaderValidation">@Loc.RequiredInput</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                <label>@Loc.TypeOfRequest</label>
                            </div>
                            <div class="col-sm-9">
                                <select id="TypeOfRequest"
                                        name="TypeOfRequest"
                                        data-placeholder="@Loc.TypeOfRequest"
                                        class="form-control select2"
                                        onchange="changeRequestType()">
                                    <option value="" selected></option>
                                    <option value="@TimeRecordRequestTypes.Absences">@Loc.Absences</option>
                                    <option value="@TimeRecordRequestTypes.WorkObligations">@Loc.WorkObligations</option>
                                    <option value="@TimeRecordRequestTypes.Other">@Loc.OtherWeight</option>
                                </select>
                                <span class="field-validation-error text-danger hidden m-l-sm" id="RequestValidation">@Loc.RequiredInput</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                <label id="dynamic-label">@Loc.AbsenceType</label>
                            </div>
                            <div id="dynamic-type-div" class="col-sm-9">
                                <select id="DynamicTypeDropdown"
                                        name="AbsenceType"
                                        data-placeholder="@Loc.SelectAbsenceType"
                                        class="form-control select2withAPI"
                                        filter-by="RequestTypeNumber"
                                        data-url=@Url.Action("GetDropDownValues", "GlobalHelper", new { apiPath = "/v1/calendar-entry-types/icon-types/" })>
                                    <option value=""></option>
                                </select>
                                <span class="field-validation-error text-danger hidden m-l-sm" id="AbsenceValidation">@Loc.RequiredInput</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                <label>@Loc.TaBegin</label>
                            </div>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <span class="input-group-addon" style="padding-left:11px"><i class="far fa-calendar alt"></i></span>
                                    <input type="text"
                                           id="dateBegin-dp"
                                           value="@dateBegin"
                                           name="DateTimeFrom"
                                           class="form-control custom-datepicker" />
                                    <input type="text"
                                           id="dateBegin-dtp"
                                           value="@dateBegin"
                                           class="form-control custom-datetimepicker hidden" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                <label>@Loc.TaEnd</label>
                            </div>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <span class="input-group-addon" style="padding-left:11px"><i class="far fa-calendar alt"></i></span>
                                    <input type="text"
                                           id="dateEnd-dp"
                                           value="@dateEnd"
                                           name="DateTimeTo"
                                           class="form-control custom-datepicker" />
                                    <input type="text"
                                           id="dateEnd-dtp"
                                           value="@dateEnd"
                                           class="form-control custom-datetimepicker hidden" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 m-t-sm">
                                <label>@Loc.Comment</label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group padding-top-10">
                                    <textarea class="form-control newrequest-textarea" name="WorkerComment" rows="4" placeholder="@Loc.Comment"></textarea>
                                </div>
                            </div>
                        </div>

                        <br />
                        <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-check m-r-xs" id="submit-btn-icon"></i>@Loc.Send</button>
                        <button type="button" data-dismiss="modal" class="btn btn-link pull-right"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
