{{-- Header with Month Navigation --}}

{{ $this->getMonthLabel() }}

{{-- Statistics Summary --}} @php $stats = $this->getStatistics(); @endphp
{{ $stats['present'] }} Hadir {{ $stats['late'] }} Terlambat {{ $stats['absent'] }} Absen @if($stats['business_trip'] > 0) {{ $stats['business_trip'] }} Dinas @endif @if($stats['wfh'] > 0) {{ $stats['wfh'] }} WFH @endif
{{-- Calendar Grid --}}
{{-- Day Headers --}}
@foreach(['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'] as $index => $day)
{{ $day }}
@endforeach
{{-- Calendar Days --}} @foreach($this->getCalendarData() as $week)
@foreach($week as $day) @php $isWeekend = $day['is_weekend']; // Determine if Sunday (0) or Saturday (6) using day number modulo 7 // In the calendar, Sunday is first column (index 0), Saturday is last (index 6) $dateObj = \Carbon\Carbon::parse($day['date']); $dayOfWeek = $dateObj->dayOfWeek; // 0 = Sunday, 6 = Saturday $isSunday = $dayOfWeek === 0; $isSaturday = $dayOfWeek === 6; // Determine status background style (menggunakan palette common) $statusBgStyle = ''; if (!$day['is_future'] && $day['status'] && !in_array($day['status'], ['other_month', 'weekend', 'holiday', 'none'])) { $statusBgStyle = match($day['status']) { 'present' => 'background-color: rgba(34, 197, 94, 0.2);', // Green-500 'late' => 'background-color: rgba(251, 191, 36, 0.2);', // Yellow-400 'absent' => 'background-color: rgba(239, 68, 68, 0.2);', // Red-500 'sick' => 'background-color: rgba(236, 72, 153, 0.2);', // Pink-500 'leave' => 'background-color: rgba(59, 130, 246, 0.2);', // Blue-500 'permission' => 'background-color: rgba(6, 182, 212, 0.2);', // Cyan-500 default => '', }; } // Determine type background style (lebih kuat jika ada type) $typeBgStyle = ''; if ($day['type']) { $typeBgStyle = match($day['type']) { 'office' => 'background-color: rgba(59, 130, 246, 0.25);', // Blue-500 'wfh' => 'background-color: rgba(139, 92, 246, 0.25);', // Violet-500 'business_trip' => 'background-color: rgba(249, 115, 22, 0.25);', // Orange-500 default => '', }; } // Background: semua mengikuti tema (abu gelap untuk dark mode) $cellBg = 'bg-white dark:bg-gray-800'; $cellBgStyle = ''; if (!$day['is_current_month']) { $cellBg = 'bg-gray-50 dark:bg-gray-900'; $cellBgStyle = 'opacity: 0.6;'; } elseif ($day['holiday_name']) { $cellBgStyle = 'background-color: rgba(244, 114, 182, 0.15);'; } elseif ($isWeekend && !$day['type']) { $cellBgStyle = 'background-color: rgba(148, 163, 184, 0.3);'; } elseif ($day['is_today']) { $cellBgStyle = 'background-color: rgba(99, 102, 241, 0.1);'; } // Combine status and type background style if ($typeBgStyle) { $cellBgStyle = $typeBgStyle . ' ' . $cellBgStyle; } elseif ($statusBgStyle) { $cellBgStyle = $statusBgStyle . ' ' . $cellBgStyle; } @endphp
{{-- Day Number --}}
{{ $day['day'] }}
{{-- Status Icon --}} @if(!$day['is_future'] && $day['status'] && !in_array($day['status'], ['other_month', 'weekend', 'holiday', 'none'])) @php $statusInfo = match($day['status']) { 'present' => ['icon' => 'heroicon-o-check-circle', 'class' => 'text-green-600 dark:text-green-400', 'dot' => 'bg-green-500', 'color' => '#22C55E'], 'late' => ['icon' => 'heroicon-o-clock', 'class' => 'text-yellow-600 dark:text-yellow-400', 'dot' => 'bg-yellow-500', 'color' => '#FBBF24'], 'absent' => ['icon' => 'heroicon-o-x-circle', 'class' => 'text-red-600 dark:text-red-400', 'dot' => 'bg-red-500', 'color' => '#EF4444'], 'sick' => ['icon' => 'heroicon-o-heart', 'class' => 'text-pink-600 dark:text-pink-400', 'dot' => 'bg-pink-500', 'color' => '#EC4899'], 'leave' => ['icon' => 'heroicon-o-calendar', 'class' => 'text-blue-600 dark:text-blue-400', 'dot' => 'bg-blue-500', 'color' => '#3B82F6'], 'permission' => ['icon' => 'heroicon-o-document-text', 'class' => 'text-cyan-600 dark:text-cyan-400', 'dot' => 'bg-cyan-500', 'color' => '#06B6D4'], default => null, }; @endphp @if($statusInfo) @if($statusInfo['icon'] === 'heroicon-o-check-circle') @elseif($statusInfo['icon'] === 'heroicon-o-clock') @elseif($statusInfo['icon'] === 'heroicon-o-x-circle') @elseif($statusInfo['icon'] === 'heroicon-o-heart') @elseif($statusInfo['icon'] === 'heroicon-o-calendar') @elseif($statusInfo['icon'] === 'heroicon-o-document-text') @else @endif @endif @endif
@if($day['is_current_month'])
{{-- Holiday Name (truncated) --}} @if($day['holiday_name'])
{{ Str::limit($day['holiday_name'], 12) }}
@endif {{-- Weekend Label (jika tidak ada attendance) - Smaller text for weekends --}} @if($isWeekend && !$day['type'] && !$day['holiday_name'])
{{ $isSunday ? 'Minggu' : 'Sabtu' }}
@endif {{-- Check In Time --}} @if($day['check_in'])
{{ $day['check_in'] }}
@endif {{-- Type Badge (KTR/WFH/DNS) --}} @if($day['type']) @php $hasIncomplete = $day['has_incomplete_location'] ?? false; $typeBadge = match($day['type']) { 'office' => [ 'label' => 'KTR', 'class' => 'text-blue-700 dark:text-blue-300 border border-blue-300 dark:border-blue-700', 'style' => 'background-color: rgba(59, 130, 246, 0.2);' ], 'wfh' => [ 'label' => 'WFH', 'class' => 'text-violet-700 dark:text-violet-300 border border-violet-300 dark:border-violet-700', 'style' => 'background-color: rgba(139, 92, 246, 0.2);' ], 'business_trip' => $hasIncomplete ? [ 'label' => 'DNS!', 'class' => 'text-red-700 dark:text-red-300 border border-red-300 dark:border-red-700 animate-pulse', 'style' => 'background-color: rgba(239, 68, 68, 0.2);' ] : [ 'label' => 'DNS', 'class' => 'text-orange-700 dark:text-orange-300 border border-orange-300 dark:border-orange-700', 'style' => 'background-color: rgba(249, 115, 22, 0.2);' ], default => null, }; @endphp @if($typeBadge)
{{ $typeBadge['label'] }}
@endif @endif {{-- Status Badge (Sakit/Izin/Cuti) --}} @if(!$day['is_future'] && $day['status'] && in_array($day['status'], ['sick', 'permission', 'leave']) && !$day['type']) @php $statusBadge = match($day['status']) { 'sick' => [ 'label' => 'Sakit', 'class' => 'text-pink-700 dark:text-pink-300 border border-pink-300 dark:border-pink-700', 'style' => 'background-color: rgba(236, 72, 153, 0.2);' ], 'permission' => [ 'label' => 'Izin', 'class' => 'text-cyan-700 dark:text-cyan-300 border border-cyan-300 dark:border-cyan-700', 'style' => 'background-color: rgba(6, 182, 212, 0.2);' ], 'leave' => [ 'label' => 'Cuti', 'class' => 'text-blue-700 dark:text-blue-300 border border-blue-300 dark:border-blue-700', 'style' => 'background-color: rgba(59, 130, 246, 0.2);' ], default => null, }; @endphp @if($statusBadge)
{{ $statusBadge['label'] }}
@endif @endif
@endif
@endforeach
@endforeach
{{-- Legend --}}

