function close(id, event) {
	loan_add_popup.hide();
}
var loan_add_form = {
	"view": "popup",
	"id": "loan_add_popup",
	"css": "loan_add_popup",
	"position":"center",
	head:"This window can be moved",
	close : true , 
	"modal" :true,
	"move" : true, 
	"width": 800,
	"body": {
		"rows": [
			{
				"view": "toolbar",
				"css": "webix_dark",
				"paddingX": 5,
				"cols": [
					{ "view": "icon", "icon": "wxi-clock" },
					{ "view": "label", "label": "Add new Transactions" },
					{ "view": "button", "label": "Close", "width": 80 , "click": "close"  }
				]
			},
			{
				"view": "form",
				"margin": 40,
				"rows": [
					{
						"margin": 20,
						"cols": [
							{
								"margin": 10,
								"rows": [
									{ "view": "template", "type": "section", "template": "Event" },
									{ "view": "text", "placeholder": "Type here...", "label": "Event Name", "labelWidth": 100 },
									{
										"view": "datepicker",
										"label": "Start Date",
										"value": "2020-10-15T17:10:48.414Z",
										"timepicker": true,
										"format": "%H:%i %D, %d %M",
										"labelWidth": 100
									},
									{
										"view": "datepicker",
										"label": "End Date",
										"value": "2020-10-15T18:10:48.414Z",
										"format": "%H:%i %D, %d %M",
										"timepicker": true,
										"labelWidth": 100
									},
									{
										"view": "rangeslider",
										"label": "Time Slot",
										"min": 8,
										"max": 20,
										"value": [
											10,
											15
										],
										"title": "#value#",
										"labelWidth": 100
									},
									{
										"view": "multicombo",
										"label": "Speakers",
										"value": "1,2",
										"options": "demo->5f82268d61c7b80018b278db",
										"labelWidth": 100
									},
									{
										"view": "richselect",
										"label": "Room",
										"value": "1",
										"options": "demo->5f82268d61c7b80018b278d7",
										"labelWidth": 100
									},
									{ "view": "counter", "label": "Participants", "value": 30, "labelWidth": 100 }
								]
							},
							{
								"margin": 10,
								"rows": [
									{ "view": "template", "type": "section", "template": "Handouts" },
									{
										"view": "radio",
										"label": "Font Family",
										"value": "Arial",
										"options": [
											"Roboto",
											"Arial",
											"Calibri"
										],
										"labelWidth": 130
									},
									{
										"view": "radio",
										"label": "Font Weight",
										"value": "400",
										"options": [
											"400",
											"500",
											"700"
										],
										"labelWidth": 130
									},
									{ "view": "text", "label": "Font Size (px)", "value": "14", "labelWidth": 130 },
									{ "view": "colorpicker", "label": "Background", "value": "#CE9EFF", "labelWidth": 130 },
									{ "view": "colorpicker", "label": "Font Color", "value": "#6C6C6C", "labelWidth": 130 },
									{ "view": "colorpicker", "label": "Header Font", "value": "#00004C", "labelWidth": 130 },
									{ "view": "checkbox", "value": 1, "label": "Material Icons", "labelWidth": 130 }
								]
							}
						]
					},
					{
						"options": "demo->5f82268d61c7b80018b278d7",
						"label": "Values",
						"value": "1,2",
						"view": "multicombo",
						"height": 38
					},
					{ "view": "textarea", "placeholder": "Type here...", "label": "Additional Details", "labelPosition": "top", "labelWidth": 100 },
					{
						"margin": 10,
						"cols": [
							{ "view": "template", "template": " ", "role": "placeholder", "borderless": true },
							{ "view": "button", "label": "Discard", "css": "webix_transparent", "align": "right", "width": 120 , "click" : "close"},
							{ "view": "button", "css": "webix_primary", "label": "Save", "align": "right", "width": 120, "click" :"close" }
						]
					}
				]
			}
		]
	}
};
var loan_add_popup = webix.ui(loan_add_form);