<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
    <div class="page " data-name="account-settings"> <!-- 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">{{@global.LANGUAGE.MENU_MSG03}}</div>
                <!-- <div class="right">
                    <a href="#"  @click="promptQuit" class="link" >
                        <i class="icon-header-close "></i>
                    </a>
                </div> -->
            </div>
        </div>

        <div class="toolbar tabbar-labels tabbar-custom">
            <div class="toolbar-inner">
                <a href="#user-profile" class="tab-link tab-link-active">
                    <i class="icon f7-icons icon-profile-name "></i>
                    <span class="tabbar-label">{{@global.LANGUAGE.USER_SETTINGS_MSG00}}</span>
                </a>
                <a href="#user-password" class="tab-link">
                    <i class="icon f7-icons icon-password "></i>
                    <span class="tabbar-label">{{@global.LANGUAGE.USER_SETTINGS_MSG01}}</span>
                </a>
            </div>
        </div>

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

        <div class="tabs-animated-wrap">
            <div class="tabs">
                <form name="user-profile-form" class="page-content tab tab-active with-bottom-button" id="user-profile">
                    <input type="submit" id="submit-form-user" 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.USER_SETTINGS_MSG02}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="FirstName" value="{{FirstName}}" 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="SurName" value="{{SurName}}" 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" required 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_MSG05}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="tel" name="Mobile" value="{{Mobile}}" maxlength="200" placeholder="Enter phone number" pattern="[0-9]*" data-error-message="{{@global.LANGUAGE.PROMPT_MSG080}}" required validate>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="list no-margin-top">
                        <ul>

                            <li class="item-content item-input ">
                                <div class="item-media text-color-lightgray"><i class="f7-icons icon-address "></i></div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG09}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="Address0" value="{{Address0}}" 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_MSG10}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="Address1" value="{{Address1}}"  maxlength="200" >
                                    </div>
                                </div>
                            </li>
                            <li >
                                <a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-assets" data-open-in="popup" data-searchbar="true" data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}" data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}" data-close-on-select="true" >
                                  <select name="TimeZone" required validate >
                                    {{#TimeZoneList}}
                                      <option value="{{Value}}" {{#if State }}selected{{/if}}>{{Name}}</option>
                                    {{/TimeZoneList}}
                                  </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.USER_SETTINGS_MSG25}}</div>
                                    </div>
                                  </div>
                                </a>
                            </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_MSG11}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="Address2" value="{{Address2}}"  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_MSG12}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="Address3" value="{{Address3}}"  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_MSG13}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="text" name="Address4" value="{{Address4}}"  maxlength="200" >
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="block-title">{{@global.LANGUAGE.USER_SETTINGS_MSG28}}</div>
                    <div class="list no-margin-top">
                        <ul>
                            {{#unless isAgentOrDealer}}
                            <li>
                                <label class="item-checkbox item-content color-green">
                                    <input type="checkbox" name="checkbox-monthly-account-report" value="" {{#if isMonthlyAccountReport}}checked="checked"{{/if}}/>
                                    <i class="icon icon-checkbox"></i>
                                    <div class="item-inner">
                                        <div class="item-title">{{@global.LANGUAGE.USER_SETTINGS_MSG29}}</div>
                                    </div>
                                </label>
                            </li>
                            {{/unless}}
                            <li>
                                <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover" data-close-on-select="true">
                                    <select name="DataUpdateInterval" >
                                        <option value="30" {{#js_if "this.DataUpdateInterval == '30' "}} selected {{/js_if}}>30 {{@global.LANGUAGE.PROMPT_MSG0138}}</option>
                                        <option value="45" {{#js_if "this.DataUpdateInterval == '45' "}} selected {{/js_if}}>45 {{@global.LANGUAGE.PROMPT_MSG0138}}</option>
                                        <option value="60" {{#js_if "this.DataUpdateInterval == '60' "}} selected {{/js_if}}>1 {{@global.LANGUAGE.PROMPT_MSG0139}}</option>
                                        <option value="120" {{#js_if "this.DataUpdateInterval == '120' "}} selected {{/js_if}}>2 {{@global.LANGUAGE.PROMPT_MSG0139}}</option>
                                        <option value="300" {{#js_if "this.DataUpdateInterval == '300' "}} selected {{/js_if}}>5 {{@global.LANGUAGE.PROMPT_MSG0139}}</option>
                                    </select>
                                    <div class="item-content item-input">
                                        <div class="item-media text-color-lightgray">
                                            <i class="f7-icons icon-report-playback"></i>
                                        </div>
                                        <div class="item-inner">
                                            <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG27}}</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.USER_SETTINGS_MSG30}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.USER_SETTINGS_MSG31}}"></i></div>
                                    <div class="item-after">
                                        <label class="toggle toggle-init">
                                            <input type="checkbox" name="DisplayDriverName" {{#if DisplayDriverName}}checked="checked"{{/if}}>
                                            <span class="toggle-icon"></span>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <!--<li class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.HOME_MSG048}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0148}}"></i></div>
                                    <div class="item-after">
                                        <label class="toggle toggle-init">
                                            <input type="checkbox" name="SetGeolock">
                                            <span class="toggle-icon"></span>
                                        </label>
                                    </div>
                                </div>
                            </li>-->
							
                        </ul>
                    </div>
					
					{{#js_if "parsedDealer === 'quiktrak'"}}
					<div class="block-title">{{@global.LANGUAGE.USER_SETTINGS_MSG32}}</div>
                    <div class="list no-margin-top">
                        <ul>
						<li class="item-content" style="margin-top:15px">
							<div class="item-media text-color-lightgray"><i class="f7-icons text-color-red icon-admin-renewals" data-tooltip="Billing settings"></i></div>
							<div class="item-inner">
							  <a class="link external" href="https://billing.stripe.com/p/login/5kA9Cc7MycQYajecMM">{{@global.LANGUAGE.USER_SETTINGS_MSG33}}</a>
							  </div>
						  </li>
                        </ul>
                    </div>
                    {{/js_if}}
					{{#js_if "parsedDealer === 'autoprotect' || parsedDealer === 'al3rtgps' || parsedDealer === 'westrengps'"}}
					<div class="block-title">{{@global.LANGUAGE.USER_SETTINGS_MSG32}}</div>
                    <div class="list no-margin-top">
                        <ul>
						<li class="item-content" style="margin-top:15px">
							<div class="item-media text-color-lightgray"><i class="f7-icons text-color-red icon-admin-renewals" data-tooltip="Billing settings"></i></div>
							<div class="item-inner">
							  <a class="link external" href="https://billing.stripe.com/p/login/7sI4jIgc1dxog7ueUU">{{@global.LANGUAGE.USER_SETTINGS_MSG33}}</a>
							  </div>
						  </li>
                        </ul>
                    </div>
                    {{/js_if}}
					
                    <!-- <div class="block">
                        <div class="row">
                            <button type="submit" class="col button button-fill color-green">{{@global.LANGUAGE.COM_MSG06}}</button>
                        </div>
                    </div> -->
                </form>

                <form name="user-password-form" class="page-content tab" id="user-password">
                    <div class="block-title text-color-darkgray">{{@global.LANGUAGE.USER_SETTINGS_MSG26}}</div>
                    <div class="block">
                        <p class="">{{@global.LANGUAGE.PROMPT_MSG0105}}</p>
                    </div>
                    <input type="submit" id="submit-form-password" class="display-none" />
                    <div class="list ">
                        <ul>
                            <li 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.USER_SETTINGS_MSG06}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="password" value="" name = "oldpwd" placeholder="******" 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_MSG07}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="password" value="" pattern="^\\S+\\w{4,32}\\S{1,}" name = "newpwd" placeholder="******" 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-email "></i> --></div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.USER_SETTINGS_MSG08}}</div>
                                    <div class="item-input-wrap ">
                                        <input type="password" value="" name = "confirmpwd" placeholder="******" maxlength="200" required validate>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- <div class="block">
                        <div class="row">
                            <button type="submit" class="col button button-fill color-green">{{@global.LANGUAGE.COM_MSG06}}</button>
                        </div>
                    </div> -->
                </form>


            </div>
        </div>

    </div>



</template>


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

            var ret = {};


            var userInfo = self.$app.methods.getFromStorage('userInfo').UserInfo;
            var otherSettings = self.$app.methods.getFromStorage('otherSettings');
            console.log(userInfo)
            ret = userInfo;
            ret.TimeZoneList = Protocol.Helper.getTimezoneList(userInfo.TimeZoneID || userInfo.TimeZone);
            ret.CurrentFormButtonSubmit = 'submit-form-user';
            ret.DataUpdateInterval = !otherSettings.DataUpdateInterval ? '30' : otherSettings.DataUpdateInterval

            ret.permissions2 = self.$app.methods.getFromStorage('permissions2');
            ret.isAgentOrDealer = ret.CustomerType === Protocol.CustomerTypes.Agent || ret.CustomerType === Protocol.CustomerTypes.Dealer
            ret.isMonthlyAccountReport = (ret.permissions2 & Protocol.Permissions2Enum.MonthlyAccountReport) === 0

            return ret;
        },

        methods: {
            saveUserDetails: function(data, otherData){
                var self = this;

                self.$app.dialog.progress();
                self.$app.request.get(API_URL.EDIT_ACCOUNT, data, function (result, xhr, status) {
                    self.$app.dialog.close();
                    console.log(result);
                    if (result && result.MajorCode == '000') {
                        var userInfo = self.$app.methods.getFromStorage('userInfo');
                        self.$app.utils.extend(userInfo.UserInfo, data);
                        self.$app.methods.setInStorage({name:'userInfo', data: userInfo });

                        var otherSettings = self.$app.methods.getFromStorage('otherSettings');
                        otherSettings.DataUpdateInterval = otherData.DataUpdateInterval
                        self.$app.methods.setInStorage({name:'otherSettings', data: otherData });

                        leftView.router.back();
                        app.methods.login()
                    }
                    else if (result.MajorCode == '100' && result.MinorCode == '1002') {
                        self.$app.methods.customDialog({ title: data.Email, text: LANGUAGE.PROMPT_MSG043 });
                    
                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                function (xhr, status) {
                    self.$app.dialog.close();
                    self.$app.dialog.alert('Error occured at Save Asset details');
                },
                'json');
            },
            saveNewPassword: function(data){
                var self = this;

                self.$app.dialog.progress();
                self.$app.request.get(API_URL.RESET_PASSWORD, data, function (result, xhr, status) {
                    self.$app.dialog.close();
                    console.log(result);
                    if (result && result.MajorCode == '000') {

                        self.$app.dialog.alert(LANGUAGE.PROMPT_MSG012, function(){

                            self.$app.methods.logout();
                            leftView.router.back();
                        });
                    }else if(result && result.MajorCode == '100' && result.MinorCode == '1004'){
                        self.$app.dialog.alert(LANGUAGE.PROMPT_MSG037);
                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                function (xhr, status) {
                    self.$app.dialog.close();
                    self.$app.dialog.alert('Error occured at Save details');
                },
                'json');
            },

        },

        on: {
            pageInit: function (e, page) {
                var self = this;
                var profileForm = page.$pageEl.find('[name = "user-profile-form"]');
                var passwordForm = page.$pageEl.find('[name = "user-password-form"]');
                var tabs = page.$pageEl.find('.tab');


                tabs.on('tab:show', function(){
                    if (this.name == 'user-password-form') {
                        self.$setState({
                            CurrentFormButtonSubmit: 'submit-form-password'
                        });
                    }else{
                        self.$setState({
                            CurrentFormButtonSubmit: 'submit-form-user'
                        });
                    }
                });



                $$(profileForm).on('submit', function (e) {
                    e.preventDefault();

                    var userInfo = self.$app.methods.getFromStorage('userInfo');
                    var data = {
                        MajorToken: userInfo.MajorToken,
                        MinorToken: userInfo.MinorToken,
                        FirstName: page.$el.find('input[name="FirstName"]').val(),
                        SurName: page.$el.find('input[name="SurName"]').val(),
                        Mobile: page.$el.find('input[name="Mobile"]').val(),
                        Email: page.$el.find('input[name="Email"]').val(),
                        Address0: page.$el.find('input[name="Address0"]').val(),
                        Address1: page.$el.find('input[name="Address1"]').val(),
                        Address2: page.$el.find('input[name="Address2"]').val(),
                        Address3: page.$el.find('input[name="Address3"]').val(),
                        Address4: page.$el.find('input[name="Address4"]').val(),
                        TimeZone: page.$el.find('[name="TimeZone"]').val(),

                    };
                    if(!self.isAgentOrDealer){
                        let monthlyAccountReportEl = page.$el.find('[name="checkbox-monthly-account-report"]')
                        data.autoMonthlyReport = !monthlyAccountReportEl[0].checked ? Protocol.Permissions2Enum.MonthlyAccountReport : 0
                    }

                    let otherData = {
                        DataUpdateInterval: page.$el.find('[name="DataUpdateInterval"]').val(),
                    }
                    console.log(data);
                    self.saveUserDetails(data, otherData);

                    return false;
                });

                $$(passwordForm).on('submit', function (e) {
                    e.preventDefault();
                    var userInfo = self.$app.methods.getFromStorage('userInfo');
                    var data = {
                        MinorToken: userInfo.MinorToken,
                        oldpwd: page.$el.find('input[name="oldpwd"]').val(),
                        newpwd: page.$el.find('input[name="newpwd"]').val(),
                    };
                    var confirmpwd = page.$el.find('input[name="confirmpwd"]').val();

                    if (data.newpwd.length >= 6) {
                        if (data.newpwd == confirmpwd) {
                            self.saveNewPassword(data);
                        }else{
                            self.$app.dialog.alert(LANGUAGE.PROMPT_MSG010);
                        }
                    }else{
                        self.$app.dialog.alert(LANGUAGE.PROMPT_MSG011);
                    }


                    return false;
                });

            },
        }
    };
</script>
