@model PantheonRA.BackOffice.Models.SetWorkHourViewModel
@using PantheonRA.BackOffice.Models
@using PantheonRA.WebApi.Contracts
@using PantheonRA.BackOffice.Helpers

<script src="~/Scripts/custom/workhours/setworkhours.js"></script>

<div class="wrapper wrapper-content">
    <div class="tabs-container">
        <!-- Main Tabs -->
        @Html.Partial("~/Views/Company/_CompanySettingsTabNavigation.cshtml")

        <!-- Buttons -->
        <div class="row buttons-tabbed">
            @Html.Partial("_FormButtons", new FormButtonsViewModel
           {
               BackUrl = Url.Action("Index", "SetWorkHours"),
               CreateButtonGroup = new FormButtonGroup
               {
                   Buttons = new List<FormButton>
                            {
                                 new FormButton { Url = Url.Action("Create", "SetWorkHours") }
                            }
               },
               SaveButtonGroup = new FormButtonGroup
               {
                   Buttons = new List<FormButton>
                       {
                            new FormButton { OnClick = "saveHeader()" }
                       }
               }
           })
        </div>

        <div class="tab-content" style="height: unset">
            <!-- Hidden -->
            @Html.HiddenFor(model => model.WorkHourM.AcCode, new { @id = "AcCode" })
            @Html.HiddenFor(model => model.WorkHourM.AnQid, new { @id = "AnQid" })
            @Html.Hidden("ItemAnQid", 0)
            @Html.Hidden("LblCurrentDay", Loc.TaCurrentDay)
            @Html.Hidden("LblDay", Loc.TaDay)
            @Html.Hidden("UrlDeleteItem", Url.Action("DeleteItem", "SetWorkHours"))
            @Html.Hidden("UrlEdit", Url.Action("Edit", "SetWorkHours"))
            @Html.Hidden("UrlSaveHeader", Url.Action("Save", "SetWorkHours"))
            @Html.Hidden("UrlSaveItem", Url.Action("SaveItem", "SetWorkHours"))
            @Html.Hidden("DefaultEntryType", Model.DefaultEntryType)
            @Html.Hidden("DefaultEntryTypeText", Model.DefaultEntryTypeText)
            @Html.Hidden("ErrTimeNotCorrect", Loc.TaTimeInputNotCorrect)
            @Html.Hidden("ErrTimeOverlap", Loc.TaTimeOverlap)

            <!-- Shift settings -->
            <div class="row document-head">
                <div class="col-md-1 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkHourM.AcCode, Loc.Code, new { @class = "control-label" })
                        <div>
                            @Html.EditorFor(model => model.WorkHourM.AcCode,
                                       new { htmlAttributes = new { @id = "_AcCode", @class = "form-control", @autocomplete = "off" } })
                        </div>
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkHourM.ShiftType, Loc.Name, new { @class = "control-label" })
                        <select id="ShiftType"
                                name="ShiftType"
                                class="form-control select2withAPI"
                                data-search-width="250"
                                data-url=@Url.Action("GetShiftTypes", "SetWorkHours")>
                            <option value="@Model.WorkHourM.ShiftType" selected="selected">@Model.ShiftTypeText</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkHourM.EtBefore, Loc.TaEtBefore, new { @class = "control-label" })
                        <select id="EtBefore"
                                name="EtBefore"
                                class="form-control select2withAPI"
                                data-search-width="250"
                                data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")>
                            <option value="@Model.WorkHourM.EtBefore" selected="selected">@Model.EtBeforeText</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <div class="form-group">
                        @Html.LabelFor(model => model.WorkHourM.EtAfter, Loc.TaEtAfter, new { @class = "control-label" })
                        <select id="EtAfter"
                                name="EtAfter"
                                class="form-control select2withAPI"
                                data-search-width="250"
                                data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")>
                            <option value="@Model.WorkHourM.EtAfter" selected="selected">@Model.EtAfterText</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-5 hidden-sm">

                </div>
            </div>
        </div>
        <div class="set-work-hour-content">
            <table class="set-work-hour">
                <!-- Days header -->
                <thead>
                    <tr>
                        <th class="set-wh-header set-wh-hours set-wh-top-borders"></th>
                        @for (var i = 0; i < 31; i++)
                        {
                            <th class="set-wh-header">
                                <div>
                                    @if (i == 0)
                                    {
                                        @Loc.TaCurrentDay
                                    }
                                    else
                                    {
                                        <span>@Loc.TaDay +@i</span>
                                    }
                                    <p class="set-wh-day">@(i + 1)</p>
                                </div>
                            </th>
                        }
                    </tr>
                </thead>
                <!-- Data -->
                <tbody class="work-hours">
                    @for (double hour = 0; hour < 24; hour += 0.25)
                    {
                        <tr>
                            @{
                                var hoursFormatted = (hour % 1) == 0 ? ((int)hour).ToString("D2") + ":00" : "";
                                var fullHourClass = (hour % 1) == 0 ? "full-hour-cell" : "";
                                var lineCell = "set-wh-cell-line " + fullHourClass;
                            }
                            <!-- Hours -->
                            <td class="set-wh-hours">
                                <span class="st-hours-line">@hoursFormatted </span>
                            </td>

                            <!-- Set of day -->
                            @for (var day = 0; day < 31; day++)
                            {
                                var item = WorkHoursHelper.GetSetWhItem(Model.WorkHourM, day, hour);
                                var anQid = item != null ? item.AnQid : 0;
                                var borderColor = item != null ? "3px solid " + item.BackColorHex : "1px solid #DDDDDD";
                                var backColor = item != null ? item.BackColorHex + "1A" : "";
                                var begin = item != null ? item.Begin : (int)hour * 60;
                                var end = item != null ? item.End : (int)hour * 60 + 60;
                                var shiftType = item != null ? item.Et : "-1";
                                var shiftTypeText = item != null ? item.ShiftTypeText : "-1";
                                var dynamicWidth = item != null ? 0.5 : 1.5;
                                if (shiftType != null && shiftType.Trim() == string.Empty)
                                {
                                    shiftType = "-1";
                                }
                                if (shiftTypeText != null && shiftTypeText.Trim() == string.Empty)
                                {
                                    shiftTypeText = "-1";
                                }

                                var cssClass = item != null ? "set-wh-cell-setted" : "set-wh-cell-empty " + fullHourClass;

                                <td style="border-left: @borderColor; background-color: @backColor; min-width: 133.5px"
                                    class="@cssClass" onclick="openSetWhModal(@day, @begin, @end, '@shiftType', '@shiftTypeText', @anQid)">
                                    @if (WorkHoursHelper.IsShiftNameVisible(begin, end, hour, shiftTypeText))
                                    {
                                        <p class="shift-name m-tb-0">@shiftTypeText</p>
                                    }
                                    @if (WorkHoursHelper.IsShiftPeriodVisible(begin, end, hour))
                                    {
                                        <span class="shift-period">@WorkHoursHelper.ToPeriod(begin ?? 0, end ?? 0)</span>
                                    }
                                </td>
                                <td class="@lineCell" style="min-width: @string.Format("{0}{1}", dynamicWidth.ToString().Replace(",", "."), "px")"></td>
                            }
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>


<!-- Edit Modal -->
<div class="modal inmodal fade" id="setWhModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content st-wh-modal">
            <!-- Body -->
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <p class="st-wh-modal-title text-left font-bold">@Loc.Edit</p>

                <!-- Day -->
                <div class="row">
                    <div class="col-md-4 padding-top-10 font-bold">
                        @Loc.TaDay
                    </div>
                    <div class="col-md-8">
                        <select id="ModalDelayDay"
                                name="ModalDelayDay"
                                class="form-control select2withAPI"
                                data-search-width="250"
                                data-url=@Url.Action("GetDelayDays", "SetWorkHours")>
                        </select>
                    </div>
                </div>
                <!-- Begin -->
                <div class="row padding-top-10">
                    <div class="col-md-4 padding-top-10 font-bold">
                        @Loc.TaBegin
                    </div>
                    <div class="col-md-8">
                        <input type="time" id="ModalBegin" name="ModalBegin" class="form-control" autocomplete="off">
                    </div>
                </div>
                <!-- End -->
                <div class="row padding-top-10">
                    <div class="col-md-4 padding-top-10 font-bold">
                        @Loc.TaEnd
                    </div>
                    <div class="col-md-8">
                        <input type="time" id="ModalEnd" name="ModalEnd" class="form-control" autocomplete="off">
                    </div>
                </div>
                <!-- Shift Type -->
                <div class="row padding-top-10">
                    <div class="col-md-4 padding-top-10 font-bold">
                        @Loc.TypeShort
                    </div>
                    <div class="col-md-8">
                        <select class="form-control select2withAPI"
                                tags="true"
                                data-url=@Url.Action("GetCalendarEntryTypes", "SetWorkHours")
                                id="ModalShiftType"
                                name="ModalShiftType"
                                data-column-names="@Loc.Code,@Loc.Name"
                                data-bootstrap-columns="col-md-4,col-md-8"
                                data-search-width="250"
                                data-allow-clear="true"
                                data-placeholder="@string.Empty"
                                required></select>
                    </div>
                </div>

                <div class="row padding-top-10">
                    <div class="col-md-12">
                        <label id="InputValidation" class="text-danger"></label>
                    </div>
                </div>

                <!-- Actions -->
                <div class="pull-right m-t-md">
                    @if (Model.IsNew)
                    {
                        <button type="button" data-dismiss="modal" class="btn btn-link"><i class="fa fa-times m-r-xs text-primary"></i>@Loc.Cancel</button>
                        <label><span class="text-primary fa fa-warning"></span> @Loc.SaveBeforeChanges</label>
                    }
                    else
                    {
                        <button type="button" data-dismiss="modal" onclick="deleteSetWhItem()" class="btn btn-link"><i class="fa fa-trash-alt m-r-xs text-primary"></i>@Loc.Delete</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>
                        <button type="button" class="btn btn-primary p-sm" onclick="saveSetWhItem()"><span class="fa fa-save"></span> @Loc.Save</button>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

@* TODO: remove after refactor *@
@section pageScripts{
    @Scripts.Render("~/bundles/validation")
    <script src="~/Scripts/global-script.js"></script>
    <script>
        $('table').on('scroll', function () {
            $("table > *").width($("table").width() + $("table").scrollLeft());
        });
    </script>
}