Spaces:

rajkhanke
/

Patient_feedback_System

Sleeping

App Files Files Community

rajkhanke commited on May 1, 2025

Commit

31c4836

verified ·

1 Parent(s): ba1f084

Update templates/doctor_dashboard.html

Browse files

Files changed (1) hide show

templates/doctor_dashboard.html +535 -94

templates/doctor_dashboard.html CHANGED Viewed

@@ -57,10 +57,18 @@
         .btn-success {
             background-color: var(--secondary-color);
             border-color: var(--secondary-color);
         }
         .btn-danger {
             background-color: var(--danger-color);
             border-color: var(--danger-color);
         }
         .role-toggle {
             display: flex;
@@ -105,6 +113,7 @@
             box-shadow: 0 0.15rem 0.5rem 0 rgba(58, 59, 69, 0.05);
             cursor: pointer;
             transition: all 0.2s ease;
         }
         .patient-item:hover {
             transform: translateY(-3px);
@@ -176,6 +185,27 @@
             font-size: 1rem;
             color: #333;
         }
         .patient-details-section {
             display: none; /* Hidden by default */
         }
@@ -212,7 +242,52 @@
          #patient-feedback {
             background-color: #e9ecef; /* Light grey */
             border-color: #dee2e6; /* Light grey border */
          }
     </style>
 </head>
 <body>
@@ -305,29 +380,42 @@
                                 <strong>Last Updated:</strong> <span id="patient-timestamp"></span>
                             </div>
-                            <!-- Download button now relies on patient ID -->
-                            <button class="btn btn-primary" id="download-pdf">
-                                <i class="fas fa-file-download me-2"></i>Download Care Plan PDF
-                            </button>
                             <div class="care-plan-tabs mt-4">
                                 <ul class="nav nav-tabs" id="carePlanTabs" role="tablist">
                                     <li class="nav-item" role="presentation">
-                                        <button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan" type="button" role="tab" aria-controls="updated-plan" aria-selected="true">Updated Care Plan</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
-                                        <button class="nav-link" id="original-plan-tab" data-bs-toggle="tab" data-bs-target="#original-plan" type="button" role="tab" aria-controls="original-plan" aria-selected="false">Original Care Plan</button>
                                     </li>
                                 </ul>
                                 <div class="tab-content" id="carePlanTabsContent">
-                                    <div class="tab-pane fade show active" id="updated-plan" role="tabpanel" aria-labelledby="updated-plan-tab">
-                                        <div class="care-plan-content" id="updated-plan-content"></div>
                                     </div>
-                                    <div class="tab-pane fade" id="original-plan" role="tabpanel" aria-labelledby="original-plan-tab">
                                         <div class="care-plan-content" id="original-plan-content"></div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
