appointment-booked

resources/views/appointment.blade.php

@@ -61,28 +61,29 @@
                     </div>
                     <div class="modal-body">
                         <!-- Form with the fields name, email, phone, and notes -->
-                        <form>
+                        <form id ="appointment-form">
+                        <input type="hidden" name="appointment_id" id="appointment_id">
                         <div class="form-group mb-2">
                             <label for="name">Name</label>
-                            <input type="text" class="form-control mt-1" id="name" required>
+                            <input type="text" class="form-control mt-1" id="name" name="name" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="email">Email</label>
-                            <input type="email" class="form-control mt-1" id="email" required>
+                            <input type="email" class="form-control mt-1" id="email" name="email" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="phone">Phone</label>
-                            <input type="tel" class="form-control mt-1" id="phone" required>
+                            <input type="tel" class="form-control mt-1" id="phone" name="phone" required>
                         </div>
                         <div class="form-group mb-2">
                             <label for="notes">Notes</label>
-                            <textarea class="form-control mt-1" id="notes"></textarea>
+                            <textarea class="form-control mt-1" id="notes" name="notes"></textarea>
                         </div>
                         </form>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="button" class="btn btn-primary">Book Appointment</button>
+                        <button type="button" onclick = "submitAppointment(event)" class="btn btn-primary">Book Appointment</button>
                     </div>
                 </div>
             </div>
@@ -92,7 +93,7 @@
 
 
 <!-- Modal -->
-<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
+<!-- <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -102,8 +103,7 @@
         </button>
       </div>
       <div class="modal-body">
-        <!-- Form with the fields name, email, phone, and notes -->
-        <form id = "appointment-form">
+        <form id = "appointment-form" onsubmit="submitAppointment(event)">
           <input type="hidden" name="appointment_id" id="appointment_id">
           <div class="form-group">
             <label for="name">Name</label>
@@ -125,11 +125,11 @@
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" onclick = "submitAppointment(event) " class="btn btn-primary">Book Appointment</button>
+        <button type="submit" class="btn btn-primary">Book Appointment</button>
       </div>
     </div>
   </div>
-</div>
+</div> -->
 
 
 
@@ -218,9 +218,11 @@
                 e.preventDefault();
                 var appointmentId = $(this).data("appointment-id");
                 
-                $("#modal").attr("id", "modal-" + appointmentId);
+                // $("#modal").attr("id", "modal-" + appointmentId);
                 $('#appointment-form input[name="appointment_id"]').val(appointmentId);
-                $("#modal-" + appointmentId).modal("show");
+                // $("#modal-" + appointmentId).modal("show");
+                $("#modal").modal("show");
+
 
                 // showAppointmentForm(appointmentId);
             });
@@ -235,7 +237,7 @@
     function showAppointmentForm(appointmentId){
 
              // $("#appointmentModal").modal();
-            //show Appointment booking form
+            // show Appointment booking form
            // Reset the form
           // $('#appointment-form')[0].reset();
 
@@ -254,7 +256,8 @@
             type: "post",
             data: $("form").serialize(),
             success: function(response) {
-            console.log(response.appointment_detail);
+                $("#modal").modal("hide");
+                alert('Appointment successfuuly booked');
             // Handle the success response
             // e.g. close the modal, show a success message, etc.
             }