MIF_E31220044/resources/views/user/rekomendasi/index.blade.php

157 lines
4.8 KiB
PHP

@extends('layout.app')
@section('content')
<div class="container mt-4">
<div class="card">
<div class="card-header">
<h4 class="mb-0">Hasil Rekomendasi Pupuk</h4>
</div>
<div class="card-body">
{{-- Menampilkan Rekomendasi Terbaik --}}
@if ($rekomendasi && property_exists($rekomendasi, 'nama'))
<div class="alert alert-success">
<h5>Pupuk Terbaik: <strong>{{ $rekomendasi->nama }}</strong></h5>
<ul class="mb-0">
<li>Kandungan: N = {{ $rekomendasi->N }}, P = {{ $rekomendasi->P }}, K = {{ $rekomendasi->K }}</li>
<li>Harga: Rp{{ number_format($rekomendasi->harga, 0, ',', '.') }}</li>
<li>Skor: {{ number_format($rekomendasi->nilai, 4) }}</li>
</ul>
</div>
@else
<div class="alert alert-warning">
Tidak ada pupuk yang cocok dengan kebutuhan Anda.
</div>
@endif
{{-- Tabel Semua Alternatif --}}
@if (!empty($alternatifs))
<div class="table-responsive mt-4">
<div class="table-wrapper">
<table class="table table-bordered table-hover">
<thead class="table-dark">
<tr>
<th>Nama Pupuk</th>
<th>N</th>
<th>P</th>
<th>K</th>
<th>Harga</th>
<th>Norm N</th>
<th>Norm P</th>
<th>Norm K</th>
<th>Norm Harga</th>
<th>Skor Akhir</th>
<th>Persentase (%)</th>
</tr>
</thead>
<tbody>
@foreach ($alternatifs as $a)
<tr>
<td>{{ $a['nama'] }}</td>
<td>{{ $a['N'] }}</td>
<td>{{ $a['P'] }}</td>
<td>{{ $a['K'] }}</td>
<td>Rp{{ number_format($a['harga'], 0, ',', '.') }}</td>
<td>{{ number_format($a['normalized_N'], 4) }}</td>
<td>{{ number_format($a['normalized_P'], 4) }}</td>
<td>{{ number_format($a['normalized_K'], 4) }}</td>
<td>{{ number_format($a['normalized_harga'], 4) }}</td>
<td><strong>{{ number_format($a['nilai'], 4) }}</strong></td>
<td><strong>{{ number_format($a['persentase'], 2) }}%</strong></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endif
</div>
</div>
</div>
<style>
/* Styling untuk tabel responsif */
.table-responsive {
margin: 0;
padding: 0;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-wrapper {
position: relative;
min-width: 100%;
}
.table {
margin-bottom: 0;
width: 100%;
background: #fff;
}
/* Custom scrollbar untuk tabel */
.table-responsive::-webkit-scrollbar {
height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Styling untuk mobile */
@media (max-width: 768px) {
.container {
padding: 10px;
}
.card {
margin: 0;
border-radius: 0;
}
.table {
font-size: 14px;
}
.table td, .table th {
padding: 8px;
white-space: nowrap;
}
.alert {
margin: 10px 0;
padding: 10px;
}
.table-responsive {
border: 1px solid #dee2e6;
border-radius: 4px;
}
/* Indikator scroll horizontal */
.table-wrapper::after {
content: '⟷ Geser untuk melihat lebih banyak';
display: block;
text-align: center;
font-size: 12px;
padding: 5px;
color: #666;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
}
}
</style>
@endsection