@extends('layouts.app')
@section('title', 'Rekap Kehadiran Saya')
@section('content')
<div>
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Rekap Kehadiran Saya</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Riwayat kehadiran harian Anda sebagai guru</p>
    </div>

    {{-- Filter Bulan --}}
    <form method="GET" class="flex items-center gap-3 mb-6">
        <div class="flex items-center gap-2">
            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Bulan:</label>
            <input type="month" name="month" value="{{ request('month', now()->format('Y-m')) }}"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        </div>
        <button type="submit"
            class="px-4 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Tampilkan</button>
    </form>

    {{-- Summary Bulan --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
        @foreach([['label'=>'Hadir','key'=>'present','color'=>'green'],['label'=>'Terlambat','key'=>'late','color'=>'yellow'],['label'=>'Absen','key'=>'absent','color'=>'red'],['label'=>'Izin','key'=>'permission','color'=>'blue'],['label'=>'Sakit','key'=>'sick','color'=>'purple']]
        as $stat)
        <div class="p-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 text-center">
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $summary[$stat['key']] ?? 0 }}</p>
            <x-badge :color="$stat['color']" class="mt-1">{{ $stat['label'] }}</x-badge>
        </div>
        @endforeach
    </div>

    {{-- Progress Kehadiran --}}
    @php $pct = $summary['total'] > 0 ? round(($summary['present'] + $summary['late']) / $summary['total'] * 100) : 0;
    @endphp
    <div class="p-4 mb-6 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Persentase Kehadiran Bulan Ini</span>
            <span
                class="text-sm font-bold {{ $pct >= 80 ? 'text-green-600' : ($pct >= 60 ? 'text-yellow-600' : 'text-red-600') }}">{{
                $pct }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
            <div class="h-2.5 rounded-full {{ $pct >= 80 ? 'bg-green-500' : ($pct >= 60 ? 'bg-yellow-500' : 'bg-red-500') }}"
                style="width: {{ $pct }}%"></div>
        </div>
    </div>

    {{-- Tabel Detail --}}
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Tanggal</th>
                <th class="px-4 py-3">Hari</th>
                <th class="px-4 py-3">Check In</th>
                <th class="px-4 py-3">Check Out</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Metode</th>
                <th class="px-4 py-3">Catatan</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($attendances ?? [] as $att)
                @php
                $statusColors = ['present' => 'green', 'late' => 'yellow', 'absent' => 'red', 'permission' => 'blue',
                'sick' => 'purple', 'out_of_office' => 'gray'];
                $statusValue = $att->status?->value ?? (string) $att->status;
                $statusLabel = $att->status?->label() ?? ucfirst(str_replace('_', ' ', $statusValue));
                @endphp
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-gray-900 dark:text-white font-medium">{{ $att->date->format('d M Y') }}
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $att->date->translatedFormat('l') }}</td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{ $att->check_in_time ?
                        \Illuminate\Support\Carbon::parse((string) $att->check_in_time)->format('H:i') : '–' }}</td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{ $att->check_out_time ?
                        \Illuminate\Support\Carbon::parse((string) $att->check_out_time)->format('H:i') : '–' }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$statusColors[$statusValue] ?? 'gray'">{{ $statusLabel }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500">{{ $att->is_auto ? 'Auto' : 'Manual' }}</td>
                    <td class="px-4 py-3 text-xs text-gray-500 max-w-[120px] truncate">{{ $att->notes ?? '–' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-400">Tidak ada data kehadiran untuk periode
                        ini</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($attendances) && method_exists($attendances, 'hasPages') && $attendances->hasPages())
            <x-slot:pagination>{{ $attendances->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>
</div>
@endsection