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

@{
    var hourlyIndex = 0;
    var hourlyToolsIndex = 0;
    var weeklyIndex = 0;
    var weeklyToolsIndex = 0;
    var monthlyIndex = 0;
    var monthlyToolsIndex = 0;
    var dailyTableId = "daily-table";
    var dailyTableToolsId = "daily-table-tools";
    var weeklyTableId = "weekly-table";
    var weeklyTableToolsId = "weekly-table-tools";
    var monthlyTableId = "monthly-table";
    var monthlyTableToolsId = "monthly-table-tools";
}

<div id="calendarTooltipHelper" hidden></div>
<div id="tooltipCreateHelper" class="createT tooltip fade top in" role="tooltip" style="display: none;">
    <div class="tooltip-arrow arrow-create"></div>
    <div class="tooltip-inner"></div>
</div>

<!-- DAILY CALENDAR -->
<div class="calendar-wrapper hidden" id="daily-calendar-body">
    <table class="table order-cal-table" id="@dailyTableId">
        <!-- Daily header -->
        <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 -->
        <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.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- DAILY CALENDAR TOOLS -->
<div class="calendar-wrapper hidden" id="daily-calendar-body-tools">
    <table class="table order-cal-table" id="@dailyTableToolsId">
        <!-- Daily header -->
        <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 -->
        <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.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- WEEKLY CALENDAR -->
<div class="calendar-wrapper hidden" id="weekly-calendar-body">
    <table class="table order-cal-table" id="@weeklyTableId">
        <thead>
            <tr>
                <th class="cell-width">@Loc.LastnameAndFirstname</th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
            </tr>
        </thead>
        <tbody class="work-hours">
            @foreach (var worker in Model.Workers)
            {
                <tr>
                    <td class="cell-width">
                        <div class="order-cal-header">
                            <h3 class="panel-title">
                                <a class="text-success collapsed"
                                   id="collapse-weekly-@weeklyIndex"
                                   role="button"
                                   data-toggle="collapse"
                                   onclick="toggleCalItems(@weeklyIndex, '@CalendarTypes.Weekly', '@weeklyTableId')">
                                </a>
                            </h3>
                            @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>
                    </td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department"><div class="collapse-items collapse-helper"></div></td>
                </tr>
                weeklyIndex++;
            }
            <tr class="hidden">
                <td colspan="14" class="text-left">
                    <div>@Loc.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- WEEKLY CALENDAR TOOLS -->
<div class="calendar-wrapper hidden" id="weekly-calendar-body-tools">
    <table class="table order-cal-table" id="@weeklyTableToolsId">
        <thead>
            <tr>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
                <th class="cell-width"></th>
            </tr>
        </thead>
        <tbody class="work-hours">
            @foreach (var tool in Model.FixedAssets)
            {
                <tr>
                    <td class="cell-width">
                        <div class="order-cal-header">
                            <h3 class="panel-title">
                                <a class="text-success collapsed"
                                   id="collapse-weekly-tools-@weeklyToolsIndex"
                                   role="button"
                                   data-toggle="collapse"
                                   onclick="toggleCalItems(@weeklyToolsIndex, '@CalendarTypes.WeeklyTools', '@weeklyTableToolsId')">
                                </a>
                            </h3>
                            @tool.Name.Trim()
                        </div>
                    </td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                    <td class="cell-width" data-tool="@tool.InventNum"><div class="collapse-items collapse-helper"></div></td>
                </tr>
                weeklyToolsIndex++;
            }
            <tr class="hidden">
                <td colspan="14" class="text-left">
                    <div>@Loc.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>


<!-- MONTHLY CALENDAR -->
<div class="calendar-wrapper hidden" id="monthly-calendar-body">
    <table class="table order-cal-table" id="@monthlyTableId">
        <thead>
            <tr>
                <th class="cell-width"></th>
            </tr>
        </thead>
        <tbody class="work-hours">
            @foreach (var worker in Model.Workers)
            {
                <tr>
                    <td class="cell-width" data-worker="@worker.Worker" data-dept="@worker.Department">
                        <div class="order-cal-header">
                            <h3 class="panel-title">
                                <a class="text-success collapsed"
                                   id="collapse-monthly-@monthlyIndex"
                                   role="button"
                                   data-toggle="collapse"
                                   onclick="toggleCalItems(@monthlyIndex, '@CalendarTypes.Monthly', '@monthlyTableId')">
                                </a>
                            </h3>
                            @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>
                    </td>
                </tr>
                monthlyIndex++;
            }

            <tr class="hidden">
                <td colspan="14" class="text-left">
                    <div>@Loc.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- MONTHLY CALENDAR TOOLS -->
<div class="calendar-wrapper hidden" id="monthly-calendar-body-tools">
    <table class="table order-cal-table" id="@monthlyTableToolsId">
        <thead>
            <tr>
                <th class="cell-width">@Loc.LastnameAndFirstname</th>
            </tr>
        </thead>
        <tbody class="work-hours">
            @foreach (var tool in Model.FixedAssets)
            {
                <tr>
                    <td class="cell-width" data-tool="@tool.InventNum">
                        <div class="order-cal-header">
                            <h3 class="panel-title">
                                <a class="text-success collapsed"
                                   id="collapse-monthly-tools-@monthlyToolsIndex"
                                   role="button"
                                   data-toggle="collapse"
                                   onclick="toggleCalItems(@monthlyToolsIndex, '@CalendarTypes.MonthlyTools', '@monthlyTableToolsId')">
                                </a>
                            </h3>
                            @tool.Name.Trim()
                        </div>
                    </td>
                </tr>
                monthlyToolsIndex++;
            }

            <tr class="hidden">
                <td colspan="14" class="text-left">
                    <div>@Loc.NoResultFound</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

