@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 Sugar Monitoring"
    subtitle="Pemantauan Paras Gula Dalam Darah"
    :record="$record"
    :testResult="$testResult"
    test="blood_sugar_monitoring"
>
    <!-- Important Notes -->
    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-500 rounded-lg p-6 mb-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-yellow-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-yellow-600 mr-2"></i>Nota Penting
                </h4>
                <div class="text-sm text-gray-800 space-y-1">
                    <p><strong>Untuk:</strong> Ibu Diabetes</p>
                    <p><strong>Sasaran:</strong> Pre meal ≤5.3mmol/L, 1H post meal ≤7.8mmol/L, 2H post meal ≤6.7mmol/L</p>
                    <p><strong>⚠️ Awasi:</strong> Tanda-tanda hypoglasemia dan bacaan tidak boleh ≤4.0 mmol/L</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Monitoring 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, #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-calendar-day text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Monitoring Date</h3>
                    <p class="text-sm" style="color: #718096;">Date of blood sugar monitoring</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="max-w-md">
                <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-yellow-500 focus:border-yellow-500"
                       required>
            </div>
        </div>
    </div>

    <!-- Blood Sugar Readings -->
    <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-tint text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Blood Sugar Readings</h3>
                    <p class="text-sm" style="color: #718096;">Record blood sugar levels throughout the day (mmol/L)</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Breakfast -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-coffee text-amber-600 mr-2"></i>Pre/Post Breakfast
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="breakfast"
                               value="{{ $getData('breakfast') }}"
                               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., 5.2">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                </div>

                <!-- Lunch -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-utensils text-orange-600 mr-2"></i>Pre/Post Lunch
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="lunch"
                               value="{{ $getData('lunch') }}"
                               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., 6.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                </div>

                <!-- Dinner -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-moon text-indigo-600 mr-2"></i>Pre/Post Dinner
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="dinner"
                               value="{{ $getData('dinner') }}"
                               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., 6.0">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                </div>

                <!-- Pre Bed -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-bed text-purple-600 mr-2"></i>Pre Bed
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="pre_bed"
                               value="{{ $getData('pre_bed') }}"
                               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., 5.8">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">mmol/L</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 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, #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;">Clinical Notes</h3>
                    <p class="text-sm" style="color: #718096;">Additional observations or remarks</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
            </label>
            <textarea name="notes"
                      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 observations, symptoms, or additional notes...">{{ $getData('notes') }}</textarea>
        </div>
    </div>
</x-health-record-test-layout>