118 lines
6.5 KiB
PHP
118 lines
6.5 KiB
PHP
@extends('layoutuser.app')
|
|
|
|
@section('content')
|
|
<div class="container-xxl py-5">
|
|
<div class="container">
|
|
|
|
<div class="text-center mx-auto mb-5" style="max-width: 700px;">
|
|
<p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-white">Hasil Rekomendasi Ahli</p>
|
|
<h1 class="mb-3">Menu Makanan Terbaik dari Ahli Gizi</h1>
|
|
<p class="text-muted">Ditampilkan berdasarkan panduan ahli gizi untuk penderita penyakit jantung.</p>
|
|
</div>
|
|
|
|
@forelse ($rekomendasi as $waktu => $komponens)
|
|
<div class="card shadow-sm border-start border-4 border-primary mb-5">
|
|
<div class="card-body">
|
|
<h4 class="text-primary fw-bold mb-2">
|
|
🍽️ Menu {{ $waktuMakans[$waktu]->nama ?? ucfirst($waktu) }}
|
|
</h4>
|
|
@if($waktuMakans[$waktu]?->keterangan)
|
|
<p class="text-muted fst-italic mb-3">
|
|
🕒 {{ $waktuMakans[$waktu]->keterangan }}
|
|
</p>
|
|
@endif
|
|
|
|
<div class="d-flex overflow-auto gap-4 pb-2" style="scroll-snap-type: x mandatory;">
|
|
@foreach ($komponens as $komponen => $items)
|
|
@php
|
|
$utama = $items->first();
|
|
$utamaNama = $utama->nama_makanan ?? '-';
|
|
$utamaPersen = 100;
|
|
$modalId = 'modal-' . Str::slug($waktu . '-' . $komponen);
|
|
|
|
// Ambil alternatif dari tabel rekomendasis
|
|
$alternatifKey = $waktu . '-' . $utama->komponen_id;
|
|
$alternatifList = $alternatifGrouped[$alternatifKey] ?? collect();
|
|
@endphp
|
|
|
|
<div class="card shadow-sm p-3 bg-light" style="min-width: 300px; scroll-snap-align: start;">
|
|
<h6 class="fw-bold text-secondary mb-2">{{ ucfirst($komponen) }}</h6>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span>🌟 <strong>{{ $utamaNama }}</strong></span>
|
|
<span class="badge bg-success">{{ number_format($utamaPersen, 2) }}%</span>
|
|
</div>
|
|
|
|
<div class="progress mb-2" style="height: 16px;">
|
|
<div class="progress-bar bg-info" role="progressbar"
|
|
style="width: {{ $utamaPersen }}%;"
|
|
aria-valuenow="{{ $utamaPersen }}" aria-valuemin="0" aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
|
|
@if ($alternatifList->count() > 0)
|
|
<button class="btn btn-sm btn-outline-primary w-100 mt-2"
|
|
data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">
|
|
🔁 Lihat Alternatif
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Modal Alternatif -->
|
|
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content shadow">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Alternatif untuk {{ ucfirst($komponen) }} ({{ $waktuMakans[$waktu]->nama }})</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
@foreach ($alternatifList->sortByDesc('nilai_akhir')->take(4) as $index => $alt)
|
|
@php $persen = $alt->nilai_akhir * 100; @endphp
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<span>
|
|
@if ($index == 0) 🥈 @elseif ($index == 1) 🥉 @else 🔹 @endif
|
|
{{ $alt->makanan->nama }}
|
|
</span>
|
|
<span class="badge bg-secondary">{{ number_format($persen, 2) }}%</span>
|
|
</div>
|
|
<div class="progress mb-2" style="height: 14px;">
|
|
<div class="progress-bar bg-secondary" role="progressbar"
|
|
style="width: {{ $persen }}%;"
|
|
aria-valuenow="{{ $persen }}" aria-valuemin="0" aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Modal -->
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="alert alert-warning text-center">
|
|
<i class="fa fa-exclamation-circle me-2"></i> Tidak ada hasil rekomendasi ahli tersedia saat ini.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.card-carousel::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.card-carousel {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
@endpush
|