337 lines
11 KiB
PHP
337 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Data Makanan')
|
|
|
|
@section('content')
|
|
|
|
<div class="max-w-7xl mx-auto px-4 py-8 space-y-6">
|
|
|
|
<!-- HEADER -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-5">
|
|
|
|
<div>
|
|
<h1 class="text-4xl font-bold tracking-tight text-gray-800">
|
|
Data Makanan
|
|
</h1>
|
|
|
|
<p class="text-gray-500 mt-2 text-base">
|
|
Kelola data makanan untuk proses rekomendasi
|
|
</p>
|
|
</div>
|
|
|
|
<a href="{{ route('makanan.create') }}"
|
|
class="inline-flex items-center gap-2 px-5 py-3 bg-green-600 text-white text-sm font-semibold rounded-2xl shadow-sm hover:bg-green-700 transition">
|
|
|
|
<span class="text-lg">+</span>
|
|
Tambah Makanan
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<!-- CARD TABLE -->
|
|
<div class="bg-white border border-gray-200 rounded-[2rem] shadow-sm overflow-hidden">
|
|
|
|
<!-- TOP -->
|
|
<div class="flex items-center justify-between px-6 py-5 border-b border-gray-100 bg-gray-50">
|
|
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
Daftar Makanan
|
|
</h2>
|
|
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
Total {{ $makanan->total() }} makanan tersedia
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- TABLE -->
|
|
<div class="overflow-x-auto">
|
|
|
|
<table class="min-w-[1000px] w-full">
|
|
|
|
<!-- HEAD -->
|
|
<thead class="bg-gray-50 border-b border-gray-100">
|
|
|
|
<tr class="text-xs font-semibold uppercase tracking-wide text-gray-700">
|
|
|
|
<th class="px-6 py-4 text-left">
|
|
Nama Makanan
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Protein
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Lemak
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Karbo
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Serat
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Kalori
|
|
</th>
|
|
|
|
<th class="px-4 py-4 text-center">
|
|
Tekstur
|
|
</th>
|
|
|
|
<th class="px-6 py-4 text-center">
|
|
Aksi
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<!-- BODY -->
|
|
<tbody class="divide-y divide-gray-100">
|
|
|
|
@forelse($makanan as $m)
|
|
|
|
<tr class="hover:bg-gray-50 transition">
|
|
|
|
<!-- NAMA -->
|
|
<td class="px-6 py-5">
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<span class="font-semibold text-gray-800 text-base">
|
|
{{ $m->nama_makanan }}
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
<!-- NUTRISI -->
|
|
<td class="px-4 py-5 text-center text-gray-600 font-medium">
|
|
{{ number_format($m->protein, 1) }}g
|
|
</td>
|
|
|
|
<td class="px-4 py-5 text-center text-gray-600 font-medium">
|
|
{{ number_format($m->kandungan_lemak, 1) }}g
|
|
</td>
|
|
|
|
<td class="px-4 py-5 text-center text-gray-600 font-medium">
|
|
{{ number_format($m->karbohidrat, 1) }}g
|
|
</td>
|
|
|
|
<td class="px-4 py-5 text-center text-gray-600 font-medium">
|
|
{{ number_format($m->kandungan_serat, 1) }}g
|
|
</td>
|
|
|
|
<td class="px-4 py-5 text-center">
|
|
|
|
<span class="px-3 py-1 rounded-lg bg-gray-100 text-gray-700 text-xs font-semibold">
|
|
{{ number_format($m->kalori, 0) }} kkal
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<!-- TEKSTUR -->
|
|
<td class="px-4 py-5 text-center">
|
|
|
|
<span class="px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-medium">
|
|
{{ ucfirst($m->tekstur) }}
|
|
</span>
|
|
|
|
</td>
|
|
|
|
<!-- AKSI -->
|
|
<td class="px-6 py-5">
|
|
|
|
<div class="flex items-center justify-center gap-2 flex-wrap">
|
|
|
|
<!-- DETAIL -->
|
|
<a href="{{ route('makanan.show', $m->id) }}"
|
|
class="px-4 py-2 rounded-xl bg-green-500 text-white text-xs font-semibold hover:bg-black transition">
|
|
|
|
Detail
|
|
</a>
|
|
|
|
<!-- EDIT -->
|
|
<a href="{{ route('makanan.edit', $m->id) }}"
|
|
class="px-4 py-2 rounded-xl bg-blue-600 text-white text-xs font-semibold hover:bg-black transition">
|
|
|
|
Edit
|
|
</a>
|
|
|
|
<!-- HAPUS -->
|
|
<form action="{{ route('makanan.destroy', $m->id) }}" method="POST" class="form-hapus-makanan">
|
|
|
|
@csrf
|
|
@method('DELETE')
|
|
|
|
<button type="submit"
|
|
class="px-4 py-2 rounded-xl bg-red-500 text-white text-xs font-semibold hover:bg-red-600 transition">
|
|
|
|
Hapus
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
@empty
|
|
|
|
<tr>
|
|
|
|
<td colspan="8" class="py-20 text-center">
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
|
<div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-2xl mb-4">
|
|
🍲
|
|
</div>
|
|
|
|
<h3 class="text-lg font-semibold text-gray-700">
|
|
Belum Ada Data Makanan
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-400 mt-1">
|
|
Tambahkan data makanan terlebih dahulu
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
@endforelse
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@if($makanan->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">{{ $makanan->firstItem() }}</span>
|
|
sampai
|
|
<span class="font-semibold text-gray-700">{{ $makanan->lastItem() }}</span>
|
|
dari
|
|
<span class="font-semibold text-gray-700">{{ $makanan->total() }}</span>
|
|
data
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2 justify-center md:justify-start">
|
|
|
|
{{-- Previous --}}
|
|
@if ($makanan->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="{{ $makanan->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 ($makanan->getUrlRange(1, $makanan->lastPage()) as $page => $url)
|
|
|
|
@if ($page == $makanan->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 ($makanan->hasMorePages())
|
|
<a href="{{ $makanan->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>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
document.querySelectorAll('.form-hapus-makanan').forEach(form => {
|
|
|
|
form.addEventListener('submit', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
Swal.fire({
|
|
title: 'Hapus Data?',
|
|
html: `
|
|
<div style="font-size:14px; color:#6b7280; line-height:1.7; margin-top:8px;">
|
|
Data makanan 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 |