itdept/lms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perbaikan modul data karyawan dan staff + modul SOP import

Browse Source
This commit is contained in:
Iwit
2026-06-04 08:36:18 +07:00
parent 5811409e2d
commit 91c0a8147f
26 changed files with 1167 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pages/admin/exams/create.blade.php
+59 -60
View File
@@ -11,7 +11,7 @@
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
</style>
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('type', '') }}' }">
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('question_type', '') }}' }" @update-type.window="questionType = $event.detail">
<div class="mb-6 flex items-center space-x-3">
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
@@ -20,106 +20,114 @@
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<form action="{{ url('admin/exams/questions') }}" method="POST" enctype="multipart/form-data" class="p-6 sm:p-8 space-y-6">
<form action="{{ url('admin/exams/questions') }}" method="POST" class="p-6 sm:p-8 space-y-6">
@csrf
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen</label>
<label class="block text-sm font-bold text-slate-700 mb-2">Subject / Materi Pembelajaran <span class="text-red-500">*</span></label>
<select name="subject_id" class="select2 w-full text-sm" required>
<option value="">-- Pilih Judul Materi --</option>
@foreach($subjects as $subj)
<option value="{{ $subj->id }}" {{ old('subject_id') == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen Khusus</label>
<select name="department_id" class="select2 w-full text-sm">
<option value="">-- Berlaku untuk Semua Departemen --</option>
<option value="">-- Berlaku Semua Departemen --</option>
@foreach($departments as $dept)
<option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan</label>
<label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan Khusus</label>
<select name="position_id" class="select2 w-full text-sm">
<option value="">-- Berlaku untuk Semua Jabatan --</option>
<option value="">-- Berlaku Semua Jabatan --</option>
@foreach($positions as $pos)
<option value="{{ $pos->id }}" {{ old('position_id') == $pos->id ? 'selected' : '' }}>{{ $pos->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Materi SOP / Modul <span class="text-red-500">*</span></label>
<select name="training_matrix_id" class="select2 w-full text-sm" required>
<option value="">-- Pilih Materi Pembelajaran --</option>
@foreach($matrices as $matrix)
<option value="{{ $matrix->id }}" {{ old('training_matrix_id') == $matrix->id ? 'selected' : '' }}>{{ $matrix->title }}</option>
@endforeach
</select>
</div>
<div class="lg:col-span-2">
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
<select name="type" x-model="questionType" class="select2 w-full text-sm" required>
<option value="">-- Pilih Tipe Pertanyaan --</option>
<option value="single">Single Choice (Satu Jawaban Benar)</option>
<option value="multiple">Multiple Choice (Banyak Jawaban Benar)</option>
<option value="true_false">True / False (Benar / Salah)</option>
<option value="descriptive">Descriptive (Esai / Uraian)</option>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Bentuk Soal <span class="text-red-500">*</span></label>
<select name="question_type" class="select2 w-full text-sm" required id="question_type_select">
<option value="">-- Pilih Tipe --</option>
<option value="single" {{ old('question_type') == 'single' ? 'selected' : '' }}>Single Choice (1 Kunci Jawaban)</option>
<option value="multiple" {{ old('question_type') == 'multiple' ? 'selected' : '' }}>Multiple Choice (Multi Jawaban)</option>
<option value="true_false" {{ old('question_type') == 'true_false' ? 'selected' : '' }}>True / False (Benar / Salah)</option>
<option value="descriptive" {{ old('question_type') == 'descriptive' ? 'selected' : '' }}>Descriptive (Esai / Uraian)</option>
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan <span class="text-red-500">*</span></label>
<select name="level" class="select2 w-full text-sm" required>
<option value="mudah" {{ old('level') == 'mudah' ? 'selected' : '' }}>Mudah (Easy)</option>
<option value="sedang" {{ old('level') == 'sedang' ? 'selected' : '' }}>Sedang (Medium)</option>
<option value="sulit" {{ old('level') == 'sulit' ? 'selected' : '' }}>Sulit (Hard)</option>
<label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan Soal <span class="text-red-500">*</span></label>
<select name="question_level" class="select2 w-full text-sm" required>
<option value="mudah" {{ old('question_level') == 'mudah' ? 'selected' : '' }}>Mudah</option>
<option value="sedang" {{ old('question_level') == 'sedang' ? 'selected' : '' }}>Sedang</option>
<option value="sulit" {{ old('question_level') == 'sulit' ? 'selected' : '' }}>Sulit</option>
</select>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Passing Grade</label>
<input type="number" name="passing_grade" value="{{ old('passing_grade', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Durasi (Detik)</label>
<input type="number" name="duration" value="{{ old('duration', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
</div>
</div>
</div>
<div class="border-t border-slate-100 pt-6">
<label class="block text-sm font-bold text-slate-700 mb-2">Pertanyaan <span class="text-red-500">*</span></label>
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all text-sm" placeholder="Tuliskan pertanyaan di sini...">{{ old('question_text') }}</textarea>
<label class="block text-sm font-bold text-slate-700 mb-2">Isi Teks Pertanyaan <span class="text-red-500">*</span></label>
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-blue-500/20 text-sm" placeholder="Masukkan konten pertanyaan...">{{ old('question_text') }}</textarea>
</div>
<div class="border-t border-slate-100 pt-6" x-show="questionType !== ''" x-transition>
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-3">Pengaturan Jawaban</h3>
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-3">Kerangka Pilihan & Kunci Jawaban</h3>
<div x-show="questionType === 'single'" style="display: none;" class="space-y-3">
<p class="text-xs text-slate-500 mb-3">Pilih satu radio button sebagai jawaban yang benar.</p>
@foreach(['A', 'B', 'C', 'D'] as $opt)
<div x-show="questionType === 'single'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_b', 'D' => 'option_d', 'E' => 'option_e'] as $key => $column)
<div class="flex items-center gap-3">
<input type="radio" name="correct_answer" value="{{ $opt }}" class="w-5 h-5 text-blue-600 border-slate-300 focus:ring-blue-500 cursor-pointer">
<input type="text" name="options[{{ $opt }}]" placeholder="Opsi Jawaban {{ $opt }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:border-blue-500">
<input type="radio" name="correct_answer" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300">
<input type="text" name="{{ $column }}" placeholder="Isi Pilihan {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
</div>
@endforeach
</div>
<div x-show="questionType === 'multiple'" style="display: none;" class="space-y-3">
<p class="text-xs text-slate-500 mb-3">Centang lebih dari satu checkbox untuk jawaban yang benar.</p>
@foreach(['A', 'B', 'C', 'D', 'E'] as $opt)
<div x-show="questionType === 'multiple'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $column)
<div class="flex items-center gap-3">
<input type="checkbox" name="correct_answers[]" value="{{ $opt }}" class="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500 cursor-pointer">
<input type="text" name="options[{{ $opt }}]" placeholder="Opsi Jawaban {{ $opt }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:border-blue-500">
<input type="checkbox" name="correct_answer[]" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300 rounded">
<input type="text" name="{{ $column }}" placeholder="Isi Pilihan {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
</div>
@endforeach
</div>
<div x-show="questionType === 'true_false'" style="display: none;" class="flex gap-6">
<div x-show="questionType === 'true_false'" class="flex gap-6">
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
<input type="radio" name="correct_answer" value="true" class="w-5 h-5 text-emerald-600 border-slate-300 focus:ring-emerald-500">
<input type="radio" name="correct_answer" value="True" class="w-5 h-5 text-emerald-600 border-slate-300">
<span class="font-bold text-slate-700">True (Benar)</span>
</label>
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
<input type="radio" name="correct_answer" value="false" class="w-5 h-5 text-red-600 border-slate-300 focus:ring-red-500">
<input type="radio" name="correct_answer" value="False" class="w-5 h-5 text-red-600 border-slate-300">
<span class="font-bold text-slate-700">False (Salah)</span>
</label>
</div>
<div x-show="questionType === 'descriptive'" style="display: none;">
<p class="text-xs text-slate-500 mb-3">Tuliskan kata kunci / panduan jawaban benar untuk penilai (Opsional).</p>
<textarea name="expected_answer" rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500" placeholder="Kata kunci jawaban..."></textarea>
<div x-show="questionType === 'descriptive'">
<p class="text-xs text-slate-400 mb-2">Tuliskan panduan atau esensi jawaban yang dinilai benar:</p>
<textarea name="option_a" rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500" placeholder="Catatan/Kunci Esai untuk Korektor..."></textarea>
</div>
</div>
<div class="pt-6 flex justify-end space-x-3 border-t border-slate-100 mt-8">
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md transition-all">Simpan Soal</button>
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</a>
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md">Simpan Soal</button>
</div>
</form>
</div>
@@ -128,17 +136,8 @@
<script>
$(document).ready(function() {
$('.select2').select2({ width: '100%' });
// Menjembatani Select2 dengan Alpine.js agar x-model ter-update saat Select2 berubah
$('select[name="type"]').on('change', function() {
// Ambil elemen div pembungkus Alpine (x-data) dan ubah nilainya
let el = document.querySelector('[x-data]');
if(el && el.__x) {
el.__x.$data.questionType = $(this).val();
} else {
// Alternatif dispatch event custom jika pakai versi Alpine V3 terbaru
el.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
}
$('#question_type_select').on('change', function() {
window.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
});
});
</script>
resources/views/pages/admin/exams/edit.blade.php
+75 -30
View File
@@ -11,12 +11,12 @@
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
</style>
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('type', $question->type) }}' }" @update-type.window="questionType = $event.detail">
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('question_type', $question->question_type) }}' }" @update-type.window="questionType = $event.detail">
<div class="mb-6 flex items-center space-x-3">
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Edit Soal: #{{ $question->id }}</h2>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Edit Pertanyaan #{{ $question->id }}</h2>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
@@ -24,6 +24,14 @@
@csrf @method('PUT')
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Subject / Materi Pembelajaran <span class="text-red-500">*</span></label>
<select name="subject_id" class="select2 w-full text-sm" required>
@foreach($subjects as $subj)
<option value="{{ $subj->id }}" {{ old('subject_id', $question->subject_id) == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen</label>
<select name="department_id" class="select2 w-full text-sm">
@@ -42,48 +50,86 @@
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Materi SOP / Modul <span class="text-red-500">*</span></label>
<select name="training_matrix_id" class="select2 w-full text-sm" required>
<option value="">-- Pilih Materi Pembelajaran --</option>
@foreach($matrices as $matrix)
<option value="{{ $matrix->id }}" {{ old('training_matrix_id', $question->training_matrix_id) == $matrix->id ? 'selected' : '' }}>{{ $matrix->title }}</option>
@endforeach
</select>
</div>
<div class="lg:col-span-2">
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
<select name="type" class="select2 w-full text-sm" required>
<option value="single" {{ $question->type == 'single' ? 'selected' : '' }}>Single Choice (Satu Jawaban Benar)</option>
<option value="multiple" {{ $question->type == 'multiple' ? 'selected' : '' }}>Multiple Choice (Banyak Jawaban Benar)</option>
<option value="true_false" {{ $question->type == 'true_false' ? 'selected' : '' }}>True / False (Benar / Salah)</option>
<option value="descriptive" {{ $question->type == 'descriptive' ? 'selected' : '' }}>Descriptive (Esai / Uraian)</option>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Bentuk Soal <span class="text-red-500">*</span></label>
<select name="question_type" class="select2 w-full text-sm" required id="question_type_select">
<option value="single" {{ $question->question_type == 'single' ? 'selected' : '' }}>Single Choice</option>
<option value="multiple" {{ $question->question_type == 'multiple' ? 'selected' : '' }}>Multiple Choice</option>
<option value="true_false" {{ $question->question_type == 'true_false' ? 'selected' : '' }}>True / False</option>
<option value="descriptive" {{ $question->question_type == 'descriptive' ? 'selected' : '' }}>Deskriptif</option>
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Tingkat Kesulitan <span class="text-red-500">*</span></label>
<select name="level" class="select2 w-full text-sm" required>
<option value="mudah" {{ $question->level == 'mudah' ? 'selected' : '' }}>Mudah (Easy)</option>
<option value="sedang" {{ $question->level == 'sedang' ? 'selected' : '' }}>Sedang (Medium)</option>
<option value="sulit" {{ $question->level == 'sulit' ? 'selected' : '' }}>Sulit (Hard)</option>
<select name="question_level" class="select2 w-full text-sm" required>
<option value="mudah" {{ $question->question_level == 'mudah' ? 'selected' : '' }}>Mudah</option>
<option value="sedang" {{ $question->question_level == 'sedang' ? 'selected' : '' }}>Sedang</option>
<option value="sulit" {{ $question->question_level == 'sulit' ? 'selected' : '' }}>Sulit</option>
</select>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Passing Grade</label>
<input type="number" name="passing_grade" value="{{ old('passing_grade', $question->passing_grade) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Durasi (Detik)</label>
<input type="number" name="duration" value="{{ old('duration', $question->duration) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">
</div>
</div>
</div>
<div class="border-t border-slate-100 pt-6">
<label class="block text-sm font-bold text-slate-700 mb-2">Pertanyaan <span class="text-red-500">*</span></label>
<label class="block text-sm font-bold text-slate-700 mb-2">Isi Teks Pertanyaan <span class="text-red-500">*</span></label>
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:border-blue-500">{{ old('question_text', $question->question_text) }}</textarea>
</div>
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 mt-4">
<p class="text-sm text-amber-800 font-semibold">Tipe Soal diubah?</p>
<p class="text-xs text-amber-700 mt-1">Jika Anda mengubah tipe soal, pastikan Anda mengisi kembali opsi jawabannya di bawah ini karena format jawabannya berubah.</p>
<div class="border-t border-slate-100 pt-6" x-show="questionType !== ''" x-transition>
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 border-l-4 border-blue-500 pl-3">Pengaturan Pilihan & Kunci Jawaban</h3>
@php
// Pastikan array terstruktur aman untuk dibaca blade
$checkedAnswers = is_array($question->correct_answer) ? $question->correct_answer : [$question->correct_answer];
@endphp
<div x-show="questionType === 'single'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
<div class="flex items-center gap-3">
<input type="radio" name="correct_answer" value="{{ $key }}" {{ in_array($key, $checkedAnswers) ? 'checked' : '' }} class="w-5 h-5 text-blue-600 border-slate-300">
<input type="text" name="{{ $col }}" value="{{ $question->$col }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
</div>
@endforeach
</div>
<div x-show="questionType === 'multiple'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
<div class="flex items-center gap-3">
<input type="checkbox" name="correct_answer[]" value="{{ $key }}" {{ in_array($key, $checkedAnswers) ? 'checked' : '' }} class="w-5 h-5 text-blue-600 border-slate-300 rounded">
<input type="text" name="{{ $col }}" value="{{ $question->$col }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm">
</div>
@endforeach
</div>
<div x-show="questionType === 'true_false'" class="flex gap-6">
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
<input type="radio" name="correct_answer" value="True" {{ in_array('True', $checkedAnswers) || in_array('opt_a', $checkedAnswers) ? 'checked' : '' }} class="w-5 h-5 text-emerald-600 border-slate-300">
<span class="font-bold text-slate-700">True (Benar)</span>
</label>
<label class="flex items-center gap-2 p-4 border border-slate-200 rounded-xl cursor-pointer hover:bg-slate-50 w-48">
<input type="radio" name="correct_answer" value="False" {{ in_array('False', $checkedAnswers) || in_array('opt_b', $checkedAnswers) ? 'checked' : '' }} class="w-5 h-5 text-red-600 border-slate-300">
<span class="font-bold text-slate-700">False (Salah)</span>
</label>
</div>
<div x-show="questionType === 'descriptive'">
<textarea name="option_a" rows="3" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm" placeholder="Catatan esai korektor...">{{ $question->option_a }}</textarea>
</div>
</div>
<div class="pt-6 flex justify-end space-x-3 border-t border-slate-100 mt-8">
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md transition-all">Perbarui Soal</button>
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2.5 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl">Batal</a>
<button type="submit" class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-md">Simpan Perubahan</button>
</div>
</form>
</div>
@@ -92,8 +138,7 @@
<script>
$(document).ready(function() {
$('.select2').select2({ width: '100%' });
$('select[name="type"]').on('change', function() {
$('#question_type_select').on('change', function() {
window.dispatchEvent(new CustomEvent('update-type', { detail: $(this).val() }));
});
});
resources/views/pages/admin/exams/question-bank.blade.php
+35 -23
View File
@@ -62,7 +62,6 @@
<div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm mb-6">
<form action="{{ route('admin.exams.questions') }}" method="GET">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-4">
<div>
<label class="block text-xs font-semibold text-slate-500 mb-1">Departemen</label>
@@ -75,7 +74,7 @@
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 mb-1">Posisi</label>
<label class="block text-xs font-semibold text-slate-500 mb-1">Posisi / Jabatan</label>
<select name="position_id" class="select2 w-full text-sm">
<option value="">Semua</option>
@foreach($positions as $pos)
@@ -85,8 +84,13 @@
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 mb-1">Materi / Modul</label>
<label class="block text-xs font-semibold text-slate-500 mb-1">Subject / Materi</label>
<select name="subject_id" class="select2 w-full text-sm">
<option value="">Semua Materi</option>
@foreach($subjects as $subj)
<option value="{{ $subj->id }}" {{ request('subject_id') == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
@endforeach
</select>
</div>
<div>
@@ -115,7 +119,7 @@
<select name="created_by" class="select2 w-full text-sm">
<option value="">Semua</option>
@foreach($creators as $creator)
<option value="{{ $creator->id }}" {{ request('created_by') == $creator->id ? 'selected' : '' }}>{{ $creator->first_name }}</option>
<option value="{{ $creator->id }}" {{ request('created_by') == $creator->id ? 'selected' : '' }}>{{ $creator->first_name }} {{ $creator->last_name }}</option>
@endforeach
</select>
</div>
@@ -126,7 +130,7 @@
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari teks pertanyaan..." class="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:ring-blue-500">
</div>
<div class="flex gap-2 w-full md:w-auto">
@if(request()->hasAny(['search', 'department_id', 'position_id', 'question_type', 'question_level', 'created_by']))
@if(request()->hasAny(['search', 'department_id', 'position_id', 'subject_id', 'question_type', 'question_level', 'created_by']))
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2 bg-slate-100 text-slate-600 rounded-lg text-sm font-semibold hover:bg-slate-200 transition-all text-center w-full md:w-auto">Reset</a>
@endif
<button type="submit" class="px-5 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-700 transition-all text-center w-full md:w-auto">
@@ -145,8 +149,9 @@
<th class="px-4 py-4 w-10 text-center">
<input type="checkbox" x-model="selectAll" @change="toggleAll" class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500 cursor-pointer">
</th>
<th class="px-4 py-4 font-semibold">Q.ID</th>
<th class="px-4 py-4 font-semibold">Materi / Modul</th>
<th class="px-4 py-4 font-semibold w-12">Q.ID</th>
<th class="px-4 py-4 font-semibold w-1/5">Subject / Materi</th>
<th class="px-4 py-4 font-semibold w-1/5">Penempatan</th>
<th class="px-4 py-4 font-semibold">Tipe & Level</th>
<th class="px-4 py-4 font-semibold w-1/3">Pertanyaan</th>
<th class="px-4 py-4 font-semibold">Pembuat</th>
@@ -161,28 +166,37 @@
</td>
<td class="px-4 py-3 font-mono font-bold text-slate-500">{{ $q->id }}</td>
<td class="px-4 py-3">
<span class="font-semibold text-slate-800">{{ $q->matrix->title ?? 'Umum' }}</span>
<div class="text-[11px] text-slate-500 mt-0.5">{{ $q->department->name ?? 'All Dept' }}</div>
<div class="font-bold text-slate-800 max-w-[200px] truncate" title="{{ $q->subject->name ?? 'Materi Umum' }}">
{{ $q->subject->name ?? 'Materi Umum' }}
</div>
</td>
<td class="px-4 py-3">
<span class="px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded text-[10px] font-bold uppercase tracking-wider border border-indigo-100">{{ str_replace('_', ' ', $q->type) }}</span>
<span class="font-semibold text-slate-700 block">{{ $q->department->name ?? 'Semua Dept' }}</span>
<span class="text-[11px] text-slate-400 block mt-0.5">{{ $q->position->name ?? 'Semua Jabatan' }}</span>
</td>
<td class="px-4 py-3 whitespace-nowrap">
<span class="px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded text-[10px] font-bold uppercase tracking-wider border border-indigo-100">
{{ str_replace('_', ' ', $q->question_type) }}
</span>
<div class="mt-1">
@if($q->level == 'mudah') <span class="text-[11px] font-bold text-emerald-500">Mudah</span>
@elseif($q->level == 'sedang') <span class="text-[11px] font-bold text-amber-500">Sedang</span>
@if($q->question_level == 'mudah') <span class="text-[11px] font-bold text-emerald-500">Mudah</span>
@elseif($q->question_level == 'sedang') <span class="text-[11px] font-bold text-amber-500">Sedang</span>
@else <span class="text-[11px] font-bold text-red-500">Sulit</span> @endif
</div>
</td>
<td class="px-4 py-3">
<p class="text-sm text-slate-800 line-clamp-2">{{ strip_tags($q->question_text) }}</p>
</td>
<td class="px-4 py-3">
<div class="text-sm font-semibold">{{ $q->creator->first_name ?? 'Sistem' }}</div>
<div class="text-[11px] text-slate-400">@if($q->creator && $q->creator->hasRole('trainer')) Trainer @else Admin @endif</div>
<td class="px-4 py-3 whitespace-nowrap">
<div class="text-sm font-semibold text-slate-800">{{ $q->creator->first_name ?? 'ID: '.$q->created_by }}</div>
<div class="text-[11px] text-slate-400">
@if($q->creator && $q->creator->hasRole('trainer')) Trainer @else Staf / Admin @endif
</div>
</td>
<td class="px-4 py-3 text-right space-x-2 whitespace-nowrap">
<a href="#" class="text-slate-400 hover:text-blue-600"><svg class="w-5 h-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></a>
<a href="#" class="text-slate-400 hover:text-amber-500"><svg class="w-5 h-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg></a>
<form action="#" method="POST" class="inline-block" onsubmit="return confirm('Hapus soal ini?');">
<a href="{{ url('admin/exams/questions/'.$q->id) }}" class="text-slate-400 hover:text-blue-600"><svg class="w-5 h-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg></a>
<a href="{{ url('admin/exams/questions/'.$q->id.'/edit') }}" class="text-slate-400 hover:text-amber-500"><svg class="w-5 h-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg></a>
<form action="{{ url('admin/exams/questions/'.$q->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Hapus soal ini secara permanen?');">
@csrf @method('DELETE')
<button type="submit" class="text-slate-400 hover:text-red-500"><svg class="w-5 h-5 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></button>
</form>
@@ -190,9 +204,8 @@
</tr>
@empty
<tr>
<td colspan="7" class="px-4 py-12 text-center">
<svg class="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
<p class="text-slate-500 font-medium">Belum ada data soal yang sesuai filter.</p>
<td colspan="8" class="px-4 py-12 text-center text-slate-500 font-medium">
Belum ada data soal yang sesuai kriteria filter.
</td>
</tr>
@endforelse
@@ -210,7 +223,6 @@
<script>
$(document).ready(function() {
// Inisialisasi Select2 untuk semua filter
$('.select2').select2({ width: '100%' });
});
</script>
resources/views/pages/admin/exams/questions/create.blade.php
+152
View File
@@ -0,0 +1,152 @@
@extends('layouts.app')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
.select2-container .select2-selection--single { height: 42px; border-radius: 0.75rem; border-color: #e2e8f0; background-color: #f8fafc; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px; font-size: 0.875rem; color: #334155; padding-left: 1rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 10px; }
</style>
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{ questionType: '{{ old('question_type', '') }}' }">
<div class="mb-6 flex items-center space-x-3">
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Buat Soal Baru</h2>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<form action="{{ url('admin/exams/questions') }}" method="POST" class="p-6 sm:p-8 space-y-6">
@csrf
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Subject / Materi <span class="text-red-500">*</span></label>
<select name="subject_id" class="select2 w-full text-sm" required>
<option value="">-- Pilih Judul Materi --</option>
@foreach($subjects as $subj)
<option value="{{ $subj->id }}" {{ old('subject_id') == $subj->id ? 'selected' : '' }}>{{ $subj->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Departemen</label>
<select name="department_id" class="select2 w-full text-sm">
<option value="">-- Global (Semua Dept) --</option>
@foreach($departments as $dept)
<option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Jabatan / Posisi</label>
<select name="position_id" class="select2 w-full text-sm">
<option value="">-- Global (Semua Jabatan) --</option>
@foreach($positions as $pos)
<option value="{{ $pos->id }}" {{ old('position_id') == $pos->id ? 'selected' : '' }}>{{ $pos->name }}</option>
@endforeach
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Tipe Soal <span class="text-red-500">*</span></label>
<select name="question_type" class="select2 w-full text-sm" required x-model="questionType">
<option value="">-- Pilih Tipe --</option>
<option value="single">Single Choice (1 Kunci)</option>
<option value="multiple">Multiple Choice (Multi Kunci)</option>
<option value="true_false">True / False</option>
<option value="descriptive">Descriptive (Esai)</option>
</select>
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Level <span class="text-red-500">*</span></label>
<select name="question_level" class="select2 w-full text-sm" required>
<option value="mudah" {{ old('question_level') == 'mudah' ? 'selected' : '' }}>Mudah</option>
<option value="sedang" {{ old('question_level', 'sedang') == 'sedang' ? 'selected' : '' }}>Sedang</option>
<option value="sulit" {{ old('question_level') == 'sulit' ? 'selected' : '' }}>Sulit</option>
</select>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Passing Grade</label>
<input type="number" name="passing_grade" value="{{ old('passing_grade', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500" min="0" max="100">
</div>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Durasi (Detik)</label>
<input type="number" name="duration" value="{{ old('duration', 0) }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500">
</div>
</div>
</div>
<div class="border-t border-slate-100 pt-6">
<label class="block text-sm font-bold text-slate-700 mb-2">Teks Pertanyaan <span class="text-red-500">*</span></label>
<textarea name="question_text" rows="4" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-blue-500/20" placeholder="Tuliskan pertanyaan di sini...">{{ old('question_text') }}</textarea>
</div>
<div class="border-t border-slate-100 pt-6 bg-slate-50/50 p-6 rounded-xl mt-6 border" x-show="questionType !== ''" x-cloak>
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4">Pengaturan Opsi & Kunci Jawaban</h3>
<div x-show="questionType === 'single'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
<div class="flex items-center gap-3">
<input type="radio" name="correct_answer" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300">
<span class="font-bold text-slate-500">{{ $key }}.</span>
<input type="text" name="{{ $col }}" placeholder="Opsi {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-blue-500">
</div>
@endforeach
<p class="text-xs text-slate-500 mt-2">* Klik radio button (bulatan) untuk menandai kunci jawaban yang benar.</p>
</div>
<div x-show="questionType === 'multiple'" class="space-y-3">
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $key => $col)
<div class="flex items-center gap-3">
<input type="checkbox" name="correct_answer[]" value="{{ $key }}" class="w-5 h-5 text-blue-600 border-slate-300 rounded">
<span class="font-bold text-slate-500">{{ $key }}.</span>
<input type="text" name="{{ $col }}" placeholder="Opsi {{ $key }}" class="flex-1 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-blue-500">
</div>
@endforeach
<p class="text-xs text-slate-500 mt-2">* Centang kotak (checkbox) untuk menandai lebih dari satu kunci jawaban.</p>
</div>
<div x-show="questionType === 'true_false'" class="flex gap-4">
<label class="flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-xl cursor-pointer hover:border-emerald-500 hover:bg-emerald-50 transition-colors w-48">
<input type="radio" name="correct_answer" value="True" class="w-5 h-5 text-emerald-600 border-slate-300">
<span class="font-bold text-slate-700">True (Benar)</span>
</label>
<label class="flex items-center gap-3 p-4 bg-white border border-slate-200 rounded-xl cursor-pointer hover:border-red-500 hover:bg-red-50 transition-colors w-48">
<input type="radio" name="correct_answer" value="False" class="w-5 h-5 text-red-600 border-slate-300">
<span class="font-bold text-slate-700">False (Salah)</span>
</label>
</div>
<div x-show="questionType === 'descriptive'">
<label class="block text-sm font-bold text-slate-700 mb-2">Panduan Jawaban Kunci (Opsional)</label>
<textarea name="option_a" rows="3" class="w-full px-4 py-3 bg-white border border-slate-200 rounded-xl text-sm focus:ring-blue-500" placeholder="Tuliskan kata kunci poin yang harus ada dalam esai..."></textarea>
</div>
</div>
<div class="pt-6 flex justify-end space-x-3 border-t border-slate-100">
<a href="{{ route('admin.exams.questions') }}" class="px-5 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</a>
<button type="submit" class="px-6 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-sm transition-colors">Simpan Soal</button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('.select2').select2({ width: '100%' });
// Integrasi Select2 dengan Alpine.js
$('select[name="question_type"]').on('change', function() {
let el = document.querySelector('[x-data]');
let data = Alpine.$data(el);
data.questionType = $(this).val();
});
});
</script>
@endsection
resources/views/pages/admin/exams/questions/edit.blade.php
View File
resources/views/pages/admin/exams/questions/import.blade.php
+49
View File
@@ -0,0 +1,49 @@
@extends('layouts.app')
@section('content')
<div class="max-w-3xl mx-auto px-4 py-8">
<div class="mb-6 flex items-center space-x-3">
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Import Bank Soal</h2>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden p-6 sm:p-8">
<div class="mb-8 p-4 bg-blue-50 border border-blue-100 rounded-xl text-sm text-blue-800 flex items-start gap-4">
<svg class="w-6 h-6 text-blue-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>
<p class="font-bold mb-1">Panduan Import</p>
<p>Gunakan format Excel standar untuk mengimpor soal. Pastikan kolom Departemen ID, Posisi ID, dan Subject ID diisi menggunakan ID numerik (bukan nama/teks). Tipe soal ditulis sebagai <code>single</code>, <code>multiple</code>, <code>true_false</code>, atau <code>descriptive</code>.</p>
<a href="#" class="inline-block mt-3 px-4 py-2 bg-white text-blue-600 font-bold border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors shadow-sm text-xs">Unduh Template Excel</a>
</div>
</div>
<form action="{{ url('admin/exams/questions/import') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
@csrf
<div class="border-2 border-dashed border-slate-300 rounded-2xl p-10 text-center hover:bg-slate-50 transition-colors relative">
<input type="file" name="file" required accept=".xlsx,.xls,.csv" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="file_upload">
<svg class="w-12 h-12 text-slate-400 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<p class="text-sm font-bold text-slate-700">Klik untuk memilih file excel</p>
<p class="text-xs text-slate-500 mt-1" id="file_name">atau seret dan lepas (Drag & Drop) di sini (.xlsx, .csv)</p>
</div>
<div class="flex justify-end pt-4">
<button type="submit" class="px-6 py-2.5 text-sm font-bold text-white bg-slate-800 hover:bg-slate-900 rounded-xl shadow-md transition-colors w-full md:w-auto">
Mulai Proses Import
</button>
</div>
</form>
</div>
</div>
<script>
// Script sederhana untuk menampilkan nama file yang dipilih
document.getElementById('file_upload').addEventListener('change', function(e) {
if(e.target.files.length > 0) {
document.getElementById('file_name').innerHTML = '<span class="text-blue-600 font-bold">' + e.target.files[0].name + '</span> siap diunggah.';
}
});
</script>
@endsection
resources/views/pages/admin/exams/questions/show.blade.php
+90
View File
@@ -0,0 +1,90 @@
@extends('layouts.app')
@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-3">
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Pratinjau Soal</h2>
</div>
<div class="space-x-2">
<a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-bold hover:bg-amber-600 shadow-sm transition-colors">Edit</a>
</div>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Q.ID</span>
<span class="block text-sm font-mono font-bold text-slate-900 mt-1">#{{ $question->id }} <span class="font-normal text-slate-400">(Old: {{ $question->old_id ?? '-' }})</span></span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Materi</span>
<span class="block text-sm font-bold text-slate-800 mt-1">{{ $question->subject->name ?? 'Umum' }}</span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Tipe Soal</span>
<span class="inline-block mt-1 px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded text-[10px] font-bold uppercase border border-indigo-100">
{{ str_replace('_', ' ', $question->question_type) }}
</span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Level</span>
<span class="block text-sm font-bold mt-1 {{ $question->question_level == 'mudah' ? 'text-emerald-500' : ($question->question_level == 'sedang' ? 'text-amber-500' : 'text-red-500') }}">
{{ strtoupper($question->question_level) }}
</span>
</div>
</div>
<div class="border-t border-slate-100 mt-4 pt-4 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-slate-500">
<div><b>Departemen:</b> {{ $question->department->name ?? 'Global' }}</div>
<div><b>Posisi:</b> {{ $question->position->name ?? 'Global' }}</div>
<div><b>Kriteria:</b> PG: {{ $question->passing_grade }} | Durasi: {{ $question->duration }} dtk</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 sm:p-8">
<div class="text-slate-800 text-base font-medium mb-8 leading-relaxed">
{!! nl2br(e($question->question_text)) !!}
</div>
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Struktur Kunci & Pilihan</h4>
<div class="space-y-3">
@php
$ans = $question->correct_answer;
$arrKeys = is_string($ans) ? json_decode($ans, true) : (is_array($ans) ? $ans : [$ans]);
if(!is_array($arrKeys)) $arrKeys = [];
@endphp
@if($question->question_type === 'descriptive')
<div class="p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700">
{!! nl2br(e($question->option_a)) !!}
</div>
@elseif($question->question_type === 'true_false')
<div class="p-3 rounded-xl border {{ in_array('True', $arrKeys) || in_array('opt_a', $arrKeys) ? 'bg-emerald-50 border-emerald-200 font-bold text-emerald-900' : 'border-slate-100 text-slate-600' }}">True (Benar)</div>
<div class="p-3 rounded-xl border {{ in_array('False', $arrKeys) || in_array('opt_b', $arrKeys) ? 'bg-emerald-50 border-emerald-200 font-bold text-emerald-900' : 'border-slate-100 text-slate-600' }}">False (Salah)</div>
@else
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $k => $col)
@if(!empty($question->$col))
<div class="flex items-center justify-between p-3 rounded-xl border {{ in_array($k, $arrKeys) || in_array($col, $arrKeys) ? 'bg-emerald-50 border-emerald-200 text-emerald-900 font-bold shadow-sm' : 'border-slate-100 text-slate-600 bg-slate-50' }}">
<div class="flex items-center">
<span class="w-7 h-7 rounded-md text-xs font-mono font-bold flex items-center justify-center mr-3 {{ in_array($k, $arrKeys) || in_array($col, $arrKeys) ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-500' }}">{{ $k }}</span>
<span>{{ $question->$col }}</span>
</div>
@if(in_array($k, $arrKeys) || in_array($col, $arrKeys))
<span class="text-[10px] bg-emerald-600 text-white px-2 py-1 rounded font-bold uppercase tracking-widest">Kunci</span>
@endif
</div>
@endif
@endforeach
@endif
</div>
<div class="mt-8 pt-4 border-t border-slate-100 text-xs text-slate-400 text-right">
Dibuat oleh: <span class="font-semibold">{{ $question->creator->first_name ?? 'ID '.$question->created_by }}</span> pada {{ $question->created_at->format('d M Y') }}
</div>
</div>
</div>
@endsection
resources/views/pages/admin/exams/show.blade.php
+50 -31
View File
@@ -7,66 +7,85 @@
<a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
</a>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Detail Pertanyaan</h2>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Pratinjau Soal</h2>
</div>
<a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-blue-50 text-blue-700 rounded-lg text-sm font-bold hover:bg-blue-100 transition-colors">
Edit Soal
<a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold hover:bg-blue-700 transition-colors shadow-sm">
Edit Konten Soal
</a>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Q.ID</span>
<span class="block text-sm font-mono font-bold text-slate-900">#{{ $question->id }}</span>
<span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">ID Sistem</span>
<span class="block text-sm font-mono font-bold text-slate-900 mt-0.5">#{{ $question->id }} <span class="text-xs font-normal text-slate-400">(Old ID: {{ $question->old_id ?? '-' }})</span></span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Materi SOP</span>
<span class="block text-sm font-medium text-slate-900">{{ $question->matrix->title ?? 'Umum' }}</span>
<span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Subject / Materi</span>
<span class="block text-sm font-bold text-slate-800 mt-0.5">{{ $question->subject->name ?? 'Materi Umum' }}</span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Tipe Soal</span>
<span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Bentuk Tipe</span>
<span class="inline-block mt-1 px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded text-[10px] font-bold uppercase border border-indigo-100">
{{ str_replace('_', ' ', $question->type) }}
{{ str_replace('_', ' ', $question->question_type) }}
</span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Level</span>
<span class="block text-sm font-bold mt-1 {{ $question->level == 'mudah' ? 'text-emerald-500' : ($question->level == 'sedang' ? 'text-amber-500' : 'text-red-500') }}">
{{ strtoupper($question->level) }}
<span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Tingkat Kesulitan</span>
<span class="block text-sm font-bold mt-0.5 {{ $question->question_level == 'mudah' ? 'text-emerald-500' : ($question->question_level == 'sedang' ? 'text-amber-500' : 'text-red-500') }}">
{{ strtoupper($question->question_level) }}
</span>
</div>
</div>
<div class="border-t border-slate-100 mt-4 pt-4 flex gap-6">
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Dikhususkan untuk Departemen:</span>
<span class="block text-sm text-slate-700">{{ $question->department->name ?? 'Semua Departemen' }}</span>
</div>
<div>
<span class="block text-xs font-semibold text-slate-400 uppercase">Dikhususkan untuk Jabatan:</span>
<span class="block text-sm text-slate-700">{{ $question->position->name ?? 'Semua Jabatan' }}</span>
</div>
<div class="border-t border-slate-100 mt-4 pt-4 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-slate-500">
<div><b>Departemen Target:</b> {{ $question->department->name ?? 'Semua Departemen (Global)' }}</div>
<div><b>Jabatan Target:</b> {{ $question->position->name ?? 'Semua Struktur Jabatan' }}</div>
<div><b>Kelayakan Kelulusan:</b> Min score <span class="font-bold text-slate-800">{{ $question->passing_grade }}</span> (Durasi: {{ $question->duration }} detik)</div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 sm:p-8">
<h4 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Isi Pertanyaan</h4>
<div class="prose prose-slate max-w-none text-slate-800 text-lg mb-8">
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 border-b border-slate-100 pb-2">Konten Soal</h4>
<div class="text-slate-800 text-base font-medium mb-8 leading-relaxed">
{!! nl2br(e($question->question_text)) !!}
</div>
<h4 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Opsi Jawaban & Kunci</h4>
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Struktur Kunci & Pilihan</h4>
<div class="space-y-3">
@if($question->type === 'descriptive')
<div class="space-y-20">
@if($question->question_type === 'descriptive')
<div class="p-4 bg-slate-50 border border-slate-200 rounded-xl">
<span class="text-xs font-bold text-slate-500 uppercase">Kunci / Panduan Penilaian:</span>
<p class="text-slate-800 mt-2">{{ $question->expected_answer ?? 'Tidak ada kata kunci khusus yang diatur.' }}</p>
<span class="text-xs font-bold text-slate-400 uppercase block mb-1">Panduan Jawaban Kunci Esai:</span>
<p class="text-slate-700 text-sm">{!! nl2br(e($question->option_a)) !!}</p>
</div>
@elseif($question->question_type === 'true_false')
@php $correct = is_array($question->correct_answer) ? $question->correct_answer[0] : $question->correct_answer; @endphp
<div class="space-y-2">
<div class="flex items-center p-3 rounded-xl border {{ in_array($correct, ['True','opt_a']) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
<span class="w-6 text-center text-xs font-bold mr-2">✔</span> True (Benar)
</div>
<div class="flex items-center p-3 rounded-xl border {{ in_array($correct, ['False','opt_b']) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
<span class="w-6 text-center text-xs font-bold mr-2">✔</span> False (Salah)
</div>
</div>
@else
<p class="italic text-sm text-slate-500">Tampilan opsi jawaban disesuaikan dengan struktur relasi database opsi Anda.</p>
<div class="space-y-2">
@php $arrKeys = is_array($question->correct_answer) ? $question->correct_answer : [$question->correct_answer]; @endphp
@foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $k => $col)
@if(!empty($question->$col))
<div class="flex items-center justify-between p-3 rounded-xl border {{ in_array($k, $arrKeys) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
<div class="flex items-center">
<span class="w-6 h-6 rounded-md text-xs font-mono font-bold bg-slate-100 flex items-center justify-center mr-3 {{ in_array($k, $arrKeys) ? 'bg-emerald-500 text-white' : '' }}">{{ $k }}</span>
<span>{{ $question->$col }}</span>
</div>
@if(in_array($k, $arrKeys))
<span class="text-xs bg-emerald-600 text-white px-2 py-0.5 rounded font-bold uppercase tracking-wider">Kunci</span>
@endif
</div>
@endif
@endforeach
</div>
@endif
</div>
</div>
resources/views/pages/admin/sop/index.blade.php
+57 -35
View File
@@ -1,57 +1,79 @@
@extends('layouts.app')
@section('title', 'Master SOP - HRIS')
@section('content')
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center mb-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
<div>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Dokumen SOP & CPOB</h2>
<p class="text-sm text-slate-500">Pusat data prosedur operasi standar perusahaan.</p>
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Manajemen SOP & Training Matrix</h2>
<p class="text-sm text-slate-500 mt-1">Kelola dokumen Standar Operasional Prosedur dan modul pelatihan.</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<a href="#" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold hover:bg-blue-700 shadow-sm transition-all">
+ Tambah SOP Baru
</a>
</div>
<a href="{{ route('admin.sops.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-semibold hover:bg-indigo-700 shadow-sm transition-all">
+ Registrasi SOP
</a>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
<div class="bg-white p-5 rounded-t-2xl border border-slate-200 border-b-0">
<form action="{{ route('admin.sops.index') }}" method="GET" class="flex flex-col md:flex-row gap-4">
<div class="w-full md:w-1/3">
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari judul SOP atau Modul..."
class="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500">
</div>
<button type="submit" class="px-5 py-2 bg-slate-800 text-white rounded-xl text-sm font-semibold hover:bg-slate-700">Cari</button>
@if(request('search'))
<a href="{{ route('admin.sops.index') }}" class="px-5 py-2 bg-red-50 text-red-600 border border-red-100 rounded-xl text-sm font-semibold hover:bg-red-100">Reset</a>
@endif
</form>
</div>
<div class="bg-white border border-slate-200 rounded-b-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50 border-b border-slate-200 text-xs uppercase tracking-wider text-slate-500 font-bold">
<th class="p-4">Kode SOP</th>
<th class="p-4">Judul Dokumen</th>
<th class="p-4">Versi</th>
<th class="p-4">Status</th>
<th class="p-4 text-right">Aksi</th>
<table class="w-full text-left text-sm whitespace-nowrap">
<thead class="bg-slate-50/80 text-slate-500 text-xs uppercase tracking-wider border-b border-slate-200">
<tr>
<th class="px-6 py-4 font-semibold">No</th>
<th class="px-6 py-4 font-semibold">Judul SOP / Modul</th>
<th class="px-6 py-4 font-semibold">Departemen Terkait</th>
<th class="px-6 py-4 font-semibold">Status</th>
<th class="px-6 py-4 font-semibold text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 text-sm text-slate-700">
@foreach($sops as $sop)
<tbody class="divide-y divide-slate-100 text-slate-700">
{{-- Ganti $sops dengan variabel yang Anda kirim dari DashboardController@sopIndex --}}
@forelse($sops ?? [] as $index => $sop)
<tr class="hover:bg-slate-50">
<td class="p-4 font-mono font-medium">{{ $sop->sop_code }}</td>
<td class="p-4 font-bold text-slate-800">{{ $sop->title }}</td>
<td class="p-4">v{{ $sop->version }}</td>
<td class="p-4">
@if($sop->status == 'Active')
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full">Active</span>
@elseif($sop->status == 'Draft')
<span class="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full">Draft</span>
@else
<span class="px-2.5 py-1 bg-slate-200 text-slate-700 text-xs font-bold rounded-full">Obsolete</span>
@endif
<td class="px-6 py-4 text-slate-500">{{ $index + 1 }}</td>
<td class="px-6 py-4 font-bold text-slate-900">{{ $sop->title ?? $sop->name ?? 'Judul SOP' }}</td>
<td class="px-6 py-4">{{ $sop->department->name ?? 'Semua Departemen' }}</td>
<td class="px-6 py-4">
<span class="px-2 py-1 bg-emerald-50 text-emerald-600 rounded text-[10px] font-bold uppercase tracking-wider border border-emerald-100">Aktif</span>
</td>
<td class="p-4 text-right">
<a href="#" class="text-slate-500 hover:text-indigo-600 font-medium text-xs">Lihat Detail</a>
<td class="px-6 py-4 text-right space-x-3">
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium text-sm">Lihat Dokumen</a>
<a href="#" class="text-slate-400 hover:text-blue-600 font-medium text-sm">Edit</a>
</td>
</tr>
@endforeach
@empty
<tr>
<td colspan="5" class="px-6 py-12 text-center">
<svg class="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<p class="text-slate-500 font-medium">Belum ada data SOP atau Training Matrix.</p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="p-4 border-t border-slate-100">
{{-- Jika ada pagination --}}
@if(isset($sops) && method_exists($sops, 'hasPages') && $sops->hasPages())
<div class="p-4 border-t border-slate-100 bg-slate-50/50">
{{ $sops->links() }}
</div>
@endif
</div>
</div>
@endsection