142 lines
10 KiB
PHP
142 lines
10 KiB
PHP
<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>
|