<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Analisis Pola Makan - Mahasiswa PCR</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
        body { font-family: 'Plus Jakarta Sans', sans-serif; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 22px;
            width: 22px;
            border-radius: 50%;
            background: #2563eb;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 leading-normal tracking-normal antialiased">

    <nav class="bg-white/80 backdrop-blur-md shadow-sm border-b border-slate-200 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center gap-2">
                    <div class="bg-blue-600 p-2 rounded-lg text-white">
                        <i class="fas fa-utensils text-sm md:text-base"></i>
                    </div>
                    <span class="text-lg md:text-xl font-extrabold tracking-tight text-slate-800">PCR<span class="text-blue-600">Health</span></span>
                </div>
                
                <div class="flex items-center space-x-3 md:space-x-4">
                    <a href="/" class="text-xs md:text-sm font-bold text-blue-600 transition">Form</a>
                    
                       
                        <a href="<?php echo e(route('login')); ?>" class="px-3 py-1.5 md:px-4 md:py-2 bg-slate-100 text-slate-700 border border-slate-200 rounded-xl text-xs font-bold hover:bg-slate-200 transition">
                            Admin Login
                        </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12">
            
            <div class="lg:col-span-5 space-y-6 md:space-y-8 text-center lg:text-left">
                <div>
                    <h2 class="text-2xl md:text-4xl font-extrabold text-slate-800 leading-tight mb-3 md:mb-4 tracking-tight">
                        Bagaimana Keteraturan <span class="text-blue-600">Pola Makan</span> Anda?
                    </h2>
                    <p class="text-sm md:text-base text-slate-500">
                        Aplikasi berbasis AI ini mengidentifikasi tingkat kesehatan pola makan mahasiswa PCR secara instan tanpa perlu mendaftar akun.
                    </p>
                </div>

                <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-xl shadow-slate-100/50 space-y-4">
                    <div class="flex justify-between items-center border-b border-slate-100 pb-3">
                        <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
                            <i class="fas fa-chart-pie text-blue-500"></i> Live Data Responden
                        </h4>
                        <span class="bg-blue-50 text-blue-600 text-[10px] font-bold px-2 py-0.5 rounded-full">Total: <?php echo e($total); ?></span>
                    </div>

                    <div class="grid grid-cols-3 gap-2.5">
                        <div class="bg-green-50/60 border border-green-100 p-3 rounded-2xl text-center">
                            <p class="text-[10px] font-bold text-green-600 uppercase tracking-tight">Teratur</p>
                            <h3 class="text-xl md:text-2xl font-black text-green-700 mt-1"><?php echo e($teratur); ?></h3>
                        </div>
                        <div class="bg-yellow-50/60 border border-yellow-100 p-3 rounded-2xl text-center">
                            <p class="text-[10px] font-bold text-yellow-600 uppercase tracking-tight">Terlewat</p>
                            <h3 class="text-xl md:text-2xl font-black text-yellow-700 mt-1"><?php echo e($terlewat); ?></h3>
                        </div>
                        <div class="bg-red-50/60 border border-red-100 p-3 rounded-2xl text-center">
                            <p class="text-[10px] font-bold text-red-600 uppercase tracking-tight">Berantakan</p>
                            <h3 class="text-xl md:text-2xl font-black text-red-700 mt-1"><?php echo e($berantakan); ?></h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:col-span-7">
                <div class="bg-white rounded-2xl md:rounded-3xl shadow-xl shadow-slate-200 border border-slate-100 overflow-hidden">
                    
                    <div class="bg-blue-600 p-4 md:p-6 text-white text-center">
                        <p class="text-[10px] md:text-sm uppercase tracking-widest font-bold opacity-80">Riset Gaya Hidup Sehat</p>
                        <h3 class="text-lg md:text-xl font-bold">Isi Kuesioner Singkat</h3>
                    </div>

                    <div class="p-5 md:p-8">
                        <?php if(session('success')): ?>
                        <div class="mb-6 md:mb-8 overflow-hidden rounded-2xl border-l-4 shadow-md animate-fade-in
                            <?php echo e(session('success') == 'Teratur' ? 'bg-green-50 border-green-500' : 
                               (session('success') == 'Berantakan' ? 'bg-red-50 border-red-500' : 'bg-yellow-50 border-yellow-500')); ?>">
                            
                            <div class="p-4 md:p-6">
                                <div class="flex items-center gap-3 mb-2">
                                    <div class="p-1.5 rounded-lg 
                                        <?php echo e(session('success') == 'Teratur' ? 'bg-green-100 text-green-600' : 
                                           (session('success') == 'Berantakan' ? 'bg-red-100 text-red-600' : 'bg-yellow-100 text-yellow-600')); ?>">
                                        <i class="fas <?php echo e(session('success') == 'Teratur' ? 'fa-check-circle' : 'fa-exclamation-circle'); ?> text-base"></i>
                                    </div>
                                    <p class="text-[10px] uppercase font-black tracking-widest opacity-60">Status Hasil Analisis:</p>
                                </div>
                                <h2 class="text-2xl md:text-3xl font-black mb-3 
                                    <?php echo e(session('success') == 'Teratur' ? 'text-green-800' : 
                                       (session('success') == 'Berantakan' ? 'text-red-800' : 'text-yellow-800')); ?>">
                                    Pola Makan <?php echo e(session('success')); ?>

                               </h2>
                                <div class="bg-white/80 rounded-xl p-3.5 border border-white shadow-inner">
                                    <h4 class="text-[10px] font-bold flex items-center gap-1.5 mb-1 text-slate-800 uppercase tracking-wider">
                                        <i class="fas fa-magic text-blue-600"></i> Rekomendasi Solusi AI:
                                    </h4>
                                    <p class="text-xs md:text-sm text-slate-700 leading-relaxed italic font-semibold">
                                        "<?php echo e(session('saran')); ?>"
                                    </p>
                                </div>
                            </div>
                        </div>
                        <?php endif; ?>

                        <form action="/predict" method="POST" class="space-y-5 md:space-y-6">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="user_id" value="<?php echo e(Auth::id()); ?>">
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">Nama Lengkap</label>
                                    <input type="text" name="nama" required placeholder="Budi Santoso"
                                           class="w-full px-4 py-2.5 md:py-3 rounded-xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition outline-none text-sm font-semibold">
                                </div>
                                <div>
                                    <label class="block text-[11px] font-bold text-slate-500 mb-1.5 uppercase tracking-wide">NIM</label>
                                    <input type="text" name="nim" required placeholder="23010xxx"
                                           class="w-full px-4 py-2.5 md:py-3 rounded-xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition outline-none text-sm font-semibold">
                                </div>
                            </div>

                            <hr class="border-slate-100">

                            <div>
                                <div class="flex justify-between items-center mb-2.5">
                                    <label class="text-[11px] font-bold text-slate-500 uppercase tracking-wide">Seberapa rutin jam makan harian Anda? (1-5)</label>
                                    <span id="rutinValue" class="bg-blue-600 text-white px-2 py-0.5 rounded text-[10px] font-bold shadow-md shadow-blue-100">3</span>
                                </div>
                                <input type="range" name="skor_rutinitas" min="1" max="5" value="3" 
                                       oninput="document.getElementById('rutinValue').innerText = this.value"
                                       class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
                                <div class="flex justify-between text-[9px] text-slate-400 mt-1.5 font-bold uppercase">
                                    <span>Berantakan</span>
                                    <span>Sangat Tepat Waktu</span>
                                </div>
                            </div>

                            <div class="text-left">
                                <label class="block text-[11px] font-bold text-slate-500 mb-2 uppercase tracking-wide">Berapa kali melewatkan makan dalam seminggu?</label>
                                <select name="frekuensi_skip" class="w-full px-4 py-2.5 md:py-3 rounded-xl bg-slate-50 border border-slate-100 focus:bg-white focus:border-blue-500 focus:ring-4 focus:ring-blue-100 outline-none transition text-xs md:text-sm font-bold text-slate-700">
                                    <option value="0">Tidak Pernah Melewatkan</option>
                                    <option value="1.5">1 - 2 Kali (Kadang-kadang)</option>
                                    <option value="4">3 - 5 Kali (Sering Terlewat)</option>
                                    <option value="6">Lebih dari 5 Kali (Sangat Sering)</option>
                                </select>
                            </div>

                            <div class="text-left">
                                <label class="block text-[11px] font-bold text-slate-500 mb-2.5 uppercase tracking-wide">Apakah kebiasaan begadang menggeser waktu makan Anda?</label>
                                <div class="grid grid-cols-3 gap-2">
                                    <label class="cursor-pointer group">
                                        <input type="radio" name="dampak_begadang" value="0" class="peer hidden" required>
                                        <div class="text-center py-2.5 md:py-3 rounded-xl border border-slate-200 font-bold text-xs md:text-sm text-slate-600 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 group-hover:bg-slate-50 transition">Tidak</div>
                                    </label>
                                    <label class="cursor-pointer group">
                                        <input type="radio" name="dampak_begadang" value="1" class="peer hidden">
                                        <div class="text-center py-2.5 md:py-3 rounded-xl border border-slate-200 font-bold text-xs md:text-sm text-slate-600 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 group-hover:bg-slate-50 transition">Terkadang</div>
                                    </label>
                                    <label class="cursor-pointer group">
                                        <input type="radio" name="dampak_begadang" value="2" class="peer hidden">
                                        <div class="text-center py-2.5 md:py-3 rounded-xl border border-slate-200 font-bold text-xs md:text-sm text-slate-600 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 group-hover:bg-slate-50 transition">Ya, Sangat</div>
                                    </label>
                                </div>
                            </div>

                            <button type="submit" class="w-full py-3.5 md:py-4 bg-blue-600 hover:bg-blue-700 text-white font-extrabold rounded-xl md:rounded-2xl shadow-xl shadow-blue-200 transform active:scale-[0.99] transition-all flex items-center justify-center gap-2 text-sm md:text-base">
                                <i class="fas fa-magic text-xs"></i> Hitung Tingkat Keteraturan
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </main>

    <footer class="bg-white border-t border-slate-200 py-6 mt-10 md:mt-20">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-slate-400 text-[10px] md:text-xs font-semibold uppercase tracking-wider">© 2026 Riset Pola Makan Mahasiswa PCR — Powered by AI Decision Tree</p>
        </div>
    </footer>

</body>
</html><?php /**PATH D:\TommySanjaya\Kampus\BPF\laragon\www\ai-apps\resources\views/welcome.blade.php ENDPATH**/ ?>