@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;">
            <div class="d-flex justify-content-center align-items-center gap-2 mb-3">
                <p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-white mb-0">Hasil Rekomendasi Ahli</p>
                {{-- <button type="button" class="btn btn-sm btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#pdfModal">
                    <i class="fas fa-file-pdf"></i> Lihat Panduan
                </button> --}}
            </div>
            <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>

        <!-- PDF Modal -->
        <div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header flex-column align-items-start">
                        <h5 class="modal-title mb-2" id="pdfModalLabel">
                            <i class="fas fa-file-pdf text-danger me-2"></i>Panduan Rekomendasi Ahli
                        </h5>
                        <div class="pdf-description">
                            <p class="text-muted mb-0" style="font-size: 0.95rem;">
                                Dokumen ini berisi panduan diet khusus yang disusun oleh ahli gizi untuk penderita penyakit jantung, meliputi:
                            </p>
                            <ul class="text-muted mb-0 ps-3 mt-1" style="font-size: 0.9rem;">
                                <li>Rekomendasi pola makan sehat untuk jantung</li>
                                <li>Daftar makanan yang dianjurkan dan dibatasi</li>
                                <li>Porsi makanan yang disarankan per waktu makan</li>
                                <li>Tips dan panduan diet sehari-hari</li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-body p-0">
                        <iframe src="{{ asset('file/rekomendasiahli.pdf') }}" width="100%" height="600px" frameborder="0"></iframe>
                    </div>
                    <div class="modal-footer">
                        <a href="{{ asset('file/rekomendasiahli.pdf') }}" class="btn btn-primary" download>
                            <i class="fas fa-download me-1"></i> Unduh PDF
                        </a>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>

        @forelse ($rekomendasiAhli as $hari => $waktuMakans)
            <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">
                        📅 {{ $hari }}
                    </h4>

                    <div class="d-flex overflow-auto gap-4 pb-2" style="scroll-snap-type: x mandatory;">
                        @foreach ($waktuMakans as $waktuMakan => $komponens)
                            <div class="card shadow-sm p-3 bg-light" style="min-width: 350px; scroll-snap-align: start;">
                                <h6 class="fw-bold text-secondary mb-3">
                                    🍽️ {{ $waktuMakan }}
                                </h6>

                                @foreach ($komponens as $komponen => $makananCollection)
                                    @php
                                        $makananItem = $makananCollection->first();
                            @endphp
                                    @if($makananItem)
                                        <div class="mb-3 p-3 border rounded" style="background: rgba(255,255,255,0.7);">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <h6 class="fw-bold text-dark mb-1">{{ $komponen }}</h6>
                                                    <p class="mb-0 text-primary fw-semibold">
                                                        🌟 {{ $makananItem->makanan->nama }}
                                                    </p>
                                </div>
                                                <button class="btn btn-sm btn-outline-info" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#alternatifModal-{{ $hari }}-{{ $waktuMakan }}-{{ $komponen }}">
                                                    <i class="fas fa-arrow-right"></i> Alternatif
                                                </button>
                                    </div>
                            </div>

                            <!-- Modal Alternatif -->
                                        <div class="modal fade" id="alternatifModal-{{ $hari }}-{{ $waktuMakan }}-{{ $komponen }}" 
                                             tabindex="-1" aria-labelledby="alternatifModalLabel" 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 {{ $komponen }} ({{ $hari }} - {{ $waktuMakan }})
                                                        </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                        </div>
                                        <div class="modal-body">
                                                        <!-- Makanan Pakar -->
                                                        <div class="alert alert-success">
                                                            <h6 class="alert-heading mb-2">
                                                                <i class="fas fa-star text-warning"></i> Rekomendasi Ahli
                                                            </h6>
                                                            <p class="mb-0 fw-bold">{{ $makananItem->makanan->nama }}</p>
                                            </div>

                                            <div class="border-top my-3"></div>

                                                        <!-- Alternatif dari AHP -->
                                                        <h6 class="mb-3">
                                                            <i class="fas fa-chart-line text-info"></i> Alternatif dari Sistem AHP
                                                        </h6>
                                                        
                                                @php 
                                                            $alternatifAHP = $alternatifAHPData[$hari][$waktuMakan][$komponen] ?? collect();
                                                @endphp

                                                        @if($alternatifAHP->count() > 0)
                                                            @foreach($alternatifAHP->take(5) as $index => $alt)
                                                <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-info">{{ number_format($alt->nilai_akhir, 4) }}</span>
                                                </div>
                                                                <div class="progress mb-3" style="height: 12px;">
                                                                    @php
                                                                        $maxNilai = $alternatifAHP->max('nilai_akhir');
                                                                        $persentase = $maxNilai > 0 ? ($alt->nilai_akhir / $maxNilai) * 100 : 0;
                                                                    @endphp
                                                                    <div class="progress-bar bg-info" role="progressbar"
                                                                         style="width: {{ $persentase }}%;"
                                                                         aria-valuenow="{{ $persentase }}" 
                                                         aria-valuemin="0" 
                                                         aria-valuemax="100">
                                                    </div>
                                                </div>
                                            @endforeach
                                                        @else
                                                            <div class="alert alert-warning">
                                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                                Belum ada data alternatif dari sistem AHP untuk komponen ini.
                                                            </div>
                                                        @endif

                                            <div class="border-top mt-3 pt-2">
                                                <small class="text-muted">
                                                                * Nilai dihitung berdasarkan metode AHP (Analytic Hierarchy Process)
                                                </small>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                    @endif
                                @endforeach
                            </div>
                        @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;
    }

    /* PDF Modal Styles */
    #pdfModal .modal-dialog {
        max-width: 90%;
        margin: 1.75rem auto;
    }

    #pdfModal .modal-content {
        border: none;
        border-radius: 1rem;
        overflow: hidden;
    }

    #pdfModal .modal-header {
        background: #f8f9fa;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding: 1.5rem;
    }

    #pdfModal .modal-title {
        color: #2c3e50;
        font-weight: 600;
    }

    #pdfModal .pdf-description {
        background: rgba(255,255,255,0.7);
        border-radius: 0.5rem;
        padding: 0.75rem;
        border: 1px solid rgba(0,0,0,0.05);
        width: 100%;
    }

    #pdfModal .pdf-description ul {
        margin-top: 0.5rem;
    }

    #pdfModal .pdf-description li {
        margin-bottom: 0.25rem;
        position: relative;
    }

    #pdfModal .pdf-description li:last-child {
        margin-bottom: 0;
    }

    #pdfModal .modal-footer {
        background: #f8f9fa;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    #pdfModal iframe {
        background: #f8f9fa;
    }

    /* PDF Button Styles */
    .btn-outline-primary.rounded-pill {
        border-width: 2px;
        padding: 0.375rem 1rem;
        transition: all 0.3s ease;
    }

    .btn-outline-primary.rounded-pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Alternatif Button Styles */
    .btn-outline-info {
        border-width: 1px;
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .btn-outline-info:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    @media (max-width: 768px) {
        #pdfModal .modal-dialog {
            max-width: 95%;
            margin: 1rem auto;
        }

        #pdfModal iframe {
            height: 400px;
        }
    }
</style>
@endpush