var broker_form =
{
    "view": "popup",
    "id": "broker_add_popup",
    "css": "broker_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": "mdi mdi-account" },
                    { "view": "label", "label": "Add/Edit Broker" },
                    { "view": "button", "label": "x", "width": 50 , click: close_broker_form}
                ]
            },
            {
                "view": "form",
                "margin": 40,
                "rows": [
                    {
                        "margin": 10,
                        "rows": [
                            { "view": "template", "type": "section", "template": "Broker Details" },
                            {
                                "cols": [
                                    {
                                        "rows": [
                                            { "view": "text", "placeholder": "Type here...", "label": "First Name", "labelWidth": 100 },
                                            { "label": "Last Name", "view": "text", "height": 38, "labelWidth": 100 },
                                            { "label": "Password", "view": "text", "height": 38, "labelWidth": 100, "type": "password" },
                                            { "label": "Phone", "view": "text", "labelWidth": 100, "type": "number" },
                                            {
                                                "options": "data/demo_loan_id.json",
                                                "label": "Values",
                                                "value": "1,2",
                                                "view": "multicombo",
                                                "height": 38,
                                                "labelWidth": 100
                                            },
                                            {
                                                "label": "Status",
                                                "value": "One",
                                                "options": [
                                                    "Enable",
                                                    " Disable"
                                                ],
                                                "view": "radio",
                                                "labelWidth": 100
                                            },
                                            { "view": "template", "template": "You can place any widget here..", "role": "placeholder" }
                                        ]
                                    },
                                    {
                                        "rows": [
                                            { "view": "chart", "width": 400, "pieInnerText": "#value#", "label": "#month#", "url": "data/demo_chart.json" }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "margin": 10,
                        "cols": [
                            { "view": "template", "template": " ", "role": "placeholder", "borderless": true },
                            { "view": "button", "label": "Discard", "css": "webix_transparent", "align": "right", "width": 120 , click : close_broker_form},
                            { "view": "button", "css": "webix_primary", "label": "Save", "align": "right", "width": 120 , click : close_broker_form}
                        ]
                    }
                ]
            }
        ]
    }
};

var broker_form_popup = webix.ui(broker_form);

function close_broker_form(){
    broker_form_popup.hide();
}