@extends('layouts.user')

@section('title', 'Rekomendasi Mandiri')

@section('content')

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

    {{-- INFO --}}
    <div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-6">

        <h3 class="text-lg font-semibold text-green-700 mb-2">
            Rekomendasi Makanan Gastritis
        </h3>

        <p class="text-sm text-gray-600">
            Lengkapi data diri dan kondisi yang sedang dialami.
            Sistem akan menghitung kebutuhan kalori serta memberikan
            rekomendasi makanan menggunakan metode SAW.
        </p>

    </div>

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

        <h2 class="text-2xl font-semibold text-gray-800 mb-8">
            Form Rekomendasi Mandiri
        </h2>

        <form action="{{ route('user.proses_saw.proses') }}" method="POST" class="space-y-6">
            @csrf

            {{-- NAMA --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Nama <span class="text-red-500">*</span>
                </label>

                <input type="text"
                    name="nama"
                    value="{{ old('nama') }}"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none">

                <p class="text-sm text-gray-500 mt-2">
                    Masukkan nama lengkap.
                </p>
            </div>

            {{-- UMUR --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Umur <span class="text-red-500">*</span>
                </label>

                <input type="number"
                    name="umur"
                    min="1"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none no-spinner">

                <p class="text-sm text-gray-500 mt-2">
                    Isi umur dalam angka (tahun).
                </p>

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

            {{-- 🔥 BERAT BADAN --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Berat Badan (kg) <span class="text-red-500">*</span>
                </label>

                <input type="number"
                    name="berat_badan"
                    min="1"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none no-spinner">

                <p class="text-sm text-gray-500 mt-2">
                    Dalam satuan kilogram (kg)
                </p>

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

            {{-- 🔥 TINGGI BADAN --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Tinggi Badan (cm) <span class="text-red-500">*</span>
                </label>

                <input type="number"
                    name="tinggi_badan"
                    min="1"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none no-spinner">

                <p class="text-sm text-gray-500 mt-2">
                    Dalam satuan centimeter (cm)
                </p>

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

            {{-- JENIS KELAMIN --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Jenis Kelamin <span class="text-red-500">*</span>
                </label>

                <select name="jenis_kelamin"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none">

                    <option value="">-- Pilih --</option>
                    <option value="Laki-laki">Laki-laki</option>
                    <option value="Perempuan">Perempuan</option>

                </select>
            </div>

            {{-- GEJALA --}}
            <div>

                <label class="block text-base font-medium text-gray-700 mb-2">
                    Gejala Gastritis <span class="text-red-500">*</span>
                </label>

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

                    <label class="flex items-center gap-3">
                        <input type="checkbox" name="gejala[]" value="nyeri lambung">
                        Nyeri Lambung
                    </label>

                    <label class="flex items-center gap-3">
                        <input type="checkbox" name="gejala[]" value="mual">
                        Mual
                    </label>

                </div>

                <p class="text-sm text-gray-500 mt-2">
                    Pilih satu atau lebih gejala yang dialami.
                </p>

            </div>

            {{-- AKTIVITAS --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Aktivitas Harian <span class="text-red-500">*</span>
                </label>

                <select name="aktivitas_harian"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none">

                    <option value="">-- Pilih --</option>
                    <option value="Ringan">Ringan</option>
                    <option value="Sedang">Sedang</option>
                    <option value="Berat">Berat</option>

                </select>

                <p class="text-sm text-gray-500 mt-2">
                    Digunakan untuk menghitung kebutuhan kalori harian.
                </p>
            </div>

            {{-- BUTTON --}}
            <div class="flex justify-end gap-4 pt-6">

                <a href="{{ route('user.dashboard') }}"
                    class="px-5 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">
                    Kembali
                </a>

                <button type="submit"
                    class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700">
                    Proses Rekomendasi
                </button>

            </div>

        </form>

    </div>

</div>

@endsection