@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="Antenatal Blood Screening"
    subtitle="Keputusan Ujian Darah Saringan Antenatal"
    :record="$record"
    :testResult="$testResult"
    test="antenatal_blood"
>
    <!-- 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;">Record all 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">
                        <!-- Row 1: Kumpulan darah Rhesus -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">1</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-tint text-red-500 mr-2"></i>Kumpulan darah Rhesus
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="rhesus_blood_group[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('rhesus_blood_group.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="text"
                                       name="rhesus_blood_group[result_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('rhesus_blood_group.result_1') }}"
                                       placeholder="e.g., A+, O-">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="rhesus_blood_group[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('rhesus_blood_group.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="text"
                                       name="rhesus_blood_group[result_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('rhesus_blood_group.result_2') }}"
                                       placeholder="e.g., A+, O-">
                            </td>
                        </tr>

                        <!-- Row 2: VDRL +/- TPHA -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">2</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-microscope text-red-500 mr-2"></i>VDRL +/- TPHA
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="vdrl_tpha[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('vdrl_tpha.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="text"
                                       name="vdrl_tpha[result_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('vdrl_tpha.result_1') }}"
                                       placeholder="Result">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="vdrl_tpha[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('vdrl_tpha.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="text"
                                       name="vdrl_tpha[result_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('vdrl_tpha.result_2') }}"
                                       placeholder="Result">
                            </td>
                        </tr>

                        <!-- Row 3: Syphilis / Rapid Test (Ibu) -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">3</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-virus text-red-500 mr-2"></i>Syphilis / Rapid Test (Ibu)
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="syphilis_rapid_ibu[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('syphilis_rapid_ibu.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <div class="flex justify-center gap-3">
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_ibu.result_1') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                        <input type="radio" name="syphilis_rapid_ibu[result_1]" value="NR" class="w-4 h-4 text-green-600 mr-2"
                                               {{ $getData('syphilis_rapid_ibu.result_1') === 'NR' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">NR</span>
                                    </label>
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_ibu.result_1') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                        <input type="radio" name="syphilis_rapid_ibu[result_1]" value="R" class="w-4 h-4 text-red-600 mr-2"
                                               {{ $getData('syphilis_rapid_ibu.result_1') === 'R' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">R</span>
                                    </label>
                                </div>
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="syphilis_rapid_ibu[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('syphilis_rapid_ibu.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <div class="flex justify-center gap-3">
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_ibu.result_2') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                        <input type="radio" name="syphilis_rapid_ibu[result_2]" value="NR" class="w-4 h-4 text-green-600 mr-2"
                                               {{ $getData('syphilis_rapid_ibu.result_2') === 'NR' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">NR</span>
                                    </label>
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_ibu.result_2') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                        <input type="radio" name="syphilis_rapid_ibu[result_2]" value="R" class="w-4 h-4 text-red-600 mr-2"
                                               {{ $getData('syphilis_rapid_ibu.result_2') === 'R' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">R</span>
                                    </label>
                                </div>
                            </td>
                        </tr>

                        <!-- Row 4: Syphilis / Rapid Test (Pasangan) -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">4</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-user-friends text-red-500 mr-2"></i>Syphilis / Rapid Test (Pasangan)
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="syphilis_rapid_pasangan[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('syphilis_rapid_pasangan.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <div class="flex justify-center gap-3">
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_pasangan.result_1') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                        <input type="radio" name="syphilis_rapid_pasangan[result_1]" value="NR" class="w-4 h-4 text-green-600 mr-2"
                                               {{ $getData('syphilis_rapid_pasangan.result_1') === 'NR' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">NR</span>
                                    </label>
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_pasangan.result_1') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                        <input type="radio" name="syphilis_rapid_pasangan[result_1]" value="R" class="w-4 h-4 text-red-600 mr-2"
                                               {{ $getData('syphilis_rapid_pasangan.result_1') === 'R' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">R</span>
                                    </label>
                                </div>
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="syphilis_rapid_pasangan[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('syphilis_rapid_pasangan.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <div class="flex justify-center gap-3">
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_pasangan.result_2') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                        <input type="radio" name="syphilis_rapid_pasangan[result_2]" value="NR" class="w-4 h-4 text-green-600 mr-2"
                                               {{ $getData('syphilis_rapid_pasangan.result_2') === 'NR' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">NR</span>
                                    </label>
                                    <label class="flex items-center px-3 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('syphilis_rapid_pasangan.result_2') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                        <input type="radio" name="syphilis_rapid_pasangan[result_2]" value="R" class="w-4 h-4 text-red-600 mr-2"
                                               {{ $getData('syphilis_rapid_pasangan.result_2') === 'R' ? 'checked' : '' }}>
                                        <span class="text-sm font-medium">R</span>
                                    </label>
                                </div>
                            </td>
                        </tr>

                        <!-- Row 5: HIV / Rapid Test (Ibu) -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-4 text-center font-semibold" style="color: #2D3748;">5</td>
                            <td class="px-4 py-4 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-shield-virus text-red-500 mr-2"></i>HIV / Rapid Test (Ibu)
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="hiv_rapid_ibu[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('hiv_rapid_ibu.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #FFFBEB;">
                                <div class="space-y-3">
                                    <!-- Rapid Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Rapid Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.result_1') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[result_1]" value="NR" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.result_1') === 'NR' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">NR</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.result_1') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[result_1]" value="R" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.result_1') === 'R' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">R</span>
                                            </label>
                                        </div>
                                    </div>
                                    <!-- Elisa Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Elisa Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.elisa_1') === 'Positif' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[elisa_1]" value="Positif" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.elisa_1') === 'Positif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Positif</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.elisa_1') === 'Negatif' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[elisa_1]" value="Negatif" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.elisa_1') === 'Negatif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Negatif</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="hiv_rapid_ibu[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('hiv_rapid_ibu.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #EFF6FF;">
                                <div class="space-y-3">
                                    <!-- Rapid Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Rapid Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.result_2') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[result_2]" value="NR" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.result_2') === 'NR' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">NR</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.result_2') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[result_2]" value="R" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.result_2') === 'R' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">R</span>
                                            </label>
                                        </div>
                                    </div>
                                    <!-- Elisa Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Elisa Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.elisa_2') === 'Positif' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[elisa_2]" value="Positif" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.elisa_2') === 'Positif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Positif</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_ibu.elisa_2') === 'Negatif' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_ibu[elisa_2]" value="Negatif" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_ibu.elisa_2') === 'Negatif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Negatif</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <!-- Row 6: HIV / Rapid Test (Pasangan) -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-4 text-center font-semibold" style="color: #2D3748;">6</td>
                            <td class="px-4 py-4 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-user-friends text-red-500 mr-2"></i>HIV / Rapid Test (Pasangan)
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="hiv_rapid_pasangan[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('hiv_rapid_pasangan.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #FFFBEB;">
                                <div class="space-y-3">
                                    <!-- Rapid Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Rapid Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.result_1') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[result_1]" value="NR" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.result_1') === 'NR' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">NR</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.result_1') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[result_1]" value="R" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.result_1') === 'R' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">R</span>
                                            </label>
                                        </div>
                                    </div>
                                    <!-- Elisa Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Elisa Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.elisa_1') === 'Positif' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[elisa_1]" value="Positif" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.elisa_1') === 'Positif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Positif</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.elisa_1') === 'Negatif' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[elisa_1]" value="Negatif" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.elisa_1') === 'Negatif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Negatif</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="hiv_rapid_pasangan[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('hiv_rapid_pasangan.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-4 text-center" style="background: #EFF6FF;">
                                <div class="space-y-3">
                                    <!-- Rapid Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Rapid Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.result_2') === 'NR' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[result_2]" value="NR" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.result_2') === 'NR' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">NR</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.result_2') === 'R' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[result_2]" value="R" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.result_2') === 'R' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">R</span>
                                            </label>
                                        </div>
                                    </div>
                                    <!-- Elisa Test -->
                                    <div>
                                        <div class="text-xs font-bold mb-2 text-gray-700">Elisa Test</div>
                                        <div class="flex justify-center gap-2">
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.elisa_2') === 'Positif' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[elisa_2]" value="Positif" class="w-4 h-4 text-red-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.elisa_2') === 'Positif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Positif</span>
                                            </label>
                                            <label class="flex items-center px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all {{ $getData('hiv_rapid_pasangan.elisa_2') === 'Negatif' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                                <input type="radio" name="hiv_rapid_pasangan[elisa_2]" value="Negatif" class="w-4 h-4 text-green-600 mr-1.5"
                                                       {{ $getData('hiv_rapid_pasangan.elisa_2') === 'Negatif' ? 'checked' : '' }}>
                                                <span class="text-xs font-medium">Negatif</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        <!-- Row 7: Hepatitis B -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">7</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-disease text-red-500 mr-2"></i>Hepatitis B
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="hepatitis_b[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('hepatitis_b.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="text"
                                       name="hepatitis_b[result_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('hepatitis_b.result_1') }}"
                                       placeholder="Result">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="hepatitis_b[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('hepatitis_b.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="text"
                                       name="hepatitis_b[result_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('hepatitis_b.result_2') }}"
                                       placeholder="Result">
                            </td>
                        </tr>

                        <!-- Row 8: Malaria (BFMP) -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-3 py-3 text-center font-semibold" style="color: #2D3748;">8</td>
                            <td class="px-4 py-3 font-semibold" style="color: #2D3748;">
                                <i class="fas fa-bug text-red-500 mr-2"></i>Malaria (BFMP)
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="date"
                                       name="malaria_bfmp[taken_at_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('malaria_bfmp.taken_at_1') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #FFFBEB;">
                                <input type="text"
                                       name="malaria_bfmp[result_1]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-center text-sm"
                                       value="{{ $getData('malaria_bfmp.result_1') }}"
                                       placeholder="Result">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="date"
                                       name="malaria_bfmp[taken_at_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('malaria_bfmp.taken_at_2') }}">
                            </td>
                            <td class="px-3 py-3 text-center" style="background: #EFF6FF;">
                                <input type="text"
                                       name="malaria_bfmp[result_2]"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-center text-sm"
                                       value="{{ $getData('malaria_bfmp.result_2') }}"
                                       placeholder="Result">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-health-record-test-layout>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Make radio buttons deselectable by clicking again
    const radioButtons = document.querySelectorAll('input[type="radio"]');
    let lastSelected = {};

    radioButtons.forEach(radio => {
        radio.addEventListener('mousedown', function() {
            if (this.checked) {
                lastSelected[this.name] = this.value;
            }
        });

        radio.addEventListener('click', function() {
            if (lastSelected[this.name] === this.value) {
                this.checked = false;
                delete lastSelected[this.name];
            } else {
                lastSelected[this.name] = this.value;
            }
        });
    });
});
</script>