@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="Ultrasound Examination"
    subtitle="Keputusan Pemeriksaan Ultrasound"
    :record="$record"
    :testResult="$testResult"
    test="ultrasound_examination"
>
    <!-- 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>
            <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-indigo-500 focus:border-indigo-500"
                   required>
        </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>
                    <input type="date"
                           name="edd"
                           value="{{ $getData('edd') }}"
                           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="Expected delivery date">
                </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>
                    <input type="date"
                           name="redd"
                           value="{{ $getData('redd') }}"
                           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="Revised expected delivery date">
                </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>
                    <input type="text"
                           name="presentation"
                           value="{{ $getData('presentation') }}"
                           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., Cephalic, Breech, Transverse">
                </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>
                    <input type="text"
                           name="fh_fm"
                           value="{{ $getData('fh_fm') }}"
                           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., FH present, FM active">
                </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 the 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="relative">
                        <input type="text"
                               name="crl"
                               value="{{ $getData('crl') }}"
                               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., 5.2">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </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="relative">
                        <input type="text"
                               name="bpd"
                               value="{{ $getData('bpd') }}"
                               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., 8.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </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="relative">
                        <input type="text"
                               name="hc"
                               value="{{ $getData('hc') }}"
                               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., 30.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </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="relative">
                        <input type="text"
                               name="ac"
                               value="{{ $getData('ac') }}"
                               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.2">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </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="relative">
                        <input type="text"
                               name="fl"
                               value="{{ $getData('fl') }}"
                               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., 6.8">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">cm</span>
                    </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="relative">
                        <input type="text"
                               name="estimated_fetal_weight"
                               value="{{ $getData('estimated_fetal_weight') }}"
                               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., 2500">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">g</span>
                    </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>
                    <input type="text"
                           name="placenta"
                           value="{{ $getData('placenta') }}"
                           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., Anterior, Posterior, Fundal">
                </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="relative">
                        <input type="text"
                               name="afi"
                               value="{{ $getData('afi') }}"
                               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., 12.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>

    <!-- 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>
            <textarea name="remarks"
                      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 additional remarks, observations, or findings...">{{ $getData('remarks') }}</textarea>
        </div>
    </div>
</x-health-record-test-layout>