@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="GWG Monitoring"
    subtitle="Pemantauan Peningkatan Berat Badan Ibu Antenatal (Gestational Weight Gain)"
    :record="$record"
    :testResult="$testResult"
    test="weight_monitoring"
>
    <!-- Important Notes -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 rounded-lg p-6 mb-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-600 text-2xl"></i>
            </div>
            <div class="ml-4">
                <h4 class="font-bold text-gray-900 mb-2">
                    <i class="fas fa-clipboard-check text-blue-600 mr-2"></i>Nota Penting
                </h4>
                <div class="text-sm text-gray-800 space-y-1">
                    <p><strong>•</strong> Jika tiada maklumat berat ibu sebelum hamil, berat ibu semasa 1st booking POG ≤12/52 boleh digunakan</p>
                    <p><strong>•</strong> Jika POG >12/52, kategori BMI boleh didapati secara anggaran berdasarkan maklumat ibu</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Baseline 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, #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-user-check text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Baseline Information</h3>
                    <p class="text-sm" style="color: #718096;">Pre-pregnancy measurements and BMI status</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <!-- Height and Pre-pregnancy Weight -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-ruler-vertical text-gray-500 mr-2"></i>Tinggi (Height)
                    </label>
                    <div class="relative">
                        <input type="text"
                               id="height-input"
                               name="height"
                               value="{{ $getData('height') }}"
                               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., 160">
                        <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-weight text-gray-500 mr-2"></i>Berat Ibu Sebelum Hamil (Pre-pregnancy Weight)
                    </label>
                    <div class="relative">
                        <input type="text"
                               id="pre-pregnancy-weight-input"
                               name="pre_pregnancy_weight"
                               value="{{ $getData('pre_pregnancy_weight') }}"
                               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., 55">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg</span>
                    </div>
                </div>
            </div>

            <!-- BMI -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-calculator text-gray-500 mr-2"></i>Nilai BMI Sebelum Hamil (Pre-pregnancy BMI)
                    <button type="button"
                            id="calculate-bmi-btn"
                            class="ml-2 px-3 py-1 text-xs font-semibold text-white rounded-lg transition-all hover:scale-105"
                            style="background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);">
                        <i class="fas fa-calculator mr-1"></i>Calculate BMI
                    </button>
                </label>
                <div class="relative w-full md:w-1/2">
                    <input type="text"
                           id="bmi-input"
                           name="bmi"
                           value="{{ $getData('bmi') }}"
                           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., 21.5"
                           readonly>
                    <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg/m²</span>
                </div>
                <p class="text-xs text-gray-600 mt-1">
                    <i class="fas fa-lightbulb text-yellow-500 mr-1"></i>BMI will be calculated automatically when you enter height and weight
                </p>
            </div>

            <!-- BMI Status -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-3">
                    <i class="fas fa-chart-line text-gray-500 mr-2"></i>Status BMI Sebelum Hamil (Pre-pregnancy BMI Status)
                </label>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-yellow-400 hover:bg-yellow-50 {{ $getData('bmi_status') === 'underweight' ? 'border-yellow-400 bg-yellow-50' : 'border-gray-300 bg-white' }}">
                        <input type="radio" name="bmi_status" value="underweight" class="form-radio text-yellow-500 mr-3"
                               {{ $getData('bmi_status') === 'underweight' ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-900 block">Kurang Berat Badan</span>
                            <span class="text-xs text-gray-600">Underweight</span>
                        </div>
                    </label>
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-green-400 hover:bg-green-50 {{ $getData('bmi_status') === 'normal' ? 'border-green-400 bg-green-50' : 'border-gray-300 bg-white' }}">
                        <input type="radio" name="bmi_status" value="normal" class="form-radio text-green-500 mr-3"
                               {{ $getData('bmi_status') === 'normal' ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-900 block">Normal</span>
                            <span class="text-xs text-gray-600">Normal weight</span>
                        </div>
                    </label>
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-orange-400 hover:bg-orange-50 {{ $getData('bmi_status') === 'overweight' ? 'border-orange-400 bg-orange-50' : 'border-gray-300 bg-white' }}">
                        <input type="radio" name="bmi_status" value="overweight" class="form-radio text-orange-500 mr-3"
                               {{ $getData('bmi_status') === 'overweight' ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-900 block">Lebih Berat Badan</span>
                            <span class="text-xs text-gray-600">Overweight</span>
                        </div>
                    </label>
                    <label class="relative flex items-center p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-red-400 hover:bg-red-50 {{ $getData('bmi_status') === 'obese' ? 'border-red-400 bg-red-50' : 'border-gray-300 bg-white' }}">
                        <input type="radio" name="bmi_status" value="obese" class="form-radio text-red-500 mr-3"
                               {{ $getData('bmi_status') === 'obese' ? 'checked' : '' }}>
                        <div>
                            <span class="font-semibold text-gray-900 block">Obes</span>
                            <span class="text-xs text-gray-600">Obese</span>
                        </div>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Current Weight Measurement -->
    <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-weight-scale text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Current Weight Measurement</h3>
                    <p class="text-sm" style="color: #718096;">Record weight measurement for this appointment</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Visit Date -->
                <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 Lawatan (Visit 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-blue-500 focus:border-blue-500"
                           required>
                </div>

                <!-- Gestational Week -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-baby text-gray-500 mr-2"></i>Minggu Gestasi (Gestational Week)
                    </label>
                    <input type="text"
                           name="gestational_week"
                           value="{{ $getData('gestational_week') }}"
                           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., 24 weeks">
                </div>

                <!-- Current Weight -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-weight-hanging text-blue-600 mr-2"></i>Berat Badan (Current Weight)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="weight"
                               value="{{ $getData('weight') }}"
                               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., 62">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg</span>
                    </div>
                </div>

                <!-- Weight Gain -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-arrow-up text-green-600 mr-2"></i>Peningkatan Berat Badan (Weight Gain)
                    </label>
                    <div class="relative">
                        <input type="text"
                               name="weight_gain"
                               value="{{ $getData('weight_gain') }}"
                               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., 7">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Total weight gain from pre-pregnancy weight</p>
                </div>

                <!-- Weight Gain Rate -->
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-chart-line text-purple-600 mr-2"></i>Kadar Peningkatan Berat Badan (Weight Gain Rate)
                    </label>
                    <div class="relative w-full md:w-1/2">
                        <input type="text"
                               name="weight_gain_rate"
                               value="{{ $getData('weight_gain_rate') }}"
                               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., 0.5">
                        <span class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">kg/week</span>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">Average weight gain per week</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, #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;">Additional Notes</h3>
                    <p class="text-sm" style="color: #718096;">Any observations or recommendations</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 Tambahan (Additional 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-purple-500 focus:border-purple-500"
                      placeholder="Enter any additional notes, observations, or recommendations...">{{ $getData('additional_notes') }}</textarea>
        </div>
    </div>

    <!-- Reference Guidelines Table -->
    <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-book-medical text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold" style="color: #2D3748;">Nota:</h3>
                    <p class="text-sm font-semibold" style="color: #92400E;">JADUAL SARANAN PENINGKATAN BERAT BADAN IBU ANTENATAL (GWG)</p>
                </div>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full" style="border: 2px solid #000;">
                    <thead>
                        <tr style="background-color: #E5E7EB;">
                            <th class="px-4 py-4 text-center font-bold text-gray-900 border-2 border-black" style="vertical-align: middle;">
                                Kategori BMI<br>Sebelum Hamil<br><br>(kg/m²)
                            </th>
                            <th class="px-4 py-4 text-center font-bold text-gray-900 border-2 border-black" style="vertical-align: middle;">
                                Jumlah peningkatan<br>berat badan sepanjang<br>trimester pertama<br>(1 - 12 minggu<br>kehamilan)
                            </th>
                            <th class="px-4 py-4 text-center font-bold text-gray-900 border-2 border-black" style="vertical-align: middle;">
                                Purata & julat peningkatan<br>berat badan disarankan bagi<br>trimester kedua dan ketiga<br><br>(13 - 40 minggu kehamilan)
                            </th>
                            <th class="px-4 py-4 text-center font-bold text-gray-900 border-2 border-black" style="vertical-align: middle;">
                                Jumlah Peningkatan<br>Berat Badan<br>Sepanjang<br><br>Kehamilan
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Kurang Berat Badan -->
                        <tr style="background-color: #FEF3C7;">
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                Kurang Berat Badan<br><br>(&lt;18.5)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black" rowspan="4" style="vertical-align: middle;">
                                0.5 - 2.0 kg
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                0.5kg / minggu<br><br>(0.44 - 0.58kg)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                12.5 - 18.0kg
                            </td>
                        </tr>

                        <!-- Normal -->
                        <tr style="background-color: #D1FAE5;">
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                Normal<br><br>(18.5 - 24.9)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                0.4kg / minggu<br><br>(0.35 - 0.50kg)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                11.5 - 16.0kg
                            </td>
                        </tr>

                        <!-- Lebih Berat Badan -->
                        <tr style="background-color: #FED7AA;">
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                Lebih Berat Badan<br><br>(25.0 - 29.9)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                0.3kg / minggu<br><br>(0.23 - 0.33kg)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                7.0 - 11.5kg
                            </td>
                        </tr>

                        <!-- Obes -->
                        <tr style="background-color: #FECACA;">
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                Obes<br><br>(≥30.0)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                0.2 kg / minggu<br><br>(0.17 - 0.27kg)
                            </td>
                            <td class="px-4 py-4 text-center font-semibold text-gray-900 border-2 border-black">
                                5.0 - 9.0kg
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Reference Citation -->
            <div class="mt-4 p-4 bg-gray-50 rounded-lg border-l-4 border-amber-500">
                <p class="text-xs italic text-gray-700">
                    <i class="fas fa-book text-amber-600 mr-2"></i>
                    <strong>Sumber rujukan:</strong> Weight Gain During Pregnancy Re-Examining the Guidelines, Institute of Medicine (IOM), Amerika Syarikat, 2009
                </p>
            </div>
        </div>
    </div>
</x-health-record-test-layout>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const heightInput = document.getElementById('height-input');
    const weightInput = document.getElementById('pre-pregnancy-weight-input');
    const bmiInput = document.getElementById('bmi-input');
    const calculateBtn = document.getElementById('calculate-bmi-btn');
    const bmiStatusRadios = document.querySelectorAll('input[name="bmi_status"]');

    // Function to calculate BMI
    function calculateBMI() {
        const height = parseFloat(heightInput.value);
        const weight = parseFloat(weightInput.value);

        if (height && weight && height > 0 && weight > 0) {
            // Convert height from cm to meters
            const heightInMeters = height / 100;

            // Calculate BMI: weight (kg) / height² (m²)
            const bmi = weight / (heightInMeters * heightInMeters);

            // Round to 1 decimal place
            const bmiRounded = Math.round(bmi * 10) / 10;

            // Set BMI value
            bmiInput.value = bmiRounded;

            // Auto-select BMI status based on value
            autoSelectBMIStatus(bmiRounded);

            // Visual feedback
            bmiInput.classList.add('bg-green-50', 'border-green-500');
            setTimeout(() => {
                bmiInput.classList.remove('bg-green-50', 'border-green-500');
            }, 1000);
        }
    }

    // Function to auto-select BMI status
    function autoSelectBMIStatus(bmi) {
        let status = '';

        if (bmi < 18.5) {
            status = 'underweight';
        } else if (bmi >= 18.5 && bmi < 25) {
            status = 'normal';
        } else if (bmi >= 25 && bmi < 30) {
            status = 'overweight';
        } else if (bmi >= 30) {
            status = 'obese';
        }

        // Select the appropriate radio button
        bmiStatusRadios.forEach(radio => {
            if (radio.value === status) {
                radio.checked = true;
                // Trigger visual update
                radio.closest('label').click();
            }
        });
    }

    // Calculate BMI when height or weight changes
    heightInput.addEventListener('input', calculateBMI);
    weightInput.addEventListener('input', calculateBMI);

    // Calculate BMI when button is clicked
    calculateBtn.addEventListener('click', calculateBMI);

    // Calculate BMI on page load if values exist
    if (heightInput.value && weightInput.value) {
        calculateBMI();
    }
});
</script>