Keterangan Simbol di Kalender:

{{-- Status Icons --}}
Libur (Holiday) Weekend Hadir Terlambat Absen
{{-- Type Badges --}}
Kantor (KTR) WFH Dinas (DNS) Sakit Izin Cuti
{{-- Backdate Info --}} @if($this->canBackdate())
Mode Edit Aktif - Klik tanggal untuk melihat/edit detail
@endif {{-- Modal Detail --}} @if($selectedDate)
{{-- Backdrop --}}
{{-- Modal Content --}}
{{-- Header --}}

{{ $selectedDate['formatted_date'] }}

@if($selectedDate['is_today'])

Hari Ini

@elseif($selectedDate['is_holiday'])

{{ $selectedDate['holiday_name'] }}

@elseif($selectedDate['is_weekend'])

Hari Libur

@endif
{{-- Body --}}
@if($selectedDate['attendance']) @php $att = $selectedDate['attendance']; $statusLabel = match($att['status']) { 'present' => 'Hadir', 'late' => 'Terlambat', 'absent' => 'Tidak Hadir', 'sick' => 'Sakit', 'leave' => 'Cuti', 'permission' => 'Izin', default => ucfirst($att['status']), }; $typeLabel = match($att['type']) { 'office' => 'Kantor', 'wfh' => 'WFH', 'business_trip' => 'Dinas', default => $att['type'], }; @endphp {{-- Warning for incomplete location --}} @if($selectedDate['has_incomplete_location'] ?? false)
Lokasi dinas belum lengkap
@endif {{-- Status & Type --}}
{{ $statusLabel }} {{ $typeLabel }}
{{-- Time Info --}}
Check In
{{ $att['check_in_time'] ?? '--:--' }}
Check Out
{{ $att['check_out_time'] ?? '--:--' }}
{{-- Duration - Only show if positive --}} @if($att['work_duration'] && $att['work_duration'] > 0)
Durasi Kerja
{{ floor($att['work_duration'] / 60) }}j {{ $att['work_duration'] % 60 }}m
@endif {{-- Map --}} @if($selectedDate['has_location'] ?? false)
Lokasi
Kantor Check In Check Out
@endif {{-- View Detail Button --}} Lihat Detail Lengkap @elseif($selectedDate['is_weekend'])

Hari Libur

@elseif($selectedDate['is_holiday'])

Hari Libur

{{ $selectedDate['holiday_name'] }}

@elseif($selectedDate['is_future'])

Tanggal Mendatang

@else

Tidak Ada Data

@endif
{{-- Footer --}}
@endif