@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

@extends('layouts.mother')

@section('content')
<style>
    body {
        background-color: #FBF9ED;
    }
</style>

<div class="container mx-auto px-4 py-8" style="background-color: #FBF9ED;">
    <!-- 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, #FEF3C7 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, #F59E0B 0%, #D97706 100%);">
                        <i class="fas fa-tint text-white text-xl"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold" style="color: #2D3748;">Blood Sugar Monitoring</h2>
                        <p class="text-sm" style="color: #718096;">Pemantauan Paras Gula Dalam Darah</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($testResult)
        <!-- 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>
                    <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                        {{ $getData('date') ? \Carbon\Carbon::parse($getData('date'))->format('d/m/Y') : 'Not recorded' }}
                    </div>
                </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;">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="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $getData('breakfast') ?: 'Not recorded' }}
                            @if($getData('breakfast'))
                                <span class="text-gray-500 text-sm ml-2">mmol/L</span>
                            @endif
                        </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="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $getData('lunch') ?: 'Not recorded' }}
                            @if($getData('lunch'))
                                <span class="text-gray-500 text-sm ml-2">mmol/L</span>
                            @endif
                        </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="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $getData('dinner') ?: 'Not recorded' }}
                            @if($getData('dinner'))
                                <span class="text-gray-500 text-sm ml-2">mmol/L</span>
                            @endif
                        </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="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $getData('pre_bed') ?: 'Not recorded' }}
                            @if($getData('pre_bed'))
                                <span class="text-gray-500 text-sm ml-2">mmol/L</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notes -->
        @if($getData('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>
                <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 whitespace-pre-wrap">{{ $getData('notes') }}</div>
            </div>
        </div>
        @endif

        <!-- Nurse Information -->
        @if($testResult->performed_by_nurse_id)
        <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-user-nurse text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Nurse Information</h3>
                        <p class="text-sm" style="color: #718096;">Recorded by</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-user text-gray-500 mr-2"></i>Nurse Name
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $testResult->performedByNurse->name ?? 'N/A' }}
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-clock text-gray-500 mr-2"></i>Recorded At
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $testResult->performed_at ? \Carbon\Carbon::parse($testResult->performed_at)->format('d/m/Y H:i') : 'N/A' }}
                        </div>
                    </div>
                </div>

                @if($testResult->signature_data)
                <div class="mt-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-signature text-gray-500 mr-2"></i>Digital Signature
                    </label>
                    <div class="border-2 border-gray-300 rounded-lg p-4 bg-gray-50 inline-block">
                        <img src="{{ $testResult->signature_data }}" alt="Nurse Signature" class="max-w-xs">
                    </div>
                </div>
                @endif
            </div>
        </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>
        
    @else
        <!-- No Data -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden p-12 text-center">
            <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
                <i class="fas fa-tint text-gray-400 text-3xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">No Blood Sugar Monitoring Data</h3>
            <p class="text-gray-600 mb-6">This test has not been recorded yet.</p>
            <a href="{{ route('mother.health-records.show', $record->id) }}"
               class="inline-block 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 Record
            </a>
        </div>
    @endif
</div>
@endsection