@@ -348,6 +436,10 @@
             $('.role-toggle-btn[data-role="doctor"]').addClass('active');
             $('.role-toggle-btn[data-role="patient"]').removeClass('active');
             // Load all patients
             function loadPatients() {
                 console.log("Loading patients...");
@@ -426,35 +518,66 @@
                                             </div>
                                             <span class="patient-status ${statusBadgeClass[patient.status] || 'status-unknown'}">${statusText[patient.status] || 'UNKNOWN'}</span>
                                         </div>
                                     </li>
                                 `;
                                 $('#patient-list').append(patientHtml);
                             });
-                            // Add click event to patient items
-                            $('.patient-item').off('click').on('click', function() { // Use .off().on() to avoid duplicate handlers
-                                const patientId = $(this).data('id');
-                                // Update URL without full page reload
-                                history.pushState({ patient_id: patientId }, '', `/doctor_dashboard?patient_id=${patientId}`);
-                                loadPatientDetails(patientId);
-                            });
-                            // After loading the list, check if a patient ID is in the URL
                             const urlParams = new URLSearchParams(window.location.search);
-                            const selectedPatientId = urlParams.get('patient_id');
-                            if (selectedPatientId) {
-                                console.log("Loading patient details from URL:", selectedPatientId);
                                 // Check if this ID exists in the loaded list before trying to load details
-                                if ($(`.patient-item[data-id="${selectedPatientId}"]`).length > 0) {
-                                    loadPatientDetails(selectedPatientId);
                                 } else {
-                                     console.warn(`Patient ID "${selectedPatientId}" from URL not found in loaded list.`);
-                                     $('#no-patient-selected').show();
-                                     $('#patient-details-section').hide();
                                 }
-                            } else {
-                                $('#no-patient-selected').show();
-                                $('#patient-details-section').hide();
                             }
@@ -464,8 +587,7 @@
                             $('#patient-list').empty();
                             $('#emergency-alerts').empty();
                             $('#no-patients-found').show(); // Show no patients message
-                            $('#no-patient-selected').show(); // Show placeholder in details area
-                            $('#patient-details-section').hide();
                         }
                     },
                     error: function(xhr, status, error) {
@@ -475,15 +597,30 @@
                         $('#patient-list-error').show().text('Error loading patients. Please try refreshing.');
                         $('#patient-count').text('0');
                         $('#emergency-alerts').empty();
-                         $('#no-patient-selected').show(); // Show placeholder on API error
-                         $('#patient-details-section').hide();
                     }
                 });
             }
-            // Load patient details
             function loadPatientDetails(patientId) {
                  console.log("Attempting to load details for patient ID:", patientId);
                 // Highlight selected patient
                 $('.patient-item').removeClass('active');
                 $(`.patient-item[data-id="${patientId}"]`).addClass('active');
@@ -491,18 +628,16 @@
                 // Show patient details section, hide placeholder
                 $('#no-patient-selected').hide();
                 $('#patient-details-section').show();
-                // Optional: Show a loader in the details pane
-                 // $('#patient-details-section .card-body').html('<div class="loader"></div>'); // Replace content with loader
                 $.ajax({
                     url: `/get_patient/${patientId}`,
                     type: 'GET',
                     success: function(response) {
-                        // Hide loader if shown
-                         // $('#patient-details-section .card-body .loader').remove();
-                         // You would ideally restore the body content here
                         if (response.success) {
                             const patient = response.patient;
                             console.log("Successfully loaded patient details:", patient.name);
@@ -534,60 +669,335 @@
                                 .attr('class', 'patient-status ' + (statusBadgeClass[patient.status] || 'status-unknown'));
                             // Update care plans content
-                            $('#updated-plan-content').text(patient.updated_plan || 'No updated care plan available.');
                              $('#original-plan-content').text(patient.original_plan || 'No original care plan available (or could not be extracted from PDF).');
-                            // Reset tab to updated plan and show content
                             $('#carePlanTabs button').removeClass('active').attr('aria-selected', 'false');
                             $('#updated-plan-tab').addClass('active').attr('aria-selected', 'true');
                              $('#carePlanTabsContent .tab-pane').removeClass('show active');
-                             $('#updated-plan').addClass('show active');
-                            // Set up PDF download button with patient ID
                             $('#download-pdf').off('click').on('click', function() {
                                 console.log("Download button clicked for patient ID:", patient.id);
                                 window.location.href = `/download_pdf/${patient.id}`;
                             });
                         } else {
                             console.error('Error loading patient details:', response.error);
                             alert('Error: ' + response.error);
-                            $('#no-patient-selected').show(); // Show placeholder if patient not found or error
-                            $('#patient-details-section').hide();
-                            // Remove highlight from list item if details couldn't load
-                             $(`.patient-item[data-id="${patientId}"]`).removeClass('active');
                         }
                     },
                     error: function(xhr, status, error) {
-                         // Hide loader if shown
-                         // $('#patient-details-section .card-body .loader').remove();
                          console.error("API Error loading patient details:", error, xhr.responseText);
-                        alert('Error loading patient details. Patient may no longer exist.'); // More user-friendly error
-                        $('#no-patient-selected').show(); // Show placeholder on API error
-                        $('#patient-details-section').hide();
-                        // Remove highlight from list item on error
-                         $(`.patient-item[data-id="${patientId}"]`).removeClass('active');
                     }
                 });
             }
-            // Patient search functionality
             $('#patient-search').on('input', function() {
                 const searchTerm = $(this).val().toLowerCase();
-                let foundPatients = false;
                 $('.patient-item').each(function() {
                     const patientName = $(this).find('h6').text().toLowerCase();
                     const patientDetails = $(this).find('small').text().toLowerCase(); // Includes age/gender/timestamp
                     if (patientName.includes(searchTerm) || patientDetails.includes(searchTerm)) {
                         $(this).show();
-                        foundPatients = true;
                     } else {
                         $(this).hide();
                     }
                 });
-                if (foundPatients) {
                     $('#no-patients-found').hide();
                 } else {
                     $('#no-patients-found').show();
@@ -601,33 +1011,36 @@
             // Periodically check for emergency notifications (and refresh list if found)
             function checkEmergencyNotifications() {
                 console.log("Checking for emergency notifications...");
                 $.ajax({
                     url: '/get_emergency_notifications',
                     type: 'GET',
                     success: function(response) {
                         if (response.success && response.notifications.length > 0) {
                              console.log(`Found ${response.notifications.length} emergency notifications.`);
-                            // Check if the current emergency alert count is different
-                            const currentAlerts = $('#emergency-alerts .alert').length;
-                            if (response.notifications.length !== currentAlerts) {
                                  // Update emergency alerts section
-                                const alertCount = response.notifications.length;
                                 let alertHtml = `
                                     <div class="alert alert-danger mb-3">
                                         <i class="fas fa-exclamation-triangle me-2"></i>
-                                        <strong>${alertCount} Emergency patient${alertCount > 1 ? 's' : ''} requiring immediate attention!</strong>
                                     </div>
                                 `;
                                 $('#emergency-alerts').html(alertHtml);
                                 // Reload the patient list to update sorting and potentially highlight new emergencies
-                                const currentSelectedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
                                 console.log("Reloading patient list due to new emergency alerts...");
                                 loadPatients(); // This will re-render the list and handle selection from URL/previously selected ID
-                            } else {
-                                // If the count is the same, just ensure the alert is visible if needed
-                                if (currentAlerts > 0) {
-                                     $('#emergency-alerts').show();
-                                }
                             }
                         } else {
@@ -645,7 +1058,6 @@
             }
             // Check for emergency notifications periodically (e.g., every 30 seconds)
-            // Note: For a production system with many users, websockets would be more efficient.
             setInterval(checkEmergencyNotifications, 30000); // 30 seconds
              // Handle browser back/forward button for URL patient ID
@@ -653,37 +1065,66 @@
                  const urlParams = new URLSearchParams(window.location.search);
                  const patientIdFromUrl = urlParams.get('patient_id');
-                 // Get the ID of the currently displayed patient (if any)
-                 const currentDisplayedId = $('#patient-details-section').is(':visible') ? $('.patient-item.active').data('id') : null;
-                 if (patientIdFromUrl && patientIdFromUrl !== currentDisplayedId) {
-                     // If URL has an ID and it's different from the current one, load it
-                     console.log(`URL changed to patient ID: ${patientIdFromUrl}. Loading details.`);
-                      // Check if this ID exists in the currently rendered list before calling API
                       if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
                           loadPatientDetails(patientIdFromUrl);
                       } else {
                            console.warn(`Patient ID "${patientIdFromUrl}" from URL not found in current list.`);
-                           $('.patient-item').removeClass('active'); // Remove highlight
-                           $('#patient-details-section').hide();
-                           $('#no-patient-selected').show();
                       }
-                 } else if (!patientIdFromUrl && currentDisplayedId) {
                       // If URL has no ID but a patient is currently displayed, hide details
                       console.log("URL changed, no patient ID. Hiding details.");
-                      $('.patient-item').removeClass('active'); // Remove highlight
-                      $('#patient-details-section').hide();
-                      $('#no-patient-selected').show();
-                 } else if (patientIdFromUrl && patientIdFromUrl === currentDisplayedId) {
-                     // If URL has the same ID as currently displayed, do nothing (user navigated back to the same state)
-                      console.log("URL changed but same patient ID. No action needed.");
                  } else {
-                    // If neither URL nor displayed patient has an ID (e.g., went back to dashboard root)
                     console.log("URL changed, no patient selected.");
-                    $('.patient-item').removeClass('active');
-                    $('#patient-details-section').hide();
-                    $('#no-patient-selected').show();
-                    // Optionally refresh list if needed, but not strictly necessary here
                  }
              };
         });

         .btn-success {
             background-color: var(--secondary-color);
             border-color: var(--secondary-color);
+        }
+         .btn-success:hover {
+             background-color: #15a46d; /* Darker green */
+             border-color: #149a68;
         }
         .btn-danger {
             background-color: var(--danger-color);
             border-color: var(--danger-color);
+        }
+         .btn-danger:hover {
+             background-color: #c82333; /* Darker red */
+             border-color: #bd2130;
         }
         .role-toggle {
             display: flex;
             box-shadow: 0 0.15rem 0.5rem 0 rgba(58, 59, 69, 0.05);
             cursor: pointer;
             transition: all 0.2s ease;
+             position: relative; /* Needed for absolute positioning of delete */
         }
         .patient-item:hover {
             transform: translateY(-3px);
             font-size: 1rem;
             color: #333;
         }
+         .care-plan-editable-textarea {
+            background-color: white; /* Make textarea background white */
+            border-radius: 0 0 0.35rem 0.35rem;
+            border: 1px solid var(--border-color);
+            border-top: none;
+            padding: 1.5rem;
+            height: 400px;
+            overflow-y: auto;
+            font-size: 1rem;
+            color: #333;
+            width: 100%;
+            display: none; /* Hidden by default */
+            resize: vertical; /* Allow vertical resize */
+        }
+         .care-plan-editable-textarea:read-only {
+             background-color: var(--light-bg); /* Revert background when read-only */
+             cursor: default; /* Change cursor when read-only */
+         }
         .patient-details-section {
             display: none; /* Hidden by default */
         }
          #patient-feedback {
             background-color: #e9ecef; /* Light grey */
             border-color: #dee2e6; /* Light grey border */
+            white-space: pre-line; /* Preserve line breaks */
+            word-wrap: break-word;
+         }
+         /* Delete button styling */
+         .delete-patient-btn {
+             position: absolute;
+             top: 0.5rem;
+             right: 0.5rem;
+             background: none;
+             border: none;
+             color: var(--dark-color); /* Default color */
+             cursor: pointer;
+             font-size: 1.1rem;
+             padding: 0.3rem; /* Make clickable area larger */
+             line-height: 1;
+             z-index: 10; /* Ensure it's above other content */
+             opacity: 0; /* Hide by default */
+             transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+         }
+         .patient-item:hover .delete-patient-btn {
+              opacity: 1; /* Show on hover */
          }
+         .delete-patient-btn:hover {
+              color: var(--danger-color); /* Red on hover */
+         }
+          /* Ensure patient item content doesn't overlap delete button area */
+          .patient-item > div:first-child {
+               margin-right: 2rem; /* Add margin to the content to make space for the button */
+          }
+          /* Styling for buttons row below tabs */
+          .plan-actions {
+              margin-top: 1rem;
+              display: flex;
+              justify-content: flex-start; /* Align buttons to the left */
+              gap: 10px; /* Space between buttons */
+          }
+          .plan-actions .btn {
+               min-width: 120px; /* Give buttons a minimum width */
+          }
+          .alert-dismissible .btn-close {
+              padding: 0.8rem 1.25rem; /* Increase padding to make close button easier to hit */
+          }
+          .alert-container {
+              margin-top: 1rem;
+          }
     </style>
 </head>
 <body>
                                 <strong>Last Updated:</strong> <span id="patient-timestamp"></span>
                             </div>
                             <div class="care-plan-tabs mt-4">
                                 <ul class="nav nav-tabs" id="carePlanTabs" role="tablist">
                                     <li class="nav-item" role="presentation">
+                                        <!-- We will hide the static updated-plan-content and show a textarea below -->
+                                        <button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan-tab-pane" type="button" role="tab" aria-controls="updated-plan-tab-pane" aria-selected="true">Updated Care Plan</button>
                                     </li>
                                     <li class="nav-item" role="presentation">
+                                        <button class="nav-link" id="original-plan-tab" data-bs-toggle="tab" data-bs-target="#original-plan-tab-pane" type="button" role="tab" aria-controls="original-plan-tab-pane" aria-selected="false">Original Care Plan</button>
                                     </li>
                                 </ul>
                                 <div class="tab-content" id="carePlanTabsContent">
+                                     <!-- Placeholder pane for the updated plan (will be hidden) -->
+                                    <div class="tab-pane fade show active" id="updated-plan-tab-pane" role="tabpanel" aria-labelledby="updated-plan-tab">
+                                        <div class="care-plan-content" id="updated-plan-static-content"></div>
                                     </div>
+                                    <!-- Pane for the original plan -->
+                                    <div class="tab-pane fade" id="original-plan-tab-pane" role="tabpanel" aria-labelledby="original-plan-tab">
                                         <div class="care-plan-content" id="original-plan-content"></div>
                                     </div>
                                 </div>
+                                 <!-- Editable Textarea for Updated Plan -->
+                                 <textarea id="updated-plan-editable-content" class="care-plan-editable-textarea" rows="15" readonly></textarea>
                             </div>
+                             <div class="plan-actions">
+                                 <button class="btn btn-outline-primary" id="edit-plan-btn"><i class="fas fa-edit me-2"></i>Edit Plan</button>
+                                 <button class="btn btn-success" id="save-plan-btn" style="display: none;"><i class="fas fa-save me-2"></i>Save Plan</button>
+                                 <button class="btn btn-primary" id="download-pdf"><i class="fas fa-file-download me-2"></i>Download PDF</button>
+                                 <button class="btn btn-success" id="resend-whatsapp-btn"><i class="fab fa-whatsapp me-2"></i>Send WhatsApp</button>
+                             </div>
+                             <div id="plan-actions-alerts" class="alert-container">
+                                 <!-- Alerts for save/resend will appear here -->
+                             </div>
                         </div>
                     </div>
                 </div>
             $('.role-toggle-btn[data-role="doctor"]').addClass('active');
             $('.role-toggle-btn[data-role="patient"]').removeClass('active');
+            // Placeholder for storing selected patient ID
+            let currentlySelectedPatientId = null;
+            let isEditing = false; // State variable for edit mode
             // Load all patients
             function loadPatients() {
                 console.log("Loading patients...");
                                             </div>
                                             <span class="patient-status ${statusBadgeClass[patient.status] || 'status-unknown'}">${statusText[patient.status] || 'UNKNOWN'}</span>
                                         </div>
+                                        <button class="delete-patient-btn" data-id="${patient.id}" title="Delete Patient">
+                                             <i class="fas fa-trash-alt"></i>
+                                        </button>
                                     </li>
                                 `;
                                 $('#patient-list').append(patientHtml);
                             });
