@extends('layouts.app')

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

@section('content')

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

    <div class="mb-8">
        <h1 class="text-3xl font-semibold text-gray-800">
            Edit Makanan
        </h1>
        <p class="text-base text-gray-500 mt-2">
            Perbarui data makanan yang digunakan dalam sistem rekomendasi
        </p>
    </div>

    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-8">

        <form action="{{ route('makanan.update', $makanan->id) }}" method="POST">
            @csrf
            @method('PUT')

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

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Nama Makanan <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="nama_makanan"
                        value="{{ old('nama_makanan', $makanan->nama_makanan) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Nama makanan yang direkomendasikan
                    </p>

                    @error('nama_makanan')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Protein (gram) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" name="protein"
                        value="{{ old('protein', $makanan->protein) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Penting untuk perbaikan jaringan tubuh
                    </p>

                    @error('protein')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Lemak (gram) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" name="kandungan_lemak"
                        value="{{ old('kandungan_lemak', $makanan->kandungan_lemak) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Kandungan lemak per porsi
                    </p>

                    @error('kandungan_lemak')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Karbohidrat (gram) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" name="karbohidrat"
                        value="{{ old('karbohidrat', $makanan->karbohidrat) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Sumber energi utama tubuh
                    </p>

                    @error('karbohidrat')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Serat (gram) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" step="0.01" name="kandungan_serat"
                        value="{{ old('kandungan_serat', $makanan->kandungan_serat) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Baik untuk pencernaan
                    </p>

                    @error('kandungan_serat')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Kalori (kkal) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" name="kalori"
                        value="{{ old('kalori', $makanan->kalori) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Energi yang dihasilkan makanan
                    </p>

                    @error('kalori')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Satuan & Porsi Saji <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="porsi_saji"
                        value="{{ old('porsi_saji', $makanan->porsi_saji) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Ukuran porsi standar (Ukuran Rumah Tangga)
                    </p>

                    @error('porsi_saji')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Cara Pengolahan <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="cara_pengolahan"
                        value="{{ old('cara_pengolahan', $makanan->cara_pengolahan) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Contoh: Rebus, Kukus, Panggang
                    </p>

                    @error('cara_pengolahan')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- ✅ FIX TEKSTUR --}}
                <div class="md:col-span-2">
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Tekstur Makanan <span class="text-red-500">*</span>
                    </label>

                    <select name="tekstur"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                        <option value="">-- Pilih Tekstur --</option>

                        <option value="lunak"
                            {{ old('tekstur', $makanan->tekstur) == 'lunak' ? 'selected' : '' }}>
                            Lunak
                        </option>

                        <option value="sedang"
                            {{ old('tekstur', $makanan->tekstur) == 'sedang' ? 'selected' : '' }}>
                            Sedang
                        </option>

                        <option value="keras"
                            {{ old('tekstur', $makanan->tekstur) == 'keras' ? 'selected' : '' }}>
                            Keras
                        </option>

                    </select>

                    <p class="text-sm text-gray-400 mt-2">
                        Tekstur makanan mempengaruhi kenyamanan pencernaan pasien
                    </p>

                    @error('tekstur')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Alternatif Serupa
                    </label>
                    <input type="text" name="alternatif_serupa"
                        value="{{ old('alternatif_serupa', $makanan->alternatif_serupa) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500">

                    <p class="text-sm text-gray-400 mt-2">
                        Opsional (jika ada makanan pengganti)
                    </p>

                    @error('alternatif_serupa')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="md:col-span-2">
                    <label class="block text-base font-medium text-gray-700 mb-2">
                        Komposisi Makanan
                    </label>

                    <textarea 
                        name="komposisi_makanan"
                        rows="4"
                        placeholder="Contoh: Bubur, ayam suwir, kuah kaldu"
                        class="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:ring-2 focus:ring-green-500 focus:border-green-500">{{ old('komposisi_makanan', $makanan->komposisi_makanan) }}</textarea>

                    <p class="text-sm text-gray-400 mt-2">
                        Isi atau bahan utama yang terdapat dalam makanan
                    </p>

                    @error('komposisi_makanan')
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-8 flex gap-4">
                <button type="submit"
                    class="px-6 py-3 bg-green-600 text-white text-base font-medium rounded-lg hover:bg-green-700 transition">
                    Update
                </button>

                <a href="{{ route('makanan.index') }}"
                    class="px-6 py-3 text-base border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 transition">
                    Kembali
                </a>
            </div>

        </form>

    </div>

</div>

@endsection