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

@{
    var hourlyIndex = 0;
    var hourlyToolsIndex = 0;
    var dailyTableId = "mini-table-workers";
    var dailyTableToolsId = "mini-table-tools";
}
<div id="mini-calendar-filters">
    <select id="mini-calendar-dropdown"
            class="select2"
            onchange="displayCalendarMini()">
        <option value="@CalendarBy.Employees">@Loc.ByEmployees</option>
        <option value="@CalendarBy.Tools">@Loc.ByMeans</option>
    </select>
    <div id="mini-calendar-datepicker">
        <a class="prev-day"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <span id="mini-calendar-icon">
            <i class="far fa-calendar alt"></i>
        </span>
        <input type="text" id="cal-datepicker" />
        <a class="next-day"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
    </div>
</div>

<!-- DAILY CALENDAR MINI -->
<div class="mini-calendar-wrapper" id="mini-calendar-workers">
    <table class="table order-cal-table" id="@dailyTableId">
        <!-- Daily header mini -->
        <thead>
            <tr>
                <th class="set-wh-hours"></th>
                @foreach (var worker in Model.Workers)
                {
                    <th class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department">
                        <div class="order-cal-header">
                            @if (string.IsNullOrEmpty(worker.ProfilePhoto))
                            {
                                <div class='dt-text-avatar'>@worker.Avatar</div> @worker.FullName
                            }
                            else
                            {
                                <img class="dt-image-circle" src="@worker.ProfilePhoto" /> @worker.FullName
                            }
                        </div>
                    </th>
                }
            </tr>
        </thead>
        <!-- Daily data mini -->
        <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 dataTime = ((int)hour).ToString("D2") + ":" + (hourlyIndex * 15).ToString("D2");
                        var fullHourClass = (hour % 1) == 0 ? "full-hour-cell" : "";
                        var lineCell = "set-wh-cell-line " + fullHourClass;
                        var scrollToHour = hour == 7.50 ? "scroll-to-hour" : "";
                        hourlyIndex++;
                        if (hourlyIndex == 4)
                        {
                            hourlyIndex = 0;
                        }
                    }
                    <!-- Hours -->
                    <td class="set-wh-hours">
                        <span class="st-hours-line">@hoursFormatted </span>
                    </td>
                    @foreach (var worker in Model.Workers)
                    {
                        <td class="cell-width @scrollToHour" data-time="@dataTime" data-worker="@worker.Worker" data-dept="@worker.Department"></td>
                    }
                </tr>
            }
            <tr class="hidden">
                <td colspan="14" class="text-center">
                    <div>@Loc.YourOrderIsEmpty</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- DAILY CALENDAR TOOLS MINI -->
<div class="mini-calendar-wrapper hidden" id="mini-calendar-tools">
    <table class="table order-cal-table" id="@dailyTableToolsId">
        <!-- Daily header mini -->
        <thead>
            <tr>
                <th class="set-wh-hours"></th>
                @foreach (var tool in Model.FixedAssets)
                {
                    <th class="cell-width" data-tool="@tool.InventNum">
                        <div class="order-cal-header">
                            @tool.Name
                        </div>
                    </th>
                }
            </tr>
        </thead>
        <!-- Daily data mini -->
        <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 dataTime = ((int)hour).ToString("D2") + ":" + (hourlyToolsIndex * 15).ToString("D2");
                        var fullHourClass = (hour % 1) == 0 ? "full-hour-cell" : "";
                        var lineCell = "set-wh-cell-line " + fullHourClass;
                        var scrollToHour = hour == 7.50 ? "scroll-to-hour" : "";
                        hourlyToolsIndex++;
                        if (hourlyToolsIndex == 4)
                        {
                            hourlyToolsIndex = 0;
                        }
                    }
                    <!-- Hours -->
                    <td class="set-wh-hours">
                        <span class="st-hours-line">@hoursFormatted </span>
                    </td>
                    @foreach (var tool in Model.FixedAssets)
                    {
                        <td class="cell-width @scrollToHour" data-tool="@tool.InventNum" data-time="@dataTime"></td>
                    }
                </tr>
            }
            <tr class="hidden">
                <td colspan="14" class="text-center">
                    <div>@Loc.YourOrderIsEmpty</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>