<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Tambah absensi') }}
        </h2>
    </x-slot>

    <body class="font-sans antialiased bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
    <div class="flex">

        
        <!-- Main Content -->
        <div class="flex-1 ml-64">            
            <!-- Page Content -->
            <main class="p-6">
                    <div class="max-w-6xl mx-auto">
                        <!-- Main Form Card -->
                        <div class="bg-white rounded-2xl card-shadow overflow-hidden hover-scale">
                            <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-8 py-6 border-b border-gray-200">
                                <h2 class="text-2xl font-bold text-gray-800">Form Input Absensi</h2>
                                <p class="text-gray-600 mt-1">Pilih tanggal dan kelas untuk mengisi absensi</p>
                            </div>
                            
                            <div class="p-8">
                                <form action="{{ route('guru.absensis.store') }}" method="POST">
                                    @csrf
                                    
                                    <!-- Date and Class Selection -->
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-3">Tanggal Absensi</label>
                                            <input type="date" name="tanggal" 
                                                   class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition-all duration-300" 
                                                   value="{{ old('tanggal', date('Y-m-d')) }}" required>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-semibold text-gray-700 mb-3">Pilih Kelas</label>
                                            <select name="kelas_id" 
                                                    class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-4 focus:ring-green-100 transition-all duration-300 bg-white" required>
                                                <option value="">Pilih Kelas</option>
                                                @foreach($kelas as $k)
                                                    <option value="{{ $k->id }}" {{ old('kelas_id') == $k->id ? 'selected' : '' }}>
                                                        {{ $k->nama_kelas }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Student Attendance Table -->
                                    <div class="mb-8">
                                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-6">
                                            <h3 class="text-xl font-bold text-gray-800 mb-2">Daftar Kehadiran Santri</h3>
                                            <p class="text-gray-600">Pilih status kehadiran untuk setiap santri</p>
                                        </div>
                                        
                                        <div class="overflow-x-auto">
                                            <table class="min-w-full bg-white border border-gray-200 rounded-xl overflow-hidden card-shadow">
                                                <thead class="gradient-bg text-white">
                                                    <tr>
                                                        <th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">No</th>
                                                        <th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">Nama Santri</th>
                                                        <th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">Status</th>
                                                        <th class="px-6 py-4 text-left text-sm font-semibold uppercase tracking-wider">Keterangan</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="divide-y divide-gray-200">
                                                    @foreach($santris as $index => $santri)
                                                    <tr class="hover:bg-gray-50 transition-colors duration-200">
                                                        <td class="px-6 py-4 text-sm text-gray-900 font-medium">{{ $index + 1 }}</td>
                                                        <td class="px-6 py-4">
                                                            <div class="flex items-center">
                                                                <div class="w-8 h-8 bg-gradient-to-r from-green-400 to-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3">
                                                                    {{ strtoupper(substr($santri->nama, 0, 1)) }}
                                                                </div>
                                                                <span class="text-sm font-medium text-gray-900">{{ $santri->nama }}</span>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4">
                                                            <select name="absensi[{{ $santri->id }}][status]" 
                                                                    class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg text-sm focus:border-green-500 focus:ring-2 focus:ring-green-100 transition-all duration-300">
                                                                <option value="hadir" {{ old("absensi.{$santri->id}.status") == 'hadir' ? 'selected' : '' }}>✅ Hadir</option>
                                                                <option value="sakit" {{ old("absensi.{$santri->id}.status") == 'sakit' ? 'selected' : '' }}>🏥 Sakit</option>
                                                                <option value="izin" {{ old("absensi.{$santri->id}.status") == 'izin' ? 'selected' : '' }}>📝 Izin</option>
                                                                <option value="alfa" {{ old("absensi.{$santri->id}.status") == 'alfa' ? 'selected' : '' }}>❌ Alpha</option>
                                                            </select>
                                                            <input type="hidden" name="absensi[{{ $santri->id }}][santri_id]" value="{{ $santri->id }}">
                                                        </td>
                                                        <td class="px-6 py-4">
                                                            <input type="text" name="absensi[{{ $santri->id }}][keterangan]" 
                                                                   class="w-full px-3 py-2 border-2 border-gray-200 rounded-lg text-sm focus:border-green-500 focus:ring-2 focus:ring-green-100 transition-all duration-300" 
                                                                   value="{{ old("absensi.{$santri->id}.keterangan") }}" 
                                                                   placeholder="Keterangan (opsional)">
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                                        <a href="{{ route('guru.absensis.index') }}" 
                                           class="inline-flex items-center px-6 py-3 text-sm font-semibold text-gray-700 bg-gray-100 rounded-xl hover:bg-gray-200 transition-all duration-300 card-shadow">
                                            <i class="fas fa-arrow-left mr-2"></i>
                                            Kembali
                                        </a>
                                        <button type="submit" 
                                                class="inline-flex items-center px-8 py-3 text-sm font-semibold text-white gradient-bg rounded-xl hover:scale-105 transition-all duration-300 card-shadow">
                                            <i class="fas fa-save mr-2"></i>
                                            Simpan Absensi
                                        </button>
                                    </div>
                                </form>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script>
        function toggleDropdown(id) {
            const dropdown = document.getElementById(id);
            if (dropdown) {
                dropdown.classList.toggle('hidden');
            }
        }
        
        document.addEventListener('click', function(event) {
            const profileDropdown = document.getElementById('profileDropdown');
            const profileButton = profileDropdown ? profileDropdown.previousElementSibling : null;
            if (profileButton && !profileButton.contains(event.target) && !profileDropdown.contains(event.target)) {
                profileDropdown.classList.add('hidden');
            }
        });
    </script>
</body>
</html> 
</x-app-layout> 
