@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