315 lines
11 KiB
PHP
315 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Laporan')
|
|
|
|
@section('content')
|
|
|
|
<div class="max-w-7xl mx-auto space-y-8">
|
|
|
|
<!-- HEADER -->
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-800">
|
|
Laporan Rekomendasi
|
|
</h1>
|
|
<p class="text-base text-gray-500 mt-1">
|
|
Riwayat hasil rekomendasi makanan berdasarkan metode SAW
|
|
</p>
|
|
</div>
|
|
|
|
<!-- SUCCESS ALERT -->
|
|
@if(session('success'))
|
|
<div class="px-5 py-4 rounded-xl bg-green-100 text-green-800 text-base font-medium">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- FILTER -->
|
|
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm">
|
|
|
|
<div class="px-8 py-5 border-b border-gray-100">
|
|
<h2 class="text-base font-semibold text-gray-700">
|
|
Filter Pencarian
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-7">
|
|
|
|
<form method="GET" action="{{ route('laporan.index') }}">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-5">
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
|
|
Nama Pasien
|
|
</label>
|
|
|
|
<input type="text"
|
|
name="nama_pasien"
|
|
value="{{ request('nama_pasien') }}"
|
|
placeholder="Masukkan nama pasien..."
|
|
class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
|
|
Dari Tanggal
|
|
</label>
|
|
|
|
<input type="date"
|
|
name="tanggal_dari"
|
|
value="{{ request('tanggal_dari') }}"
|
|
class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold uppercase tracking-wide text-gray-500 mb-2">
|
|
Sampai Tanggal
|
|
</label>
|
|
|
|
<input type="date"
|
|
name="tanggal_sampai"
|
|
value="{{ request('tanggal_sampai') }}"
|
|
class="w-full border border-gray-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:ring-4 focus:ring-green-100 focus:border-green-500">
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row items-stretch sm:items-end gap-3">
|
|
<button type="submit"
|
|
class="w-full px-5 py-3 rounded-2xl bg-green-600 text-white text-sm font-semibold hover:bg-green-700 transition">
|
|
Cari
|
|
</button>
|
|
|
|
<a href="{{ route('laporan.index') }}"
|
|
class="w-full text-center px-5 py-3 rounded-2xl bg-gray-100 text-gray-700 text-sm font-semibold hover:bg-gray-200 transition">
|
|
Reset
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TABLE -->
|
|
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
|
|
|
|
<div class="px-8 py-5 border-b border-gray-100">
|
|
<h2 class="text-base font-semibold text-gray-700">
|
|
Data Laporan
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
|
|
@if($laporan->count() > 0)
|
|
|
|
<table class="min-w-[900px] w-full">
|
|
|
|
<!-- HEAD -->
|
|
<thead class="bg-gray-50 text-sm text-gray-600 uppercase tracking-wide">
|
|
<tr>
|
|
<th class="px-6 py-4 text-left">No</th>
|
|
<th class="px-6 py-4 text-left">Pasien</th>
|
|
<th class="px-6 py-4 text-left">Gejala</th>
|
|
<th class="px-6 py-4 text-left">Nilai SAW</th>
|
|
<th class="px-6 py-4 text-left">Waktu</th>
|
|
<th class="px-6 py-4 text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- BODY -->
|
|
<tbody class="divide-y divide-gray-100 text-base">
|
|
|
|
@foreach($laporan as $item)
|
|
|
|
<tr class="hover:bg-gray-50 transition">
|
|
|
|
<td class="px-6 py-5">
|
|
{{ $laporan->firstItem() + $loop->index }}
|
|
</td>
|
|
|
|
<td class="px-6 py-5 font-semibold text-gray-800">
|
|
{{ $item->nama_pasien }}
|
|
</td>
|
|
|
|
<td class="px-6 py-5 text-gray-600 max-w-xs">
|
|
{{ ucwords(str_replace(',', ', ', $item->gejala)) }}
|
|
</td>
|
|
|
|
<td class="px-6 py-5 font-bold text-green-600">
|
|
{{ number_format($item->nilai_saw,4) }}
|
|
</td>
|
|
|
|
<td class="px-6 py-5 text-sm text-gray-500">
|
|
{{ $item->created_at->format('d M Y') }}
|
|
</td>
|
|
|
|
<!-- AKSI -->
|
|
<td class="px-6 py-5">
|
|
<div class="flex justify-center gap-3">
|
|
|
|
<!-- DETAIL -->
|
|
<a href="{{ route('laporan.detail',$item->id) }}"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition">
|
|
Detail
|
|
</a>
|
|
|
|
<!-- HAPUS -->
|
|
<form action="{{ route('laporan.destroy',$item->id) }}"
|
|
method="POST"
|
|
class="form-hapus-laporan">
|
|
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg bg-red-500 text-white hover:bg-red-600 transition">
|
|
Hapus
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
@endforeach
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<!-- <div class="px-8 py-5 border-t border-gray-100">
|
|
{{ $laporan->links() }}
|
|
</div> -->
|
|
|
|
@else
|
|
|
|
<div class="text-center py-16 text-gray-400 text-lg">
|
|
Belum ada riwayat rekomendasi
|
|
</div>
|
|
|
|
@endif
|
|
|
|
</div>
|
|
|
|
@if($laporan->hasPages())
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 px-2 pt-5">
|
|
|
|
<div class="text-sm text-gray-500">
|
|
Menampilkan
|
|
<span class="font-semibold text-gray-700">{{ $laporan->firstItem() }}</span>
|
|
sampai
|
|
<span class="font-semibold text-gray-700">{{ $laporan->lastItem() }}</span>
|
|
dari
|
|
<span class="font-semibold text-gray-700">{{ $laporan->total() }}</span>
|
|
data
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 justify-center md:justify-start">
|
|
|
|
{{-- Previous --}}
|
|
@if ($laporan->onFirstPage())
|
|
<span class="px-4 py-2 rounded-xl border border-gray-200 text-gray-300 text-sm cursor-not-allowed">
|
|
Sebelumnya
|
|
</span>
|
|
@else
|
|
<a href="{{ $laporan->previousPageUrl() }}"
|
|
class="px-4 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
|
|
Sebelumnya
|
|
</a>
|
|
@endif
|
|
|
|
{{-- Page Numbers --}}
|
|
@foreach ($laporan->getUrlRange(1, $laporan->lastPage()) as $page => $url)
|
|
|
|
@if ($page == $laporan->currentPage())
|
|
<span class="w-10 h-10 flex items-center justify-center rounded-xl bg-green-600 text-white text-sm font-bold shadow-sm">
|
|
{{ $page }}
|
|
</span>
|
|
@else
|
|
<a href="{{ $url }}"
|
|
class="w-10 h-10 flex items-center justify-center rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
|
|
{{ $page }}
|
|
</a>
|
|
@endif
|
|
|
|
@endforeach
|
|
|
|
{{-- Next --}}
|
|
@if ($laporan->hasMorePages())
|
|
<a href="{{ $laporan->nextPageUrl() }}"
|
|
class="px-4 py-2 rounded-xl border border-gray-200 bg-white text-gray-600 text-sm hover:bg-green-50 hover:text-green-700 transition">
|
|
Berikutnya
|
|
</a>
|
|
@else
|
|
<span class="px-4 py-2 rounded-xl border border-gray-200 text-gray-300 text-sm cursor-not-allowed">
|
|
Berikutnya
|
|
</span>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
document.querySelectorAll('.form-hapus-laporan').forEach(form => {
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
title: 'Hapus Data Laporan?',
|
|
html: `
|
|
<div style="font-size:14px; color:#6b7280; line-height:1.7; margin-top:8px;">
|
|
Data laporan yang dihapus tidak dapat dikembalikan.
|
|
</div>
|
|
`,
|
|
icon: 'warning',
|
|
|
|
showCancelButton: true,
|
|
|
|
confirmButtonText: 'Hapus',
|
|
cancelButtonText: 'Batal',
|
|
|
|
reverseButtons: true,
|
|
focusCancel: true,
|
|
|
|
background: '#ffffff',
|
|
color: '#111827',
|
|
|
|
customClass: {
|
|
popup: 'rounded-[24px] p-6 shadow-xl',
|
|
title: 'text-xl font-bold text-gray-800',
|
|
htmlContainer: 'text-sm text-gray-500',
|
|
confirmButton: 'bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-xl text-sm font-semibold',
|
|
cancelButton: 'bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-3 rounded-xl text-sm font-semibold mr-2'
|
|
},
|
|
|
|
buttonsStyling: false
|
|
|
|
}).then((result) => {
|
|
|
|
if (result.isConfirmed) {
|
|
form.submit();
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endsection |