@if (!count($staffHours))
    <div class="alert alert-info"  style="margin-top: 10px">
        <p>@lang("content.found") 0 @lang("content.records")</p>
    </div>
@else

    @foreach($periodUnique as $periodItem)

        <div class="col-sm-12 alert alert-success">
            <h4>@lang("content.period"): {{ digitMonthYearToReadable($periodItem) }}. Settings: Max Allowed (Monthly) - 120:00</h4>
        </div>

        <div class="clearfix"></div>

        <div class="jarviswidget jarviswidget-color-blueDark" id="wid-hours" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">

            <header>
                <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                <h2>@lang("content.monthly_staff_utilisation_report")</h2>
            </header>

            <!-- widget div-->
            <div>

                <!-- widget edit box -->
                <div class="jarviswidget-editbox">
                    <!-- This area used as dropdown edit box -->

                </div>
                <!-- end widget edit box -->

                <!-- widget content -->
                <div class="widget-body no-padding" style="min-height: 50px !important;">

                    <div class="table-responsive" style="overflow: auto;">

                        <table style="" class="table table-bordered table-hover table-standard" id="staff-table">
                            <thead>
                            <tr>
                                <th rowspan="2" style="width: 60px;">No</th>
                                <th rowspan="2" style="width: 60px;">@lang("content.picture")</th>
                                <th rowspan="2">@lang("content.staff_number")</th>
                                <th rowspan="2" style="width: 100px !important;">@lang("content.first_name")</th>
                                <th rowspan="2" style="width: 140px !important;">@lang("content.last_name")</th>
                                <th rowspan="2" style="width: 90px !important;">@lang("content.dob")</th>
                                <th rowspan="2" style="width: 90px !important;">@lang("content.doj")</th>
                                <th rowspan="2" style="width: 140px !important;">@lang("content.position")</th>
                                <th rowspan="2">@lang("content.cost_center")</th>
                                <th rowspan="2">@lang("content.base")</th>
                                <th rowspan="2">P/F</th>
                                <th colspan="3" data-center>@lang("content.hours")</th>
                                <th colspan="2" data-center style="background-color: #e6ffec">@lang("content.gap")</th>
                            </tr>
                            <tr>
                                <th>@lang("content.contracted")</th>
                                <th>@lang("content.planned")</th>
                                <th>@lang("content.actual")</th>

                                <th style="background-color: #e6ffec;">@lang("content.planned")</th>
                                <th style="background-color: #e6ffec;">@lang("content.actual")</th>
                            </tr>

                            </thead>
                            <tbody>
                            @php $j = 0 @endphp
                                @foreach($staffHours["data"] as $i => $each)
                                    @include("staff-report.layouts.monthly-hour-row", ["j" => ++$j, "each" => $each])
                                @endforeach

                                @include("staff-report.layouts.monthly-hour-row", ["each" => $staffHours["total"], "total" => true])
                            </tbody>

                        </table>
                    </div>

                </div>

            </div>

        </div>

    @endforeach
@endif