@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;">
            <p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-white">Hasil Rekomendasi Ahli</p>
            <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>

        @forelse ($rekomendasi as $waktu => $komponens)
            <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">
                        🍽️ Menu {{ $waktuMakans[$waktu]->nama ?? ucfirst($waktu) }}
                    </h4>
                    @if($waktuMakans[$waktu]?->keterangan)
                        <p class="text-muted fst-italic mb-3">
                            🕒 {{ $waktuMakans[$waktu]->keterangan }}
                        </p>
                    @endif

                    <div class="d-flex overflow-auto gap-4 pb-2" style="scroll-snap-type: x mandatory;">
                        @foreach ($komponens as $komponen => $items)
                            @php
                                $utama = $items->first();
                                $utamaNama = $utama->nama_makanan ?? '-';
                                $utamaPersen = 100;
                                $modalId = 'modal-' . Str::slug($waktu . '-' . $komponen);

                                // Ambil alternatif dari tabel rekomendasis
                                $alternatifKey = $waktu . '-' . $utama->komponen_id;
                                $alternatifList = $alternatifGrouped[$alternatifKey] ?? collect();
                            @endphp

                            <div class="card shadow-sm p-3 bg-light" style="min-width: 300px; scroll-snap-align: start;">
                                <h6 class="fw-bold text-secondary mb-2">{{ ucfirst($komponen) }}</h6>

                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>🌟 <strong>{{ $utamaNama }}</strong></span>
                                    <span class="badge bg-success">{{ number_format($utamaPersen, 2) }}%</span>
                                </div>

                                <div class="progress mb-2" style="height: 16px;">
                                    <div class="progress-bar bg-info" role="progressbar"
                                         style="width: {{ $utamaPersen }}%;"
                                         aria-valuenow="{{ $utamaPersen }}" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>

                                @if ($alternatifList->count() > 0)
                                    <button class="btn btn-sm btn-outline-primary w-100 mt-2"
                                            data-bs-toggle="modal" data-bs-target="#{{ $modalId }}">
                                        🔁 Lihat Alternatif
                                    </button>
                                @endif
                            </div>

                            <!-- Modal Alternatif -->
                            <div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Label" 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 {{ ucfirst($komponen) }} ({{ $waktuMakans[$waktu]->nama }})</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                        </div>
                                        <div class="modal-body">
                                            @foreach ($alternatifList->sortByDesc('nilai_akhir')->take(4) as $index => $alt)
                                                @php $persen = $alt->nilai_akhir * 100; @endphp
                                                <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-secondary">{{ number_format($persen, 2) }}%</span>
                                                </div>
                                                <div class="progress mb-2" style="height: 14px;">
                                                    <div class="progress-bar bg-secondary" role="progressbar"
                                                         style="width: {{ $persen }}%;"
                                                         aria-valuenow="{{ $persen }}" aria-valuemin="0" aria-valuemax="100">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Modal -->
                        @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;
    }
</style>
@endpush