@php
    // Helper function to get test data value
    $getData = function($key, $default = '') use ($testResult) {
        if (!$testResult || !$testResult->test_data) return $default;
        return data_get($testResult->test_data, $key, $default);
    };
@endphp

<x-health-record-test-layout
    title="OGTT Screening"
    subtitle="Oral Glucose Tolerance Test - Gestational Diabetes Screening"
    :record="$record"
    :testResult="$testResult"
    test="ogtt"
>
    <!-- OGTT Criteria Checklist Section -->
    <div class="modern-card mb-6">
        <div class="p-6 border-b border-gray-200" style="background: linear-gradient(135deg, #F5E6ED 0%, #FEFBFC 100%);">
            <div class="flex items-center">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4" style="background: linear-gradient(135deg, #CD7A98 0%, #94426A 100%);">
                    <i class="fas fa-clipboard-check text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Senarai Semak Kriteria Untuk Ujian Saringan OGTT</h3>
                    <p class="text-sm" style="color: #718096;">Risk factors assessment for OGTT screening</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" style="border: 1px solid #E2E8F0;">
                    <thead style="background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);">
                        <tr>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #CD7A98; width: 60px;">Bil</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #CD7A98;">Kriteria / Risiko</th>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #CD7A98; width: 120px;">Tandakan (√)</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">1</td>
                            <td class="px-4 py-3" style="color: #2D3748;">BMI >27 kg/m²</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[bmi_over_27]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.bmi_over_27') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">2</td>
                            <td class="px-4 py-3" style="color: #2D3748;">Sejarah Gestational Diabetes Mellitus (GDM)</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[history_gdm]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.history_gdm') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">3</td>
                            <td class="px-4 py-3" style="color: #2D3748;">Sejarah keluarga terdekat dengan diabetes</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[family_diabetes]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.family_diabetes') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">4</td>
                            <td class="px-4 py-3" style="color: #2D3748;">Sejarah melahirkan bayi macrosomia (berat bayi ≥4 kg)</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[macrosomia_history]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.macrosomia_history') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">5</td>
                            <td class="px-4 py-3" style="color: #2D3748;">
                                <div>
                                    <strong>Bad Obstetric History:</strong><br>
                                    Sejarah kelahiran IUD/ Stillbirth, kecacatan kongenital<br>
                                    <em class="text-gray-600 text-sm">(contoh: neural tube defects, cardiac defects, shoulder dystocia)</em>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[bad_obstetric_history]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.bad_obstetric_history') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">6</td>
                            <td class="px-4 py-3" style="color: #2D3748;">Glycosuria ≥ 2 kali</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[glycosuria]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.glycosuria') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">7</td>
                            <td class="px-4 py-3" style="color: #2D3748;">
                                <div>
                                    Masalah obstetrik sekarang<br>
                                    <em class="text-gray-600 text-sm">(Hypertensive disease in pregnancy, Polyhydramnios, menerima rawatan Corticosteroids)</em>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[current_obstetric_problems]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.current_obstetric_problems') ? 'checked' : '' }}>
                            </td>
                        </tr>
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-4 py-3 text-center font-semibold" style="color: #2D3748;">8</td>
                            <td class="px-4 py-3" style="color: #2D3748;">Umur ≥25 tahun (walaupun tanpa faktor risiko GDM yang lain)</td>
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox" name="criteria[age_over_25]" value="1"
                                       class="w-5 h-5 text-pink-600 rounded focus:ring-2 focus:ring-pink-500"
                                       {{ $getData('criteria.age_over_25') ? 'checked' : '' }}>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- OGTT Results Section -->
    <div class="modern-card">
        <div class="p-6 border-b border-gray-200" style="background: linear-gradient(135deg, #E8F4F8 0%, #FEFBFC 100%);">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4" style="background: linear-gradient(135deg, #4299E1 0%, #2B6CB0 100%);">
                        <i class="fas fa-flask text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Keputusan Ujian OGTT</h3>
                        <p class="text-sm" style="color: #718096;">OGTT test results for this appointment</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-6">
            <!-- Info Box -->
            <div class="mb-6 p-4 rounded-lg" style="background: linear-gradient(135deg, #EBF8FF 0%, #DBEAFE 100%); border-left: 4px solid #4299E1;">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-600 text-lg mr-3 mt-1"></i>
                    <div>
                        <p class="text-sm font-semibold text-blue-900 mb-1">Normal Range Reference:</p>
                        <p class="text-sm text-blue-800">
                            <strong>FBS:</strong> &lt;5.1 mmol/L &nbsp;|&nbsp; <strong>2HPP:</strong> &lt;7.8 mmol/L
                        </p>
                        <p class="text-xs text-blue-700 mt-1"><em>Rujuk CPG Diabetes in Pregnancy 2017</em></p>
                    </div>
                </div>
            </div>

            <!-- Test Date and POG -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar text-gray-500 mr-2"></i>Tarikh
                    </label>
                    <input type="date"
                           name="date"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ $getData('date') }}"
                           required>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-baby text-gray-500 mr-2"></i>POG (Period of Gestation)
                    </label>
                    <input type="text"
                           name="pog"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ $getData('pog') }}"
                           placeholder="e.g., 24 weeks">
                </div>
            </div>

            <!-- Test Results -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-vial text-blue-600 mr-2"></i>Fasting Blood Sugar (FBS)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="fbs"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               value="{{ $getData('fbs') }}"
                               placeholder="e.g., 4.8">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Normal: &lt;5.1 mmol/L</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-vial text-blue-600 mr-2"></i>2H Postprandial (2HPP)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="2hpp"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               value="{{ $getData('2hpp') }}"
                               placeholder="e.g., 7.2">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Normal: &lt;7.8 mmol/L</p>
                </div>
            </div>
        </div>
    </div>
</x-health-record-test-layout>