117 lines
5.5 KiB
PHP
117 lines
5.5 KiB
PHP
<x-layout>
|
|
<x-slot:title>{{ $title }}</x-slot>
|
|
<div class="p-4">
|
|
|
|
<div id="errorMessage" class="hidden flex items-center p-4 mb-4 text-sm text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
|
|
<svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
|
</svg>
|
|
<span class="sr-only">Info</span>
|
|
<div>
|
|
<span class="font-medium">Peringatan!</span> Semua kolom penilaian harus diisi terlebih dahulu.
|
|
</div>
|
|
</div>
|
|
|
|
<form form id="penilaianForm" action="{{ route('penilaian.store') }}" method="POST">
|
|
@csrf
|
|
<div class="overflow-x-auto w-full">
|
|
<table class="w-full text-sm text-left text-[#1B5E20] border border-[#C8E6C9]">
|
|
<thead class="text-xs text-white uppercase bg-[#388E3C]">
|
|
<tr>
|
|
<th class="px-6 py-3">No</th>
|
|
<th class="px-6 py-3">Nama Alternatif</th>
|
|
@foreach ($kriterias as $kriteria)
|
|
<th class="px-6 py-3">{{ $kriteria->nama_kriteria }}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse ($alternatifs as $index => $alternatif)
|
|
<tr class="bg-[#f9f9f9] border-b border-[#ddd] hover:bg-[#e2e2e2]">
|
|
<td class="px-6 py-4">{{ $index + 1 }}</td>
|
|
<td class="px-6 py-4">{{ $alternatif->nama_lahan }}</td>
|
|
@foreach ($kriterias as $kriteria)
|
|
<td class="px-6 py-4">
|
|
<select name="penilaian[{{ $alternatif->id }}][{{ $kriteria->id }}]" class="w-full px-2 py-1 border rounded">
|
|
<option value="">-- Pilih --</option>
|
|
@foreach ($subKriterias->where('kriteria_id', $kriteria->id) as $sub)
|
|
<option value="{{ $sub->id }}">{{ $sub->nama_sub_kriteria }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="{{ 2 + $kriterias->count() }}" class="text-center py-4 text-gray-500">Tidak ada data alternatif.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-6 text-right">
|
|
<button type="submit" class="px-4 py-2 bg-[#388E3C] text-white rounded hover:bg-green-900">
|
|
Simpan Penilaian
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('penilaianForm').addEventListener('submit', function (e) {
|
|
const selects = this.querySelectorAll('select[name^="penilaian"]');
|
|
let isValid = true;
|
|
|
|
selects.forEach(select => {
|
|
if (select.value === '') {
|
|
isValid = false;
|
|
select.classList.add('border-red-500');
|
|
} else {
|
|
select.classList.remove('border-red-500');
|
|
}
|
|
});
|
|
|
|
const errorDiv = document.getElementById('errorMessage');
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
errorDiv.classList.remove('hidden');
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} else {
|
|
errorDiv.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
@if(session('success'))
|
|
<div id="success-alert" class="flex items-center p-4 mb-4 text-sm text-green-800 border border-green-300 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800 mt-4" role="alert">
|
|
<svg class="shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
|
</svg>
|
|
<span class="sr-only">Info</span>
|
|
<div>
|
|
<span class="font-medium">{{ session('success') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
setTimeout(function() {
|
|
// Fade out the success alert after 3 seconds
|
|
document.getElementById('success-alert').style.transition = 'opacity 1s';
|
|
document.getElementById('success-alert').style.opacity = '0';
|
|
|
|
// After fade out, remove the alert from the DOM
|
|
setTimeout(function() {
|
|
document.getElementById('success-alert').remove();
|
|
}, 1000); // Wait for fade-out transition
|
|
}, 2000); // 3 seconds delay before fading out
|
|
</script>
|
|
@endif
|
|
|
|
|
|
|
|
</x-layout>
|