320 lines
12 KiB
PHP
320 lines
12 KiB
PHP
@extends('pages.index')
|
|
|
|
@section('admin_content')
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<style>
|
|
.qr-card {
|
|
border-radius: 24px;
|
|
border: none;
|
|
box-shadow: 0 8px 32px rgba(54,92,245,0.12);
|
|
overflow: hidden;
|
|
}
|
|
.qr-header {
|
|
background: linear-gradient(135deg, #365CF5 0%, #6a8ffd 100%);
|
|
padding: 2rem;
|
|
color: white;
|
|
}
|
|
.qr-body {
|
|
padding: 2rem;
|
|
background: #f8faff;
|
|
}
|
|
.qr-canvas-wrap {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: inline-block;
|
|
box-shadow: 0 4px 16px rgba(54,92,245,0.10);
|
|
border: 2px solid #e3eafd;
|
|
}
|
|
.info-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #e3eafd;
|
|
color: #365CF5;
|
|
border-radius: 20px;
|
|
padding: 6px 16px;
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
margin: 4px;
|
|
}
|
|
.btn-action {
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
padding: 10px 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
.print-only { display: none; }
|
|
.print-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.print-subtitle {
|
|
font-size: 13px;
|
|
color: #5b6470;
|
|
margin-bottom: 12px;
|
|
}
|
|
.print-meta {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
border: 1px solid #d7deea;
|
|
border-radius: 10px;
|
|
background: #f8faff;
|
|
padding: 10px 14px;
|
|
}
|
|
.print-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 5px 0;
|
|
border-bottom: 1px dashed #dbe3f2;
|
|
font-size: 13px;
|
|
}
|
|
.print-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.print-label {
|
|
color: #4b5563;
|
|
font-weight: 600;
|
|
}
|
|
.print-value {
|
|
color: #0f172a;
|
|
font-weight: 600;
|
|
text-align: right;
|
|
}
|
|
.btn-action:hover { transform: translateY(-2px); }
|
|
@media print {
|
|
@page {
|
|
size: auto;
|
|
margin: 12mm;
|
|
}
|
|
body * { visibility: hidden !important; }
|
|
#print-info,
|
|
#print-info *,
|
|
.qr-canvas-wrap,
|
|
.qr-canvas-wrap *,
|
|
#qrCode,
|
|
#qrCode canvas {
|
|
visibility: visible !important;
|
|
}
|
|
.qr-header,
|
|
.mb-3,
|
|
.no-print,
|
|
#copy-success {
|
|
display: none !important;
|
|
}
|
|
.qr-card,
|
|
.qr-body {
|
|
background: #fff !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
.qr-body {
|
|
padding: 0 !important;
|
|
text-align: center !important;
|
|
}
|
|
#print-info {
|
|
display: block !important;
|
|
position: static !important;
|
|
transform: none !important;
|
|
width: 100% !important;
|
|
max-width: 620px !important;
|
|
margin: 0 auto 14px auto !important;
|
|
text-align: center !important;
|
|
color: #000 !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
.d-flex.justify-content-center.mb-4 {
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
}
|
|
.qr-canvas-wrap {
|
|
display: inline-block !important;
|
|
border: 1px solid #d7deea !important;
|
|
box-shadow: none !important;
|
|
padding: 10px !important;
|
|
background: #fff !important;
|
|
}
|
|
#qrCode {
|
|
position: static !important;
|
|
transform: none !important;
|
|
margin: 0 !important;
|
|
background: white !important;
|
|
display: block !important;
|
|
}
|
|
#qrCode canvas {
|
|
width: 8.5cm !important;
|
|
height: 8.5cm !important;
|
|
display: block !important;
|
|
}
|
|
.print-meta {
|
|
background: #fff !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-5">
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-7 col-lg-6">
|
|
<div class="card qr-card">
|
|
<div class="qr-header text-center">
|
|
<h4 class="fw-bold mb-1"><i class="fas fa-calendar-check me-2"></i>QR Code Absensi</h4>
|
|
<p class="mb-0 opacity-75">Scan QR untuk absensi mata pelajaran</p>
|
|
</div>
|
|
<div class="qr-body text-center">
|
|
<div id="print-info" class="print-only">
|
|
<div class="print-title">QR Code Absensi</div>
|
|
<div class="print-subtitle">Silakan scan QR di bawah untuk melakukan absensi</div>
|
|
<div class="print-meta">
|
|
<div class="print-row">
|
|
<span class="print-label">Mapel</span>
|
|
<span class="print-value">{{ $jadwal->subject->name ?? '-' }}</span>
|
|
</div>
|
|
<div class="print-row">
|
|
<span class="print-label">Guru</span>
|
|
<span class="print-value">{{ $jadwal->teacher->name ?? '-' }}</span>
|
|
</div>
|
|
<div class="print-row">
|
|
<span class="print-label">Kelas</span>
|
|
<span class="print-value">{{ $jadwal->class->name ?? '-' }}</span>
|
|
</div>
|
|
<div class="print-row">
|
|
<span class="print-label">Hari</span>
|
|
<span class="print-value">{{ $jadwal->day_of_week ?? '-' }}</span>
|
|
</div>
|
|
<div class="print-row">
|
|
<span class="print-label">Jam</span>
|
|
<span class="print-value">{{ $jadwal->start_time ?? '-' }} - {{ $jadwal->end_time ?? '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Jadwal -->
|
|
<div class="mb-3">
|
|
<span class="info-badge"><i class="fas fa-book"></i> {{ $jadwal->subject->name ?? '-' }}</span>
|
|
<span class="info-badge"><i class="fas fa-chalkboard-teacher"></i> {{ $jadwal->teacher->name ?? '-' }}</span>
|
|
<span class="info-badge"><i class="fas fa-users"></i> {{ $jadwal->class->name ?? '-' }}</span>
|
|
<span class="info-badge"><i class="fas fa-calendar-day"></i> {{ $jadwal->day_of_week ?? '-' }}</span>
|
|
<span class="info-badge"><i class="fas fa-clock"></i> {{ $jadwal->start_time ?? '-' }} - {{ $jadwal->end_time ?? '-' }}</span>
|
|
</div>
|
|
|
|
<!-- QR Code -->
|
|
<div class="d-flex justify-content-center mb-4">
|
|
<div class="qr-canvas-wrap">
|
|
<div id="qrCode"></div>
|
|
{{-- <div class="mt-2 text-muted" style="font-size:0.8rem;letter-spacing:1px;">{{ $jadwal->code }}</div> --}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tombol Aksi -->
|
|
<div class="d-flex justify-content-center gap-2 flex-wrap no-print">
|
|
<button class="btn btn-primary btn-action" id="btn-copy-link" type="button">
|
|
<i class="fas fa-link"></i> Copy Link
|
|
</button>
|
|
<button class="btn btn-success btn-action" id="btn-print" type="button">
|
|
<i class="fas fa-print"></i> Print
|
|
</button>
|
|
<button class="btn btn-danger btn-action" id="btn-download-pdf" type="button">
|
|
<i class="fas fa-file-pdf"></i> Unduh PDF
|
|
</button>
|
|
<a href="{{ route('jadwal.index') }}" class="btn btn-secondary btn-action">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
<div id="copy-success" class="mt-3 text-success fw-semibold" style="display:none;">
|
|
<i class="fas fa-check-circle me-1"></i> Link berhasil disalin!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var qr = new QRious({
|
|
element: document.createElement('canvas'),
|
|
value: @json($jadwal->code),
|
|
size: 300,
|
|
});
|
|
document.getElementById('qrCode').appendChild(qr.element);
|
|
|
|
document.getElementById('btn-copy-link').onclick = function() {
|
|
const btn = this;
|
|
const originalHtml = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading...';
|
|
|
|
// Hit web route untuk generate link
|
|
fetch('/jadwal/qr-link/{{ $jadwal->id }}', {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(async response => {
|
|
const data = await response.json();
|
|
console.log('Response status:', response.status);
|
|
console.log('Response data:', data);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || `HTTP ${response.status}`);
|
|
}
|
|
return data;
|
|
})
|
|
.then(data => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalHtml;
|
|
|
|
if (data.success && data.data.url) {
|
|
const url = data.data.url;
|
|
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.writeText(url).then(function() {
|
|
document.getElementById('copy-success').style.display = 'block';
|
|
setTimeout(() => { document.getElementById('copy-success').style.display = 'none'; }, 2000);
|
|
}).catch(() => {
|
|
alert('Gagal meng-copy link ke clipboard');
|
|
});
|
|
} else {
|
|
prompt('Copy link berikut:', url);
|
|
}
|
|
} else {
|
|
alert('Gagal membuat link publik: ' + (data.message || 'Silakan coba lagi'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalHtml;
|
|
alert('Gagal membuat link publik: ' + error.message);
|
|
});
|
|
};
|
|
|
|
document.getElementById('btn-print').onclick = function() { window.print(); };
|
|
|
|
document.getElementById('btn-download-pdf').onclick = function() {
|
|
var element = document.getElementById('qrCode');
|
|
html2pdf().set({
|
|
margin: 10,
|
|
filename: 'qr-jadwal-{{ $jadwal->id }}.pdf',
|
|
html2canvas: { scale: 2 },
|
|
jsPDF: { unit: 'mm', format: 'a5', orientation: 'portrait' }
|
|
}).from(element).save();
|
|
};
|
|
});
|
|
</script>
|
|
@endsection
|