@extends('simaju.layouts.main')
@section('title', 'Absensi Guru Izin')
@section('page-title', 'Absensi Guru - Izin')
@section('page-subtitle', 'Data absensi guru yang izin')

@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">Data Absensi Izin</h2>
                <p class="text-xs sm:text-sm text-gray-500 mt-1">Total: {{ $totalIzin }} record</p>
            </div>
        </div>

        <form method="GET" class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3">
            <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">
                @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">
                @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">
                <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 text-sm">
                <i class="fas fa-filter mr-1"></i>Filter
            </button>
        </form>
    </div>

    <div class="overflow-x-auto -mx-4 sm:mx-0">
        <table class="w-full min-w-[500px]">
            <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">Nama Guru</th>
                    <th class="px-3 sm:px-4 py-2 sm:py-3 text-left text-xs font-medium text-gray-500 uppercase">Keterangan</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @forelse($absensis as $index => $absensi)
                <tr class="hover:bg-gray-50">
                    <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-[120px] sm:max-w-none">{{ $absensi->guru->nama ?? '-' }}</p>
                    </td>
                    <td class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-500">
                        {{ $absensi->keterangan ?? '-' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-4 py-8 sm:py-12 text-center text-gray-500 text-sm">
                        <i class="fas fa-inbox text-3xl text-gray-300 mb-2"></i>
                        <p>Belum ada data absensi izin</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($absensis->hasPages())
    <div class="px-4 sm:px-6 py-4 border-t border-gray-100">
        {{ $absensis->links('pagination::tailwind') }}
    </div>
    @endif
</div>
@endsection