Initial commit for customer crud forms

config/routes/battery.yaml

@@ -55,6 +55,11 @@ bmfg_create_submit:
     controller: App\Controller\BatteryManufacturerController::addSubmit
     methods: [POST]
 
+bmfg_batteries:
+    path: /battery-manufacturers/batteries
+    controller: App\Controller\BatteryManufacturerController::getBatteries
+    methods: [POST]
+
 bmfg_update:
     path: /battery-manufacturers/{id}
     controller: App\Controller\BatteryManufacturerController::updateForm

public/assets/css/style.css

@@ -36,4 +36,12 @@ label.has-danger,
 .normal-font {
 	font-size: inherit !important;
 	font-weight: inherit !important;
+}
+
+.block-switch {
+	display: block;
+}
+
+.switch-label {
+	margin: 6px 0 0 8px;
 }

src/Controller/BatteryManufacturerController.php

@@ -266,6 +266,39 @@ class BatteryManufacturerController extends BaseController
         $response->send();
     }
 
+    public function getBatteries(Request $req)
+    {
+        if (!$this->isGranted('customer.add') && !$this->isGranted('customer.update')) {
+            $exception = $this->createAccessDeniedException('No access.');
+            throw $exception;
+        }
+
+        // get row data
+        $em = $this->getDoctrine()->getManager();
+        $row = $em->getRepository(BatteryManufacturer::class)->find($req->request->get('id'));
+
+        if (empty($row))
+            throw $this->createNotFoundException('The item does not exist');
+
+        // build batteries array
+        $batteries = [];
+
+        foreach ($row->getBatteries() as $battery) {
+            $batteries[] = [
+                'id' => $battery->getID(),
+                'mfg_name' => $battery->getManufacturer()->getName(),
+                'model_name' => $battery->getModel()->getName(),
+                'size_name' => $battery->getSize()->getName(),
+                'prod_code' => $battery->getProductCode()
+            ];
+        }
+
+        // response
+        return $this->json([
+            'data' => $batteries
+        ]);
+    }
+
     // check if datatable filter is present and append to query
     protected function setQueryFilters($datatable, &$query) {
         if (isset($datatable['query']['data-rows-search']) && !empty($datatable['query']['data-rows-search'])) {

src/Controller/CustomerController.php

@@ -5,8 +5,11 @@ namespace App\Controller;
 use App\Ramcar\BaseController;
 use App\Entity\Customer;
 use App\Entity\CustomerVehicle;
+use App\Entity\MobileNumber;
 use App\Entity\Vehicle;
 use App\Entity\VehicleManufacturer;
+use App\Entity\Battery;
+use App\Entity\BatteryManufacturer;
 
 use Doctrine\ORM\Query;
 use Symfony\Component\HttpFoundation\Request;
@@ -16,6 +19,8 @@ use Symfony\Component\Validator\Validator\ValidatorInterface;
 use App\Menu\Generator as MenuGenerator;
 use App\Access\Generator as ACLGenerator;
 
+use DateTime;
+
 class CustomerController extends BaseController
 {
     protected $acl_gen;
@@ -134,6 +139,7 @@ class CustomerController extends BaseController
         $em = $this->getDoctrine()->getManager();
 
         // get parent associations
+        $params['bmfgs'] = $em->getRepository(BatteryManufacturer::class)->findAll();
         $params['vmfgs'] = $em->getRepository(VehicleManufacturer::class)->findAll();
 
         // response
@@ -149,25 +155,119 @@ class CustomerController extends BaseController
         $row = new Customer();
 
         // set and save values
-        $row->setName($req->request->get('name'));
+        $row->setFirstName($req->request->get('first_name'))
+            ->setLastName($req->request->get('last_name'))
+            ->setConfirmed(false);
+
+        // initialize error lists
+        $error_array = [];
+        $nerror_array = [];
+        $verror_array = [];
+
+        // custom validation for mobile numbers
+        $numbers = json_decode($req->request->get('mobile_numbers'));
+
+        if (!empty($numbers)) {
+            foreach ($numbers as $key => $number) {
+                $mobile_number = new MobileNumber();
+                $mobile_number->setID($number->id)
+                    ->setDateRegistered(DateTime::createFromFormat("d M Y - h:i A", $number->date_registered));
+
+                if (!empty($number->date_confirmed)) {
+                    $mobile_number->setDateConfirmed(DateTime::createFromFormat("d M Y - h:i A", $number->date_confirmed))
+                        ->setConfirmed();
+                } else {
+                    $mobile_number->setConfirmed(false);
+                }
+
+                $nerrors = $validator->validate($mobile_number);
+
+                // add errors to list
+                foreach ($nerrors as $error) {
+                    if (!isset($nerror_array[$key]))
+                        $nerror_array[$key] = [];
+
+                    $nerror_array[$key][$error->getPropertyPath()] = $error->getMessage();
+                }
+
+                // add to entity
+                if (!$nerrors) {
+                    $row->addMobileNumber($mobile_number);
+                }
+            }
+        }
+
+        // custom validation for vehicles
+        $vehicles = json_decode($req->request->get('vehicles'));
+
+        if (!empty($vehicles)) {
+            foreach ($vehicles as $vehicle) {
+                // check if vehicle exists
+                $vobj = $em->getRepository(Vehicle::class)->find($vehicle->vehicle);
+
+                if (empty($vobj)) {
+                    $verror_array[$vehicle->index]['vehicle'] = 'Invalid vehicle specified.';
+                } else {
+                    $cust_vehicle = new CustomerVehicle();
+                    $cust_vehicle->setVehicle($vobj)
+                        ->setPlateNumber($vehicle->plate_number)
+                        ->setModelYear($vehicle->model_year)
+                        ->setColor($vehicle->color)
+                        ->setStatusCondition($vehicle->status_condition)
+                        ->setFuelType($vehicle->fuel_type)
+                        ->setActive($vehicle->flag_active);
+
+                    // if specified, check if battery exists
+                    if (isset($vehicle->battery)) {
+                        // check if battery exists
+                        $bobj = $em->getRepository(Battery::class)->find($vehicle->battery);
+
+                        if (empty($bobj)) {
+                            $verror_array[$vehicle->index]['battery'] = 'Invalid battery specified.';
+                        } else {
+                            $cust_vehicle->setHasMotoliteBattery(true)
+                                ->setCurrentBattery($bobj)
+                                ->setWarrantyCode($vehicle->warranty_code)
+                                ->setWarrantyExpiration(DateTime::createFromFormat("d M Y", $vehicle->warranty_expiration));
+                        } 
+                    } else {
+                         $cust_vehicle->setHasMotoliteBattery(false);
+                    }
+
+                    $verrors = $validator->validate($cust_vehicle);
+
+                    // add errors to list
+                    foreach ($nerrors as $error) {
+                        if (!isset($nerror_array[$key]))
+                            $verror_array[$vehicle->index] = [];
+
+                        $verror_array[$vehicle->index][$error->getPropertyPath()] = $error->getMessage();
+                    }
+
+                    // add to entity
+                    if (empty($verror_array[$vehicle->index])) {
+                        $row->addVehicle($cust_vehicle);
+                    }
+                }   
+            }
+        }
 
         // validate
         $errors = $validator->validate($row);
 
-        // initialize error list
-        $error_array = [];
-
         // add errors to list
         foreach ($errors as $error) {
             $error_array[$error->getPropertyPath()] = $error->getMessage();
         }
 
         // check if any errors were found
-        if (!empty($error_array)) {
+        if (!empty($error_array) || !empty($nerror_array) || !empty($verror_array)) {
             // return validation failure response
             return $this->json([
                 'success' => false,
-                'errors' => $error_array
+                'errors' => $error_array,
+                'nerrors' => $nerror_array,
+                'verrors' => $verror_array
             ], 422);
         } else {
             // validated! save the entity
@@ -196,8 +296,11 @@ class CustomerController extends BaseController
         if (empty($row))
             throw $this->createNotFoundException('The item does not exist');
 
+        // get parent associations
+        $params['bmfgs'] = $em->getRepository(BatteryManufacturer::class)->findAll();
+        $params['vmfgs'] = $em->getRepository(VehicleManufacturer::class)->findAll();
+
         $params['obj'] = $row;
-        $params['values'] = [];
 
         // response
         return $this->render('customer/form.html.twig', $params);

src/Entity/BatteryManufacturer.php

@@ -68,11 +68,6 @@ class BatteryManufacturer
 
     public function getBatteries()
     {
-        // has to return set of strings because symfony is trying to move away from role objects
+        return $this->batteries;
-        $str_batteries = [];
-        foreach ($this->batteries as $battery)
-            $str_batteries[] = $this->getProductCode();
-
-        return $str_batteries;
     }
 }

src/Entity/CustomerVehicle.php

@@ -30,7 +30,6 @@ class CustomerVehicle
     /**
      * @ORM\ManyToOne(targetEntity="Customer", inversedBy="vehicles")
      * @ORM\JoinColumn(name="customer_id", referencedColumnName="id")
-     * @Assert\NotBlank()
      */
     protected $customer;
 
@@ -214,7 +213,7 @@ class CustomerVehicle
         return $this->warranty_expiration;
     }
 
-    public function setCurrentBattery($curr_battery)
+    public function setCurrentBattery(Battery $curr_battery)
     {
         $this->curr_battery = $curr_battery;
         return $this;

src/Entity/MobileNumber.php

@@ -28,7 +28,6 @@ class MobileNumber
     /**
      * @ORM\ManyToOne(targetEntity="Customer", inversedBy="numbers")
      * @ORM\JoinColumn(name="customer_id", referencedColumnName="id")
-     * @Assert\NotBlank()
      */
     protected $customer;
 
@@ -117,4 +116,15 @@ class MobileNumber
     {
         return $this->date_confirmed;
     }
+
+    public function setConfirmed($flag_confirmed = true)
+    {
+        $this->flag_confirmed = $flag_confirmed;
+        return $this;
+    }
+
+    public function isConfirmed()
+    {
+        return $this->flag_confirmed;
+    }
 }

templates/battery/form.html.twig

@@ -195,7 +195,7 @@
 											Add Vehicle:
 										</label>
 										<div class="col-lg-3">
-											<select name="vehicle_list" class="form-control m-input" id="vmfg">
+											<select name="vmfg_list" class="form-control m-input" id="vmfg">
 												<option value="">Select a manufacturer</option>
 												{% for manufacturer in vmfgs %}
 													<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
@@ -328,12 +328,12 @@
 			// update vehicle list when changing manufacturer
 			$("#vmfg").change(function() {
 				var id = $(this).val();
-				var vehiclefield = $("#vehicle");
+				var field = $("#vehicle");
 				var btn = $("#btn-add-vehicle");
 
 				// no id specified
 				if (!id) {
-					vehiclefield.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
+					field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
 					btn.prop('disabled', true);
 					return true;
 				}
@@ -346,18 +346,18 @@
 					url: "{{ url('vmfg_vehicles') }}",
 					data: {id: id}
 				}).done(function(response) {
-					if (response.data) {
+					if (response.data.length > 0) {
 						var html = '';
 
 						$.each(response.data, function(index, vehicle) {
-							html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' ' + vehicle.model_year_from + '-' + vehicle.model_year_to + '</option>';
+							html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' (' + vehicle.model_year_from + '-' + vehicle.model_year_to + ')</option>';
 						});
 
-						vehiclefield.html(html).prop('disabled', false);
+						field.html(html).prop('disabled', false);
 						btn.prop('disabled', false);
 						mfgVehicles = response.data;
 					} else {
-						vehiclefield.html('<option value="">No vehicles found</option>').prop('disabled', true);
+						field.html('<option value="">No vehicles found</option>').prop('disabled', true);
 						btn.prop('disabled', true);
 					}
 				})

templates/customer/form.html.twig

@@ -77,7 +77,7 @@
 											<span class="m-form__help">Use the format <span class="text-info">63xxxxxxxxxx</span></span>
 										</div>
 										<div class="col-lg-4">
-											<div class="input-group date">
+											<div class="input-group date dtp">
 												<input type="text" id="date-confirmed" class="form-control m-input" readonly placeholder="Date confirmed">
 												<span class="input-group-addon">
 													<i class="la la-calendar glyphicon-th"></i>
@@ -95,7 +95,10 @@
 											<div class="m_datatable" id="data-vehicles"></div>
 										</div>
 									</div>
-									<div class="form-group m-form__group row form-group-inner">
+									<div class="form-group m-form__group row form-group-inner row">
+										<div class="col-lg-12">
+											<button type="button" class="btn btn-primary" id="add-vehicle">Add Vehicle</button>
+										</div>
 									</div>
 								</div>
 							</div>		
@@ -115,6 +118,164 @@
 			</div>
 		</div>
 	</div>
+	<div class="modal fade" id="vehicle-form-modal" tabindex="-1" role="dialog" aria-labelledby="vehicle-form-title" aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<form class="m-form" id="vehicle-form" data-mode="create">
+					<div class="modal-header">
+						<h5 class="modal-title" id="vehicle-form-title">
+							Add Vehicle
+						</h5>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">
+								×
+							</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<div class="m-form__section m-form__section--first">
+							<div class="m-form__heading">
+								<h3 class="m-form__heading-title">
+									Vehicle Info
+								</h3>
+							</div>
+							<div class="form-group m-form__group row">
+								<div class="col-lg-4">
+									<label for="vmfg" data-field="vmfg">Manufacturer</label>
+									<select name="vmfg" class="form-control m-input" id="vmfg" data-required="0">
+										<option value="">Select a manufacturer</option>
+										{% for manufacturer in vmfgs %}
+											<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
+										{% endfor %}
+									</select>
+									<div class="form-control-feedback hide" data-field="vmfg"></div>
+								</div>
+								<div class="col-lg-4">
+									<label for="vehicle" data-field="vehicle">Vehicle</label>
+									<select name="vehicle" class="form-control m-input" id="vehicle" data-value="" data-required="1" disabled>
+										<option value="">Select a manufacturer first</option>
+									</select>
+									<div class="form-control-feedback hide" data-field="vehicle"></div>
+								</div>
+								<div class="col-lg-4">
+									<label for="vehicle-year" data-field="model_year">Year</label>
+									<input type="text" name="model_year" id="vehicle-year" class="form-control m-input" data-required="1">
+									<div class="form-control-feedback hide" data-field="model_year"></div>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<div class="col-lg-4">
+									<label for="vehicle-plate-number" data-field="plate_number">Plate Number</label>
+									<input type="text" name="plate_number" id="vehicle-plate-number" class="form-control m-input" data-required="1">
+									<div class="form-control-feedback hide" data-field="plate_number"></div>
+								</div>
+								<div class="col-lg-4">
+									<label for="vehicle-color" data-field="color">Color</label>
+									<input type="text" name="color" id="vehicle-color" class="form-control m-input" data-required="1">
+									<div class="form-control-feedback hide" data-field="color"></div>
+								</div>
+								<div class="col-lg-4">
+									<label for="vehicle-status" data-field="status_condition">Status</label>
+									<select name="status_condition" class="form-control m-input" id="vehicle-status" data-required="1">
+										<option value=""></option>
+										<option value="Brand New">Brand New</option>
+										<option value="Second-Hand">Second-Hand</option>
+									</select>
+									<div class="form-control-feedback hide" data-field="status_condition"></div>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<div class="col-lg-4">
+									<label for="vehicle-fuel-type" data-field="fuel_type">Fuel Type</label>
+									<select name="fuel_type" class="form-control m-input" id="vehicle-fuel-type" data-required="1">
+										<option value=""></option>
+										<option value="Gas">Gas</option>
+										<option value="Diesel">Diesel</option>
+									</select>
+									<div class="form-control-feedback hide" data-field="fuel_type"></div>
+								</div>
+								<div class="col-lg-8">
+									<label>&nbsp;</label>
+									<span class="m-switch m-switch--icon block-switch">
+										<label>
+											<input type="checkbox" name="flag_active" id="flag-active" value="1" checked>
+											<label class="switch-label">This vehicle is currently active</label>
+											<span></span>
+										</label>
+									</span>
+								</div>
+							</div>
+						</div>
+						<div class="m-form__seperator m-form__seperator--dashed"></div>
+						<div class="m-form__section m-form__section--last">
+							<div class="m-form__heading">
+								<h3 class="m-form__heading-title">
+									Battery Info
+								</h3>
+							</div>
+							<div class="form-group m-form__group row">
+								<div class="col-lg-12">
+									<span class="m-switch m-switch--icon block-switch">
+										<label>
+											<input type="checkbox" name="flag_motolite_battery" id="flag-motolite-battery" value="1">
+											<label class="switch-label">This vehicle is using a Motolite battery</label>
+											<span></span>
+										</label>
+									</span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row curr_battery_row hide">
+								<div class="col-lg-6">
+									<label for="bmfg" data-field="bmfg">Manufacturer</label>
+									<select name="bmfg" class="form-control m-input" id="bmfg" data-required="0">
+										<option value="">Select a manufacturer</option>
+										{% for manufacturer in bmfgs %}
+											<option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
+										{% endfor %}
+									</select>
+									<div class="form-control-feedback hide" data-field="bmfg"></div>
+								</div>
+								<div class="col-lg-6">
+									<label for="battery" data-field="battery">Product</label>
+									<select name="battery" class="form-control m-input" id="battery" data-value="" disabled data-required="0">
+										<option value="">Select a manufacturer first</option>
+									</select>
+									<div class="form-control-feedback hide" data-field="battery"></div>
+								</div>
+							</div>
+							<div class="form-group m-form__group row curr_battery_row hide">
+								<div class="col-lg-6">
+									<label for="battery-warranty-code" data-field="warranty_code">Warranty Code</label>
+									<input type="text" name="warranty_code" id="battery-warranty-code" class="form-control m-input" data-required="0">
+									<div class="form-control-feedback hide" data-field="warranty_code"></div>
+								</div>
+								<div class="col-lg-6">
+									<label for="battery-warranty-expiration" data-field="warranty_expiration">Warranty Expiration</label>
+									<div class="input-group date dp">
+										<input type="text" name="warranty_expiration" id="battery-warranty-expiration" class="form-control m-input" readonly placeholder="Select a date" data-required="0">
+										<span class="input-group-addon">
+											<i class="la la-calendar glyphicon-th"></i>
+										</span>
+									</div>
+									<div class="form-control-feedback hide" data-field="warranty_expiration"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="modal-footer">
+						<input type="hidden" name="id" id="cv-id" value="" data-required="0">
+						<input type="hidden" name="index" id="row-index" value="" data-required="0">
+						<button type="button" class="btn btn-secondary" data-dismiss="modal">
+							Close
+						</button>
+						<button type="submit" class="btn btn-primary">
+							Save changes
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 {% endblock %}
 
 {% block scripts %}
@@ -122,13 +283,26 @@
 		$(function() {
 			$("#row-form").submit(function(e) {
 				var form = $(this);
+				var formdata = form.serializeArray();
 
 				e.preventDefault();
 
+				// add mobile number data
+				formdata.push({
+					name: 'mobile_numbers',
+					value: JSON.stringify(numberRows)
+				});
+
+				// add vehicle data
+				formdata.push({
+					name: 'vehicles',
+					value: JSON.stringify(vehicleRows)
+				});
+
 				$.ajax({
 					method: "POST",
 					url: form.prop('action'),
-					data: form.serialize()
+					data: formdata
 				}).done(function(response) {
 					// remove all error classes
 					removeErrors();
@@ -184,14 +358,25 @@
 			}
 
 			// datetimepicker
-			$(".date").datetimepicker({
+			$(".dtp").datetimepicker({
 	            format: "dd M yyyy - HH:ii P",
 	            showMeridian: true,
 	            todayHighlight: true,
 	            autoclose: true,
 	            pickerPosition: 'top-left',
 	            bootcssVer: 3,
-	            todayBtn: true
+	            todayBtn: true,
+	            clearBtn: true
+	        });
+
+	        // datepicker
+			$(".dp").datepicker({
+	            format: "dd M yyyy",
+	            todayHighlight: true,
+	            autoclose: true,
+	            pickerPosition: 'top-left',
+	            bootcssVer: 3,
+	            clearBtn: true
 	        });
 
 	        // input mask
@@ -200,12 +385,16 @@
 	            placeholder: ""
 	        });
 
+	        $("#vehicle-year").inputmask("mask", {
+	            mask: "9999",
+	            placeholder: ""
+	        });
+
 	        // initialize arrays
 	        var numberRows = [];
 			var numberIds = [];
 			var mfgVehicles = [];
 			var vehicleRows = [];
-			var vehicleIds = [];
 
 			{% for number in obj.getMobileNumbers() %}
 				nrow = {
@@ -224,44 +413,27 @@
 
 				vrow = {
 					id: "{{ cv.getID() }}",
-					mfg_name: "{{ vehicle.getManufacturer().getName() }}",
+					index: moment().unix(),
-					make: "{{ vehicle.getMake() }}",
+					battery: "{{ battery.getID() }}",
-					model_year: "{{ cv.getModelYear() }}",
+					bmfg: "{{ battery.getManufacturer().getID() }}",
 					color: "{{ cv.getColor() }}",
-					status_condition: "{{ cv.getStatusCondition() }}",
+					flag_active: {{ cv.isActive() }},
-					fuel_type: "{{ cv.getFuelType() }}",
-					warranty_code: "{{ cv.getWarrantyCode() }}",
-					warranty_expiration: "{{ cv.getWarrantyExpiration() ? cv.getWarrantyExpiration()|date('d M Y') }}",
-					curr_battery_id: "{{ battery.getID() }}",
-					curr_battery_prod_code: "{{ battery.getProductCode() }}",
-					curr_battery_manufacturer: "{{ battery.getManufacturer().getName() }}",
 					flag_motolite_battery: {{ cv.hasMotoliteBattery() }},
-					flag_active: {{ cv.isActive() }}
+					fuel_type: "{{ cv.getFuelType() }}",
+					mfg_name: "{{ vehicle.getManufacturer().getName() }}",
+					model_year: "{{ cv.getModelYear() }}",
+					plate_number: "{{ cv.getPlateNumber() }}",
+					status_condition: "{{ cv.getStatusCondition() }}",
+					vehicle: "{{ vehicle.getID() }}",
+					vehicle_label: "{{ vehicle.getMake() ~ ' (' ~ vehicle.getModelYearStart() ~ ' ' ~ vehicle.getModelYearEnd() ~ ')' }}",
+					vmfg: "{{ vehicle.getManufacturer().getID() }}",
+					warranty_code: "{{ cv.getWarrantyCode() }}",
+					warranty_expiration: "{{ cv.getWarrantyExpiration() ? cv.getWarrantyExpiration()|date('d M Y') }}"
 				};
 
 				vehicleRows.push(vrow);
-				vehicleIds.push("{{ cv.getID() }}");
 			{% endfor %}
 
-			vrow = {
-				id: "123",
-				mfg_name: "Mitsubishi",
-				make: "Lancer",
-				model_year: "1996",
-				color: "Red",
-				status_condition: "New",
-				fuel_type: "Gas",
-				warranty_code: "12345",
-				warranty_expiration: "15 Jan 2018",
-				curr_battery_id: "11",
-				curr_battery_prod_code: "TESTBATT",
-				curr_battery_manufacturer: "Motolite",
-				flag_motolite_battery: 1,
-				flag_active: 1
-			};
-
-			vehicleRows.push(vrow);
-
 			// add a mobile number to the table
 			$("#btn-add-mobile-number").click(function() {
 				var id = $("#mobile-number").val();
@@ -335,7 +507,7 @@
 				vehicleTable.reload();
 			});
 
-			// remove mobile number from table
+			// remove item from table
 			$(document).on('click', '.btn-delete', function(e) {
 				var btn = $(this);
 				var id = $(this).data('id');
@@ -346,23 +518,21 @@
 
 				if (table.parent().prop('id') == 'data-mobile-numbers') {
 					rowArray = numberRows;
-					rowIds = numberIds;
 					dt = numberTable;
+
+					// remove from ids
+					numberIds.splice(numberIds.indexOf(id), 1);
 				} else {
 					rowArray = vehicleRows;
-					rowIds = vehicleIds;
 					dt = vehicleTable;
 				}
 
 				$.each(rowArray, function(index, row) {
 					if (row.id == id) {
-						rowArray.splice(index, 1);
+						delete rowArray.splice(index, 1);
 						return false;
 					}
 				});
-
-				// remove from ids
-				rowIds.splice(rowIds.indexOf(id), 1);
 				
 				// reload table
 				dt.row(btn.parents('tr')).remove();
@@ -370,6 +540,254 @@
 				dt.reload();
 			});
 
+			// display create vehicle form
+			$("#add-vehicle").click(function() {
+				$("#vehicle-form").data('mode', 'create');
+				$("#vehicle-form-title").html("Add Vehicle");
+				$("#vehicle-form-modal").modal('show');
+			});
+
+			// find vehicle row by index
+			function findVehicleRow(index) {
+				for (var i = 0, len = vehicleRows.length; i < len; i++) {
+			        if (vehicleRows[i].index === index) {
+			            return {
+			            	row: vehicleRows[i],
+			            	index: i
+			            };
+			        }
+			    }
+
+			    return false;
+			}
+
+			// display edit vehicle form
+			$(document).on("click", ".btn-edit-vehicle", function() {
+				var form = $("#vehicle-form");
+				var tr = $(this).closest('tr');
+				var index = parseInt(tr.find("[name='index']").val());
+				var rowData = findVehicleRow(index);
+
+			    if (!rowData) {
+			    	return;
+			    }
+
+			    row = rowData.row;
+
+			    // set form mode
+				form.data('mode', 'update');
+				$("#vehicle-form-title").html("Edit Vehicle");
+
+				// set index
+				$("#row-index").val(row.index);
+
+				// set text/select field values manually
+				form.find("input[type='text'], select").each(function() {
+					var rowval = row[$(this).prop('name')];
+
+					if (typeof rowval !== 'undefined') {
+						$(this).val(rowval);
+					}
+				});
+
+				// set entity ids
+				$("#vehicle").data('id', row.vehicle);
+				$("#battery").data('id', row.battery);
+				$("#cv-id").val(row.id);
+
+				// set select box values
+				$("#vmfg").val(row.vmfg).change();
+
+				if (row.battery) {
+					$("#flag-motolite-battery").prop('checked', true).change();
+					$("#bmfg").val(row.bmfg).change();
+				}
+
+				$("#flag-active").prop('checked', row.flag_active);
+
+				// show modal
+				$("#vehicle-form-modal").modal('show');
+			});
+
+			// update vehicle list when changing manufacturer
+			$("#vmfg").change(function() {
+				var id = $(this).val();
+				var field = $("#vehicle");
+
+				// no id specified
+				if (!id) {
+					field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
+					return true;
+				}
+
+				// get vehicles for this manufacturer
+				$.ajax({
+					method: "POST",
+					url: "{{ url('vmfg_vehicles') }}",
+					data: {id: id}
+				}).done(function(response) {
+					if (response.data.length > 0) {
+						var html = '';
+
+						$.each(response.data, function(index, vehicle) {
+							html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' (' + vehicle.model_year_from + '-' + vehicle.model_year_to + ')</option>';
+						});
+
+						field.html(html).prop('disabled', false);
+					} else {
+						field.html('<option value="">No vehicles found</option>').prop('disabled', true);
+					}
+				})
+			});
+
+			// update battery list when changing manufacturer
+			$("#bmfg").change(function() {
+				var id = $(this).val();
+				var field = $("#battery");
+
+				// no id specified
+				if (!id) {
+					field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
+					return true;
+				}
+
+				// get vehicles for this manufacturer
+				$.ajax({
+					method: "POST",
+					url: "{{ url('bmfg_batteries') }}",
+					data: {id: id}
+				}).done(function(response) {
+					if (response.data.length > 0) {
+						var html = '';
+
+						$.each(response.data, function(index, battery) {
+							html += '<option value="' + battery.id + '" data-index="' + index + '">' + battery.model_name + ' ' + battery.size_name + ' (' + battery.prod_code + ')</option>';
+						});
+
+						field.html(html).prop('disabled', false);
+					} else {
+						field.html('<option value="">No batteries found</option>').prop('disabled', true);
+					}
+				})
+			});
+
+			// toggle motolite battery area
+			$("#flag-motolite-battery").change(function() {
+				var currBatteryRows = $(".curr_battery_row");
+
+				if ($(this).prop('checked') == true) {
+					currBatteryRows.removeClass('hide').find("[name='battery']").data('required', 1);
+				} else {
+					currBatteryRows.addClass('hide').find("[name='battery']").data('required', 0);
+				}
+			});
+
+			// save vehicle form
+			$("#vehicle-form").submit(function(e) {
+				var form = $(this);
+				var mode = form.data('mode');
+
+				// get all fields, including disabled ones
+				var disabled = form.find(":input:disabled").prop('disabled', false);
+				var fields = form.serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0];
+				disabled.prop('disabled', true);
+
+				e.preventDefault();
+
+				var errors = 0;
+				var firstfield = false;
+
+				// remove all error classes first
+				removeErrors();
+
+				// check for required fields
+				$.each(fields, function(field, value) {
+					var formfield = form.find("[name='" + field + "']");
+					var label = form.find("label[data-field='" + field + "']");
+					var msgbox = form.find(".form-control-feedback[data-field='" + field + "']");
+					var required = formfield.data('required');
+
+					if (required === 1 && !value) {
+						errors++;
+
+						// add error classes to bad fields
+						formfield.addClass('form-control-danger');
+						label.addClass('has-danger');
+						msgbox.html("This value should not be blank.").addClass('has-danger').removeClass('hide');
+
+						// check if this field comes first in DOM
+						var domfield = formfield.get(0);
+
+						if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
+							firstfield = domfield;
+						}
+					}
+				});
+
+				// errors were found
+				if (errors > 0) {
+					// focus on first bad field
+					firstfield.focus();
+
+					// scroll to above that field to make it visible
+					$('html, body').animate({
+				        scrollTop: $(firstfield).offset().top - 200
+				    }, 100);
+
+				    return false;
+				}
+
+				// build table row
+				var row = fields;
+				row.mfg_name = $("#vmfg option:selected").text();
+				row.vehicle_label = $("#vehicle option:selected").text();
+				row.flag_active = row.flag_active == 1 ? true : false;
+
+				// add optional field
+				if (typeof fields.flag_motolite_battery === 'undefined') {
+					row.flag_motolite_battery = false;
+					row.battery_label = "";
+				} else {
+					row.flag_motolite_battery = true;
+					row.battery_label = $("#battery option:selected").text();
+				}
+
+				if (mode == 'create') {
+					// set an index
+					row.index = moment().unix();
+
+					// save to table
+					vehicleRows.push(row);
+				} else {
+					// get vehicle row by index
+					row.index = parseInt(row.index);
+					rowData = findVehicleRow(row.index);
+					vehicleRows[rowData.index] = row;
+				}
+
+				// refresh the data table
+				vehicleTable.originalDataSet = vehicleRows;
+				vehicleTable.reload();
+
+				// close modal
+				$("#vehicle-form-modal").modal('hide');
+			});
+
+			// reset vehicle form status on close
+			$("#vehicle-form-modal").on('hidden.bs.modal', function(e) {
+				$("#flag-motolite-battery").prop('checked', false).change();
+				$("#flag-active").prop('checked', true);
+				$("#vehicle-form").find("input[type='text'], select").val("").change();
+				removeErrors();
+			});
+
+			// remove all error classes on vehicle form
+			function removeErrors() {
+				$(".form-control-danger").removeClass('form-control-danger');
+				$("[data-field]").removeClass('has-danger');
+				$(".form-control-feedback[data-field]").addClass('hide');
+			}
+
 	        // mobile numbers data table
 			var numberOptions = {
 				data: {
@@ -431,27 +849,26 @@
 						title: 'Manufacturer'
 					},
 					{
-						field: 'make',
+						field: 'vehicle_label',
-						title: 'Make'
+						title: 'Vehicle',
+						width: 150
 					},
 					{
 						field: 'model_year',
-						title: 'Year',
+						title: 'Year'
-						template: function (row, index, datatable) {
+					},
-							return '<input type="text" class="form-control" value="' + row.model_year + '" name="year_' + index + '">'
+					{
-						}
+						field: 'plate_number',
+						title: 'Plate No.'
 					},
 					{
 						field: 'color',
 						title: 'Color',
-						template: function (row, index, datatable) {
+						width: 70
-							return '<input type="text" class="form-control" value="' + row.color + '" name="color_' + index + '">'
-						}
 					},
 					{
 						field: 'status_condition',
-						title: 'Status',
+						title: 'Cond.'
-						width: 50
 					},
 					{
 						field: 'fuel_type',
@@ -459,48 +876,29 @@
 					},
 					{
 						field: 'warranty_code',
-						title: 'Warranty Code',
+						title: 'Wty. Code'
-						template: function (row, index, datatable) {
-							return '<input type="text" class="form-control" value="' + row.warranty_code + '" name="warranty_code_' + index + '">'
-						}
 					},
 					{
 						field: 'warranty_expiration',
-						title: 'Warranty Expiration',
+						title: 'Wty. Exp.',
-						width: 150,
+						width: 80
-						template: function (row, index, datatable) {
-							return '<input type="text" class="form-control" value="' + row.warranty_expiration + '" name="warranty_expiration_' + index + '">'
-						}
 					},
 					{
-						field: 'curr_battery',
+						field: 'battery_label',
-						title: 'Current Battery',
+						title: 'Battery',
-						template: function (row, index, datatable) {
+						width: 150
-							return row.curr_battery_manufacturer + ' ' + row.curr_battery_prod_code;
-						}
-					},
-					{
-						field: 'flag_motolite_battery',
-						title: 'Using Motolite battery?',
-						template: function (row, index, datatable) {
-							html = '<select class="form-control" name="flag_motolite_battery_' + index + '">';
-							$.each(['False', 'True'], function(val, text) {
-								html += '<option value="' + val + '"' + (val == row.flag_motolite_battery ? ' selected' : '') + '>' + text + '</option>';
-							});
-							html += '</select>';
-							return html;
-						}
 					},
 					{
 						field: 'flag_active',
-						title: 'Is the vehicle active?',
+						title: 'Status',
 						template: function (row, index, datatable) {
-							html = '<select class="form-control" name="flag_motolite_battery_' + index + '">';
+							if (row.flag_active === true) {
-							$.each(['False', 'True'], function(val, text) {
+								tag = '<span class="m-badge  m-badge--success m-badge--wide">Active</span>';
-								html += '<option value="' + val + '"' + (val == row.flag_active ? ' selected' : '') + '>' + text + '</option>';
+							} else {
-							});
+								tag = '<span class="m-badge  m-badge--danger m-badge--wide">Inactive</span>';
-							html += '</select>';
+							}
-							return html;
+
+							return tag;
 						}
 					},
 					{
@@ -510,7 +908,12 @@
 						sortable: false,
 						overflow: 'visible',
 						template: function (row, index, datatable) {
-							return '<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" title="Delete"><i class="la la-trash"></i></button>';
+							html = '<input type="hidden" name="index" value="' + row.index + '">';
+
+							html += '<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit-vehicle" data-id="' + row.mfg_name + ' ' + row.make + ' ' + row.year + '" title="Edit"><i class="la la-edit"></i></button>' +
+								'<button data-id="' + row.id + '" type="button" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" title="Delete"><i class="la la-trash"></i></button>';
+
+							return html;
 						},
 					}
 				],