Update templates/doctor_dashboard.html

templates/doctor_dashboard.html

@@ -54,14 +54,28 @@
              background-color: #2e59d9; /* Darker blue */
              border-color: #2653d4;
         }
-        .btn-success {
+         .btn-success {
             background-color: var(--secondary-color);
             border-color: var(--secondary-color);
+            color: white; /* Ensure text is white */
+        }
+         .btn-success:hover {
+             background-color: #17a673; /* Darker green */
+             border-color: #159d6b;
         }
         .btn-danger {
             background-color: var(--danger-color);
             border-color: var(--danger-color);
         }
+         .btn-warning {
+             background-color: var(--warning-color);
+             border-color: var(--warning-color);
+             color: #212529; /* Dark text for yellow */
+         }
+         .btn-warning:hover {
+             background-color: #f0ad4e; /* Darker yellow */
+             border-color: #ec971f;
+         }
         .role-toggle {
             display: flex;
             align-items: center;
@@ -112,7 +126,6 @@
             box-shadow: 0 0.3rem 0.8rem 0 rgba(58, 59, 69, 0.1);
             background-color: #fcfcfc; /* Slightly lighter hover background */
         }
-
         .patient-item.active {
             border: 1px solid var(--primary-color); /* Highlight active item */
             border-left: 4px solid var(--primary-color);
@@ -133,7 +146,6 @@
          .patient-item.unknown { /* Style for unknown status in list */
             border-left-color: var(--dark-color);
         }
-
         .patient-status {
             padding: 0.3rem 0.8rem; /* Slightly larger padding */
             border-radius: 50rem;
@@ -164,7 +176,7 @@
             margin-top: 1.5rem;
         }
         .care-plan-content {
-            background-color: var(--light-bg);
+            background-color: white; /* Changed background */
             border-radius: 0 0 0.35rem 0.35rem; /* Rounded corners at bottom */
             border: 1px solid var(--border-color);
             border-top: none; /* No border top because of tabs */
@@ -177,6 +189,18 @@
             font-size: 1rem;
             color: #333;
         }
+        #updated-plan-content-edit {
+             width: 100%;
+             height: 400px; /* Match display height */
+             padding: 1.5rem;
+             border: 1px solid var(--border-color);
+             border-top: none;
+             border-radius: 0 0 0.35rem 0.35rem;
+             font-size: 1rem;
+             color: #333;
+             resize: vertical; /* Allow vertical resize */
+             display: none; /* Hidden by default */
+        }
         .patient-details-section {
             display: none; /* Hidden by default */
         }
@@ -213,6 +237,10 @@
          #patient-feedback {
             background-color: #e9ecef; /* Light grey */
             border-color: #dee2e6; /* Light grey border */
+            padding: 1rem; /* Added padding */
+            border-radius: 0.25rem; /* Rounded corners */
+            white-space: pre-line; /* Preserve line breaks */
+            word-wrap: break-word; /* Prevent overflow */
          }
          /* Delete button styling */
          .delete-patient-btn {
@@ -240,6 +268,36 @@
           .patient-item > div:first-child {
                margin-right: 2rem; /* Add margin to the content to make space for the button */
           }
+         .btn-spinner {
+             display: inline-block;
+             width: 1rem;
+             height: 1rem;
+             vertical-align: middle;
+             border-radius: 50%;
+             border: 0.15em solid currentColor;
+             border-right-color: transparent;
+             animation: .75s linear infinite spinner-border;
+         }
+         @keyframes spinner-border {
+             to { transform: rotate(360deg); }
+         }
+         .d-flex.align-items-center > .btn-spinner {
+              margin-left: 0.5rem;
+         }
+         .status-dot {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 5px;
+            vertical-align: middle;
+         }
+         .status-dot.emergency { background-color: var(--danger-color); }
+         .status-dot.deteriorating { background-color: var(--warning-color); }
+         .status-dot.improving { background-color: var(--secondary-color); }
+         .status-dot.stable { background-color: var(--info-color); }
+         .status-dot.unknown { background-color: var(--dark-color); }
+
     </style>
 </head>
 <body>
@@ -260,12 +318,19 @@
                     </li>
                     <li class="nav-item">
                         <div class="role-toggle">
-                            <a href="/" class="role-toggle-btn" data-role="patient">
-                                <i class="fas fa-user"></i> Patient
-                            </a>
-                            <a href="/doctor_dashboard" class="role-toggle-btn active ms-2" data-role="doctor">
-                                <i class="fas fa-user-md"></i> Doctor
-                            </a>
+                            <!-- Using forms for role switching -->
+                             <form id="switch-to-patient-form" action="/switch_role" method="post" class="d-inline-block me-2">
+                                <input type="hidden" name="role" value="patient">
+                                <button type="submit" class="role-toggle-btn">
+                                     <i class="fas fa-user"></i> Patient
+                                </button>
+                             </form>
+                             <form id="switch-to-doctor-form" action="/switch_role" method="post" class="d-inline-block">
+                                <input type="hidden" name="role" value="doctor">
+                                <button type="submit" class="role-toggle-btn active">
+                                     <i class="fas fa-user-md"></i> Doctor
+                                </button>
+                             </form>
                         </div>
                     </li>
                 </ul>
@@ -328,28 +393,56 @@
                                 <p id="patient-feedback" class="p-3 bg-light rounded border"></p>
                             </div>
 
-                            <div class="mb-3">
+                             <div class="mb-3">
                                 <strong>Last Updated:</strong> <span id="patient-timestamp"></span>
-                            </div>
+                             </div>
+
+                            <!-- Action Buttons -->
+                             <div class="d-flex gap-2 mb-4">
+                                 <button class="btn btn-primary d-flex align-items-center" id="download-pdf">
+                                     <i class="fas fa-file-download me-2"></i>Download Care Plan PDF
+                                 </button>
+                                  <!-- WhatsApp button - initially hidden until patient selected -->
+                                 <button class="btn btn-success d-flex align-items-center" id="send-whatsapp-btn" style="display: none;">
+                                      <i class="fab fa-whatsapp me-2"></i>Send via WhatsApp
+                                 </button>
+                                 <!-- Loader/Feedback for WhatsApp send -->
+                                 <div id="whatsapp-feedback" class="ms-3 align-self-center"></div>
+                             </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>
+                                        <button class="nav-link active" id="updated-plan-tab" data-bs-toggle="tab" data-bs-target="#updated-plan-container" type="button" role="tab" aria-controls="updated-plan-container" 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>
+                                     <!-- Updated Plan Container -->
+                                    <div class="tab-pane fade show active" id="updated-plan-container" role="tabpanel" aria-labelledby="updated-plan-tab">
+                                         <div class="d-flex justify-content-end align-items-center mt-3 me-3" id="edit-save-buttons">
+                                             <button class="btn btn-sm btn-warning me-2" id="edit-plan-btn">
+                                                  <i class="fas fa-edit me-1"></i> Edit
+                                             </button>
+                                              <button class="btn btn-sm btn-success me-2" id="save-plan-btn" style="display: none;">
+                                                  <i class="fas fa-save me-1"></i> Save
+                                              </button>
+                                               <button class="btn btn-sm btn-secondary" id="cancel-plan-btn" style="display: none;">
+                                                  <i class="fas fa-times me-1"></i> Cancel
+                                              </button>
+                                              <div id="save-feedback" class="ms-2 small"></div>
+                                         </div>
+
+                                        <!-- Display area -->
+                                        <div class="care-plan-content" id="updated-plan-content-display"></div>
+                                        <!-- Edit area (textarea) -->
+                                        <textarea class="form-control" id="updated-plan-content-edit" style="display: none;"></textarea>
                                     </div>
+
+                                    <!-- Original Plan Tab -->
                                     <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>
@@ -371,12 +464,25 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
         $(document).ready(function() {
-            // Set active role button on load
-            $('.role-toggle-btn[data-role="doctor"]').addClass('active');
-            $('.role-toggle-btn[data-role="patient"]').removeClass('active');
+            // Set active role button on load (handled by forms now)
+            // $('.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 isEditingPlan = false; // State variable for edit mode
+
+            // Elements for Updated Plan editing
+            const $updatedPlanDisplay = $('#updated-plan-content-display');
+            const $updatedPlanEdit = $('#updated-plan-content-edit');
+            const $editBtn = $('#edit-plan-btn');
+            const $saveBtn = $('#save-plan-btn');
+            const $cancelBtn = $('#cancel-plan-btn');
+            const $saveFeedback = $('#save-feedback');
+             const $whatsappBtn = $('#send-whatsapp-btn');
+             const $whatsappFeedback = $('#whatsapp-feedback');
+             const $carePlanTabs = $('#carePlanTabs button'); // All tab buttons
+
 
             // Load all patients
             function loadPatients() {
@@ -385,7 +491,6 @@
                 $('#no-patients-found').hide();
                 $('#patient-list-error').hide(); // Hide previous error
                 $('#patient-list').empty(); // Clear current list
-
                 $.ajax({
                     url: '/get_patients',
                     type: 'GET',
@@ -395,7 +500,6 @@
                              console.log("Patients loaded:", response.patients.length);
                             // Update patient count
                             $('#patient-count').text(response.patients.length);
-
                             // Sort patients by status priority (Emergency first) then timestamp (newest first)
                             const statusPriority = { 'emergency': 0, 'deteriorating': 1, 'improving': 2, 'stable': 3, 'unknown': 4 };
                             const sortedPatients = response.patients.sort((a, b) => {
@@ -408,7 +512,6 @@
                                 const dateB = new Date(b.timestamp || '1900-01-01T00:00:00Z'); // Handle missing timestamp
                                 return dateB - dateA; // Newest first
                             });
-
                             // Populate emergency alerts
                             const emergencyPatients = sortedPatients.filter(p => p.status === 'emergency');
                             if (emergencyPatients.length > 0) {
@@ -422,7 +525,6 @@
                             } else {
                                 $('#emergency-alerts').empty();
                             }
-
                             // Populate patient list
                             sortedPatients.forEach(patient => {
                                 const statusText = {
@@ -454,66 +556,74 @@
                                                 <small class="text-muted">Age: ${patient.age || 'N/A'} | Gender: ${patient.gender || 'N/A'}</small><br>
                                                  <small class="text-muted">Last Updated: ${patient.timestamp ? new Date(patient.timestamp).toLocaleString() : 'N/A'}</small>
                                             </div>
-                                            <span class="patient-status ${statusBadgeClass[patient.status] || 'status-unknown'}">${statusText[patient.status] || 'UNKNOWN'}</span>
+                                            <span class="patient-status ${statusBadgeClass[patient.status] || 'status-unknown'}">
+                                                 <span class="status-dot ${statusClass[patient.status] || 'unknown'}"></span>
+                                                ${statusText[patient.status] || 'UNKNOWN'}
+                                            </span>
                                         </div>
-                                        <button class="delete-patient-btn" data-id="${patient.id}">
+                                        <button class="delete-patient-btn" data-id="${patient.id}" title="Delete Patient Record">
                                              <i class="fas fa-trash-alt"></i>
                                         </button>
                                     </li>
                                 `;
                                 $('#patient-list').append(patientHtml);
                             });
+                            // Remove previous event handlers before adding new ones
+                            $('#patient-list').off('click', '.patient-item');
+                            $('#patient-list').off('click', '.delete-patient-btn');
 
                             // 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 === 0) {
                                      const patientId = $(this).data('id');
+                                      // Check if currently editing before switching
+                                     if (isEditingPlan && currentlySelectedPatientId !== patientId) {
+                                         if (!confirm("You have unsaved changes. Discard changes and switch patients?")) {
+                                             return; // Do not switch if user cancels
+                                         }
+                                     }
                                      // Update URL without full page reload
                                      history.pushState({ patient_id: patientId }, '', `/doctor_dashboard?patient_id=${patientId}`);
                                      loadPatientDetails(patientId);
                                  }
                              });
-
+                            // Add click event for deletion (delegated)
+                             $('#patient-list').on('click', '.delete-patient-btn', function(event) {
+                                 // This handler is separate and will only fire for the delete button
+                                 handleDeletePatient($(this).data('id'));
+                             });
 
                             // 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);
+                            // Determine which patient ID to try loading initially
+                            let idToLoad = patientIdFromUrl || currentlySelectedPatientId;
+
+                            if (idToLoad) {
+                                console.log("Checking for patient from URL or previously selected:", idToLoad);
                                 // Check if this ID exists in the loaded list before trying to load details
-                                if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
-                                    loadPatientDetails(patientIdFromUrl);
+                                if ($(`.patient-item[data-id="${idToLoad}"]`).length > 0) {
+                                    loadPatientDetails(idToLoad);
                                 } else {
-                                     console.warn(`Patient ID "${patientIdFromUrl}" from URL not found in loaded list.`);
-                                     // Clear URL param if patient not found
+                                     console.warn(`Patient ID "${idToLoad}" from URL/previous not found in loaded list.`);
+                                     // Clear URL param and reset if patient not found
                                       history.replaceState({}, '', '/doctor_dashboard');
                                      $('#no-patient-selected').show();
                                      $('#patient-details-section').hide();
                                      currentlySelectedPatientId = null; // Reset selected ID
+                                     resetCarePlanEditState(); // Reset edit state
+                                     $whatsappBtn.hide(); // Hide WhatsApp button
                                 }
-                            } 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');
-                                     $('#no-patient-selected').show();
-                                     $('#patient-details-section').hide();
-                                     currentlySelectedPatientId = null; // Reset selected ID
-                                }
-
-                            }
-                             else {
+                            } else {
+                                console.log("No patient ID in URL or previously selected. Showing placeholder.");
                                 $('#no-patient-selected').show();
                                 $('#patient-details-section').hide();
-                                currentlySelectedPatientId = null; // Ensure it's null
+                                currentlySelectedPatientId = null; // Reset selected ID
+                                resetCarePlanEditState(); // Reset edit state
+                                $whatsappBtn.hide(); // Hide WhatsApp button
                             }
-
-
                         } else {
                             console.log("No patients found.");
                             $('#patient-count').text('0');
@@ -523,6 +633,8 @@
                             $('#no-patient-selected').show();
                             $('#patient-details-section').hide();
                             currentlySelectedPatientId = null; // Reset selected ID
+                            resetCarePlanEditState(); // Reset edit state
+                            $whatsappBtn.hide(); // Hide WhatsApp button
                         }
                     },
                     error: function(xhr, status, error) {
@@ -535,15 +647,21 @@
                          $('#no-patient-selected').show();
                          $('#patient-details-section').hide();
                          currentlySelectedPatientId = null; // Reset selected ID
+                         resetCarePlanEditState(); // Reset edit state
+                         $whatsappBtn.hide(); // Hide WhatsApp button
                     }
                 });
             }
-
             // Load patient details
             function loadPatientDetails(patientId) {
                  console.log("Attempting to load details for patient ID:", patientId);
                  currentlySelectedPatientId = patientId; // Store the ID
 
+                // Reset any previous editing state and feedback messages
+                resetCarePlanEditState();
+                $saveFeedback.empty();
+                $whatsappFeedback.empty();
+
                 // Highlight selected patient
                 $('.patient-item').removeClass('active');
                 $(`.patient-item[data-id="${patientId}"]`).addClass('active');
@@ -552,9 +670,16 @@
                 $('#no-patient-selected').hide();
                 $('#patient-details-section').show();
 
+                // Show WhatsApp button for the selected patient
+                $whatsappBtn.show();
+                 // Set up WhatsApp button click handler for the selected patient
+                 $whatsappBtn.off('click').on('click', function() {
+                     handleSendWhatsApp(currentlySelectedPatientId);
+                 });
+
+
                 // 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',
@@ -563,14 +688,12 @@
                         if (response.success) {
                             const patient = response.patient;
                             console.log("Successfully loaded patient details:", patient.name);
-
                             // Update patient details
                             $('#patient-name-header').html(`<i class="fas fa-user me-2"></i>${patient.name || 'Unnamed Patient'}`);
                             $('#patient-age').text(patient.age || 'N/A');
                             $('#patient-gender').text(patient.gender || 'N/A');
                             $('#patient-feedback').text(patient.feedback || 'No feedback recorded.');
                             $('#patient-timestamp').text(patient.timestamp ? new Date(patient.timestamp).toLocaleString() : 'N/A');
-
                             // Set status badge
                             const statusText = {
                                 'emergency': 'EMERGENCY',
@@ -579,34 +702,37 @@
                                 'stable': 'STABLE',
                                 'unknown': 'UNKNOWN'
                             };
-                            const statusBadgeClass = {
+                            const statusClass = {
+                                'emergency': 'emergency',
+                                'deteriorating': 'deteriorating',
+                                'improving': 'improving',
+                                'stable': 'stable',
+                                'unknown': 'unknown'
+                            };
+                             const statusBadgeClass = {
                                 'emergency': 'status-emergency',
                                 'deteriorating': 'status-deteriorating',
                                 'improving': 'status-improving',
                                 'stable': 'status-stable',
-                                'unknown': 'status-unknown'
+                                 'unknown': 'status-unknown'
                             };
                             $('#patient-status')
-                                .text(statusText[patient.status] || 'UNKNOWN')
-                                .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.');
+                                .html(`<span class="status-dot ${statusClass[patient.status] || 'unknown'}"></span>${statusText[patient.status] || 'UNKNOWN'}`) // Include dot in HTML
+                                .attr('class', 'patient-status ' + (statusBadgeClass[patient.status] || 'status-unknown')); // Set class for background
+                            // Update care plans content - populate both display div and edit textarea
+                            $updatedPlanDisplay.text(patient.updated_plan || 'No updated care plan available.');
+                            $updatedPlanEdit.val(patient.updated_plan || 'No updated care plan available.'); // 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 content
-                            $('#carePlanTabs button').removeClass('active').attr('aria-selected', 'false');
+                            $carePlanTabs.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
+                             $('#updated-plan-container').addClass('show active');
+                            // Set up PDF download button click handler for the selected patient
                             $('#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);
@@ -615,6 +741,8 @@
                             $(`.patient-item[data-id="${patientId}"]`).removeClass('active'); // Remove highlight
                              currentlySelectedPatientId = null; // Reset selected ID
                              history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
+                             resetCarePlanEditState(); // Reset edit state
+                             $whatsappBtn.hide(); // Hide WhatsApp button
                         }
                     },
                     error: function(xhr, status, error) {
@@ -625,99 +753,234 @@
                         $(`.patient-item[data-id="${patientId}"]`).removeClass('active'); // Remove highlight
                          currentlySelectedPatientId = null; // Reset selected ID
                          history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
+                         resetCarePlanEditState(); // Reset edit state
+                         $whatsappBtn.hide(); // Hide WhatsApp button
                     }
                 });
             }
 
-            // 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';
-
-                if (confirm(`Are you sure you want to delete the record for ${patientName}? This action cannot be undone.`)) {
-                    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').length);
-                            // Check if the deleted patient was currently selected
-                            if (currentlySelectedPatientId === patientIdToDelete) {
-                                console.log("Deleted currently selected patient. Clearing details pane.");
-                                $('#patient-details-section').hide();
-                                $('#no-patient-selected').show();
-                                currentlySelectedPatientId = null; // Reset selected ID
-                                history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
-                            }
-                            // Check if the list is now empty
-                            if ($('#patient-list li').length === 0) {
-                                $('#no-patients-found').show();
-                            }
+            // Reset the care plan editing state
+            function resetCarePlanEditState() {
+                 isEditingPlan = false;
+                 $updatedPlanDisplay.show();
+                 $updatedPlanEdit.hide();
+                 $editBtn.show();
+                 $saveBtn.hide();
+                 $cancelBtn.hide();
+                 $saveFeedback.empty();
+                 $carePlanTabs.prop('disabled', false); // Enable tabs
+            }
 
-                             // 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;
+            // Handle Delete Patient Action
+            function handleDeletePatient(patientIdToDelete) {
+                 const $patientItem = $(`.patient-item[data-id="${patientIdToDelete}"]`);
+                 const patientName = $patientItem.find('h6').text() || 'Unnamed Patient';
+                 if (confirm(`Are you sure you want to delete the record for ${patientName}? This action cannot be undone.`)) {
+                     console.log(`Deleting patient ID: ${patientIdToDelete}`);
+                     // Optionally show a spinner or disable the delete button
+                      const $deleteBtnIcon = $patientItem.find('.delete-patient-btn i');
+                      const originalIconClass = $deleteBtnIcon.attr('class');
+                      $deleteBtnIcon.removeClass().addClass('fas fa-spinner fa-spin');
+                      $patientItem.find('.delete-patient-btn').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
+                             // Check if the deleted patient was currently selected
+                             if (currentlySelectedPatientId === patientIdToDelete) {
+                                 console.log("Deleted currently selected patient. Clearing details pane.");
+                                 $('#patient-details-section').hide();
+                                 $('#no-patient-selected').show();
+                                 currentlySelectedPatientId = null; // Reset selected ID
+                                 history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param
+                                 resetCarePlanEditState(); // Reset edit state
+                                 $whatsappBtn.hide(); // Hide WhatsApp button
                              }
-                            alert(`Error deleting patient: ${errorMessage}`);
-                        }
-                    });
-                } else {
-                    console.log("Delete cancelled.");
+                             // Check if the list is now empty (considering only visible items after search)
+                             if ($('#patient-list li:visible').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(originalIconClass);
+                              $patientItem.find('.delete-patient-btn').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.substring(0, 100) + "..."; // Avoid long error messages
+                              } else {
+                                   errorMessage += ": " + error;
+                              }
+                             alert(`Error deleting patient: ${errorMessage}`);
+                         }
+                     });
+                 } else {
+                     console.log("Delete cancelled.");
+                 }
+            }
+
+
+            // Handle Save Care Plan Action
+            function handleSaveCarePlan() {
+                if (!currentlySelectedPatientId) {
+                     console.error("No patient selected for saving.");
+                     $saveFeedback.html('<span class="text-danger">Error: No patient selected.</span>');
+                     return;
                 }
-            });
+                const updatedPlanText = $updatedPlanEdit.val();
+
+                // Show spinner and disable buttons
+                $saveBtn.prop('disabled', true).html('<span class="btn-spinner"></span> Saving...');
+                $cancelBtn.prop('disabled', true);
+                $editBtn.prop('disabled', true); // Should already be hidden but good practice
+                 $saveFeedback.empty(); // Clear previous feedback
 
+                console.log(`Saving plan for patient ID: ${currentlySelectedPatientId}`);
 
-            // 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();
+                $.ajax({
+                    url: `/update_care_plan/${currentlySelectedPatientId}`,
+                    type: 'PUT',
+                    contentType: 'application/json', // Specify content type
+                    data: JSON.stringify({ updated_plan: updatedPlanText }), // Send as JSON
+                    success: function(response) {
+                        console.log("Save successful:", response.message);
+                        $saveFeedback.html('<span class="text-success"><i class="fas fa-check-circle"></i> Saved!</span>');
+
+                        // Update the display div with the saved text
+                        $updatedPlanDisplay.text(updatedPlanText);
+
+                        // Revert back to display mode
+                        resetCarePlanEditState();
+                        // Re-enable buttons and restore text after a short delay for feedback visibility
+                         setTimeout(function() {
+                            $saveBtn.prop('disabled', false).html('<i class="fas fa-save me-1"></i> Save');
+                            $cancelBtn.prop('disabled', false);
+                             $editBtn.prop('disabled', false); // Should be visible now
+                             $saveFeedback.empty(); // Clear success message
+                         }, 2000);
+
+
+                    },
+                    error: function(xhr, status, error) {
+                         console.error("Save failed:", error, xhr.responseText);
+                        let errorMessage = 'An error occurred while saving.';
+                         if (xhr.responseJSON && xhr.responseJSON.error) {
+                             errorMessage = xhr.responseJSON.error;
+                         } else if (xhr.responseText) {
+                              errorMessage += ": " + xhr.responseText.substring(0, 100) + "..."; // Avoid long error messages
+                         } else {
+                              errorMessage += ": " + error;
+                         }
+                         $saveFeedback.html(`<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</span>`);
+                         // Re-enable buttons
+                         $saveBtn.prop('disabled', false).html('<i class="fas fa-save me-1"></i> Save');
+                         $cancelBtn.prop('disabled', false);
+                          $editBtn.prop('disabled', false); // Should already be hidden
                     }
                 });
-                if (foundPatients) {
-                    $('#no-patients-found').hide();
-                } else {
-                    $('#no-patients-found').show();
+            }
+
+
+             // Handle Send WhatsApp Action
+             function handleSendWhatsApp(patientIdToSend) {
+                 if (!patientIdToSend) {
+                     console.error("No patient selected for sending WhatsApp.");
+                     $whatsappFeedback.html('<span class="text-danger">Error: No patient selected.</span>');
+                     return;
+                 }
+
+                 // Prevent sending if currently editing
+                 if (isEditingPlan) {
+                      $whatsappFeedback.html('<span class="text-danger">Finish editing before sending.</span>');
+                      return;
+                 }
+
+                 // Show spinner and disable button
+                 $whatsappBtn.prop('disabled', true).html('<span class="btn-spinner"></span> Sending...');
+                 $whatsappFeedback.empty(); // Clear previous feedback
+
+                 console.log(`Sending WhatsApp for patient ID: ${patientIdToSend}`);
+
+                 $.ajax({
+                    url: `/send_whatsapp_doctor/${patientIdToSend}`,
+                    type: 'POST',
+                    success: function(response) {
+                        console.log("WhatsApp send successful:", response.message);
+                        $whatsappFeedback.html('<span class="text-success"><i class="fab fa-whatsapp"></i> Sent!</span>');
+                         // Re-enable button and restore text after a short delay for feedback visibility
+                         setTimeout(function() {
+                              $whatsappBtn.prop('disabled', false).html('<i class="fab fa-whatsapp me-2"></i>Send via WhatsApp');
+                              $whatsappFeedback.empty();
+                         }, 3000); // Show success for 3 seconds
+                    },
+                    error: function(xhr, status, error) {
+                         console.error("WhatsApp send failed:", error, xhr.responseText);
+                        let errorMessage = 'An error occurred while sending WhatsApp.';
+                         if (xhr.responseJSON && xhr.responseJSON.error) {
+                             errorMessage = xhr.responseJSON.error;
+                         } else if (xhr.responseText) {
+                              errorMessage += ": " + xhr.responseText.substring(0, 100) + "..."; // Avoid long error messages
+                         } else {
+                              errorMessage += ": " + error;
+                         }
+                         $whatsappFeedback.html(`<span class="text-danger"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</span>`);
+                         // Re-enable button immediately
+                         $whatsappBtn.prop('disabled', false).html('<i class="fab fa-whatsapp me-2"></i>Send via WhatsApp');
+                    }
+                 });
+             }
+
+
+            // --- Event Listeners for Edit/Save/Cancel ---
+
+            $editBtn.on('click', function() {
+                 if (!currentlySelectedPatientId) return; // Do nothing if no patient is selected
+
+                isEditingPlan = true;
+                $updatedPlanDisplay.hide(); // Hide display div
+                $updatedPlanEdit.show();    // Show textarea
+                $editBtn.hide();            // Hide edit button
+                $saveBtn.show();            // Show save button
+                $cancelBtn.show();          // Show cancel button
+                 $saveFeedback.empty();     // Clear any previous feedback
+                 $whatsappFeedback.empty(); // Clear whatsapp feedback as well
+
+                // Prevent switching tabs while editing
+                 $carePlanTabs.prop('disabled', true);
+                 $('#updated-plan-tab').prop('disabled', false); // Keep current tab enabled
+            });
+
+            $cancelBtn.on('click', function() {
+                if (isEditingPlan && confirm("Discard changes?")) {
+                    // Revert textarea content to the text in the display div (original state before edit)
+                    $updatedPlanEdit.val($updatedPlanDisplay.text());
+                    resetCarePlanEditState(); // Revert UI state
+                } else if (!isEditingPlan) {
+                     // If somehow cancel is clicked but not in edit mode, just reset
+                     resetCarePlanEditState();
                 }
+                 // If confirm is false, do nothing (stay in edit mode)
+            });
+
+            $saveBtn.on('click', function() {
+                handleSaveCarePlan(); // Trigger the save function
             });
 
 
+            // --- Initial Load and Periodic Checks ---
+
             // Initial patient data load when page is ready
             loadPatients();
 
@@ -728,29 +991,33 @@
                     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;
-                            // Check if the current alert count is different or if the content has changed (basic check)
-                            const currentAlertHtml = $('#emergency-alerts').html().trim();
-                             const newAlertHtml = `
+                        if (response.success) {
+                            const emergencyPatients = response.notifications; // Assuming endpoint returns list of emergency patients now
+                             if (emergencyPatients.length > 0) {
+                                console.log(`Found ${emergencyPatients.length} emergency notifications.`);
+                                const alertCount = emergencyPatients.length;
+                                const newAlertHtml = `
                                     <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>
                                 `;
-                            if (currentAlertHtml !== newAlertHtml.trim()) {
-                                 // Update emergency alerts section
-                                $('#emergency-alerts').html(newAlertHtml);
-                                // 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
+                                 // Only update if the alert content has changed
+                                if ($('#emergency-alerts').html().trim() !== newAlertHtml.trim()) {
+                                     $('#emergency-alerts').html(newAlertHtml);
+                                     // 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 {
+                                 // If no emergencies, clear the alert area
+                                 console.log("No emergency notifications.");
+                                $('#emergency-alerts').empty();
                             }
-
                         } else {
-                             // If no emergencies, clear the alert area
-                             console.log("No emergency notifications.");
-                            $('#emergency-alerts').empty();
+                             console.error("Error checking emergency notifications:", response.error);
+                             // Optionally display a small error message in the alert area
+                              // $('#emergency-alerts').html('<div class="text-danger small">Error checking alerts.</div>');
                         }
                     },
                     error: function(xhr, status, error) {
@@ -760,22 +1027,26 @@
                     }
                 });
             }
-
             // Check for emergency notifications periodically (e.g., every 30 seconds)
             setInterval(checkEmergencyNotifications, 30000); // 30 seconds
 
+
              // Handle browser back/forward button for URL patient ID
              window.onpopstate = function(event) {
                  const urlParams = new URLSearchParams(window.location.search);
                  const patientIdFromUrl = urlParams.get('patient_id');
-
                  // Compare with the ID of the patient currently *displayed* in the details pane
                  // This needs to be tracked separately as loadPatients might be async
-                 const currentlyDisplayedPatientId = $('#patient-details-section').is(':visible') ? currentlySelectedPatientId : null;
-
 
-                 if (patientIdFromUrl && patientIdFromUrl !== currentlyDisplayedPatientId) {
+                 if (patientIdFromUrl && patientIdFromUrl !== currentlySelectedPatientId) {
                      console.log(`URL changed to patient ID: ${patientIdFromUrl}. Attempting to load details.`);
+                      // Check if currently editing before switching
+                     if (isEditingPlan) {
+                         if (!confirm("You have unsaved changes. Discard changes and switch patients?")) {
+                              history.pushState({ patient_id: currentlySelectedPatientId }, '', `/doctor_dashboard?patient_id=${currentlySelectedPatientId}`); // Put the old URL back
+                              return; // Do not switch if user cancels
+                          }
+                      }
                      // Check if this ID exists in the currently rendered list before calling API
                       if ($(`.patient-item[data-id="${patientIdFromUrl}"]`).length > 0) {
                           loadPatientDetails(patientIdFromUrl);
@@ -786,15 +1057,27 @@
                            $('#no-patient-selected').show();
                            currentlySelectedPatientId = null; // Reset
                            history.replaceState({}, '', '/doctor_dashboard'); // Clear URL param if not found
+                           resetCarePlanEditState(); // Reset edit state
+                           $whatsappBtn.hide(); // Hide WhatsApp button
                       }
-                 } else if (!patientIdFromUrl && currentlyDisplayedPatientId) {
+                 } else if (!patientIdFromUrl && currentlySelectedPatientId) {
                       // If URL has no ID but a patient is currently displayed, hide details
-                      console.log("URL changed, no patient ID. Hiding details.");
+                       console.log("URL changed, no patient ID. Hiding details.");
+                        // Check if currently editing before hiding
+                     if (isEditingPlan) {
+                         if (!confirm("You have unsaved changes. Discard changes and go back?")) {
+                             // Stay on the current page with the patient selected
+                              history.pushState({ patient_id: currentlySelectedPatientId }, '', `/doctor_dashboard?patient_id=${currentlySelectedPatientId}`);
+                             return; // Do not hide if user cancels
+                         }
+                     }
                       $('.patient-item').removeClass('active'); // Remove highlight
                       $('#patient-details-section').hide();
                       $('#no-patient-selected').show();
                       currentlySelectedPatientId = null; // Reset
-                 } else if (patientIdFromUrl && patientIdFromUrl === currentlyDisplayedPatientId) {
+                      resetCarePlanEditState(); // Reset edit state
+                      $whatsappBtn.hide(); // Hide WhatsApp button
+                 } else if (patientIdFromUrl && patientIdFromUrl === currentlySelectedPatientId) {
                      // 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 {
@@ -804,6 +1087,8 @@
                     $('#patient-details-section').hide();
                     $('#no-patient-selected').show();
                     currentlySelectedPatientId = null; // Reset
+                    resetCarePlanEditState(); // Reset edit state
+                    $whatsappBtn.hide(); // Hide WhatsApp button
                  }
              };
         });