282 lines
13 KiB
PHP
282 lines
13 KiB
PHP
|
|
|
|
<?php $__env->startSection('content'); ?>
|
|
<div class="page-header">
|
|
<h2><i class="fas fa-clipboard-check"></i> Input Absensi: <?php echo e($kegiatan->nama_kegiatan); ?></h2>
|
|
</div>
|
|
|
|
<div class="content-box" style="margin-bottom: 20px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
|
|
<div>
|
|
<h3 style="margin: 0; color: var(--primary-color);"><?php echo e($kegiatan->nama_kegiatan); ?></h3>
|
|
<p style="margin: 5px 0 0 0; color: var(--text-light);">
|
|
<i class="fas fa-calendar-day"></i> <?php echo e($kegiatan->hari); ?> |
|
|
<i class="fas fa-clock"></i> <?php echo e(date('H:i', strtotime($kegiatan->waktu_mulai))); ?> - <?php echo e(date('H:i', strtotime($kegiatan->waktu_selesai))); ?> |
|
|
<i class="fas fa-list-alt"></i> <?php echo e($kegiatan->kategori->nama_kategori); ?>
|
|
|
|
</p>
|
|
</div>
|
|
<div style="display: flex; gap: 10px;">
|
|
<button type="button" id="btnModeManual" class="btn btn-primary" onclick="setMode('manual')">
|
|
<i class="fas fa-hand-pointer"></i> Mode Manual
|
|
</button>
|
|
<button type="button" id="btnModeRfid" class="btn btn-success" onclick="setMode('rfid')">
|
|
<i class="fas fa-id-card"></i> Mode RFID
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODE MANUAL -->
|
|
<div id="modeManual" class="content-box">
|
|
<form action="<?php echo e(route('admin.absensi-kegiatan.simpan')); ?>" method="POST">
|
|
<?php echo csrf_field(); ?>
|
|
<input type="hidden" name="kegiatan_id" value="<?php echo e($kegiatan->kegiatan_id); ?>">
|
|
|
|
<div class="form-group">
|
|
<label for="tanggal">
|
|
<i class="fas fa-calendar form-icon"></i>
|
|
Tanggal Absensi
|
|
</label>
|
|
<input type="date" name="tanggal" id="tanggal" class="form-control" value="<?php echo e($tanggal); ?>" required>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<p><i class="fas fa-info-circle"></i> Pilih status absensi untuk setiap santri. Jika tidak dipilih, akan dianggap <strong>Alpa</strong>.</p>
|
|
</div>
|
|
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50px;">No</th>
|
|
<th style="width: 100px;">ID Santri</th>
|
|
<th>Nama Santri</th>
|
|
<th style="width: 100px;">Kelas</th>
|
|
<th style="width: 300px; text-align: center;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php $__currentLoopData = $santris; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $santri): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<tr>
|
|
<td><?php echo e($index + 1); ?></td>
|
|
<td><strong><?php echo e($santri->id_santri); ?></strong></td>
|
|
<td><?php echo e($santri->nama_lengkap); ?></td>
|
|
<td><span class="badge badge-secondary"><?php echo e($santri->kelas); ?></span></td>
|
|
<td class="text-center">
|
|
<?php
|
|
$currentStatus = $absensiData[$santri->id_santri] ?? 'Alpa';
|
|
?>
|
|
<div style="display: flex; gap: 8px; justify-content: center;">
|
|
<label style="margin: 0; cursor: pointer;">
|
|
<input type="radio" name="absensi[<?php echo e($santri->id_santri); ?>]" value="Hadir"
|
|
<?php echo e($currentStatus == 'Hadir' ? 'checked' : ''); ?> required>
|
|
<span class="badge badge-success">Hadir</span>
|
|
</label>
|
|
<label style="margin: 0; cursor: pointer;">
|
|
<input type="radio" name="absensi[<?php echo e($santri->id_santri); ?>]" value="Izin"
|
|
<?php echo e($currentStatus == 'Izin' ? 'checked' : ''); ?>>
|
|
<span class="badge badge-warning">Izin</span>
|
|
</label>
|
|
<label style="margin: 0; cursor: pointer;">
|
|
<input type="radio" name="absensi[<?php echo e($santri->id_santri); ?>]" value="Sakit"
|
|
<?php echo e($currentStatus == 'Sakit' ? 'checked' : ''); ?>>
|
|
<span class="badge badge-info">Sakit</span>
|
|
</label>
|
|
<label style="margin: 0; cursor: pointer;">
|
|
<input type="radio" name="absensi[<?php echo e($santri->id_santri); ?>]" value="Alpa"
|
|
<?php echo e($currentStatus == 'Alpa' ? 'checked' : ''); ?>>
|
|
<span class="badge badge-danger">Alpa</span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="btn-group" style="margin-top: 20px;">
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="fas fa-save"></i> Simpan Absensi
|
|
</button>
|
|
<a href="<?php echo e(route('admin.absensi-kegiatan.index')); ?>" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- MODE RFID -->
|
|
<div id="modeRfid" class="content-box" style="display: none;">
|
|
<div class="form-group">
|
|
<label for="tanggalRfid">
|
|
<i class="fas fa-calendar form-icon"></i>
|
|
Tanggal Absensi
|
|
</label>
|
|
<input type="date" id="tanggalRfid" class="form-control" value="<?php echo e($tanggal); ?>">
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<p><i class="fas fa-id-card"></i> Tempelkan kartu RFID santri ke reader. Absensi akan otomatis tersimpan sebagai <strong>Hadir</strong>.</p>
|
|
</div>
|
|
|
|
<div style="background: linear-gradient(135deg, var(--primary-light) 0%, #D4F1E3 100%); padding: 30px; border-radius: var(--border-radius); text-align: center; margin-bottom: 20px;">
|
|
<div id="rfidStatus" style="font-size: 1.5rem; font-weight: 600; color: var(--primary-color); margin-bottom: 15px;">
|
|
<i class="fas fa-wifi"></i> Siap Scan RFID
|
|
</div>
|
|
<input type="text" id="rfidInput" placeholder="Fokus di sini untuk scan RFID..."
|
|
style="width: 100%; padding: 15px; font-size: 1.2rem; border: 3px solid var(--primary-color); border-radius: var(--border-radius-sm); text-align: center;"
|
|
autofocus>
|
|
</div>
|
|
|
|
<div id="rfidLog" style="max-height: 400px; overflow-y: auto; background: white; border-radius: var(--border-radius-sm); padding: 15px; border: 1px solid var(--primary-light);">
|
|
<h4 style="margin: 0 0 15px 0; color: var(--primary-color);"><i class="fas fa-history"></i> Log Absensi</h4>
|
|
<div id="rfidLogContent">
|
|
<p style="text-align: center; color: var(--text-light);">Belum ada absensi...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" style="margin-top: 20px;">
|
|
<button type="button" class="btn btn-warning" onclick="clearLog()">
|
|
<i class="fas fa-trash"></i> Bersihkan Log
|
|
</button>
|
|
<a href="<?php echo e(route('admin.absensi-kegiatan.index')); ?>" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentMode = 'manual';
|
|
const kegiatanId = '<?php echo e($kegiatan->kegiatan_id); ?>';
|
|
|
|
function setMode(mode) {
|
|
currentMode = mode;
|
|
|
|
if (mode === 'manual') {
|
|
document.getElementById('modeManual').style.display = 'block';
|
|
document.getElementById('modeRfid').style.display = 'none';
|
|
document.getElementById('btnModeManual').classList.add('btn-primary');
|
|
document.getElementById('btnModeManual').classList.remove('btn-secondary');
|
|
document.getElementById('btnModeRfid').classList.remove('btn-success');
|
|
document.getElementById('btnModeRfid').classList.add('btn-secondary');
|
|
} else {
|
|
document.getElementById('modeManual').style.display = 'none';
|
|
document.getElementById('modeRfid').style.display = 'block';
|
|
document.getElementById('btnModeManual').classList.remove('btn-primary');
|
|
document.getElementById('btnModeManual').classList.add('btn-secondary');
|
|
document.getElementById('btnModeRfid').classList.add('btn-success');
|
|
document.getElementById('btnModeRfid').classList.remove('btn-secondary');
|
|
document.getElementById('rfidInput').focus();
|
|
}
|
|
}
|
|
|
|
// RFID Scanner Handler
|
|
document.getElementById('rfidInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
const rfidUid = this.value.trim();
|
|
|
|
if (rfidUid) {
|
|
scanRfid(rfidUid);
|
|
this.value = '';
|
|
}
|
|
}
|
|
});
|
|
|
|
function scanRfid(rfidUid) {
|
|
const tanggal = document.getElementById('tanggalRfid').value;
|
|
const statusEl = document.getElementById('rfidStatus');
|
|
|
|
statusEl.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
|
|
statusEl.style.color = 'var(--warning-color)';
|
|
|
|
fetch('<?php echo e(route("admin.absensi-kegiatan.scan-rfid")); ?>', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
|
|
},
|
|
body: JSON.stringify({
|
|
rfid_uid: rfidUid,
|
|
kegiatan_id: kegiatanId,
|
|
tanggal: tanggal
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
statusEl.innerHTML = '<i class="fas fa-check-circle"></i> ' + data.message;
|
|
statusEl.style.color = 'var(--success-color)';
|
|
addLogEntry(data.data, 'success');
|
|
playSound('success');
|
|
} else {
|
|
statusEl.innerHTML = '<i class="fas fa-exclamation-circle"></i> ' + data.message;
|
|
statusEl.style.color = 'var(--danger-color)';
|
|
playSound('error');
|
|
}
|
|
|
|
setTimeout(() => {
|
|
statusEl.innerHTML = '<i class="fas fa-wifi"></i> Siap Scan RFID';
|
|
statusEl.style.color = 'var(--primary-color)';
|
|
}, 2000);
|
|
})
|
|
.catch(error => {
|
|
statusEl.innerHTML = '<i class="fas fa-times-circle"></i> Koneksi error';
|
|
statusEl.style.color = 'var(--danger-color)';
|
|
console.error('Error:', error);
|
|
|
|
setTimeout(() => {
|
|
statusEl.innerHTML = '<i class="fas fa-wifi"></i> Siap Scan RFID';
|
|
statusEl.style.color = 'var(--primary-color)';
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
function addLogEntry(data, type) {
|
|
const logContent = document.getElementById('rfidLogContent');
|
|
|
|
if (logContent.querySelector('p')) {
|
|
logContent.innerHTML = '';
|
|
}
|
|
|
|
const entry = document.createElement('div');
|
|
entry.style.cssText = 'padding: 12px; margin-bottom: 10px; border-radius: 8px; background: ' +
|
|
(type === 'success' ? 'linear-gradient(135deg, #E8F7F2 0%, #D4F1E3 100%)' : 'linear-gradient(135deg, #FFE8EA 0%, #FFD5D8 100%)') +
|
|
'; border-left: 4px solid ' + (type === 'success' ? 'var(--success-color)' : 'var(--danger-color)');
|
|
|
|
entry.innerHTML = `
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<strong>${data.nama}</strong> (${data.id_santri})
|
|
<div style="font-size: 0.85rem; color: var(--text-light); margin-top: 3px;">
|
|
Kelas: ${data.kelas} | Waktu: ${data.waktu}
|
|
</div>
|
|
</div>
|
|
<span class="badge badge-success"><i class="fas fa-check"></i> Hadir</span>
|
|
</div>
|
|
`;
|
|
|
|
logContent.insertBefore(entry, logContent.firstChild);
|
|
}
|
|
|
|
function clearLog() {
|
|
if (confirm('Yakin ingin membersihkan log?')) {
|
|
document.getElementById('rfidLogContent').innerHTML = '<p style="text-align: center; color: var(--text-light);">Belum ada absensi...</p>';
|
|
}
|
|
}
|
|
|
|
function playSound(type) {
|
|
// Bisa ditambahkan audio feedback
|
|
const audio = new Audio(type === 'success' ? '/sounds/success.mp3' : '/sounds/error.mp3');
|
|
audio.play().catch(() => {}); // Ignore errors
|
|
}
|
|
|
|
// Auto-focus kembali ke input RFID jika kehilangan fokus
|
|
setInterval(() => {
|
|
if (currentMode === 'rfid' && document.activeElement !== document.getElementById('rfidInput')) {
|
|
document.getElementById('rfidInput').focus();
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
<?php $__env->stopSection(); ?>
|
|
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\TugasAkhir\sim-pkpps\resources\views/admin/kegiatan/absensi/input.blade.php ENDPATH**/ ?>
|