<!--suppress JSAnnotator -->
<template>
<!-- Page, data-name contains page name which can be used in callbacks -->
        <div class="page " data-name="asset-edit"> <!-- page-with-subnavbar -->
        	<!-- <form action="" name="AssetEditForm"> -->

        <!-- 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.ASSET_LIST_MSG05}}</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" class="col button button-fill color-green elevation-2" tabindex="0">{{@global.LANGUAGE.COM_MSG06}}</label>
                </div>
            </div>

            <!-- Scrollable page content-->
            <form name="AssetEditForm" class="page-content">

                <div class="top-asset-image-wrapper">
                    {{#if AssetImg}}
                        {{AssetImg}}
                    {{/if}}
                </div>

                <input type="file" hidden name="AssetImageInput" id="AssetImageInput" accept="image/*">
                <input type="hidden" name="Id" value="{{Id}}">
                <input type="hidden" name="IMEI" value="{{IMEI}}">
                <input type="submit" id="submit-form" class="display-none" />
                <div class="list margin-top-0">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-imei"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_EDIT_MSG01}}</div>
                                    <div class="item-after">{{IMEI}}</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media text-color-lightgray">
                                    <!-- <i class="f7-icons icon-imei"></i> -->
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_EDIT_MSG02}}</div>
                                    <div class="item-after">{{PRDTName}}</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons {{SolutionTypeIcon}}"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">{{@global.LANGUAGE.ASSET_EDIT_MSG15}}</div>
                                    <div class="item-after">{{#if SolutionTypeCustomName}}{{SolutionTypeCustomName}}{{else}}{{SolutionType}}{{/if}}</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="block-title">{{@global.LANGUAGE.ASSET_EDIT_MSG12}}</div>
                <div class="list ">
                    <ul>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons {{#if @global.IS_MARINE}}icon-boat{{else}}icon-name{{/if}}"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG03}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Name" placeholder="Asset name" value="{{Name}}" maxlength="200" required validate>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div 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.ASSET_EDIT_MSG04}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Registration" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG04}}" value="{{Registration}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div 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.ASSET_EDIT_MSG17}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="StockNumber" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG17}}" value="{{StockNumber}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div 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.ASSET_EDIT_MSG16}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Tag" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG16}}" value="{{TagName}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG05}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Describe1" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG05}}" value="{{Describe1}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG06}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Describe2" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG06}}" value="{{Describe2}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG07}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Describe3" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG07}}" value="{{Describe3}}" maxlength="200"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG08}}</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="Describe4" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG08}}" value="{{Describe4}}" maxlength="4" pattern="[0-9]*" data-error-message="Only numbers please!"  >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG21}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Describe7" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG21}}" value="{{Describe7}}"   >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover" data-close-on-select="true">
                                <select name="AssetType" >
                                    {{#AssetTypes}}
                                    <option value="{{this}}" {{#js_if "this == ../AssetType "}} selected {{/js_if}}>{{this}}</option>
                                    {{/AssetTypes}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                       <!-- <i class="f7-icons icon-speed"></i>-->
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG22}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover" data-close-on-select="true">
                                <select name="Unit" >
                                    <option value="KPH" {{#js_if "this.Unit == 'KPH' "}} selected {{/js_if}}>km/h</option>
                                    <option value="MPH" {{#js_if "this.Unit == 'MPH' "}} selected {{/js_if}}>mile/h</option>
                                    <option value="MPS" {{#js_if "this.Unit == 'MPS' "}} selected {{/js_if}}>m/s</option>
                                    <option value="KT" {{#js_if "this.Unit == 'KT' "}} selected {{/js_if}}>kt</option>
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-speed"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG09}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <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_LIST_MSG21}}</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="MaxSpeed" placeholder="{{@global.LANGUAGE.ASSET_LIST_MSG21}}" value="{{MaxSpeed}}" maxlength="4" pattern="[0-9]*" data-error-message="Only numbers please!"  validate >
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <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_LIST_MSG31}} ({{@global.LANGUAGE.ASSET_LIST_MSG33}})</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="BusinessExpense" placeholder="{{@global.LANGUAGE.ASSET_LIST_MSG31}}" value="{{BusinessExpense}}" maxlength="10" pattern="[.0-9]*" data-error-message="Only numbers please!"  validate >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_LIST_MSG32}} ({{@global.LANGUAGE.ASSET_LIST_MSG34}})</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="FuelEconomy" placeholder="{{@global.LANGUAGE.ASSET_LIST_MSG32}}" value="{{FuelEconomy}}" maxlength="10" pattern=".[0-9]*" data-error-message="Only numbers please!"  validate >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG18}} ({{@global.LANGUAGE.ASSET_EDIT_MSG19}})</div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="EngineCapacity" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG18}}" value="{{EngineCapacity}}" maxlength="10" pattern="[0-9]*" data-error-message="Only numbers please!"  validate >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <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_LIST_MSG35}} ({{@global.LANGUAGE.ASSET_LIST_MSG33}}) <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0110}}"></i></div>
                                    <div class="item-input-wrap">
                                        <input type="tel" name="OffroadTaxCredit" placeholder="{{@global.LANGUAGE.ASSET_LIST_MSG35}}" value="{{OffroadTaxCredit}}" maxlength="10" pattern="[.0-9]*" data-error-message="Only numbers please!"  validate >
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="{{#if NoGroups}} tooltip-init {{/if}}" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG057}}<br>{{@global.LANGUAGE.PROMPT_MSG058}}">
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#if NoGroups}} disabled  {{/if}}" data-open-in="popover" data-close-on-select="true"  >
                                <select name="GroupCode" >
                                    {{#GroupList}}
                                        <option value="{{Code}}" {{#js_if "this.Code == this.@root.GroupCode "}} selected {{/js_if}}>{{Name}}</option>
                                    {{/GroupList}}

                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons icon-admin-groups"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG14}}</div>

                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="{{#if NoContacts}} tooltip-init {{/if}}" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0125}}<br>{{@global.LANGUAGE.PROMPT_MSG0126}}">
                            <a class="item-link smart-select smart-select-init custom-smart-select {{#if NoContacts}} disabled  {{/if}}" data-open-in="popup" data-searchbar="true" data-close-on-select="true"  >
                                <select name="DriverCode" >
                                    {{#ContactList}}
                                    <option
                                      value="{{Code}}"
                                      data-display-as="{{FirstName}} {{SubName}}"
                                      {{#if Selected}} selected {{/if}}
                                    >{{FirstName}} {{SubName}}{{#if Number}}({{Number}}){{/if}}</option>
                                    {{/ContactList}}
                                </select>
                                <div 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.ASSET_EDIT_MSG24}}
                                            {{else}}
                                            {{@global.LANGUAGE.ASSET_EDIT_MSG23}}
                                            {{/if}}</div>

                                    </div>
                                </div>
                            </a>
                        </li>
						<li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">Licence Disk</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="LicenceDisk" placeholder="Licence Disk" value="{{LicenceDisk}}" maxlength="200" >
                                    </div>
                                </div>
                            </div>
                        </li>
						<li class="item-content item-input DiskExpiryDateWrapper">
                                <div class="item-media text-color-lightgray">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">Disk Expiry Date</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="DiskExpiryDate" placeholder="Disk Expiry Date" value="{{DiskExpiryDate}}" maxlength="200" >
                                    </div>
                                </div>
                        </li>


                    </ul>
                </div>

                <div class="block-title">Current</div>
                <div class="list ">
                    <ul>
                        <li>
                            <div class="item-content item-input">
                                <div class="item-media text-color-lightgray">
                                    <i class="f7-icons icon-initial"></i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG10}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Mileage" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG10}}" value="{{InitMileage}}" maxlength="200" pattern="[-0-9]*" data-error-message="Only numbers please!" validate >
                                    </div>
                                </div>
                                 <div class="item-after reset-mileage">
                                    <a class="link button button-fill color-black elevation-2">
                                        <!-- <i class="f7-icons size-15 text-color-lightgray icon-report-not-reporting"></i> -->
                                        reset
                                    </a>    
                                </div>  
                            </div>
                        </li>
                        <li>
                            <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_EDIT_MSG11}}</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="Runtime" placeholder="{{@global.LANGUAGE.ASSET_EDIT_MSG11}}" value="{{InitAcconHours}}" maxlength="200" pattern="[-0-9]*" data-error-message="Only numbers please!"  validate>
                                    </div>
                                </div>
                                <div class="item-after reset-runtime">
                                    <a class="link button button-fill color-black elevation-2">
                                        <!-- <i class="f7-icons size-15 text-color-lightgray icon-report-not-reporting"></i> -->
                                        reset
                                    </a> 
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                {{#js_if "(this.PRDTFeatures & this.ProductInputFeatures.Input1) > 0 || (this.PRDTFeatures & this.ProductInputFeatures.Input2) > 0"}}
                <div class="block-title">{{@global.LANGUAGE.ASSET_EDIT_MSG29}}</div>
                <div class="list ">
                    <ul>
                        {{#js_if "(this.PRDTFeatures & this.ProductInputFeatures.Input1) > 0"}}
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover" data-close-on-select="true">
                                <select name="Input1" >
                                    {{#InstallationOptionsInput1}}
                                    <option
                                      value="{{value}}"
                                      data-option-icon="f7-icons {{icon}}"
                                      {{#if selected}} selected {{/if}}
                                      {{#if disabled}} disabled {{/if}}
                                    >{{name}}</option>
                                    {{/InstallationOptionsInput1}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons {{Input1Icon}}"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG30}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG46}}"></i></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        {{/js_if}}
                        {{#js_if "(this.PRDTFeatures & this.ProductInputFeatures.Input2) > 0"}}
                        <li>
                            <a class="item-link smart-select smart-select-init custom-smart-select" data-open-in="popover" data-close-on-select="true">
                                <select name="Input2" >
                                    {{#InstallationOptionsInput2}}
                                    <option
                                      value="{{value}}"
                                      data-option-icon="f7-icons {{icon}}"
                                      {{#if selected}} selected {{/if}}
                                        {{#if disabled}} disabled {{/if}}
                                    >{{name}}</option>
                                    {{/InstallationOptionsInput2}}
                                </select>
                                <div class="item-content item-input">
                                    <div class="item-media text-color-lightgray">
                                        <i class="f7-icons {{Input2Icon}}"></i>
                                    </div>
                                    <div class="item-inner">
                                        <div class="item-title item-label">{{@global.LANGUAGE.ASSET_EDIT_MSG31}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.ASSET_EDIT_MSG45}}"></i></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        {{/js_if}}
                    </ul>
                </div>
                {{/js_if}}

                <div class="block-title">{{@global.LANGUAGE.ASSET_EDIT_MSG25}}</div>
                <div class="list ">
                    <ul>
                        <li class="item-content">
                            <div class="item-inner">
                                <div class="item-title">{{@global.LANGUAGE.ASSET_EDIT_MSG26}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0132}}"></i></div>
                                <div class="item-after">
                                    <label class="toggle toggle-init">
                                        <input type="checkbox" name="MaxSpeedAlertMode" {{#if MaxSpeedAlertMode}}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.ASSET_EDIT_MSG27}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0133}}"></i></div>
                                <div class="item-after">
                                    <label class="toggle toggle-init">
                                        <input type="checkbox" name="LBSWIFI" {{#if LBSWIFI}}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.ASSET_EDIT_MSG28}} <i class="f7-icons text-color-gray icon-hint margin-left-4 size-14 tooltip-init" data-tooltip="{{@global.LANGUAGE.PROMPT_MSG0134}}"></i></div>
                                <div class="item-after">
                                    <label class="toggle toggle-init">
                                        <input type="checkbox" name="STATICDRIFT" {{#if STATICDRIFT}}checked="checked"{{/if}}>
                                        <span class="toggle-icon"></span>
                                    </label>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- <div class="block">
                    <div class="row">
                        <button type="submit" class="col button button-fill color-green elevation-2">{{@global.LANGUAGE.COM_MSG06}}</button>
                    </div>
                </div> -->


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


<script>
  // script must return component object
    return {
        data: function () {
            var self = this;
            var ret = {};
            //app.methods.storageSetupTime();
            if (self.$route.params) {
                if (self.$route.params.imei) {
                    var assetList = self.$app.methods.getFromStorage('assetList');
                    var asset = assetList[self.$route.params.imei];
                    var groupList = self.$app.methods.getFromStorage('groupList');
                    var assetTypes = self.$app.methods.getFromStorage('assetTypes');
                    var contactList = self.$app.methods.getFromStorage('contactList');
                    var solutions = self.$app.methods.getFromStorage('solutions');
                    var installationOptionsInput1 = Protocol.Helper.getInstallationOptionsInput1();
                    var installationOptionsInput2 = Protocol.Helper.getInstallationOptionsInput2();


                    contactList = self.$app.methods.sortContactList(contactList);
                    contactList.unshift({
                        Code: '000000',
                        Number: LANGUAGE.COM_MSG128,
                        FirstName: LANGUAGE.ASSET_LIST_MSG13
                    })
                    asset.InstallationOptionsInput1 = installationOptionsInput1;
                    asset.InstallationOptionsInput2 = installationOptionsInput2;
                    asset.AssetTypes = assetTypes;

                    if (asset) {
                        asset.NoGroups = false;
                        asset.NoContacts = false;
                        asset.ContactList = contactList;
                        asset.SolutionTypeCustomName = null;
                        asset.ProductInputFeatures = Protocol.ProductInputFeatures

                        if (asset.ContactList.length == 1) {
                            asset.NoContacts = true;
                        }
                        var assetImg = self.$app.methods.getAssetImg(asset, {'assetEdit':true});
                        if (assetImg) {
                            asset.AssetImg = assetImg;
                        }
                        if(asset.MaxSpeed){
                            asset.MaxSpeed = Protocol.Helper.getSpeedValue(asset.Unit, asset.MaxSpeed);
                        }

                        if (groupList && groupList.length) {
                            if (groupList.length == 1) {
                                asset.NoGroups = true;
                            }
                            if (asset.GroupCode) {
                                var groupExist = self.$app.methods.findObjectByKey(groupList,'Code',asset.GroupCode);
                                if (!groupExist) {
                                    asset.GroupCode = '000000';
                                }
                            }else{
                                asset.GroupCode = '000000';
                            }

                            asset.GroupList = groupList;
                        }

                        asset.SolutionTypeIcon = Protocol.Helper.getSolutionTypeIcon(asset.SolutionType);
                        if (!asset.SolutionType) {
                            asset.SolutionType = LANGUAGE.PROMPT_MSG067;
                        }


                        if (solutions && solutions.length){
                            let SolutionTypeCustom = solutions.find( itm => itm.Code === asset.SolutionType )
                            asset.SolutionTypeCustomName = SolutionTypeCustom ? SolutionTypeCustom.Name : asset.SolutionType
                        }


                        if(!asset.DriverCode){
                            asset.DriverCode = '000000'
                            contactList[0].selected = true
                        }else{
                            let index = contactList.findIndex((item) =>  item.Code === asset.DriverCode)
                            contactList[ index === -1 ? 0 : index ].Selected = true
                        }

                        // console.log('asset', asset)
                        // console.log('asset.RoadSpeed', asset.RoadSpeed)
                        if(asset.MaxSpeedAlertMode){
                            asset.MaxSpeedAlertMode = asset.MaxSpeedAlertMode == "1" || asset.MaxSpeedAlertMode == "0" ? true : false
                        }
                        if(asset.LBSWIFI){
                            asset.LBSWIFI = (asset.LBSWIFI.toLowerCase() === 'true');
                        }
                        if(asset.STATICDRIFT){
                            asset.STATICDRIFT = (asset.STATICDRIFT.toLowerCase() === 'true');
                        }

                        asset.Input1Icon = "";
                        asset.Input2Icon = "";
                        if(asset.Input1Name){
                            let index = asset.InstallationOptionsInput1.findIndex( itm => itm.value === asset.Input1Name );
                            if(index >= 0){
                                asset.Input1Icon = asset.InstallationOptionsInput1[index].icon;
                                asset.InstallationOptionsInput1[index].selected = true;
                            }
                        }
                        if(asset.Input2Name){
                            let index = asset.InstallationOptionsInput2.findIndex( itm => itm.value === asset.Input2Name );
                            if(index >= 0){
                                asset.Input2Icon = asset.InstallationOptionsInput2[index].icon;
                                asset.InstallationOptionsInput2[index].selected = true;
                            }
                        }

console.log('asset', asset)
                        ret = asset;
						
						ret.DiskExpiryDateDatePicker = false;
						ret.DatepickerFormat = 'DD/MM/YYYY';
                    }else{
                        console.log('There is no asset with such imei');
                    }
                }else{
                    console.log('There is no imei param');
                }
            }else{
                console.log('There is no params');
            }
            console.log(ret)
            return ret;
        },
        methods: {
            saveAssetDetails: function(data){
                var self = this;

                self.$app.preloader.show();
                self.$app.request.get(API_URL.EDIT_DEVICE, data, function (result, xhr, status) {
                    self.$app.preloader.hide();
                    console.log(result);
                    if (result.MajorCode === '000') {
                      //  data.RoadSpeed = data.RoadSpeed ? "true" : "false";
                        data.LBSWIFI = data.LBSWIFI ? "true" : "false";
                        data.STATICDRIFT = data.STATICDRIFT ? "true" : "false";
                        self.$app.methods.setAssetList({device: data});
                        //self.$app.methods.setAssetList({devices: [{IMEI: data.IMEI, Props: data}]});

                        //TargetAsset.Img = '';
                        self.$app.methods.initGroupAssetList();
                        if(self.$app.data.BottomWidgetAssetImei === self.IMEI){
                            self.$app.emit('bottomWidgetShowAssetDetails', self.IMEI)
                        }
                        leftView.router.back();

                    }else if(result.MajorCode === '100' && result.MinorCode === '1003'){
                        self.$app.methods.customDialog({title: LANGUAGE.PROMPT_MSG050, text: LANGUAGE.PROMPT_MSG051});
                    }else{
                        self.$app.dialog.alert('Something wrong');
                    }

                },
                function (xhr, status) {
                    self.$app.preloader.hide();
                    self.$app.dialog.alert('Error occured at Save Asset details');
                },
                'json');
            },
            previewFile: function(file){
                var self = this;
                self.$app.progressbar.show();

                var reader  = new FileReader();

                reader.onloadend = function () {
                   // preview.src = reader.result;
                   self.loadEditImageModal(reader.result);
                };

                if (file) {
                    reader.readAsDataURL(file); //reads the data as a URL
                } else{
                	self.$app.dialog.close();
                }
            },
            loadIconsModal: function(src){
                var self = this;

                var iconTemplate = '';
                var iconNames = [
                    {
                        name: 'Backhoe',
                        fontName: 'ic-backhoe',
                        fileName: 'ic_backhoe.png',
                    },
                    {
                        name: 'Backhoe2',
                        fontName: 'ic-backhoe-2',
                        fileName: 'ic_backhoe-2.png',
                    },
                    {
                        name: 'Bike',
                        fontName: 'ic-bike',
                        fileName: 'ic_bike.png',
                    },
                    {
                        name: 'Boat',
                        fontName: 'ic-boat',
                        fileName: 'ic_boat.png',
                    },
                    {
                        name: 'Bulldozer',
                        fontName: 'ic-bulldozer',
                        fileName: 'ic_bulldozer.png',
                    },
                    {
                        name: 'Bus',
                        fontName: 'ic-bus',
                        fileName: 'ic_bus.png',
                    },
                    {
                        name: 'Car',
                        fontName: 'ic-car',
                        fileName: 'ic_car.png',
                    },
                    {
                        name: 'Pet',
                        fontName: 'ic-dog',
                        fileName: 'ic_dog.png',
                    },
                    {
                        name: 'Fleet',
                        fontName: 'ic-fleet',
                        fileName: 'ic_fleet.png',
                    },
                    {
                        name: 'Helicopter',
                        fontName: 'ic-helicopter',
                        fileName: 'ic_helicopter.png',
                    },
                    {
                        name: 'Personal',
                        fontName: 'ic-man',
                        fileName: 'ic_man.png',
                    },
                    {
                        name: 'Phone',
                        fontName: 'ic-phone',
                        fileName: 'ic_phone.png',
                    },
                    {
                        name: 'Skid Steer Loader',
                        fontName: 'ic-skid-steer-loader',
                        fileName: 'ic_skid-steer-loader.png',
                    },
                    {
                        name: 'Tractor',
                        fontName: 'ic-tractor',
                        fileName: 'ic_tractor.png',
                    },
                    {
                        name: 'Truck',
                        fontName: 'ic-truck',
                        fileName: 'ic_truck.png',
                    },
                    {
                        name: 'Dump Truck',
                        fontName: 'ic-dump-truck',
                        fileName: 'ic_dump-truck.png',
                    },
                ];
                var regex = /_/gi;
                var regex2 = /\.[^/.]+$/; //remove extension (.png, .jpg etc)
                var pattern2 = 'ic_';
                var iconName = '';
                if (this.Icon) {
                    if(this.Icon.substring(0,3) == pattern2){
                        iconName = this.Icon.replace(regex, '-').replace(regex2, '');
                    }
                }

                $.each(iconNames, function(index, value){
                    iconTemplate +=  '<li >'+
                                        '<label class="item-radio item-content">';
                                        if (iconName && iconName == value.fontName) {
                    iconTemplate +=         '<input type="radio" name="radio-icon" data-file-name="'+value.fileName+'" data-font-name="'+value.fontName+'" checked >'+
                                            '<div class="item-media"><i class="icon color-red size-25 asset-icon-'+value.fontName+'"></i></div>';
                                        }else{
                    iconTemplate +=         '<input type="radio" name="radio-icon" data-file-name="'+value.fileName+'" data-font-name="'+value.fontName+'" >'+
                                            '<div class="item-media"><i class="icon size-25 asset-icon-'+value.fontName+'"></i></div>';
                                        }
                    iconTemplate +=         '<div class="item-inner">'+
                                                '<div class="item-title-row">'+
                                                    '<div class="item-title size-14 weight-500 text-color-darkgray">'+value.name+'</div>'+
                                                    '<div class="item-after">'+
                                                        '<i class="icon icon-radio"></i>' +
                                                    '</div>'+
                                                '</div>'+
                                            '</div>'+
                                        '</label>'+
                                    '</li>';
                });

                self.$app.popup.create({
                    closeByBackdropClick: false,
                    content:
                        `<div class="popup edit-image-popup">
                            <div class="view">
                                <div class="page">
                                    <div class="navbar">
                                        <div class="navbar-inner">
                                            <div class="left">
                                                <a href="#" class="link popup-close">
                                                    <i class="f7-icons">close</i>
                                                </a>
                                            </div>
                                            <div class="title">` + LANGUAGE.PROMPT_MSG002 + `</div>
                                            <div class="right">
                                                <a href="#" class="link saveNewIcon" >
                                                    <i class="f7-icons">check</i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="page-content">
                                        <div class="list media-list icons-list">
                                            <ul>`+ iconTemplate + `</ul>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>`,
                    on: {
                        opened: function (popup) {
                            var radioWrapper = popup.$el.find('.item-radio .item-media i');

                            popup.$el.find('input[type="radio"]').on('change', function(){
                                var parent = $$(this).closest('.item-radio');

                                radioWrapper.removeClass('color-red');
                                parent.find('.item-media i').addClass('color-red');
                            });

                            popup.$el.find('.saveNewIcon').on('click', function(){
                                var radioInputElSelected = popup.$el.find('input[type="radio"]:checked');
                                if (radioInputElSelected.length < 1) {
                                    self.$app.methods.customDialog({text: LANGUAGE.PROMPT_MSG036});
                                }else{
                                    self.saveIcon({fontName: radioInputElSelected.data('font-name'), fileName: radioInputElSelected.data('file-name')});
                                }

                            });

                        },
                    }
                }).open();

            },
            loadEditImageModal: function(src){
                var self = this;
                self.$app.progressbar.hide();
                var dynamicPopup = app.popup.create({
                    closeByBackdropClick: false,
                    content:
                        `<div class="popup edit-image-popup">
                            <div class="view">
                                <div class="page">
                                    <div class="navbar">
                                        <div class="navbar-inner">
                                            <div class="left">
                                                <a href="#" class="link popup-close">
                                                    <i class="f7-icons">close</i>
                                                </a>
                                            </div>
                                            <div class="title">` + LANGUAGE.PROMPT_MSG003 + `</div>
                                            <div class="right">
                                                <a href="#" class="link saveEditedImage" >
                                                    <i class="f7-icons">check</i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="page-content">
                                        <div class="asset_img_before_crop" style="">
                                            <img style="max-width: 980px; max-height: 980px; " id="image" src="` + src + `">
                                        </div>
                                        <button type="button" class="button button-fill redo"><span class="f7-icons">forward</span></button>
                                        <button type="button" class="button button-fill undo"><span class="f7-icons">reply</span></button>

                                    </div>
                                </div>
                            </div>
                        </div>`,
                    on: {
                        opened: function (popup) {
                        	var cropper = self.initCropper();
                            $$('.saveEditedImage').on('click', function(){
                                self.saveImage(cropper);
                            });
                            $$('.redo').on('click', function(){
                                cropper.rotate(90);
                            });
                            $$('.undo').on('click', function(){
                                cropper.rotate(-90);
                            });
                        },
                    }
                });
                dynamicPopup.open();

            },
            initCropper: function (){
			    var image = document.getElementById('image');
			    var cropper = new Cropper(image, {
			        aspectRatio: 1/1,
			        dragMode:'move',
			        rotatable:true,
			        minCropBoxWidth:200,
			        minCropBoxHeight:200,
			        minCanvasWidth:200,
			        minCanvasHeight:200,
			        minContainerWidth:200,
			        minContainerHeight:200,
			        crop: function(data) {
			         }
			    });
			    return cropper;
			},
			saveImage: function(cropper){
				var self = this;

				var resImg =  cropper.getCroppedCanvas({
			          width: 200,
			          height: 200
			    }).toDataURL();

			    var assetImg = {
			        data: resImg,
			        id: 'IMEI_'+self.IMEI
			    };

			    self.$app.dialog.progress();
			    $.ajax({
			        type: 'POST',
			        url: API_URL.PHOTO_UPLOAD,
			        data: assetImg,
			        async: true,
			        cache: false,
			        crossDomain: true,
			        success: function (result) {
			            self.$app.dialog.close();

			            result = typeof (result) == 'string' ? eval("(" + result + ")") : result;
			            if (result.MajorCode == "000") {
			                $$('.top-asset-image-wrapper').html('<div class="top-asset-img vertical-center" style=""><img class="item_asset_img" data-name="'+result.Data+'" src="https://upload.quiktrak.co/Attachment/images/'+result.Data+'?'+ new Date().getTime()+'"></div>');
			            }else{
			                self.$app.dialog.alert('Something wrong. Photo not saved');
			            }
			            self.$app.popup.close();
			        },
			        error: function(XMLHttpRequest, textStatus, errorThrown){
			           self.$app.dialog.close(); self.$app.dialog.alert('Error occured at Save Asset Photo');
			        }
			    });
			},
            saveIcon: function(params){
                var self = this;

                var template = `<div class="top-asset-img vertical-center bg-color-red" style="" onmouseover="this.width='500px'">
                                    <div class="item_asset_img text-align-center"  data-name="`+params.fileName+`">
                                        <i class="icon text-color-white size-75 asset-icon-`+params.fontName+`"></i>
                                    </div>
                                </div>`;

                $$('.top-asset-image-wrapper').html(template);

                self.$app.popup.close();
            },
            handleResetAction(type) {
                let self = this;
                var userInfo = self.$app.methods.getFromStorage('userInfo');
                let data = {
                    MinorToken: userInfo.MinorToken,
                    MajorToken: userInfo.MajorToken,
                    IMEI: self.$route.params.imei,
                };

                let apiUrl;
                switch (type) {
                    case 'mileage':
                        apiUrl = API_URL.RESET_MILEAGE;
                        break;
                    case 'runtime':
                        apiUrl = API_URL.RESET_HOURS;
                        break;
                    default:
                        console.error("Unknown reset type");
                        return;
                }
       
                // self.$app.progressbar.show();
                //     console.log('apiUrl', 'data')
                //     self.$app.request.post(apiUrl, data, function (result, xhr, status) {
                    
                //         self.$app.utils.nextFrame(() => {
                //             self.$app.progressbar.hide();
                //         });
                //         if (result) {
                //             const message = type === 'mileage' ? 'Reset successfully.' : 'Reset successfully. Please refresh page';
                //             self.$app.dialog.alert(message);
                //             self.$app.methods.getNewAssetsData();
                //         } else {
                //             self.$app.dialog.alert('Something wrong');
                //         }
                //     });
                self.$app.dialog.confirm('This value will be reset to initial', function () {
                    self.$app.dialog.progress();
                    $.ajax({
                        type: 'POST',
                        url: apiUrl,
                        data: data,
                        async: true,
                        cache: false,
                        crossDomain: true,
                        success: function (result) {
                            self.$app.dialog.close();

                            
                            if (result.MajorCode == "000") {
                                const message = type === 'mileage' ? 'Reset successfully.' : 'Reset successfully. Please refresh page';
                                self.$app.dialog.alert(message);
                                self.$app.methods.getNewAssetsData();
                            }else{
                                self.$app.dialog.alert('Something wrong.');
                            }
                            self.$app.popup.close();
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown){
                        self.$app.dialog.close(); self.$app.dialog.alert('Error occured at Reset current value');
                        }
                    });
                });
                   
            }



        },

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

                var form = page.$el.find('[name = "AssetEditForm"]');
                var immage = page.$el.find('.top-asset-image-wrapper');
                var Input1El = page.$el.find('[name = "Input1"]');
                var Input2El = page.$el.find('[name = "Input2"]');

                let DiskExpiryDateEl = page.$el.find('input[name = "DiskExpiryDate"]');
				self.DiskExpiryDateDatePicker = new MaterialDatetimePicker({
                     el: DiskExpiryDateEl[0],
                     format: 'DD/MM/YYYY',
                    openedBy: 'click',
                });

                page.$el.on('click', '.reset-mileage a', function() {
                    self.handleResetAction('mileage');
                });
                page.$el.on('click', '.reset-runtime a', function() {
                    self.handleResetAction('runtime');
                });

				 
				page.$el.on('click', '.DiskExpiryDateWrapper', function(){
                	if (self.DiskExpiryDateDatePicker) {
                		self.DiskExpiryDateDatePicker.open();
                	}
                });
				
                form.on('submit', function(e){
                    e.preventDefault();
                    var userInfo = self.$app.methods.getFromStorage('userInfo');
                    var data = {
                        MinorToken: userInfo.MinorToken,
                        MajorToken: userInfo.MajorToken,
                        Code: page.$el.find('input[name="Id"]').val(),
                        IMEI: page.$el.find('input[name="IMEI"]').val(),
                        name: page.$el.find('input[name="Name"]').val(),
                        registration: page.$el.find('input[name="Registration"]').val(),
                        stockNumber: page.$el.find('input[name="StockNumber"]').val(),
                        tag: page.$el.find('input[name="Tag"]').val(),
                        speedUnit: page.$el.find('select[name="Unit"]').val(),
                        initMileage: page.$el.find('input[name="Mileage"]').val(),
						LicenceDisk: page.$el.find('input[name="LicenceDisk"]').val(),
						DiskExpiryDate: page.$el.find('input[name="DiskExpiryDate"]').val(),
                        initAccHours: page.$el.find('input[name="Runtime"]').val(),
                        attr1: page.$el.find('input[name="Describe1"]').val(),
                        attr2: page.$el.find('input[name="Describe2"]').val(),
                        attr3: page.$el.find('input[name="Describe3"]').val(),
                        attr4: page.$el.find('input[name="Describe4"]').val(),
                        attr7: page.$el.find('input[name="Describe7"]').val(),
						
                        MaxSpeed: page.$el.find('input[name="MaxSpeed"]').val(),
                        BusinessExpense: page.$el.find('input[name="BusinessExpense"]').val(),
                        FuelEconomy: page.$el.find('input[name="FuelEconomy"]').val(),
                        EngineCapacity: page.$el.find('input[name="EngineCapacity"]').val(),
                        OffroadTaxCredit: page.$el.find('input[name="OffroadTaxCredit"]').val(),
                        AssetType: page.$el.find('[name="AssetType"]').val(),
                        DriverCode: page.$el.find('[name="DriverCode"]').val(),
                        RoadSpeed: page.$el.find('[name="MaxSpeedAlertMode"]').is(":checked") ? 1 : 2,
                        LBSWIFI: page.$el.find('[name="LBSWIFI"]').is(":checked") ? 1 : 0,
                        STATICDRIFT: page.$el.find('[name="STATICDRIFT"]').is(":checked") ? 1 : 0,
                        Input1Name: page.$el.find('select[name="Input1"]').val(),
                        Input2Name: page.$el.find('select[name="Input2"]').val(),
                    };
                    if(data.DriverCode === '000000'){
                        data.DriverCode = ''
                    }
                    var groupCode = page.$el.find('[name="GroupCode"]').val();
                    if (groupCode == '000000') {
                        data.groupCode = '';
                    }else{
                        data.groupCode = groupCode;
                    }

                    var assetImg = $$('.top-asset-img .item_asset_img');
                    if (assetImg.length) {
                    	data.icon = assetImg.data('name');
                    }
                    if(data.MaxSpeed){
                        data.MaxSpeed = Protocol.Helper.getSpeedValueInKM(data.speedUnit, data.MaxSpeed);
                    }
                   // console.log(data);
                    self.saveAssetDetails(data);

                    return false;
                });


                $$(immage).on('click', function(){
                     //- With callbacks on click
                    var imageButtons = app.actions.create({
                        buttons: [
                            {
                                text: LANGUAGE.PROMPT_MSG001,
                                onClick: function () {
                                    //app.dialog.alert('Button1 clicked');
                                    $$('#AssetImageInput').click();
                                }
                            },

                            {
                                text: LANGUAGE.PROMPT_MSG002,
                                onClick: function () {
                                    self.loadIconsModal();
                                    //app.dialog.alert('Button2 clicked');
                                }
                            },
                            {
                                text: LANGUAGE.COM_MSG01,
                                color: 'red',
                            },
                        ]
                    });
                    imageButtons.open();
                });

                $$('#AssetImageInput').on('change', function(){
                    var noError = 1;
                    var file = this.files[0];
                  	var maxFileSize = 3; // in MB
                    if (file) {
                        //validate file extension(filetype)
                        if (!/image/.test(file.type)) {
                            noError = 0;
                            self.$app.methods.customNotification({title:LANGUAGE.PROMPT_MSG004});
                        }
                        //validate file size
                        if ( file.size > maxFileSize * 1024 * 1024 ) {
                            console.log('here');
                            noError = 0;
                            self.$app.methods.customNotification({title:LANGUAGE.PROMPT_MSG005 + ' ' + maxFileSize + LANGUAGE.PROMPT_MSG006});
                        }
                        if (noError) {
                            self.previewFile(file);
                        }
                    }
                });

                Input1El.on('change', function (){
                    self.$setState({
                        Input1Icon: self.InstallationOptionsInput1.find(itm => itm.value === this.value).icon
                    })
                })
                Input2El.on('change', function (){
                    self.$setState({
                        Input2Icon: self.InstallationOptionsInput2.find(itm => itm.value === this.value).icon
                    })
                })
            },

        }
    };
</script>