+                            // Add click event to patient items (excluding delete button clicks)
+                             $('#patient-list').on('click', '.patient-item', function(event) {
+                                 // Check if the click target is the delete button or its icon
+                                 if (!$(event.target).closest('.delete-patient-btn').length) {
+                                     const patientId = $(this).data('id');
+                                     // Only load details if not already viewing this patient AND not in edit mode
+                                     if (currentlySelectedPatientId !== patientId && !isEditing) {
+                                         // Update URL without full page reload
+                                         history.pushState({ patient_id: patientId }, '', `/doctor_dashboard?patient_id=${patientId}`);
+                                         loadPatientDetails(patientId);
+                                     } else if (isEditing) {
+                                          // Prompt user if they try to switch while editing
+                                          if (confirm("You have unsaved changes. Discard changes and load new patient details?")) {
+                                              isEditing = false; // Reset state
+                                              // Update URL and load
+                                              history.pushState({ patient_id: patientId }, '', `/doctor_dashboard?patient_id=${patientId}`);
+                                              loadPatientDetails(patientId);
+                                          }
+                                     }
+                                 }
+                             });
+                            // After loading the list, check if a patient ID is in the URL or if a patient was previously selected
                             const urlParams = new URLSearchParams(window.location.search);
+                            const patientIdFromUrl = urlParams.get('patient_id');
+                            if (patientIdFromUrl) {
+                                console.log("Checking for patient from URL:", patientIdFromUrl);
                                 // Check if this ID exists in the loaded list before trying to load details
+                                if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
+                                    loadPatientDetails(patientIdFromUrl);
                                 } else {
+                                     console.warn(`Patient ID "${patientIdFromUrl}" from URL not found in loaded list.`);
+                                     // Clear URL param if patient not found
+                                      history.replaceState({}, '', '/doctor_dashboard');
+                                     resetDetailsPane(); // Use reset function
                                 }
