diff --git a/config/routes/job_order.yaml b/config/routes/job_order.yaml
index f31dd94b..621195b1 100644
--- a/config/routes/job_order.yaml
+++ b/config/routes/job_order.yaml
@@ -257,3 +257,8 @@ jo_fulfill_cancel_submit:
     path: /job-order/fulfillcancel/{id}
     controller: App\Controller\JobOrderController::fulfillCancelSubmit
     methods: [POST]
+
+jo_cancel_reasons:
+    path: /ajax/jo_cancel_reasons
+    controller: App\Controller\JobOrderController::cancelReasons
+    methods: [GET]
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 11d761eb..a5e6883e 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -6,6 +6,7 @@ use App\Ramcar\JOStatus;
 use App\Ramcar\InvoiceCriteria;
 use App\Ramcar\CMBServiceType;
 use App\Ramcar\ServiceType;
+use App\Ramcar\JOCancelReasons;
 
 use App\Entity\CustomerVehicle;
 use App\Entity\Promo;
@@ -1177,6 +1178,14 @@ class JobOrderController extends Controller
         ]);
     }
 
+    // ajax call
+    public function cancelReasons()
+    { 
+        error_log('start cancel_reasons');
+        return $this->json([
+            'cancel_reasons' => JOCancelReasons::getCollection(),
+        ]);
+    }
 
     /**
      * @Menu(selected="jo_autoassign")
diff --git a/src/Ramcar/JOCancelReasons.php b/src/Ramcar/JOCancelReasons.php
new file mode 100644
index 00000000..b5a7a99c
--- /dev/null
+++ b/src/Ramcar/JOCancelReasons.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Ramcar;
+
+class JOCancelReasons extends NameValue
+{
+    const WRONG_BATTERY               = 'wrong_battery';
+    const CUSTOMER_NO_SHOW            = 'customer_no_show';
+    const RESCHEDULE                  = 'reschedule';
+    const LOCATION_CHANGE             = 'location_change';
+    const WORKING_BATTERY             = 'battery_working';
+    const LATE_DELIVERY               = 'late_delivery';
+    const CUSTOMER_BOUGHT_NEW_BATTERY = 'customer_bought_new_battery';
+    const BATTERY_NO_STOCK            = 'battery_no_stock';
+
+    const COLLECTION = [
+        'wrong_battery' => 'Wrong Battery',
+        'customer_no_show' => 'Customer No Show',
+        'reschedule' => 'Reschedule',
+        'location_change' => 'Change Location',
+        'battery_working' => 'Battery is Already Working',
+        'late_delivery' => 'Late Delivery',
+        'customer_bought_new_battery' => 'Customer Already Bought New Battery from Nearby Outlet',
+        'battery_no_stock' => 'No Stock of Battery',
+    ];
+}
diff --git a/src/Service/JobOrderHandler/ResqJobOrderHandler.php b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
index 9c8fbd1e..a6c841ca 100644
--- a/src/Service/JobOrderHandler/ResqJobOrderHandler.php
+++ b/src/Service/JobOrderHandler/ResqJobOrderHandler.php
@@ -954,6 +954,7 @@ class ResqJobOrderHandler implements JobOrderHandlerInterface
             throw new NotFoundHttpException('The item does not exist');
 
         $cancel_reason = $req->request->get('cancel_reason');
+        error_log($cancel_reason);
         $obj->cancel($cancel_reason);
 
         // the event
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index 37857d15..25027fdc 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -1746,44 +1746,50 @@ $(function() {
 
 	// cancel job order
 	$(".btn-cancel-job-order").click(function(e) {
-		var url = $(this).prop('href');
+            var url = $(this).prop('href');
 
-		e.preventDefault();
+            e.preventDefault();
 
-		swal({
-			title: 'Cancel Job Order',
-			html: 'Please enter the reason for cancellation of this job order:',
-			input: 'textarea',
-			inputClass: 'form-control',
-			type: 'warning',
-			showCancelButton: true,
-			width: '40rem',
-			preConfirm: (reason) => {
-				if (!reason) {
-					swal.showValidationError(
-			            'Reason for cancellation is required.'
-			        )
-				}
-			}
-		}).then((reason) => {
-			$.ajax({
-				method: "DELETE",
-				url: url,
-				data: {
-	                'cancel_reason': reason.value
-				}
-			}).done(function(response) {
-				swal({
-					title: 'Done!',
-					text: response.success,
-					type: 'success',
-					onClose: function() {
-						window.location.href = "{{ return_url }}";
-					}
-				});
-			});
-		});
-	});
+            var inputOptionsPromise = new Promise(function(resolve) {
+                // get your data and pass it to resolve()
+                $.getJSON("{{ url('jo_cancel_reasons') }}", function(data) {
+                    resolve(data.cancel_reasons)
+                });
+            });
+
+            swal({
+                title: 'Cancel Job Order',
+                html: 'Please select the reason for cancellation of this job order:',
+                input: 'select',
+                inputOptions: inputOptionsPromise,  
+                type: 'warning',
+                showCancelButton: true,
+                width: '40rem',
+                inputValidator: (value) => {
+                    return new Promise((resolve) => {
+                        console.log(value)
+                        resolve()
+                    })
+                }
+            }).then((result) => {
+                $.ajax({
+                    method: "DELETE",
+                    url: url,
+                    data: {
+                        'cancel_reason': result.value
+                    }
+                }).done(function(response) {
+                    swal({
+                        title: 'Done!',
+                        text: response.success,
+                        type: 'success',
+                        onClose: function() {
+                            window.location.href = "{{ return_url }}";
+                        }
+                    });
+                });
+            });
+        });
 
         // fulfill cancelled job order
         $(".btn-fulfill-cancel-job-order").click(function(e) {