242 lines
18 KiB
PHP
242 lines
18 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>{{ config('app.name', 'Laravel') }}</title>
|
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
|
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="icon" type="image/png" href="{{ asset('assets/img/logos/LOGO.png') }}" />
|
|
<style>
|
|
.gradient-bg { background: linear-gradient(135deg, #16a34a 0%, #2563eb 100%); }
|
|
.card-shadow { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
|
|
.hover-scale { transition: transform 0.2s ease-in-out; }
|
|
.hover-scale:hover { transform: scale(1.02); }
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
|
|
<div class="flex">
|
|
<!-- Sidebar Guru -->
|
|
<aside class="w-64 gradient-bg text-white shadow-2xl min-h-screen fixed">
|
|
<div class="p-6 border-b border-white/20">
|
|
<div class="flex items-center gap-4">
|
|
<img src="{{ asset('assets/img/logos/LOGO.png') }}" alt="Logo" class="w-12 h-12 rounded-full shadow-lg" />
|
|
<div>
|
|
<h2 class="font-bold text-xl">Menu Guru</h2>
|
|
<p class="text-white/80 text-sm">Dashboard</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="p-4 space-y-2">
|
|
<a href="{{ route('guru.dashboard') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.dashboard') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-tachometer-alt fa-fw text-lg"></i>
|
|
<span class="font-medium">Dashboard</span>
|
|
</a>
|
|
<a href="{{ route('guru.absensis.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.absensis.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-calendar-check fa-fw text-lg"></i>
|
|
<span class="font-medium">Absensi</span>
|
|
</a>
|
|
<a href="{{ route('nilai_santris.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('nilai_santris.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-clipboard-list fa-fw text-lg"></i>
|
|
<span class="font-medium">Nilai Santri</span>
|
|
</a>
|
|
<a href="{{ route('prestasis.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('prestasis.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-trophy fa-fw text-lg"></i>
|
|
<span class="font-medium">Prestasi</span>
|
|
</a>
|
|
<a href="{{ route('pelanggarans.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('pelanggarans.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-exclamation-triangle fa-fw text-lg"></i>
|
|
<span class="font-medium">Pelanggaran</span>
|
|
</a>
|
|
<a href="{{ route('catatan_kesehatans.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('catatan_kesehatans.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-notes-medical fa-fw text-lg"></i>
|
|
<span class="font-medium">Catatan Kesehatan</span>
|
|
</a>
|
|
<a href="{{ route('santris.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('santris.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-users fa-fw text-lg"></i>
|
|
<span class="font-medium">Data Santri</span>
|
|
</a>
|
|
<a href="{{ route('jadwals.index') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('jadwals.*') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-calendar-alt fa-fw text-lg"></i>
|
|
<span class="font-medium">Jadwal</span>
|
|
</a>
|
|
<a href="{{ route('guru.profile') }}" class="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-yellow-400 hover:text-gray-900 transition-all duration-300 {{ request()->routeIs('guru.profile') ? 'bg-yellow-400 text-gray-900 shadow-lg' : '' }}">
|
|
<i class="fas fa-user fa-fw text-lg"></i>
|
|
<span class="font-medium">Profile Guru</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 ml-64">
|
|
<!-- Top Navigation -->
|
|
<nav class="bg-white/80 backdrop-blur-md shadow-lg border-b border-gray-200/50 p-4">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Input Absensi Santri</h1>
|
|
<p class="text-gray-600 text-sm">Selamat datang, {{ Auth::user()->name }}</p>
|
|
</div>
|
|
<div class="relative">
|
|
<button onclick="toggleDropdown('profileDropdown')" class="flex items-center space-x-3 bg-white/50 hover:bg-white/80 px-4 py-2 rounded-xl shadow-md transition-all duration-300">
|
|
<img src="{{ asset('storage/foto_guru/' . (Auth::user()->guru->foto ?? 'default.jpg')) }}" alt="Profile" class="w-8 h-8 rounded-full object-cover" onerror="this.src='{{ asset('assets/img/bruce-mars.jpg') }}'">
|
|
<span class="font-semibold text-gray-800">{{ Auth::user()->name }}</span>
|
|
<i class="fas fa-chevron-down text-sm text-gray-600"></i>
|
|
</button>
|
|
<div id="profileDropdown" class="hidden absolute right-0 mt-3 w-56 bg-white rounded-xl shadow-xl py-2 z-50 border border-gray-200/50">
|
|
<a href="{{ route('guru.profile') }}" class="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 transition-colors">
|
|
<i class="fas fa-user fa-fw"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
<hr class="my-2">
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="w-full text-left flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition-colors">
|
|
<i class="fas fa-sign-out-alt fa-fw"></i>
|
|
<span>Log Out</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
<main class="p-6">
|
|
<div class="py-8">
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- Header Section -->
|
|
<div class="mb-8">
|
|
<div class="gradient-bg rounded-2xl p-8 text-white card-shadow">
|
|
<h1 class="text-4xl font-bold mb-2">Input Absensi Santri</h1>
|
|
<p class="text-white/90 text-lg">Kelola kehadiran santri dengan mudah dan efisien</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</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>
|