@props([
    'title' => 'Test Form',
    'subtitle' => '',
    'record' => null,
    'testResult' => null,
    'test' => '',
    'isReadOnly' => false,
])

@php
    // Get patient data from health record
    $expectantMother = $record->mother->expectantMother ?? null;
    $fullName = $expectantMother->mother_full_name ?? $record->mother->name ?? 'N/A';
    $icNumber = $expectantMother->ic_number ?? 'N/A';

    // Get CURRENT color code from expectant mother
    $colorCode = $expectantMother->current_color_code ?? $expectantMother->color_code ?? 'white';
    $colorCodeDisplay = ucfirst($colorCode);

    $badgeColors = [
        'red' => 'bg-red-100 text-red-700 border-red-200',
        'yellow' => 'bg-yellow-100 text-yellow-700 border-yellow-200',
        'green' => 'bg-green-100 text-green-700 border-green-200',
        'white' => 'bg-white border-gray-300 text-gray-700',
    ];
    $colorCodeClass = $badgeColors[$colorCode] ?? $badgeColors['white'];

    // Get existing test data if editing
    $testData = $testResult ? $testResult->test_data : [];
@endphp

@if(!$isReadOnly)
{{-- Nurse View: Use Nurse Layout --}}
@extends('layouts.nurse')

@section('content')

<style>
    body {
        background-color: #FBF9ED;
    }
    
    @if(in_array($record->status, ['completed', 'reviewed']))
    /* Read-only styles for completed/reviewed records */
    form input:not([type="hidden"]),
    form textarea,
    form select,
    form input[type="checkbox"],
    form input[type="radio"] {
        pointer-events: none !important;
        opacity: 0.6 !important;
        background-color: #f3f4f6 !important;
        cursor: not-allowed !important;
    }
    
    form button[type="submit"],
    form button:not(.back-button) {
        pointer-events: none !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
    }
    @endif
