diff --git a/.env.dist b/.env.dist
index a9fe4b6a..b0392b88 100644
--- a/.env.dist
+++ b/.env.dist
@@ -28,6 +28,8 @@ RT_SHORTCODE=1234
 MQTT_IP_ADDRESS=localhost
 MQTT_PORT=8883
 MQTT_CERT=/location/of/cert/file.crt
+MQTT_WS_HOST=insertiphere
+MQTT_WS_PORT=8083
 
 # redis client
 REDIS_CLIENT_SCHEME=tcp
diff --git a/src/Controller/RAPIController.php b/src/Controller/RAPIController.php
index c5d629c8..841f9959 100644
--- a/src/Controller/RAPIController.php
+++ b/src/Controller/RAPIController.php
@@ -17,16 +17,19 @@ use App\Ramcar\APIResult;
 use App\Ramcar\JOStatus;
 use App\Ramcar\InvoiceCriteria;
 use App\Ramcar\CMBServiceType;
+use App\Ramcar\ServiceType;
 use App\Ramcar\WarrantyClass;
 use App\Ramcar\APIRiderStatus;
 use App\Ramcar\TransactionOrigin;
 use App\Ramcar\CMBTradeInType;
+use App\Ramcar\TradeInType;
 use App\Ramcar\InvoiceStatus;
 use App\Ramcar\ModeOfPayment;
 use App\Ramcar\JOEventType;
 
 use App\Service\InvoiceGeneratorInterface;
 use App\Service\MQTTClient;
+use App\Service\WarrantyHandler;
 use App\Service\RedisClientProvider;
 
 use App\Entity\RiderSession;
@@ -49,6 +52,7 @@ use DateTime;
 use DateInterval;
 
 // Rider API controller
+// TODO: Need to refactor this into a service
 class RAPIController extends Controller
 {
     protected $session;
@@ -606,7 +610,7 @@ class RAPIController extends Controller
         return $res->getReturnResponse();
     }
 
-    public function payment(Request $req, MQTTClient $mclient)
+    public function payment(Request $req, MQTTClient $mclient, WarrantyHandler $wh)
     {
         $em = $this->getDoctrine()->getManager();
         $required_params = ['jo_id'];
@@ -634,9 +638,50 @@ class RAPIController extends Controller
 
         // TODO: tag rider as unavailable
 
+        // save to customer vehicle battery record
+        // TODO: this has to move to JOHandler
+        $this->updateVehicleBattery($jo);
+
         $em->flush();
 
-		// send mqtt event (fulfilled)
+        // create warranty
+        if (($jo->getServiceType() == ServiceType::BATTERY_REPLACEMENT_NEW) ||
+            ($jo->getServiceType() == CMBServiceType::BATTERY_REPLACEMENT_NEW))
+        {
+            $serial = null;
+            $warranty_class = $jo->getWarrantyClass();
+            $first_name = $jo->getCustomer()->getFirstName();
+            $last_name = $jo->getCustomer()->getLastName();
+            $mobile_number = $jo->getCustomer()->getPhoneMobile();
+
+            // check if date fulfilled is null
+            if ($jo->getDateFulfill() ==  null)
+                $date_purchase = $jo->getDateCreate();
+            else
+                $date_purchase = $jo->getDateFulfill();
+
+            $plate_number = $wh->cleanPlateNumber($jo->getCustomerVehicle()->getPlateNumber());
+
+            $batt_list = array();
+            $invoice = $jo->getInvoice();
+            if (!empty($invoice))
+            {
+                // get battery
+                $invoice_items = $invoice->getItems();
+                foreach ($invoice_items as $item)
+                {
+                    $battery = $item->getBattery();
+                    if ($battery != null)
+                    {
+                        $batt_list[] = $item->getBattery();
+                    }
+                }
+            }
+
+            $wh->createWarranty($serial, $plate_number, $first_name, $last_name, $mobile_number, $batt_list, $date_purchase, $warranty_class);
+        }
+
+        // send mqtt event (fulfilled)
         $rider = $this->session->getRider();
 		$image_url = $req->getScheme() . '://' . $req->getHttpHost() . $req->getBasePath() . '/assets/images/user.gif';
 		if ($rider->getImageFile() != null)
@@ -650,12 +695,6 @@ class RAPIController extends Controller
         ];
         $mclient->sendEvent($jo, $payload);
 
