 <form id="updateForm" class="">
   <div>
     <label class="block form-label mb-1 text-gray-600">Name:</label>
     <input type="text" name="name" value="<%= package?.name %>" required class="w-full px-4 py-2 border rounded-xl focus:ring-2 focus:ring-blue-400 focus:outline-none">
   </div>

   <div>
     <label class="block mb-1 form-label text-gray-600">Distance (km):</label>
     <input type="number" name="distance" value="<%= package?.distance %>" required class="w-full px-4 py-2 border rounded-xl focus:ring-2 focus:ring-blue-400 focus:outline-none">
   </div>

   <div>
     <label class="block mb-1 form-label text-gray-600">Hour:</label>
     <input type="number" name="hour" value="<%= package?.hours %>" required class="w-full px-4 py-2 border rounded-xl focus:ring-2 focus:ring-blue-400 focus:outline-none">
   </div>

   <div>
     <label class="block mb-1 form-label text-gray-600">Description:</label>
     <textarea name="description" rows="4" required class="w-full px-4 py-2 border rounded-xl focus:ring-2 focus:ring-blue-400 focus:outline-none"><%= package?.description %></textarea>
   </div>

   <div style="display: flex; justify-content: end; margin-top: 20px;">
     <button type="submit" class=" bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 mt-3 rounded-xl transition duration-300">
       Update Package
     </button>
   </div>

 </form>


 <script>
   // Define form configuration
   const formConfig = {
     formId: "updateForm",
     fields: [{
         name: "description",
         type: "text",
         required: true,
         messages: {
           required: "Description name is required"
         }
       },

       {
         name: "hour",
         type: "text",
         required: true,
         messages: {
           required: "Hour is required"
         }
       },
       {
         name: "distance",
         type: "text",
         required: true,
         messages: {
           required: "Distance is required"
         }
       },
       {
         name: "name",
         type: "text",
         required: true,
         messages: {
           required: "Name is required"
         }
       }
     ]
   };
 </script>

 <script src="/js/validator/validation.js"></script>

 <script>
   const formValidator = setupFormValidation(
     formConfig.formId,
     formConfig.fields
   );

   document.getElementById('updateForm').addEventListener('submit', async function(e) {
     e.preventDefault();
     // Validate form fields
     const isValid = formValidator.validateForm();
     if (!isValid) {
       console.log('Form validation failed');
       return;
     }
     const package_id = "<%= package?.package_id %>"; // Ensure proper closing of the template tag

     // Collect form data
     const formData = new FormData(this);
     const data = Object.fromEntries(formData.entries());
     data.package_id = package_id; // Add the package_id to the data

     try {
       // Send data to the backend API
       const response = await fetch('/admin/updatePackage', { // Make sure '/admin/updatePackage' is correct
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(data)
       });

       const result = await response.json();

       // Show success message with SweetAlert
       if (response.ok) {
         Swal.fire({
           title: 'Success!',
           text: 'Package updated successfully!',
           icon: 'success',
           confirmButtonText: 'Okay'
         });
       } else {
         Swal.fire({
           title: 'Error!',
           text: result.error || 'Something went wrong!',
           icon: 'error',
           confirmButtonText: 'Try Again'
         });
       }
     } catch (error) {
       console.error('Error updating:', error);
       // Show error message with SweetAlert
       Swal.fire({
         title: 'Error!',
         text: 'Update failed. Please try again later.',
         icon: 'error',
         confirmButtonText: 'Close'
       });
     }
   });
 </script>

 <script src="/js/demo-protection.js"></script>
