

<?php $__env->startSection('title', 'BMI Hesaplama'); ?>

<?php $__env->startSection('content'); ?>
<div class="container mx-auto px-4 py-12">
    <div class="max-w-2xl mx-auto">
        <div style="margin-bottom: 24px;">
            <a href="<?php echo e(route('calculators.index')); ?>" style="color: #3b82f6; text-decoration: none; font-weight: 500;">← Hesaplayıcılara Dön</a>
        </div>

        <h1 style="font-size: 32px; font-weight: 700; margin-bottom: 8px; color: #111827;">Vücut Kitle İndeksi (BMI) Hesaplama</h1>
        <p style="font-size: 15px; color: #6b7280; margin-bottom: 32px;">Kilonuz ve boyunuza göre BMI değerinizi hesaplayın</p>

        <div style="background: white; border-radius: 12px; padding: 28px; border: 1px solid #e5e7eb;">
            <form id="bmiForm" style="display: flex; flex-direction: column; gap: 20px;">
                <div>
                    <label style="display: block; font-weight: 600; font-size: 14px; color: #374151; margin-bottom: 6px;">Kilo (kg) *</label>
                    <input type="number" id="weight" placeholder="60" min="20" max="300" step="0.1" required
                        style="width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>

                <div>
                    <label style="display: block; font-weight: 600; font-size: 14px; color: #374151; margin-bottom: 6px;">Boy (cm) *</label>
                    <input type="number" id="height" placeholder="170" min="100" max="250" step="0.1" required
                        style="width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;">
                </div>

                <button type="submit" style="background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 12px;">
                    Hesapla
                </button>
            </form>

            <div id="result" style="margin-top: 28px; padding: 20px; background: #f0f9ff; border-radius: 8px; display: none;">
                <h3 style="font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 12px;">Sonucunuz</h3>
                <p style="font-size: 24px; font-weight: 700; color: #3b82f6; margin: 0;">BMI: <span id="bmiValue">0</span></p>
                <p style="font-size: 16px; color: #374151; margin: 8px 0 0 0;">Kategori: <span id="categoryValue" style="font-weight: 600;"></span></p>
            </div>
        </div>

        <div style="margin-top: 32px; padding: 24px; background: #fef3c7; border-radius: 12px;">
            <h3 style="font-size: 16px; font-weight: 600; color: #92400e; margin-bottom: 12px;">BMI Kategorileri</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="padding: 8px 0; font-size: 14px; color: #78350f;"><strong>Zayıf:</strong> BMI < 18.5</li>
                <li style="padding: 8px 0; font-size: 14px; color: #78350f;"><strong>Normal:</strong> 18.5 - 24.9</li>
                <li style="padding: 8px 0; font-size: 14px; color: #78350f;"><strong>Fazla Kilolu:</strong> 25 - 29.9</li>
                <li style="padding: 8px 0; font-size: 14px; color: #78350f;"><strong>Obez:</strong> 30+</li>
            </ul>
        </div>
    </div>
</div>

<script>
document.getElementById('bmiForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value) / 100;
    const bmi = weight / (height * height);
    
    let category = 'Normal';
    if (bmi < 18.5) category = 'Zayıf';
    else if (bmi < 25) category = 'Normal';
    else if (bmi < 30) category = 'Fazla Kilolu';
    else category = 'Obez';
    
    document.getElementById('bmiValue').textContent = bmi.toFixed(2);
    document.getElementById('categoryValue').textContent = category;
    document.getElementById('result').style.display = 'block';
    
    // Save if logged in
    if (<?php echo e(auth()->check() ? 'true' : 'false'); ?>) {
        fetch('<?php echo e(route("calculators.calculate_bmi")); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
            },
            body: JSON.stringify({ weight, height: document.getElementById('height').value })
        });
    }
});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.public', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\askeribilgiler\resources\views\calculators\bmi.blade.php ENDPATH**/ ?>