-        // create the warranty if new battery only
-        if ($jo->getServiceType () == CMBServiceType::BATTERY_REPLACEMENT_NEW)
-        {
-            $this->createWarranty($jo);
-        }
-
         return $res->getReturnResponse();
     }
     
@@ -774,7 +813,8 @@ class RAPIController extends Controller
 
         // check service type
         $stype_id = $req->request->get('stype_id');
-        if (!CMBServiceType::validate($stype_id))
+        if ((!CMBServiceType::validate($stype_id)) ||
+            (!ServiceType::validate($stype_id)))
         {
             $res->setError(true)
                 ->setErrorMessage('Invalid service type - ' . $stype_id);
@@ -836,7 +876,8 @@ class RAPIController extends Controller
 
         // check trade in
         $trade_in = $req->request->get('trade_in');
-        if (!CMBTradeInType::validate($trade_in))
+        if ((!CMBTradeInType::validate($trade_in)) ||
+            (!TradeInType::validate($trade_in)))
             $trade_in = null;
 
         // check mode of payment
@@ -890,79 +931,59 @@ class RAPIController extends Controller
         return $res->getReturnResponse();
     }
 
-    protected function createWarranty($jo)
+    protected function updateVehicleBattery(JobOrder $jo)
     {
-        $em = $this->getDoctrine()->getManager();
-        $warranty = new Warranty();
+        // check if new battery
+        if (($jo->getServiceType() != ServiceType::BATTERY_REPLACEMENT_NEW) ||
+            ($jo->getServiceType() != CMBServiceType::BATTERY_REPLACEMENT_NEW))
+           
+            return;
 
-        $warranty_class = $jo->getWarrantyClass();
-        $first_name = $jo->getCustomer()->getFirstName();
-        $last_name = $jo->getCustomer()->getLastName();
-        $mobile_number = $jo->getCustomer()->getPhoneMobile();
+        // customer vehicle
+        $cv = $jo->getCustomerVehicle();
+        if ($cv == null)
+            return;
 
-        // check if date fulfilled is null
-        if ($jo->getDateFulfill() ==  null)
-            $date_create = $jo->getDateCreate();
-        else
-            $date_create = $jo->getDateFulfill();
+        // invoice
+        $invoice = $jo->getInvoice();
+        if ($invoice == null)
+            return;
 
-        // normalize the plate number 
-        $plate_number = $this->normalizePlateNumber($jo->getCustomerVehicle()->getPlateNumber());
+        // invoice items
+        $items = $invoice->getItems();
+        if (count($items) <= 0)
+            return;
 
-        // get battery and its warranty periods
-        $warranty_period = 0;
-        $invoice_items = $jo->getInvoice()->getItems();
-        foreach ($invoice_items as $item)
+        // get first battery from invoice
+        $battery = null;
+        foreach ($items as $item)
         {
-            if ($item->getBattery() != null)
-            {
-                $battery = $item->getBattery();
-                $warranty->setBatteryModel($battery->getModel());
-                $warranty->setBatterySize($battery->getSize());
-
-                if ($warranty_class == WarrantyClass::WTY_PRIVATE)
-                    $warranty_period = $battery->getWarrantyPrivate();
-                else if ($warranty_class == WarrantyClass::WTY_COMMERCIAL)
-                    $warranty_period = $battery->getWarrantyCommercial();
-                else if ($warranty_class == WarrantyClass::WTY_TNV)
-                    $warranty_period = $battery->getWarrantyTnv();
-            }
+            $battery = $item->getBattery();
+            if ($battery != null)
+                break;
         }
 
-        // compute expiry date
-        $expiry_date = $this->computeDateExpire($date_create, $warranty_period);
+        // no battery in order
+        if ($battery == null)
+            return;
 
-        $warranty->setWarrantyClass($warranty_class)
-            ->setFirstName($first_name)
-            ->setLastName($last_name)
-            ->setMobileNumber($mobile_number)
-            ->setDatePurchase($date_create)
-            ->setDateExpire($expiry_date)
-            ->setPlateNumber($plate_number);
+        // warranty expiration
+        $warr_months = 0;
+        $warr = $jo->getWarrantyClass();
+        if ($warr == WarrantyClass::WTY_PRIVATE)
+            $warr_months = $battery->getWarrantyPrivate();
+        else if ($warr == WarrantyClass::WTY_COMMERCIAL)
+            $warr_months = $battery->getWarrantyCommercial();
+        else if ($warr == WarrantyClass::WTY_TNV)
+            $warr_months = 12;
 
-        $em->persist($warranty);
-        $em->flush();
+        $warr_date = new DateTime();
+        $warr_date->add(new DateInterval('P' . $warr_months . 'M'));
+
+        // update customer vehicle battery
+        $cv->setCurrentBattery($battery)
+            ->setHasMotoliteBattery(true)
+            ->setWarrantyExpiration($warr_date);
     }
 
