@extends('layouts.app')

@section('title', 'Detail Laporan Rekomendasi')

@section('content')

@php
    $hasil = json_decode($laporan->hasil_json, true) ?? [];

    $pasien = $laporan->pasien ?? null;

    $aktivitas_laporan = $laporan->aktivitas_harian
        ?? optional($pasien)->aktivitas_harian
        ?? '-';

    $bb = $laporan->berat_badan
        ?? optional($pasien)->berat_badan
        ?? 0;

    $tb = $laporan->tinggi_badan
        ?? optional($pasien)->tinggi_badan
        ?? 0;

    $umur = $laporan->umur
        ?? optional($pasien)->umur
        ?? 0;

    $jenis_kelamin = $laporan->jenis_kelamin
        ?? optional($pasien)->jenis_kelamin
        ?? '-';

    $kebutuhan_kalori = $laporan->kebutuhan_kalori ?? 0;

    if ($kebutuhan_kalori <= 0 && $bb > 0 && $tb > 0 && $umur > 0) {

        if ($jenis_kelamin == 'Laki-laki') {
            $bmr = 66.5 + (13.7 * $bb) + (5 * $tb) - (6.8 * $umur);
        } else {
            $bmr = 655 + (9.6 * $bb) + (1.8 * $tb) - (4.7 * $umur);
        }

        $faktor = match(strtolower($aktivitas_laporan)) {
            'ringan' => 1.2,
            'sedang' => 1.55,
            'berat'  => 1.9,
            default  => 1.2
        };

        $kebutuhan_kalori = round($bmr * $faktor);
    }

    $ukuran_porsi = $laporan->ukuran_porsi;

    $jumlah_porsi = $laporan->jumlah_porsi ?? 1;

    $frekuensi_makan = $laporan->frekuensi_makan ?? '3x makan utama + 2x snack';

    if (empty($jumlah_porsi) || $jumlah_porsi < 1) {
        $jumlah_porsi = 1;
    }

    if (empty($ukuran_porsi)) {
        if ($bb >= 90) {
            $ukuran_porsi = 'Mangkuk Besar';
        } elseif ($bb >= 70) {
            $ukuran_porsi = 'Mangkuk Sedang';
        } else {
            $ukuran_porsi = 'Mangkuk Kecil';
        }
    }
@endphp

<div class="max-w-7xl mx-auto space-y-8 pb-10">

    <!-- HEADER -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">

        <div>

            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800 tracking-tight">
                Detail Rekomendasi
            </h1>

            <p class="text-base text-gray-500 mt-2">
                Analisis rekomendasi makanan menggunakan metode
                <span class="font-semibold text-green-700">
                    Simple Additive Weighting (SAW)
                </span>
            </p>

            <!-- INFO KALORI -->
            <div class="mt-4">

                <span class="inline-flex items-center gap-2 px-4 py-2 bg-green-50 text-green-700 rounded-xl text-sm font-semibold border border-green-100">
                    🔥 Kebutuhan Kalori:
                    {{ number_format($kebutuhan_kalori) }} kkal / hari
                </span>

            </div>

        </div>

        <div class="flex flex-col items-end gap-3">

            <span class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full text-sm font-semibold">
                ID Laporan #{{ $laporan->id }}
            </span>

            <a href="{{ route('laporan.cetak', $laporan->id) }}"
                target="_blank"
                class="inline-flex items-center gap-2 px-5 py-3 text-sm font-semibold text-white bg-green-600 rounded-xl hover:bg-green-700 transition">

                Cetak Laporan

            </a>

        </div>

    </div>

    <!-- GRID INFO -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 2xl:grid-cols-9 gap-5">

        <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">

            <p class="text-[11px] font-semibold text-gray-400 uppercase">
                Nama Pasien
            </p>

            <p class="text-lg font-bold text-gray-800 italic truncate mt-2">
                {{ $laporan->nama_pasien }}
            </p>

        </div>

        <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">

            <p class="text-[11px] font-semibold text-gray-400 uppercase">
                Waktu
            </p>

            <p class="text-lg text-gray-700 mt-2">
                {{ $laporan->created_at->format('d M Y') }}
            </p>

        </div>

        <div class="bg-white border border-red-100 rounded-2xl p-6 shadow-sm">

            <p class="text-[11px] font-semibold text-gray-400 uppercase">
                Gejala
            </p>

            <p class="text-lg font-bold text-red-500 mt-2 leading-7">
                {{ ucwords(str_replace(',', ', ', $laporan->gejala)) }}
            </p>

        </div>

        <div class="bg-white border border-blue-100 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Aktivitas
        </p>

        <p class="text-lg text-blue-700 font-bold mt-2">
            {{ ucwords($laporan->aktivitas_harian ?? '-') }}
        </p>

    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Berat
        </p>

        <p class="text-lg font-bold text-gray-800 mt-2">
            {{ $laporan->berat_badan ?? 0 }} kg
        </p>

    </div>

    <div class="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Tinggi
        </p>

        <p class="text-lg font-bold text-gray-800 mt-2">
            {{ $laporan->tinggi_badan ?? 0 }} cm
        </p>

    </div>

    <div class="bg-white border border-green-100 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Jumlah Porsi
        </p>

        <p class="text-lg text-green-700 font-bold mt-2">
            {{ $jumlah_porsi }} Porsi
        </p>

    </div>

    <div class="bg-white border border-orange-100 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Ukuran Porsi
        </p>

        <p class="text-lg text-orange-600 font-bold mt-2">
            {{ $ukuran_porsi }}
        </p>

    </div>
    <div class="bg-white border border-purple-100 rounded-2xl p-6 shadow-sm">

        <p class="text-[11px] font-semibold text-gray-400 uppercase">
            Frekuensi Makan
        </p>

        <p class="text-sm text-purple-700 font-bold mt-2 leading-6">
            {{ $frekuensi_makan }}
        </p>

    </div>
