Continue work on customer form template

templates/customer/form.html.twig

@@ -65,7 +65,37 @@
 									</div>	
 								</div>
 								<div class="tab-pane" id="mobile-numbers" role="tabpanel">
-									
+									<div class="form-group m-form__group row form-group-inner">
+										<div class="col-lg-12">
+											<div id="data-mobile-numbers"></div>
+										</div>
+									</div>
+									<div class="form-group m-form__group row form-group-inner">
+										<div class="col-lg-3">
+											<input type="text" name="mobile_number" class="form-control m-input" placeholder="Mobile number">
+											<div class="form-control-feedback hide" data-field="mobile_number"></div>
+											<span class="m-form__help">Use the format 63xxxxxxxxxx</span>
+										</div>
+										<div class="col-lg-3">
+											<div class='input-group date' id='date_registered'>
+												<input type='text' class="form-control m-input datetimepicker" name="date_registered" placeholder="Select registration date" readonly />
+												<span class="input-group-addon">
+													<i class="la la-calendar glyphicon-th"></i>
+												</span>
+											</div>
+										</div>
+										<div class="col-lg-3">
+											<div class='input-group date' id='date_confirmed'>
+												<input type='text' class="form-control m-input datetimepicker" name="date_confirmed" placeholder="Select confirmation date" readonly />
+												<span class="input-group-addon">
+													<i class="la la-calendar glyphicon-th"></i>
+												</span>
+											</div>
+										</div>
+										<div class="col-lg-3">
+											<button type="button" class="btn btn-primary" id="btn-add-vehicle" disabled>Add to List</button>
+										</div>
+									</div>
 								</div>
 								<div class="tab-pane" id="vehicles" role="tabpanel">
 									
@@ -154,6 +184,65 @@
 				$("[data-field]").removeClass('has-danger');
 				$(".form-control-feedback[data-field]").addClass('hide');
 			}
+
+			// datetimepicker
+			$(".datetimepicker").datetimepicker({
+	            format: "dd MM yyyy - HH:ii P",
+	            showMeridian: true,
+	            todayHighlight: true,
+	            autoclose: true,
+	            pickerPosition: 'bottom-left'
+	        });
+
+	        // data tables
+			var options = {
+				data: {
+					type: 'local',
+					source: vehicleRows,
+					saveState: {
+			            cookie: false,
+			            webstorage: false
+			        }
+				},
+				layout: {
+					scroll: true
+				},
+				columns: [
+					{
+						field: 'id',
+						title: 'ID',
+						width: 30
+					},
+					{
+						field: 'mfg_name',
+						title: 'Manufacturer'
+					},
+					{
+						field: 'make',
+						title: 'Make'
+					},
+					{
+						field: 'model_year_from',
+						title: 'Year',
+						template: function (data) {
+				            return data.model_year_from + ' - ' + data.model_year_to;
+				        }
+					},
+					{
+						field: 'Actions',
+						width: 70,
+						title: 'Actions',
+						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>';
+						},
+					}
+				],
+				pagination: false
+			};
+
+			var table = $("#data-vehicles").mDatatable(options);
 		});
 	</script>
 {% endblock %}