-    protected function normalizePlateNumber($plate_number)
-    {
-        // make it upper case
-        $plate_number = trim(strtoupper($plate_number));
-
-        // remove special characters and spaces
-        $plate_number = preg_replace('/[^A-Za-z0-9]/', '', $plate_number);
-
-        //error_log('plate number ' . $plate_number);
-
-        return $plate_number;
-    }
-
-    protected function computeDateExpire($date_create, $warranty_period)
-    {
-        $expire_date = clone $date_create;
-        $expire_date->add(new DateInterval('P'.$warranty_period.'M'));
-        return $expire_date;
-    }
-
-
 }
diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 7bdcc8bb..5fff6343 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -96,7 +96,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_mobile">Mobile Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ obj.getCustomer.getPhoneMobile|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
                                         </div>
@@ -104,7 +104,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_landline">Landline</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ obj.getCustomer.getPhoneLandline|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
                                         </div>
@@ -114,7 +114,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_office">Office Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_office" id="customer-phone-office" class="form-control m-input" value="{{ obj.getCustomer.getPhoneOffice|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_office"></div>
                                         </div>
@@ -122,7 +122,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_fax">Fax</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_fax" id="customer-phone-fax" class="form-control m-input" value="{{ obj.getCustomer.getPhoneFax|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_fax"></div>
                                         </div>
@@ -380,17 +380,19 @@
                                                     <tr>
                                                         <th>Hub</th>
                                                         <th>Branch</th>
-                                                        <!--
-                                                        <th class="text-right">Distance</th>
-                                                        <th class="text-right">Travel Time</th>
-                                                        <th class="text-right">Available Riders</th>
-                                                        <th class="text-right">Jobs For Assignment</th>
-                                                        -->
                                                         <th>Contact Numbers</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -422,6 +424,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            No riders available.
