134 lines
7.0 KiB
PHP
134 lines
7.0 KiB
PHP
@extends('main.layouts.app')
|
|
|
|
@section('title', 'Kuesioner')
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="row">
|
|
<div class="col-lg-12 mx-auto mb-4 order-1">
|
|
<div class="card">
|
|
<div class="d-flex align-items-start row">
|
|
|
|
@if(!($kuesionerls && $kuesionermeta))
|
|
<div class="col-md-7">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }}</h5>
|
|
<p class="mb-4">Isi kuesioner untuk mengetahui tingkat kemampuan metakocnitif <br>.Dan jenis gaya belajar yang kamu miliki</p>
|
|
<a href="{{ route('kuesioner-panduan') }}" class="btn btn-primary w-25">Isi Kuesioner</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 ms-auto text-end">
|
|
<div class="card-body pb-0 px-0 px-md-4">
|
|
<img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/image%204.png" class="img-fluid" alt="View Badge User" />
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div style="height: 20px;"></div>
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-lg-12 mx-auto mb-4 order-1">
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="d-flex align-items-start row">
|
|
<div class="col-md-7">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Pengisian Kuesioner</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel dengan padding -->
|
|
<div class="card-body pt-0"> <!-- Tambahkan card-body dengan pt-0 (padding-top: 0) -->
|
|
<div class="table-responsive px-3 pb-3"> <!-- Tambahkan padding horizontal dan bottom -->
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr style="background-color: #f8f9fa;">
|
|
<th class="text-center font-weight-bold" style="font-size: 14px;">Hasil MAI</th>
|
|
<th class="text-center font-weight-bold" style="font-size: 14px;">Hasil LS</th>
|
|
<th class="text-center font-weight-bold" style="font-size: 14px;">Diisi Tanggal</th>
|
|
<th class="text-center font-weight-bold" style="font-size: 14px;">Terakhir Diedit</th>
|
|
<th class="text-center font-weight-bold" style="font-size: 14px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if($kuesionerls && $kuesionermeta)
|
|
<tr>
|
|
<td class="text-center" style="font-size: 14px;">KM {{ $kuesionermeta->km_class ?? 'unknown' }}, RM {{ $kuesionermeta->rm_class ?? 'unknown' }}</td>
|
|
<td class="text-center" style="font-size: 14px;">{{ $kuesionerls->result ?? 'unknown' }}</td>
|
|
<td class="text-center" style="font-size: 14px;">{{ $kuesionerls->created_at->format('d M Y') }}</td>
|
|
<td class="text-center" style="font-size: 14px;">{{ $kuesionerls->updated_at->format('d M Y') }}</td>
|
|
<td>
|
|
<a href="{{ route('kuesioner-ls') }}" class="btn btn-info btn-sm">Ubah</a>
|
|
</td>
|
|
</tr>
|
|
@else
|
|
<tr>
|
|
<td colspan="6" class="text-center" style="font-size: 14px;">Belum ada data kuesioner gaya belajar.</td>
|
|
</tr>
|
|
@endif
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pop-up Modal -->
|
|
<div class="modal fade show" id="kuesionerModal" tabindex="-1" aria-labelledby="kuesionerModalLabel" aria-modal="true" role="dialog" style="display: block; background: rgba(0,0,0,0.5);">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content shadow-lg border-0 rounded-4">
|
|
<div class="modal-body p-4 position-relative">
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close" onclick="document.getElementById('kuesionerModal').style.display='none'"></button>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0 me-4">
|
|
<img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/image%204.png" class="img-fluid rounded-circle shadow" alt="View Badge User" style="width: 100px; height: 100px; object-fit: cover;" />
|
|
</div>
|
|
<div>
|
|
<h5 class="card-title text-primary mb-2">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }}</h5>
|
|
<p class="mb-3">Kamu belum mengisi kuesioner nih!<br>Yuk lengkapi kuesioner terlebih dahulu untuk dapat mengakses materi.</p>
|
|
<a href="{{ route('kuesioner-panduan') }}" class="btn btn-gradient-primary px-4 py-2 rounded-pill shadow-sm">Isi Kuesioner</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Optional: Modal backdrop for better UX -->
|
|
<style>
|
|
.modal-backdrop-custom {
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100vw; height: 100vh;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1040;
|
|
}
|
|
.btn-gradient-primary {
|
|
background: linear-gradient(90deg, #4e54c8 0%, #8f94fb 100%);
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
.btn-gradient-primary:hover {
|
|
background: linear-gradient(90deg, #8f94fb 0%, #4e54c8 100%);
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Optional: Close modal when clicking outside the modal content
|
|
document.addEventListener('click', function(e) {
|
|
var modal = document.getElementById('kuesionerModal');
|
|
if (modal && e.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@section('helpInstructions')
|
|
[
|
|
"<h4>Selamat datang di Kuesioner!</h4><p>Hai! Kenalin aku Yura, yang akan mengajak kamu untuk menjelajah fitur kuesioner!</p>",
|
|
"<p>Pada halaman ini, kamu bisa memulai mengerjakan kuesioner.</p>",
|
|
"<h4>Mengapa saya ditampilkan halaman ini?</h4><p>Karena kamu adalah pengguna baru dan belum mengisi kuesioner. Yuk isi kuesioner agar bisa mengakses materi!</p>"
|
|
]
|
|
@endsection
|
|
@endsection |