refactor/edit plan 'reset' button added

src/views/editPlan.ejs

@@ -38,14 +38,17 @@
             
             <div id="formErrorMessages" class="text-red-400 text-sm my-2" style="display: none;"></div>
 
-            <div class="flex items-center justify-end space-x-4 pt-4">
+            <div class="flex items-center justify-center space-x-4 pt-4">
-                <a href="/plans/<%= plan._id %>" class="inline-flex justify-center py-2 px-4 border border-gray-600 rounded-md shadow-sm bg-gray-600 text-sm font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-indigo-500">
-                    Cancel
-                </a>
                 <button type="submit"
                         class="inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-indigo-500">
                     Save Changes
                 </button>
+                <button type="button" id="resetButton" class="inline-flex justify-center py-2 px-4 border border-gray-600 rounded-md shadow-sm bg-gray-600 text-sm font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-indigo-500">
+                    Reset
+                </button>
+                <a href="/plans/<%= plan._id %>" class="inline-flex justify-center py-2 px-4 border border-gray-600 rounded-md shadow-sm bg-gray-600 text-sm font-medium text-white hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-indigo-500">
+                    Cancel
+                </a>
             </div>
         </form>
     </div>
@@ -57,6 +60,28 @@
         const form = document.getElementById('editPlanForm');
         const errorMessagesDiv = document.getElementById('formErrorMessages');
 
+        // Store initial form values
+        const initialValues = {
+            name: form.name.value,
+            retirementAge: form.retirementAge.value,
+            retirementExpenses: form.retirementExpenses.value,
+            retirementAssets: form.retirementAssets.value,
+            retirementLiabilities: form.retirementLiabilities.value
+        };
+
+        const resetButton = document.getElementById('resetButton');
+        resetButton.addEventListener('click', function() {
+            form.name.value = initialValues.name;
+            form.retirementAge.value = initialValues.retirementAge;
+            form.retirementExpenses.value = initialValues.retirementExpenses;
+            form.retirementAssets.value = initialValues.retirementAssets;
+            form.retirementLiabilities.value = initialValues.retirementLiabilities;
+            if (errorMessagesDiv) {
+                errorMessagesDiv.style.display = 'none'; // Hide error message on reset
+                errorMessagesDiv.textContent = '';
+            }
+        });
+
         if (form) {
             form.addEventListener('submit', async function(event) {
                 event.preventDefault(); // Prevent traditional form submission