Sync SOP ke e-doc Plant & Add Subject dan penyempurnaan bagian matrix training karyawan

This commit is contained in:
Iwit
2026-06-04 19:01:17 +07:00
parent 91c0a8147f
commit 1089f60a3d
26 changed files with 1241 additions and 155 deletions
@@ -115,13 +115,37 @@
</div>
<div class="border-t border-slate-100 pt-6 mt-6">
<label class="block text-sm font-bold text-slate-700 mb-2">Modul SOP Training (Marketing)</label>
<select name="training_matrix_id" class="select2 w-full text-sm">
<option value="">-- Kosongkan jika bukan Plant Dept --</option>
@foreach($trainingMatrices as $matrix)
<option value="{{ $matrix->id }}" {{ old('training_matrix_id') == $matrix->id ? 'selected' : '' }}>{{ $matrix->title ?? $matrix->name }}</option>
@endforeach
</select>
<h3 class="text-sm font-bold text-slate-700 mb-1">Materi SOP / Training Matrix</h3>
<p class="text-xs text-slate-500 mb-4">Pilih materi wajib untuk karyawan ini dan tentukan status pelatihannya.</p>
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 max-h-[400px] overflow-y-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="border-b border-slate-200 text-slate-500 uppercase text-xs sticky top-0 bg-slate-50">
<tr>
<th class="py-2 w-12 text-center">Pilih</th>
<th class="py-2">Nama Materi / Dokumen SOP</th>
<th class="py-2 w-48 text-center">Status Training</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
@foreach($subjects as $subject)
<tr class="hover:bg-white transition-colors">
<td class="py-3 text-center">
<input type="checkbox" name="trainings[{{ $subject->id }}][selected]" value="1"
class="w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
</td>
<td class="py-3 font-bold text-slate-700">{{ $subject->name }}</td>
<td class="py-3">
<select name="trainings[{{ $subject->id }}][status]" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs font-bold focus:ring-blue-500">
<option value="belum_training" class="text-amber-600">Belum Training</option>
<option value="passed" class="text-emerald-600">Lulus (Passed)</option>
</select>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="border-t border-slate-100 pt-6 mt-6" x-data="{ documents: [{ id: 1 }], addDocument() { this.documents.push({ id: Date.now() }); }, removeDocument(id) { this.documents = this.documents.filter(doc => doc.id !== id); } }">
@@ -20,6 +20,16 @@
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Edit Data Karyawan</h2>
</div>
@if ($errors->any())
<div class="mb-6 p-4 bg-red-50 text-red-700 rounded-xl border border-red-100 text-sm font-bold">
<ul class="list-disc pl-5">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<form action="{{ route('admin.employees.update', $employee->id) }}" method="POST" enctype="multipart/form-data" class="p-6 sm:p-8 space-y-6">
@csrf
@@ -85,7 +95,7 @@
<label class="block text-sm font-bold text-slate-700 mb-2">Posisi / Jabatan <span class="text-red-500">*</span></label>
<select name="position_id" id="posSelect" class="select2 w-full text-sm" required>
<option value="">-- Pilih Jabatan --</option>
</select>
</select>
</div>
<div class="bg-slate-50 p-4 border border-slate-200 rounded-xl">
@@ -114,13 +124,82 @@
</div>
<div class="border-t border-slate-100 pt-6 mt-6">
<label class="block text-sm font-bold text-slate-700 mb-2">Modul SOP Training (Marketing)</label>
<select name="training_matrix_id" class="select2 w-full text-sm">
<option value="">-- Kosongkan jika bukan marketing --</option>
@foreach($trainingMatrices as $matrix)
<option value="{{ $matrix->id }}" {{ old('training_matrix_id', $employee->training_matrix_id) == $matrix->id ? 'selected' : '' }}>{{ $matrix->title ?? $matrix->name }}</option>
@endforeach
</select>
<h3 class="text-sm font-bold text-slate-700 mb-1">Materi SOP / Training Matrix</h3>
<p class="text-xs text-slate-500 mb-4">Perbarui materi dan status pelatihan untuk karyawan ini.</p>
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 max-h-[400px] overflow-y-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="border-b border-slate-200 text-slate-500 uppercase text-xs sticky top-0 bg-slate-50">
<tr>
<th class="py-2 w-12 text-center">Pilih</th>
<th class="py-2">Nama Materi / Dokumen SOP</th>
<th class="py-2 w-48 text-center">Status Training</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
@foreach($subjects as $subject)
@php
$hasTraining = $employee->trainings->contains('id', $subject->id);
$currentStatus = $hasTraining ? $employee->trainings->find($subject->id)->pivot->status : 'belum_training';
@endphp
<tr class="hover:bg-white transition-colors">
<td class="py-3 text-center">
<input type="checkbox" name="trainings[{{ $subject->id }}][selected]" value="1"
{{ $hasTraining ? 'checked' : '' }}
class="w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
</td>
<td class="py-3 font-bold text-slate-700">{{ $subject->name }}</td>
<td class="py-3">
<select name="trainings[{{ $subject->id }}][status]" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs font-bold focus:ring-blue-500">
<option value="belum_training" class="text-amber-600" {{ $currentStatus == 'belum_training' ? 'selected' : '' }}>Belum Training</option>
<option value="passed" class="text-emerald-600" {{ $currentStatus == 'passed' ? 'selected' : '' }}>Lulus (Passed)</option>
</select>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="mt-8 pt-6 border-t border-slate-200">
<h3 class="text-lg font-bold text-slate-800 mb-2">Training Matrix & Kompetensi</h3>
<p class="text-sm text-slate-500 mb-4">Pilih materi/SOP wajib untuk karyawan ini dan perbarui status pelatihannya.</p>
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 max-h-[400px] overflow-y-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="border-b border-slate-200 text-slate-500 uppercase text-xs sticky top-0 bg-slate-50">
<tr>
<th class="py-2 w-12 text-center">Pilih</th>
<th class="py-2">Nama Materi / Dokumen SOP</th>
<th class="py-2 w-48 text-center">Status Training</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200">
@foreach($subjects as $subject)
@php
// Mengecek apakah relasi dengan pivot sudah ada di database
$hasTraining = $employee->trainings->contains('id', $subject->id);
$currentStatus = $hasTraining ? $employee->trainings->find($subject->id)->pivot->status : 'belum_training';
@endphp
<tr class="hover:bg-white transition-colors">
<td class="py-3 text-center">
<input type="checkbox" name="trainings[{{ $subject->id }}][selected]" value="1"
{{ $hasTraining ? 'checked' : '' }}
class="w-5 h-5 text-blue-600 rounded border-slate-300 focus:ring-blue-500 cursor-pointer">
</td>
<td class="py-3 font-bold text-slate-700">{{ $subject->name }}</td>
<td class="py-3">
<select name="trainings[{{ $subject->id }}][status]" class="w-full px-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs font-bold focus:ring-blue-500">
<option value="belum_training" class="text-amber-600" {{ $currentStatus == 'belum_training' ? 'selected' : '' }}>Belum Training</option>
<option value="passed" class="text-emerald-600" {{ $currentStatus == 'passed' ? 'selected' : '' }}>Lulus (Passed)</option>
</select>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="border-t border-slate-100 pt-6 mt-6">
@@ -140,7 +219,6 @@
$(document).ready(function() {
$('.select2').select2({ width: '100%' });
// Logika Dropdown Bertingkat untuk Edit (Sama dengan Create)
const mapping = @json($deptPosMapping ?? []);
const posSelect = $('#posSelect');
const deptSelect = $('#deptSelect');
@@ -88,6 +88,52 @@
</dl>
</div>
<div class="mt-8 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
<h3 class="text-lg font-bold text-slate-800">Riwayat Training & SOP</h3>
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">
{{ $employee->trainings->count() }} Materi Diikuti
</span>
</div>
<div class="p-0 overflow-x-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-white border-b border-slate-100 text-slate-500 uppercase text-xs">
<tr>
<th class="px-6 py-3 w-16 text-center">No</th>
<th class="px-6 py-3">Nama Materi / Dokumen</th>
<th class="px-6 py-3 w-48 text-center">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
@forelse($employee->trainings as $index => $training)
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-4 text-center text-slate-400">{{ $index + 1 }}</td>
<td class="px-6 py-4 font-bold text-slate-700">{{ $training->name }}</td>
<td class="px-6 py-4 text-center">
@if($training->pivot->status == 'passed')
<span class="inline-flex items-center px-2.5 py-1 bg-emerald-50 text-emerald-700 rounded-md text-xs font-bold border border-emerald-200">
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Lulus
</span>
@else
<span class="inline-flex items-center px-2.5 py-1 bg-amber-50 text-amber-700 rounded-md text-xs font-bold border border-amber-200">
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Belum Training
</span>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="3" class="px-6 py-8 text-center text-slate-500">Karyawan ini belum ditugaskan untuk materi/SOP apapun.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
<!-- Kolom Kanan: Info Personal -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
<h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider mb-4 pb-2 border-b border-slate-100">Informasi Personal & Kontak</h3>
@@ -115,14 +115,15 @@
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 mb-1">Pembuat Soal</label>
<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 }} {{ $creator->last_name }}</option>
@endforeach
</select>
</div>
<label class="block text-xs font-bold text-slate-500 uppercase mb-1">Pembuat Soal</label>
<select name="creator_id" class="w-full px-3 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:ring-blue-500" onchange="this.form.submit()">
<option value="">-- Semua Trainer --</option>
@foreach($creators as $creator)
<option value="{{ $creator->id }}" {{ request('creator_id') == $creator->id ? 'selected' : '' }}>
{{ $creator->first_name }} {{ $creator->last_name }}
</option>
@endforeach
</select>
</div>
<div class="flex flex-col md:flex-row gap-4 items-center justify-between border-t border-slate-100 pt-4">
@@ -1,79 +0,0 @@
@extends('layouts.app')
@section('content')
<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">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>
</div>
<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 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-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="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="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>
@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>
{{-- 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
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuka Dokumen...</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f8fafc; margin: 0; }
.loader { text-align: center; color: #64748b; }
.spinner { border: 4px solid #e2e8f0; border-top: 4px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
</style>
</head>
<body onload="document.getElementById('seeddms-login').submit();">
<div class="loader">
<div class="spinner"></div>
<h3>Sedang menghubungkan ke server dokumen...</h3>
<p>Mohon tunggu sebentar.</p>
</div>
<form id="seeddms-login" action="{{ $loginUrl }}" method="POST" style="display: none;">
<input type="hidden" name="guestlogin" value="1">
<input type="hidden" name="referuri" value="{{ $targetUri }}">
</form>
</body>
</html>
@@ -0,0 +1,134 @@
@extends('layouts.app')
@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
<div class="mb-6">
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Master Dokumen SOP</h2>
<p class="text-sm text-slate-500 mt-1">Data ditarik secara Real-Time (Read-Only) dari Database Plantdoc Server 192.168.10.11</p>
</div>
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 mb-6">
<form action="{{ route('admin.sops.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
<div class="flex-1 min-w-[200px]">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Pencarian</label>
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari No / Judul..."
class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm focus:ring-blue-500 bg-slate-50 focus:bg-white">
</div>
<div class="w-full md:w-48">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Folder / Dept</label>
<select name="department" class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm bg-slate-50 focus:bg-white">
<option value="">Semua Folder</option>
@foreach($departments as $dept)
<option value="{{ $dept->id }}" {{ request('department') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
@endforeach
</select>
</div>
<div class="w-full md:w-48">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Kategori</label>
<select name="category" class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm bg-slate-50 focus:bg-white">
<option value="">Semua Kategori</option>
@foreach($categories as $cat)
<option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
@endforeach
</select>
</div>
<div class="w-full md:w-28">
<label class="block text-xs font-bold text-slate-500 uppercase mb-2">Versi</label>
<select name="version" class="w-full px-4 py-2 border border-slate-200 rounded-xl text-sm bg-slate-50 focus:bg-white">
<option value="">Semua</option>
@foreach($versions as $ver)
<option value="{{ $ver }}" {{ request('version') == $ver ? 'selected' : '' }}>v.{{ $ver }}</option>
@endforeach
</select>
</div>
<div class="flex gap-2 w-full md:w-auto">
<button type="submit" class="px-6 py-2 bg-blue-600 text-white text-sm font-bold rounded-xl hover:bg-blue-700 shadow-sm transition-colors">Cari</button>
<a href="{{ route('admin.sops.index') }}" class="px-4 py-2 bg-slate-100 text-slate-600 text-sm font-bold rounded-xl hover:bg-slate-200 transition-colors">Reset</a>
</div>
<div class="flex gap-2 ml-auto w-full md:w-auto mt-4 md:mt-0 pt-4 md:pt-0 border-t md:border-t-0 border-slate-100">
<button type="submit" name="export" value="excel" class="flex items-center px-4 py-2 bg-emerald-500 text-white text-sm font-bold rounded-xl hover:bg-emerald-600 shadow-sm transition-colors">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
Excel
</button>
<button type="submit" name="export" value="pdf" class="flex items-center px-4 py-2 bg-red-500 text-white text-sm font-bold rounded-xl hover:bg-red-600 shadow-sm transition-colors">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
PDF
</button>
</div>
</form>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-xs tracking-wider">
<tr>
<th class="px-6 py-4 font-bold">Dept</th>
<th class="px-6 py-4 font-bold">Kategori</th>
<th class="px-6 py-4 font-bold">Nomor Dokumen</th>
<th class="px-6 py-4 font-bold">Judul SOP</th>
<th class="px-6 py-4 font-bold text-center">Versi</th>
<th class="px-6 py-4 font-bold">Tanggal Upload</th>
<th class="px-6 py-4 font-bold text-center">Aksi / File</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
@forelse($sops as $sop)
@php
// Prioritas 1: Baca versi dari Nomor SOP
$versi = substr(trim($sop->nomor_sop), -2);
if (!is_numeric($versi)) {
// Prioritas 2: Baca versi dari Judul SOP jika Nomor SOP tidak ada angka versinya
$versi = substr(trim($sop->judul_sop), -2);
if (!is_numeric($versi)) $versi = '-';
}
@endphp
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-4 font-bold text-indigo-700">{{ $sop->nama_departemen ?? '-' }}</td>
<td class="px-6 py-4 text-slate-600 text-xs uppercase font-bold">{{ $sop->nama_kategori ?? 'Umum' }}</td>
<td class="px-6 py-4 font-bold text-slate-800 whitespace-nowrap">{{ $sop->nomor_sop }}</td>
<td class="px-6 py-4 font-medium text-slate-700">{{ $sop->judul_sop ?? '-' }}</td>
<td class="px-6 py-4 text-center">
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded-md text-xs font-bold border border-slate-200">
v.{{ $versi }}
</span>
</td>
<td class="px-6 py-4 text-slate-500 whitespace-nowrap">
{{ \Carbon\Carbon::createFromTimestamp($sop->tanggal_dibuat)->format('d M Y') }}
</td>
<td class="px-6 py-4 text-center">
@if(!empty($sop->file_pdf))
<a href="{{ route('admin.sops.open', $sop->id) }}" target="_blank" class="inline-flex items-center text-xs font-bold text-white bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-xl transition-colors shadow-sm">
<svg class="w-4 h-4 mr-1.5" 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>
Buka File
</a>
@else
<span class="text-xs font-medium text-slate-400">Tidak tersedia</span>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="6" 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="2" 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">SOP tidak ditemukan dengan filter tersebut.</p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="p-4 border-t border-slate-100 bg-white">
{{ $sops->appends(request()->query())->links() }}
</div>
</div>
</div>
@endsection
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<title>Master Dokumen - Tunggal Pharma</title>
<style>
body { font-family: 'Helvetica', 'Arial', sans-serif; font-size: 11px; color: #333; }
.header-title { text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #1e3a8a; }
.divider { border-bottom: 2px solid #1e3a8a; margin-bottom: 15px; }
.info-table { width: 100%; margin-bottom: 15px; border: none; font-size: 11px; }
.info-table td { border: none; padding: 4px 0; }
table.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.data-table th, table.data-table td { border: 1px solid #94a3b8; padding: 6px 8px; text-align: left; vertical-align: top; }
table.data-table th { background-color: #f1f5f9; font-weight: bold; text-transform: uppercase; font-size: 10px; color: #475569; }
table.data-table tr:nth-child(even) { background-color: #f8fafc; }
.text-center { text-align: center; }
.badge { background: #e2e8f0; padding: 2px 5px; border-radius: 3px; font-size: 10px; font-weight: bold; }
</style>
</head>
<body>
<div class="header-title">Data Master Dokumen - Tunggal Pharma</div>
<div class="divider"></div>
<table class="info-table">
<tr>
<td width="15%"><b>Diunduh Oleh</b></td>
<td width="35%">: {{ $downloader }}</td>
<td width="15%"><b>Total Record</b></td>
<td width="35%">: <span style="background: #1e3a8a; color: white; padding: 2px 6px; border-radius: 3px;">{{ $totalRecords }} Dokumen</span></td>
</tr>
<tr>
<td><b>Waktu Unduh</b></td>
<td>: {{ $downloadTime }} WIB</td>
<td></td>
<td></td>
</tr>
</table>
<table class="data-table">
<thead>
<tr>
<th class="text-center" width="5%">No</th>
<th width="15%">Dept / Folder</th>
<th width="15%">Kategori</th>
<th width="20%">Nomor Dokumen</th>
<th width="30%">Judul Dokumen</th>
<th class="text-center" width="6%">Versi</th>
<th width="9%">Tgl Upload</th>
</tr>
</thead>
<tbody>
@foreach($dataExport as $index => $sop)
@php
$versi = substr(trim($sop->nomor_sop), -2);
if (!is_numeric($versi)) {
$versi = substr(trim($sop->judul_sop), -2);
if (!is_numeric($versi)) $versi = '-';
}
@endphp
<tr>
<td class="text-center">{{ $index + 1 }}</td>
<td><b>{{ $sop->nama_departemen ?? '-' }}</b></td>
<td>{{ $sop->nama_kategori ?? '-' }}</td>
<td>{{ $sop->nomor_sop }}</td>
<td>{{ $sop->judul_sop }}</td>
<td class="text-center"><span class="badge">v.{{ $versi }}</span></td>
<td>{{ \Carbon\Carbon::createFromTimestamp($sop->tanggal_dibuat)->format('d/m/Y') }}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>
@@ -0,0 +1,127 @@
@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>
/* Menyesuaikan tampilan Select2 agar menyatu dengan desain Tailwind */
.select2-container .select2-selection--single { height: 46px; border-radius: 0.75rem; border-color: #e2e8f0; background-color: #f8fafc; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; font-size: 0.875rem; color: #334155; padding-left: 1rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 0.5rem; border-color: #cbd5e1; }
</style>
<div class="max-w-2xl mx-auto px-4 py-8">
<div class="flex items-center space-x-3 mb-6">
<a href="{{ route('admin.subjects.index') }}" 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 Materi</h2>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<form action="{{ route('admin.subjects.update', $subject->id) }}" method="POST" class="p-6 sm:p-8 space-y-6">
@csrf
@method('PUT')
@php
// 1. Ambil nama materi saat ini dari database
$currentName = old('name', $subject->name) ?? '';
$isSopMatch = false;
$matchedSopValue = '';
$originalManualValue = $currentName;
// 2. Logika Smart Auto-Sync: Cocokkan dengan data Master SOP
if ($currentName) {
// Pastikan variabel $sops sudah dikirim dari SubjectController@edit
if(isset($sops)) {
foreach($sops as $sop) {
$fullname = $sop->nomor . ' - ' . $sop->judul;
// Jika persis sama ATAU nama lama mengandung unsur nomor SOP
if ($currentName === $fullname || strpos($currentName, $sop->nomor) !== false) {
$isSopMatch = true;
$matchedSopValue = $fullname; // Arahkan ke nama resmi
$originalManualValue = ''; // Kosongkan form manual
break;
}
}
}
}
// 3. Tentukan mode radio button saat halaman dimuat
$defaultType = ($currentName && !$isSopMatch) ? 'manual' : 'sop';
@endphp
<div x-data="{ inputType: '{{ $defaultType }}' }">
<label class="block text-sm font-bold text-slate-700 mb-2">Sumber Materi</label>
<div class="flex space-x-6 mb-4 p-3 bg-slate-50 rounded-xl border border-slate-200">
<label class="flex items-center cursor-pointer">
<input type="radio" x-model="inputType" value="sop" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-slate-300">
<span class="ml-2 text-sm font-bold text-slate-700">Dari Master SOP</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" x-model="inputType" value="manual" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-slate-300">
<span class="ml-2 text-sm font-bold text-slate-700">Input Manual (Non-Plant)</span>
</label>
</div>
<label class="block text-sm font-bold text-slate-700 mb-2">Nama Materi <span class="text-red-500">*</span></label>
<div x-show="inputType === 'sop'">
<select name="name" x-bind:disabled="inputType !== 'sop'" class="select2-sop w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500" required>
<option value="">-- Cari dan Pilih Dokumen SOP --</option>
@if(isset($sops))
@foreach($sops as $sop)
@php $fullname = $sop->nomor . ' - ' . $sop->judul; @endphp
<option value="{{ $fullname }}" {{ $matchedSopValue === $fullname ? 'selected' : '' }}>
{{ $fullname }}
</option>
@endforeach
@endif
</select>
</div>
<div x-show="inputType === 'manual'" x-cloak>
<input type="text" name="name" x-bind:disabled="inputType !== 'manual'" value="{{ $originalManualValue }}"
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 focus:border-blue-600 transition-all"
placeholder="Contoh: Modul Marketing Advance" required>
</div>
@error('name')
<p class="text-red-500 text-xs mt-2 font-semibold">{{ $message }}</p>
@enderror
</div>
<div class="pt-4 flex justify-end space-x-3 border-t border-slate-100">
<a href="{{ route('admin.subjects.index') }}" 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-6 py-2.5 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-sm transition-colors">Update Materi</button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
// Inisialisasi Select2
$('.select2-sop').select2({
placeholder: "-- Cari dan Pilih Dokumen SOP --",
width: '100%'
});
// Memaksa Select2 merender ulang ukurannya ketika user berpindah dari mode Manual ke SOP
$('input[type=radio][value=sop]').change(function() {
setTimeout(function() {
$('.select2-sop').select2('destroy').select2({
placeholder: "-- Cari dan Pilih Dokumen SOP --",
width: '100%'
});
}, 50);
});
});
</script>
@endsection
@@ -0,0 +1,204 @@
@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>
/* Styling Select2 untuk Tailwind */
.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; }
.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 0.5rem; border-color: #cbd5e1; }
</style>
<div class="max-w-5xl mx-auto px-4 py-8" x-data="{
showModal: false,
editMode: false,
formAction: '',
subjectName: '',
inputType: 'sop',
// Data Master SOP untuk logika Sinkronisasi Cerdas
sopsData: [
@foreach($sops as $sop)
{ nomor: '{{ $sop->nomor }}', full: '{{ $sop->nomor }} - {{ addslashes($sop->judul) }}' },
@endforeach
],
// Fungsi saat menekan tombol Tambah
openCreate() {
this.editMode = false;
this.formAction = '{{ route('admin.subjects.store') }}';
this.subjectName = '';
this.inputType = 'sop';
this.showModal = true;
this.syncSelect2('');
},
// Fungsi saat menekan tombol Edit
openEdit(id, name, url) {
this.editMode = true;
this.formAction = url;
let isSop = false;
let targetSop = '';
// Pengecekan Smart Auto-Sync: Cocokkan nama dengan Master SOP
for (let sop of this.sopsData) {
if (name === sop.full || name.includes(sop.nomor)) {
isSop = true;
targetSop = sop.full;
break;
}
}
if (isSop) {
this.inputType = 'sop';
this.subjectName = targetSop;
this.syncSelect2(targetSop); // Arahkan dropdown ke nama SOP yang benar
} else {
this.inputType = 'manual';
this.subjectName = name; // Pertahankan nama manual
this.syncSelect2('');
}
this.showModal = true;
},
// Fungsi untuk memperbarui tampilan Dropdown Select2 secara otomatis
syncSelect2(val) {
setTimeout(() => {
$('#sopSelect').val(val).trigger('change');
}, 50);
}
}">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-slate-800 tracking-tight">Kelola Materi (Subjects)</h2>
<button @click="openCreate()" class="px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-bold hover:bg-blue-700 shadow-sm transition-colors">
+ Tambah Materi
</button>
</div>
@if(session('success'))
<div class="mb-4 p-4 bg-emerald-50 text-emerald-700 rounded-xl border border-emerald-100 text-sm font-bold">{{ session('success') }}</div>
@endif
@if(session('error'))
<div class="mb-4 p-4 bg-red-50 text-red-700 rounded-xl border border-red-100 text-sm font-bold">{{ session('error') }}</div>
@endif
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-xs tracking-wider">
<tr>
<th class="px-6 py-4 font-bold">ID</th>
<th class="px-6 py-4 font-bold">Nama Materi</th>
<th class="px-6 py-4 font-bold">Total Soal</th>
<th class="px-6 py-4 font-bold text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
@forelse($subjects as $subject)
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-4 font-mono text-slate-400">#{{ $subject->id }}</td>
<td class="px-6 py-4 font-bold text-slate-800">{{ $subject->name }}</td>
<td class="px-6 py-4">
<span class="px-2.5 py-1 bg-indigo-50 text-indigo-700 rounded-md text-xs font-bold border border-indigo-100">
{{ $subject->questions_count ?? 0 }} Soal
</span>
</td>
<td class="px-6 py-4 flex justify-end space-x-2">
<a href="{{ route('admin.subjects.show', $subject->id) }}"
class="p-2 text-blue-500 hover:bg-blue-50 rounded-lg transition-colors" title="Lihat Detail Materi & Soal">
<svg class="w-5 h-5" 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>
<button @click="openEdit({{ $subject->id }}, '{{ addslashes($subject->name) }}', '{{ url('admin/subjects') }}/{{ $subject->id }}')"
class="p-2 text-amber-500 hover:bg-amber-50 rounded-lg transition-colors" title="Edit Nama Materi">
<svg class="w-5 h-5" 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>
</button>
<form action="{{ route('admin.subjects.destroy', $subject->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus materi ini?');">
@csrf @method('DELETE')
<button type="submit" class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Hapus Materi">
<svg class="w-5 h-5" 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>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="px-6 py-8 text-center text-slate-500">Belum ada data materi.</td>
</tr>
@endforelse
</tbody>
</table>
<div class="p-4 border-t border-slate-100">
{{ $subjects->links() }}
</div>
</div>
<div x-show="showModal" class="fixed inset-0 z-[100] overflow-y-auto" style="display: none;">
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
<div x-show="showModal" @click="showModal = false" class="fixed inset-0 transition-opacity bg-slate-900/50 backdrop-blur-sm"></div>
<div id="modalContent" x-show="showModal" class="relative inline-block w-full max-w-md p-6 overflow-visible text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
<h3 class="text-lg font-bold text-slate-800 mb-4" x-text="editMode ? 'Edit Materi' : 'Tambah Materi Baru'"></h3>
<form :action="formAction" method="POST">
@csrf
<template x-if="editMode"><input type="hidden" name="_method" value="PUT"></template>
<div>
<label class="block text-sm font-bold text-slate-700 mb-2">Sumber Materi</label>
<div class="flex space-x-6 mb-3 p-3 bg-slate-50 rounded-xl border border-slate-200">
<label class="flex items-center cursor-pointer">
<input type="radio" x-model="inputType" value="sop" @change="syncSelect2(subjectName)" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-slate-300">
<span class="ml-2 text-sm font-bold text-slate-700">Dari Master SOP</span>
</label>
<label class="flex items-center cursor-pointer">
<input type="radio" x-model="inputType" value="manual" class="w-4 h-4 text-blue-600 focus:ring-blue-500 border-slate-300">
<span class="ml-2 text-sm font-bold text-slate-700">Input Manual</span>
</label>
</div>
<label class="block text-sm font-bold text-slate-700 mb-2">Nama Materi <span class="text-red-500">*</span></label>
<div x-show="inputType === 'sop'">
<select id="sopSelect" name="name" x-bind:disabled="inputType !== 'sop'" required class="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-blue-500" style="width: 100%;">
<option value="">-- Cari dan Pilih Dokumen SOP --</option>
@foreach($sops as $sop)
<option value="{{ $sop->nomor }} - {{ $sop->judul }}">{{ $sop->nomor }} - {{ $sop->judul }}</option>
@endforeach
</select>
</div>
<div x-show="inputType === 'manual'" x-cloak>
<input type="text" name="name" x-model="subjectName" x-bind:disabled="inputType !== 'manual'" required class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-600 transition-all" placeholder="Contoh: Modul K3 Tingkat Lanjut">
</div>
</div>
<div class="flex justify-end space-x-3 mt-8 pt-4 border-t border-slate-100">
<button type="button" @click="showModal = false" class="px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-xl transition-colors">Batal</button>
<button type="submit" class="px-5 py-2 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-sm transition-colors" x-text="editMode ? 'Simpan Perubahan' : 'Simpan Materi'"></button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Inisialisasi Select2 di dalam Modal
$('#sopSelect').select2({
placeholder: "-- Cari dan Pilih Dokumen SOP --",
width: '100%',
dropdownParent: $('#modalContent') // WAJIB: Agar kolom search select2 bisa diklik saat di dalam modal
});
});
</script>
@endsection
@@ -0,0 +1,76 @@
@extends('layouts.app')
@section('content')
<div class="max-w-6xl 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.subjects.index') }}" 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 Materi</h2>
</div>
</div>
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl shadow-md border border-blue-800 p-8 mb-8 flex flex-col md:flex-row items-center justify-between text-white">
<div>
<p class="text-blue-200 text-sm font-bold uppercase tracking-widest mb-2">Nama Subject / Materi</p>
<h3 class="text-3xl font-black">{{ $subject->name }}</h3>
</div>
<div class="text-right mt-4 md:mt-0 bg-white/10 px-6 py-4 rounded-xl border border-white/20 backdrop-blur-sm">
<p class="text-blue-100 text-xs font-bold uppercase tracking-wider mb-1">Total Bank Soal</p>
<span class="text-4xl font-black">{{ $subject->questions_count ?? $subject->questions->count() }} <span class="text-lg font-medium text-blue-200">Soal</span></span>
</div>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="p-5 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
<h4 class="font-bold text-slate-700">Daftar Pertanyaan di Materi Ini</h4>
<a href="{{ route('admin.exams.questions.create') }}" class="text-sm font-bold text-blue-600 hover:text-blue-800">
+ Tambah Soal Baru
</a>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-white border-b border-slate-200 text-slate-500 text-xs uppercase tracking-wider">
<tr>
<th class="px-6 py-4 font-bold">Q.ID</th>
<th class="px-6 py-4 font-bold">Tipe & Level</th>
<th class="px-6 py-4 font-bold">Teks Pertanyaan</th>
<th class="px-6 py-4 font-bold text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
@forelse($subject->questions as $q)
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-6 py-4 font-mono text-slate-400">#{{ $q->id }}</td>
<td class="px-6 py-4">
<span class="block text-xs font-bold text-indigo-600 uppercase mb-1">{{ str_replace('_', ' ', $q->question_type) }}</span>
<span class="text-[10px] font-bold px-2 py-0.5 rounded {{ $q->question_level == 'mudah' ? 'bg-emerald-100 text-emerald-700' : ($q->question_level == 'sedang' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
{{ strtoupper($q->question_level) }}
</span>
</td>
<td class="px-6 py-4">
<p class="line-clamp-2 text-slate-700 font-medium">{!! strip_tags($q->question_text) !!}</p>
</td>
<td class="px-6 py-4 text-right whitespace-nowrap">
<a href="{{ route('admin.exams.questions.show', $q->id) }}"
class="inline-block px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 font-bold text-xs transition-colors" target="_blank">
Cek Soal &rarr;
</a>
</td>
</tr>
@empty
<tr>
<td colspan="4" 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="2" 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 2"></path></svg>
<p class="text-slate-500 font-medium">Belum ada bank soal yang menggunakan materi ini.</p>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
@endsection