@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);
    };
    
    // Helper function to format date
    $formatDate = function($date) {
        if (!$date) return '-';
        try {
            return \Carbon\Carbon::parse($date)->format('d/m/Y');
        } catch (\Exception $e) {
            return '-';
        }
    };
@endphp

<!-- Header -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
    <div class="p-6 border-b border-gray-200" style="background: linear-gradient(135deg, #FEE2E2 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, #EF4444 0%, #DC2626 100%);">
                    <i class="fas fa-vial text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Antenatal Blood Screening</h2>
                    <p class="text-sm" style="color: #718096;">Ujian Darah Saringan Antenatal</p>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Blood Test Results -->
    <div class="modern-card">
        <div class="p-6 border-b border-gray-200" style="background: linear-gradient(135deg, #FEE2E2 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, #EF4444 0%, #DC2626 100%);">
                    <i class="fas fa-vial text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Keputusan Ujian Darah Saringan Antenatal</h3>
                    <p class="text-sm" style="color: #718096;">Your antenatal blood screening test results</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-3 py-3 text-center text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #EF4444; width: 50px;">Bil.</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #EF4444;">Jenis Ujian</th>
                            <th colspan="2" class="px-4 py-3 text-center text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #EF4444; background: linear-gradient(135deg, #FEF3C7 0%, #FEF9E7 100%);">Test I</th>
                            <th colspan="2" class="px-4 py-3 text-center text-xs font-bold uppercase" style="color: #4A5568; border-bottom: 2px solid #EF4444; background: linear-gradient(135deg, #DBEAFE 0%, #EFF6FF 100%);">Test II</th>
                        </tr>
                        <tr>
                            <th></th>
                            <th></th>
                            <th class="px-3 py-2 text-center text-xs font-semibold" style="color: #92400E; background: #FEF9E7;">Tarikh</th>
                            <th class="px-3 py-2 text-center text-xs font-semibold" style="color: #92400E; background: #FEF9E7;">Keputusan</th>
                            <th class="px-3 py-2 text-center text-xs font-semibold" style="color: #1E3A8A; background: #EFF6FF;">Tarikh</th>
                            <th class="px-3 py-2 text-center text-xs font-semibold" style="color: #1E3A8A; background: #EFF6FF;">Keputusan</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @php
                            $tests = [
                                ['key' => 'rhesus_blood_group', 'name' => 'Kumpulan darah Rhesus', 'icon' => 'tint'],
                                ['key' => 'vdrl_tpha', 'name' => 'VDRL +/- TPHA', 'icon' => 'microscope'],
                                ['key' => 'syphilis_rapid_ibu', 'name' => 'Syphilis / Rapid Test (Ibu)', 'icon' => 'virus'],
                                ['key' => 'syphilis_rapid_pasangan', 'name' => 'Syphilis / Rapid Test (Pasangan)', 'icon' => 'user-friends'],
                                ['key' => 'hiv_rapid_ibu', 'name' => 'HIV / Rapid Test (Ibu)', 'icon' => 'shield-virus'],
                                ['key' => 'hiv_rapid_pasangan', 'name' => 'HIV / Rapid Test (Pasangan)', 'icon' => 'user-friends'],
                                ['key' => 'hepatitis_b', 'name' => 'Hepatitis B', 'icon' => 'disease'],
                                ['key' => 'malaria_bfmp', 'name' => 'Malaria (BFMP)', 'icon' => 'bug'],
                            ];
                        @endphp

                        @foreach($tests as $index => $test)
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">{{ $index + 1 }}</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-{{ $test['icon'] }} text-red-500 mr-2"></i>{{ $test['name'] }}
                            </td>
                            <td class="px-3 py-3 text-center text-gray-700" style="background: #FFFBEB;">
                                {{ $formatDate($getData($test['key'] . '.taken_at_1')) }}
                            </td>
                            <td class="px-3 py-3 text-center font-medium" style="background: #FFFBEB; color: #2D3748;">
                                {{ $getData($test['key'] . '.result_1') ?: '-' }}
                            </td>
                            <td class="px-3 py-3 text-center text-gray-700" style="background: #EFF6FF;">
                                {{ $formatDate($getData($test['key'] . '.taken_at_2')) }}
                            </td>
                            <td class="px-3 py-3 text-center font-medium" style="background: #EFF6FF; color: #2D3748;">
                                {{ $getData($test['key'] . '.result_2') ?: '-' }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<!-- Action Buttons -->
<div class="bg-white rounded-lg shadow-md p-6 mt-6">
    <div class="flex justify-center">
        <a href="{{ route('mother.health-records.show', $record->id) }}"
           class="px-6 py-3 bg-gray-500 text-white rounded-lg font-semibold hover:bg-gray-600 transition">
            <i class="fas fa-arrow-left mr-2"></i>Back to Health Record
        </a>
    </div>
</div>