@extends('layout.main')
@section('title', 'Laporan Report Harian Per Bulan')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a>
@endsection

@section('content')
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Laporan Report Harian Per Bulan</h6>
        </div>
        <div class="panel-body">
            <form action="{{ route('admin.reports.employee.daily') }}" method="GET" class="form-horizontal">
                <div class="col-lg-4 col-lg-offset-6 form-group">
                    <label class="col-lg-3 control-label">Bulan</label>
                    <div class="col-lg-9">
                        <select name="month" id="month" class="form-control select-search">
                            @while ($date->format('Y-m-d') >= '2020-01-01')
                                <option value="{{ $date->format('Y-m') }}" @if ($input->month == $date->format('Y-m')) {{ 'selected' }} @endif>
                                    {{ $date->format('M Y') }}
                                </option>
                                @php $date->subMonth(); @endphp
                            @endwhile
                        </select>
                    </div>
                </div>
                <div class="col-lg-2"><input type="submit" name="submit" class="btn btn-default" value="Cari" /></div>
            </form>
        </div>
        <div class="panel-body">
            <!-- Desktop Table View -->
            <div class="table-responsive hidden-xs">
                <table class="table table-hover table-xxs text-size-small">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th class="text-right">Jumlah Report</th>
                            <th class="text-right">Draft</th>
                            <th class="text-right">Submitted</th>
                            <th class="text-right">Rata-Rata Durasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($employees as $employee)
                            <tr>
                                <td>{{ $employee->name }}</td>
                                <td class="text-right">{{ $employee->total_report }}</td>
                                <td class="text-right">{{ $employee->total_draft }}</td>
                                <td class="text-right">{{ $employee->total_submitted }}</td>
                                <td class="text-right">{{ is_null($employee->avg_minutes) ? '-' : round($employee->avg_minutes / 60, 2) . ' jam' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted" style="padding: 20px;">Belum ada data.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="visible-xs">
                @forelse($employees as $employee)
                    <div class="panel panel-body" style="margin-bottom: 15px;">
                        <h6 class="media-heading text-semibold" style="margin-bottom: 8px;">{{ $employee->name }}</h6>
                        <div class="text-muted" style="font-size: 12px; line-height: 1.6;">
                            <div>Jumlah Report: <strong>{{ $employee->total_report }}</strong></div>
                            <div>Draft: <strong>{{ $employee->total_draft }}</strong></div>
                            <div>Submitted: <strong>{{ $employee->total_submitted }}</strong></div>
                            <div>Rata-Rata Durasi: <strong>{{ is_null($employee->avg_minutes) ? '-' : round($employee->avg_minutes / 60, 2) . ' jam' }}</strong></div>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted" style="padding: 20px;">Belum ada data.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/form_select2.js') }}"></script>
@endsection