@extends('simaju.layouts.main')
@section('title', 'Rekap Absensi Guru')
@section('page-title', 'Rekap Absensi Guru')
@section('page-subtitle', 'Rekap dan cetak absensi guru')

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 mb-4 sm:mb-6">
    <div class="p-4 sm:p-6 border-b border-gray-100">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div>
                <h2 class="text-lg sm:text-xl font-heading font-bold text-gray-800">Rekap Absensi Guru</h2>
                <p class="text-xs sm:text-sm text-gray-500 mt-1">Total: {{ $absensis->count() }} record</p>
            </div>
            <div class="flex items-center gap-2 w-full sm:w-auto">
                <a href="{{ route('simaju.absensi-guru.rekap-pdf', request()->query()) }}"
                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm">
                    <i class="fas fa-file-pdf text-xs sm:text-sm"></i>
                    <span>PDF</span>
                </a>
                <button onclick="window.print()" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm print:hidden">
                    <i class="fas fa-print text-xs sm:text-sm"></i>
                    <span>Cetak</span>
                </button>
            </div>
        </div>

        <!-- Filters -->
        <form method="GET" class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 print:hidden">
            <select name="bulan" class="px-2 sm:px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-transparent">
                @for($i = 1; $i <= 12; $i++)
                    <option value="{{ $i }}" {{ $bulan == $i ? 'selected' : '' }}>
                        {{ DateTime::createFromFormat('!m', $i)->format('M') }}
                    </option>
                @endfor
            </select>

            <select name="tahun" class="px-2 sm:px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-transparent">
                @for($i = date('Y') - 2; $i <= date('Y') + 1; $i++)
                    <option value="{{ $i }}" {{ $tahun == $i ? 'selected' : '' }}>{{ $i }}</option>
                @endfor
            </select>

            <select name="guru_id" class="px-2 sm:px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary focus:border-transparent">
                <option value="">Semua</option>
                @foreach($gurus as $guru)
                    <option value="{{ $guru->id }}" {{ $guruId == $guru->id ? 'selected' : '' }}>{{ $guru->nama }}</option>
                @endforeach
            </select>

            <button type="submit" class="px-3 sm:px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-700 transition-colors text-sm">
                <i class="fas fa-filter mr-1"></i>Filter
            </button>
        </form>

        <!-- Stats Summary -->
        <div class="mt-4 sm:mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2 sm:gap-4">
            <div class="bg-green-50 rounded-lg p-2 sm:p-4 border border-green-200 text-center">
                <p class="text-xs sm:text-sm font-medium text-green-700">Hadir</p>
                <p class="text-lg sm:text-2xl font-bold text-green-800 mt-1">{{ $stats['hadir'] ?? 0 }}</p>
            </div>
            <div class="bg-yellow-50 rounded-lg p-2 sm:p-4 border border-yellow-200 text-center">
                <p class="text-xs sm:text-sm font-medium text-yellow-700">Terlambat</p>
                <p class="text-lg sm:text-2xl font-bold text-yellow-800 mt-1">{{ $stats['terlambat'] ?? 0 }}</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-2 sm:p-4 border border-blue-200 text-center">
                <p class="text-xs sm:text-sm font-medium text-blue-700">Izin</p>
                <p class="text-lg sm:text-2xl font-bold text-blue-800 mt-1">{{ $stats['izin'] ?? 0 }}</p>
            </div>
            <div class="bg-red-50 rounded-lg p-2 sm:p-4 border border-red-200 text-center">
                <p class="text-xs sm:text-sm font-medium text-red-700">Alpha</p>
                <p class="text-lg sm:text-2xl font-bold text-red-800 mt-1">{{ $stats['alpha'] ?? 0 }}</p>
            </div>
                    <div class="bg-emerald-50 rounded-lg p-2 sm:p-4 border border-emerald-200 text-center">
            <p class="text-xs sm:text-sm font-medium text-emerald-700">
                Kehadiran
            </p>
        
            <p class="text-lg sm:text-2xl font-bold text-emerald-800 mt-1">
                {{ number_format($persentaseKeseluruhan ?? 0, 2, ',', '.') }}%
            </p>
        </div>
        </div>
    </div>
    
    {{-- =========================================================
     REKAP PERSENTASE KEHADIRAN PER GURU
    ========================================================= --}}
    
    <div class="border-t border-gray-100 p-4 sm:p-6">
    
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-lg font-bold text-gray-800">
                    Persentase Kehadiran Guru
                </h3>
    
                <p class="text-sm text-gray-500 mt-1">
                    Rekap kehadiran bulan
                    {{ DateTime::createFromFormat('!m', $bulan)->format('F') }}
                    {{ $tahun }}
                </p>
            </div>
        </div>
    
        <div class="overflow-x-auto">
            <table class="w-full min-w-[900px]">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
    
                        <th class="px-3 py-3 text-left text-xs font-bold text-gray-500 uppercase">
                            No
                        </th>
    
                        <th class="px-3 py-3 text-left text-xs font-bold text-gray-500 uppercase">
                            Nama Guru
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Hadir
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Terlambat
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Izin
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Sakit
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Alpha
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Bolos
                        </th>
    
                        <th class="px-3 py-3 text-center text-xs font-bold text-gray-500 uppercase">
                            Kehadiran
                        </th>
    
                    </tr>
                </thead>
    
                <tbody class="divide-y divide-gray-100 bg-white">
    
                    @forelse($rekapGuru ?? [] as $index => $data)
    
                        <tr class="hover:bg-gray-50 transition-colors">
    
                            <td class="px-3 py-3 text-sm text-gray-700">
                                {{ $index + 1 }}
                            </td>
    
                            <td class="px-3 py-3">
    
                                <p class="text-sm font-semibold text-gray-900">
                                    {{ $data['nama'] ?? '-' }}
                                </p>
    
                                <p class="text-xs text-gray-500">
                                    {{ $data['nip'] ?? '-' }}
                                </p>
    
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-green-700">
                                {{ $data['hadir'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-yellow-700">
                                {{ $data['terlambat'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-blue-700">
                                {{ $data['izin'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-purple-700">
                                {{ $data['sakit'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-red-700">
                                {{ $data['alpha'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center text-sm font-semibold text-red-700">
                                {{ $data['bolos'] ?? 0 }}
                            </td>
    
                            <td class="px-3 py-3 text-center">
    
                                <span class="inline-flex items-center px-3 py-1 rounded-full
                                             bg-emerald-100 text-emerald-800
                                             text-sm font-bold">
    
                                    {{ number_format($data['persentase'] ?? 0, 2, ',', '.') }}%
    
                                </span>
    
                            </td>
    
                        </tr>
    
                    @empty
    
                        <tr>
                            <td colspan="9" class="px-4 py-8 text-center text-gray-500">
                                Belum ada data persentase kehadiran guru.
                            </td>
                        </tr>
    
                    @endforelse
    
                </tbody>
            </table>
        </div>
    
    </div>

    <div class="overflow-x-auto -mx-4 sm:mx-0">
        <table class="w-full min-w-[760px]">
            <thead class="bg-gray-50 border-b border-gray-100">
                <tr>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">No</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Tanggal</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Guru</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Masuk</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Pulang</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($absensis as $index => $absensi)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-900">{{ $index + 1 }}</td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-900">
                        {{ \Carbon\Carbon::parse($absensi->tanggal)->format('d/m/Y') }}
                    </td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3">
                        <p class="text-xs sm:text-sm font-medium text-gray-900 truncate max-w-[100px] sm:max-w-none">{{ $absensi->guru->nama ?? '-' }}</p>
                        <p class="text-xs text-gray-500">{{ $absensi->guru->nip ?? '-' }}</p>
                    </td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-900">
                        {{ $absensi->jam_masuk ? \Carbon\Carbon::parse($absensi->jam_masuk)->format('H:i') : '-' }}
                    </td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-900">
                        {{ $absensi->jam_pulang ? \Carbon\Carbon::parse($absensi->jam_pulang)->format('H:i') : '-' }}
                    </td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3">
                        @php
                            $statusBadge = [
                                'hadir' => 'bg-green-100 text-green-800',
                                'terlambat' => 'bg-yellow-100 text-yellow-800',
                                'izin' => 'bg-blue-100 text-blue-800',
                                'sakit' => 'bg-purple-100 text-purple-800',
                                'alpha' => 'bg-red-100 text-red-800',
                                'bolos' => 'bg-red-100 text-red-800',
                            ];
                        @endphp
                        <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $statusBadge[$absensi->status_masuk] ?? 'bg-gray-100 text-gray-800' }}">
                            {{ ucfirst($absensi->status_masuk) }}
                        </span>

                        @if($absensi->status_pulang)
                            <span class="mt-1 inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium bg-indigo-100 text-indigo-800">
                                {{ ucfirst($absensi->status_pulang) }}
                            </span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 sm:py-12 text-center">
                        <div class="flex flex-col items-center gap-2">
                            <i class="fas fa-inbox text-3xl sm:text-4xl text-gray-300"></i>
                            <p class="text-gray-500 text-sm">Belum ada data absensi</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<style>
    @media print {
        body * { visibility: hidden; }
        .bg-white, .bg-white * { visibility: visible; }
        .bg-white { position: absolute; left: 0; top: 0; width: 100%; }
        .print\:hidden { display: none !important; }
        @page { size: landscape; margin: 1cm; }
    }
</style>
@endsection