@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 null;
        try {
            return \Carbon\Carbon::parse($date)->format('d/m/Y');
        } catch (\Exception $e) {
            return $date;
        }
    };
@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, #D1FAE5 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, #10B981 0%, #059669 100%);">
                    <i class="fas fa-calendar-check text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Antenatal Visits</h2>
                    <p class="text-sm" style="color: #718096;">Lawatan Antenatal</p>
                </div>
            </div>
        </div>
    </div>
</div>

    @php
        $bookingWeight = $getData('booking_weight');
        $bookingBmi = $getData('booking_bmi');
        $bookingBp = $getData('booking_bp');
        $tarikh = $getData('tarikh');
        $lk = $getData('lk');
        $lr = $getData('lr');
        $urinProtein = $getData('urin_protein');
        $urinSugar = $getData('urin_sugar');
        $hbGdl = $getData('hb_gdl');
        $beratKg = $getData('berat_kg');
        $bp = $getData('bp');
        $nadi = $getData('nadi');
        $edema = $getData('edema');
        $tempohHamilMinggu = $getData('tempoh_hamil_minggu');
        $tinggiRahimCm = $getData('tinggi_rahim_cm');
        $presentasi = $getData('presentasi');
        $jantung = $getData('jantung');
        $gerak = $getData('gerak');
        $additionalNotes = $getData('additional_notes');

        $hasData = $tarikh || $lk || $lr || $urinProtein || $urinSugar || $hbGdl || $beratKg || $bp || $nadi || $edema || $tempohHamilMinggu || $tinggiRahimCm || $presentasi || $jantung || $gerak || $bookingWeight || $bookingBmi || $bookingBp;
    @endphp

    @if($hasData)
        <!-- 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="px-4 py-3 bg-red-50 border border-red-300 rounded-lg">
                            @if($bookingWeight)
                                <span class="font-semibold text-red-700">{{ $bookingWeight }} kg</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-calculator text-red-600 mr-2"></i>Booking BMI
                        </label>
                        <div class="px-4 py-3 bg-red-50 border border-red-300 rounded-lg">
                            @if($bookingBmi)
                                <span class="font-semibold text-red-700">{{ $bookingBmi }} kg/m²</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-heartbeat text-red-600 mr-2"></i>Booking BP
                        </label>
                        <div class="px-4 py-3 bg-red-50 border border-red-300 rounded-lg">
                            @if($bookingBp)
                                <span class="font-semibold text-red-700">{{ $bookingBp }} mmHg</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </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>
                        <div class="px-4 py-3 bg-indigo-50 border border-indigo-300 rounded-lg">
                            @if($tarikh)
                                <span class="font-semibold text-indigo-700">{{ $formatDate($tarikh) }}</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-head-side-brain text-gray-500 mr-2"></i>LK (Lingkaran Kepala)
                        </label>
                        <div class="px-4 py-3 bg-indigo-50 border border-indigo-300 rounded-lg">
                            @if($lk)
                                <span class="font-semibold text-indigo-700">{{ $lk }} cm</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-circle-notch text-gray-500 mr-2"></i>LR (Lingkaran Rahim)
                        </label>
                        <div class="px-4 py-3 bg-indigo-50 border border-indigo-300 rounded-lg">
                            @if($lr)
                                <span class="font-semibold text-indigo-700">{{ $lr }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </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>
                        <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                            @if($urinProtein)
                                <span class="font-semibold text-blue-700">{{ $urinProtein }}</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-vial text-blue-600 mr-2"></i>Urin Sugar
                        </label>
                        <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                            @if($urinSugar)
                                <span class="font-semibold text-blue-700">{{ $urinSugar }}</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-tint text-red-600 mr-2"></i>Hb (Hemoglobin)
                        </label>
                        <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                            @if($hbGdl)
                                <span class="font-semibold text-blue-700">{{ $hbGdl }} 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>
            </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="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($beratKg)
                                <span class="font-semibold text-green-700">{{ $beratKg }} kg</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-heartbeat text-red-600 mr-2"></i>BP (Blood Pressure)
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($bp)
                                <span class="font-semibold text-green-700">{{ $bp }} mmHg</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-heart-pulse text-pink-600 mr-2"></i>Nadi (Pulse)
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($nadi)
                                <span class="font-semibold text-green-700">{{ $nadi }} bpm</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-droplet text-blue-600 mr-2"></i>Edema (Swelling)
                        </label>
                        <div class="px-4 py-3 bg-green-50 border border-green-300 rounded-lg">
                            @if($edema)
                                <span class="font-semibold text-green-700">{{ $edema }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </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="px-4 py-3 bg-amber-50 border border-amber-300 rounded-lg">
                            @if($tempohHamilMinggu)
                                <span class="font-semibold text-amber-700">{{ $tempohHamilMinggu }} minggu</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-ruler text-amber-600 mr-2"></i>Tinggi Rahim (Fundal Height)
                        </label>
                        <div class="px-4 py-3 bg-amber-50 border border-amber-300 rounded-lg">
                            @if($tinggiRahimCm)
                                <span class="font-semibold text-amber-700">{{ $tinggiRahimCm }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </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>
                        <div class="px-4 py-3 bg-purple-50 border border-purple-300 rounded-lg">
                            @if($presentasi)
                                <span class="font-semibold text-purple-700">{{ $presentasi }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <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>
                        <div class="px-4 py-3 bg-purple-50 border border-purple-300 rounded-lg">
                            @if($jantung)
                                <span class="font-semibold text-purple-700">{{ $jantung }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <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>
                        <div class="px-4 py-3 bg-purple-50 border border-purple-300 rounded-lg">
                            @if($gerak)
                                <span class="font-semibold text-purple-700">{{ $gerak }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Active, Reduced, Normal</p>
                    </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, #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>
                <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-clipboard-check text-gray-300 text-6xl mb-4"></i>
            <p class="text-gray-500 text-lg">No antenatal visit 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>