<x-filament-widgets::widget>
    <x-filament::section>
        {{-- Header with Month Navigation --}}
        <div class="flex items-center justify-between mb-6">
            <x-filament::icon-button
                wire:click="previousMonth"
                icon="heroicon-o-chevron-left"
                color="gray"
                size="sm"
                label="Bulan sebelumnya"
                class="hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            />

            <h3 class="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
                {{ $this->getMonthLabel() }}
            </h3>

            <x-filament::icon-button
                wire:click="nextMonth"
                icon="heroicon-o-chevron-right"
                color="gray"
                size="sm"
                label="Bulan berikutnya"
                class="hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            />
        </div>

        {{-- Statistics Summary --}}
        @php $stats = $this->getStatistics(); @endphp
        <div class="flex flex-wrap gap-2" style="margin-bottom: 1rem; margin-top: 1rem;">
            <span class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-lg bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800">
                <span class="w-2 h-2 rounded-full bg-emerald-500 mr-1.5"></span>
                {{ $stats['present'] }} Hadir
            </span>
            <span class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-lg bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                <span class="w-2 h-2 rounded-full bg-amber-500 mr-1.5"></span>
                {{ $stats['late'] }} Terlambat
            </span>
            <span class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-lg bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800">
                <span class="w-2 h-2 rounded-full bg-red-500 mr-1.5"></span>
                {{ $stats['absent'] }} Absen
            </span>
            @if($stats['business_trip'] > 0)
                <span class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-lg bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800">
                    <span class="w-2 h-2 rounded-full bg-orange-500 mr-1.5"></span>
                    {{ $stats['business_trip'] }} Dinas
                </span>
            @endif
            @if($stats['wfh'] > 0)
                <span class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded-lg bg-violet-50 dark:bg-violet-900/20 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800">
                    <span class="w-2 h-2 rounded-full bg-violet-500 mr-1.5"></span>
                    {{ $stats['wfh'] }} WFH
                </span>
            @endif
        </div>

        {{-- Calendar Grid --}}
        <div class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm bg-white dark:bg-gray-800">
            {{-- Day Headers --}}
            <div class="grid grid-cols-7 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-b border-gray-200 dark:border-gray-700">
                @foreach(['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'] as $index => $day)
                    <div class="py-3 text-center text-xs font-semibold tracking-wide uppercase {{ $index === 0 || $index === 6 ? 'text-red-500 dark:text-red-400' : 'text-gray-600 dark:text-gray-400' }}">
                        {{ $day }}
                    </div>
                @endforeach
            </div>

            {{-- Calendar Days --}}
            @foreach($this->getCalendarData() as $week)
                <div class="grid grid-cols-7 divide-x divide-gray-200 dark:divide-gray-700">
                    @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
                        <div
                            wire:click="selectDate('{{ $day['date'] }}')"
                            class="relative min-h-[85px] p-2 border-b border-gray-200 dark:border-gray-700 cursor-pointer transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 hover:shadow-inner {{ $cellBg }} {{ $day['is_today'] ? 'ring-2 ring-primary-500 dark:ring-primary-400 ring-inset shadow-sm' : '' }}"
                            @if($cellBgStyle) style="{{ $cellBgStyle }}" @endif
                        >
                            {{-- Day Number --}}
                            <div class="flex items-start justify-between mb-1">
                                <div class="font-semibold leading-none
                                    {{ !$day['is_current_month'] ? 'text-gray-300 dark:text-gray-600 text-xs' : '' }}
                                    {{ $day['holiday_name'] && $day['is_current_month'] ? 'text-pink-600 dark:text-pink-400 text-sm' : '' }}
                                    {{ $isWeekend && $day['is_current_month'] && !$day['is_today'] && !$day['holiday_name'] ? 'text-red-500 dark:text-red-400 text-[11px]' : '' }}
                                    {{ $day['is_today'] ? 'text-primary-600 dark:text-primary-400 font-bold text-base' : '' }}
                                    {{ !$isWeekend && !$day['is_today'] && $day['is_current_month'] && !$day['holiday_name'] ? 'text-gray-700 dark:text-gray-300 text-sm' : '' }}
                                ">
                                    {{ $day['day'] }}
                                </div>

                                {{-- 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')
                                            <x-heroicon-o-check-circle class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @elseif($statusInfo['icon'] === 'heroicon-o-clock')
                                            <x-heroicon-o-clock class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @elseif($statusInfo['icon'] === 'heroicon-o-x-circle')
                                            <x-heroicon-o-x-circle class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @elseif($statusInfo['icon'] === 'heroicon-o-heart')
                                            <x-heroicon-o-heart class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @elseif($statusInfo['icon'] === 'heroicon-o-calendar')
                                            <x-heroicon-o-calendar class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @elseif($statusInfo['icon'] === 'heroicon-o-document-text')
                                            <x-heroicon-o-document-text class="w-4 h-4 {{ $statusInfo['class'] }} flex-shrink-0" />
                                        @else
                                            <span class="inline-block w-2.5 h-2.5 rounded-full {{ $statusInfo['dot'] }} shadow-sm"></span>
                                        @endif
                                    @endif
                                @endif
                            </div>

                            @if($day['is_current_month'])
                                <div class="space-y-0.5 mt-1">
                                    {{-- Holiday Name (truncated) --}}
                                    @if($day['holiday_name'])
                                        <div class="text-[9px] leading-tight text-pink-600 dark:text-pink-400 font-medium truncate" title="{{ $day['holiday_name'] }}">
                                            {{ Str::limit($day['holiday_name'], 12) }}
                                        </div>
                                    @endif

                                    {{-- Weekend Label (jika tidak ada attendance) - Smaller text for weekends --}}
                                    @if($isWeekend && !$day['type'] && !$day['holiday_name'])
                                        <div class="text-[8px] leading-tight text-gray-400 dark:text-gray-500 font-normal truncate">
                                            {{ $isSunday ? 'Minggu' : 'Sabtu' }}
                                        </div>
                                    @endif

                                    {{-- Check In Time --}}
                                    @if($day['check_in'])
                                        <div class="text-[10px] leading-tight text-gray-600 dark:text-gray-400 font-medium {{ $isWeekend ? 'text-[9px]' : '' }}">
                                            {{ $day['check_in'] }}
                                        </div>
                                    @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)
                                            <div class="inline-block px-1.5 py-0.5 rounded text-[9px] font-semibold leading-tight {{ $typeBadge['class'] }} {{ $isWeekend ? 'text-[8px]' : '' }}" style="{{ $typeBadge['style'] ?? '' }}" @if($hasIncomplete) title="Lokasi belum lengkap" @endif>
                                                {{ $typeBadge['label'] }}
                                            </div>
                                        @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)
                                            <div class="inline-block px-1.5 py-0.5 rounded text-[9px] font-semibold leading-tight {{ $statusBadge['class'] }} {{ $isWeekend ? 'text-[8px]' : '' }}" style="{{ $statusBadge['style'] ?? '' }}">
                                                {{ $statusBadge['label'] }}
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>

        {{-- Legend --}}
        <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-3">Keterangan Simbol di Kalender:</p>
            <div class="space-y-3">
                {{-- Status Icons --}}
                <div class="flex flex-wrap items-center gap-2.5">
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg bg-pink-50 dark:bg-pink-900/20 text-pink-700 dark:text-pink-300 border border-pink-200 dark:border-pink-800">
                        <x-heroicon-o-star class="w-3.5 h-3.5 text-pink-500 dark:text-pink-400" />
                        Libur (Holiday)
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg bg-slate-100 dark:bg-slate-800/60 text-slate-700 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
                        <x-heroicon-o-sun class="w-3.5 h-3.5 text-slate-600 dark:text-slate-400" />
                        Weekend
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.3); color: rgb(22, 163, 74);">
                        <x-heroicon-o-check-circle class="w-3.5 h-3.5" style="color: rgb(34, 197, 94);" />
                        Hadir
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.3); color: rgb(217, 119, 6);">
                        <x-heroicon-o-clock class="w-3.5 h-3.5" style="color: rgb(251, 191, 36);" />
                        Terlambat
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: rgb(220, 38, 38);">
                        <x-heroicon-o-x-circle class="w-3.5 h-3.5" style="color: rgb(239, 68, 68);" />
                        Absen
                    </span>
                </div>
                
                {{-- Type Badges --}}
                <div class="flex flex-wrap items-center gap-2.5">
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.4); color: rgb(37, 99, 235);">
                        <span class="w-2.5 h-2.5 rounded-full" style="background-color: rgb(59, 130, 246);"></span>
                        Kantor (KTR)
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); color: rgb(124, 58, 237);">
                        <span class="w-2.5 h-2.5 rounded-full" style="background-color: rgb(139, 92, 246);"></span>
                        WFH
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(249, 115, 22, 0.2); border-color: rgba(249, 115, 22, 0.4); color: rgb(234, 88, 12);">
                        <span class="w-2.5 h-2.5 rounded-full" style="background-color: rgb(249, 115, 22);"></span>
                        Dinas (DNS)
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.4); color: rgb(219, 39, 119);">
                        <x-heroicon-o-heart class="w-3.5 h-3.5" style="color: rgb(236, 72, 153);" />
                        Sakit
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(6, 182, 212, 0.2); border-color: rgba(6, 182, 212, 0.4); color: rgb(8, 145, 178);">
                        <x-heroicon-o-document-text class="w-3.5 h-3.5" style="color: rgb(6, 182, 212);" />
                        Izin
                    </span>
                    <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg border" style="background-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.4); color: rgb(37, 99, 235);">
                        <x-heroicon-o-calendar class="w-3.5 h-3.5" style="color: rgb(59, 130, 246);" />
                        Cuti
                    </span>
                </div>
            </div>
        </div>

        {{-- Backdate Info --}}
        @if($this->canBackdate())
            <div class="mt-2 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                <x-heroicon-o-pencil-square class="w-3.5 h-3.5" />
                <span>Mode Edit Aktif - Klik tanggal untuk melihat/edit detail</span>
            </div>
        @endif

        {{-- Modal Detail --}}
        @if($selectedDate)
            <div class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
                <div class="flex min-h-full items-center justify-center p-4">
                    {{-- Backdrop --}}
                    <div class="fixed inset-0 bg-gray-900/60 transition-opacity" wire:click="closeDetail"></div>

                    {{-- Modal Content --}}
                    <div class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl">
                        {{-- Header --}}
                        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $selectedDate['formatted_date'] }}
                                </h3>
                                @if($selectedDate['is_today'])
                                    <p class="text-xs text-primary-600 dark:text-primary-400">Hari Ini</p>
                                @elseif($selectedDate['is_holiday'])
                                    <p class="text-xs text-pink-600 dark:text-pink-400">{{ $selectedDate['holiday_name'] }}</p>
                                @elseif($selectedDate['is_weekend'])
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Hari Libur</p>
                                @endif
                            </div>
                            <button wire:click="closeDetail" class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                <x-heroicon-o-x-mark class="w-5 h-5" />
                            </button>
                        </div>

                        {{-- Body --}}
                        <div class="p-4">
                            @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)
                                    <div class="mb-3 p-2.5 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                                        <div class="flex items-center gap-2 text-red-600 dark:text-red-400">
                                            <x-heroicon-o-exclamation-triangle class="w-4 h-4 shrink-0" />
                                            <span class="text-xs font-medium">Lokasi dinas belum lengkap</span>
                                        </div>
                                    </div>
                                @endif

                                {{-- Status & Type --}}
                                <div class="flex items-center gap-2 mb-4">
                                    <x-heroicon-o-check-circle class="w-5 h-5 text-emerald-500" />
                                    <div>
                                        <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ $statusLabel }}</span>
                                        <span class="text-xs text-gray-500 dark:text-gray-400 ml-1">{{ $typeLabel }}</span>
                                    </div>
                                </div>

                                {{-- Time Info --}}
                                <div class="grid grid-cols-2 gap-3 mb-3">
                                    <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
                                        <div class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Check In</div>
                                        <div class="text-base font-bold text-gray-900 dark:text-white">
                                            {{ $att['check_in_time'] ?? '--:--' }}
                                        </div>
                                    </div>
                                    <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
                                        <div class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Check Out</div>
                                        <div class="text-base font-bold text-gray-900 dark:text-white">
                                            {{ $att['check_out_time'] ?? '--:--' }}
                                        </div>
                                    </div>
                                </div>

                                {{-- Duration - Only show if positive --}}
                                @if($att['work_duration'] && $att['work_duration'] > 0)
                                    <div class="p-3 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg text-center mb-3">
                                        <div class="text-[10px] uppercase tracking-wider text-emerald-600 dark:text-emerald-400 mb-1">Durasi Kerja</div>
                                        <div class="text-lg font-bold text-emerald-700 dark:text-emerald-400">
                                            {{ floor($att['work_duration'] / 60) }}j {{ $att['work_duration'] % 60 }}m
                                        </div>
                                    </div>
                                @endif

                                {{-- Map --}}
                                @if($selectedDate['has_location'] ?? false)
                                    <div class="mb-3">
                                        <div class="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1.5">Lokasi</div>
                                        <div class="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
                                            <x-leaflet-map
                                                :id="'map-' . str_replace('-', '', $selectedDate['date'])"
                                                :markers="$selectedDate['map_markers'] ?? []"
                                                :offices="$selectedDate['map_offices'] ?? []"
                                                height="120px"
                                                :zoom="15"
                                                :showRadius="true"
                                                :fitBounds="true"
                                            />
                                        </div>
                                        <div class="mt-1.5 flex items-center justify-center gap-3 text-[10px] text-gray-400 dark:text-gray-500">
                                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> Kantor</span>
                                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-blue-500"></span> Check In</span>
                                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-500"></span> Check Out</span>
                                        </div>
                                    </div>
                                @endif

                                {{-- View Detail Button --}}
                                <a href="{{ route('filament.employee.resources.my-attendances.view', $att['id']) }}"
                                   class="flex items-center justify-center gap-2 w-full py-2.5 text-xs font-semibold text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 rounded-lg transition-colors">
                                    <x-heroicon-o-eye class="w-4 h-4" />
                                    Lihat Detail Lengkap
                                </a>

                            @elseif($selectedDate['is_weekend'])
                                <div class="py-8 text-center">
                                    <x-heroicon-o-sun class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Hari Libur</p>
                                </div>
                            @elseif($selectedDate['is_holiday'])
                                <div class="py-8 text-center">
                                    <x-heroicon-o-star class="w-12 h-12 text-pink-300 dark:text-pink-600 mx-auto mb-3" />
                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Hari Libur</p>
                                    <p class="text-xs text-pink-500 dark:text-pink-400">{{ $selectedDate['holiday_name'] }}</p>
                                </div>
                            @elseif($selectedDate['is_future'])
                                <div class="py-8 text-center">
                                    <x-heroicon-o-calendar class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Tanggal Mendatang</p>
                                </div>
                            @else
                                <div class="py-8 text-center">
                                    <x-heroicon-o-x-circle class="w-12 h-12 text-red-300 dark:text-red-600 mx-auto mb-3" />
                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Tidak Ada Data</p>
                                </div>
                            @endif
                        </div>

                        {{-- Footer --}}
                        <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                            <button wire:click="closeDetail" class="w-full py-2 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors">
                                Tutup
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
