<?php
// Simple PHP initialization to ensure proper content type
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retina Data Collection Dashboard</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-bg: #f5f7fa;
            --border-color: #ddd;
            --shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--light-bg);
        }
        
        h1, h2, h3 {
            color: var(--primary-color);
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--secondary-color);
        }
        
        h2 {
            font-size: 22px;
            margin-top: 30px;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .container {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 30px;
            margin-bottom: 20px;
        }
        
        .form-section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        .form-group {
            flex: 1 1 300px;
            margin-right: 20px;
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            transition: border 0.3s, box-shadow 0.3s;
        }
        
        input:focus, select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .file-upload {
            background: #f9f9f9;
            border: 2px dashed #ddd;
            border-radius: 6px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .file-upload:hover {
            background: #f0f0f0;
            border-color: var(--secondary-color);
        }
        
        .eye-data {
            display: flex;
            gap: 20px;
        }
        
        @media (max-width: 768px) {
            .eye-data {
                flex-direction: column;
            }
        }
        
        .eye-column {
            flex: 1;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 6px;
            border-left: 4px solid var(--secondary-color);
        }
        
        .buttons {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 12px 24px;
            background: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s, transform 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
        }
        
        button:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button.secondary {
            background: #95a5a6;
        }
        
        button.secondary:hover {
            background: #7f8c8d;
        }
        
        button.save {
            background: var(--success-color);
        }
        
        button.save:hover {
            background: #2ecc71;
        }
        
        button.delete {
            background: var(--danger-color);
            padding: 6px 12px;
            min-width: auto;
            margin-top: 10px;
        }
        
        button.delete:hover {
            background-color: #c0392b;
        }
        .required::after {
            content: " *";
            color: var(--danger-color);
        }
        
        .status-bar {
            margin-top: 20px;
            padding: 12px;
            background: #e8f4fc;
            border-radius: 4px;
            text-align: center;
            transition: background 0.3s;
            border-left: 4px solid var(--secondary-color);
        }
        
        .status-bar.success {
            background: #d4edda;
            border-left-color: var(--success-color);
        }
        
        .status-bar.error {
            background: #f8d7da;
            border-left-color: var(--danger-color);
        }
        
        .status-bar.warning {
            background: #fff3cd;
            border-left-color: var(--warning-color);
        }
        
        .section-icon {
            margin-right: 10px;
            color: var(--secondary-color);
        }
        
        .section-header {
            display: flex;
            align-items: center;
        }
        
        /* Custom tooltip for help text */
        .tooltip {
            position: relative;
            display: inline-block;
            margin-left: 5px;
            cursor: help;
        }
        
        .tooltip-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
        }
        
        .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-weight: normal;
            font-size: 14px;
        }
        
        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        
        /* Style for image previews */
        .image-preview {
            position: relative;
            margin-top: 10px;
        }
        
        .image-preview img {
            max-width: 100%;
            max-height: 200px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }
        
        /* For age calculation display */
        .age-display {
            margin-top: 5px;
            font-size: 14px;
            color: #666;
        }
        
        /* Progress indicator */
        .progress-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
        
        .progress-step {
            flex: 1;
            text-align: center;
            position: relative;
            padding-bottom: 20px;
        }
        
        .progress-step::before {
            content: '';
            height: 3px;
            width: 100%;
            background: #ddd;
            position: absolute;
            top: 15px;
            left: 0;
            z-index: 1;
        }
        
        .progress-step:first-child::before {
            width: 50%;
            left: 50%;
        }
        
        .progress-step:last-child::before {
            width: 50%;
            right: 50%;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            background: #ddd;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            margin-bottom: 5px;
            transition: background 0.3s;
        }
        
        .step-active .step-number {
            background: var(--secondary-color);
            color: white;
        }
        
        .step-completed .step-number {
            background: var(--success-color);
            color: white;
        }
        
        .step-title {
            font-size: 14px;
            display: block;
        }
        /* Participant counter */
        .participant-counter {
            background: var(--primary-color);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            position: absolute;
            top: -15px;
            right: 30px;
            font-size: 14px;
            font-weight: bold;
            box-shadow: var(--shadow);
        }
        
        /* Helper text */
        .helper-text {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }
        
        .helper-text.error {
            color: var(--danger-color);
        }
        
        /* Draft system modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            max-width: 600px;
            width: 90%;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: 22px;
        }
        
        .modal-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .modal-close:hover {
            color: #333;
        }
        
        .modal-body {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .modal-footer {
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #eee;
            text-align: right;
        }
        
        .draft-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 15px;
            background-color: #f9f9f9;
        }
        
        .draft-info {
            flex: 1;
        }
        
        .draft-info h4 {
            margin: 0 0 5px 0;
            color: var(--primary-color);
        }
        
        .draft-info p {
            margin: 5px 0;
            font-size: 14px;
            color: #666;
        }
        
        .draft-actions {
            display: flex;
            gap: 10px;
        }
        
        .load-draft-btn, .delete-draft-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .load-draft-btn {
            background-color: var(--secondary-color);
            color: white;
        }
        
        .delete-draft-btn {
            background-color: var(--danger-color);
            color: white;
        }
        
        .load-draft-btn:hover {
            background-color: #2980b9;
        }
        
        .delete-draft-btn:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Retina Data Collection Dashboard</h1>

        <div class="participant-counter" id="participant-counter">
            Participants: Loading...
        </div>
        <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
            <a href="view_patients.php" style="background-color: #3498db; color: white; padding: 10px 15px; border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;">
                <span>👁️</span> View Patient Records
            </a>
        </div>
        
        <form id="retina-data-form" action="save_patient.php" method="post" enctype="multipart/form-data">
            <!-- Progress indicator -->
            <div class="progress-indicator">
                <div class="progress-step step-active" data-step="1">
                    <div class="step-number">1</div>
                    <span class="step-title">Patient Info</span>
                </div>
                <div class="progress-step" data-step="2">
                    <div class="step-number">2</div>
                    <span class="step-title">Physical Data</span>
                </div>
                <div class="progress-step" data-step="3">
                    <div class="step-number">3</div>
                    <span class="step-title">Health Info</span>
                </div>
                <div class="progress-step" data-step="4">
                    <div class="step-number">4</div>
                    <span class="step-title">Retina Data</span>
                </div>
            </div>
            <!-- Basic Patient Information -->
            <div class="form-section">
                <div class="section-header">
                    <h2><span class="section-icon">👤</span> Patient Information</h2>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="participant-number" class="required">Study Participant Number</label>
                        <input type="text" id="participant-number" name="participant-number" required>
                        <div id="participant-number-error" class="helper-text error"></div>
                    </div>
                    <div class="form-group">
                        <label for="collection-date" class="required">Date of Data Collection</label>
                        <input type="date" id="collection-date" name="collection-date" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="birth-date" class="required">Date of Birth</label>
                        <input type="date" id="birth-date" name="birth-date" required max="<?php echo date('Y-m-d'); ?>">
                        <div class="age-display" id="age-result"></div>
                        <!-- Hidden field to store year of birth for backward compatibility -->
                        <input type="hidden" id="birth-year" name="birth-year">
                    </div>
                    <div class="form-group">
                        <label for="gender" class="required">Gender</label>
                        <select id="gender" name="gender" required>
                            <option value="">Select Gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="county" class="required">County of Origin</label>
                        <select id="county" name="county" required>
                            <option value="">Select County</option>
                            <option value="Baringo">Baringo</option>
                            <option value="Bomet">Bomet</option>
                            <option value="Bungoma">Bungoma</option>
                            <option value="Busia">Busia</option>
                            <option value="Elgeyo Marakwet">Elgeyo Marakwet</option>
                            <option value="Embu">Embu</option>
                            <option value="Garissa">Garissa</option>
                            <option value="Homa Bay">Homa Bay</option>
                            <option value="Isiolo">Isiolo</option>
                            <option value="Kajiado">Kajiado</option>
                            <option value="Kakamega">Kakamega</option>
                            <option value="Kericho">Kericho</option>
                            <option value="Kiambu">Kiambu</option>
                            <option value="Kilifi">Kilifi</option>
                            <option value="Kirinyaga">Kirinyaga</option>
                            <option value="Kisii">Kisii</option>
                            <option value="Kisumu">Kisumu</option>
                            <option value="Kitui">Kitui</option>
                            <option value="Kwale">Kwale</option>
                            <option value="Laikipia">Laikipia</option>
                            <option value="Lamu">Lamu</option>
                            <option value="Machakos">Machakos</option>
                            <option value="Makueni">Makueni</option>
                            <option value="Mandera">Mandera</option>
                            <option value="Marsabit">Marsabit</option>
                            <option value="Meru">Meru</option>
                            <option value="Migori">Migori</option>
                            <option value="Mombasa">Mombasa</option>
                            <option value="Murang'a">Murang'a</option>
                            <option value="Nairobi">Nairobi</option>
                            <option value="Nakuru">Nakuru</option>
                            <option value="Nandi">Nandi</option>
                            <option value="Narok">Narok</option>
                            <option value="Nyamira">Nyamira</option>
                            <option value="Nyandarua">Nyandarua</option>
                            <option value="Nyeri">Nyeri</option>
                            <option value="Samburu">Samburu</option>
                            <option value="Siaya">Siaya</option>
                            <option value="Taita Taveta">Taita Taveta</option>
                            <option value="Tana River">Tana River</option>
                            <option value="Tharaka Nithi">Tharaka Nithi</option>
                            <option value="Trans Nzoia">Trans Nzoia</option>
                            <option value="Turkana">Turkana</option>
                            <option value="Uasin Gishu">Uasin Gishu</option>
                            <option value="Vihiga">Vihiga</option>
                            <option value="Wajir">Wajir</option>
                            <option value="West Pokot">West Pokot</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Anthropometric Data -->
            <div class="form-section">
                <div class="section-header">
                    <h2><span class="section-icon">📏</span> Anthropometric Data</h2>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="waist-size" class="required">Waist Size (cm)</label>
                        <input type="number" id="waist-size" name="waist-size" min="30" max="300" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label for="hip-size" class="required">Hip Size (cm)</label>
                        <input type="number" id="hip-size" name="hip-size" min="30" max="300" step="0.1" required>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="weight" class="required">Weight (kg)</label>
                        <input type="number" id="weight" name="weight" min="5" max="500" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label for="height" class="required">Height (cm)</label>
                        <input type="number" id="height" name="height" min="50" max="250" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label>BMI</label>
                        <div id="bmi-result" style="padding: 12px; background: #f9f9f9; border-radius: 4px; border: 1px solid #ddd;">
                            Not calculated yet
                        </div>
                        <div class="tooltip">
                            <span class="tooltip-icon">?</span>
                            <span class="tooltip-text">BMI is calculated automatically based on height and weight</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Health Data -->
            <div class="form-section">
                <div class="section-header">
                    <h2><span class="section-icon">❤️</span> Health Information</h2>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="walking" class="required">Do you walk 150 minutes a week?</label>
                        <select id="walking" name="walking" required>
                            <option value="">Select</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                        <div class="tooltip">
                            <span class="tooltip-icon">?</span>
                            <span class="tooltip-text">Moderate physical activity of 150 minutes per week as recommended by WHO</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="family-diabetes" class="required">Family History of Diabetes</label>
                        <select id="family-diabetes" name="family-diabetes" required>
                            <option value="">Select</option>
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Retina Data -->
            <div class="form-section">
                <div class="section-header">
                    <h2><span class="section-icon">👁️</span> Retina Data</h2>
                </div>
                <div class="eye-data">
                    <div class="eye-column">
                        <h3>Left Eye</h3>
                        <div class="form-group">
                            <label for="left-retina-image" class="required">Left Eye Retina Image</label>
                            <div class="file-upload" id="left-eye-upload">
                                <input type="file" id="left-retina-image" name="left-retina-image" accept="image/*" required>
                                <p>Click to select or drag an image here</p>
                            </div>
                            <div id="left-image-preview" class="image-preview"></div>
                        </div>
                    </div>
                    <div class="eye-column">
                        <h3>Right Eye</h3>
                        <div class="form-group">
                            <label for="right-retina-image" class="required">Right Eye Retina Image</label>
                            <div class="file-upload" id="right-eye-upload">
                                <input type="file" id="right-retina-image" name="right-retina-image" accept="image/*" required>
                                <p>Click to select or drag an image here</p>
                            </div>
                            <div id="right-image-preview" class="image-preview"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="status-bar" id="status-message">
                Ready to submit data
            </div>
            
            <div class="buttons">
                <button type="button" id="reset-btn" class="secondary">
                    <span style="margin-right: 5px;">🔄</span> Reset Form
                </button>
                <button type="button" id="save-draft-btn" class="secondary">
                    <span style="margin-right: 5px;">💾</span> Save Draft
                </button>
                <button type="submit" class="save">
                    <span style="margin-right: 5px;">✅</span> Submit Data
                </button>
            </div>
        </form>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize variables
            const participantNumberInput = document.getElementById('participant-number');
            const participantNumberError = document.getElementById('participant-number-error');
            const birthDateInput = document.getElementById('birth-date');
            const birthYearInput = document.getElementById('birth-year');
            const ageDisplay = document.getElementById('age-result');
            const heightInput = document.getElementById('height');
            const weightInput = document.getElementById('weight');
            const bmiDisplay = document.getElementById('bmi-result');
            
            // Fetch participant count on page load
            fetchParticipantCount();
            
            function fetchParticipantCount() {
                fetch('get_participant_count.php')
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            document.getElementById('participant-counter').textContent = `Participants: ${data.count}`;
                        } else {
                            document.getElementById('participant-counter').textContent = 'Participants: Error loading';
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching participant count:', error);
                        document.getElementById('participant-counter').textContent = 'Participants: Error loading';
                    });
            }
            
            // Check for duplicate participant number
            participantNumberInput.addEventListener('blur', function() {
                const participantNumber = this.value.trim();
                if (participantNumber) {
                    fetch(`check_duplicate.php?participantNumber=${encodeURIComponent(participantNumber)}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success' && data.exists) {
                                participantNumberError.textContent = 'This participant number already exists. Please use a different one.';
                                this.classList.add('error');
                            } else {
                                participantNumberError.textContent = '';
                                this.classList.remove('error');
                            }
                        })
                        .catch(error => {
                            console.error('Error checking duplicate participant number:', error);
                            participantNumberError.textContent = '';
                        });
                } else {
                    participantNumberError.textContent = '';
                    this.classList.remove('error');
                }
            });
            
            // Calculate age from birth date
            birthDateInput.addEventListener('change', function() {
                if (this.value) {
                    const birthDate = new Date(this.value);
                    const today = new Date();
                    
                    // Calculate age
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    
                    // Update age display
                    ageDisplay.textContent = `Age: ${age} years`;
                    
                    // Also update the birth year field for backward compatibility
                    birthYearInput.value = birthDate.getFullYear();
                } else {
                    ageDisplay.textContent = '';
                    birthYearInput.value = '';
                }
            });
            
            // Calculate BMI
            function calculateBMI() {
                const height = parseFloat(heightInput.value);
                const weight = parseFloat(weightInput.value);
                
                if (height && weight && height > 0 && weight > 0) {
                    // Convert height from cm to meters
                    const heightInMeters = height / 100;
                    
                    // Calculate BMI: weight (kg) / (height (m))^2
                    const bmi = weight / (heightInMeters * heightInMeters);
                    
                    // Display BMI with 1 decimal place
                    bmiDisplay.textContent = `BMI: ${bmi.toFixed(1)}`;
                    
                    // Add color coding based on BMI range
                    if (bmi < 18.5) {
                        bmiDisplay.style.borderLeft = '4px solid #3498db'; // Underweight - blue
                    } else if (bmi >= 18.5 && bmi < 25) {
                        bmiDisplay.style.borderLeft = '4px solid #2ecc71'; // Normal - green
                    } else if (bmi >= 25 && bmi < 30) {
                        bmiDisplay.style.borderLeft = '4px solid #f39c12'; // Overweight - orange
                    } else {
                        bmiDisplay.style.borderLeft = '4px solid #e74c3c'; // Obese - red
                    }
                } else {
                    bmiDisplay.textContent = 'Not calculated yet';
                    bmiDisplay.style.borderLeft = 'none';
                }
            }
            
            heightInput.addEventListener('input', calculateBMI);
            weightInput.addEventListener('input', calculateBMI);
            
            // File upload preview for retina images
            function setupImageUpload(inputId, previewId) {
                const input = document.getElementById(inputId);
                const preview = document.getElementById(previewId);
                
                input.addEventListener('change', function() {
                    preview.innerHTML = '';
                    
                    if (this.files && this.files[0]) {
                        const file = this.files[0];
                        
                        // Check file size (max 10MB)
                        if (file.size > 10 * 1024 * 1024) {
                            preview.innerHTML = '<p style="color: #e74c3c;">File is too large. Maximum size is 10MB.</p>';
                            this.value = ''; // Clear the input
                            return;
                        }
                        
                        // Check file type
                        if (!file.type.match('image.*')) {
                            preview.innerHTML = '<p style="color: #e74c3c;">Please select an image file.</p>';
                            this.value = ''; // Clear the input
                            return;
                        }
                        
                        const reader = new FileReader();
                        
                        reader.onload = function(e) {
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            preview.appendChild(img);
                        }
                        
                        reader.readAsDataURL(file);
                    }
                });
            }
            
            setupImageUpload('left-retina-image', 'left-image-preview');
            setupImageUpload('right-retina-image', 'right-image-preview');
            
            // Progress steps functionality
            function updateProgressSteps() {
                // Get all required fields
                const requiredFields = document.querySelectorAll('[required]');
                const totalRequired = requiredFields.length;
                let filledRequired = 0;
                
                // Count filled required fields
                requiredFields.forEach(field => {
                    if (field.value) {
                        filledRequired++;
                    }
                });
                
                // Calculate progress percentage
                const progressPercentage = (filledRequired / totalRequired) * 100;
                
                // Update progress steps based on percentage
                const steps = document.querySelectorAll('.progress-step');
                
                steps.forEach(step => {
                    step.classList.remove('step-active');
                });
                
                if (progressPercentage >= 75) {
                    // Step 4 active, steps 1-3 completed
                    steps[0].classList.add('step-completed');
                    steps[1].classList.add('step-completed');
                    steps[2].classList.add('step-completed');
                    steps[3].classList.add('step-active');
                } else if (progressPercentage >= 50) {
                    // Step 3 active, steps 1-2 completed
                    steps[0].classList.add('step-completed');
                    steps[1].classList.add('step-completed');
                    steps[2].classList.add('step-active');
                } else if (progressPercentage >= 25) {
                    // Step 2 active, step 1 completed
                    steps[0].classList.add('step-completed');
                    steps[1].classList.add('step-active');
                } else {
                    // Step 1 active
                    steps[0].classList.add('step-active');
                }
            }
            
            // Update progress when any input changes
            document.querySelectorAll('input, select').forEach(input => {
                input.addEventListener('change', updateProgressSteps);
            });
            
            // Reset button functionality
            document.getElementById('reset-btn').addEventListener('click', function() {
                if (confirm('Are you sure you want to reset the form? All unsaved data will be lost.')) {
                    document.getElementById('retina-data-form').reset();
                    document.getElementById('left-image-preview').innerHTML = '';
                    document.getElementById('right-image-preview').innerHTML = '';
                    document.getElementById('bmi-result').innerHTML = 'Not calculated yet';
                    document.getElementById('bmi-result').style.borderLeft = 'none';
                    document.getElementById('age-result').textContent = '';
                    document.getElementById('participant-number-error').textContent = '';
                    updateStatus('Form has been reset');
                    
                    // Reset progress steps
                    document.querySelectorAll('.progress-step').forEach(step => {
                        step.classList.remove('step-completed', 'step-active');
                    });
                    document.querySelector('.progress-step[data-step="1"]').classList.add('step-active');
                }
            });
            
            // ENHANCED DRAFT SYSTEM
            
            // Save draft functionality
            function saveDraft() {
                // Create an object to store all form values
                const formData = {};
                
                // Get all input elements
                const inputs = document.getElementById('retina-data-form').querySelectorAll('input, select');
                
                // Store each input value in the object
                inputs.forEach(input => {
                    if (input.type !== 'file') { // Skip file inputs
                        formData[input.id] = input.value;
                    }
                });
                
                // Add timestamp and metadata
                formData['timestamp'] = Date.now();
                formData['savedDate'] = new Date().toLocaleString();
                
                // Generate a unique ID for this draft if it doesn't have one
                if (!formData['draftId']) {
                    formData['draftId'] = 'draft_' + Date.now();
                }
                
                // Add a title/name for the draft
                const participantNumber = formData['participant-number'] || 'Unnamed';
                formData['draftName'] = `Patient #${participantNumber} - ${new Date().toLocaleDateString()}`;
                
                // Get existing drafts
                const existingDrafts = JSON.parse(localStorage.getItem('retinaFormDrafts') || '[]');
                
                // Check if this draft already exists (based on draftId)
                const existingDraftIndex = existingDrafts.findIndex(draft => draft.draftId === formData['draftId']);
                
                if (existingDraftIndex >= 0) {
                    // Update existing draft
                    existingDrafts[existingDraftIndex] = formData;
                } else {
                    // Add new draft
                    existingDrafts.push(formData);
                }
                
                // Save back to localStorage (limited to most recent 20 drafts to prevent storage issues)
                localStorage.setItem('retinaFormDrafts', JSON.stringify(existingDrafts.slice(-20)));
                
                // Also save current draft separately for convenience
                localStorage.setItem('retinaFormCurrentDraft', JSON.stringify(formData));
                
                return formData;
            }
            
            // Load draft functionality
            function loadDraft(draftId = null) {
                let draft;
                
                if (draftId) {
                    // Load specific draft
                    const existingDrafts = JSON.parse(localStorage.getItem('retinaFormDrafts') || '[]');
                    draft = existingDrafts.find(d => d.draftId === draftId);
                } else {
                    // Load current draft
                    draft = JSON.parse(localStorage.getItem('retinaFormCurrentDraft'));
                }
                
                if (draft) {
                    // Populate form fields
                    for (const key in draft) {
                        const field = document.getElementById(key);
                        if (field && key !== 'timestamp' && key !== 'savedDate' && key !== 'draftId' && key !== 'draftName') {
                            field.value = draft[key];
                        }
                    }
                    
                    // Trigger calculations after loading data
                    if (draft['height'] && draft['weight']) {
                        calculateBMI();
                    }
                    
                    if (draft['birth-date']) {
                        const event = new Event('change');
                        document.getElementById('birth-date').dispatchEvent(event);
                    }
                    
                    updateProgressSteps();
                    return draft;
                }
                
                return null;
            }
            
            // Show drafts list modal
            function showDraftsList() {
                const existingDrafts = JSON.parse(localStorage.getItem('retinaFormDrafts') || '[]');
                
                if (existingDrafts.length === 0) {
                    updateStatus('No saved drafts found', 'info');
                    return;
                }
                
                // Sort drafts by timestamp (newest first)
                existingDrafts.sort((a, b) => b.timestamp - a.timestamp);
                
                // Create modal for drafts list
                const modal = document.createElement('div');
                modal.className = 'modal';
                modal.id = 'drafts-modal';
                modal.style.display = 'block';
                
                let draftsList = '';
                existingDrafts.forEach(draft => {
                    const draftName = draft.draftName || `Draft ${new Date(draft.timestamp).toLocaleString()}`;
                    const participantNumber = draft['participant-number'] || 'N/A';
                    const collectionDate = draft['collection-date'] || 'N/A';
                    
                    draftsList += `
    <div class="draft-item">
        <div class="draft-info">
            <h4>${draftName}</h4>
            <p>Participant: ${participantNumber}</p>
            <p>Collection Date: ${collectionDate}</p>
            <p>Last Saved: ${draft.savedDate || new Date(draft.timestamp).toLocaleString()}</p>
        </div>
        <div class="draft-actions">
            <button type="button" class="load-draft-btn" data-id="${draft.draftId}">Load</button>
            <button type="button" class="delete-draft-btn" data-id="${draft.draftId}">Delete</button>
        </div>
    </div>
`;
                });
                
                modal.innerHTML = `
                    <div class="modal-content">
                        <div class="modal-header">
                            <h2>Saved Drafts</h2>
                            <span class="modal-close" onclick="document.getElementById('drafts-modal').remove()">&times;</span>
                        </div>
                        <div class="modal-body">
                            ${draftsList.length > 0 ? draftsList : '<p>No saved drafts found</p>'}
                        </div>
                        <div class="modal-footer">
                            <button type="button" onclick="document.getElementById('drafts-modal').remove()">Close</button>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(modal);
                
                // Add event listeners for draft actions
                document.querySelectorAll('.load-draft-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const draftId = this.getAttribute('data-id');
                        loadDraft(draftId);
                        document.getElementById('drafts-modal').remove();
                        updateStatus('Draft loaded successfully', 'success');
                    });
                });
                
                document.querySelectorAll('.delete-draft-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const draftId = this.getAttribute('data-id');
                        deleteDraft(draftId);
                        this.closest('.draft-item').remove();
                        
                        // Check if no drafts left
                        if (document.querySelectorAll('.draft-item').length === 0) {
                            document.querySelector('.modal-body').innerHTML = '<p>No saved drafts found</p>';
                        }
                    });
                });
                
                // Close modal when clicking outside
                window.onclick = function(event) {
                    if (event.target === modal) {
                        modal.remove();
                    }
                }
            }
            
            // Delete draft functionality
            function deleteDraft(draftId) {
                const existingDrafts = JSON.parse(localStorage.getItem('retinaFormDrafts') || '[]');
                const updatedDrafts = existingDrafts.filter(draft => draft.draftId !== draftId);
                localStorage.setItem('retinaFormDrafts', JSON.stringify(updatedDrafts));
                
                // Also clear current draft if it's the same
                const currentDraft = JSON.parse(localStorage.getItem('retinaFormCurrentDraft'));
                if (currentDraft && currentDraft.draftId === draftId) {
                    localStorage.removeItem('retinaFormCurrentDraft');
                }
                
                updateStatus('Draft deleted', 'info');
            }
            
            // Clear drafts for a specific participant
            function clearDraftsForParticipant(participantNumber) {
                if (!participantNumber) return;
                
                const existingDrafts = JSON.parse(localStorage.getItem('retinaFormDrafts') || '[]');
                const updatedDrafts = existingDrafts.filter(draft => draft['participant-number'] !== participantNumber);
                
                // Save updated drafts list
                localStorage.setItem('retinaFormDrafts', JSON.stringify(updatedDrafts));
                
                // Clear current draft if it's for this participant
                const currentDraft = JSON.parse(localStorage.getItem('retinaFormCurrentDraft'));
                if (currentDraft && currentDraft['participant-number'] === participantNumber) {
                    localStorage.removeItem('retinaFormCurrentDraft');
                }
            }
            
            // Set up draft system buttons
            const saveButton = document.getElementById('save-draft-btn');
            saveButton.addEventListener('click', function() {
                const draft = saveDraft();
                updateStatus(`Draft saved as "${draft.draftName}"`, 'success');
            });
            
            // Create and add Load Drafts button
            const loadDraftsBtn = document.createElement('button');
            loadDraftsBtn.type = 'button';
            loadDraftsBtn.id = 'load-drafts-btn';
            loadDraftsBtn.className = 'secondary';
            loadDraftsBtn.innerHTML = '<span style="margin-right: 5px;">📋</span> Load Draft';
            loadDraftsBtn.addEventListener('click', showDraftsList);
            
            // Insert it before the Save Draft button
            saveButton.parentNode.insertBefore(loadDraftsBtn, saveButton);
            
            // Form submission
            document.getElementById('retina-data-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Check for duplicate participant number before submission
                const participantNumber = participantNumberInput.value.trim();
                if (participantNumber) {
                    fetch(`check_duplicate.php?participantNumber=${encodeURIComponent(participantNumber)}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success' && data.exists) {
                                participantNumberError.textContent = 'This participant number already exists. Please use a different one.';
                                participantNumberInput.classList.add('error');
                                participantNumberInput.focus();
                                updateStatus('Please choose a unique participant number', 'error');
                            } else {
                                // Continue with form validation and submission
                                if (validateForm()) {
                                    submitForm();
                                }
                            }
                        })
                        .catch(error => {
                            console.error('Error checking duplicate participant number:', error);
                            // Continue with form validation and submission anyway
                            if (validateForm()) {
                                submitForm();
                            }
                        });
                } else {
                    // No participant number entered, validate form normally
                    if (validateForm()) {
                        submitForm();
                    }
                }
            });
            
            // Load any existing draft
            loadDraft();
            
            function validateForm() {
                // Basic validation - check for required fields
                const requiredFields = document.querySelectorAll('[required]');
                let valid = true;
                
                requiredFields.forEach(field => {
                    if (!field.value) {
                        field.style.borderColor = '#e74c3c';
                        valid = false;
                        // Scroll to the first invalid field
                        if (valid === false) {
                            field.scrollIntoView({ behavior: 'smooth', block: 'center' });
                            valid = null; // prevent scrolling to other fields
                        }
                    } else {
                        field.style.borderColor = '#ddd';
                    }
                });
                
                if (!valid) {
                    updateStatus('Please fill all required fields', 'error');
                }
                
                return valid;
            }
            
            function submitForm() {
                // Show loading state
                const submitBtn = document.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<span style="margin-right: 5px;">⏳</span> Submitting...';
                submitBtn.disabled = true;
                
                // Save draft before submission in case submission fails
                const draft = saveDraft();
                draft.isSubmitting = true;
                localStorage.setItem('retinaFormCurrentDraft', JSON.stringify(draft));
                
                // Collect all form data
                const formData = new FormData(document.getElementById('retina-data-form'));
                
                // Add file data explicitly (required for some browsers)
                const leftEyeInput = document.getElementById('left-retina-image');
                const rightEyeInput = document.getElementById('right-retina-image');
                
                if (leftEyeInput.files.length > 0) {
                    formData.append('left-retina-image', leftEyeInput.files[0]);
                }
                
                if (rightEyeInput.files.length > 0) {
                    formData.append('right-retina-image', rightEyeInput.files[0]);
                }
                
                // Update UI
                updateStatus('Submitting data...', 'info');
                
                // Send data to server using fetch API
                fetch('save_patient.php', {
                    method: 'POST',
                    body: formData,
                    // Don't set Content-Type header - the browser will set it with the correct boundary for FormData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'success') {
                        updateStatus(data.message, 'success');
                        
                        // Clear drafts for this participant after successful submission
                        if (data.clear_drafts && data.participant_number) {
                            clearDraftsForParticipant(data.participant_number);
                        }
                        
                        // Reset form after successful submission
                        document.getElementById('retina-data-form').reset();
                        document.getElementById('left-image-preview').innerHTML = '';
                        document.getElementById('right-image-preview').innerHTML = '';
                        document.getElementById('bmi-result').innerHTML = 'Not calculated yet';
                        document.getElementById('bmi-result').style.borderLeft = 'none';
                        document.getElementById('age-result').textContent = '';
                        document.getElementById('participant-number-error').textContent = '';
                        
                        // Reset progress steps
                        document.querySelectorAll('.progress-step').forEach(step => {
                            step.classList.remove('step-completed', 'step-active');
                        });
                        document.querySelector('.progress-step[data-step="1"]').classList.add('step-active');
                        
                        // Update participant count
                        fetchParticipantCount();
                    } else if (data.status === 'warning') {
                        updateStatus(data.message, 'warning');
                        
                        // Clear drafts for this participant
                        if (data.clear_drafts && data.participant_number) {
                            clearDraftsForParticipant(data.participant_number);
                        }
                        
                        // Update participant count
                        fetchParticipantCount();
                    } else {
                        updateStatus(data.message || 'Error submitting data', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    updateStatus('Error submitting form. Please check database connection and try again.', 'error');
                })
                .finally(() => {
                    // Restore button state
                    submitBtn.innerHTML = originalBtnText;
                    submitBtn.disabled = false;
                });
            }
            
            function updateStatus(message, type = 'info') {
                const statusBar = document.getElementById('status-message');
                statusBar.textContent = message;
                
                // Update style based on message type
                statusBar.className = 'status-bar';
                if (type === 'error') {
                    statusBar.classList.add('error');
                } else if (type === 'success') {
                    statusBar.classList.add('success');
                } else if (type === 'warning') {
                    statusBar.classList.add('warning');
                }
                
                // Scroll to status message for errors
                if (type === 'error') {
                    statusBar.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    </script>
</body>
</html>