+                            } else if (currentlySelectedPatientId) {
+                                // If no ID in URL, but we had one selected before refresh/reload, try to load it
+                                console.log("Checking for previously selected patient:", currentlySelectedPatientId);
+                                if ($(`.patient-item[data-id="${currentlySelectedPatientId}"]`).length > 0) {
+                                    loadPatientDetails(currentlySelectedPatientId);
+                                } else {
+                                     console.warn(`Previously selected patient ID "${currentlySelectedPatientId}" not found in loaded list.`);
+                                      history.replaceState({}, '', '/doctor_dashboard');
+                                     resetDetailsPane(); // Use reset function
+                                }
+                            }
+                             else {
+                                resetDetailsPane(); // Use reset function
                             }
                             $('#patient-list').empty();
                             $('#emergency-alerts').empty();
                             $('#no-patients-found').show(); // Show no patients message
+                            resetDetailsPane(); // Use reset function
                         }
                     },
                     error: function(xhr, status, error) {
                         $('#patient-list-error').show().text('Error loading patients. Please try refreshing.');
                         $('#patient-count').text('0');
                         $('#emergency-alerts').empty();
+                         resetDetailsPane(); // Use reset function on API error
                     }
                 });
             }
+            // Function to reset the patient details pane to the placeholder state
+            function resetDetailsPane() {
+                 $('.patient-item').removeClass('active'); // Remove highlight from all items
+                 $('#patient-details-section').hide(); // Hide details section
+                 $('#no-patient-selected').show(); // Show placeholder message
+                 currentlySelectedPatientId = null; // Reset selected ID
+                 isEditing = false; // Ensure edit mode is off
+                 toggleEditMode(false); // Reset button states etc.
+                 $('#plan-actions-alerts').empty(); // Clear any alerts
+            }
+            // Load patient details and populate the pane
             function loadPatientDetails(patientId) {
                  console.log("Attempting to load details for patient ID:", patientId);
+                 currentlySelectedPatientId = patientId; // Store the ID
+                 isEditing = false; // Ensure edit mode is off when loading new details
+                 toggleEditMode(false); // Reset button states
                 // Highlight selected patient
                 $('.patient-item').removeClass('active');
                 $(`.patient-item[data-id="${patientId}"]`).addClass('active');
                 // Show patient details section, hide placeholder
                 $('#no-patient-selected').hide();
                 $('#patient-details-section').show();
+                 $('#plan-actions-alerts').empty(); // Clear any alerts from previous patient
+                // Optional: Show a loader in the details pane while fetching
+                // $('#patient-details-section .card-body').html('<div class="loader"></div>');
                 $.ajax({
                     url: `/get_patient/${patientId}`,
                     type: 'GET',
                     success: function(response) {
+                         // Hide loader if shown
                         if (response.success) {
                             const patient = response.patient;
                             console.log("Successfully loaded patient details:", patient.name);
                                 .attr('class', 'patient-status ' + (statusBadgeClass[patient.status] || 'status-unknown'));
                             // Update care plans content
+                            // Populate both the static div and the editable textarea
+                            $('#updated-plan-static-content').text(patient.updated_plan || 'No updated care plan available.');
+                            $('#updated-plan-editable-content').val(patient.updated_plan || ''); // Use val() for textarea
                              $('#original-plan-content').text(patient.original_plan || 'No original care plan available (or could not be extracted from PDF).');
+                            // Reset tab to updated plan and show static content first
                             $('#carePlanTabs button').removeClass('active').attr('aria-selected', 'false');
                             $('#updated-plan-tab').addClass('active').attr('aria-selected', 'true');
                              $('#carePlanTabsContent .tab-pane').removeClass('show active');
+                             $('#updated-plan-tab-pane').addClass('show active'); // Show static content pane
+                             $('#updated-plan-static-content').show(); // Ensure static div is visible
+                             $('#updated-plan-editable-content').hide().prop('readonly', true); // Ensure textarea is hidden and read-only
+                            // Set up Download PDF button
                             $('#download-pdf').off('click').on('click', function() {
                                 console.log("Download button clicked for patient ID:", patient.id);
                                 window.location.href = `/download_pdf/${patient.id}`;
                             });
+                            // Set up Send WhatsApp button
+                            $('#resend-whatsapp-btn').off('click').on('click', function() {
+                                console.log("Send WhatsApp button clicked for patient ID:", patient.id);
+                                sendWhatsApp(patient.id);
+                            });
                         } else {
                             console.error('Error loading patient details:', response.error);
                             alert('Error: ' + response.error);
+                            resetDetailsPane(); // Reset on error
+                             history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
                         }
                     },
                     error: function(xhr, status, error) {
                          console.error("API Error loading patient details:", error, xhr.responseText);
+                        alert('Error loading patient details. Patient may no longer exist.');
+                         resetDetailsPane(); // Reset on API error
+                         history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
+                    }
+                });
+            }
+            // Function to toggle between view and edit mode for the updated plan
+            function toggleEditMode(enable) {
+                 isEditing = enable;
+                 if (enable) {
+                     // Switch to edit mode
+                     $('#updated-plan-static-content').hide(); // Hide static div
+                     $('#updated-plan-tab-pane').removeClass('show active'); // Hide the static pane
+                     $('#updated-plan-editable-content').show().prop('readonly', false).focus(); // Show & enable textarea, focus it
+                     $('#edit-plan-btn').hide(); // Hide Edit button
+                     $('#save-plan-btn').show().prop('disabled', false); // Show & enable Save button
+                     // Disable other actions while editing
+                     $('#download-pdf').prop('disabled', true);
+                     $('#resend-whatsapp-btn').prop('disabled', true);
+                     $('#carePlanTabs button:not(#updated-plan-tab)').prop('disabled', true); // Disable other tabs
+                     // Show a warning if needed
+                     // displayAlert('warning', '<i class="fas fa-pencil-alt me-2"></i> You are in edit mode. Remember to save your changes.', 5000);
+                 } else {
+                     // Switch to view mode (or after saving/cancelling)
+                     $('#updated-plan-static-content').show(); // Show static div
+                     // Make sure the Updated Plan tab is active and its pane is shown
+                     $('#carePlanTabs button').removeClass('active').attr('aria-selected', 'false').prop('disabled', false); // Enable all tabs
+                     $('#updated-plan-tab').addClass('active').attr('aria-selected', 'true');
+                     $('#carePlanTabsContent .tab-pane').removeClass('show active');
+                     $('#updated-plan-tab-pane').addClass('show active');
+                     $('#updated-plan-editable-content').hide().prop('readonly', true); // Hide & disable textarea
+                     $('#edit-plan-btn').show().prop('disabled', false); // Show & enable Edit button
+                     $('#save-plan-btn').hide(); // Hide Save button
+                     // Enable other actions
+                     $('#download-pdf').prop('disabled', false);
+                     $('#resend-whatsapp-btn').prop('disabled', false);
+                     $('#carePlanTabs button').prop('disabled', false); // Re-enable all tabs
+                 }
+            }
+            // Handle Edit Plan button click
+            $('#edit-plan-btn').on('click', function() {
+                 if (currentlySelectedPatientId) {
+                     toggleEditMode(true);
+                 }
+            });
+            // Handle Save Plan button click
+            $('#save-plan-btn').on('click', function() {
+                 if (currentlySelectedPatientId) {
+                      const editedPlanText = $('#updated-plan-editable-content').val();
+                       if (!editedPlanText.trim()) {
+                           displayAlert('danger', 'Care plan cannot be empty.', 5000);
+                           return; // Stop save process if empty
+                       }
+                     saveCarePlan(currentlySelectedPatientId, editedPlanText);
+                 }
+            });
+            // Function to save the edited care plan
+            function saveCarePlan(patientId, updatedPlanText) {
+                console.log(`Saving care plan for patient ID: ${patientId}`);
+                 // Disable buttons and show loader during save
+                 $('#save-plan-btn').prop('disabled', true).find('i').removeClass().addClass('fas fa-spinner fa-spin me-2');
+                 $('#edit-plan-btn').prop('disabled', true); // Also disable edit button during save
+                 $('#download-pdf').prop('disabled', true);
+                 $('#resend-whatsapp-btn').prop('disabled', true);
+                 $('#carePlanTabs button').prop('disabled', true); // Disable tabs
+                $.ajax({
+                    url: `/save_care_plan/${patientId}`,
+                    type: 'PUT',
+                    contentType: 'application/json',
+                    data: JSON.stringify({ updated_plan: updatedPlanText }),
+                    success: function(response) {
+                        console.log("Save successful:", response.message);
+                        displayAlert('success', '<i class="fas fa-check-circle me-2"></i> Care plan saved successfully!', 5000);
+                        // Update the static content area with the saved text
+                        $('#updated-plan-static-content').text(updatedPlanText);
+                         // Update the timestamp display
+                         $('#patient-timestamp').text(response.new_timestamp ? new Date(response.new_timestamp).toLocaleString() : 'N/A');
+                        // Exit edit mode
+                        toggleEditMode(false);
+                        // Optionally reload the patient list to update the timestamp/status in the list item
+                         loadPatients(); // This will preserve selection via currentlySelectedPatientId logic
+                    },
+                    error: function(xhr, status, error) {
+                        console.error("Save failed:", error, xhr.responseText);
+                        let errorMessage = 'An error occurred while saving the care plan.';
+                         if (xhr.responseJSON && xhr.responseJSON.error) {
+                             errorMessage = xhr.responseJSON.error;
+                         } else if (xhr.responseText) {
+                              errorMessage += ": " + xhr.responseText;
+                         } else {
+                              errorMessage += ": " + error;
+                         }
+                        displayAlert('danger', `<i class="fas fa-times-circle me-2"></i> ${errorMessage}`, 8000); // Show error alert
+                        // Re-enable save button, keep in edit mode
+                         $('#save-plan-btn').prop('disabled', false).find('i').removeClass().addClass('fas fa-save me-2');
+                         $('#edit-plan-btn').prop('disabled', false); // Re-enable edit button
+                          $('#download-pdf').prop('disabled', false);
+                         $('#resend-whatsapp-btn').prop('disabled', false);
+                         $('#carePlanTabs button').prop('disabled', false); // Re-enable tabs
                     }
                 });
             }
