168 lines
8.9 KiB
PHP
168 lines
8.9 KiB
PHP
@extends('layoutuser.app')
|
|
@section('content')
|
|
|
|
<div style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb); min-height: 100vh; padding-top: 5rem; padding-bottom: 5rem;">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Simulasi Menu</p>
|
|
<h1 class="text-dark mb-4">Simulasi Pemilihan Menu Makanan</h1>
|
|
<p class="text-dark mb-4 pb-2">
|
|
Pilih minimal 4 makanan untuk melihat hasil simulasi rekomendasi menu berdasarkan metode AHP.
|
|
</p>
|
|
</div>
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{{ session('error') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<form action="{{ route('user.simulasi.index') }}" method="GET" id="formSimulasi">
|
|
@csrf
|
|
|
|
<!-- Pilih Waktu Makan -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Waktu Makan</label>
|
|
<select name="waktu_makan_id" class="form-select" required>
|
|
<option value="">Pilih Waktu Makan</option>
|
|
@foreach($waktuMakans as $waktuMakan)
|
|
<option value="{{ $waktuMakan->id }}" {{ request('waktu_makan_id') == $waktuMakan->id ? 'selected' : '' }}>{{ $waktuMakan->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Pilih Komponen -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Komponen Makanan</label>
|
|
<select name="komponen_id" class="form-select" required>
|
|
<option value="">Pilih Komponen</option>
|
|
@foreach($komponens as $komponen)
|
|
<option value="{{ $komponen->id }}" {{ request('komponen_id') == $komponen->id ? 'selected' : '' }}>{{ $komponen->nama }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Tombol Tampilkan Makanan -->
|
|
<div class="mb-4">
|
|
<button type="submit" class="btn btn-info">Tampilkan Makanan</button>
|
|
</div>
|
|
|
|
<!-- Daftar Makanan -->
|
|
@if(isset($makanans))
|
|
<div class="mb-4">
|
|
<label class="form-label">Pilih Makanan (Minimal 4)</label>
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Pilih minimal 4 makanan untuk melakukan simulasi
|
|
</div>
|
|
<div id="daftarMakanan" class="row g-3">
|
|
@forelse($makanans as $makanan)
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="form-check">
|
|
<input class="form-check-input makanan-checkbox" type="checkbox"
|
|
name="makanan_ids[]" value="{{ $makanan->id }}"
|
|
id="makanan{{ $makanan->id }}">
|
|
<label class="form-check-label" for="makanan{{ $makanan->id }}">
|
|
{{ $makanan->nama }}
|
|
</label>
|
|
</div>
|
|
<button type="button" class="btn btn-link btn-sm p-0 mt-2"
|
|
onclick="showDetailMakanan('{{ $makanan->id }}', '{{ $makanan->nama }}', '{{ $makanan->gambar ?? '' }}', {{ $makanan->energi }}, {{ $makanan->protein }}, {{ $makanan->lemak }}, {{ $makanan->karbohidrat }}, {{ $makanan->natrium }})">
|
|
<i class="fas fa-info-circle"></i> Detail
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12"><div class="alert alert-info">Tidak ada makanan yang tersedia untuk kombinasi ini.</div></div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Tombol Submit dan History -->
|
|
<div class="text-center mt-4">
|
|
<button type="submit" formaction="{{ route('user.simulasi.proses') }}" formmethod="POST" class="btn btn-primary rounded-pill px-5 py-2 me-2">
|
|
@csrf
|
|
<i class="fas fa-calculator me-2"></i>Proses Simulasi
|
|
</button>
|
|
<a href="{{ route('user.simulasi.history') }}" class="btn btn-info rounded-pill px-5 py-2">
|
|
<i class="fas fa-history me-2"></i>Lihat History
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Detail Makanan -->
|
|
<div class="modal fade" id="modalDetailMakanan" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Detail Makanan</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<img id="makananImage" src="" class="img-fluid rounded" alt="Gambar Makanan">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="mb-3">Informasi Nutrisi</h6>
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<td>Energi</td>
|
|
<td id="makananEnergi">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Protein</td>
|
|
<td id="makananProtein">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Lemak</td>
|
|
<td id="makananLemak">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Karbohidrat</td>
|
|
<td id="makananKarbohidrat">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Natrium</td>
|
|
<td id="makananNatrium">-</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function showDetailMakanan(id, nama, gambar, energi, protein, lemak, karbohidrat, natrium) {
|
|
document.getElementById('makananImage').src = gambar || '/images/no-image.jpg';
|
|
document.getElementById('makananEnergi').textContent = energi + ' kkal';
|
|
document.getElementById('makananProtein').textContent = protein + ' g';
|
|
document.getElementById('makananLemak').textContent = lemak + ' g';
|
|
document.getElementById('makananKarbohidrat').textContent = karbohidrat + ' g';
|
|
document.getElementById('makananNatrium').textContent = natrium + ' mg';
|
|
// Tampilkan modal Bootstrap 5 dengan JavaScript murni
|
|
var modal = new bootstrap.Modal(document.getElementById('modalDetailMakanan'));
|
|
modal.show();
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|