@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, #E0E7FF 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, #6366F1 0%, #4F46E5 100%);">
                    <i class="fas fa-baby text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Ultrasound Examination</h2>
                    <p class="text-sm" style="color: #718096;">Pemeriksaan Ultrasound</p>
                </div>
            </div>
        </div>
    </div>
</div>

    @php
        $date = $getData('date');
        $edd = $getData('edd');
        $redd = $getData('redd');
        $presentation = $getData('presentation');
        $fhFm = $getData('fh_fm');
        $crl = $getData('crl');
        $bpd = $getData('bpd');
        $hc = $getData('hc');
        $ac = $getData('ac');
        $fl = $getData('fl');
        $efw = $getData('estimated_fetal_weight');
        $placenta = $getData('placenta');
        $afi = $getData('afi');
        $remarks = $getData('remarks');
        $hasData = $date || $edd || $presentation || $bpd || $hc || $ac || $fl;
    @endphp

    @if($hasData)
        <!-- Examination Date -->
        <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 text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Examination Date</h3>
                        <p class="text-sm" style="color: #718096;">Date of ultrasound examination</p>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-calendar-day text-gray-500 mr-2"></i>Tarikh (Date)
                </label>
                <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                    {{ $formatDate($date) }}
                </div>
            </div>
        </div>

        <!-- Gestational Age & Dates -->
        <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-baby text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Jangkamasa Kandungan</h3>
                        <p class="text-sm" style="color: #718096;">Gestational age and expected delivery dates</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-clock text-gray-500 mr-2"></i>EDD (Expected Delivery Date)
                        </label>
                        <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                            @if($edd)
                                <span class="font-semibold text-blue-700">{{ $formatDate($edd) }}</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-calendar-check text-gray-500 mr-2"></i>REDD (Revised Expected Delivery Date)
                        </label>
                        <div class="px-4 py-3 bg-blue-50 border border-blue-300 rounded-lg">
                            @if($redd)
                                <span class="font-semibold text-blue-700">{{ $formatDate($redd) }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fetal Presentation & Heart -->
        <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-heartbeat text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Fetal Presentation & Heart</h3>
                        <p class="text-sm" style="color: #718096;">Baby's position and heart activity</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-child text-gray-500 mr-2"></i>Presentasi (Presentation)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $presentation ?: 'Not recorded' }}
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-heart text-gray-500 mr-2"></i>FH / FM (Fetal Heart / Fetal Movement)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $fhFm ?: 'Not recorded' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fetal 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, #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-combined text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Fetal Measurements</h3>
                        <p class="text-sm" style="color: #718096;">Biometric measurements of your baby</p>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- CRL -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-arrows-alt-v text-amber-600 mr-2"></i>CRL (Crown-Rump Length)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($crl)
                                <span class="font-semibold">{{ $crl }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>

                    <!-- BPD -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-head-side-virus text-amber-600 mr-2"></i>BPD (Biparietal Diameter)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($bpd)
                                <span class="font-semibold">{{ $bpd }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>

                    <!-- HC -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-circle text-amber-600 mr-2"></i>HC (Head Circumference)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($hc)
                                <span class="font-semibold">{{ $hc }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>

                    <!-- AC -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-circle-notch text-amber-600 mr-2"></i>AC (Abdominal Circumference)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($ac)
                                <span class="font-semibold">{{ $ac }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>

                    <!-- FL -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-bone text-amber-600 mr-2"></i>FL (Femur Length)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($fl)
                                <span class="font-semibold">{{ $fl }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>

                    <!-- Estimated Fetal Weight -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-weight text-amber-600 mr-2"></i>Estimated Fetal Weight
                        </label>
                        <div class="px-4 py-3 bg-amber-50 border border-amber-300 rounded-lg">
                            @if($efw)
                                <span class="font-bold text-amber-700 text-lg">{{ $efw }} g</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Placenta & Amniotic Fluid -->
        <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-water text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Placenta & Amniotic Fluid</h3>
                        <p class="text-sm" style="color: #718096;">Placental position and amniotic fluid assessment</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-map-marker-alt text-gray-500 mr-2"></i>Placenta (Position)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $placenta ?: 'Not recorded' }}
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-tint text-gray-500 mr-2"></i>AFI (Amniotic Fluid Index)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($afi)
                                <span class="font-semibold">{{ $afi }} cm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Remarks -->
        @if($remarks)
        <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-comment-medical text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Ulasan</h3>
                        <p class="text-sm" style="color: #718096;">Additional remarks and 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-notes-medical text-gray-500 mr-2"></i>Ulasan (Remarks)
                </label>
                <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 min-h-[100px]">
                    {{ $remarks }}
                </div>
            </div>
        </div>
        @endif
    @else
        <div class="bg-white rounded-xl shadow-md overflow-hidden p-12 text-center">
            <i class="fas fa-baby text-gray-300 text-6xl mb-4"></i>
            <p class="text-gray-500 text-lg">No ultrasound examination 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>