<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="users-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">
                        <!-- <a href="#" class="link">
                                                 <i class="f7-icons icon-notification"></i>
                                             </a>    -->
                    </div>


                </div>
            </div>

            <div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
                <div class="row">
                    <label for="submit-form-user-edit" class="col button button-fill color-green elevation-2" tabindex="0">{{@global.LANGUAGE.COM_MSG06}}</label>
                </div>
            </div>

            <!-- Scrollable page content-->
            <form name="UsersEditForm" class="page-content">
                <input type="hidden" name="Code" value="{{Code}}">
				<!--<input type="hidden" name="Number" value="{{Number}}">-->
				
									<input type="hidden" name="FirstNameHidden" value="{{FirstName}}" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG02}}" maxlength="200" required validate>
                                    <input type="hidden" name="SubNameHidden" value="{{SubName}}" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG03}}" maxlength="200" required validate>
                                    <input type="hidden" name="EmailHidden" value="{{EMail}}" maxlength="200" placeholder="{{@global.LANGUAGE.USER_SETTINGS_MSG04}}"  validate>
                                    <input type="hidden" name="LgnHidden" value="{{LoginName}}" maxlength="200" placeholder="{{@global.LANGUAGE.LOGIN_MSG02}}"  validate>
                                    <input type="hidden" name="PwdHidden" class="padding-right-36" placeholder="{{@global.LANGUAGE.USERS_LIST_MSG09}}" value="{{Password}}"  validate maxlength="200" minlength="6"  >
                                    <input type="hidden" name="MobileHidden" value="{{Mobile}}" maxlength="200" placeholder="Enter mobile number" pattern="[0-9]*" data-error-message="Only numbers please!">
                                    <input type="hidden" name="PhoneHidden" value="{{Phone}}" maxlength="200" placeholder="Enter phone number" pattern="[0-9]*" data-error-message="Only numbers please!">
                                
				
				<input type="hidden" name="CurrentRole" value="{{CurrentRole}}">
				<input type="hidden" name="AssetsHidden" value="{{CurrentRole}}">
                               
                <input type="submit" id="submit-form-user-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-driver"></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">
                                    {{#if @global.IS_MARINE}}
                                    {{@global.LANGUAGE.CONTACT_LIST_MSG08}}
                                    {{else}}
                                    {{@global.LANGUAGE.CONTACT_LIST_MSG05}}
                                    {{/if}}
                                    ({{@global.LANGUAGE.COM_MSG129}})</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Number" value="{{Number}}" placeholder="{{@global.LANGUAGE.CONTACT_LIST_MSG05}}" maxlength="200">
                                </div>
                            </div>
                        </li> -->
						
                      <li class="item-content">
                        <div class="item-inner size-16"><b>Smart Button</b> </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">
                                 
                                    Tag Example
                                    
                                    </div>
                                <div class="item-input-wrap ">
                                    <img src="https://cartrack.co/images/ibutton.png" style="margin:15px 0" >
                                </div>
                                </div>
                             </li>
							 
							 
						<li>
							<label class="item-checkbox item-content">
								<input type="checkbox" name="isDriverButton" id="isDriverButton"  {{#if isDriverButton}} checked {{/if}}   />
								<div class="item-media text-color-lightgray">
								</div>
								<div class="item-inner">
									<div class="item-title">Set iButton</div>
									<div class="item-after">
										<i class="icon icon-checkbox"></i>
									</div>
								</div>
							</label>
						</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.CONTACT_LIST_MSG11}}  <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="This is a 2-digit number on the top left above the Serial ID"></i>
                                    
                                    </div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="FamilyId" value="{{FamilyId}}" placeholder="00" maxlength="2" validate minlength="2">
                                </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.CONTACT_LIST_MSG09}}  <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="This is the 12 digit number in the center of your iButton"></i>
                                
                              </div>
                            <div class="item-input-wrap ">
                                <input type="text" name="Number" value="{{Number}}" placeholder="000000000000" maxlength="12"  validate   minlength="12">
                            </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.CONTACT_LIST_MSG10}}  <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="This is a 2-digit number on the top right above the Serial ID"></i>
                                        
                                       </div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="CheckDigits" value="{{CheckDigits}}" placeholder="00" maxlength="2" validate minlength="2">
                                    </div>
                                    </div>
                                 </li>
								 
								 
								 <li class="item-content">
									<div class="item-inner size-16"><b>Driver info</b> </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">
                                    License Details (optional)</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="LicenceDetails" value="{{LicenceDetails}}" placeholder="License Details" maxlength="200">
                                </div>
                            </div>
                        </li>
						<li class="item-content item-input LicenceExpiryDateWrapper">
                            <div class="item-media text-color-lightgray"></div>
                            <div class="item-inner">
                                <div class="item-title item-label">
                                    License Expiry Date (optional)</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="LicenceExpiryDate" value="{{LicenceExpiryDate}}" placeholder="License Expiry Date" maxlength="200">
                                </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}}"  validate>
                                </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>
							<label class="item-checkbox item-content">
								<input type="checkbox" name="isDriverLogin" id="isDriverLogin" {{#if LoginName}} checked {{/if}} />
								<div class="item-media text-color-lightgray">
								</div>
								<div class="item-inner">
									<div class="item-title">Setup Driver Login</div>
									<div class="item-after">
										<i class="icon icon-checkbox"></i>
									</div>
								</div>
							</label>
						</li>
						{{#if isDriverLogin}}
                        <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}}"  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="{{Password}}"  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>
                        <!--
						{{#js_if "!this.Code"}}
                        {{/js_if}}<li class="item-content item-input ">
                            <div class="item-media text-color-lightgray"><i class="f7-icons icon-driver"></i></div>
                            <div class="item-inner">
                                <div class="item-title item-label">
                                    {{#if @global.IS_MARINE}}
                                    {{@global.LANGUAGE.CONTACT_LIST_MSG08}}
                                    {{else}}
                                    {{@global.LANGUAGE.CONTACT_LIST_MSG05}}
                                    {{/if}}
                                    ({{@global.LANGUAGE.COM_MSG129}})</div>
                                <div class="item-input-wrap ">
                                    <input type="text" name="Number" value="{{Number}}" placeholder="{{@global.LANGUAGE.CONTACT_LIST_MSG05}}" maxlength="200">
                                </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> 
						
						{{#if isChangable}} 
						<li>
                            <a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type " data-open-in="popover" data-close-on-select="true">
                                <select name="RoleType" required validate>
                                    {{#RoleTypesList}}
                                        <option value="{{Value}}"  {{#if Selected}} selected {{/if}}>{{Name}}</option>
                                    {{/RoleTypesList}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <!-- <i class="f7-icons icon-service-plan"></i> -->
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG15}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
						{{else}}
						<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.USER_SETTINGS_MSG15}}</div>
                                <div class="item-input-wrap ">
                                    <input type="text" value="{{userRole}}" disabled maxlength="200">
                                </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 text-color-red">
									{{@global.LANGUAGE.CONTACT_LIST_MSG12}}
								</div>
							</div>
						</li>
						{{/if}}
						
						{{#if isAssetSelectable}}
						<li key="assetListUser-key">
							<div class="block-title">{{@global.LANGUAGE.CONTACT_LIST_MSG13}}</div>
							<div class="block">
							  <p>{{@global.LANGUAGE.CONTACT_LIST_MSG14}}</p>
							</div>

							{{#if selectAllAssets}}
							<a class="item-link smart-select smart-select-init custom-smart-select smartSelectAssets"
								data-open-in="popup" data-searchbar="true"
								data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
								data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
								data-page-title="{{@global.LANGUAGE.ASSET_GROUPS_MSG08}}">
								<select name="Assets" multiple required validate>
									{{#AssetList}}
									<option value="{{Id}}" selected>{{Name}}</option>
									{{/AssetList}}
								</select>
								<div class="item-content item-input">
									<div class="item-media text-color-lightgray">
										<i class="f7-icons icon-name"></i>
									</div>
									<div class="item-inner">
										<div class="item-title item-label">{{@global.LANGUAGE.ASSET_GROUPS_MSG09}}</div>
									</div>
								</div>
							</a>
							{{else}}

							<a class="item-link smart-select smart-select-init custom-smart-select smartSelectAssets"
								data-open-in="popup" data-searchbar="true"
								data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
								data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
								data-page-title="{{@global.LANGUAGE.ASSET_GROUPS_MSG08}}">
								<select name="Assets" multiple >
									{{#AssetList}}
									<option value="{{Id}}" {{#if Selected}} selected {{/if}}>{{Name}}</option>
									{{/AssetList}}
								</select>
								<div class="item-content item-input">
									<div class="item-media text-color-lightgray">
										<i class="f7-icons icon-name"></i>
									</div>
									<div class="item-inner">
										<div class="item-title item-label">{{@global.LANGUAGE.ASSET_GROUPS_MSG09}}</div>
									</div>
									
								</div>
							</a>

						{{/if}}
						</li>
						<li>
							<label class="item-checkbox item-content">
								<input type="checkbox" name="selectAllAssets" id="selectAllAssets" {{#if selectAllAssets}}
									checked {{/if}} />
								<div class="item-media text-color-lightgray">
								</div>
								<div class="item-inner">
									<div class="item-title">{{@global.LANGUAGE.CONTACT_LIST_MSG15}}</div>
									<div class="item-after">
										<i class="icon icon-checkbox"></i>
									</div>
								</div>
							</label>
						</li>
					
					{{/if}}
					
					{{/if}}


                    </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'));
			var roleTypesList = Protocol.Helper.getUserRolesArray();
			console.log(roleTypesList)
            if (self.$route.params) {
                if (self.$route.params.code) {
                    if (self.$route.params.code == '000000') {
                        ret = {
                            PageTitle: LANGUAGE.USERS_LIST_MSG15,
                            Code: '000000',
							AssetList: assetList,
							selectAllAssets: false,
							isAssetSelectable: true,
							isChangable: true,
							CurrentRole: 0,
							isDriverLogin: false,
							isDriverButton: false,
							LicenceExpiryDateDatePicker: false,
							DatepickerFormat: 'DD/MM/YYYY',
                        }
                    }else{
                        var contactList = self.$app.methods.getFromStorage('contactList');
                        var user = contactList.find(obj => obj.Code == self.$route.params.code);
					
                        ret = user;
						ret.AssetList = assetList;
						ret.selectAllAssets = false;
						ret.isAssetSelectable = true;
                        ret.PageTitle = LANGUAGE.USERS_LIST_MSG16;
						ret.isDriverLogin = user?.LoginName?.length ? true : false;
						ret.isDriverButton = ret?.CheckDigits?.length || ret?.FamilyId?.length || ret?.Number?.length ? true : false;
						ret.DatepickerFormat = 'DD/MM/YYYY'
						
						let userList = self.$app.methods.getFromStorage('contactList');
						let details = self.$app.methods.findObjectByKey(userList, 'Code', self.$route.params.code);
						console.log(details)
						if (details.AssetIds.length) {	
							for (let i = 0; i < details.AssetIds.length; i++) {
								if(assetList.findIndex(el => el.Id === details.AssetIds[i]) != -1){
								assetList[assetList.findIndex(el => el.Id === details.AssetIds[i])].Selected = true; 
								} // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
							}
						}
						
						let roleIndex = 0;
						ret.CurrentRole = details.RoleType;
						ret.Password = details.Password;
							switch(details.RoleType){
								case 1:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								case 2:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								case 3:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								case 4:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								case 5:
									ret.isChangable = true;
									roleIndex = 5;
								break;
								case 6:
									ret.isChangable = true;
									roleIndex = 7;
								break;
								case 7:
									ret.isChangable = true;
									roleIndex = 7;
								break;
								case 8:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								case 9:
									ret.isChangable = true;
									roleIndex = 9;
								break;
								case 10:
									ret.isChangable = true;
									roleIndex = 9;
								break;
								case 11:
									ret.isChangable = true;
									roleIndex = 2;
								break;
								default:
									ret.isChangable = true;
									roleIndex = 2;
							}
							
							if(roleTypesList.findIndex(el => el.Value === roleIndex) != -1){
								roleTypesList[roleTypesList.findIndex(el => el.Value === roleIndex)].Selected = true; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
							}
							console.log('roleIndex',roleTypesList.findIndex(el => el.Value === roleIndex), roleIndex)
							if(!ret.isChangable){
								ret.userRole = Protocol.Helper.getUserTypeByNumber(details?.RoleType)?.Name;
							//}
							//if (details.RoleType == 2) {
								ret.isAssetSelectable = false;
							}
                    }
					
					ret.RoleTypesList = roleTypesList;
                }
            }
            //console.log(ret);
            return ret;
        },
        methods: {



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

					
                var url = API_URL.CONTACT_USER_ADDNEW; // + '?MajorToken=' + data.MajorToken + '&MinorToken=' + data.MinorToken;
                if (self.Code != '000000') {
                    url = API_URL.CONTACT_USER_EDITNEW;
                }
				
				/*let response =  fetch(url, {
					method: "POST",
					body: data
				});

				response = await response.json();
				if (response) {
						return response
				} else {
					return
				}

					console.log('data', data)*/
                self.$app.preloader.show();
                self.$app.request.post(url, data, function (result, xhr, status) {

                    if (result.MajorCode == '000') {
                       self.getContactList(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});

                    }else{

                        self.$app.preloader.hide();
                        
						if(self.isDriverLogin){
							self.$app.dialog.alert('Invalid fields');
						}

                    }

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

                self.$app.request.post(API_URL.GET_CONTACT_USERS_LISTNEW, {MajorToken}, function (result, xhr, status) {

                    self.$app.preloader.hide();
                    /*if (result.MajorCode == '000') {

                       leftView.router.back();
                    }else{
                        self.$app.dialog.alert('Something wrong, try again later');
                    }*/
                    if (result && result.length) {
                        self.$app.methods.setInStorage({name:'contactList', data:result });
                        leftView.router.back();
                    }

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

        },

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

                let LicenceExpiryDateEl = page.$el.find('input[name = "LicenceExpiryDate"]');

				$$(page.$el).on('change', 'input[name="isDriverLogin"]', function (el) {
						self.$setState({
							isDriverLogin: document.getElementById("isDriverLogin").checked,
						});
				})
				
				$$(page.$el).on('change', 'input[name="isDriverButton"]', function (el) {
					if(!document.getElementById("isDriverButton").checked){
						page.$el.find('input[name="Number"]').val('')
						page.$el.find('input[name="FamilyId"]').val('')
						page.$el.find('input[name="CheckDigits"]').val('')
					}
					/*self.$setState({
						isDriverButton: document.getElementById("isDriverButton").checked,
					});*/
				})
				
				
				
				self.LicenceExpiryDateDatePicker = new MaterialDatetimePicker({
                     el: LicenceExpiryDateEl[0],
                     format: self.DatepickerFormat,
                    openedBy: 'click',
                 });
				 
				 page.$el.on('click', '.LicenceExpiryDateWrapper', function(){
                	if (self.LicenceExpiryDateDatePicker) {
                		self.LicenceExpiryDateDatePicker.open();
                	}
                });
				
                var form = page.$el.find('[name = "UsersEditForm"]');
                $$(form).on('submit', function(e){
                    e.preventDefault();
                    //var assetsEl = page.$el.find('[name = "Assets"]');

					
					var data = {}
                    
					if(!self.isDriverLogin){
						data = {
							MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,
							MinorToken: self.$app.methods.getFromStorage('userInfo').MinorToken,
							Number: page.$el.find('input[name="Number"]')?.val(),
                            FamilyId: page.$el.find('input[name="FamilyId"]')?.val(),
                            CheckDigits: page.$el.find('input[name="CheckDigits"]')?.val(),
							LicenceDetails: page.$el.find('input[name="LicenceDetails"]')?.val(),
							LicenceExpiryDate: page.$el.find('input[name="LicenceExpiryDate"]')?.val(),
							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="PhoneHidden"]').val(),
							LoginName: page.$el.find('input[name="LgnHidden"]').val(),// ? page.$el.find('input[name="LgnHidden"]').val() : page.$el.find('input[name="Email"]').val(),
							Password: page.$el.find('input[name="PwdHidden"]').val(),
							RoleType: self.CurrentRole ? self.CurrentRole : 5,
							AssetIds: [],
							//RoleType: page.$el.find('[name="RoleTypeHidden"]')?.val() ? page.$el.find('[name="RoleTypeHidden"]')?.val() : self.CurrentRole,
							//AssetIds: page.$el.find('[name = "AssetsHidden"]')?.val() ? page.$el.find('[name = "AssetsHidden"]')?.val()?.length ? page.$el.find('[name = "AssetsHidden"]')?.val() : null : null, //['3135343132','35303A363B']
						};
					}else{
						data = {
							MajorToken: self.$app.methods.getFromStorage('userInfo').MajorToken,
							MinorToken: self.$app.methods.getFromStorage('userInfo').MinorToken,
							Number: page.$el.find('input[name="Number"]')?.val(),
                            FamilyId: page.$el.find('input[name="FamilyId"]')?.val(),
                            CheckDigits: page.$el.find('input[name="CheckDigits"]')?.val(),
							LicenceDetails: page.$el.find('input[name="LicenceDetails"]')?.val(),
							LicenceExpiryDate: page.$el.find('input[name="LicenceExpiryDate"]')?.val(),
							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(),
							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: page.$el.find('[name="RoleType"]')?.val() ? page.$el.find('[name="RoleType"]')?.val() : self.CurrentRole,
							AssetIds: page.$el.find('[name = "Assets"]')?.val() ? page.$el.find('[name = "Assets"]')?.val()?.length ? page.$el.find('[name = "Assets"]')?.val() : null : null, //['3135343132','35303A363B']
						};
					}
					
					
					
                    if (self.Code != '000000') {
                        data.ContactCode =  page.$el.find('input[name="Code"]').val();
						
						if(self.$app.methods.getFromStorage('userInfo').MinorToken == page.$el.find('input[name="Code"]').val()){
							self.$app.dialog.alert(LANGUAGE.CONTACT_LIST_MSG16);
							self.$app.preloader.hide();
							return
						}
                    }
					console.log(data)
                    self.saveUser(data);

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

            },
            pageAfterOut: function () {

            },

        }
    };
</script>