<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="customers-edit"> <!-- page-with-subnavbar -->
        <!-- Top Navbar -->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link back">
                            <i class="icon icon-back"></i>
                        </a>
                    </div>
                    <div class="title sliding">{{PageTitle}}</div>
                    <div class="right">
                    </div>


                </div>
            </div>


{{#js_if "this.Code == '000000'"}}
            <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
                <div class="row">
                    <label for="submit-form-customer-edit" class="col button button-fill color-green elevation-2" tabindex="0">{{@global.LANGUAGE.COM_MSG06}}</label>
                </div>
            </div>
{{/js_if}}
            <!-- Scrollable page content-->
            <form name="CustomerEditForm" class="page-content">
                <input type="hidden" name="Code" value="{{Code}}">
                               
                <input type="submit" id="submit-form-customer-edit" class="display-none" />

                <div class="list no-margin no-hairlines ">
                    <ul>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-profile-name "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.CUSTOMER_SETTINGS_MSG00}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Name" value="{{Name}}" placeholder="{{@global.LANGUAGE.CUSTOMER_SETTINGS_MSG00}}" maxlength="200" required validate>
                                </div>
                            </div>
                        </li>
						
						<li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-profile-name "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG02}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="FirstName" value="{{FirstName}}" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG02}}" maxlength="200" required validate>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><!-- <i class="f7-icons icon-profile-name "></i> --></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG03}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="SubName" value="{{SubName}}" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG03}}" maxlength="200" required validate>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-email "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG04}}</div>
                                <div class="item-input-wrap ">
                                    <input type="email" name="Email" value="{{Email}}" maxlength="200" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG04}}" required validate>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.LOGIN_MSG02}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Lgn" value="{{LoginName}}" maxlength="200" placeholder="{{@global.LANGUAGE.LOGIN_MSG02}}" required validate>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-password"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USERS_LIST_MSG09}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Pwd" class="padding-right-36" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG09}}" value="888888" disabled readonly required validate maxlength="200" minlength="6"  >
                                        <span class="password-toggle text-color-gray"><!--<i class="f7-icons icon-view-all "></i>--></span>
                                    </div>
                                </div>
                            </div>
                        </li>
						
						
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-mobile "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG14}}({{@global.LANGUAGE.COM_MSG129}})</div>
                                <div class="item-input-wrap ">
                                    <input type="tel" name="Mobile" value="{{Mobile}}" maxlength="200" placeholder="Enter mobile number" pattern="[0-9]*" data-error-message="Only numbers please!">
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-telephone "></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG05}}({{@global.LANGUAGE.COM_MSG129}})</div>
                                <div class="item-input-wrap ">
                                    <input type="tel" name="Phone" value="{{Phone}}" maxlength="200" placeholder="Enter phone number" pattern="[0-9]*" data-error-message="Only numbers please!">
                                </div>
                            </div>
                        </li> 


                    </ul>
                </div>

            </form>
        </div>
</template>


