@extends('layouts.user')

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

@section('content')

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

    <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">
            Rekomendasi Makanan Gastritis
        </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>

                @error('nama')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </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"
                        {{ old('jenis_kelamin') == 'Laki-laki' ? 'selected' : '' }}>
                        Laki-laki
                    </option>

                    <option value="Perempuan"
                        {{ old('jenis_kelamin') == 'Perempuan' ? 'selected' : '' }}>
                        Perempuan
                    </option>

                </select>

                <p class="text-sm text-gray-500 mt-2">
                    Pilih jenis kelamin.
                </p>

                @error('jenis_kelamin')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </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-2">

                    <label class="flex items-center gap-2">
                        <input type="checkbox"
                            name="gejala[]"
                            value="nyeri lambung"
                            {{ in_array('nyeri lambung', old('gejala', [])) ? 'checked' : '' }}>

                        Nyeri Lambung
                    </label>

                    <label class="flex items-center gap-2">
                        <input type="checkbox"
                            name="gejala[]"
                            value="mual"
                            {{ in_array('mual', old('gejala', [])) ? 'checked' : '' }}>

                        Mual
                    </label>

                </div>

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

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

            {{-- AKTIVITAS --}}
            <div>
                <label class="block text-base font-medium text-gray-700 mb-2">
                    Aktivitas Fisik 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"
                        {{ old('aktivitas_harian') == 'Ringan' ? 'selected' : '' }}>
                        Ringan
                    </option>

                    <option value="Sedang"
                        {{ old('aktivitas_harian') == 'Sedang' ? 'selected' : '' }}>
                        Sedang
                    </option>

                    <option value="Berat"
                        {{ old('aktivitas_harian') == 'Berat' ? 'selected' : '' }}>
                        Berat
                    </option>

                </select>

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

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

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

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

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

            </div>

        </form>

    </div>

</div>

@endsection