103 lines
4.5 KiB
PHP
103 lines
4.5 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="pagetitle">
|
|
<h1>🏆 Ranking Rekomendasi Makanan</h1>
|
|
<nav>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}">Home</a></li>
|
|
<li class="breadcrumb-item active">Hasil Rekomendasi</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
<section class="section">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success shadow-sm rounded-3">
|
|
<i class="bi bi-check-circle me-2"></i> {{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@forelse ($rekomendasi as $waktu => $komponens)
|
|
<div class="card shadow-lg border-start border-4 border-success mt-4">
|
|
<div class="card-body">
|
|
<h4 class="card-title fw-bold text-success mb-4">
|
|
🍽️ Menu {{ ucfirst($waktu) }}
|
|
</h4>
|
|
|
|
@foreach ($komponens as $komponen => $items)
|
|
@php
|
|
$utama = $items->first();
|
|
$alternatif = $items->skip(1)->take(4)->values(); // top 5 total
|
|
@endphp
|
|
|
|
<div class="mb-4">
|
|
<h5 class="text-primary fw-semibold">
|
|
📌 {{ ucfirst($komponen) }}
|
|
</h5>
|
|
|
|
<div class="border rounded-3 p-3 bg-light shadow-sm mb-2 d-flex justify-content-between align-items-center">
|
|
<div>
|
|
🌟 <strong>{{ $utama->makanan->nama }}</strong>
|
|
</div>
|
|
<span class="badge bg-success rounded-pill">
|
|
{{ number_format($utama->persentase, 2) }}%
|
|
</span>
|
|
</div>
|
|
|
|
@if ($alternatif->count() > 0)
|
|
<button class="btn btn-sm btn-outline-primary toggle-btn mb-2"
|
|
type="button"
|
|
data-target="#alt-{{ $waktu }}-{{ $komponen }}">
|
|
🔁 Lihat Alternatif
|
|
</button>
|
|
|
|
<ol id="alt-{{ $waktu }}-{{ $komponen }}"
|
|
class="list-group list-group-numbered shadow-sm d-none">
|
|
@foreach ($alternatif as $index => $alt)
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
@if($index == 0) 🥈 @elseif($index == 1) 🥉 @else 🔹 @endif
|
|
<strong>{{ $alt->makanan->nama }}</strong>
|
|
</div>
|
|
<span class="badge bg-secondary rounded-pill">
|
|
{{ number_format($alt->persentase, 2) }}%
|
|
</span>
|
|
</li>
|
|
@endforeach
|
|
</ol>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="alert alert-warning mt-4">
|
|
<i class="bi bi-exclamation-circle me-2"></i> Tidak ada data rekomendasi tersedia untuk hari ini.
|
|
</div>
|
|
@endforelse
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('.toggle-btn').forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
const target = document.querySelector(this.dataset.target);
|
|
target.classList.toggle('d-none');
|
|
this.textContent = target.classList.contains('d-none')
|
|
? '🔁 Lihat Alternatif'
|
|
: '🔼 Sembunyikan Alternatif';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|