@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="Blood Pressure Monitoring"
    subtitle="Pemantauan Tekanan Darah & Pre-Eclampsia"
    :record="$record"
    :testResult="$testResult"
    test="blood_pressure_monitoring"
>
    <!-- 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 mempunyai indikasi</p>
                    <p><strong>*</strong> Jika tempoh kehamilan ≥ 22 minggu</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Date and Time -->
    <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-clock text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Date & Time</h3>
                    <p class="text-sm" style="color: #718096;">When was the blood pressure measured?</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
                    </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-clock text-gray-500 mr-2"></i>Masa
                    </label>
                    <input type="time"
                           name="time"
                           value="{{ $getData('time') }}"
                           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">
                </div>
            </div>
        </div>
    </div>

    <!-- Blood Pressure & Vital Signs -->
    <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 & Vital Signs</h3>
                    <p class="text-sm" style="color: #718096;">Record blood pressure and related measurements</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Blood Pressure -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heart-pulse text-red-600 mr-2"></i>Tekanan Darah (Blood Pressure)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="blood_pressure"
                               value="{{ $getData('blood_pressure') }}"
                               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., 120/80">
                        <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</p>
                </div>

                <!-- Fetal Heart Rate -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-baby text-pink-600 mr-2"></i>Denyutan Jantung Janin* (Fetal Heart Rate)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="fetal_heart_rate"
                               value="{{ $getData('fetal_heart_rate') }}"
                               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">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">bpm</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Normal: 110-160 bpm</p>
                </div>

                <!-- Urine Protein -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-vial text-yellow-600 mr-2"></i>Urin Protein (Urine Protein)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="urine_protein"
                               value="{{ $getData('urine_protein') }}"
                               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., Negative or +1">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mg/dL</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Normal: Negative or trace</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Symptoms -->
    <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, #F3E8FF 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, #A855F7 0%, #9333EA 100%);">
                    <i class="fas fa-notes-medical text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Symptoms & Observations</h3>
                    <p class="text-sm" style="color: #718096;">Record any symptoms or clinical observations</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>Simptom (Symptoms)
            </label>
            <textarea name="symptoms"
                      rows="4"
                      class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                      placeholder="Enter any symptoms such as headache, blurred vision, swelling, etc...">{{ $getData('symptoms') }}</textarea>
            <p class="text-xs text-gray-600 mt-1">
                <strong>Common symptoms to watch for:</strong> Headache, blurred vision, epigastric pain, swelling (edema), nausea/vomiting
            </p>
        </div>
    </div>
</x-health-record-test-layout>