+             // Function to send WhatsApp message
+            function sendWhatsApp(patientId) {
+                 console.log(`Attempting to send WhatsApp for patient ID: ${patientId}`);
+                 // Disable button and show loader during send
+                 $('#resend-whatsapp-btn').prop('disabled', true).find('i').removeClass().addClass('fas fa-spinner fa-spin me-2');
+                 $('#edit-plan-btn').prop('disabled', true); // Also disable edit button
+                  $('#save-plan-btn').prop('disabled', true); // Also disable save button if visible
+                 $('#download-pdf').prop('disabled', true);
+                 $('#carePlanTabs button').prop('disabled', true); // Disable tabs
+                 $.ajax({
+                     url: `/resend_whatsapp/${patientId}`,
+                     type: 'POST',
+                     success: function(response) {
+                          console.log("WhatsApp send response:", response);
+                          let alertType = 'success';
+                          let alertMessage = '<i class="fab fa-whatsapp me-2"></i> WhatsApp message sent successfully!';
+                          if (response.whatsapp_sent === false) {
+                              alertType = 'warning';
+                              alertMessage = '<i class="fas fa-exclamation-triangle me-2"></i> Failed to send WhatsApp message (check Twilio config or number).';
+                          } else if (!response.success) { // Handle server-side error response (success: false)
+                               alertType = 'danger';
+                               alertMessage = '<i class="fas fa-times-circle me-2"></i> ' + (response.error || 'An error occurred sending WhatsApp.');
+                          }
+                         displayAlert(alertType, alertMessage, 8000); // Show alert
+                     },
+                     error: function(xhr, status, error) {
+                          console.error("WhatsApp send failed:", error, xhr.responseText);
+                           let errorMessage = 'An error occurred while sending the WhatsApp message.';
+                             if (xhr.responseJSON && xhr.responseJSON.error) {
+                                 errorMessage = xhr.responseJSON.error;
+                             } else if (xhr.responseText) {
+                                  errorMessage += ": " + xhr.responseText;
+                             } else {
+                                  errorMessage += ": " + error;
+                             }
+                          displayAlert('danger', `<i class="fas fa-times-circle me-2"></i> ${errorMessage}`, 8000); // Show error alert
+                     },
+                     complete: function() {
+                          // Always re-enable buttons after request completes
+                          $('#resend-whatsapp-btn').prop('disabled', false).find('i').removeClass().addClass('fab fa-whatsapp me-2');
+                          $('#edit-plan-btn').prop('disabled', false);
+                           if (!isEditing) { // Only re-enable save if not in edit mode
+                                $('#save-plan-btn').hide();
+                           } else {
+                                $('#save-plan-btn').prop('disabled', false);
+                           }
+                           $('#download-pdf').prop('disabled', false);
+                           $('#carePlanTabs button').prop('disabled', false); // Re-enable tabs
+                     }
+                 });
+             }
+             // Function to display temporary alerts
+             function displayAlert(type, message, duration = 5000) {
+                const alertHtml = `
+                     <div class="alert alert-${type} alert-dismissible fade show" role="alert">
+                          ${message}
+                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                     </div>
+                 `;
+                 const $alert = $(alertHtml);
+                 $('#plan-actions-alerts').append($alert);
+                 // Auto-dismiss after duration
+                 if (duration > 0) {
+                     setTimeout(function() {
+                         $alert.alert('close'); // Use Bootstrap's close method
+                     }, duration);
+                 }
+             }
+            // Handle patient deletion using event delegation
+            $('#patient-list').on('click', '.delete-patient-btn', function(event) {
+                event.preventDefault(); // Prevent default button click behavior
+                event.stopPropagation(); // Prevent the parent list item click handler from firing
+                const patientIdToDelete = $(this).data('id');
+                const $patientItem = $(this).closest('.patient-item');
+                const patientName = $patientItem.find('h6').text() || 'Unnamed Patient';
+                // Check if the patient being deleted is the one currently being edited
+                if (isEditing && currentlySelectedPatientId === patientIdToDelete) {
+                     alert("Please save or cancel your edits before deleting this patient.");
+                     return; // Prevent deletion while editing the same patient
+                }
+                 // Check if the patient being deleted is the one currently selected (even if not editing)
+                if (currentlySelectedPatientId === patientIdToDelete) {
+                     // If deleting the currently viewed patient, add an extra confirmation step
+                    if (!confirm(`The record for ${patientName} is currently being viewed. Are you sure you want to delete it? This action cannot be undone.`)) {
+                         console.log("Delete cancelled by user (currently viewing).");
+                         return;
+                    }
+                } else {
+                     // For other patients, just a standard confirmation
+                     if (!confirm(`Are you sure you want to delete the record for ${patientName}? This action cannot be undone.`)) {
+                         console.log("Delete cancelled by user.");
+                         return;
+                    }
+                }
+                console.log(`Deleting patient ID: ${patientIdToDelete}`);
+                // Optionally show a spinner or disable the delete button
+                 const $deleteBtnIcon = $(this).find('i');
+                 $deleteBtnIcon.removeClass().addClass('fas fa-spinner fa-spin');
+                 $(this).prop('disabled', true);
+                $.ajax({
+                    url: `/delete_patient/${patientIdToDelete}`,
+                    type: 'DELETE',
+                    success: function(response) {
+                        console.log("Delete successful:", response.message);
+                        // Remove the patient item from the list
+                        $patientItem.remove();
+                        // Update patient count
+                        $('#patient-count').text($('#patient-list li:visible').length); // Count visible items after potential search filter
+                        // Check if the deleted patient was currently selected
+                        if (currentlySelectedPatientId === patientIdToDelete) {
+                            console.log("Deleted currently selected patient. Clearing details pane.");
+                            resetDetailsPane(); // Use reset function
+                            history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
+                        }
+                        // Check if the list is now empty
+                        if ($('#patient-list li').length === 0) {
+                            $('#no-patients-found').show();
+                        }
+                         // Reload the full patient list could also be an option here
+                         // instead of just removing the element, to ensure sorting/alerts are updated
+                         // loadPatients();
+                    },
+                    error: function(xhr, status, error) {
+                         console.error("Delete failed:", error, xhr.responseText);
+                        // Re-enable button and restore icon on error
+                         $deleteBtnIcon.removeClass().addClass('fas fa-trash-alt');
+                         $(this).prop('disabled', false);
+                        let errorMessage = 'An error occurred during deletion.';
+                         if (xhr.responseJSON && xhr.responseJSON.error) {
+                             errorMessage = xhr.responseJSON.error;
+                         } else if (xhr.responseText) {
+                              errorMessage += ": " + xhr.responseText;
+                         } else {
+                              errorMessage += ": " + error;
+                         }
+                        alert(`Error deleting patient: ${errorMessage}`);
+                    }
+                });
+            });
+            // Patient search functionality (updated count for filtered list)
             $('#patient-search').on('input', function() {
                 const searchTerm = $(this).val().toLowerCase();
+                let foundCount = 0;
                 $('.patient-item').each(function() {
                     const patientName = $(this).find('h6').text().toLowerCase();
                     const patientDetails = $(this).find('small').text().toLowerCase(); // Includes age/gender/timestamp
                     if (patientName.includes(searchTerm) || patientDetails.includes(searchTerm)) {
                         $(this).show();
+                        foundCount++;
                     } else {
                         $(this).hide();
                     }
                 });
+                $('#patient-count').text(foundCount); // Update count based on visible items
+                if (foundCount > 0) {
                     $('#no-patients-found').hide();
                 } else {
                     $('#no-patients-found').show();
             // Periodically check for emergency notifications (and refresh list if found)
             function checkEmergencyNotifications() {
                 console.log("Checking for emergency notifications...");
+                 // Check if the current alert is an emergency alert before fetching again
+                 if ($('#emergency-alerts .alert-danger').length > 0) {
+                    // If an emergency alert is already shown, maybe check less frequently or skip some checks?
+                    // For now, always fetch to get potentially new emergencies or status changes.
+                 }
                 $.ajax({
                     url: '/get_emergency_notifications',
                     type: 'GET',
                     success: function(response) {
                         if (response.success && response.notifications.length > 0) {
                              console.log(`Found ${response.notifications.length} emergency notifications.`);
+                            const alertCount = response.notifications.length;
+                            // Simple check: does the number of emergencies match the current alert text?
+                            const currentAlertText = $('#emergency-alerts strong').text();
+                             const newAlertText = `${alertCount} Emergency patient${alertCount > 1 ? 's' : ''} requiring immediate attention!`;
+                            if (currentAlertText !== newAlertText) {
                                  // Update emergency alerts section
                                 let alertHtml = `
                                     <div class="alert alert-danger mb-3">
                                         <i class="fas fa-exclamation-triangle me-2"></i>
+                                        <strong>${newAlertText}</strong>
                                     </div>
                                 `;
                                 $('#emergency-alerts').html(alertHtml);
                                 // Reload the patient list to update sorting and potentially highlight new emergencies
                                 console.log("Reloading patient list due to new emergency alerts...");
                                 loadPatients(); // This will re-render the list and handle selection from URL/previously selected ID
                             }
                         } else {
             }
             // Check for emergency notifications periodically (e.g., every 30 seconds)
             setInterval(checkEmergencyNotifications, 30000); // 30 seconds
              // Handle browser back/forward button for URL patient ID
                  const urlParams = new URLSearchParams(window.location.search);
                  const patientIdFromUrl = urlParams.get('patient_id');
+                 // Get the ID of the patient currently *displayed* in the details pane
+                 const currentlyDisplayedPatientId = $('#patient-details-section').is(':visible') ? currentlySelectedPatientId : null;
+                 if (patientIdFromUrl && patientIdFromUrl !== currentlyDisplayedPatientId) {
+                     // If URL has an ID and it's different from the current one
+                     console.log(`URL changed to patient ID: ${patientIdFromUrl}. Attempting to load details.`);
+                      // Prompt user if they have unsaved edits before navigating
+                      if (isEditing) {
+                          if (!confirm("You have unsaved changes. Discard changes and navigate to the selected patient?")) {
+                              // User cancelled, prevent navigation
+                              // Need to restore the original URL parameter
+                              history.pushState({ patient_id: currentlyDisplayedPatientId }, '', `/doctor_dashboard${currentlyDisplayedPatientId ? '?patient_id=' + currentlyDisplayedPatientId : ''}`);
+                              return; // Stop the popstate handling
+                          }
+                           isEditing = false; // User confirmed discard
+                      }
+                     // Check if this ID exists in the currently rendered list before calling API
                       if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
                           loadPatientDetails(patientIdFromUrl);
                       } else {
                            console.warn(`Patient ID "${patientIdFromUrl}" from URL not found in current list.`);
+                           resetDetailsPane(); // Use reset function
+                           history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param if not found
                       }
+                 } else if (!patientIdFromUrl && currentlyDisplayedPatientId) {
                       // If URL has no ID but a patient is currently displayed, hide details
                       console.log("URL changed, no patient ID. Hiding details.");
+                       // Prompt user if they have unsaved edits before navigating away
+                       if (isEditing) {
+                           if (!confirm("You have unsaved changes. Discard changes and navigate away?")) {
+                               // User cancelled, prevent navigation
+                               // Need to restore the original URL parameter
+                               history.pushState({ patient_id: currentlyDisplayedPatientId }, '', `/doctor_dashboard${currentlyDisplayedPatientId ? '?patient_id=' + currentlyDisplayedPatientId : ''}`);
+                                return; // Stop the popstate handling
+                           }
+                           isEditing = false; // User confirmed discard
+                       }
+                      resetDetailsPane(); // Use reset function
+                 } else if (patientIdFromUrl && patientIdFromUrl === currentlyDisplayedPatientId) {
+                     // If URL has the same ID as currently displayed, and not in edit mode, do nothing
+                      if (!isEditing) {
+                          console.log("URL changed but same patient ID. No action needed.");
+                      } else {
+                           // If in edit mode, and URL is same, user might have just saved/cancelled edits
+                           // The loadPatientDetails function (called on save success) handles resetting state.
+                           // If user somehow manually triggered popstate while editing without saving/cancelling...
+                           // We could re-confirm, but the loadPatients/loadPatientDetails calls triggered on page load
+                           // already handle initial state. This case is less common via standard browser UI.
+                           console.log("URL same, in edit mode. State should be handled by save/cancel flow.");
+                           // Optionally, if state seems inconsistent, force a reload:
+                           // loadPatientDetails(patientIdFromUrl);
+                      }
                  } else {
+                    // If neither URL nor displayed patient has an ID (e.g., went back to dashboard root from a state with no patient selected)
                     console.log("URL changed, no patient selected.");
+                     // No need to prompt for edits if no patient was selected/displayed
+                    resetDetailsPane(); // Use reset function
                  }
              };
         });