@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, #E0F2FE 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, #0EA5E9 0%, #0284C7 100%);">
                        <i class="fas fa-stethoscope text-white text-xl"></i>
                    </div>
                    <div>
                        <h2 class="text-2xl font-bold" style="color: #2D3748;">Medical Checkup (RME)</h2>
                        <p class="text-sm" style="color: #718096;">Routine Medical Examination</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if($testResult)
        <!-- Basic 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, #E0F2FE 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, #0EA5E9 0%, #0284C7 100%);">
                        <i class="fas fa-ruler-vertical text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Basic Information</h3>
                        <p class="text-sm" style="color: #718096;">Height and BMI measurements</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-arrows-alt-v text-blue-500 mr-2"></i>Ukuran tinggi (cm)
                        </label>
                        <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                            {{ $getData('height') ?: 'Not recorded' }}
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-weight text-blue-500 mr-2"></i>BMI semasa booking
                        </label>
                        <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                            {{ $getData('bmi') ?: 'Not recorded' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RME 1 Section -->
        <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;">PEMERIKSAAN RUTIN KESIHATAN (RME 1)</h3>
                        <p class="text-sm" style="color: #718096;">Routine health examination</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar text-blue-500 mr-2"></i>Tarikh
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                        {{ $getData('rme1_date') ? \Carbon\Carbon::parse($getData('rme1_date'))->format('d/m/Y') : 'Not recorded' }}
                    </div>
                </div>

                <!-- General Examination -->
                <div class="mb-6">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-user-md text-blue-500 mr-2"></i>General Examination
                    </h4>
                    <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">Pink Pallor</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_pink_pallor') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Jaundice</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_jaundice') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">BP (mmHg)</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_bp') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Pulse (per min)</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_pulse') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Neck Swelling</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_neck_swelling') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Clubbing</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_clubbing') ?: 'Not recorded' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cardiovascular System -->
                <div class="mb-6">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-heart text-red-500 mr-2"></i>Cardiovascular System
                    </h4>
                    <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">JVP</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_jvp') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Apex Beat</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_apex_beat') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Heart Sounds</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_heart_sounds') ?: 'Not recorded' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Respiratory System -->
                <div class="mb-6">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-lungs text-blue-500 mr-2"></i>Respiratory System
                    </h4>
                    <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">Breast</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_breast') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Lungs</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_lungs') ?: 'Not recorded' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Abdominal Examination -->
                <div class="mb-6">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-procedures text-purple-500 mr-2"></i>Abdominal Examination
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Abdomen</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_abdomen') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">SFH (cm)</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_sfh') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">FHR (per min)</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_fhr') ?: 'Not recorded' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Lower Limbs -->
                <div class="mb-6">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-walking text-green-500 mr-2"></i>Lower Limbs
                    </h4>
                    <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">Oedema</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_oedema') ?: 'Not recorded' }}
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Calf Tenderness</label>
                            <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                                {{ $getData('rme1_calf_tenderness') ?: 'Not recorded' }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-notes-medical text-blue-500 mr-2"></i>Notes
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 min-h-[100px]">
                        {{ $getData('rme1_notes') ?: 'No notes recorded' }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Medical Officer 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, #E0F2FE 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, #0EA5E9 0%, #0284C7 100%);">
                        <i class="fas fa-user-md text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Medical Officer Information</h3>
                        <p class="text-sm" style="color: #718096;">Examining medical officer details</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-user text-blue-500 mr-2"></i>Medical Officer Name
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                        {{ $getData('medical_officer_name') ?: 'Not recorded' }}
                    </div>
                </div>

                @if($getData('medical_officer_signature'))
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-signature text-blue-500 mr-2"></i>Medical Officer Signature
                    </label>
                    <div class="border border-gray-300 rounded-lg p-4 bg-white">
                        <img src="{{ $getData('medical_officer_signature') }}" alt="Medical Officer Signature" class="max-w-full h-auto" style="max-height: 150px;">
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Dental Examination -->
        <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, #E0F2FE 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, #0EA5E9 0%, #0284C7 100%);">
                        <i class="fas fa-tooth text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold" style="color: #2D3748;">Dental Examination</h3>
                        <p class="text-sm" style="color: #718096;">Dental health assessment</p>
                    </div>
                </div>
            </div>

            <div class="p-6">
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar text-blue-500 mr-2"></i>Examination Date
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                        {{ $getData('dental_date') ? \Carbon\Carbon::parse($getData('dental_date'))->format('d/m/Y') : 'Not recorded' }}
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-notes-medical text-blue-500 mr-2"></i>Dental Notes
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900 min-h-[100px]">
                        {{ $getData('dental_notes') ?: 'No notes recorded' }}
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-user text-blue-500 mr-2"></i>Dental Officer Name
                    </label>
                    <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                        {{ $getData('dental_officer_name') ?: 'Not recorded' }}
                    </div>
                </div>

                @if($getData('dental_officer_signature'))
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-signature text-blue-500 mr-2"></i>Dental Officer Signature
                    </label>
                    <div class="border border-gray-300 rounded-lg p-4 bg-white">
                        <img src="{{ $getData('dental_officer_signature') }}" alt="Dental Officer Signature" class="max-w-full h-auto" style="max-height: 150px;">
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Nurse Information -->
        @if($testResult->performedByNurse || $testResult->signature_data)
        <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, #E0F2FE 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, #0EA5E9 0%, #0284C7 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 mb-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-user text-blue-500 mr-2"></i>Nurse Name
                        </label>
                        <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                            {{ $testResult->performedByNurse->name ?? 'N/A' }}
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-calendar text-blue-500 mr-2"></i>Date Recorded
                        </label>
                        <div class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg text-gray-900">
                            {{ $testResult->performed_at ? $testResult->performed_at->format('d/m/Y H:i') : 'N/A' }}
                        </div>
                    </div>
                </div>

                @if($testResult->signature_data)
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-signature text-blue-500 mr-2"></i>Nurse Signature
                    </label>
                    <div class="border border-gray-300 rounded-lg p-4 bg-white">
                        <img src="{{ $testResult->signature_data }}" alt="Nurse Signature" class="max-w-full h-auto" style="max-height: 150px;">
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Action Buttons -->
        <div class="bg-white rounded-lg shadow-md p-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-stethoscope text-gray-400 text-3xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-2">No Medical Checkup 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