257 lines
9.5 KiB
PHP
257 lines
9.5 KiB
PHP
@extends('layoutuser.app')
|
|
@section('content')
|
|
|
|
<!-- Data Makanan Start -->
|
|
<div class="container-xxl py-5 bg-light">
|
|
<div class="container">
|
|
|
|
<!-- Judul dan Deskripsi -->
|
|
<div class="text-center mb-5">
|
|
<p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Data Aplikasi</p>
|
|
<h2 class="fw-bold text-dark">Daftar Menu Makanan Sehat</h2>
|
|
<p class="text-muted px-3">
|
|
Informasi kandungan gizi makanan yang tersedia dalam sistem untuk membantu Anda memilih menu yang tepat bagi penderita penyakit jantung.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Catatan Penting -->
|
|
<div class="alert alert-info mt-4 rounded-4 shadow-sm mb-4" role="alert">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Catatan:</strong> Komposisi gizi pangan dihitung per 100 gram, dengan Berat Dapat Dimakan (BDD) 100%.
|
|
</div>
|
|
|
|
<!-- Filter Jenis & Kategori -->
|
|
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
|
|
<div class="col-12 col-md-6 col-lg-3">
|
|
<label for="jenis_id" class="form-label fw-semibold">Jenis Makanan</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-primary text-white"><i class="fas fa-utensils"></i></span>
|
|
<select class="form-select" id="jenis_id" name="jenis_id">
|
|
<option value="">Semua</option>
|
|
@foreach ($jenisMakananList as $jenis)
|
|
<option value="{{ $jenis->id }}" {{ request('jenis_id') == $jenis->id ? 'selected' : '' }}>
|
|
{{ ucfirst($jenis->name) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6 col-lg-3">
|
|
<label for="kategori_id" class="form-label fw-semibold">Kategori</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-primary text-white"><i class="fas fa-tags"></i></span>
|
|
<select class="form-select" id="kategori_id" name="kategori_id">
|
|
<option value="">Semua</option>
|
|
@foreach ($kategoriList as $kategori)
|
|
<option value="{{ $kategori->id }}" {{ request('kategori_id') == $kategori->id ? 'selected' : '' }}>
|
|
{{ ucfirst($kategori->kategori) }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6 col-lg-2">
|
|
<label for="filter_kriteria" class="form-label fw-semibold">Kriteria</label>
|
|
<select class="form-select" id="filter_kriteria" name="filter_kriteria">
|
|
<option value="" {{ request('filter_kriteria') == '' ? 'selected' : '' }}>Semua</option>
|
|
<option value="energi" {{ request('filter_kriteria') == 'energi' ? 'selected' : '' }}>Energi</option>
|
|
<option value="lemak" {{ request('filter_kriteria') == 'lemak' ? 'selected' : '' }}>Lemak</option>
|
|
<option value="natrium" {{ request('filter_kriteria') == 'natrium' ? 'selected' : '' }}>Natrium</option>
|
|
<option value="karbohidrat" {{ request('filter_kriteria') == 'karbohidrat' ? 'selected' : '' }}>Karbohidrat</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-6 col-lg-2">
|
|
<label for="filter_nilai" class="form-label fw-semibold">Urutkan</label>
|
|
<select class="form-select" id="filter_nilai" name="filter_nilai">
|
|
<option value="" {{ request('filter_nilai') == '' ? 'selected' : '' }}>Semua</option>
|
|
<option value="tertinggi" {{ request('filter_nilai') == 'tertinggi' ? 'selected' : '' }}>Nilai Tertinggi</option>
|
|
<option value="terendah" {{ request('filter_nilai') == 'terendah' ? 'selected' : '' }}>Nilai Terendah</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-2">
|
|
<button class="btn btn-primary w-100" type="submit">
|
|
<i class="fas fa-filter me-1"></i> Terapkan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Filter Per Page + Search -->
|
|
<form method="GET" action="{{ route('userdata') }}" class="row g-3 align-items-end mb-4">
|
|
<input type="hidden" name="jenis_id" value="{{ request('jenis_id') }}">
|
|
<input type="hidden" name="kategori_id" value="{{ request('kategori_id') }}">
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label for="search" class="form-label fw-semibold">Pencarian</label>
|
|
<div class="input-group">
|
|
<input type="text" name="search" id="search" class="form-control" placeholder="Cari nama makanan..." value="{{ request('search') }}">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-search me-1"></i> Cari
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label for="per_page" class="form-label fw-semibold">Data per Halaman</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-primary text-white"><i class="fas fa-list-ol"></i></span>
|
|
<select class="form-select" name="per_page" id="per_page" onchange="this.form.submit()">
|
|
@php
|
|
$perPageOptions = [10, 25, 50, 100, 'all'];
|
|
$currentPerPage = request('per_page', 10);
|
|
@endphp
|
|
@foreach($perPageOptions as $option)
|
|
<option value="{{ $option }}" {{ $currentPerPage == $option ? 'selected' : '' }}>
|
|
{{ $option == 'all' ? 'Semua' : $option }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Tabel Data -->
|
|
<div class="table-responsive shadow-sm rounded-4 overflow-hidden">
|
|
<table class="table table-hover table-bordered align-middle text-center bg-white mb-0">
|
|
<thead class="table-primary text-dark">
|
|
<tr>
|
|
<th scope="col" class="text-center">#</th>
|
|
<th scope="col" class="text-start">🍽️ Nama Makanan</th>
|
|
<th scope="col" class="d-none d-sm-table-cell">🥑 Lemak (g)</th>
|
|
<th scope="col" class="d-none d-md-table-cell">🧂 Natrium (mg)</th>
|
|
<th scope="col" class="d-none d-sm-table-cell">🔥 Energi (kkal)</th>
|
|
<th scope="col" class="d-none d-md-table-cell">🍞 Karbohidrat (g)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($makanans as $index => $makanan)
|
|
<tr>
|
|
<td class="fw-bold text-primary">{{ ($makanans->firstItem() ?? 0) + $index }}</td>
|
|
<td class="text-start fw-semibold">
|
|
{{ $makanan->nama }}
|
|
<!-- Mobile view details -->
|
|
<div class="d-sm-none small text-muted mt-1">
|
|
<div>Lemak: {{ number_format($makanan->lemak, 1) }}g</div>
|
|
<div>Energi: {{ number_format($makanan->energi) }} kkal</div>
|
|
<div>Natrium: {{ number_format($makanan->natrium) }}mg</div>
|
|
<div>Karbohidrat: {{ number_format($makanan->karbohidrat, 1) }}g</div>
|
|
</div>
|
|
</td>
|
|
<td class="d-none d-sm-table-cell">{{ number_format($makanan->lemak, 1) }}</td>
|
|
<td class="d-none d-md-table-cell">{{ number_format($makanan->natrium) }}</td>
|
|
<td class="d-none d-sm-table-cell">{{ number_format($makanan->energi) }}</td>
|
|
<td class="d-none d-md-table-cell">{{ number_format($makanan->karbohidrat, 1) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination Info & Links -->
|
|
<div class="mt-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-12 col-md-6 text-center text-md-start mb-3 mb-md-0">
|
|
<p class="mb-0">Menampilkan {{ $makanans->count() }} dari {{ $makanans->total() }} makanan</p>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<nav>
|
|
<ul class="pagination justify-content-center justify-content-md-end mb-0">
|
|
{{ $makanans->links('pagination::bootstrap-4') }}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Responsive Table Styles */
|
|
.table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table th {
|
|
white-space: nowrap;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.table th, .table td {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* Enhanced Pagination Styles */
|
|
.pagination {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
border-radius: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
border: none;
|
|
background-color: #f8f9fa;
|
|
color: #2196f3;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
background-color: #e9ecef;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background-color: #2196f3;
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.pagination .page-link {
|
|
padding: 0.375rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Form Control Enhancements */
|
|
.form-control:focus,
|
|
.form-select:focus {
|
|
border-color: #2196f3;
|
|
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
|
}
|
|
|
|
.input-group-text {
|
|
border: none;
|
|
}
|
|
|
|
/* Button Improvements */
|
|
.btn-primary {
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
|
|
}
|
|
|
|
/* Container Padding Adjustment */
|
|
@media (max-width: 767.98px) {
|
|
.container-xxl {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Data Makanan End -->
|
|
|
|
@endsection
|