gastrosaw/resources/views/makanan/create.blade.php

245 lines
10 KiB
PHP

@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