184 lines
8.3 KiB
PHP
184 lines
8.3 KiB
PHP
@extends('admin.layouts.app')
|
|
@section('meta')
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
@endsection
|
|
@section('content')
|
|
<main class="flex-1 p-6 bg-white rounded-lg shadow">
|
|
<!-- Header & Add button -->
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-2xl font-bold">Data Basis AHP</h2>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="mb-4 p-3 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
<!-- Filter/Search bar (optional) -->
|
|
<div class="flex justify-end mb-4">
|
|
<div class="relative">
|
|
<input id="searchInput" type="text" placeholder="Search..."
|
|
class="pl-8 pr-4 py-2 border rounded-lg bg-gray-100 w-64">
|
|
<i class="bi bi-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<table class="w-full border-collapse">
|
|
<thead class="bg-gray-50">
|
|
<tr class="border-b">
|
|
<th class="p-3 text-left">No</th>
|
|
<th class="p-3 text-left">Mapel</th>
|
|
<th class="p-3 text-left">Nilai CF Terisi</th>
|
|
<th class="p-3 text-left">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
@foreach($mapels as $mapel)
|
|
<tr class="border-b hover:bg-gray-50">
|
|
<td class="p-3">{{ $loop->iteration }}</td>
|
|
<td class="p-3">{{ $mapel->nama }}</td>
|
|
@php
|
|
$totalJurusan = $jurusans->count();
|
|
$terisi = $items->where('mapel_id', $mapel->id)->count();
|
|
$persentase = $totalJurusan > 0 ? ($terisi / $totalJurusan) * 100 : 0;
|
|
@endphp
|
|
<td class="p-3">
|
|
{{ number_format($persentase, 0) }}%
|
|
</td>
|
|
<td class="p-3 flex space-x-2">
|
|
<button onclick='openEditModal({{ json_encode($mapel) }}, @json($items))'
|
|
class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded-lg flex items-center">
|
|
<i class="bi bi-pencil-square mr-1"></i> Edit
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-4">{{ $mapels->links() }}</div>
|
|
</main>
|
|
|
|
<!-- Modal Add/Edit -->
|
|
<div id="modalTambah" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white shadow-2xl w-full max-w-md p-6 max-h-[80vh] overflow-y-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 id="modalTitle" class="text-xl font-semibold">Tambah Basis AHP</h2>
|
|
<button type="button" id="btnCloseModal" class="text-gray-500 hover:text-red-500 text-xl font-bold">×</button>
|
|
</div>
|
|
<form id="formModal" method="POST" class="space-y-4">
|
|
@csrf
|
|
<input type="hidden" id="methodInput" name="_method" value="POST">
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium">Mapel</label>
|
|
<input id="mapelField" type="text" name="mapel_nama" readonly
|
|
class="mt-1 block w-full border rounded px-3 py-2 bg-gray-100 text-gray-700">
|
|
</div>
|
|
|
|
<div id="cfContainer" class="space-y-4 mt-4">
|
|
<!-- JS akan generate input jurusan + cf_value di sini -->
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button type="button" id="btnBatal"
|
|
class="px-4 py-2 rounded-lg font-medium hover:underline">Batal</button>
|
|
<button type="submit" id="submitBtn"
|
|
class="bg-blue hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
|
|
<i id="submitIcon" class="bi bi-check-lg mr-1"></i>
|
|
<span id="submitText">Simpan</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const btnTambah = document.getElementById('btnTambah');
|
|
const modal = document.getElementById('modalTambah');
|
|
const btnBatal = document.getElementById('btnBatal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const jurusans = @json($jurusans);
|
|
|
|
btnBatal.addEventListener('click', () => modal.classList.add('hidden'));
|
|
|
|
document.getElementById('btnCloseModal').addEventListener('click', function () {
|
|
document.getElementById('modalTambah').classList.add('hidden');
|
|
});
|
|
|
|
function openEditModal(mapel, allItems) {
|
|
// Set mapel field
|
|
document.getElementById('mapelField').value = mapel.nama;
|
|
|
|
// Reset isian jurusan
|
|
const container = document.getElementById('cfContainer');
|
|
container.innerHTML = '';
|
|
|
|
// Ambil item BasisAhp yang cocok dengan mapel ini
|
|
const relatedItems = allItems.filter(item => item.mapel_id === mapel.id);
|
|
|
|
jurusans.forEach(jurusan => {
|
|
const existing = relatedItems.find(x => x.jurusan_id === jurusan.id);
|
|
const cfValue = existing ? existing.cf_value : '';
|
|
|
|
const field = `
|
|
<div class="grid grid-cols-12 gap-4 items-end mb-4">
|
|
<!-- Label Jurusan -->
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium">Jurusan</label>
|
|
<input type="text" readonly value="${jurusan.nama}" class="mt-1 block w-full border rounded px-3 py-2 bg-gray-100">
|
|
<input type="hidden" name="cf_values[${jurusan.id}]" value="${cfValue}" id="cfValue-${jurusan.id}">
|
|
</div>
|
|
|
|
<!-- Label CF Value -->
|
|
<div class="col-span-5">
|
|
<label class="block text-sm font-medium">CF Value</label>
|
|
<input type="number" step="any" name="cf_values[${jurusan.id}]" value="${cfValue}"
|
|
class="mt-1 block w-full border rounded px-3 py-2 ${cfValue === '' ? 'border-red-500' : ''}"" required>
|
|
</div>
|
|
|
|
<!-- Tombol Delete -->
|
|
<div class="col-span-2 flex items-end">
|
|
<a href="/admin/basis-ahp/delete/${mapel.id}/${jurusan.id}"
|
|
onclick="return confirm('Yakin ingin menghapus data ini?')"
|
|
class="text-red-500 hover:text-red-700">
|
|
<i class="bi bi-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.innerHTML += field;
|
|
});
|
|
|
|
// Show modal
|
|
document.getElementById('modalTambah').classList.remove('hidden');
|
|
|
|
// Ganti form action dan method jika perlu (edit vs create)
|
|
document.getElementById('formModal').action = '/admin/basis-ahp/' + mapel.id;
|
|
document.getElementById('methodInput').value = 'PUT';
|
|
document.getElementById('modalTitle').textContent = 'Edit Basis AHP';
|
|
}
|
|
|
|
@if ($errors->any())
|
|
modal.classList.remove('hidden');
|
|
@endif
|
|
</script>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Live search filter
|
|
const searchInput = document.getElementById('searchInput');
|
|
const rows = document.querySelectorAll('table tbody tr');
|
|
searchInput.addEventListener('input', () => {
|
|
const term = searchInput.value.toLowerCase().trim();
|
|
rows.forEach(row => row.style.display = row.innerText.toLowerCase().includes(term) ? '' :
|
|
'none');
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|