+                                                        </td>
+                                                    </tr>
+
+                                                    {% if obj.getHub %}
+                                                        {% for rider in avail_riders %}
+                                                            <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}">
+                                                                <td>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -584,6 +604,8 @@
 
 $(function() {
     var form_in_process = false;
+    var selected_hub = '';
+    var selected_rider = '';
 
     // openstreet maps stuff
     // TODO: move this to a service
@@ -623,25 +645,40 @@ $(function() {
 
         var marker = L.marker([lat, lng], { icon: icon_customer });
 
-        // get nearest hubs ajax
-        var hub_table = '';
-        $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
-            var hubs = data['hubs'];
-            for (i in hubs) {
-                var hub = hubs[i];
-                var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
-                hubLayerGroup.addLayer(hub_marker);
+        {% if mode in ['onestep'] %}
+            // get nearest hubs ajax
+            var hub_table = '';
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
 
-                hub_table += '<tr data-id=' + hub['id'] + '>';
-                hub_table += '<td>' + hub['name'] + '</td>';
-                hub_table += '<td>' + hub['branch'] + '</td>';
-                hub_table += '<td>' + hub['cnum'] + '</td>';
-                hub_table += '<td></td>';
-                hub_table += '</tr>';
-            }
+                    hub_table += '<tr data-id=' + hub['id'] + '>';
+                    hub_table += '<td>' + hub['name'] + '</td>';
+                    hub_table += '<td>' + hub['branch'] + '</td>';
+                    hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+                }
 
-            $('#nearest_hubs').html(hub_table);
-        });
+                $('#nearest_hubs').html(hub_table);
+            
+            });
+        {% endif %}
+
+        {% if mode in ['onestep-edit'] %}
+            // get nearest hubs ajax
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
+                }
+            });
+        {% endif %}
 
         // add marker to layer group
         markerLayerGroup.addLayer(marker);
