@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="Pre-Eclampsia Monitoring"
    subtitle="Pemantauan Profil Pre-Eclampsia"
    :record="$record"
    :testResult="$testResult"
    test="pre_eclampsia"
>
    <!-- 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>
                    <input type="date"
                           name="date"
                           value="{{ $getData('date') }}"
                           class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
                           required>
                </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>
                    <input type="text"
                           name="poa_pog"
                           value="{{ $getData('poa_pog') }}"
                           class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500"
                           placeholder="e.g., 28 minggu">
                </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="relative">
                <input type="text"
                       name="bp"
                       value="{{ $getData('bp') }}"
                       class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       placeholder="e.g., 140/90">
                <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmHg</span>
            </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>
            <input type="text"
                   name="proteinuria"
                   value="{{ $getData('proteinuria') }}"
                   class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500"
                   placeholder="e.g., Negative, Trace, +1, +2, +3, +4">
            <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="relative">
                        <input type="text"
                               name="urea"
                               value="{{ $getData('urea') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                               placeholder="e.g., 4.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </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="relative">
                        <input type="text"
                               name="creatinine"
                               value="{{ $getData('creatinine') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                               placeholder="e.g., 75">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">μmol/L</span>
                    </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="relative">
                        <input type="text"
                               name="uric_acid"
                               value="{{ $getData('uric_acid') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                               placeholder="e.g., 350">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">μmol/L</span>
                    </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="relative">
                        <input type="text"
                               name="hemoglobin"
                               value="{{ $getData('hemoglobin') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
                               placeholder="e.g., 12.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">g/dL</span>
                    </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="relative">
                        <input type="text"
                               name="platelet"
                               value="{{ $getData('platelet') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500"
                               placeholder="e.g., 250">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">×10⁹/L</span>
                    </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>
            <input type="text"
                   name="ast_alt"
                   value="{{ $getData('ast_alt') }}"
                   class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                   placeholder="e.g., AST: 25, ALT: 30">
            <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">
                    Beri peringatan kepada ibu untuk 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 -->
    <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>
            <textarea name="additional_notes"
                      rows="4"
                      class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-gray-500"
                      placeholder="Enter any additional notes, observations, or recommendations...">{{ $getData('additional_notes') }}</textarea>
        </div>
    </div>
</x-health-record-test-layout>