@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="Immunization Status"
    subtitle="Record all vaccination details during pregnancy"
    :record="$record"
    :testResult="$testResult"
    test="immunization"
>
    <!-- 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;">Record all tetanus/toxoid vaccination details</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">
                                <input type="date" 
                                       name="immunization[dos_1][injection_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_1.injection_date') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="text" 
                                       name="immunization[dos_1][batch_no]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       placeholder="Batch number"
                                       value="{{ $getData('immunization.dos_1.batch_no') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[dos_1][expiry_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_1.expiry_date') }}">
                            </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">
                                <input type="date" 
                                       name="immunization[dos_2][injection_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_2.injection_date') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="text" 
                                       name="immunization[dos_2][batch_no]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       placeholder="Batch number"
                                       value="{{ $getData('immunization.dos_2.batch_no') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[dos_2][expiry_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_2.expiry_date') }}">
                            </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">
                                <input type="date" 
                                       name="immunization[dos_tambahan][injection_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_tambahan.injection_date') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="text" 
                                       name="immunization[dos_tambahan][batch_no]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       placeholder="Batch number"
                                       value="{{ $getData('immunization.dos_tambahan.batch_no') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[dos_tambahan][expiry_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.dos_tambahan.expiry_date') }}">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Checkbox to Show/Hide Other Immunizations -->
    <div class="mb-6">
        <label class="flex items-center cursor-pointer p-4 rounded-lg border-2 border-gray-300 hover:border-blue-400 transition-all" style="background: linear-gradient(135deg, #F7FAFC 0%, #FFFFFF 100%);">
            <input type="checkbox"
                   id="show_other_immunizations"
                   name="show_other_immunizations"
                   value="1"
                   class="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
                   {{ $getData('show_other_immunizations') == '1' ? 'checked' : '' }}
                   onclick="toggleOtherImmunizations(this)">
            <span class="ml-3 font-semibold" style="color: #2D3748;">
                <i class="fas fa-plus-circle text-blue-500 mr-2"></i>
                Tambah Imunisasi Lain-lain
            </span>
        </label>
    </div>

    <script>
        function toggleOtherImmunizations(checkbox) {
            const section = document.getElementById('other_immunizations_section');
            if (checkbox.checked) {
                section.style.display = 'block';
            } else {
                section.style.display = 'none';
            }
        }
    </script>

    <!-- Other Immunizations Section -->
    <div id="other_immunizations_section" class="modern-card" style="display: {{ $getData('show_other_immunizations') == '1' ? 'block' : 'none' }};">
        <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;">Record other immunizations received during pregnancy</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 #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">
                        <!-- Lain-lain 1 -->
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="mb-2">
                                    <label class="block text-sm font-semibold mb-2" style="color: #2D3748;">
                                        <i class="fas fa-circle text-xs mr-2" style="color: #4299E1;"></i>
                                        1. Nama Imunisasi:
                                    </label>
                                    <input type="text" 
                                           name="immunization[lain_lain_1][name]" 
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                           placeholder="Contoh: Hepatitis B, MMR, Influenza, Pertussis, dll..."
                                           value="{{ $getData('immunization.lain_lain_1.name') }}">
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[lain_lain_1][injection_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.lain_lain_1.injection_date') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="text" 
                                       name="immunization[lain_lain_1][batch_no]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       placeholder="Batch number"
                                       value="{{ $getData('immunization.lain_lain_1.batch_no') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[lain_lain_1][expiry_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.lain_lain_1.expiry_date') }}">
                            </td>
                        </tr>
                        
                        <!-- Lain-lain 2 -->
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="mb-2">
                                    <label class="block text-sm font-semibold mb-2" style="color: #2D3748;">
                                        <i class="fas fa-circle text-xs mr-2" style="color: #4299E1;"></i>
                                        2. Nama Imunisasi:
                                    </label>
                                    <input type="text" 
                                           name="immunization[lain_lain_2][name]" 
                                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                           placeholder="Contoh: Hepatitis B, MMR, Influenza, Pertussis, dll..."
                                           value="{{ $getData('immunization.lain_lain_2.name') }}">
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[lain_lain_2][injection_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.lain_lain_2.injection_date') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="text" 
                                       name="immunization[lain_lain_2][batch_no]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       placeholder="Batch number"
                                       value="{{ $getData('immunization.lain_lain_2.batch_no') }}">
                            </td>
                            <td class="px-6 py-4 text-center">
                                <input type="date" 
                                       name="immunization[lain_lain_2][expiry_date]" 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                                       value="{{ $getData('immunization.lain_lain_2.expiry_date') }}">
                            </td>
                        </tr>
                    </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;">Gunakan bahagian "Imunisasi Lain-lain" untuk merekod vaksin tambahan seperti Influenza, Pertussis, Hepatitis B, MMR, atau vaksin lain yang diterima semasa mengandung.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-health-record-test-layout>