Iwit
204 lines
12 KiB
PHP
204 lines
12 KiB
PHP
@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 |