</div>   

   <!-- CARD REKOMENDASI -->
    @if(!empty($hasil))

    <div class="bg-gradient-to-r from-green-50 to-white border border-green-200 rounded-3xl p-8 shadow-sm">

        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">

            <!-- LEFT CONTENT -->
            <div class="flex-1">

                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-green-100 text-green-700 text-xs font-bold uppercase tracking-wide mb-5">

                    Rekomendasi Terbaik

                </div>

                <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
                    {{ $hasil[0]['nama_makanan'] ?? '-' }}
                </h3>

                <p class="text-gray-600 mt-4 leading-7 max-w-3xl">

                    Menu makanan ini memiliki nilai tertinggi berdasarkan
                    perhitungan metode
                    <span class="font-semibold text-green-700">
                        Simple Additive Weighting (SAW)
                    </span>
                    dengan mempertimbangkan kondisi gejala gastritis,
                    kandungan nutrisi,
                    tekstur makanan,
                    dan kebutuhan energi pasien.

                </p>

            </div>

            <!-- RIGHT SCORE -->
            <div class="lg:w-[260px]">

                <div class="bg-white border border-green-200 rounded-3xl p-7 text-center shadow-sm">

                    <p class="text-sm font-semibold text-green-600 uppercase tracking-wide">
                        Skor SAW
                    </p>

                    <div class="mt-4">

                        <h2 class="text-5xl font-black text-green-700 leading-none">
                            {{ number_format($hasil[0]['skor'] ?? 0, 4) }}
                        </h2>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endif
    <!-- PENJELASAN -->
@if(!empty($hasil))

@php
    $top = $hasil[0];
    $gejala = strtolower($laporan->gejala ?? '');
    $aktivitas = strtolower($aktivitas_laporan ?? 'ringan');

    $penjelasan = '';

    if(str_contains($gejala, 'mual')){
        $penjelasan =
        "Menu makanan <b>{$top['nama_makanan']}</b> direkomendasikan karena memiliki tekstur yang lembut dan lebih mudah diterima oleh lambung. Makanan ini dapat membantu pasien tetap makan dengan nyaman tanpa memperberat rasa mual. ";

        if($aktivitas == 'berat'){
            $penjelasan .= "Menu ini juga membantu memenuhi kebutuhan energi pasien yang memiliki aktivitas harian berat. ";
        } elseif($aktivitas == 'sedang'){
            $penjelasan .= "Menu ini juga cukup membantu memenuhi kebutuhan energi pasien dengan aktivitas harian sedang. ";
        } else {
            $penjelasan .= "Menu ini juga sesuai untuk kebutuhan energi pasien dengan aktivitas harian ringan. ";
        }

    } elseif(str_contains($gejala, 'nyeri lambung')){
        $penjelasan =
        "Menu makanan <b>{$top['nama_makanan']}</b> direkomendasikan karena lebih ramah untuk lambung, mudah dicerna, dan tidak terlalu membebani kerja lambung. Makanan ini dapat membantu pasien tetap mendapatkan asupan makanan yang sesuai saat mengalami nyeri lambung. ";

        if($aktivitas == 'berat'){
            $penjelasan .= "Menu ini juga disesuaikan dengan kebutuhan energi pasien yang memiliki aktivitas harian berat. ";
        } elseif($aktivitas == 'sedang'){
            $penjelasan .= "Menu ini juga disesuaikan dengan kebutuhan energi pasien yang memiliki aktivitas harian sedang. ";
        } else {
            $penjelasan .= "Menu ini juga disesuaikan dengan kebutuhan energi pasien yang memiliki aktivitas harian ringan. ";
        }

    } else {
        $penjelasan =
        "Menu makanan <b>{$top['nama_makanan']}</b> direkomendasikan karena sesuai dengan kondisi pasien, kebutuhan energi harian, dan kandungan nutrisi makanan. ";
    }