@@ -706,7 +743,14 @@ $(function() {
 	});
 
     $(function() {
-        var selected_hub = ""; 
+        {% if mode in ['onestep-edit'] %}
+            selected_hub = '{{ obj.getHub ? obj.getHub.getID: "" }}';
+            $('#hub-field').val(selected_hub); 
+        {% endif %}
+        {% if mode in ['onestep'] %}
+            selected_hub = '';
+        {% endif %}
+
         $('#hubs-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -723,6 +767,10 @@ $(function() {
                 selected_hub = id;
                 $('#hub-field').val(selected_hub); 
 
+                // clear rider field
+                $('#rider-field').val('');
+                selected_rider = '';
+
                 // get riders of hub
                 // get hub riders ajax
                 // TODO: add latitude and longitude of delivery location to ajax request
@@ -758,7 +806,13 @@ $(function() {
     });
 
     $(function() {
-        var selected_rider = '';
+        {% if mode in ['onestep-edit'] %}
+            selected_rider = '{{ obj.getRider ? obj.getRider.getID: "" }}';
+            $('#rider-field').val(selected_rider);
+        {% endif %}
+        {% if mode in ['onestep'] %}
+            selected_rider = '';
+        {% endif %}
         $('#rider-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -776,6 +830,8 @@ $(function() {
     {% if mode in ['onestep-edit'] %}
         var lat = {{ obj.getCoordinates.getLatitude }};
         var lng = {{ obj.getCoordinates.getLongitude }};
+        var hub = {{ obj.getHub.getID }};
+        var rider = {{ obj.getRider.getID }};
 
         selectPoint(lat, lng);
 
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index 05b36628..fe9f00ac 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -110,7 +110,7 @@
 									<div class="col-lg-6">
 										<label data-field="customer_phone_mobile">Mobile Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ obj.getCustomer.getPhoneMobile|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
                                         </div>
@@ -118,7 +118,7 @@
 									<div class="col-lg-6">
 										<label data-field="customer_phone_landline">Landline</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ obj.getCustomer.getPhoneLandline|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
                                         </div>
@@ -128,7 +128,7 @@
 									<div class="col-lg-6">
 										<label data-field="customer_phone_office">Office Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_office" id="customer-phone-office" class="form-control m-input" value="{{ obj.getCustomer.getPhoneOffice|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_office"></div>
                                         </div>
@@ -136,7 +136,7 @@
 									<div class="col-lg-6">
 										<label data-field="customer_phone_fax">Fax</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_fax" id="customer-phone-fax" class="form-control m-input" value="{{ obj.getCustomer.getPhoneFax|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_fax"></div>
                                         </div>
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index c9e14254..aee7ca87 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -94,7 +94,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_mobile">Mobile Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ obj.getCustomer.getPhoneMobile|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
                                         </div>
@@ -102,7 +102,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_landline">Landline</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ obj.getCustomer.getPhoneLandline|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
                                         </div>
@@ -112,7 +112,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_office">Office Phone</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_office" id="customer-phone-office" class="form-control m-input" value="{{ obj.getCustomer.getPhoneOffice|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_office"></div>
                                         </div>
@@ -120,7 +120,7 @@
                                     <div class="col-lg-6">
                                         <label data-field="customer_phone_fax">Fax</label>
                                         <div class="input-group m-input-group">
-                                            <span class="input-group-addon">+63</span>
+                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                             <input type="text" name="customer_phone_fax" id="customer-phone-fax" class="form-control m-input" value="{{ obj.getCustomer.getPhoneFax|default('') }}" data-vehicle-field="1" disabled>
                                             <div class="form-control-feedback hide" data-field="customer_phone_fax"></div>
                                         </div>
@@ -383,6 +383,14 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -412,6 +420,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            No riders available.
+                                                        </td>
+                                                    </tr>
+
+                                                    {% if obj.getHub %}
+                                                        {% for rider in avail_riders %}
+                                                            <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}">
+                                                                <td>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -574,6 +600,8 @@
 
 $(function() {
     var form_in_process = false;
+    var selected_hub = '';
+    var selected_rider = '';
 
     // openstreet maps stuff
     // TODO: move this to a service
@@ -613,25 +641,40 @@ $(function() {
 
         var marker = L.marker([lat, lng], { icon: icon_customer });
 
-        // get nearest hubs ajax
-        var hub_table = '';
-        $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
-            var hubs = data['hubs'];
-            for (i in hubs) {
-                var hub = hubs[i];
-                var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
-                hubLayerGroup.addLayer(hub_marker);
+        {% if mode in ['onestep'] %}
+            // get nearest hubs ajax
+            var hub_table = '';
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
 
-                hub_table += '<tr data-id=' + hub['id'] + '>';
-                hub_table += '<td>' + hub['name'] + '</td>';
-                hub_table += '<td>' + hub['branch'] + '</td>';
-                hub_table += '<td>' + hub['cnum'] + '</td>';
-                hub_table += '<td></td>';
-                hub_table += '</tr>';
-            }
+                    hub_table += '<tr data-id=' + hub['id'] + '>';
+                    hub_table += '<td>' + hub['name'] + '</td>';
+                    hub_table += '<td>' + hub['branch'] + '</td>';
+                    hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+                }
 
-            $('#nearest_hubs').html(hub_table);
-        });
+                $('#nearest_hubs').html(hub_table);
+
+            });
+        {% endif %}
+
+        {% if mode in ['onestep-edit'] %}
+            // get nearest hubs ajax
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
+                }
+            });
+        {% endif %}
 
         // add marker to layer group
         markerLayerGroup.addLayer(marker);
@@ -696,7 +739,13 @@ $(function() {
 	});
 
     $(function() {
-        var selected_hub = ""; 
+        {% if mode in ['onestep-edit'] %}
+            selected_hub = '{{ obj.getHub ? obj.getHub.getID: "" }}';
+            $('#hub-field').val(selected_hub);
+        {% endif %}
+        {% if mode in ['onestep'] %}
+            selected_hub = '';
+        {% endif %}
         $('#hubs-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -713,6 +762,10 @@ $(function() {
                 selected_hub = id;
                 $('#hub-field').val(selected_hub); 
 
+                // clear rider field
+                $('#rider-field').val('');
+                selected_rider = '';
+
                 // get riders of hub
                 // get hub riders ajax
                 // TODO: add latitude and longitude of delivery location to ajax request
@@ -748,7 +801,13 @@ $(function() {
     });
 
     $(function() {
-        var selected_rider = '';
+        {% if mode in ['onestep-edit'] %}
+            selected_rider = '{{ obj.getRider ? obj.getRider.getID: "" }}';
+            $('#rider-field').val(selected_rider);
+        {% endif %}
+        {% if mode in ['onestep'] %}
+            selected_rider = '';
+        {% endif %}
         $('#rider-table').on('click', 'tr', function() {
             var id = $(this).data('id');