first commit
This commit is contained in:
198
resources/views/admin/surveys/print_statistics.blade.php
Normal file
198
resources/views/admin/surveys/print_statistics.blade.php
Normal file
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ms">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Statistik - {{ $survey->title }}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: white !important;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.break-inside-avoid {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
.chart-container {
|
||||
height: 220px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
.card-header {
|
||||
padding: 0.5rem 1rem !important;
|
||||
}
|
||||
h1.h3 { font-size: 1.5rem !important; }
|
||||
h5 { font-size: 1rem !important; }
|
||||
.table-sm { font-size: 0.8rem !important; }
|
||||
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
.card { border: 1px solid #ddd !important; box-shadow: none !important; }
|
||||
.badge { border: 1px solid #ccc !important; color: black !important; background: white !important; }
|
||||
body { padding: 0; }
|
||||
.container-fluid { padding: 0; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="text-center mb-4 border-bottom pb-2">
|
||||
<h1 class="fw-bold h3 mb-1">{{ $survey->title }}</h1>
|
||||
<p class="text-muted mb-0 small">Laporan Statistik - {{ date('d/m/Y H:i') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="card text-center py-1 bg-light border-0">
|
||||
<div class="card-body py-2">
|
||||
<h4 class="fw-bold mb-0">{{ $totalSurveyRespondents }}</h4>
|
||||
<small class="text-muted">Responden</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card text-center py-1 bg-light border-0">
|
||||
<div class="card-body py-2">
|
||||
<h4 class="fw-bold mb-0">{{ $totalSurveyQuestions }}</h4>
|
||||
<small class="text-muted">Soalan</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@foreach($results as $questionId => $result)
|
||||
<div class="card mb-3 break-inside-avoid border shadow-none">
|
||||
<div class="card-header bg-light border-bottom p-2">
|
||||
<h6 class="fw-bold mb-0">Soalan {{ $loop->iteration }}: {{ $result['question'] }}</h6>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
@if(isset($result['type']) && $result['type'] == 'text')
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 40px;">#</th>
|
||||
<th>Jawapan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($result['data'] as $answer)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $answer }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="2" class="text-center text-muted">Tiada jawapan.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col-7">
|
||||
<div class="chart-container">
|
||||
<canvas id="chart-{{ $questionId }}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<table class="table table-bordered table-sm mb-0" style="font-size: 0.75rem;">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Pilihan Jawapan</th>
|
||||
<th class="text-center">Kekerapan</th>
|
||||
<th class="text-center">Peratus(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($result['data'] as $stat)
|
||||
<tr>
|
||||
<td>{{ $stat['label'] }}</td>
|
||||
<td class="text-center">{{ $stat['count'] }}</td>
|
||||
<td class="text-center fw-bold">{{ $stat['percentage'] }}%</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
<tr class="table-secondary fw-bold">
|
||||
<td>JUMLAH</td>
|
||||
<td class="text-center">{{ $result['total'] }}</td>
|
||||
<td class="text-center">100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!empty($result['other_answers']))
|
||||
<div class="mt-2 border-top pt-1">
|
||||
<small class="fw-bold text-secondary" style="font-size: 0.7rem;">Lain-lain:</small>
|
||||
<div class="d-flex flex-wrap gap-1 mt-1">
|
||||
@foreach($result['other_answers'] as $otherAns)
|
||||
<span class="badge bg-white text-dark border p-1 fw-normal" style="font-size: 0.7rem;">{{ $otherAns }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div class="text-center mt-3 no-print">
|
||||
<button onclick="window.print()" class="btn btn-primary px-4 py-1 fw-bold">KLIK UNTUK CETAK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const results = @json($results);
|
||||
|
||||
Object.keys(results).forEach(id => {
|
||||
const data = results[id];
|
||||
if(data.type === 'text') return;
|
||||
|
||||
const ctx = document.getElementById(`chart-${id}`).getContext('2d');
|
||||
const labels = data.data.map(item => item.label);
|
||||
const counts = data.data.map(item => item.count);
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Bilangan',
|
||||
data: counts,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
||||
borderColor: 'rgb(54, 162, 235)',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: { duration: 0 },
|
||||
scales: {
|
||||
y: { beginAtZero: true, ticks: { precision: 0, font: { size: 10 } } },
|
||||
x: { ticks: { font: { size: 10 } } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user