@extends('layouts.app')

@section('title', 'Tambah 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">
            Tambah Makanan
        </h1>
        <p class="text-base text-gray-500 mt-2">
            Masukkan data makanan untuk digunakan dalam proses rekomendasi
        </p>
    </div>

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

        <form action="{{ route('makanan.store') }}" method="POST">
            @csrf

            <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') }}"
                        placeholder="Contoh: Sup Ayam"
                        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">

                    <p class="text-sm text-gray-400 mt-2">
                        Nama makanan yang akan 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') }}"
                        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 pemulihan 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') }}"
                        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') }}"
                        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') }}"
                        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">
                        Membantu 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') }}"
                        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
                    </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') }}"
                        placeholder="Contoh: 1 Mangkuk Sedang atau 2 Potong Sedang "
                        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 yang digunakan sebagai dasar perhitungan gizi
                    </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') }}"
                        placeholder="Contoh: Rebus, Kukus"
                        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">
                        Metode memasak yang disarankan
                    </p>

                    @error('cara_pengolahan')
                        <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">
                        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">Lunak</option>
                        <option value="sedang">Sedang</option>
                        <option value="keras">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') }}"
                        placeholder="Opsional"
                        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">
                        Bisa dikosongkan jika tidak ada
                    </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') }}</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">
                    Simpan
                </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