@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="Antenatal Visits Checkup"
    subtitle="Pemeriksaan Lawatan Antenatal"
    :record="$record"
    :testResult="$testResult"
    test="antenatal_visits"
>
    <!-- Booking Information -->
    <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-clipboard-list text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Booking Information</h3>
                    <p class="text-sm" style="color: #718096;">Maklumat tempahan awal</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-weight text-red-600 mr-2"></i>Booking Weight
                    </label>
                    <div class="relative">
                        <input type="number"
                               step="0.1"
                               name="booking_weight"
                               value="{{ $getData('booking_weight') }}"
                               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., 60.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calculator text-red-600 mr-2"></i>Booking BMI
                    </label>
                    <div class="relative">
                        <input type="number"
                               step="0.1"
                               name="booking_bmi"
                               value="{{ $getData('booking_bmi') }}"
                               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., 22.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg/m²</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heartbeat text-red-600 mr-2"></i>Booking BP
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="booking_bp"
                               value="{{ $getData('booking_bp') }}"
                               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., 120/80">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmHg</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Visit Date and Measurements -->
    <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-calendar-check text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Visit Information</h3>
                    <p class="text-sm" style="color: #718096;">Maklumat lawatan</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-calendar text-gray-500 mr-2"></i>Tarikh (Date)
                    </label>
                    <input type="date"
                           name="tarikh"
                           value="{{ $getData('tarikh') }}"
                           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"
                           required>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-head-side-brain text-gray-500 mr-2"></i>LK (Lingkaran Kepala)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="lk"
                               value="{{ $getData('lk') }}"
                               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., 32.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-circle-notch text-gray-500 mr-2"></i>LR (Lingkaran Rahim)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="lr"
                               value="{{ $getData('lr') }}"
                               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., 28.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Ujian Makmal (Laboratory 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, #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-flask text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Ujian Makmal</h3>
                    <p class="text-sm" style="color: #718096;">Laboratory tests</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-vial text-blue-600 mr-2"></i>Urin Protein
                    </label>
                    <input type="text"
                           name="urin_protein"
                           value="{{ $getData('urin_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., Nil, Trace, +, ++, +++">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-vial text-blue-600 mr-2"></i>Urin Sugar
                    </label>
                    <input type="text"
                           name="urin_sugar"
                           value="{{ $getData('urin_sugar') }}"
                           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., Nil, Trace, +, ++, +++">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-tint text-red-600 mr-2"></i>Hb (Hemoglobin)
                    </label>
                    <div class="relative">
                        <input type="number"
                               step="0.1"
                               name="hb_gdl"
                               value="{{ $getData('hb_gdl') }}"
                               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., 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>
        </div>
    </div>

    <!-- Pemeriksaan (Physical Examination) -->
    <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-stethoscope text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Pemeriksaan</h3>
                    <p class="text-sm" style="color: #718096;">Physical examination</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-weight text-green-600 mr-2"></i>Berat (Weight)
                    </label>
                    <div class="relative">
                        <input type="number"
                               step="0.1"
                               name="berat_kg"
                               value="{{ $getData('berat_kg') }}"
                               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., 65.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heartbeat 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-green-500 focus:border-green-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>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heart-pulse text-pink-600 mr-2"></i>Nadi (Pulse)
                    </label>
                    <div class="relative">
                        <input type="number"
                               name="nadi"
                               value="{{ $getData('nadi') }}"
                               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., 80">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">bpm</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-droplet text-blue-600 mr-2"></i>Edema (Swelling)
                    </label>
                    <input type="text"
                           name="edema"
                           value="{{ $getData('edema') }}"
                           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., Nil, +, ++">
                </div>
            </div>
        </div>
    </div>

    <!-- Kandungan (Uterus) -->
    <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-ruler-vertical text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Kandungan</h3>
                    <p class="text-sm" style="color: #718096;">Uterus examination</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-days text-amber-600 mr-2"></i>Tempoh Hamil (Gestational Age)
                    </label>
                    <div class="relative">
                        <input type="number"
                               name="tempoh_hamil_minggu"
                               value="{{ $getData('tempoh_hamil_minggu') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"
                               placeholder="e.g., 28">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">minggu</span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-ruler text-amber-600 mr-2"></i>Tinggi Rahim (Fundal Height)
                    </label>
                    <div class="relative">
                        <input type="number"
                               step="0.1"
                               name="tinggi_rahim_cm"
                               value="{{ $getData('tinggi_rahim_cm') }}"
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500"
                               placeholder="e.g., 28.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Janin (Fetus) -->
    <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, #E9D5FF 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-baby text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Janin</h3>
                    <p class="text-sm" style="color: #718096;">Fetal assessment</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-arrows-rotate text-purple-600 mr-2"></i>Presentasi (Presentation)
                    </label>
                    <input type="text"
                           name="presentasi"
                           value="{{ $getData('presentasi') }}"
                           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="e.g., Cephalic, Breech">
                    <p class="text-xs text-gray-600 mt-1">Cephalic, Breech, Transverse</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-heart text-purple-600 mr-2"></i>Jantung (Fetal Heart)
                    </label>
                    <input type="text"
                           name="jantung"
                           value="{{ $getData('jantung') }}"
                           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="e.g., 140 bpm, Normal">
                    <p class="text-xs text-gray-600 mt-1">Normal: 110-160 bpm</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-hand text-purple-600 mr-2"></i>Gerak (Fetal Movement)
                    </label>
                    <input type="text"
                           name="gerak"
                           value="{{ $getData('gerak') }}"
                           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="e.g., Active, Normal">
                    <p class="text-xs text-gray-600 mt-1">Active, Reduced, Normal</p>
                </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, #F3F4F6 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, #6B7280 0%, #4B5563 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 observations or notes...">{{ $getData('additional_notes') }}</textarea>
        </div>
    </div>
</x-health-record-test-layout>