@extends('layouts.app')

@section('title', 'Detail Makanan')

@section('content')

<div class="max-w-5xl mx-auto px-4 py-8">

    <!-- HEADER -->
    <div class="mb-8">

        <h1 class="text-4xl font-bold tracking-tight text-gray-800">
            Detail Makanan
        </h1>

        <p class="text-gray-500 mt-2">
            Informasi lengkap kandungan dan data makanan
        </p>

    </div>

    <!-- CARD -->
    <div class="bg-white border border-gray-200 rounded-[2rem] shadow-sm overflow-hidden">

        <!-- TOP -->
        <div class="px-8 py-7 border-b border-gray-100 bg-gray-50">

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

                <div>

                    <h2 class="text-3xl font-semibold text-gray-800">
                        {{ $makanan->nama_makanan }}
                    </h2>

                    <p class="text-sm text-gray-500 mt-2">
                        Detail kandungan nutrisi dan informasi makanan
                    </p>

                </div>

                <div>

                    <span class="inline-flex items-center px-4 py-2 rounded-full bg-gray-200 text-gray-700 text-sm font-medium">
                        {{ ucfirst($makanan->tekstur ?? '-') }}
                    </span>

                </div>

            </div>

        </div>

        <!-- CONTENT -->
        <div class="p-8">

            <!-- INFO GRID -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

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

                    <label class="text-sm font-medium text-gray-500">
                        Protein
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->protein }} gram
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Lemak
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->kandungan_lemak }} gram
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Karbohidrat
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->karbohidrat }} gram
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Serat
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->kandungan_serat }} gram
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Kalori
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->kalori }} kkal
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Porsi Saji
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-lg font-semibold text-gray-800">
                            {{ $makanan->porsi_saji ?? '-' }}
                        </p>
                    </div>

                </div>

            </div>

            <!-- INFORMASI TAMBAHAN -->
            <div class="mt-8 space-y-6">

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

                    <label class="text-sm font-medium text-gray-500">
                        Cara Pengolahan
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-gray-800 leading-relaxed">
                            {{ $makanan->cara_pengolahan ?? '-' }}
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Alternatif Serupa
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-4">
                        <p class="text-gray-800 leading-relaxed">
                            {{ $makanan->alternatif_serupa ?? '-' }}
                        </p>
                    </div>

                </div>

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

                    <label class="text-sm font-medium text-gray-500">
                        Komposisi Makanan
                    </label>

                    <div class="bg-gray-50 border border-gray-200 rounded-2xl px-5 py-5 min-h-[140px]">
                        <p class="text-gray-800 leading-8 whitespace-pre-line">
                            {{ $makanan->komposisi_makanan ?? '-' }}
                        </p>
                    </div>

                </div>

            </div>

            <!-- BUTTON -->
            <div class="mt-10 pt-6 border-t border-gray-100">

                <a href="{{ route('makanan.index') }}"
                    class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl border border-gray-300 text-gray-700 font-medium hover:bg-gray-100 transition">

                    ← Kembali

                </a>

            </div>

        </div>

    </div>

</div>

@endsection