@endphp

<div class="bg-white border border-gray-200 rounded-3xl shadow-sm p-7 mb-8">

    <h3 class="text-xl font-bold text-gray-800 mb-4">
        Penjelasan Rekomendasi
    </h3>

    <div class="text-gray-700 leading-8 text-[15px] space-y-5">

        <p>
            {!! $penjelasan !!}
        </p>

        @if(!empty($jumlah_porsi) && !empty($ukuran_porsi))

            @if(str_contains($gejala, 'mual'))

                <p>
                    Pasien dianjurkan mengonsumsi
                    <span class="font-bold text-green-700">{{ $jumlah_porsi }} porsi</span>
                    dengan ukuran
                    <span class="font-bold text-orange-600">{{ $ukuran_porsi }}</span>
                    pada setiap makan utama agar makanan lebih nyaman diterima oleh lambung dan tidak memperberat rasa mual.
                    Konsumsi makanan tetap dianjurkan secara bertahap agar pasien tetap nyaman saat makan.
                </p>

            @elseif(str_contains($gejala, 'nyeri lambung'))

                <p>
                    Pasien dianjurkan mengonsumsi makanan dengan ukuran
                    <span class="font-bold text-orange-600">{{ $ukuran_porsi }}</span>
                    pada setiap makan utama.
                    Jumlah porsi disesuaikan dengan kebutuhan energi dan aktivitas pasien, namun konsumsi makanan tetap dianjurkan secara bertahap agar lambung tidak bekerja terlalu berat.
                </p>

            @endif

            <p>
                Selain itu, pasien dianjurkan makan secara teratur sebanyak
                <span class="font-bold text-purple-700">{{ $frekuensi_makan }}</span>
                agar lambung tidak kosong terlalu lama dan kebutuhan energi harian tetap terpenuhi.
                Snack yang dimaksud adalah makanan ringan yang aman untuk lambung, seperti makanan yang tidak pedas, tidak asam, tidak berminyak, dan mudah dicerna.
            </p>

        @endif

    </div>

</div>

@endif

    <!-- TABEL -->
    <div class="space-y-4">

        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">

            <div>
                <h2 class="text-2xl font-bold text-gray-800">
                    Ranking Alternatif Makanan
                </h2>

                <p class="text-sm text-gray-500 mt-1">
                    Hasil perangkingan makanan berdasarkan metode SAW
                </p>
            </div>

            <div class="px-4 py-2 rounded-xl bg-gray-100 text-gray-600 text-xs font-semibold border border-gray-200">
                Kriteria:
                Protein • Lemak • Karbo • Serat • Kalori
            </div>

        </div>

        <div class="bg-white border border-gray-200 rounded-3xl overflow-hidden shadow-sm">

            <div class="overflow-x-auto">

                <table class="min-w-[1100px] w-full">

                    <thead class="bg-gray-50 border-b border-gray-100">

                        <tr class="text-[11px] uppercase tracking-wide text-gray-500">

                            <th class="px-6 py-5 text-left w-16">Rank</th>
                            <th class="px-6 py-5 text-left min-w-[240px]">Menu Makanan</th>
                            <th class="px-4 py-5 text-center">Protein</th>
                            <th class="px-4 py-5 text-center">Lemak</th>
                            <th class="px-4 py-5 text-center">Karbo</th>
                            <th class="px-4 py-5 text-center">Serat</th>
                            <th class="px-4 py-5 text-center">Kalori</th>
                            <th class="px-5 py-5 text-center">Skor SAW</th>
                            <th class="px-6 py-5 text-center">Detail</th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-100">

    @foreach(array_slice($hasil, 0, 10) as $index => $item)

    @php
        $rank = $index + 1;
    @endphp

    <tr class="hover:bg-gray-50 transition">

        <td class="px-6 py-5">

            @if($rank == 1)

                <div class="w-9 h-9 rounded-full bg-green-600 text-white flex items-center justify-center text-sm font-bold shadow-sm">
                    1
                </div>

            @elseif($rank == 2)

                <div class="w-9 h-9 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center text-sm font-bold">
                    2
                </div>

            @elseif($rank == 3)

                <div class="w-9 h-9 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center text-sm font-bold">
                    3
                </div>

            @else

                <div class="text-gray-400 font-bold text-lg pl-2">
                    {{ $rank }}
                </div>

            @endif

        </td>

        <td class="px-6 py-5">

            <div class="space-y-2">

                <div class="font-bold text-gray-800 text-base leading-tight">
                    {{ $item['nama_makanan'] ?? '-' }}
                </div>

                <div class="flex flex-wrap gap-2">

                    <span class="px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-medium">
                        {{ ucfirst($item['tekstur'] ?? '-') }}
                    </span>

                    <span class="px-3 py-1 rounded-full bg-gray-100 text-gray-600 text-xs font-medium">
                        {{ $item['cara_pengolahan'] ?? '-' }}
                    </span>

                </div>

            </div>

        </td>

        <td class="px-4 py-5 text-center">
            <div class="font-semibold text-gray-700">
                {{ number_format($item['protein'] ?? 0,1) }}g
            </div>
        </td>

        <td class="px-4 py-5 text-center">
            <div class="font-semibold text-gray-700">
                {{ number_format($item['lemak'] ?? 0,1) }}g
            </div>
        </td>

        <td class="px-4 py-5 text-center">
            <div class="font-semibold text-gray-700">
                {{ number_format($item['karbohidrat'] ?? 0,1) }}g
            </div>
        </td>

        <td class="px-4 py-5 text-center">
            <div class="font-semibold text-gray-700">
                {{ number_format($item['serat'] ?? 0,1) }}g
            </div>
        </td>

        <td class="px-4 py-5 text-center">

            <div class="inline-flex px-3 py-1 rounded-lg bg-orange-50 text-orange-700 text-xs font-semibold border border-orange-100">
                {{ number_format($item['kalori'] ?? 0,0) }} kkal
            </div>

        </td>

        <td class="px-5 py-5 text-center">

            <div class="text-lg font-bold text-gray-900">
                {{ number_format($item['skor'] ?? 0,4) }}
            </div>

        </td>

        <td class="px-6 py-5 text-center">

            <button
                onclick="toggleDetail({{ $index }})"
                class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-200 text-sm font-medium text-gray-700 hover:bg-gray-100 transition">

                <span id="icon-{{ $index }}">▼</span>
                Lihat Detail

            </button>

        </td>

    </tr>

    <!-- EXPANDABLE DETAIL -->
    <tr id="detail-row-{{ $index }}" class="hidden bg-gray-50 border-t border-gray-100">

        <td colspan="9" class="px-8 py-6">

            <div class="grid md:grid-cols-2 gap-6">

                <div class="space-y-4">

                    <h4 class="font-bold text-gray-800 text-lg">
                        Informasi Makanan
                    </h4>

                    <div class="space-y-3 text-sm text-gray-700">

                        <div>
                            <span class="font-semibold">Tekstur:</span>
                            {{ ucfirst($item['tekstur'] ?? '-') }}
                        </div>

                        <div>
                            <span class="font-semibold">Porsi Saji Awal:</span>
                            {{ $item['porsi_saji'] ?? '-' }}
                        </div>

                        <div>
                            <span class="font-semibold">Rekomendasi Jumlah Porsi:</span>
                            {{ $jumlah_porsi }} Porsi
                        </div>

                        <div>
                            <span class="font-semibold">Ukuran Porsi:</span>
                            {{ $ukuran_porsi }}
                        </div>

                        <div>
                            <span class="font-semibold">Cara Pengolahan:</span>
                            {{ $item['cara_pengolahan'] ?? '-' }}
                        </div>

                        @if(!empty($item['alternatif_serupa']))

                        <div>
                            <span class="font-semibold">Alternatif:</span>
                            {{ $item['alternatif_serupa'] }}
                        </div>

                        @endif

                    </div>

                </div>

                <div>

                    <h4 class="font-bold text-gray-800 text-lg mb-4">
                        Komposisi Makanan
                    </h4>

                    @if(!empty($item['komposisi_makanan']))

                        <div class="flex flex-wrap gap-2">

                            @foreach(explode(',', $item['komposisi_makanan']) as $komposisi)

                                <span class="px-3 py-2 rounded-full bg-white border border-gray-200 text-sm text-gray-700">
                                    {{ trim($komposisi) }}
                                </span>

                            @endforeach

                        </div>

                    @else

                        <p class="text-sm text-gray-500">
                            Tidak ada data komposisi.
                        </p>

                    @endif

                </div>

            </div>

        </td>

    </tr>

    @endforeach

</tbody>

                </table>

            </div>

        </div>

    </div>

    <!-- FOOTER -->
    <div class="pt-4">

        <a href="{{ route('laporan.index') }}"
            class="inline-flex items-center gap-2 px-6 py-3 text-sm font-semibold text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">

            ← Kembali

        </a>

    </div>

</div>

<script>

    function toggleDetail(index) {

        const row = document.getElementById('detail-row-' + index);
        const icon = document.getElementById('icon-' + index);

        row.classList.toggle('hidden');

        if (row.classList.contains('hidden')) {

            icon.innerHTML = '▼';

        } else {

            icon.innerHTML = '▲';
        }
    }

</script>

@endsection