@extends('layoutuser.app')

@section('content')
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
            <p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-white">Hasil Rekomendasi AHP</p>
            <h1 class="mb-3">Rekomendasi Menu Makanan Terbaik untuk Anda</h1>
            <p class="text-muted">Berikut adalah hasil akhir dari perhitungan berdasarkan metode AHP. Nilai akhir menunjukkan tingkat kesesuaian berdasarkan kriteria yang telah di pilih.</p>
        </div>

        <div class="table-responsive wow fadeInUp" data-wow-delay="0.2s">
            <table class="table align-middle table-hover shadow-sm">
                <thead class="table-dark text-center">
                    <tr>
                        <th>Peringkat</th>
                        <th>Nama Makanan</th>
                        <th>Nilai Akhir</th>
                        <th>Persentase</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rekomendasi->sortByDesc('nilai_akhir')->values() as $index => $rekom)
                    <tr>
                        <td class="text-center">
                            <span class="badge bg-success fs-6">{{ $index + 1 }}</span>
                        </td>
                        <td class="fw-semibold">{{ $rekom->makanan->nama }}</td>
                        <td class="text-center">{{ number_format($rekom->nilai_akhir, 4) }}</td>
                        <td style="min-width: 150px;">
                            @php
                                $persentase = ($totalNilaiAkhir > 0) ? ($rekom->nilai_akhir / $totalNilaiAkhir) * 100 : 0;
                            @endphp
                            <div class="d-flex align-items-center">
                                <div class="progress flex-grow-1 me-2" style="height: 20px;">
                                    <div class="progress-bar bg-info" role="progressbar"
                                         style="width: {{ $persentase }}%;"
                                         aria-valuenow="{{ $persentase }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <small class="fw-semibold text-dark" style="width: 50px;">{{ number_format($persentase, 2) }}%</small>
                            </div>
                        </td>
                        <td class="text-center">
                            <a class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#detailModal{{ $index }}">
                                <i class="fa fa-info-circle me-1"></i> Detail
                            </a>                            
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@foreach ($rekomendasi as $index => $rekom)
<!-- Modal -->
<div class="modal fade" id="detailModal{{ $index }}" tabindex="-1" aria-labelledby="detailModalLabel{{ $index }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailModalLabel{{ $index }}">Detail Makanan: {{ $rekom->makanan->nama }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><strong>Lemak:</strong> {{ $rekom->makanan->lemak }} g</li>
          <li class="list-group-item"><strong>Natrium:</strong> {{ $rekom->makanan->natrium }} mg</li>
          <li class="list-group-item"><strong>Energi:</strong> {{ $rekom->makanan->energi }} kal</li>
          <li class="list-group-item"><strong>Karbohidrat:</strong> {{ $rekom->makanan->karbohidrat }} g</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>
@endforeach

@endsection