181 lines
7.6 KiB
PHP
181 lines
7.6 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Food Management')
|
|
|
|
@include('admin.shared.admin-styles')
|
|
|
|
@section('content')
|
|
<div class="admin-container container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="page-header animate-fade-in">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<h3 class="mb-2 text-white">
|
|
<i class="fas fa-utensils me-2"></i>Food Management
|
|
</h3>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
|
|
<li class="breadcrumb-item active text-white" aria-current="page">Foods</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="admin-card animate-fade-in">
|
|
<div class="card-body">
|
|
<!-- Header with Add Button -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-list me-2"></i>Food List
|
|
</h5>
|
|
<a href="{{ route('tambahmakanan') }}" class="admin-btn btn-primary">
|
|
<i class="fas fa-plus me-2"></i>Add New Food
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Important Notice -->
|
|
<div class="admin-alert alert-info mb-4 animate-fade-in">
|
|
<div class="d-flex align-items-center">
|
|
<div class="feature-icon bg-info bg-gradient me-3" style="width: 48px; height: 48px;">
|
|
<i class="fas fa-info-circle"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="fw-bold mb-1">Important Notice</h6>
|
|
<p class="mb-0">Komposisi gizi pangan dihitung per <code>100 grams</code>, dengan Berat Dapat Dimakan (BDD) 100%.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Food Table -->
|
|
<div class="table-responsive">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Name</th>
|
|
<th>Kategori</th>
|
|
<th>Jenis Makanan</th>
|
|
<th>Lemak (g)</th>
|
|
<th>Natrium (mg)</th>
|
|
<th>Energi (Cal)</th>
|
|
<th>Karbohidrat (g)</th>
|
|
<th class="text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($makanans as $mknn)
|
|
<tr>
|
|
<td>{{ ($makanans->currentPage() - 1) * $makanans->perPage() + $loop->iteration }}</td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{{ $mknn->nama }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="admin-badge bg-info">
|
|
{{ $mknn->kategori->kategori }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="admin-badge bg-secondary">
|
|
{{ $mknn->jenis->name }}
|
|
</span>
|
|
</td>
|
|
<td>{{ $mknn->lemak }}</td>
|
|
<td>{{ $mknn->natrium }}</td>
|
|
<td>{{ $mknn->energi }}</td>
|
|
<td>{{ $mknn->karbohidrat }}</td>
|
|
<td class="text-center">
|
|
<a href="{{ route('editmakanan', $mknn->id) }}"
|
|
class="admin-btn btn-warning btn-sm me-2">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<form action="{{ url('/makanan', $mknn->id) }}"
|
|
method="POST"
|
|
class="d-inline"
|
|
onsubmit="return confirm('Are you sure you want to delete this food item?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="admin-btn btn-danger btn-sm">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center mt-4">
|
|
<div class="text-muted">
|
|
Showing {{ $makanans->firstItem() ?? 0 }} to {{ $makanans->lastItem() ?? 0 }} of {{ $makanans->total() }} entries
|
|
</div>
|
|
<div class="admin-pagination">
|
|
{{ $makanans->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.admin-pagination nav {
|
|
margin-bottom: 0;
|
|
}
|
|
.admin-pagination .pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
.admin-pagination .page-link {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
border-radius: 0.25rem;
|
|
margin: 0 0.125rem;
|
|
color: var(--primary-color);
|
|
background-color: var(--white);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.admin-pagination .page-item.active .page-link {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: var(--white);
|
|
}
|
|
.admin-pagination .page-item.disabled .page-link {
|
|
color: var(--gray);
|
|
pointer-events: none;
|
|
background-color: var(--light);
|
|
border-color: var(--border-color);
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const animateElements = document.querySelectorAll('.animate-fade-in');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = 1;
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
});
|
|
|
|
animateElements.forEach(element => {
|
|
element.style.opacity = 0;
|
|
element.style.transform = 'translateY(20px)';
|
|
observer.observe(element);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |