@extends('layouts.nurse')

@section('content')
@php
    $getData = function($key, $default = '') use ($testResult) {
        if (!$testResult || !$testResult->test_data) return $default;
        return data_get($testResult->test_data, $key, $default);
    };
    $isReadOnly = $isReadOnly ?? false;
    $disabledAttr = $isReadOnly ? 'disabled' : '';
@endphp

<style>
    body {
        background-color: #FBF9ED;
    }
</style>

<div class="container mx-auto px-4 py-8" style="background-color: #FBF9ED;">
    @include('nurse.health-records.tests.partials.readonly-handler')

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

    <form id="medical-checkup-form"
          action="{{ route('nurse.health-records.test-store', ['record' => $record->id, 'test' => 'medical_checkup']) }}" 
          method="POST">
        @csrf
        
        <!-- Hidden fields for save mode control -->
        <input type="hidden" id="save-mode" name="save_mode" value="">
        <input type="hidden" id="next-test" name="next_test" value="">

        <!-- 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>
                    <input type="text"
                           name="height"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ $getData('height') }}"
                           placeholder="e.g., 160"
                           {{ $disabledAttr }}>
                </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>
                    <input type="text"
                           name="bmi"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ $getData('bmi') }}"
                           placeholder="e.g., 22.5">
                </div>
            </div>
        </div>
    </div>

            <!-- RME 1 Section -->
        <div class="modern-card">
            <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>
                    <input type="date"
                           name="rme1_date"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           value="{{ $getData('rme1_date') }}">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- General / Neck / CVS Column -->
                    <div class="space-y-4">
                        <h4 class="font-bold text-gray-900 mb-4 pb-2 border-b-2 border-blue-200">
                            <i class="fas fa-user-md text-blue-500 mr-2"></i>General / Neck
                        </h4>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Pink/ Pallor</label>
                            <input type="text"
                                   name="rme1_pink_pallor"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_pink_pallor') }}">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Jaundice</label>
                            <input type="text"
                                   name="rme1_jaundice"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_jaundice') }}">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">BP (mmHg)</label>
                            <input type="text"
                                   name="rme1_bp"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_bp') }}"
                                   placeholder="e.g., 120/80">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Pulse / Rhythm</label>
                            <input type="text"
                                   name="rme1_pulse"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_pulse') }}">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Neck Swelling</label>
                            <input type="text"
                                   name="rme1_neck_swelling"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_neck_swelling') }}">
                        </div>

                        <!-- CVS Section -->
                        <h5 class="font-bold text-gray-800 mt-6 mb-3 pt-4 border-t border-gray-200">
                            <i class="fas fa-heart text-blue-500 mr-2"></i>CVS
                        </h5>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Clubbing</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_clubbing') === 'Ada' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_clubbing" value="Ada" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_clubbing') === 'Ada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Ada</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_clubbing') === 'Tiada' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                    <input type="radio" name="rme1_clubbing" value="Tiada" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_clubbing') === 'Tiada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Tiada</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">JVP</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_jvp') === 'Raised' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_jvp" value="Raised" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_jvp') === 'Raised' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Raised</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_jvp') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                    <input type="radio" name="rme1_jvp" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_jvp') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Apex Beat</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_apex_beat') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_apex_beat" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_apex_beat') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_apex_beat') === 'Displaced' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_apex_beat" value="Displaced" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_apex_beat') === 'Displaced' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Displaced</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Heart Sounds</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_heart_sounds') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_heart_sounds" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_heart_sounds') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_heart_sounds') === 'Abnormal' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_heart_sounds" value="Abnormal" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_heart_sounds') === 'Abnormal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Abnormal</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Breast, Lungs, Abdomen, SFH, FHR, Lower Limbs Column -->
                    <div class="space-y-4">
                        <h4 class="font-bold text-gray-900 mb-4 pb-2 border-b-2 border-blue-200">
                            <i class="fas fa-lungs text-blue-500 mr-2"></i>Breast, Lungs, Abdomen, SFH, FHR, Lower Limbs
                        </h4>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Breast</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_breast') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_breast" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_breast') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_breast') === 'Abnormal' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_breast" value="Abnormal" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_breast') === 'Abnormal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Abnormal</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Lungs</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_lungs') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_lungs" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_lungs') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_lungs') === 'Abnormal' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_lungs" value="Abnormal" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_lungs') === 'Abnormal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Abnormal</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Abdomen</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_abdomen') === 'Normal' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_abdomen" value="Normal" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_abdomen') === 'Normal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Normal</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_abdomen') === 'Abnormal' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_abdomen" value="Abnormal" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_abdomen') === 'Abnormal' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Abnormal</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">SFH</label>
                            <input type="text"
                                   name="rme1_sfh"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_sfh') }}">
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">FHR</label>
                            <input type="text"
                                   name="rme1_fhr"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                   value="{{ $getData('rme1_fhr') }}">
                        </div>

                        <h5 class="font-bold text-gray-800 mt-6 mb-3 pt-4 border-t border-gray-200">
                            <i class="fas fa-shoe-prints text-blue-500 mr-2"></i>Lower Limbs
                        </h5>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Oedema</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_oedema') === 'Ada' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_oedema" value="Ada" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_oedema') === 'Ada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Ada</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_oedema') === 'Tiada' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                    <input type="radio" name="rme1_oedema" value="Tiada" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_oedema') === 'Tiada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Tiada</span>
                                </label>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Calf tenderness</label>
                            <div class="flex gap-3">
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_calf_tenderness') === 'Ada' ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-red-300' }}">
                                    <input type="radio" name="rme1_calf_tenderness" value="Ada" class="w-4 h-4 text-red-600 mr-2" {{ $getData('rme1_calf_tenderness') === 'Ada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Ada</span>
                                </label>
                                <label class="flex items-center px-4 py-2 rounded-lg border-2 cursor-pointer transition-all {{ $getData('rme1_calf_tenderness') === 'Tiada' ? 'border-green-500 bg-green-50' : 'border-gray-300 hover:border-green-300' }}">
                                    <input type="radio" name="rme1_calf_tenderness" value="Tiada" class="w-4 h-4 text-green-600 mr-2" {{ $getData('rme1_calf_tenderness') === 'Tiada' ? 'checked' : '' }}>
                                    <span class="text-sm font-medium">Tiada</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-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>Catatan
                    </label>
                    <textarea name="rme1_notes"
                              rows="4"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="Catatan untuk RME 1...">{{ $getData('rme1_notes') }}</textarea>
                </div>

                <!-- Pegawai Perubatan Signature -->
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-user-doctor text-blue-600 mr-2"></i>Pegawai Perubatan
                    </h4>

                    <div class="mb-4">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-id-badge text-gray-500 mr-2"></i>Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               name="medical_officer_name"
                               value="{{ $getData('medical_officer_name') }}"
                               required
                               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="Enter medical officer name">
                    </div>

                    <div>
                        <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 <span class="text-red-500">*</span>
                        </label>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 bg-gray-50">
                            <canvas id="medical-signature-pad"
                                    class="border border-gray-300 rounded bg-white cursor-crosshair"
                                    width="400"
                                    height="150"
                                    style="width: 100%; max-width: 400px; height: 150px;">
                            </canvas>
                            <input type="hidden" name="medical_officer_signature" id="medical-signature-data" required>
                            <div class="flex justify-between items-center mt-3">
                                <button type="button"
                                        onclick="clearMedicalSignature()"
                                        class="text-sm text-red-600 hover:text-red-700 font-medium">
                                    <i class="fas fa-eraser mr-1"></i>Clear Signature
                                </button>
                                <p class="text-xs text-red-500 font-medium">Required - Sign above</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dental Examination 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, #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;">PEMERIKSAAN GIGI</h3>
                    <p class="text-sm" style="color: #718096;">Dental 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>
                <input type="date"
                       name="dental_date"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       value="{{ $getData('dental_date') }}">
            </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>Catatan Pemeriksaan Gigi
                </label>
                <textarea name="dental_notes"
                          rows="4"
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Catatan untuk pemeriksaan gigi...">{{ $getData('dental_notes') }}</textarea>
            </div>

            <!-- Pegawai Pergigian Signature -->
            <div class="pt-6 border-t border-gray-200">
                <h4 class="font-bold text-gray-900 mb-4 flex items-center">
                    <i class="fas fa-user-nurse text-green-600 mr-2"></i>Pegawai Pergigian
                </h4>

                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-id-badge text-gray-500 mr-2"></i>Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="dental_officer_name"
                           value="{{ $getData('dental_officer_name') }}"
                           required
                           class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                           placeholder="Enter dental officer name">
                </div>

                <div>
                    <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 <span class="text-red-500">*</span>
                    </label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 bg-gray-50">
                        <canvas id="dental-signature-pad"
                                class="border border-gray-300 rounded bg-white cursor-crosshair"
                                width="400"
                                height="150"
                                style="width: 100%; max-width: 400px; height: 150px;">
                        </canvas>
                        <input type="hidden" name="dental_officer_signature" id="dental-signature-data" required>
                        <div class="flex justify-between items-center mt-3">
                            <button type="button"
                                    onclick="clearDentalSignature()"
                                    class="text-sm text-red-600 hover:text-red-700 font-medium">
                                <i class="fas fa-eraser mr-1"></i>Clear Signature
                            </button>
                            <p class="text-xs text-red-500 font-medium">Required - Sign above</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex justify-between items-center">
                <a href="{{ route('nurse.health-records.show', $record->id) }}"
                   id="back-button"
                   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 Record
                </a>

                @if(!$isReadOnly)
                <div class="flex items-center gap-3">
                    <!-- Save as Draft Button -->
                    <button type="button"
                            onclick="saveMedicalCheckupDraft()"
                            class="px-6 py-3 bg-yellow-500 text-white rounded-lg font-semibold hover:bg-yellow-600 transition">
                        <i class="fas fa-save mr-2"></i>Save as Draft
                    </button>

                    <!-- Next Test Button -->
                    @php
                        // Define all available test types in order
                        $allTestTypes = [
                            'immunization',
                            'antenatal_blood',
                            'medical_checkup',
                            'ogtt',
                            'blood_sugar_monitoring',
                            'blood_pressure_monitoring',
                            'pre_eclampsia',
                            'weight_monitoring',
                            'ultrasound_examination',
                            'antenatal_color_code',
                            'vte_risk_assessment',
                            'antenatal_visits'
                        ];
                        
                        $currentTestIndex = array_search($test, $allTestTypes);
                        $nextTestKey = ($currentTestIndex !== false && isset($allTestTypes[$currentTestIndex + 1])) 
                            ? $allTestTypes[$currentTestIndex + 1] 
                            : null;
                    @endphp

                    @if($nextTestKey)
                        <button type="button"
                                onclick="saveMedicalCheckupAndNextTest('{{ $nextTestKey }}')"
                                class="px-6 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition">
                            <i class="fas fa-arrow-right mr-2"></i>Next Test
                        </button>
                    @endif

                    <!-- Save & Complete Record Button -->
                    <button type="button"
                            onclick="saveMedicalCheckupAndComplete()"
                            class="px-6 py-3 text-white rounded-lg font-semibold transition-all hover:scale-105 shadow-md"
                            style="background: linear-gradient(135deg, #10B981 0%, #059669 100%);">
                        <i class="fas fa-check-circle mr-2"></i>Save & Complete Record
                    </button>
                </div>
                @else
                <div class="px-6 py-3 bg-blue-100 text-blue-800 rounded-lg font-semibold">
                    <i class="fas fa-lock mr-2"></i>Record is {{ ucfirst($record->status) }} - Read Only
                </div>
                @endif
            </div>
        </div>
    </form>
</div>

<script>
    @if($isReadOnly)
    // READ-ONLY MODE: Disable all form interactions
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('medical-checkup-form');
        if (form) {
            // Prevent form submission
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                alert('This record is {{ $record->status }}. You cannot make changes.');
                return false;
            });
        }
    });
    @endif

    function saveMedicalCheckupDraft() {
        @if($isReadOnly)
        alert('This record is {{ $record->status }} and cannot be edited.');
        return false;
        @endif
        
        console.log('=== MEDICAL CHECKUP SAVE DRAFT CLICKED ===');
        const form = document.getElementById('medical-checkup-form');
        if (!form) {
            console.error('Form not found!');
            alert('Error: Form not found!');
            return false;
        }

        console.log('Form action:', form.action);

        // Save both signatures (optional for draft)
        if (typeof saveMedicalSignature === 'function') {
            saveMedicalSignature();
        }
        if (typeof saveDentalSignature === 'function') {
            saveDentalSignature();
        }

        // Set save mode to draft
        document.getElementById('save-mode').value = 'draft';
        document.getElementById('next-test').value = '';
        
        console.log('save_mode set to: draft');
        console.log('Submitting form...');
        
        // Submit the form
        form.submit();
        return false;
    }

    function saveMedicalCheckupAndNextTest(nextTest) {
        @if($isReadOnly)
        alert('This record is {{ $record->status }} and cannot be edited.');
        return false;
        @endif
        
        console.log('=== MEDICAL CHECKUP SAVE AND NEXT TEST CLICKED ===');
        console.log('Next test:', nextTest);
        
        const form = document.getElementById('medical-checkup-form');
        if (!form) {
            console.error('Form not found!');
            alert('Error: Form not found!');
            return false;
        }

        console.log('Form action:', form.action);

        // Save both signatures (optional for next test)
        if (typeof saveMedicalSignature === 'function') {
            saveMedicalSignature();
        }
        if (typeof saveDentalSignature === 'function') {
            saveDentalSignature();
        }

        // Set save mode to draft and next test
        document.getElementById('save-mode').value = 'draft';
        document.getElementById('next-test').value = nextTest;
        
        console.log('save_mode set to: draft');
        console.log('next_test set to:', nextTest);
        console.log('Submitting form...');
        
        // Submit the form
        form.submit();
        return false;
    }

    function saveMedicalCheckupAndComplete() {
        @if($isReadOnly)
        alert('This record is {{ $record->status }} and cannot be edited.');
        return false;
        @endif
        
        console.log('=== MEDICAL CHECKUP SAVE AND COMPLETE CLICKED ===');
        
        const form = document.getElementById('medical-checkup-form');
        if (!form) {
            console.error('Form not found!');
            alert('Error: Form not found!');
            return false;
        }

        console.log('Form action:', form.action);

        // Save both signatures (REQUIRED for complete)
        if (typeof saveMedicalSignature === 'function') {
            saveMedicalSignature();
        }
        if (typeof saveDentalSignature === 'function') {
            saveDentalSignature();
        }

        // Check both signatures are present
        const medicalSignatureData = document.getElementById('medical-signature-data');
        const dentalSignatureData = document.getElementById('dental-signature-data');

        if (!medicalSignatureData || !medicalSignatureData.value || medicalSignatureData.value.trim() === '') {
            alert('Please provide the Medical Officer digital signature before completing the record.');
            return false;
        }

        if (!dentalSignatureData || !dentalSignatureData.value || dentalSignatureData.value.trim() === '') {
            alert('Please provide the Dental Officer digital signature before completing the record.');
            return false;
        }

        // Set save mode to complete
        document.getElementById('save-mode').value = 'complete';
        document.getElementById('next-test').value = '';
        
        console.log('save_mode set to: complete');
        console.log('Submitting form...');
        
        // Submit the form
        form.submit();
        return false;
    }

    // Check for unsaved changes
    let formChanged = false;
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('input', function() {
                formChanged = true;
            });

            form.addEventListener('change', function() {
                formChanged = true;
            });

            const backButton = document.getElementById('back-button');
            if (backButton) {
                backButton.addEventListener('click', function(e) {
                    if (formChanged) {
                        if (!confirm('You have unsaved changes. Do you want to leave without saving?\n\nClick "Cancel" to stay, or "OK" to leave without saving.')) {
                            e.preventDefault();
                        }
                    }
                });
            }
        }
    });

    // Medical Officer Signature Pad Implementation
    const medicalCanvas = document.getElementById('medical-signature-pad');
    const medicalCtx = medicalCanvas.getContext('2d');
    const medicalSignatureData = document.getElementById('medical-signature-data');
    let medicalIsDrawing = false;
    let medicalLastX = 0;
    let medicalLastY = 0;

    // Load existing medical signature if available
    const existingMedicalSignature = '{{ $getData("medical_officer_signature") }}';
    if (existingMedicalSignature) {
        const img = new Image();
        img.onload = function() {
            medicalCtx.drawImage(img, 0, 0);
        };
        img.src = existingMedicalSignature;
    }

    medicalCanvas.addEventListener('mousedown', startMedicalDrawing);
    medicalCanvas.addEventListener('mousemove', drawMedical);
    medicalCanvas.addEventListener('mouseup', stopMedicalDrawing);
    medicalCanvas.addEventListener('mouseout', stopMedicalDrawing);
    medicalCanvas.addEventListener('touchstart', handleMedicalTouchStart);
    medicalCanvas.addEventListener('touchmove', handleMedicalTouchMove);
    medicalCanvas.addEventListener('touchend', stopMedicalDrawing);

    function startMedicalDrawing(e) {
        medicalIsDrawing = true;
        const rect = medicalCanvas.getBoundingClientRect();
        medicalLastX = e.clientX - rect.left;
        medicalLastY = e.clientY - rect.top;
    }

    function drawMedical(e) {
        if (!medicalIsDrawing) return;
        const rect = medicalCanvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        medicalCtx.beginPath();
        medicalCtx.moveTo(medicalLastX, medicalLastY);
        medicalCtx.lineTo(x, y);
        medicalCtx.strokeStyle = '#000';
        medicalCtx.lineWidth = 2;
        medicalCtx.lineCap = 'round';
        medicalCtx.stroke();
        medicalLastX = x;
        medicalLastY = y;
        medicalSignatureData.value = medicalCanvas.toDataURL();
    }

    function stopMedicalDrawing() {
        medicalIsDrawing = false;
    }

    function handleMedicalTouchStart(e) {
        e.preventDefault();
        const touch = e.touches[0];
        const rect = medicalCanvas.getBoundingClientRect();
        medicalLastX = touch.clientX - rect.left;
        medicalLastY = touch.clientY - rect.top;
        medicalIsDrawing = true;
    }

    function handleMedicalTouchMove(e) {
        if (!medicalIsDrawing) return;
        e.preventDefault();
        const touch = e.touches[0];
        const rect = medicalCanvas.getBoundingClientRect();
        const x = touch.clientX - rect.left;
        const y = touch.clientY - rect.top;
        medicalCtx.beginPath();
        medicalCtx.moveTo(medicalLastX, medicalLastY);
        medicalCtx.lineTo(x, y);
        medicalCtx.strokeStyle = '#000';
        medicalCtx.lineWidth = 2;
        medicalCtx.lineCap = 'round';
        medicalCtx.stroke();
        medicalLastX = x;
        medicalLastY = y;
        medicalSignatureData.value = medicalCanvas.toDataURL();
    }

    function clearMedicalSignature() {
        medicalCtx.clearRect(0, 0, medicalCanvas.width, medicalCanvas.height);
        medicalSignatureData.value = '';
    }

    // Dental Officer Signature Pad Implementation
    const dentalCanvas = document.getElementById('dental-signature-pad');
    const dentalCtx = dentalCanvas.getContext('2d');
    const dentalSignatureData = document.getElementById('dental-signature-data');
    let dentalIsDrawing = false;
    let dentalLastX = 0;
    let dentalLastY = 0;

    // Load existing dental signature if available
    const existingDentalSignature = '{{ $getData("dental_officer_signature") }}';
    if (existingDentalSignature) {
        const img = new Image();
        img.onload = function() {
            dentalCtx.drawImage(img, 0, 0);
        };
        img.src = existingDentalSignature;
    }

    dentalCanvas.addEventListener('mousedown', startDentalDrawing);
    dentalCanvas.addEventListener('mousemove', drawDental);
    dentalCanvas.addEventListener('mouseup', stopDentalDrawing);
    dentalCanvas.addEventListener('mouseout', stopDentalDrawing);
    dentalCanvas.addEventListener('touchstart', handleDentalTouchStart);
    dentalCanvas.addEventListener('touchmove', handleDentalTouchMove);
    dentalCanvas.addEventListener('touchend', stopDentalDrawing);

    function startDentalDrawing(e) {
        dentalIsDrawing = true;
        const rect = dentalCanvas.getBoundingClientRect();
        dentalLastX = e.clientX - rect.left;
        dentalLastY = e.clientY - rect.top;
    }

    function drawDental(e) {
        if (!dentalIsDrawing) return;
        const rect = dentalCanvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        dentalCtx.beginPath();
        dentalCtx.moveTo(dentalLastX, dentalLastY);
        dentalCtx.lineTo(x, y);
        dentalCtx.strokeStyle = '#000';
        dentalCtx.lineWidth = 2;
        dentalCtx.lineCap = 'round';
        dentalCtx.stroke();
        dentalLastX = x;
        dentalLastY = y;
        dentalSignatureData.value = dentalCanvas.toDataURL();
    }

    function stopDentalDrawing() {
        dentalIsDrawing = false;
    }

    function handleDentalTouchStart(e) {
        e.preventDefault();
        const touch = e.touches[0];
        const rect = dentalCanvas.getBoundingClientRect();
        dentalLastX = touch.clientX - rect.left;
        dentalLastY = touch.clientY - rect.top;
        dentalIsDrawing = true;
    }

    function handleDentalTouchMove(e) {
        if (!dentalIsDrawing) return;
        e.preventDefault();
        const touch = e.touches[0];
        const rect = dentalCanvas.getBoundingClientRect();
        const x = touch.clientX - rect.left;
        const y = touch.clientY - rect.top;
        dentalCtx.beginPath();
        dentalCtx.moveTo(dentalLastX, dentalLastY);
        dentalCtx.lineTo(x, y);
        dentalCtx.strokeStyle = '#000';
        dentalCtx.lineWidth = 2;
        dentalCtx.lineCap = 'round';
        dentalCtx.stroke();
        dentalLastX = x;
        dentalLastY = y;
        dentalSignatureData.value = dentalCanvas.toDataURL();
    }

    function clearDentalSignature() {
        dentalCtx.clearRect(0, 0, dentalCanvas.width, dentalCanvas.height);
        dentalSignatureData.value = '';
    }

    // Disable signature pads if read-only mode
    @if($isReadOnly)
    function disableSignaturePads() {
        // Disable medical signature pad
        if (medicalCanvas) {
            medicalCanvas.style.pointerEvents = 'none';
            medicalCanvas.style.opacity = '0.6';
            medicalCanvas.style.cursor = 'not-allowed';
            medicalCanvas.style.backgroundColor = '#f3f4f6';
        }

        // Disable dental signature pad
        if (dentalCanvas) {
            dentalCanvas.style.pointerEvents = 'none';
            dentalCanvas.style.opacity = '0.6';
            dentalCanvas.style.cursor = 'not-allowed';
            dentalCanvas.style.backgroundColor = '#f3f4f6';
        }

        // Hide clear buttons
        document.querySelectorAll('button[onclick*="clearSignature"]').forEach(btn => {
            btn.style.display = 'none';
        });
    }

    // Call disable function immediately
    disableSignaturePads();
    @endif
</script>

@endsection