@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, #FCE7F3 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, #EC4899 0%, #DB2777 100%);">
                    <i class="fas fa-heartbeat text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Pre-Eclampsia Profile</h2>
                    <p class="text-sm" style="color: #718096;">Profil Risiko Pre-Eclampsia</p>
                </div>
            </div>
        </div>
    </div>
</div>

    @php
        $date = $getData('date');
        $poaPog = $getData('poa_pog');
        $bp = $getData('bp');
        $proteinuria = $getData('proteinuria');
        $urea = $getData('urea');
        $creatinine = $getData('creatinine');
        $uricAcid = $getData('uric_acid');
        $hemoglobin = $getData('hemoglobin');
        $platelet = $getData('platelet');
        $astAlt = $getData('ast_alt');
        $additionalNotes = $getData('additional_notes');

        $hasData = $date || $bp || $proteinuria || $urea || $creatinine || $uricAcid || $hemoglobin || $platelet || $astAlt;
    @endphp

    @if($hasData)
        <!-- Important Notes -->
        <div class="bg-gradient-to-r from-red-50 to-pink-50 border-l-4 border-red-500 rounded-lg p-6 mb-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h4 class="font-bold text-gray-900 mb-2">
                        <i class="fas fa-info-circle text-red-600 mr-2"></i>Nota Penting
                    </h4>
                    <div class="text-sm text-gray-800 space-y-1">
                        <p><strong>Untuk:</strong> Ibu yang mengalami Hipertensi</p>
                        <p><strong>Tujuan:</strong> Pemantauan profil pre-eclampsia untuk mengesan komplikasi awal</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Date and POA/POG -->
        <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">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);">
                        <i class="fas fa-calendar-alt text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Date & Gestational Age</h3>
                        <p class="text-sm" style="color: #718096;">Tarikh pemeriksaan dan jangkamasa kandungan</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <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-calendar text-gray-500 mr-2"></i>Tarikh (Date)
                        </label>
                        <div class="px-4 py-3 bg-red-50 border border-red-300 rounded-lg">
                            @if($date)
                                <span class="font-semibold text-red-700">{{ $formatDate($date) }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </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>POA/POG (Gestational Age)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $poaPog ?: 'Not recorded' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blood Pressure -->
        <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, #DBEAFE 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);">
                        <i class="fas fa-heartbeat text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Blood Pressure</h3>
                        <p class="text-sm" style="color: #718096;">Tekanan darah</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-heart-pulse text-red-600 mr-2"></i>BP (Blood Pressure)
                </label>
                <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                    @if($bp)
                        <span class="font-semibold text-blue-700">{{ $bp }} mmHg</span>
                    @else
                        <span class="text-gray-500">Not recorded</span>
                    @endif
                </div>
                <p class="text-xs text-gray-600 mt-1">Normal: &lt;140/90 mmHg | Pre-eclampsia: ≥140/90 mmHg</p>
            </div>
        </div>

        <!-- Urine Test -->
        <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, #FEF3C7 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);">
                        <i class="fas fa-vial text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Urine Test</h3>
                        <p class="text-sm" style="color: #718096;">Ujian air kencing</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-flask text-yellow-600 mr-2"></i>Proteinuria (Urine Protein)
                </label>
                <div class="px-4 py-3 bg-yellow-50 border border-yellow-300 rounded-lg">
                    @if($proteinuria)
                        <span class="font-semibold text-yellow-700">{{ $proteinuria }}</span>
                    @else
                        <span class="text-gray-500">Not recorded</span>
                    @endif
                </div>
                <p class="text-xs text-gray-600 mt-1">Normal: Negative or Trace | Pre-eclampsia: ≥+1</p>
            </div>
        </div>

        <!-- Kidney Function Tests -->
        <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, #D1FAE5 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">
                        <i class="fas fa-kidneys text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Kidney Function Tests</h3>
                        <p class="text-sm" style="color: #718096;">Ujian fungsi buah pinggang</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-flask-vial text-green-600 mr-2"></i>Urea
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($urea)
                                <span class="font-semibold text-green-700">{{ $urea }} mmol/L</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 2.5-7.5 mmol/L</p>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-flask-vial text-green-600 mr-2"></i>Creatinine
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($creatinine)
                                <span class="font-semibold text-green-700">{{ $creatinine }} μmol/L</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 45-90 μmol/L</p>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-flask-vial text-green-600 mr-2"></i>Uric Acid
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($uricAcid)
                                <span class="font-semibold text-green-700">{{ $uricAcid }} μmol/L</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 150-350 μmol/L</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blood Tests -->
        <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, #FCE7F3 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);">
                        <i class="fas fa-droplet text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Blood Tests</h3>
                        <p class="text-sm" style="color: #718096;">Ujian darah</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <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-tint text-red-600 mr-2"></i>Hemoglobin (Hb)
                        </label>
                        <div class="px-4 py-3 bg-pink-50 border border-pink-300 rounded-lg">
                            @if($hemoglobin)
                                <span class="font-semibold text-pink-700">{{ $hemoglobin }} g/dL</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 11-14 g/dL</p>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-circle-dot text-pink-600 mr-2"></i>Platelet
                        </label>
                        <div class="px-4 py-3 bg-pink-50 border border-pink-300 rounded-lg">
                            @if($platelet)
                                <span class="font-semibold text-pink-700">{{ $platelet }} ×10⁹/L</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 150-400 ×10⁹/L</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Liver Function Test -->
        <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, #E0E7FF 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);">
                        <i class="fas fa-liver text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Liver Function Test</h3>
                        <p class="text-sm" style="color: #718096;">Ujian fungsi hati</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-flask text-indigo-600 mr-2"></i>AST/ALT (Liver Enzymes)
                </label>
                <div class="px-4 py-3 bg-indigo-50 border border-indigo-300 rounded-lg">
                    @if($astAlt)
                        <span class="font-semibold text-indigo-700">{{ $astAlt }}</span>
                    @else
                        <span class="text-gray-500">Not recorded</span>
                    @endif
                </div>
                <p class="text-xs text-gray-600 mt-1">Normal: AST &lt;40 U/L, ALT &lt;40 U/L</p>
            </div>
        </div>

        <!-- Warning Signs -->
        <div class="bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-500 rounded-lg p-6 mb-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-triangle-exclamation text-yellow-600 text-2xl"></i>
                </div>
                <div class="ml-4">
                    <h4 class="font-bold text-gray-900 mb-3">
                        <i class="fas fa-bell text-yellow-600 mr-2"></i>Simptom Severe Pre-Eclampsia
                    </h4>
                    <p class="text-sm text-gray-800 mb-3 font-semibold">
                        Segera ke hospital/klinik sekiranya ada salah satu tanda berikut:
                    </p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div class="flex items-start">
                            <i class="fas fa-circle text-yellow-600 text-xs mt-1 mr-2"></i>
                            <span class="text-sm text-gray-800">Sakit kepala (Severe headache)</span>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-circle text-yellow-600 text-xs mt-1 mr-2"></i>
                            <span class="text-sm text-gray-800">Penglihatan kabur/berpinar (Blurred vision)</span>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-circle text-yellow-600 text-xs mt-1 mr-2"></i>
                            <span class="text-sm text-gray-800">Loya/muntah (Nausea/vomiting)</span>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-circle text-yellow-600 text-xs mt-1 mr-2"></i>
                            <span class="text-sm text-gray-800">Pedih ulu hati (Epigastric pain)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Notes -->
        @if($additionalNotes)
        <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, #F9FAFB 0%, #FEFBFC 100%);">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-lg flex items-center justify-center mr-3" style="background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);">
                        <i class="fas fa-notes-medical text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Additional Notes</h3>
                        <p class="text-sm" style="color: #718096;">Catatan tambahan</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-comment-medical text-gray-500 mr-2"></i>Catatan (Notes)
                </label>
                <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 min-h-[100px] whitespace-pre-wrap">{{ $additionalNotes }}</div>
            </div>
        </div>
        @endif
    @else
        <div class="bg-white rounded-xl shadow-md overflow-hidden p-12 text-center">
            <i class="fas fa-heartbeat text-gray-300 text-6xl mb-4"></i>
            <p class="text-gray-500 text-lg">No pre-eclampsia monitoring data recorded yet</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>