273 lines
13 KiB
PHP
273 lines
13 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;">
|
|
<div class="d-flex justify-content-center align-items-center gap-2 mb-3">
|
|
<p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-white mb-0">Hasil Rekomendasi Ahli</p>
|
|
{{-- <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#pdfModal">
|
|
<i class="fas fa-file-pdf"></i> Lihat Panduan
|
|
</button> --}}
|
|
</div>
|
|
<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>
|
|
|
|
<!-- PDF Modal -->
|
|
<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header flex-column align-items-start">
|
|
<h5 class="modal-title mb-2" id="pdfModalLabel">
|
|
<i class="fas fa-file-pdf text-danger me-2"></i>Panduan Rekomendasi Ahli
|
|
</h5>
|
|
<div class="pdf-description">
|
|
<p class="text-muted mb-0" style="font-size: 0.95rem;">
|
|
Dokumen ini berisi panduan diet khusus yang disusun oleh ahli gizi untuk penderita penyakit jantung, meliputi:
|
|
</p>
|
|
<ul class="text-muted mb-0 ps-3 mt-1" style="font-size: 0.9rem;">
|
|
<li>Rekomendasi pola makan sehat untuk jantung</li>
|
|
<li>Daftar makanan yang dianjurkan dan dibatasi</li>
|
|
<li>Porsi makanan yang disarankan per waktu makan</li>
|
|
<li>Tips dan panduan diet sehari-hari</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<iframe src="{{ asset('file/rekomendasiahli.pdf') }}" width="100%" height="600px" frameborder="0"></iframe>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="{{ asset('file/rekomendasiahli.pdf') }}" class="btn btn-primary" download>
|
|
<i class="fas fa-download me-1"></i> Unduh PDF
|
|
</a>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@forelse ($rekomendasiAhli as $hari => $waktuMakans)
|
|
<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">
|
|
📅 {{ $hari }}
|
|
</h4>
|
|
|
|
<div class="d-flex overflow-auto gap-4 pb-2" style="scroll-snap-type: x mandatory;">
|
|
@foreach ($waktuMakans as $waktuMakan => $komponens)
|
|
<div class="card shadow-sm p-3 bg-light" style="min-width: 350px; scroll-snap-align: start;">
|
|
<h6 class="fw-bold text-secondary mb-3">
|
|
🍽️ {{ $waktuMakan }}
|
|
</h6>
|
|
|
|
@foreach ($komponens as $komponen => $makananCollection)
|
|
@php
|
|
$makananItem = $makananCollection->first();
|
|
@endphp
|
|
@if($makananItem)
|
|
<div class="mb-3 p-3 border rounded" style="background: rgba(255,255,255,0.7);">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<div>
|
|
<h6 class="fw-bold text-dark mb-1">{{ $komponen }}</h6>
|
|
<p class="mb-0 text-primary fw-semibold">
|
|
🌟 {{ $makananItem->makanan->nama }}
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-info"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#alternatifModal-{{ $hari }}-{{ $waktuMakan }}-{{ $komponen }}">
|
|
<i class="fas fa-arrow-right"></i> Alternatif
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Alternatif -->
|
|
<div class="modal fade" id="alternatifModal-{{ $hari }}-{{ $waktuMakan }}-{{ $komponen }}"
|
|
tabindex="-1" aria-labelledby="alternatifModalLabel" 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 {{ $komponen }} ({{ $hari }} - {{ $waktuMakan }})
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Makanan Pakar -->
|
|
<div class="alert alert-success">
|
|
<h6 class="alert-heading mb-2">
|
|
<i class="fas fa-star text-warning"></i> Rekomendasi Ahli
|
|
</h6>
|
|
<p class="mb-0 fw-bold">{{ $makananItem->makanan->nama }}</p>
|
|
</div>
|
|
|
|
<div class="border-top my-3"></div>
|
|
|
|
<!-- Alternatif dari AHP -->
|
|
<h6 class="mb-3">
|
|
<i class="fas fa-chart-line text-info"></i> Alternatif dari Sistem AHP
|
|
</h6>
|
|
|
|
@php
|
|
$alternatifAHP = $alternatifAHPData[$hari][$waktuMakan][$komponen] ?? collect();
|
|
@endphp
|
|
|
|
@if($alternatifAHP->count() > 0)
|
|
@foreach($alternatifAHP->take(5) as $index => $alt)
|
|
<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-info">{{ number_format($alt->nilai_akhir, 4) }}</span>
|
|
</div>
|
|
<div class="progress mb-3" style="height: 12px;">
|
|
@php
|
|
$maxNilai = $alternatifAHP->max('nilai_akhir');
|
|
$persentase = $maxNilai > 0 ? ($alt->nilai_akhir / $maxNilai) * 100 : 0;
|
|
@endphp
|
|
<div class="progress-bar bg-info" role="progressbar"
|
|
style="width: {{ $persentase }}%;"
|
|
aria-valuenow="{{ $persentase }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@else
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Belum ada data alternatif dari sistem AHP untuk komponen ini.
|
|
</div>
|
|
@endif
|
|
|
|
<div class="border-top mt-3 pt-2">
|
|
<small class="text-muted">
|
|
* Nilai dihitung berdasarkan metode AHP (Analytic Hierarchy Process)
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
@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;
|
|
}
|
|
|
|
/* PDF Modal Styles */
|
|
#pdfModal .modal-dialog {
|
|
max-width: 90%;
|
|
margin: 1.75rem auto;
|
|
}
|
|
|
|
#pdfModal .modal-content {
|
|
border: none;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#pdfModal .modal-header {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
#pdfModal .modal-title {
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#pdfModal .pdf-description {
|
|
background: rgba(255,255,255,0.7);
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
border: 1px solid rgba(0,0,0,0.05);
|
|
width: 100%;
|
|
}
|
|
|
|
#pdfModal .pdf-description ul {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
#pdfModal .pdf-description li {
|
|
margin-bottom: 0.25rem;
|
|
position: relative;
|
|
}
|
|
|
|
#pdfModal .pdf-description li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#pdfModal .modal-footer {
|
|
background: #f8f9fa;
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#pdfModal iframe {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
/* PDF Button Styles */
|
|
.btn-outline-primary.rounded-pill {
|
|
border-width: 2px;
|
|
padding: 0.375rem 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-outline-primary.rounded-pill:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Alternatif Button Styles */
|
|
.btn-outline-info {
|
|
border-width: 1px;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-outline-info:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#pdfModal .modal-dialog {
|
|
max-width: 95%;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
#pdfModal iframe {
|
|
height: 400px;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|