@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 '-';
        }
    };
    
    // Helper function to format time
    $formatTime = function($time) {
        if (!$time) return '-';
        try {
            return \Carbon\Carbon::parse($time)->format('h:i A');
        } catch (\Exception $e) {
            return $time;
        }
    };
    
    // Helper function to check if BP is high
    $isHighBP = function($bp) {
        if (!$bp) return false;
        // Extract systolic (first number)
        if (preg_match('/(\d+)/', $bp, $matches)) {
            $systolic = intval($matches[1]);
            return $systolic >= 140;
        }
        return false;
    };
@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, #FEE2E2 0%, #FEFBFC 100%);">
            <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, #EF4444 0%, #DC2626 100%);">
                    <i class="fas fa-heartbeat text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">Blood Pressure Monitoring</h2>
                    <p class="text-sm" style="color: #718096;">Pemantauan Tekanan Darah & Pre-Eclampsia</p>
                </div>
            </div>
        </div>
    </div>

    @if($testResult)
    <!-- Important Notes -->
    <div class="bg-gradient-to-r from-red-50 to-pink-50 border-l-4 border-red-500 rounded-lg p-6 mb-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-red-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-red-600 mr-2"></i>Nota Penting
                </h4>
                <div class="text-sm text-gray-800 space-y-1">
                    <p><strong>Untuk:</strong> Ibu yang mempunyai indikasi</p>
                    <p><strong>*</strong> Jika tempoh kehamilan ≥ 22 minggu</p>
                </div>
            </div>
        </div>
    </div>

    @php
        $date = $getData('date');
        $time = $getData('time');
        $bp = $getData('blood_pressure');
        $fhr = $getData('fetal_heart_rate');
        $protein = $getData('urine_protein');
        $symptoms = $getData('symptoms');
        $hasData = $date || $bp || $fhr || $protein || $symptoms;
    @endphp

    @if($hasData)
        <!-- Date and Time -->
        <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, #FEE2E2 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, #EF4444 0%, #DC2626 100%);">
                        <i class="fas fa-calendar-clock text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Date & Time</h3>
                        <p class="text-sm" style="color: #718096;">When was the blood pressure measured?</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-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">
                            {{ $formatDate($date) }}
                        </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>Masa
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            {{ $formatTime($time) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Blood Pressure & Vital Signs -->
        <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-heartbeat text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Blood Pressure & Vital Signs</h3>
                        <p class="text-sm" style="color: #718096;">Your blood pressure and related measurements</p>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Blood Pressure -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-heart-pulse text-red-600 mr-2"></i>Tekanan Darah (Blood Pressure)
                        </label>
                        <div class="px-4 py-3 border border-gray-300 rounded-lg {{ $isHighBP($bp) ? 'bg-red-50 border-red-300' : 'bg-green-50 border-green-300' }}">
                            @if($bp)
                                <span class="font-semibold {{ $isHighBP($bp) ? 'text-red-700' : 'text-green-700' }}">
                                    {{ $bp }} mmHg
                                </span>
                                @if($isHighBP($bp))
                                    <span class="ml-2 text-xs text-red-600">⚠️ High</span>
                                @else
                                    <span class="ml-2 text-xs text-green-600">✓ Normal</span>
                                @endif
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: &lt;140/90 mmHg</p>
                    </div>

                    <!-- Fetal Heart Rate -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-baby text-pink-600 mr-2"></i>Denyutan Jantung Janin* (Fetal Heart Rate)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($fhr)
                                <span class="font-semibold">{{ $fhr }} bpm</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: 110-160 bpm</p>
                    </div>

                    <!-- Urine Protein -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-vial text-yellow-600 mr-2"></i>Urin Protein (Urine Protein)
                        </label>
                        <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700">
                            @if($protein)
                                <span class="font-semibold">{{ $protein }}</span>
                            @else
                                <span class="text-gray-500">Not recorded</span>
                            @endif
                        </div>
                        <p class="text-xs text-gray-600 mt-1">Normal: Negative or trace</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Symptoms -->
        <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;">Symptoms & Observations</h3>
                        <p class="text-sm" style="color: #718096;">Recorded symptoms or clinical 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-comment-medical text-gray-500 mr-2"></i>Simptom (Symptoms)
                </label>
                <div class="px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-700 min-h-[100px]">
                    @if($symptoms)
                        {{ $symptoms }}
                    @else
                        <span class="text-gray-500">No symptoms recorded</span>
                    @endif
                </div>
                <p class="text-xs text-gray-600 mt-1">
                    <strong>Common symptoms to watch for:</strong> Headache, blurred vision, epigastric pain, swelling (edema), nausea/vomiting
                </p>
            </div>
        </div>

        <!-- 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

        
    @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-heartbeat text-gray-400 text-3xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">No Blood Pressure 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
    @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>
</div>
@endsection