<script>
  // script must return component object
    return {
        data: function () {
            let self = this;

            let ret = {};
			let assetList = Object.values(self.$app.methods.getFromStorage('assetList'));
			
            if (self.$route.params) {
                if (self.$route.params.code) {
                    if (self.$route.params.code == '000000') {
                        ret = {
                            PageTitle: LANGUAGE.CUSTOMER_SETTINGS_MSG02,
                            Code: '000000',
							AssetList: assetList,
							selectAllAssets: false,
							isAssetSelectable: true,
							isChangable: true,
							CurrentRole: 0,
                        }
                    }else{
                        var customerList = self.$app.methods.getFromStorage('customerList');
                        var customer = customerList.find(obj => obj.Code == self.$route.params.code);

                        ret = customer;
						ret.FirstName = ret.Contact.split(' ')[0];
						ret.SubName = ret.Contact.split(' ')[1];
						ret.Phone = ret.Telephone;
						ret.AssetList = assetList;
						ret.selectAllAssets = false;
						ret.isAssetSelectable = true;
                        ret.PageTitle = 'View Customer\'s Info';//LANGUAGE.CUSTOMER_SETTINGS_MSG01;
						
						
                    }
                }
            }
            return ret;
        },
        methods: {

            saveUser: function(data){
                var self = this;

                var url = API_URL.CONTACT_CUSTOMER_ADDNEW;
                if (self.Code != '000000') {
                    url = API_URL.CONTACT_CUSTOMER_EDITNEW;
                }

                self.$app.preloader.show();
                self.$app.request.post(url, data, function (result, xhr, status) {

                    if (result.MajorCode == '000') {
                       self.getCustomerList(data.MajorToken);
                    }else if(result.MajorCode == '100' && result.MinorCode == '1005'){

                        self.$app.preloader.hide();
                        //self.$app.methods.customDialog({title: data.EMail, text: LANGUAGE.PROMPT_MSG043});
                        self.$app.dialog.alert('Something wrong, try again later');

                    }else{

                        self.$app.preloader.hide();
                        self.$app.dialog.alert('Something wrong, try again later');


                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Save Customer ');
                },
                'json');
            },
			 getCustomerList: function(MajorToken){
                var self = this;

                self.$app.request.get(API_URL.GET_CUSTOMER_LIST + '?MajorToken=00000000-0000-0000-0000-000000000000&MinorToken=00000000-0000-0000-0000-000000000000&rows=500&page=1&sort=Name&order=asc&q=&PCode='+MajorToken+'&CustomerType=&QA=', function (result, xhr, status) {
                    self.$app.preloader.hide();
                  
                    if (result && result.rows.length) {
                        self.$app.methods.setInStorage({name:'customerList', data:result.rows });
                        //setTimeout(() => leftView.router.back(), 
						//5000)
						
						self.$app.utils.nextTick(() => {
							leftView.router.back()
							self.$app.dialog.alert(LANGUAGE.CUSTOMER_LIST_MSG01);
							//self.$app.panel.close();
						}, 300);
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Get Customer List ');
                },
                'json');
            },
        },

        on: {
            pageInit: function (e, page) {
                var self = this;

                var form = page.$el.find('[name = "CustomerEditForm"]');
                $$(form).on('submit', function(e){
                    e.preventDefault();
					let uniqNum = self.$app.utils.id("xxxxxx");

                    /*var data = {
                        MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,
                        MinorToken: self.$app.methods.getFromStorage('userInfo').MinorToken,
                        FirstName: page.$el.find('input[name="FirstName"]').val(),
                        SubName: page.$el.find('input[name="SubName"]').val(),
                        Email: page.$el.find('input[name="Email"]').val(),
                        Mobile: page.$el.find('input[name="Mobile"]').val(),
                        Phone: page.$el.find('input[name="Phone"]').val(),
                        Number: '',//page.$el.find('input[name="Number"]')?.val(),
						LoginName: page.$el.find('input[name="Lgn"]').val() ? page.$el.find('input[name="Lgn"]').val() : page.$el.find('input[name="Email"]').val(),
                        Password: page.$el.find('input[name="Pwd"]').val(),
						RoleType: 2,
						AssetIds: null, //['3135343132','35303A363B']
                    };*/
					var data = {
						MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,
						MinorToken: self.$app.methods.getFromStorage('userInfo').MinorToken,
						Name: page.$el.find('input[name="FirstName"]').val() + ' ' + page.$el.find('input[name="SubName"]').val(),
						Type: '5',
						SecurityCode: uniqNum,
						SubsYearId: '',
						SubsMonthId: '',
						SubsYearPrice: '',
						SubsMonthPrice: '',
						VIN: '',
						Number: uniqNum,
						CountryCode: self.$app.methods.getFromStorage('userInfo').UserInfo.CountryCode,
						TimeFormat: 'dd/MM/yyyy HH:mm:ss',
						TimeZone: self.$app.methods.getFromStorage('userInfo').UserInfo.TimeZoneID+'_'+self.$app.methods.getFromStorage('userInfo').UserInfo.TimeZone,
						Language: 'en',
						ExtDoaminCode: 'ULoc8',
						WebSiteCode: '00000000-0000-0000-0000-000000000000',
						SpeedUnit: 'KPH',
						FirstName: page.$el.find('input[name="FirstName"]').val(),
						SurName: page.$el.find('input[name="SubName"]').val(),
						LoginName: page.$el.find('input[name="Lgn"]').val() ? page.$el.find('input[name="Lgn"]').val() : page.$el.find('input[name="Email"]').val(),
						Mail: page.$el.find('input[name="Email"]').val(),
						MobilePhone: page.$el.find('input[name="Mobile"]').val(),
						AdditionalNumber: page.$el.find('input[name="Mobile"]').val(),
						WorkPhone: page.$el.find('input[name="Phone"]').val(),
						AddressInfo1: '',
						AddressInfo2: '', 
						AddressInfo3: '',
						AddressInfo4: '',
						AddressInfo5: '',
						PayType: 'NONE',
						Controllable: 1,
						AllowCommand: 1,
						ScheduledImmobilzer: 1,
						autoMonthlyReport: 0,
						ActivationDevices: 'ScheduledImmobilzer',
						Credits: 0,
						Password: page.$el.find('input[name="Pwd"]').val(),
					}
                    if (self.Code != '000000') {
                        data.ContactCode =  page.$el.find('input[name="Code"]').val();
                    }
					console.log('cus',data,self.$app.methods.getFromStorage('userInfo'))
                    self.saveUser(data);

                    return false;
                });
				
				$$(page.$el).on('change', '[name = "selectAllAssets"]', function (el) {
                    self.$setState({
                        selectAllAssets: document.getElementById("selectAllAssets").checked,
                    });
                })

            },
            pageAfterOut: function () {

            },

        }
    };
</script>