@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, #F5E6ED 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, #CD7A98 0%, #94426A 100%);">
                    <i class="fas fa-syringe text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Immunization Status</h2>
                    <p class="text-sm" style="color: #718096;">Status Imunisasi & Vaksinasi</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tetanus/Toxoid Immunization 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-syringe text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Tetanus/Toxoid Immunization</h3>
                    <p class="text-sm" style="color: #718096;">Your tetanus/toxoid vaccination records</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-6 py-4 text-left text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #CD7A98;">
                                Tetanus/Toxoid
                            </th>
                            <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #CD7A98;">
                                Tarikh Suntikan
                            </th>
                            <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #CD7A98;">
                                Batch No
                            </th>
                            <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #CD7A98;">
                                Tarikh Luput
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- Dos 1 -->
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="font-semibold" style="color: #2D3748;">Dos 1</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700 font-medium">
                                    {{ $formatDate($getData('immunization.dos_1.injection_date')) }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $getData('immunization.dos_1.batch_no') ?: '-' }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $formatDate($getData('immunization.dos_1.expiry_date')) }}
                                </div>
                            </td>
                        </tr>
                        
                        <!-- Dos 2 -->
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="font-semibold" style="color: #2D3748;">Dos 2</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700 font-medium">
                                    {{ $formatDate($getData('immunization.dos_2.injection_date')) }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $getData('immunization.dos_2.batch_no') ?: '-' }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $formatDate($getData('immunization.dos_2.expiry_date')) }}
                                </div>
                            </td>
                        </tr>
                        
                        <!-- Dos Tambahan -->
                        <tr class="hover:bg-pink-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="font-semibold" style="color: #2D3748;">Dos Tambahan</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700 font-medium">
                                    {{ $formatDate($getData('immunization.dos_tambahan.injection_date')) }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $getData('immunization.dos_tambahan.batch_no') ?: '-' }}
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <div class="text-gray-700">
                                    {{ $formatDate($getData('immunization.dos_tambahan.expiry_date')) }}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Other Immunizations Section -->
    @php
        $showOtherImmunizations = $getData('immunization.show_other_immunizations') == '1';
        $hasLainLain1 = $getData('immunization.lain_lain_1.name') || $getData('immunization.lain_lain_1.injection_date');
        $hasLainLain2 = $getData('immunization.lain_lain_2.name') || $getData('immunization.lain_lain_2.injection_date');
    @endphp

    @if($showOtherImmunizations && ($hasLainLain1 || $hasLainLain2))
    <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">
                <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-notes-medical text-white text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Imunisasi Lain-lain</h3>
                    <p class="text-sm" style="color: #718096;">Other immunizations received during pregnancy</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            @php
                // Already defined above
            @endphp
                <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-6 py-4 text-left text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #4299E1;">
                                    Jenis Imunisasi
                                </th>
                                <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #4299E1;">
                                    Tarikh Suntikan
                                </th>
                                <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #4299E1;">
                                    Batch No
                                </th>
                                <th class="px-6 py-4 text-center text-xs font-bold uppercase tracking-wider" style="color: #4A5568; border-bottom: 2px solid #4299E1;">
                                    Tarikh Luput
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @if($hasLainLain1)
                            <!-- Lain-lain 1 -->
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <i class="fas fa-circle text-xs mr-2" style="color: #4299E1;"></i>
                                        <span class="font-semibold" style="color: #2D3748;">
                                            {{ $getData('immunization.lain_lain_1.name') ?: 'Imunisasi Lain-lain 1' }}
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700 font-medium">
                                        {{ $formatDate($getData('immunization.lain_lain_1.injection_date')) }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700">
                                        {{ $getData('immunization.lain_lain_1.batch_no') ?: '-' }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700">
                                        {{ $formatDate($getData('immunization.lain_lain_1.expiry_date')) }}
                                    </div>
                                </td>
                            </tr>
                            @endif
                            
                            @if($hasLainLain2)
                            <!-- Lain-lain 2 -->
                            <tr class="hover:bg-blue-50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <i class="fas fa-circle text-xs mr-2" style="color: #4299E1;"></i>
                                        <span class="font-semibold" style="color: #2D3748;">
                                            {{ $getData('immunization.lain_lain_2.name') ?: 'Imunisasi Lain-lain 2' }}
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700 font-medium">
                                        {{ $formatDate($getData('immunization.lain_lain_2.injection_date')) }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700">
                                        {{ $getData('immunization.lain_lain_2.batch_no') ?: '-' }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="text-gray-700">
                                        {{ $formatDate($getData('immunization.lain_lain_2.expiry_date')) }}
                                    </div>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

            <!-- Info Note -->
            <div class="mt-4 p-4 rounded-lg" style="background: linear-gradient(135deg, #EBF8FF 0%, #F7FAFC 100%); border-left: 4px solid #4299E1;">
                <div class="flex items-start">
                    <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                    <div>
                        <p class="text-sm font-medium" style="color: #2D3748;">Nota:</p>
                        <p class="text-sm" style="color: #4A5568;">Bahagian "Imunisasi Lain-lain" merekod vaksin tambahan seperti Influenza, Pertussis, Hepatitis B, MMR, atau vaksin lain yang diterima semasa mengandung.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Check if no data at all -->
    @php
        $hasAnyData = $getData('immunization.dos_1.injection_date') || 
                      $getData('immunization.dos_2.injection_date') || 
                      $getData('immunization.dos_tambahan.injection_date') ||
                      $hasLainLain1 || $hasLainLain2;
    @endphp
    
    @if(!$hasAnyData)
        <div class="text-center py-12 bg-gray-50 rounded-lg">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
                <i class="fas fa-syringe text-gray-400 text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-900 mb-2">No Immunization Data Available</h3>
            <p class="text-gray-600">Your immunization status hasn't been recorded yet. Please contact your healthcare provider for more information.</p>
        </div>
    @endif

<!-- 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>