</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">
                <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-file-medical text-white text-xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold" style="color: #2D3748;">{{ $title }}</h2>
                    @if($subtitle)
                        <p class="text-sm" style="color: #718096;">{{ $subtitle }}</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Patient Information -->
        <div class="p-6 bg-gradient-to-r from-red-50 to-pink-50">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Patient Name</p>
                    <p class="text-base font-bold text-gray-900">{{ $fullName }}</p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">IC Number</p>
                    <p class="text-base font-bold text-gray-900">{{ $icNumber }}</p>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Color Code</p>
                    <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full border {{ $colorCodeClass }}">
                        {{ $colorCodeDisplay }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Warning for Completed Records -->
    @if(in_array($record->status, ['completed', 'reviewed']))
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-400 text-xl mr-3"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">
                        Record {{ ucfirst($record->status) }} - Read Only Mode
                    </h3>
                    <p class="mt-2 text-sm text-yellow-700">
                        You are viewing this test in <strong>read-only mode</strong>. Editing is disabled to maintain data integrity.
                    </p>
                </div>
            </div>
        </div>
    @endif

    <!-- Editable Form -->
    <form id="test-form"
          action="{{ route('nurse.health-records.test-store', ['record' => $record->id, 'test' => $test]) }}" 
          method="POST"
          @if(in_array($record->status, ['completed', 'reviewed'])) 
          onsubmit="event.preventDefault(); alert('This record is {{ ucfirst($record->status) }}. Editing is not allowed.'); return false;"
          data-readonly="true"
          @endif>
        @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="">

        <!-- Test Content -->
        {{ $slot }}

        <!-- Nurse Name and Signature Section -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="border-t-4 border-pink-500 pt-6">
                <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
                    <i class="fas fa-user-nurse text-pink-600 mr-3"></i>
                    Nurse Information & Signature
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Nurse Name -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-id-badge text-gray-500 mr-2"></i>
                            Nurse Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               name="nurse_name"
                               value="{{ old('nurse_name', $testResult->nurse_name ?? auth()->user()->name) }}"
                               required
                               class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg text-gray-700 font-medium focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter nurse name">
                        <p class="text-xs text-gray-500 mt-1">Any nurse can fill this test. Please enter your name.</p>
                    </div>

                    <!-- Signature -->
                    <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="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="signature_data" id="signature-data" required>
                            <div class="flex justify-between items-center mt-3">
                                <button type="button"
                                        onclick="clearSignature()"
                                        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>

        <script>
            // Signature Pad Implementation
            const canvas = document.getElementById('signature-pad');
            const ctx = canvas.getContext('2d');
            const signatureData = document.getElementById('signature-data');
            let isDrawing = false;
            let lastX = 0;
            let lastY = 0;

            // Check if record is completed/reviewed (read-only mode)
            const isReadOnly = {{ in_array($record->status, ['completed', 'reviewed']) ? 'true' : 'false' }};

            // Load existing signature if available
            const existingSignature = '{{ $testResult->signature_data ?? "" }}';
            if (existingSignature) {
                const img = new Image();
                img.onload = function() {
                    ctx.drawImage(img, 0, 0);
                };
                img.src = existingSignature;
            }

            // Disable signature pad for completed/reviewed records
            if (!isReadOnly) {
                canvas.addEventListener('mousedown', startDrawing);
                canvas.addEventListener('mousemove', draw);
                canvas.addEventListener('mouseup', stopDrawing);
                canvas.addEventListener('mouseout', stopDrawing);

                // Touch events for mobile
                canvas.addEventListener('touchstart', handleTouchStart);
                canvas.addEventListener('touchmove', handleTouchMove);
                canvas.addEventListener('touchend', stopDrawing);
            } else {
                // Make canvas non-interactive for read-only mode
                canvas.style.pointerEvents = 'none';
                canvas.style.opacity = '0.6';
            }

            function startDrawing(e) {
                if (isReadOnly) return;
                isDrawing = true;
                const rect = canvas.getBoundingClientRect();
                lastX = e.clientX - rect.left;
                lastY = e.clientY - rect.top;
            }

            function draw(e) {
                if (!isDrawing || isReadOnly) return;

                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
                ctx.stroke();

                lastX = x;
                lastY = y;

                // Save signature data
                signatureData.value = canvas.toDataURL();
            }

            function stopDrawing() {
                isDrawing = false;
            }

            function handleTouchStart(e) {
                if (isReadOnly) return;
                e.preventDefault();
                const touch = e.touches[0];
                const rect = canvas.getBoundingClientRect();
                lastX = touch.clientX - rect.left;
                lastY = touch.clientY - rect.top;
                isDrawing = true;
            }

            function handleTouchMove(e) {
                if (!isDrawing || isReadOnly) return;
                e.preventDefault();

                const touch = e.touches[0];
                const rect = canvas.getBoundingClientRect();
                const x = touch.clientX - rect.left;
                const y = touch.clientY - rect.top;

                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.strokeStyle = '#000';
                ctx.lineWidth = 2;
                ctx.lineCap = 'round';
                ctx.stroke();

                lastX = x;
                lastY = y;

                signatureData.value = canvas.toDataURL();
            }

            function clearSignature() {
                if (isReadOnly) {
                    alert('Cannot clear signature - record is {{ ucfirst($record->status) }}');
                    return;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                signatureData.value = '';
            }
        </script>

        <!-- Disable form inputs for completed/reviewed records -->
        @if(in_array($record->status, ['completed', 'reviewed']))
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Disable all form inputs including checkboxes and radio buttons
                const form = document.querySelector('form');
                if (form) {
                    // Disable ALL input types except hidden
                    const inputs = form.querySelectorAll('input:not([type="hidden"]), textarea, select, button[type="button"]');
                    inputs.forEach(input => {
                        input.disabled = true;
                        input.classList.add('bg-gray-100', 'cursor-not-allowed');
                        // Also make readonly for text inputs
                        if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
                            input.readOnly = true;
                        }
                    });
                    
                    // Disable all checkboxes and radio buttons specifically
                    const checkboxes = form.querySelectorAll('input[type="checkbox"], input[type="radio"]');
                    checkboxes.forEach(cb => {
                        cb.disabled = true;
                        cb.style.pointerEvents = 'none';
                    });
                    
                    // Disable all buttons except the back button
                    const buttons = form.querySelectorAll('button:not(.back-button)');
                    buttons.forEach(btn => {
                        btn.disabled = true;
                        btn.classList.add('opacity-50', 'cursor-not-allowed');
                    });
                    
                    // Prevent form submission completely
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        alert('This record is {{ ucfirst($record->status) }}. Editing is not allowed for data integrity.');
                        return false;
                    });
                    
                    // Make form itself readonly
                    form.setAttribute('onsubmit', 'return false;');
                }
            });
        </script>
        @endif

        <!-- 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(in_array($record->status, ['completed', 'reviewed']))
                    <div class="px-6 py-3 bg-blue-100 text-blue-700 rounded-lg font-semibold">
                        <i class="fas fa-eye mr-2"></i>View Only ({{ ucfirst($record->status) }})
                    </div>
                @else
                    <div class="flex items-center gap-3">
                        <!-- Save as Draft Button -->
                        <button type="button"
                                onclick="saveDraft()"
                                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="saveAndNextTest('{{ $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="saveAndComplete()"
                                id="submit-button"
                                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>
                @endif
            </div>
        </div>

        <!-- Button Actions Script -->
        <script>
            function saveDraft() {
                console.log('=== SAVE DRAFT CLICKED ===');
                const form = document.getElementById('test-form');
                if (!form) {
                    console.error('Form not found!');
                    alert('Error: Form not found!');
                    return false;
                }

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

                // 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 saveAndNextTest(nextTest) {
                console.log('=== SAVE AND NEXT TEST CLICKED ===');
                console.log('Next test:', nextTest);
                
                const form = document.getElementById('test-form');
                if (!form) {
                    console.error('Form not found!');
                    alert('Error: Form not found!');
                    return false;
                }

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

                // 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 saveAndComplete() {
                console.log('=== SAVE AND COMPLETE CLICKED ===');
                
                const form = document.getElementById('test-form');
                if (!form) {
                    console.error('Form not found!');
                    alert('Error: Form not found!');
                    return false;
                }

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

                // Check signature is present
                const signatureData = document.getElementById('signature-data');
                if (signatureData && (!signatureData.value || signatureData.value.trim() === '')) {
                    alert('Please provide your 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 when leaving
            let formChanged = false;
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.querySelector('form');
                if (form && !{{ in_array($record->status, ['completed', 'reviewed']) ? 'true' : 'false' }}) {
                    // Track form changes
                    form.addEventListener('input', function() {
                        formChanged = true;
                    });

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

                    // Warn when clicking Back button if there are unsaved changes
                    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();
                                }
                            }
                        });
                    }
                }
            });
        </script>
        
        <!-- Form Validation for Signature -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.querySelector('form');
                if (form && !{{ in_array($record->status, ['completed', 'reviewed']) ? 'true' : 'false' }}) {
                    form.addEventListener('submit', function(e) {
                        // Skip signature validation if in draft mode
                        if (form.getAttribute('data-draft-mode') === 'true') {
                            return true;
                        }

                        const signatureData = document.getElementById('signature-data');
                        if (!signatureData.value || signatureData.value.trim() === '') {
                            e.preventDefault();
                            alert('Please provide your digital signature before submitting the form.');
                            return false;
                        }
                    });
                }
            });
        </script>
    </form>
</div>

@endsection

@else
{{-- Mother View: Content Only (will be included in show-test.blade.php) --}}
<!-- Test Content -->
<div class="bg-white rounded-lg shadow-md p-8 mb-6">
    {{ $slot }}
</div>

<!-- Nurse Information Display (Read-Only) -->
@if($testResult && ($testResult->nurse_name || $testResult->signature_data))
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
    <div class="border-t-4 border-pink-500 pt-6">
        <h3 class="text-lg font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-user-nurse text-pink-600 mr-3"></i>
            Nurse Information
        </h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Nurse Name Display -->
            @if($testResult->nurse_name)
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-id-badge 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 font-medium">
                    {{ $testResult->nurse_name }}
                </div>
            </div>
            @endif

            <!-- Signature Display -->
            @if($testResult->signature_data)
            <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
                </label>
                <div class="border-2 border-gray-300 rounded-lg p-4 bg-gray-50">
                    <img src="{{ $testResult->signature_data }}" alt="Nurse Signature" class="max-w-full h-auto" style="max-height: 150px;">
                </div>
            </div>
            @endif
        </div>
    </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>
@endif