<x-filament-panels::page>
    {{-- Transfer Status Info --}}
    @php
        $status = $this->getTransferStatus();
    @endphp

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <x-filament::section>
            <div class="flex items-center gap-3">
                <div class="p-2 bg-success-100 rounded-lg dark:bg-success-500/20">
                    <x-heroicon-o-check-circle class="w-6 h-6 text-success-600 dark:text-success-400" />
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Periode Terverifikasi</p>
                    <p class="font-semibold">{{ $status['latest_period'] }}</p>
                </div>
            </div>
        </x-filament::section>

        <x-filament::section>
            <div class="flex items-center gap-3">
                <div class="p-2 bg-primary-100 rounded-lg dark:bg-primary-500/20">
                    <x-heroicon-o-clock class="w-6 h-6 text-primary-600 dark:text-primary-400" />
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Transfer Terakhir</p>
                    <p class="font-semibold">{{ $status['latest_transfer_date'] }}</p>
                </div>
            </div>
        </x-filament::section>

        <x-filament::section>
            <div class="flex items-center gap-3">
                <div class="p-2 bg-warning-100 rounded-lg dark:bg-warning-500/20">
                    <x-heroicon-o-exclamation-triangle class="w-6 h-6 text-warning-600 dark:text-warning-400" />
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Data Pending</p>
                    <p class="font-semibold">{{ $status['pending_count'] }} record</p>
                </div>
            </div>
        </x-filament::section>
    </div>

    {{-- Filters --}}
    <x-filament::section class="mb-6">
        <x-slot name="heading">
            Filter
        </x-slot>

        {{ $this->form }}
    </x-filament::section>

    {{-- Combined Data Table --}}
    <x-filament::section>
        <x-slot name="heading">
            Log Presensi
        </x-slot>
        <x-slot name="description">
            Data gabungan: Terverifikasi (sudah transfer) + Pending (belum transfer)
        </x-slot>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Tanggal</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Pegawai</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Aksi</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Waktu</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Tipe</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Status</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Sumber</th>
                        <th class="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Dicatat</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($this->getCombinedData() as $row)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                            <td class="px-4 py-3">
                                {{ \Carbon\Carbon::parse($row['log_date'])->format('d M Y') }}
                            </td>
                            <td class="px-4 py-3 font-medium">{{ $row['user_name'] }}</td>
                            <td class="px-4 py-3">
                                <x-filament::badge
                                    :color="match($row['action_label']) {
                                        'Check In' => 'success',
                                        'Check Out' => 'info',
                                        'Dibuat' => 'success',
                                        'Diperbarui' => 'warning',
                                        'Dihapus' => 'danger',
                                        default => 'gray',
                                    }"
                                >
                                    {{ $row['action_label'] }}
                                </x-filament::badge>
                            </td>
                            <td class="px-4 py-3">{{ $row['log_time'] }}</td>
                            <td class="px-4 py-3">
                                @if($row['type_label'] !== '-')
                                    <x-filament::badge
                                        :color="match($row['type_label']) {
                                            'Kantor' => 'primary',
                                            'WFH' => 'info',
                                            'Dinas' => 'warning',
                                            default => 'gray',
                                        }"
                                    >
                                        {{ $row['type_label'] }}
                                    </x-filament::badge>
                                @else
                                    -
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if($row['status_label'] !== '-')
                                    <x-filament::badge
                                        :color="match($row['status_label']) {
                                            'Hadir' => 'success',
                                            'Terlambat' => 'warning',
                                            'Tidak Hadir' => 'danger',
                                            'Pulang Awal' => 'info',
                                            default => 'gray',
                                        }"
                                    >
                                        {{ $row['status_label'] }}
                                    </x-filament::badge>
                                @else
                                    -
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <x-filament::badge
                                    :color="$row['source'] === 'Terverifikasi' ? 'success' : 'warning'"
                                >
                                    {{ $row['source'] }}
                                </x-filament::badge>
                            </td>
                            <td class="px-4 py-3 text-gray-500 dark:text-gray-400">
                                {{ \Carbon\Carbon::parse($row['recorded_at'])->format('d M Y H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                                <x-heroicon-o-document-magnifying-glass class="w-12 h-12 mx-auto mb-2 text-gray-400" />
                                <p>Tidak ada data untuk filter yang dipilih</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-filament::section>
</x-filament-panels::page>
