<?php // components/forms/medical_info.php ?>
<div class="bg-white border border-slate-300/80 rounded-xl shadow-sm overflow-hidden">
    <div class="px-4 py-3 bg-stone-50/50 border-b border-slate-300/80">
        <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight">7. Medical Metrics & Health Profile</h3>
    </div>
    
    <div class="p-4 sm:p-5 space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Blood Group</label>
                <select name="blood_group" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                    <option value="">Select Blood Group</option>
                    <?php foreach (['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'] as $bg): ?>
                        <option value="<?= $bg ?>" <?= ($employee['blood_group'] ?? '') === $bg ? 'selected' : '' ?>><?= $bg ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Genotype</label>
                <select name="genotype" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                    <option value="">Select Genotype</option>
                    <?php foreach (['AA', 'AS', 'SS', 'AC'] as $gt): ?>
                        <option value="<?= $gt ?>" <?= ($employee['genotype'] ?? '') === $gt ? 'selected' : '' ?>><?= $gt ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="sm:col-span-2 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">
                    Known Allergies <span class="text-slate-400 font-semibold lowercase tracking-normal">(food, drugs, environmental)</span>
                </label>
                <input type="text" name="allergies" value="<?= htmlspecialchars($employee['allergies'] ?? '') ?>" placeholder="e.g., Penicillin, Peanuts (Leave blank if none)" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 placeholder-slate-400 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>

            <div class="sm:col-span-2 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Chronic Medical Conditions / Notes</label>
                <textarea name="medical_conditions" rows="2" placeholder="e.g., Asthma, Hypertension, Diabetes (Leave blank if none)" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 placeholder-slate-400 focus:outline-none focus:border-indigo-700 focus:bg-white transition resize-none"><?= htmlspecialchars($employee['medical_conditions'] ?? '') ?></textarea>
            </div>
        </div>
    </div>
</div>