266 lines
9.8 KiB
PHP
266 lines
9.8 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('title', 'Lihat Alternatif Terpilih')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.card {
|
|
border: none;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
margin-bottom: 2rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(45deg, #0d6efd, #0dcaf0);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 15px 15px 0 0 !important;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.table th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.table td {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.nutrition-value {
|
|
font-weight: 500;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.invers-value {
|
|
font-weight: 500;
|
|
color: #198754;
|
|
}
|
|
|
|
.btn-next {
|
|
padding: 1rem 2rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-next:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.table-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-title i {
|
|
margin-right: 0.75rem;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.table-invers .table-title i {
|
|
color: #198754;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #e8f4f8;
|
|
border-color: #d6e9f9;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.breadcrumb-item a {
|
|
color: #0d6efd;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item.active {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background-color: rgba(0,0,0,.075);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.table-responsive {
|
|
border-radius: 10px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.table td, .table th {
|
|
padding: 0.75rem;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Page Title -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="card-title mb-0">Alternatif Terpilih</h4>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{{ route('admindash') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('alternatif.pilih') }}">Pilih Alternatif</a></li>
|
|
<li class="breadcrumb-item active">Lihat Alternatif</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
|
|
@php
|
|
$alternatifsByKomponen = session('alternatifs_by_komponen');
|
|
$hasilRekomendasi = session('hasil_rekomendasi');
|
|
@endphp
|
|
|
|
@if($alternatifsByKomponen && $hasilRekomendasi)
|
|
<!-- Info Section -->
|
|
<div class="alert alert-info mb-4">
|
|
<h5 class="alert-heading mb-2">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Informasi Pemilihan
|
|
</h5>
|
|
<p class="mb-2">
|
|
Waktu Makan: <strong>{{ $hasilRekomendasi['waktu_makan_nama'] }}</strong><br>
|
|
Tanggal: <strong>{{ \Carbon\Carbon::parse($hasilRekomendasi['tanggal_rekomendasi'])->format('d F Y') }}</strong>
|
|
</p>
|
|
<hr>
|
|
<p class="mb-0">
|
|
<i class="fas fa-lightbulb me-2"></i>
|
|
Nilai invers digunakan untuk kriteria cost (Lemak dan Natrium), dimana semakin kecil nilainya semakin baik.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Alternatif Cards -->
|
|
@foreach($alternatifsByKomponen as $komponenId => $komponen)
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-utensils me-2"></i>
|
|
{{ $komponen['nama_komponen'] }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Normal Values Table -->
|
|
<div class="table-normal mb-4">
|
|
<div class="table-title">
|
|
<i class="fas fa-table"></i>
|
|
Nilai Nutrisi
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nama Makanan</th>
|
|
<th>Lemak (g)</th>
|
|
<th>Natrium (mg)</th>
|
|
<th>Energi (kal)</th>
|
|
<th>Karbohidrat (g)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($komponen['alternatifs'] as $alternatif)
|
|
<tr>
|
|
<td>{{ $alternatif['nama'] }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['lemak'], 2) }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['natrium'], 2) }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['energi'], 2) }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['karbohidrat'], 2) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inverse Values Table -->
|
|
<div class="table-invers">
|
|
<div class="table-title">
|
|
<i class="fas fa-calculator"></i>
|
|
Nilai Invers (Cost Criteria)
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nama Makanan</th>
|
|
<th>Lemak (Invers)</th>
|
|
<th>Natrium (Invers)</th>
|
|
<th>Energi (kal)</th>
|
|
<th>Karbohidrat (g)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($komponen['alternatifs'] as $alternatif)
|
|
<tr>
|
|
<td>{{ $alternatif['nama'] }}</td>
|
|
<td class="invers-value">{{ number_format($alternatif['lemak_invers'], 4) }}</td>
|
|
<td class="invers-value">{{ number_format($alternatif['natrium_invers'], 4) }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['energi'], 2) }}</td>
|
|
<td class="nutrition-value">{{ number_format($alternatif['karbohidrat'], 2) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
<!-- Next Step Button -->
|
|
<div class="text-center mt-4 mb-5">
|
|
<a href="{{ route('alternatif.perbandingan') }}" class="btn btn-success btn-lg btn-next">
|
|
<i class="fas fa-arrow-right me-2"></i>
|
|
Lanjut ke Perbandingan
|
|
</a>
|
|
</div>
|
|
@else
|
|
<div class="alert alert-warning">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
|
Tidak ada data alternatif yang dipilih. Silakan pilih alternatif terlebih dahulu.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |