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


			</div>
		</div>


		{{#js_if "this.Type == '9' "}}
		{{#if sendByEmail}}
			<div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
				<div class="row">
					<label for="submit-form-report-run" class="col button button-fill color-green elevation-2 "
							tabindex="0">{{@global.LANGUAGE.COM_MSG00}}</label>
				</div>
			</div>	
			{{else}}
				<div class="bottom-section-wrapper bottom-section-button-wrapper bg-color-white">
					<div class="row">
						<label for="submit-form-report-run" class="col button button-fill color-green elevation-2 {{#if ReportIsGenerated}}  showReportPopup {{/if}}"
								tabindex="0">{{#if ReportIsGenerated}} {{@global.LANGUAGE.REPORT_PANEL_MSG263}}	{{else}} {{@global.LANGUAGE.REPORT_PANEL_MSG262}} {{/if}}</label>
					</div>
				</div>	
			{{/if}}

		{{else}}	

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

		{{/js_if}}

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

			<input type="submit" id="submit-form-report-run" class="display-none" />

			<div class="list no-margin no-hairlines ">
				<ul>
					
					{{#js_if 'parsedDealer != "lite" && parsedDealer != "ridersadvantage"'}}
					<li>
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type "
							data-open-in="popover" data-close-on-select="true">
							<select name="Type">
								{{#ReportTypes}}
								<option value="{{value}}" {{#if selected}} selected {{/if}}>{{name}}</option>
								{{/ReportTypes}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-header-reports"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG28}}</div>
								</div>
							</div>
						</a>
					</li>
					{{/js_if}}


					<!-- ASSETS LISTING -->
					{{#js_if "this.Type == '30' "}}
					<li key="ReportAssetListing" class="item-content item-input ">

					</li>
					{{/js_if}}
					
					<!-- FUEL PURCHASES LISTING -->
					{{#js_if "this.Type == '30' "}}
					<li key="ReportFuelPurchaseListing" class="item-content item-input ">

					</li>
					{{/js_if}}

					<!-- LOW BATTERY -->
					{{#js_if "this.Type == '1' "}}
					<li key="TreshHoldNumber" class="item-content item-input ">
						<div class="item-media text-color-lightgray">
							<i class="f7-icons icon-voltage"></i>
						</div>
						<div class="item-inner">
							<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG21}}</div>
							<div class="item-input-wrap ">
								<input type="tel" name="TreshHoldNumber" value="{{TreshHoldNumber}}" maxlength="200"
									pattern="[.0-9]*" data-error-message="{{@global.LANGUAGE.PROMPT_MSG024}}" required
									validate>
							</div>
						</div>
					</li>
					{{/js_if}}

					<!-- POWER DISCONNECT && ALARM && TRIP && OVERVIEW && Fringe Benefit Tax && Fuel Tax Credit && Fleet report  -->
					{{#js_if " this.Type == '4' || this.Type == '9' || this.Type == '12'  || this.Type == '14' || this.Type == '16' || this.Type == '17' || this.Type == '18' || this.Type == '19' || this.Type == '36'  || this.Type == '33' || this.Type == '34'"}}
					{{#js_if " this.Type !== '33' "}}
					<li>
						<label class="item-checkbox item-content">
							<input type="checkbox" name="selectOptimized" id="selectOptimized"  />
							<div class="item-media text-color-lightgray">
							</div>
							<div class="item-inner">
								<div class="item-title">{{@global.LANGUAGE.REPORT_PANEL_MSG279}}</div>
								<div class="item-after">
									<i class="icon icon-checkbox"></i>
								</div>
							</div>
						</label>
					</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" >km/h</option>
                                    <option value="MPH" >mile/h</option>
                                    <option value="MPS" >m/s</option>
                                    <option value="KT" >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>
						{{/js_if}}
					<li key="ReportAssetList">
						{{#if selectAllAssets}}
						
						<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-page-title="{{@global.LANGUAGE.ASSET_GROUPS_MSG08}}"
							{{#js_if "this.Type == '19' || this.Type == '36'"}}data-close-on-select="true" {{/js_if}}>
							<select name="Assets" {{#js_if "this.Type != '19' && this.Type != '36'"}}multiple{{/js_if}} required validate>
								<!--<option value="all" data-imei="0" >Select all</option>-->
								{{#AssetList}}
								<optgroup label="{{Name}}" data-code="{{Code}}">
									{{#Assets}}
										<option value="{{Id}}" data-imei="{{IMEI}}" selected >{{Name}}</option>											
									{{/Assets}}
								</optgroup>
								{{/AssetList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-name"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.ASSET_GROUPS_MSG09}}</div>
								</div>
							</div>
						</a>
						
						{{else}}
						
						<a class="item-link smart-select smart-select-init custom-smart-select 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-page-title="{{@global.LANGUAGE.ASSET_GROUPS_MSG08}}"
							{{#js_if "this.Type == '19' || this.Type == '36'"}}data-close-on-select="true" {{/js_if}}>
							<select name="Assets" {{#js_if "this.Type != '19' && this.Type != '36'"}}multiple{{/js_if}} required validate>
								<!--<option value="all" data-imei="0" >Select all</option>-->
								{{#AssetList}}
								<optgroup label="{{Name}}" data-code="{{Code}}">
									{{#Assets}}
										<option value="{{Id}}" data-imei="{{IMEI}}" >{{Name}}</option>											
									{{/Assets}}
								</optgroup>
								{{/AssetList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-name"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.ASSET_GROUPS_MSG09}}</div>
								</div>
							</div>
						</a>
						
						{{/if}}
					</li>
					<li>
						<label class="item-checkbox item-content">
							<input type="checkbox" name="selectAllAssets" id="selectAllAssets" checked />
							<div class="item-media text-color-lightgray">
							</div>
							<div class="item-inner">
								<div class="item-title">{{@global.LANGUAGE.CONTACT_LIST_MSG15}}</div>
								<div class="item-after">
									<i class="icon icon-checkbox"></i>
								</div>
							</div>
						</label>
					</li>
					{{/js_if}}
					{{#js_if " this.Type === '36' "}}
					<li>
						<div class="item-content item-input">
							<div class="item-media text-color-lightgray">
								<!-- <i class="f7-icons icon-calendar"></i> -->
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG275}}</div>
								<div class="item-input-wrap">
									<input type="text" name="MinValue" class=""
										placeholder="{{@global.LANGUAGE.REPORT_PANEL_MSG275}}"
										value="" maxlength="10" >
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content item-input">
							<div class="item-media text-color-lightgray">
								<!-- <i class="f7-icons icon-calendar"></i> -->
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG276}}</div>
								<div class="item-input-wrap">
									<input type="text" name="MaxValue" class=""
										placeholder="{{@global.LANGUAGE.REPORT_PANEL_MSG276}}"
										value="" maxlength="10" >
								</div>
							</div>
						</div>
					</li>
					<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type "
							data-open-in="popover" data-close-on-select="true">
							<select name="status-option" multiple>
						 
								<option value="1" selected >Ignition</option>
								<option value="8" selected>Temprature</option>
								<option value="512" selected >Input1</option>
								<option value="128" selected>Input2</option>
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<!-- <i class="f7-icons size-24 icon-stop-log"></i> -->
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG277}}</div>
								</div>
							</div>
						</a>
					{{/js_if}}
					{{#js_if " this.Type === '33' "}}
					<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type "
							data-open-in="popover" data-close-on-select="true">
							<select name="stop-type" multiple>
								 
								<option value="1" selected >Ignition off</option>
								<option value="2" selected>Idle</option>
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons size-24 icon-stop-log"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG266}}</div>
								</div>
							</div>
						</a>
					{{/js_if}}

					{{#js_if " this.Type == '31' "}}
				 
					 
						<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 key="ReportDriverList">
						{{#if selectAllDrivers}}
						
						{{#if ContactList}}
				 
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-contact-list"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.REPORT_PANEL_MSG241}}">
							<select name="ContactList" multiple required validate>
								{{#ContactList}}
						 
								<option value="{{Code}}" data-display-as="{{FullName}}"   selected >
									{{FullName}}</option>
						 
								{{/ContactList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-live-id"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG241}}</div>
								</div>
							</div>
						</a>
					 
					{{else}}
					<div key="PreloaderContactList" class="block text-align-center">
						<div class="preloader color-red"></div>
					</div>
					{{/if}}
						
						{{else}}
						
						{{#if ContactList}}
				 
							<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-contact-list"
								data-open-in="popup" data-searchbar="true"
								data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
								data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
								data-page-title="{{@global.LANGUAGE.REPORT_PANEL_MSG241}}">
								<select name="ContactList" multiple required validate>
									{{#ContactList}}
								 
									<option value="{{Code}}" data-display-as="{{FullName}}" {{#if Selected}} selected {{/if}}>
										{{FullName}} </option>
								 
									{{/ContactList}}
								</select>
								<div 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.REPORT_PANEL_MSG241}}</div>
									</div>
								</div>
							</a>
						 
						{{else}}
						<div key="PreloaderContactList" class="block text-align-center">
							<div class="preloader color-red"></div>
						</div>
						{{/if}}
						
						{{/if}}
					</li> -->
					<!-- <li>
						<label class="item-checkbox item-content">
							<input type="checkbox" name="selectAllDrivers" id="selectAllDrivers" checked />
							<div class="item-media text-color-lightgray">
							</div>
							<div class="item-inner">
								<div class="item-title">Select all by default</div>
								<div class="item-after">
									<i class="icon icon-checkbox"></i>
								</div>
							</div>
						</label>
					</li> -->
					{{/js_if}}

					<!-- IN LOT && OFF LOT && DRIVE OFF && LOT OVERVIEW && OVERVIEW-->
					{{#js_if " this.Type == '6' || this.Type == '7' || this.Type == '8' || this.Type == '10' || this.Type == '14' || this.Type == '15'"}}
					<li key="ReportAssetGroups" class="{{#js_if 'this.AssetList.length == 1'}} tooltip-init {{/js_if}}"
						data-tooltip="{{@global.LANGUAGE.PROMPT_MSG057}}<br>{{@global.LANGUAGE.PROMPT_MSG058}}">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-groups {{#js_if 'this.AssetList.length == 1'}} disabled {{/js_if}}"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.COM_MSG54}}">
							<select name="AssetGroups" multiple {{#js_if "this.Type != '14'"}}required
								validate{{/js_if}}>
								{{#AssetList}}
								{{#js_if "this.Code != '000000'"}}
								<option value="{{Code}}" selected>{{Name}}</option>
								{{/js_if}}
								{{/AssetList}}
							</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.REPORT_PANEL_MSG53}}</div>
								</div>
							</div>
						</a>
					</li>
					{{/js_if}}

					<!-- ALARM && OVERVIEW && FLEET REPORT -->
					{{#js_if " this.Type == '9' || this.Type == '14' || this.Type == '18' "}}
					{{#js_if " this.AlertList.length "}}
					<li key="ReportAlertList">
						
						{{#if selectAllAlarms}}
						
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-alert-list"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.COM_MSG56}}">
							<select name="AlertList" multiple required validate>
								<optgroup label="Select All" data-code="1">
								{{#AlertList}}
								{{#js_if "this.Name"}}
								<option value="{{AlertId}}" selected>{{Name}}</option>
								{{/js_if}}
								{{/AlertList}}
								</optgroup>
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-report-alarm-report"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG55}}</div>
								</div>
							</div>
						</a>
												
						{{else}}
						
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-alert-list"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.COM_MSG56}}">
							<select name="AlertList" multiple required validate>
								<optgroup label="Select All" data-code="1">
								{{#AlertList}}
								{{#js_if "this.Name"}}
								
								<option value="{{AlertId}}" >{{Name}}</option>
								{{/js_if}}
								{{/AlertList}}
								</optgroup>
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-report-alarm-report"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG55}}</div>
								</div>
							</div>
						</a>
						
						{{/if}}
						
					</li>
					
					<li>
						<label class="item-checkbox item-content">
							<input type="checkbox" name="selectAllAlarms" id="selectAllAlarms" checked />
							<div class="item-media text-color-lightgray">
							</div>
							<div class="item-inner">
								<div class="item-title">Select all by default</div>
								<div class="item-after">
									<i class="icon icon-checkbox"></i>
								</div>
							</div>
						</label>
					</li>
					
					{{else}}
					<div key="PreloaderAlertList" class="block text-align-center">
						<div class="preloader color-red"></div>
					</div>
					{{/js_if}}
					{{/js_if}}

					<!-- NOT REPORTING && POWER DISCONNECT && OFF LOT && ALARM && TRIP && OVERVIEW && Fringe Benefit Tax && Fuel Tax Credit && FLEET REPORT && Driver Behaviour && Driver ID's-->
					{{#js_if "this.Type == '3' || this.Type == '4' || this.Type == '7' || this.Type == '9' || this.Type == '12' || this.Type == '31' || this.Type == '32' || this.Type == '14' || this.Type == '15' || this.Type == '16' || this.Type == '17' || this.Type == '18' || this.Type == '19' || this.Type == '36' || this.Type == '25' || this.Type == '26' || this.Type == '28' || this.Type == '29' || this.Type == '33' || this.Type == '34'"}}
					<li key="ReportFixedPeriod">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-fixed-period "
							data-open-in="popover" data-close-on-select="true">
							<select name="FixedPeriod">
								<option value="6" selected>6 {{@global.LANGUAGE.COM_MSG52}}</option>
								<option value="12">12 {{@global.LANGUAGE.COM_MSG52}}</option>
								<option value="24">24 {{@global.LANGUAGE.COM_MSG52}}</option>
								<option value="72">72 {{@global.LANGUAGE.COM_MSG52}}</option>
								<option value="168">7 {{@global.LANGUAGE.COM_MSG53}}</option>
								{{#js_if "this.Type == '9'"}}<option value="720">30 {{@global.LANGUAGE.COM_MSG53}}</option>{{/js_if}}
								{{#js_if "this.Type == '9'"}}<option value="prev-month">{{@global.LANGUAGE.COM_MSG145}}</option>{{/js_if}}
								<option value="1">{{@global.LANGUAGE.COM_MSG57}}</option>
							</select>

							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-time-period"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG44}}</div>
								</div>
							</div>
						</a>
					</li>
					<!-- LOW BATTERY && POWER DISCONNECT && DEVICES SOLD && ALARM -->
					{{#if CustomPeriod}}
					<li key="ReportStartDateTime">
						<div class="item-content item-input startDateTimeWrapper" data-input-name="StartDateTime">
							<div class="item-media text-color-lightgray">
								<i class="f7-icons icon-calendar"></i>
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}</div>
								<div class="item-input-wrap">
									<input type="text" name="StartDateTime" class="StartDateTime"
										placeholder="{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}"
										value="{{StartDateTime}}" maxlength="200" readonly>
								</div>
							</div>
						</div>
					</li>
					<li key="ReportEndDateTime">
						<div class="item-content item-input endDateTimeWrapper" data-input-name="EndDateTime">
							<div class="item-media text-color-lightgray">
								<i class="f7-icons icon-calendar"></i>
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.ASSET_PLAYBACK_MSG03}}</div>
								<div class="item-input-wrap">
									<input type="text" name="EndDateTime"
										placeholder="{{@global.LANGUAGE.ASSET_PLAYBACK_MSG03}}" value="{{EndDateTime}}"
										maxlength="200" readonly>
								</div>
							</div>
						</div>
					</li>
					{{/if}}
					{{#js_if " this.Type == '32'"}}
						<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="DriverCodeMultiple" multiple>
									{{#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>
					{{/js_if}}
					 
					{{#js_if "this.Type == '9'"}}
						<li>
							<label class="item-checkbox item-content">
								<input type="checkbox" name="displayNotMovingOnly" id="displayNotMovingOnly" />
								<div class="item-media text-color-lightgray">
								</div>
								<div class="item-inner">
									<div class="item-title">{{@global.LANGUAGE.REPORT_PANEL_MSG280}}</div>
									<div class="item-after">
										<i class="icon icon-checkbox"></i>
									</div>
								</div>
							</label>
						</li>
						<li>
							<label class="item-checkbox item-content">
								<input type="checkbox" name="displayAllAddresses" id="displayAllAddresses" />
								<div class="item-media text-color-lightgray">
								</div>
								<div class="item-inner">
									<div class="item-title">{{@global.LANGUAGE.REPORT_PANEL_MSG281}}</div>
									<div class="item-after">
										<i class="icon icon-checkbox"></i>
									</div>
								</div>
							</label>
						</li>
					{{/js_if}}

					{{/js_if}}

					{{#js_if " this.Type === '33' "}}
					<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-type "
							data-open-in="popover" data-close-on-select="true">
							<select name="stop-type" multiple>
								 
								<option value="1" selected >Ignition off</option>
								<option value="2" selected>Idle</option>
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons size-24 icon-stop-log"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG266}}</div>
								</div>
							</div>
						</a>
					{{/js_if}}

					<!-- DEVICES SOLD && DRIVE OFF-->
					{{#js_if " this.Type == '5' || this.Type == '8' "}}
					<li key="ReportFixedPeriod2">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-fixed-period "
							data-open-in="popover" data-close-on-select="true">
							<select name="FixedPeriod">
								<option value="11" selected>{{@global.LANGUAGE.COM_MSG59}}</option> <!-- 1 week -->
								<option value="21">{{@global.LANGUAGE.COM_MSG60}}</option> <!-- 1 month -->
								<option value="31">3 {{@global.LANGUAGE.COM_MSG61}}</option> <!-- 3 months -->
								<option value="41">6 {{@global.LANGUAGE.COM_MSG61}}</option> <!-- 6 months -->
								<option value="51">12 {{@global.LANGUAGE.COM_MSG61}}</option> <!-- 12 months -->
								<option value="61">{{@global.LANGUAGE.COM_MSG75}}</option> <!-- Year To Date -->
								{{#js_if " this.Type == '5' "}} <option value="1">{{@global.LANGUAGE.COM_MSG57}}
								</option>{{/js_if}}
							</select>

							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-time-period"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG44}}</div>
								</div>
							</div>
						</a>
					</li>

					{{#if CustomPeriod}}
					<li key="ReportStartDateTime">
						<div class="item-content item-input startDateTimeWrapper" data-input-name="StartDateTime">
							<div class="item-media text-color-lightgray">
								<i class="f7-icons icon-calendar"></i>
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}</div>
								<div class="item-input-wrap">
									<input type="text" name="StartDateTime" class="StartDateTime"
										placeholder="{{@global.LANGUAGE.ASSET_PLAYBACK_MSG02}}"
										value="{{StartDateTime}}" maxlength="200" readonly>
								</div>
							</div>
						</div>
					</li>
					<li key="ReportEndDateTime">
						<div class="item-content item-input endDateTimeWrapper" data-input-name="EndDateTime">
							<div class="item-media text-color-lightgray">
								<i class="f7-icons icon-calendar"></i>
							</div>
							<div class="item-inner">
								<div class="item-title item-label">{{@global.LANGUAGE.ASSET_PLAYBACK_MSG03}}</div>
								<div class="item-input-wrap">
									<input type="text" name="EndDateTime"
										placeholder="{{@global.LANGUAGE.ASSET_PLAYBACK_MSG03}}" value="{{EndDateTime}}"
										maxlength="200" readonly>
								</div>
							</div>
						</div>
					</li>
					{{/if}}
					{{/js_if}}

					<!-- GEOFENCE OVERVIEW && OVERVIEW-->
					{{#js_if " this.Type == '11' || this.Type == '14'  "}}
					{{#if GeofeceListLoaded}}
					<li key="ReportGeofencesList" class="{{#js_if '!this.GeofeceList.length'}} tooltip-init {{/js_if}}"
						data-tooltip="{{@global.LANGUAGE.PROMPT_MSG074}}<br>{{@global.LANGUAGE.PROMPT_MSG086}}">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-groups {{#js_if '!this.GeofeceList.length'}} disabled {{/js_if}}"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.REPORT_PANEL_MSG83}}">
							<select name="Geofences" multiple {{#js_if "this.Type != '14'"}}required validate{{/js_if}}>
								{{#GeofeceList}}
								<option value="{{Code}}" selected>{{Name}}</option>
								{{/GeofeceList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-admin-geofences"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG82}}</div>
								</div>
							</div>
						</a>
					</li>
					{{else}}
					<div key="PreloaderGeofenceList" class="block text-align-center">
						<div class="preloader color-red"></div>
					</div>
					{{/if}}

					{{/js_if}}

					<!-- {{#js_if " this.Type == '6' || this.Type == '7' "}}
						<li key="ReportAssetGroupSplitBy">
							<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-groups-split-by " data-open-in="popover" data-close-on-select="true">
								<select name="AssetGroupsSplitBy">
									<option value="2">{{@global.LANGUAGE.REPORT_PANEL_MSG59}}</option>
									<option value="1">{{@global.LANGUAGE.REPORT_PANEL_MSG58}}</option>

								</select>
								<div class="item-content item-input">
									<div class="item-media text-color-lightgray">
										<i class="f7-icons icon-header-reports"></i>
									</div>
									<div class="item-inner">
										<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG57}}</div>
									</div>
								</div>
							</a>
						</li>
						{{/js_if}}   -->

					<!-- Servicing OVERVIEW -->
					{{#js_if " this.Type == '13' "}}
					{{#if IntervalServicesList}}
					<li key="ReportIntervalServicesList">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-interval-services-list"
							data-open-in="popover">
							<select name="IntervalServices" multiple required validate>
								{{#IntervalServicesList}}
								<option value="{{Value}}" selected>{{Name}}</option>
								{{/IntervalServicesList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-service-plan"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.INTERVAL_REMINDERS_MSG07}}
									</div>
								</div>
							</div>
						</a>
					</li>
					{{else}}
					<div key="PreloaderIntervalServicesList" class="block text-align-center">
						<div class="preloader color-red"></div>
					</div>
					{{/if}}
					{{/js_if}}

					<!-- OVERVIEW -->
					{{#js_if " this.Type == '14' "}}
					<li key="ReportOverviewOptions">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-overview-options-list"
							data-open-in="popover">
							<select name="OverviewOptions" multiple required validate>
								{{#OverviewOptionsList}}
								<option value="{{Value}}" selected>{{Name}}</option>
								{{/OverviewOptionsList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-service-plan"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG118}}</div>
								</div>
							</div>
						</a>
					</li>
					{{/js_if}}

					<!-- TRIP REPORT && FLEET REPORT-->
					{{#js_if " this.Type == '12' || this.Type == '18'"}}
					<li key="ReportTripOptions">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-trip-options-list"
							data-open-in="popover">
							<select name="TripOptions" multiple>
								{{#TripOptionsList}}
								<option value="{{Value}}" selected>{{Name}}</option>
								{{/TripOptionsList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-service-plan"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG118}}</div>
								</div>
							</div>
						</a>
					</li>
				 
					{{/js_if}}

					{{#js_if "this.Type == '34'"}}
						<li key="DaysOfWeek">
							<a class="item-link smart-select custom-smart-select smart-select-days-of-week" data-open-in="popover">
								<select name="DaysOfWeek" multiple>
									{{#each DaysOfWeek}}
										<option value="{{val}}" data-display-as="{{displayAs}}" {{#if selected}} selected {{/if}}>{{name}}</option>
									{{/each}}
								</select>
								<div class="item-content item-input">
									<div class="item-media text-color-lightgray">
										<i class="f7-icons icon-calendar"></i>
									</div>
									<div class="item-inner">
										<div class="item-title item-label">{{@global.LANGUAGE.COM_MSG146}}</div>
									</div>
								</div>
							</a>
						</li>
						{{#js_if "this.DaysOfWeekValue.length > 0"}}
							<li class="item-content">
								<div class="item-inner">
									<div class="item-title">{{@global.LANGUAGE.REPORT_PANEL_MSG269}}</div>
								</div>
							</li>
							{{#each DaysOfWeekValue}}
							<li>
								<div class="item-content item-input">
									<div class="item-media text-color-lightgray">
										<i class="f7-icons icon-time-period"></i>
									</div>
									<div class="item-inner">
										<div class="row">
											<div class="col">
												<div class="item-title item-label "> {{#js_if "this == 0"}} Sun {{else}} {{#js_if "this == 1"}} Mon {{else}} {{#js_if "this == 2"}} Tue {{else}} {{#js_if "this == 3"}} Wed {{else}} {{#js_if "this == 4"}} Thu {{else}} {{#js_if "this == 5"}} Fri {{else}} {{#js_if "this == 6"}} Sat {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}}
													({{@global.LANGUAGE.COM_MSG69}})</div>
												<div class="item-input-wrap">
													<input type="text" name="PickerStart_{{this}}" readonly="readonly" />
												</div>
											</div>
											<div class="col">
												<div class="item-title item-label ">  {{#js_if "this == 0"}} Sun {{else}} {{#js_if "this == 1"}} Mon {{else}} {{#js_if "this == 2"}} Tue {{else}} {{#js_if "this == 3"}} Wed {{else}} {{#js_if "this == 4"}} Thu {{else}} {{#js_if "this == 5"}} Fri {{else}} {{#js_if "this == 6"}} Sat {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}} {{/js_if}}({{@global.LANGUAGE.COM_MSG70}})</div>
												<div class="item-input-wrap">
													<input type="text" name="PickerEnd_{{this}}" readonly="readonly" />
												</div>
											</div>
										</div>
									</div>
								</div>
							</li>
							{{/each}}
						{{/js_if}}
					{{/js_if}}

					<!-- Fringe Benefit Tax REPORT -->
					<!--{{#js_if " this.Type == '16' "}}
							<li key="ReportTripPurpose">
								<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-trip-options-list" data-open-in="popover" data-close-on-select="true">
									<select name="TripPurpose" >
										{{#TripPurposeList}}
											<option value="{{Value}}" {{#if Selected}}selected{{/if}} {{#if Disabled}}disabled{{/if}}>{{Name}}</option>
										{{/TripPurposeList}}
									</select>
									<div class="item-content item-input">
										<div class="item-media text-color-lightgray">
											<i class="f7-icons icon-service-plan"></i>
										</div>
										<div class="item-inner">
											<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG158}}</div>
										</div>
									</div>
								</a>
							</li>
						{{/js_if}}-->

					<!-- Fringe Benefit Tax REPORT -->
					{{#js_if " this.Type == '16' || this.Type == '34'"}}
					<li key="FBTOptions">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-fbt-options-list"
							data-open-in="popover">
							<select name="FBTOptions" multiple>
								{{#FBTOptionsList}}
								<option value="{{Value}}" selected>{{Name}}</option>
								{{/FBTOptionsList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-service-plan"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG118}}</div>
								</div>
							</div>
						</a>
					</li>
					{{/js_if}}

					<!-- Fuel Tax Credit REPORT -->
					{{#js_if " this.Type == '17' "}}
					<!--<li key="FTCOptions">
								<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-ftc-options-list" data-open-in="popover">
									<select name="FTCOptions" multiple >
										{{#FTCOptionsList}}
											<option value="{{Value}}" selected>{{Name}}</option>
										{{/FTCOptionsList}}
									</select>
									<div class="item-content item-input">
										<div class="item-media text-color-lightgray">
											<i class="f7-icons icon-service-plan"></i>
										</div>
										<div class="item-inner">
											<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG118}}</div>
										</div>
									</div>
								</a>
							</li>-->
					{{/js_if}}

					<!-- Fleet REPORT -->
					{{#js_if " this.Type == '18' "}}
					<li key="clock-input">
						<div class="item-content item-input disabled ">
							<div class="item-media text-color-lightgray">
								<!--<i class="f7-icons icon-time-period"></i>-->
							</div>
							<div class="item-inner">
								<div class="item-title item-label ">{{@global.LANGUAGE.REPORT_PANEL_MSG175}}</div>
								<div class="item-input-wrap">
									<input type="text" name="ClockPickerStart" readonly="readonly" />
								</div>
							</div>
						</div>
					</li>
					{{/js_if}}

					<!-- PLAYBACK REPORT -->
					{{#js_if " this.Type == '19' || this.Type == '36' ||  this.Type == '9'  ||  this.Type == '12'"}}
					<li>
						<label class="item-checkbox item-content">
							<input type="checkbox" name="SendByEmail" id="SendByEmail" />
							<div class="item-media text-color-lightgray">
								<i class="f7-icons icon-email"></i>
							</div>
							<div class="item-inner">
								<div class="item-title">{{@global.LANGUAGE.COM_MSG118}}</div>
								<div class="item-after">
									<i class="icon icon-checkbox"></i>
								</div>
							</div>
						</label>
					</li>
					{{/js_if}}

					{{#js_if " this.Type == '17' || this.ContactListShow   "}}
				 
					{{#js_if " this.Type == '12' &&  this.ContactListShow"}}
					{{#if ContactList}}
					<li key="NotificationTo">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-contact-list"
							data-open-in="popup" data-searchbar="true"
							data-searchbar-placeholder="{{@global.LANGUAGE.COM_MSG02}}"
							data-append-searchbar-not-found="{{@global.LANGUAGE.PROMPT_MSG008}}"
							data-page-title="{{@global.LANGUAGE.REPORT_PANEL_MSG23}}">
							<select name="ContactList" multiple required validate>
								{{#ContactList}}
								{{#if EMail}}
								<option value="{{Code}}" data-display-as="{{EMail}}" {{#if Selected}} selected {{/if}}>
									{{FullName}}({{EMail}})</option>
								{{/if}}
								{{/ContactList}}
							</select>
							<div 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.REPORT_PANEL_MSG23}}</div>
								</div>
							</div>
						</a>
					</li>
					{{else}}
					<div key="PreloaderContactList" class="block text-align-center">
						<div class="preloader color-red"></div>
					</div>
					{{/if}}
					{{/js_if}}
					{{/js_if}}

					<!-- Driver ID's REPORT -->
					{{#js_if " this.Type == '29' "}}
					<li key="DriverIDOtions">
						<a class="item-link smart-select smart-select-init custom-smart-select custom-smart-select-driverid-options-list"
							data-open-in="popover">
							<select name="DriverIDOptions" multiple>
								{{#DriverIdOptionsList}}
								<option value="{{Value}}" selected>{{Name}}</option>
								{{/DriverIdOptionsList}}
							</select>
							<div class="item-content item-input">
								<div class="item-media text-color-lightgray">
									<i class="f7-icons icon-service-plan"></i>
								</div>
								<div class="item-inner">
									<div class="item-title item-label">{{@global.LANGUAGE.REPORT_PANEL_MSG118}}</div>
								</div>
							</div>
						</a>
					</li>
					{{/js_if}}

				</ul>
				<!-- Fuel Tax Credit REPORT -->
				{{#js_if " this.Type == '17' || this.BottomEmailDescriptionShow "}}
				<div class="block-footer">
					<p>{{@global.LANGUAGE.PROMPT_MSG0108}}</p>
				</div>
				{{/js_if}}
			</div>

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


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

			let ret = {};
			let assetList = self.$app.methods.getAssetsByGroups({ NoGroupToBottom: true });
			let today = moment().format('MMMM DD YYYY, HH:mm');
			let yesterday = moment().subtract(1, 'days').format('MMMM DD YYYY, HH:mm');
			let reportTypesArr = [];
			let overviewOptionsList = Protocol.Helper.getOverviewReportOptions();
			let tripOptionsList = Protocol.Helper.getTripReportOptions();
			let TripPurposeList = Protocol.Helper.getTripPurposeOptions();
			let FBTOptionsList = Protocol.Helper.getFBTOptions();
			let FTCOptionsList = Protocol.Helper.getFTCOptions();
			let DriverIdOptionsList = Protocol.Helper.getDriverIdOptions();

			if (self.$app.data.CustomerType == 2 || self.$app.data.CustomerType == 6) {
				reportTypesArr = [
					{
						value: 1,
						name: LANGUAGE.REPORT_PANEL_MSG00,
						selected: false
					},
					{
						value: 4,
						name: LANGUAGE.REPORT_PANEL_MSG01,
						selected: false
					},
					{
						value: 3,
						name: LANGUAGE.REPORT_PANEL_MSG02,
						selected: false
					},
					{
						value: 5,
						name: LANGUAGE.REPORT_PANEL_MSG03,
						selected: false
					},
					/*{
						value: 6,
						name: LANGUAGE.REPORT_PANEL_MSG06,
						selected: false
					},*/
					{
						value: 7,
						name: LANGUAGE.REPORT_PANEL_MSG05,
						selected: false
					},
					/*{
						value: 10,
						name: LANGUAGE.REPORT_PANEL_MSG65,
						selected: false
					},*/
					{
						value: 15,
						name: LANGUAGE.REPORT_PANEL_MSG65,
						selected: false
					},
					{
						value: 19,
						name: LANGUAGE.REPORT_PANEL_MSG182,
						selected: false
					},
					{
						value: 36,
						name: LANGUAGE.REPORT_PANEL_MSG273,
						selected: false
					},
					{
						value: 8,
						name: LANGUAGE.REPORT_PANEL_MSG07,
						selected: false
					},
					{
						value: 25,
						name: LANGUAGE.REPORT_PANEL_MSG188,
						selected: false
					},
					{
						value: 26,
						name: LANGUAGE.REPORT_PANEL_MSG193,
						selected: false
					},
					{
						value: 9,
						name: LANGUAGE.REPORT_PANEL_MSG08,
						selected: false
					},
					{
						value: 13,
						name: LANGUAGE.REPORT_PANEL_MSG78,
						selected: false
					},
					{
						value: 30,
						name: LANGUAGE.REPORT_PANEL_MSG219,
						selected: false
					},
					{
						value: 35,
						name: LANGUAGE.REPORT_PANEL_MSG271,
						selected: false
					},
				];
			} else {
				reportTypesArr = [
					{
						value: 30,
						name: LANGUAGE.REPORT_PANEL_MSG219,
						selected: false
					},
					{
						value: 1,
						name: LANGUAGE.REPORT_PANEL_MSG00,
						selected: false
					},
					{
						value: 4,
						name: LANGUAGE.REPORT_PANEL_MSG01,
						selected: false
					},
					{
						value: 3,
						name: LANGUAGE.REPORT_PANEL_MSG02,
						selected: false
					},
					{
						value: 11,
						name: LANGUAGE.REPORT_PANEL_MSG80,
						selected: false
					},
					{
						value: 12,
						name: LANGUAGE.REPORT_PANEL_MSG79,
						selected: false
					},
					{
						value: 13,
						name: LANGUAGE.REPORT_PANEL_MSG78,
						selected: false
					},
					{
						value: 19,
						name: LANGUAGE.REPORT_PANEL_MSG182,
						selected: false
					},
					{
						value: 36,
						name: LANGUAGE.REPORT_PANEL_MSG273,
						selected: false
					},
					{
						value: 9,
						name: LANGUAGE.REPORT_PANEL_MSG08,
						selected: false
					},
					{
						value: 14,
						name: LANGUAGE.REPORT_PANEL_MSG77,
						selected: false
					},
					{
						value: 7,
						name: LANGUAGE.REPORT_PANEL_MSG05,
						selected: false
					},
					{
						value: 16,
						name: LANGUAGE.REPORT_PANEL_MSG152,
						selected: false
					},
					{
						value: 17,
						name: LANGUAGE.REPORT_PANEL_MSG153,
						selected: false
					},
					{
						value: 18,
						name: LANGUAGE.REPORT_PANEL_MSG154,
						selected: false
					},
					{
						value: 28,
						name: LANGUAGE.REPORT_PANEL_MSG197,
						selected: false
					},
					{
						value: 29,
						name: LANGUAGE.REPORT_PANEL_MSG209,
						selected: false
					},
					{
						value: 31,
						name: LANGUAGE.REPORT_PANEL_MSG239,
						selected: false
					},
					{
						value: 32,
						name: LANGUAGE.REPORT_PANEL_MSG253,
						selected: false
					},
					{
						value: 33,
						name: LANGUAGE.REPORT_PANEL_MSG264,
						selected: false
					},
					{
						value: 34,
						name: LANGUAGE.REPORT_PANEL_MSG268,
						selected: false
					},
					{
						value: 35,
						name: LANGUAGE.REPORT_PANEL_MSG271,
						selected: false
					},

				];
			}

			if (self.$route.query.type) {
				let selectedIndex = reportTypesArr.findIndex(i => i.value == self.$route.query.type);
				if (selectedIndex != -1) {
					reportTypesArr[selectedIndex].selected = true;
				}
			}

			if (overviewOptionsList && overviewOptionsList.length) {
				overviewOptionsList.sort(function (a, b) {
					if (a.Name < b.Name) return -1;
					if (a.Name > b.Name) return 1;
					return 0;
				});
			}

			assetList.forEach(group => {
				group.Assets = group.Assets.filter(itm => !itm.isShared)
			})
			//console.log(assetList);

			ret = {
				Type: self.$route.query.type,
				ReportTypes: reportTypesArr,
				TreshHoldNumber: 10,
				AssetList: assetList,
				StartDateTime: yesterday,
				EndDateTime: today,
				AlertList: [],
				CustomPeriod: false,
				GeofeceList: [],
				GeofeceListLoaded: false,
				OverviewOptionsList: overviewOptionsList,
				TripOptionsList: tripOptionsList,
				TripPurposeList: TripPurposeList,
				FBTOptionsList: FBTOptionsList,
				FTCOptionsList: FTCOptionsList,
				DriverIdOptionsList: DriverIdOptionsList,
				selectAllAssets: true,
				selectAllDrivers: true,
				selectAllAlarms: true,
				selectOptimized: false,
				displayAllAddresses: false,
				displayNotMovingOnly: false,
				ReportIsGenerated: false,
			 
				sendByEmail: false,
				DaysOfWeek: [],
				DaysOfWeekSelect: false,
				DaysOfWeekValue: [],
				TimePickerStarts: [],
				TimePickerEnds: [],
			};



			//console.log(ret);
			return ret;
		},
		methods: {
 
			getReportData: function (data, url) {
				var self = this;
				if (!data) {
					self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG087 });
					return;
				} 
				if(self.Type === "32") {
					let addUrlParams = '?CustomerCode=' + data.CustomerCode
					addUrlParams += '&BeginDate=' + data.BeginDate
					addUrlParams += '&EndDate='+ data.EndDate
					addUrlParams += '&DriverCodes='+ data.DriverCodes

					self.$app.preloader.show();
					self.$app.request.getJSON(url + addUrlParams, function (result, xhr, status) {
						self.$app.preloader.hide();
						if (result) {
							console.log(result, 'result')
							if (!result.Data.length) {
								self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								return;
							}
 						 
						 	self.$app.methods.setInStorage({ name: 'reportData', data: result.Data });
							reportTemplateName = 'report-trip-extended';
							app.popup.open('.popup-fullscreen-report');
							reportView.router.navigate({
								name: reportTemplateName,
								query: {
									type: '32',
									from: data.BeginDate,
									to : data.EndDate,
								},
								/*context: {
									   ReportData: result.Data
								   }   */
							});

						} else {
							self.$app.dialog.alert('Something wrong, try again later');
						}

					},
						function (xhr, status) {
							self.$app.preloader.hide();
							if (!xhr) {
								self.$app.dialog.alert('Error occured at Send Report on Email ');
								return;
							}
						},
						'json');
				 
				}
				else if (self.Type === '12' && self.sendByEmail) { 
					self.$app.preloader.show();
					self.$app.request.post(url, data, function (result = {}, xhr, status) {
						self.$app.preloader.hide();
				
						self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: "Report is being generated. It will be sent to your email." });		

					})
				 

								 
 
				}
				else if (self.Type === '31') {	
					
					let errFunc = function (err) {
					if (err) {
							self.dialog.alert(LANGUAGE.PROMPT_MSG0127 + `<br>MajorCode: ${result.MajorCode}<br>MinorCode: ${result.MinorCode}<br>${result.Data}`);
						} else {
							self.dialog.alert(LANGUAGE.PROMPT_MSG0121);
						}

					};
					
					let addUrlParams = '?MajorToken=' + data.MajorToken
					addUrlParams += '&MinorToken=' + data.MinorToken
					addUrlParams += '&from='+ data.from
					addUrlParams += '&to=' + data.to
					self.$app.preloader.show();
					self.$app.methods.getTripsOfDriver(addUrlParams)
						.then(function (tripsArray) {
							self.$app.methods.setInStorage({ name: 'reportDataTrips', data: tripsArray });

							self.$app.request.getJSON(url + addUrlParams, function (result, xhr, status) {
						 
						 if (result) {
							 self.$app.preloader.hide();
							 if (!result.Data.length) {
								 self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								 return;
							 }
							 
						  
							 self.$app.methods.setInStorage({ name: 'reportData', data: result.Data });
							 reportTemplateName = 'report-show-driver-trip';
							 app.popup.open('.popup-fullscreen-report');
							 reportView.router.navigate({
								 name: reportTemplateName,
								 query: {
									 type: '31',
									 from: data.from,
									 to : data.to,
									 MajorToken:  data.MajorToken,
									 MinorToken: data.MinorToken
								 },
							  
							 });
 
						 } else {
							 self.$app.dialog.alert('Something wrong, try again later');
						 }
 
					 },
						 function (xhr, status) {
							 self.$app.preloader.hide();
							 if (!xhr) {
								 self.$app.dialog.alert('Error occured at Send Report on Email ');
								 return;
							 }
						 },
						 'json');
						}, errFunc)
					
					
						
				}
				else if (self.Type === '30') {
					let addUrlParams = '?MajorToken=' + data.MajorToken
					addUrlParams += '&MinorToken=' + data.MinorToken
					addUrlParams += '&CsCode='
					addUrlParams += '&page=1'
					addUrlParams += '&rows=1000'
					addUrlParams += '&sort='
					addUrlParams += '&order='
					addUrlParams += '&q='
					addUrlParams += '&SIMS='
					addUrlParams += '&AssetStatus='
					addUrlParams += '&AssetType='
					addUrlParams += '&payPlanCode='
					addUrlParams += '&Solution='
					addUrlParams += '&productCode='
					addUrlParams += '&SimStatus='
					addUrlParams += '&IMEIS='
					self.$app.preloader.show();
					self.$app.request.getJSON(url + addUrlParams, function (result, xhr, status) {
						self.$app.preloader.hide();
						if (result) {
							if (!result.rows.length) {
								self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								return;
							}
							//self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0109 });
							//leftView.router.back();
							let tempAssets = result.rows;
							
							result.rows.forEach((el, i) => {
							console.log('asset:', POSINFOASSETLIST[el.IMEI])
									tempAssets[i].Registration = POSINFOASSETLIST[el.IMEI].Registration
									tempAssets[i].Make = POSINFOASSETLIST[el.IMEI].Describe1
									tempAssets[i].Model = POSINFOASSETLIST[el.IMEI].Describe2
									tempAssets[i].Vin = POSINFOASSETLIST[el.IMEI].Describe7
									tempAssets[i].EngineCapacity = POSINFOASSETLIST[el.IMEI].EngineCapacity ? POSINFOASSETLIST[el.IMEI].EngineCapacity + ' ' + LANGUAGE.ASSET_EDIT_MSG20 : '',
									tempAssets[i].OffroadTaxCredit = POSINFOASSETLIST[el.IMEI].OffroadTaxCredit
							});
							
									
							self.$app.methods.setInStorage({ name: 'reportData', data: tempAssets });
							reportTemplateName = 'report-assets-listing';
							app.popup.open('.popup-fullscreen-report');
							reportView.router.navigate({
								name: reportTemplateName,
								query: {
								 
								},
								/*context: {
									   ReportData: result.Data
								   }   */
							});

						} else {
							self.$app.dialog.alert('Something wrong, try again later');
						}

					},
						function (xhr, status) {
							self.$app.preloader.hide();
							if (!xhr) {
								self.$app.dialog.alert('Error occured at Send Report on Email ');
								return;
							}
						},
						'json');
				}
				else if (self.Type === '36') {
					let addUrlParams = 'MajorToken=' + data.MajorToken
					addUrlParams += '&MinorToken=' + data.MinorToken
					addUrlParams += '&DateFrom= '+ data.DateFrom 
					addUrlParams += '&DateTo=' + data.DateTo
					addUrlParams += '&AsId=' + data.AsId
					addUrlParams += '&Option=' + data.Option
					addUrlParams += '&MinValue=' + data.MinValue
					addUrlParams += '&MaxValue=' + data.MaxValue
					
					
					
					self.$app.preloader.show();
					
					self.$app.request.getJSON(url + '?' + addUrlParams, function (result, xhr, status) {
						self.$app.preloader.hide();
						if (result) {
							if (!result?.Data?.length) {
								self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								return;
							}
							//self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0109 });
							//leftView.router.back();
							let tempAssets = result.Data;
							/*result.Data?.rows.forEach((el, i) => {
							console.log('fuel:', POSINFOASSETLIST[el.IMEI])
									tempAssets[i].Registration = POSINFOASSETLIST[el.IMEI].Registration
									tempAssets[i].Make = POSINFOASSETLIST[el.IMEI].Describe1
									tempAssets[i].Model = POSINFOASSETLIST[el.IMEI].Describe2
									tempAssets[i].Vin = POSINFOASSETLIST[el.IMEI].Describe7
									tempAssets[i].EngineCapacity = POSINFOASSETLIST[el.IMEI].EngineCapacity ? POSINFOASSETLIST[el.IMEI].EngineCapacity + ' ' + LANGUAGE.ASSET_EDIT_MSG20 : '',
									tempAssets[i].OffroadTaxCredit = POSINFOASSETLIST[el.IMEI].OffroadTaxCredit
							});*/
							
									
							self.$app.methods.setInStorage({ name: 'reportData', data: tempAssets });
							reportTemplateName = 'report-show-status';
							app.popup.open('.popup-fullscreen-report');
							reportView.router.navigate({
								name: reportTemplateName,
								query: {
								 timePeriodText: data.timePeriodText,
								 reportDateFromUTC: data.DateFrom,
								 reportDateToUTC: data.DateTo,
								},
							});

						} else {
							self.$app.dialog.alert('Something wrong, try again later');
						}
					},
						function (xhr, status) {
							self.$app.preloader.hide();
							if (!xhr) {
								self.$app.dialog.alert('Error occured at Generate Report ');
								return;
							}
						},
						'json');
				}
				else if (self.Type === '35') {
				
					let addUrlParams = '?MajorToken=' + data.MajorToken
					addUrlParams += '&MinorToken=' + data.MinorToken
					addUrlParams += '&CsCode=' 
					addUrlParams += '&page=1'
					addUrlParams += '&rows=1000'
					addUrlParams += '&sort=Date'
					addUrlParams += '&order=desc'
					self.$app.preloader.show();
					self.$app.request.getJSON(url + addUrlParams, function (result, xhr, status) {
						self.$app.preloader.hide();
						if (result) {
							if (!result?.Data?.rows?.length) {
								self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								return;
							}
							//self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0109 });
							//leftView.router.back();
							let tempAssets = result.Data?.rows;
							
							/*result.Data?.rows.forEach((el, i) => {
							console.log('fuel:', POSINFOASSETLIST[el.IMEI])
									tempAssets[i].Registration = POSINFOASSETLIST[el.IMEI].Registration
									tempAssets[i].Make = POSINFOASSETLIST[el.IMEI].Describe1
									tempAssets[i].Model = POSINFOASSETLIST[el.IMEI].Describe2
									tempAssets[i].Vin = POSINFOASSETLIST[el.IMEI].Describe7
									tempAssets[i].EngineCapacity = POSINFOASSETLIST[el.IMEI].EngineCapacity ? POSINFOASSETLIST[el.IMEI].EngineCapacity + ' ' + LANGUAGE.ASSET_EDIT_MSG20 : '',
									tempAssets[i].OffroadTaxCredit = POSINFOASSETLIST[el.IMEI].OffroadTaxCredit
							});*/
							
									
							self.$app.methods.setInStorage({ name: 'reportData', data: tempAssets });
							reportTemplateName = 'report-fuel-purchase-listing';
							app.popup.open('.popup-fullscreen-report');
							reportView.router.navigate({
								name: reportTemplateName,
								query: {
								 
								},
							});

						} else {
							self.$app.dialog.alert('Something wrong, try again later');
						}

					},
						function (xhr, status) {
							self.$app.preloader.hide();
							if (!xhr) {
								self.$app.dialog.alert('Error occured at Send Report on Email ');
								return;
							}
						},
						'json');
				} else if (self.Type === '17' || self.ContactListShow && self.Type !== '9') {
					//by email, bitmans api

					let data2 = {
						Assets: data.Assets,
						DateFrom: data.DateFrom,
						DateTo: data.DateTo,
						Logo: data.Logo,
						MajorToken: data.MajorToken,
						MinorToken: data.MinorToken,
						Recipients: data.Recipients,
						displayTimeZone: data.displayTimeZone,
						extension: data.extension
					}
					/*if(data.From) data2.From = data.From;
					if(data.To) data2.To = data.To;*/

					self.$app.preloader.show();
					self.$app.request.postJSON(url, data2, function (result, xhr, status) {
						self.$app.preloader.hide();
						if (url === 'https://newapi.quiktrak.co/QuikTrak/V1/Report/GetTripReport') {
							
						}
						if (result && result.MajorCode === '000') {
							if (!result.Data.length) {
								self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								return;
							}
							self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0109 });
							leftView.router.back();
						} else {
							self.$app.dialog.alert('Something wrong, try again later');
						}

					},
						function (xhr, status) {
							self.$app.preloader.hide();
							if (!xhr) {
							 
								self.$app.dialog.alert('Error occured at Send Report on Email ');
								return;
							}
							switch (xhr.status) {
								case 202:
									self.$app.methods.customNotification({ text: LANGUAGE.PROMPT_MSG0109 });
									break;
								case 204:
									self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
									break;

								default:
									if (xhr.response) {
										let response = self.$app.methods.isJsonString(xhr.response);
										if (!response) {
											self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0115 });
											return;
										}
										if (self.Type === '17') {
											if (response.data && response.data.MajorCode === '100' && response.data.MinorCode === '1002') {
												self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0111 });
												return;
											}
										}
										if (self.Type === '19' && self.ContactListShow) {
											if (response.code === 500) {
												let messages = self.$app.methods.isJsonString(response.message);
												if (messages && messages.length) {
													for (let i = 0; i < messages.length; i++) {
														if (messages[i].MajorCode === '100' && messages[i].MinorCode === '1002') {
															self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0111 });
															return;
														}
													}
												}
											}
										}
									}
				 
									self.$app.dialog.alert('Error occured at Send Report on Email ');
							}
						},
						'json');

				} else {
					//normal tony api

					if (url === 'https://newapi.quiktrak.co/QuikTrak/V1/Report/GetTripReport') {
						/*data = {
							DateFrom: "2021-12-02 04:06:12",
							DateTo: "2021-12-02 10:06:12",
							Imeis: ['0357424100668103','0357424100667659'],
							MajorToken: "00000000-0000-0000-0000-000000000000",
							MinorToken: "00000000-0000-0000-0000-000000000000",
							reportOptionsEnum: 1,
							timePeriodText: "6 Hours"
						}*/
					
					}

					self.$app.preloader.show();
					self.$app.request.post(url, data, function (result = {}, xhr, status) {
						self.$app.preloader.hide();
				
						if (result.MajorCode === '000') {
						 
							if (result.Data && result.Data.length
								|| self.Type === '5' && !self.CustomPeriod && result.Data && result.Data.Datails && result.Data.Datails.length
								|| self.Type === '19' && result.Data && result.Data.HisArry && result.Data.HisArry.length) {

								if (self.Type === '19') {
									self.$app.methods.setInStorage({ name: 'historyArray', data: result.Data.HisArry });
									self.$app.methods.setInStorage({ name: 'historyEvents', data: result.Data.HisEvents && result.Data.HisEvents.length ? result.Data.HisEvents : [] });

								} else if (self.Type === '9') {
									//console.log('result.Data, Alarm Report', result.Data)
									self.$app.methods.setInStorage({ name: 'reportDataDB', data: [{}]});
									self.$app.methods.setInStorage({ name: 'reportDataDB', data: result.Data });
									 
									 
								} else {
									self.$app.methods.setInStorage({ name: 'reportData', data: result.Data });
								}

								let reportTemplateName = 'report-show';
								if (self.Type === '9') {
									reportTemplateName = 'report-show-from-db';
								}
								if(data.IsEmail) {
									self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG0146 });

								}
							 
								
								let query = {
									type: self.Type,
								};
								data.splitby ? query.splitby = data.splitby : '';
								data.imei ? query.imei = data.imei : '';
								data.timePeriodText ? query.timePeriodText = data.timePeriodText : '';

								switch (self.Type) {
									case '5':
										reportTemplateName = 'report-show-device-sold';
										query.timePeriod = data.Time ? data.Time : '';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										break;
									/*case '30':
										reportTemplateName = 'report-assets-listing';
										break;*/
									case '6': case '7':
										reportTemplateName = 'report-show-in-off-lot';
										break;
									case '8':
										reportTemplateName = 'report-show-drive-off';
										query.timePeriod = data.Time ? data.Time : '';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										break;

									case '10':
										reportTemplateName = 'report-show-lot-overview';
										break;

									case '11':
										reportTemplateName = 'report-show-lot-overview';
										break;

									case '12':
										reportTemplateName = 'report-show-trip';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										query.unit = 1
										break;

									case '13':
										reportTemplateName = 'report-show-servicing-overview';
										query.servicesNumbers = data.servicesNumbers ? data.servicesNumbers : '';
										break;

									case '14':
										reportTemplateName = 'report-show-overview';
										query.from = data.From;
										query.to = data.To;
										break;

									case '15':
										reportTemplateName = 'report-show-lot-overview2';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										break;

									case '16':
									case '34':
										reportTemplateName = 'report-show-fbt';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										query.reportTripPurpose = data.reportTripPurpose ? data.reportTripPurpose : '';
										break;

									case '17':
										reportTemplateName = 'report-show-ftc';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										break;

									case '18':
										reportTemplateName = 'report-show-fleet';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										break;

									case '19':
										reportTemplateName = 'report-show-playback';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										query.reportDateFromUTC = data.From ? data.From : '';
										query.reportDateToUTC = data.To ? data.To : '';
										query.isOptimized = self.selectOptimized ? true : false;
										break;
										
									case '36':
									console.log('36')
										reportTemplateName = 'report-show-status';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										query.reportDateFromUTC = data.DateFrom ? data.DateFrom : '';
										query.reportDateToUTC = data.DateTo ? data.DateTo : '';
										query.isOptimized = self.selectOptimized ? true : false;
										break;

									case '28':
										reportTemplateName = 'report-show-driver-behaviour';
										query.from = data.beginTime;
										query.to = data.endTime;
										query.timePeriodText = data.timePeriodText;
										break;

									case '29':
										reportTemplateName = 'report-show-driver-ids';
										query.timePeriodText = data.timePeriodText ? data.timePeriodText : '';
										query.reportOptionsEnum = data.reportOptionsEnum ? data.reportOptionsEnum : 0;
										break;
								 
								}

								if (self.Type === '5' && self.CustomPeriod) {
									self.getDeviceSoldAdditionalData({
										reportTemplateName: reportTemplateName,
										query: query,
									}, function (param) {
										app.popup.open('.popup-fullscreen-report');
										reportView.router.navigate({
											name: param.reportTemplateName,
											query: param.query,
										});
									})
								}
								else if(self.Type === '9') {
									if(isInternalServerError) {
										self.$setState({
											ReportIsGenerated: false,
										})
									} else {
										self.$setState({
											ReportIsGenerated: true,
										})
									}
									
								}
								else { 
									app.popup.open('.popup-fullscreen-report');
									reportView.router.navigate({
										name: reportTemplateName,
										query: query,
										/*context: {
											   ReportData: result.Data
										   }   */
									});
								}



							} else {
								switch (self.Type) {
									case '1':   // Low Battery
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG088 });
										break;
									case '5':   //Device Sold Type
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG062 });
										break;

									case '6':   // In Lot
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG063 });
										break;

									case '7':   // Off Lot
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG064 });
										break;

									case '8':   // DRIVE OFF
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG065 });
										break;

									case '9':   // Alarm
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG066 });
										break;


									case '10':  // LOT OVERVIEW
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG069 });
										break;

									case '11':  // GEOFENCE OVERVIEW
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG085 });
										break;

									case '12':
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG087 });
										break;

									case '13':
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG092 });
										break;

									case '15':
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG087 });
										break;

									case '16':
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
										break;
									case '31':
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG087 });
										break;

									default:
										self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.COM_MSG35 });
								}
							}
						} else if (self.Type === '19' && result.MajorCode === '100' && result.MinorCode === '1002') {
							self.$app.dialog.alert(LANGUAGE.ASSET_PLAYBACK_MSG04, LANGUAGE.ASSET_PLAYBACK_MSG00, function () { app.dialog.close(); });
						} else if (self.Type === '29' && result.MajorCode === '200' && result.MinorCode === '2001') {
							self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.REPORT_PANEL_MSG218 });
						} else if (result.MajorCode === '100' && result.MinorCode === '1002' && result.Data && result.Data === 'MajorToken_Error') {
							self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG061 });
						} else if (result.MajorCode === '100' && result.MinorCode === '1002') {
							self.$app.methods.customDialog({ title: Protocol.Helper.getReportTypeName(self.Type), text: LANGUAGE.PROMPT_MSG056 });
						} else {
							self.$app.dialog.alert(`Something wrong, try again later.<br>MajorCode - ${result.MajorCode}, MinorCode - ${result.MinorCode}`);
						}

					},
						function (xhr, status) {
							self.$app.preloader.hide();
							//self.$app.dialog.alert('Error occured at Get Report Data ');
							self.$app.dialog.alert('Due to the size of this report, it will be generated and will be emailed');
							
						},
						'json');


				}

			},
			getAlertList: function (data) {
				var self = this;
				//GET_REPORT_GET_ALERTLIST
				/*var data = {
					MajorToken: userInfo.MajorToken,
					MinorToken: userInfo.MinorToken,
				};*/
				self.$app.request.post(API_URL.GET_REPORT_ALERTLIST, data, function (result, xhr, status) {
					if (result.MajorCode == '000') {
						if (result.Data && result.Data.length) {
							var alertList = self.formatAlertList(result.Data);
							self.$setState({
								AlertList: alertList,
							});
						}

					} else {
						self.$app.dialog.alert('Cant get Alert List');
					}

				},
					function (xhr, status) {
						self.$app.dialog.alert('Error occured at Alert List ');
					},
					'json');
			},
			formatAlertList: function (list) {
				if (list && list.length) {
					let userAlarmSettings = this.$app.methods.getFromStorage('userAlarmSettings');
					for (var i = list.length - 1; i >= 0; i--) {
						switch (list[i].AlertId) {
							case Protocol.PositionAlerts.INPUT1.toString():
								list[i].Name = userAlarmSettings && userAlarmSettings.Input1High ? userAlarmSettings.Input1High : Protocol.Helper.getAletTypeName(list[i].AlertId)
								break
							case Protocol.PositionAlerts.INPUT2.toString():
								list[i].Name = userAlarmSettings && userAlarmSettings.Input2 ? userAlarmSettings.Input2 : Protocol.Helper.getAletTypeName(list[i].AlertId)
								break
							default:
								list[i].Name = Protocol.Helper.getAletTypeName(list[i].AlertId);
						}
					}
					list.sort(function (a, b) {
						if (a.Name.toLowerCase() < b.Name.toLowerCase()) return -1;
						if (a.Name.toLowerCase() > b.Name.toLowerCase()) return 1;
						return 0;
					});
				}
				return list;
			},
			getGeofenceList: function (data = {}) {
				var self = this;

				/* var userInfo = self.$app.methods.getFromStorage('userInfo');
			   //GET_GROUP_LIST
			   var data = {
				   MinorToken: userInfo.MinorToken,
				   MajorToken: userInfo.MajorToken,
			   };*/

				self.$app.request.post(API_URL.GET_GEOFENCE_LIST, data, function (result, xhr, status) {

					//console.log(result);
					if (result && result.MajorCode == '000') {
						if (result.Data) {
							self.$setState({
								GeofeceListLoaded: true,
								GeofeceList: self.formatGeofenceList(result.Data)
							});
						}

					} else {
						self.$app.dialog.alert('Something wrong at getGeofenceList');
					}

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

			},
			formatGeofenceList: function (listObj) {
				let self = this;
				let list = [];
				if (!self.$app.methods.isObjEmpty(listObj)) {
					const keys = Object.keys(listObj);
					for (const key of keys) {
						list.push({
							Code: key,
							Name: listObj[key].Name
						});
					}
					list.sort(function (a, b) {
						if (a.Name < b.Name) return -1;
						if (a.Name > b.Name) return 1;
						return 0;
					});
				}
				return list;
			},
			getServicingParameters: function (data = {}) {
				let self = this;
				self.$app.request.post(API_URL.GET_SERVICE_INTERVAL_PARAMS, data, function (result = {}, xhr, status) {
					//console.log(result);
					if (result.MajorCode == '000') {

						if (result.Data.ServerTypeList && result.Data.ServerTypeList.length) {
							for (var i = result.Data.ServerTypeList.length - 1; i >= 0; i--) {
								result.Data.ServerTypeList[i].Name = self.$app.methods.capitalize(result.Data.ServerTypeList[i].Name);
							}
						}

						self.$setState({
							IntervalServicesList: result.Data.ServerTypeList
						})

					} else {
						self.$app.dialog.alert(LANGUAGE.COM_MSG36);
					}
				},
					function (xhr, status) {
						self.$app.utils.nextFrame(() => {
							self.$app.preloader.hide();
							self.$app.dialog.alert('Error occured at Get Interval Reminder Parameters');
						});
					},
					'json');
			},
			getContactList: function (data = {}) {
				var self = this;

				self.$app.request.post(API_URL.GET_CONTACT_USERS_LIST, data, function (result, xhr, status) {
					self.$app.preloader.hide();
					//console.log(result);
					if (result) {
						self.$app.methods.setInStorage({ name: 'contactList', data: result });
						var contactList = self.$app.methods.sortContactList(result);
						self.$setState({
							//ContactListLoaded: true,
							ContactList: contactList
						});
						//console.log(contactList);
					}

				},
					function (xhr, status) {
						self.$app.preloader.hide();
						self.$app.dialog.alert('Error occurred at Get Contact List ');
					},
					'json');
			},
			getDeviceSoldAdditionalData: function (param, callback) {
				let self = this;
				let userInfo = self.$app.methods.getFromStorage('userInfo');

				let promiseSoldThisWeek = new Promise(function (resolve, reject) {
					self.$app.request.post(API_URL.GET_REPORT_BY_DEVICESOLD, {
						MajorToken: userInfo.MajorToken,
						MinorToken: userInfo.MinorToken,
						DateFrom: moment().startOf('week').utc().format(window.COM_TIMEFORMAT),
						DateTo: moment().utc().format(window.COM_TIMEFORMAT)
					}, function (result, xhr, status) {
						if (result && result.MajorCode === '000') {
							resolve(result.Data.length);
						} else {
							resolve(0);
						}
					}, function (xhr, status) {
						reject(xhr);
					}, 'json');
				});
				let promiseSoldThisMonth = new Promise(function (resolve, reject) {
					self.$app.request.post(API_URL.GET_REPORT_BY_DEVICESOLD, {
						MajorToken: userInfo.MajorToken,
						MinorToken: userInfo.MinorToken,
						DateFrom: moment().startOf('month').utc().format(window.COM_TIMEFORMAT),
						DateTo: moment().utc().format(window.COM_TIMEFORMAT)
					}, function (result, xhr, status) {
						if (result && result.MajorCode === '000') {
							resolve(result.Data.length);
						} else {
							resolve(0);
						}
					}, function (xhr, status) {
						reject(xhr);
					}, 'json');
				});

				self.$app.preloader.show();
				Promise.all([
					promiseSoldThisWeek.catch(error => { return error }),
					promiseSoldThisMonth.catch(error => { return error }),
				]).then(values => {
					self.$app.preloader.hide();
					let reportData = self.$app.methods.getFromStorage('reportData');
					let newReportData = {
						Datails: reportData,
						ActivationNum1: values[0],
						ActivationNum2: values[1],
					};
					self.$app.methods.setInStorage({ name: 'reportData', data: newReportData });
					callback(param);

				});
			},
			clockPickerInit: function () {
				let self = this;
				self.ClockPickerStart = app.picker.create({
					inputEl: self.$el.find('[name="ClockPickerStart"]'),
					rotateEffect: true,
					value: ['00', '00'],
					cols: [
						{
							textAlign: 'center',
							values: (function () {
								var arr = [];
								for (var i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }
								return arr;
							})(),
						},
						// Divider
						{
							divider: true,
							content: ':'
						},
						// Minutes
						{
							textAlign: 'center',
							values: (function () {
								var arr = [];
								for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
								return arr;
							})(),
						}
					],
					renderToolbar: function () {
						return '';
					},
					formatValue: function (values, displayValues) {
						return values[0] + ':' + values[1];
					},
				});
			}

		},

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

				var form = page.$el.find('[name = "ReportEditForm"]');
			 	
				var startDateTimeEl = page.$el.find('input[name = "StartDateTime"]');
				var endDateTimeEl = page.$el.find('input[name = "EndDateTime"]');
				var reportTypeEl = page.$el.find('[name = "Type"]');  

				var datepickerFormat = 'MMMM DD YYYY, HH:mm';
				var userInfo = self.$app.methods.getFromStorage('userInfo');
				let daysOfWeekEl = self.$el.find('.smart-select-days-of-week');
					let daysOfWeekArray = [
						{
							val: 0,
							name: LANGUAGE.COM_MSG38,
							displayAs: LANGUAGE.COM_MSG45,
							selected: false,
						},
						{
							val: 1,
							name: LANGUAGE.COM_MSG39,
							displayAs: LANGUAGE.COM_MSG46,
							selected: false,
						},
						{
							val: 2,
							name: LANGUAGE.COM_MSG40,
							displayAs: LANGUAGE.COM_MSG47,
							selected: false,
						},
						{
							val: 3,
							name: LANGUAGE.COM_MSG41,
							displayAs: LANGUAGE.COM_MSG48,
							selected: false,
						},
						{
							val: 4,
							name: LANGUAGE.COM_MSG42,
							displayAs: LANGUAGE.COM_MSG49,
							selected: false,
						},
						{
							val: 5,
							name: LANGUAGE.COM_MSG43,
							displayAs: LANGUAGE.COM_MSG50,
							selected: false,
						},
						{
							val: 6,
							name: LANGUAGE.COM_MSG44,
							displayAs: LANGUAGE.COM_MSG51,
							selected: false,
						},
					];
					self.$setState({
							DaysOfWeek: daysOfWeekArray,
					});

					self.DaysOfWeekSelect = self.$app.smartSelect.create({
							el: daysOfWeekEl,
							openIn: 'sheet',
							formColorTheme: 'green',
							sheetPush: 'true'
					});

					$$('.smart-select-days-of-week select').on('change', function (e) {
						let checkedDays = e.srcElement.value
						self.$setState({
							DaysOfWeekValue: self.DaysOfWeekSelect.$selectEl?.val()
						})
							self.DaysOfWeekValue.forEach(function(dayValue) {
							let picker = self.$app.picker.create({
									inputEl: self.$el.find('[name="PickerStart_' + dayValue + '"]'),
									rotateEffect: true,
									sheetPush: true,
									value:  ['07', '00'],
									cols: [
											{
													textAlign: 'center',
													values: (function() {
															let arr = [];
															for (let i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }
															return arr;
													})(),
											},
											{
													divider: true,
													content: ':'
											},
											{
													textAlign: 'center',
													values: (function() {
															let arr = [];
															for (let i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
															return arr;
													})(),
											}
									],
									formatValue: function(values, displayValues) {
											return values[0] + ':' + values[1];
									},
							});

							self.TimePickerStarts.push(picker); 
					});
					self.DaysOfWeekValue.forEach(function(dayValue) {
							let picker = self.$app.picker.create({
									inputEl: self.$el.find('[name="PickerEnd_' + dayValue + '"]'),
									rotateEffect: true,
									sheetPush: true,
									value:['18', '00'],
									cols: [
											{
													textAlign: 'center',
													values: (function() {
															let arr = [];
															for (let i = 0; i <= 23; i++) { arr.push(i < 10 ? '0' + i : i); }
															return arr;
													})(),
											},
											{
													divider: true,
													content: ':'
											},
											{
													textAlign: 'center',
													values: (function() {
															let arr = [];
															for (let i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
															return arr;
													})(),
											}
									],
									formatValue: function(values, displayValues) {
											return values[0] + ':' + values[1];
									},
							});

							self.TimePickerEnds.push(picker);  
					});
					})


				


				

				self.getAlertList({ MajorToken: userInfo.MajorToken, MinorToken: userInfo.MinorToken });
				self.getGeofenceList({ MajorToken: userInfo.MajorToken, MinorToken: userInfo.MinorToken });
				self.getServicingParameters({ MajorToken: userInfo.MajorToken, MinorToken: userInfo.MinorToken });
				self.getContactList({ MajorToken: userInfo.MajorToken, MinorToken: userInfo.MinorToken });

			 
				form.on('change',  function(e){ 
					self.$setState ({
						ReportIsGenerated: false
					})  
				});
				

				form.on('submit', function (e) {
					e.preventDefault();
		 
					var showReportEl = page.$el.find('.showReportPopup'); 
					var UnitEl = page.$el.find('[name = "Unit"]');
					var fixedPeriodEl = page.$el.find('[name = "FixedPeriod"]');
					var alertListEl = page.$el.find('[name = "AlertList"]');
					var assetsGroupEl = page.$el.find('[name = "AssetGroups"]');
					var geofencesEl = page.$el.find('[name = "Geofences"]');
					var assetsEl = page.$el.find('[name = "Assets"]');
					var driverCodeMEl = page.$el.find('[name = "DriverCodeMultiple"]'); 
					var minValEl = page.$el.find('[name = "MinValue"]'); 
					var maxValEl = page.$el.find('[name = "MaxValue"]');
					var statusOptionEl = page.$el.find('[name = "status-option"]'); 
		 
					if(showReportEl.length) {
					 
						let query = {
							type: '9',
						};
							self.$app.popup.open('.popup-fullscreen-report');
							reportView.router.navigate({
								name: 'report-show-from-db',
								query: query,
								/*context: {
										ReportData: result.Data
									}   */
							});
							self.$setState ({
								ReportIsGenerated: false
							})  
				 
						return
					}
					
					
					/*
					var smartAssetSelect = self.$app.smartSelect.create({
					  on: {
						opened: function () {
						
						  console.log('Smart select opened')
						}
					  }
					})*/
					
					
					
					//var splitByEl = page.$el.find('[name = "AssetGroupsSplitBy"]');
					//var splitByVal = splitByEl.val();
					var splitByVal = '2';
					 
					var treshHoldNumberEl = page.$el.find('[name = "TreshHoldNumber"]');
					var intervalServicesEl = page.$el.find('[name = "IntervalServices"]');
					var overviewOptionsEl = page.$el.find('[name = "OverviewOptions"]');
					var tripOptionsEl = page.$el.find('[name = "TripOptions"]');
					var FBTOptionsEl = page.$el.find('[name = "FBTOptions"]');
					var DriverIDOptionsEl = page.$el.find('[name = "DriverIDOptions"]');
					//var tripPuposeEl = page.$el.find('[name = "TripPurpose"]');
					//var FTCOptionsEl = page.$el.find('[name = "FTCOptions"]');
					var contactListEl = page.$el.find('[name = "ContactList"]');  
					var driverCodeEl = page.$el.find('[name = "DriverCode"]');
					var userInfo = self.$app.methods.getFromStorage('userInfo');
					 

					var data = {
						MajorToken: userInfo.MajorToken,
						MinorToken: userInfo.MinorToken,
					};
					var url = API_URL.GET_REPORT_BY_ALERT;
					let optionsArry = null

					let tz = moment().format("ZZ");
					let formatTz = tz.slice(0, -2)
					let intTz =  parseInt(formatTz)
					switch (reportTypeEl.val()) {
						case '1': //LOW BATTERY
							url = API_URL.GET_REPORT_LOW_BATTERY;
							data.Battery = treshHoldNumberEl.val();
							break;

						case '30': //ASSET LISTING
							url = API_URL.GET_ASSET_LIST;
							data.assets = []
							break;
						case '35': //FUEL PURCHASES LISTING
							url = API_URL.GET_FUEL_PURCHASES_LIST;
							data.assets = []
							break;
						case '34': //OUT OF WORKING HOURS
						
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							
							data.Imeis = [];
							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									data.Imeis.push(el.getAttribute('data-imei'));
								}
							});

							data.reportOptionsEnum = 0;
							optionsArry = FBTOptionsEl.val();
							if (optionsArry && optionsArry.length) {
								for (let i = optionsArry.length - 1; i >= 0; i--) {
									data.reportOptionsEnum += parseInt(optionsArry[i], 10);
								}
							}
							data.reportTripPurpose = 'custom';
							
							let Weeks = self.DaysOfWeekSelect.$selectEl?.val().toString();
							let addUrl = ''
							data.WeekDays = ''
							
                            if(Weeks.includes('6')){
								addUrl = 'DateFrom_0=' + moment(page.$el.find('[name="PickerStart_6"]').val(), 'HH:mm').format('HH:mm');
								addUrl += '&DateTo_0=' + moment(page.$el.find('[name="PickerEnd_6"]').val(), 'HH:mm').format('HH:mm');
								data.WeekDays = '0'
							}
                            if(Weeks.includes('0')){
								if(data.WeekDays.length) {
									data.WeekDays += ',1';
									addUrl += '&DateFrom_1=' +moment(page.$el.find('[name="PickerStart_0"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_1=' +moment(page.$el.find('[name="PickerEnd_0"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '1';
									addUrl = 'DateFrom_1=' +moment(page.$el.find('[name="PickerStart_0"]').val(), 'HH:mm').format('HH:mm');
									addUrl += 'DateTo_1=' +moment(page.$el.find('[name="PickerEnd_0"]').val(), 'HH:mm').format('HH:mm');
								}
							}
                            if(Weeks.includes('1')){
								if(data.WeekDays.length) {
									data.WeekDays += ',2';
									addUrl += '&DateFrom_2=' +moment(page.$el.find('[name="PickerStart_1"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_2=' +moment(page.$el.find('[name="PickerEnd_1"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '2';
									addUrl = 'DateFrom_2=' +moment(page.$el.find('[name="PickerStart_1"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_2=' +moment(page.$el.find('[name="PickerEnd_1"]').val(), 'HH:mm').format('HH:mm');
								}
							}
                            if(Weeks.includes('2')){
								if(data.WeekDays.length) {
									data.WeekDays += ',3';
									addUrl += '&DateFrom_3=' +moment(page.$el.find('[name="PickerStart_2"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_3=' +moment(page.$el.find('[name="PickerEnd_2"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '3';
									addUrl = 'DateFrom_3=' +moment(page.$el.find('[name="PickerStart_2"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_3=' +moment(page.$el.find('[name="PickerEnd_2"]').val(), 'HH:mm').format('HH:mm');
								}
							}
                            if(Weeks.includes('3')){
								if(data.WeekDays.length) {
									data.WeekDays += ',4';
									addUrl += '&DateFrom_4=' +moment(page.$el.find('[name="PickerStart_3"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_4=' +moment(page.$el.find('[name="PickerEnd_3"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '4';
									addUrl = 'DateFrom_4=' +moment(page.$el.find('[name="PickerStart_3"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_4=' +moment(page.$el.find('[name="PickerEnd_3"]').val(), 'HH:mm').format('HH:mm');
								}
							}
                            if(Weeks.includes('4')){
								if(data.WeekDays.length) {
									data.WeekDays += ',5';
									addUrl += '&DateFrom_5=' +moment(page.$el.find('[name="PickerStart_4"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_5=' +moment(page.$el.find('[name="PickerEnd_4"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '5';
									addUrl = 'DateFrom_5=' +moment(page.$el.find('[name="PickerStart_4"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_5=' +moment(page.$el.find('[name="PickerEnd_4"]').val(), 'HH:mm').format('HH:mm');
								}
							}
                            if(Weeks.includes('5')){
								if(data.WeekDays.length) {
									data.WeekDays += ',6';
									addUrl += '&DateFrom_6=' +moment(page.$el.find('[name="PickerStart_5"]').val(), 'HH:mm').format('HH:mm');
									addUrl += '&DateTo_6=' +moment(page.$el.find('[name="PickerEnd_5"]').val(), 'HH:mm').format('HH:mm');
								} else {
									data.WeekDays = '6';
									addUrl = 'DateFrom_6=' +moment(page.$el.find('[name="PickerStart_5"]').val(), 'HH:mm').format('HH:mm');
									addUrl += 'DateTo_6=' +moment(page.$el.find('[name="PickerEnd_5"]').val(), 'HH:mm').format('HH:mm');
								}
							}
							
							
							url = API_URL.GET_REPORT_OUT_OF_WORKING_HOURS + '?' + addUrl;
							
							break;

						case '3': // NOT REPORTING
							url = API_URL.GET_REPORT_BY_NOTREPORTING;
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							}

							data.Types = [];
							let solutions = self.$app.methods.getFromStorage('solutions');
							for (let i = 0; i < solutions.length; i++) {
								data.Types.push(solutions[i].Code);
							}

							break;

						case '5': // DEVICE SOLD


							if (self.CustomPeriod) {
								url = API_URL.GET_REPORT_BY_DEVICESOLD;
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								url = API_URL.GET_REPORT_BY_DEVICESOLD2;
								data.Time = fixedPeriodEl.val();
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}



							break;

						case '6': // IN LOT
							url = API_URL.GET_REPORT_BY_GEOGROUP;
							if (splitByVal == '2') {
								url = API_URL.GET_REPORT_BY_GEOGROUP_COUNT;
								data.splitby = splitByVal;
							}
							data.GroupCodes = assetsGroupEl.val();
							data.Type = 'in';
							break;

						/*case '7': // OFF LOT
							url = API_URL.GET_REPORT_BY_GEOGROUP;
							if (splitByVal == '2') {
								url = API_URL.GET_REPORT_BY_GEOGROUP_COUNT;
								data.splitby = splitByVal;
							}
							data.GroupCodes = assetsGroupEl.val();
							data.Type = 'out';
							break;*/
						case '7': // OFF LOT

							url = API_URL.GET_REPORT_BY_GEOFENCE;
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							}

							data.Pois = assetsGroupEl.val();
							data.IN = 'N';
							data.OUT = 'Y';
							break;



						case '8': // DRIVE OFF
							url = API_URL.GET_REPORT_BY_DRIVEOFF;
							data.GroupCodes = assetsGroupEl.val();
							data.Type = 'in';

							data.Time = fixedPeriodEl.val();
							data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							break;

						case '9': // ALARM
							console.log('99')
							url = API_URL.GET_REPORT_BY_ALERT;
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								if(fixedPeriodEl.val() === 'prev-month') {
									data.DateFrom = moment().subtract(1, 'month').startOf('month').format(window.COM_TIMEFORMAT);
									data.DateTo = moment().subtract(1, 'month').endOf('month').format(window.COM_TIMEFORMAT);	
									data.timePeriodText = data.DateFrom.format('MMMM D, YYYY') + ' - ' + data.DateTo.format('MMMM D, YYYY');
								} else {
									data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
									data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
									data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
								}
								
							}

							 data.Emails = []
							 data.Emails.push(userInfo.UserInfo.Email)
							 //console.log('userInfo.UserInfo', userInfo.UserInfo.Email)

							//  let emailCodes = contactListEl.val();
							//  if (self.ContactListShow) { 
							// 	if (emailCodes.length && self.ContactList) {
							// 		for (let i = emailCodes.length - 1; i >= 0; i--) {
							// 			data.Emails.push(self.ContactList.find(x => x.Code === emailCodes[i]).EMail);
							// 		}
							// 	}
							//  }
							
							data.IsEmail = self.sendByEmail
						 
							data.AsIds = assetsEl.val();
							data.AlertIds = alertListEl.val();
						 	data.isAddress = self.displayAllAddresses;
							data.IsMoving = self.displayNotMovingOnly

							break;

						case '10': // LOT OVERVIEW
							url = API_URL.GET_REPORT_BY_GEOGROUP_COUNT;
							data.GroupCodes = assetsGroupEl.val();
							break;

						case '11': // GEOFENCES OVERVIEW
							url = API_URL.GET_REPORT_BY_GEOFENCE_COUNT;
							data.GetGeofenceCodes = geofencesEl.val();
							break;

						case '12': // TRIP REPORT
							//url = API_URL.GET_REPORT_TRIP;
						
							url = self.selectOptimized ? API_URL.GET_REPORT_TRIP : API_URL.GET_REPORT_TRIP2;
							if (self.sendByEmail) {
								url = API_URL.GET_REPORT_TRIP2
								data.Export = 'PDF'
								data.Emails = []
								let emailCodes = contactListEl.val();
								if (self.ContactListShow) {
									if (emailCodes.length && self.ContactList) {
										for (let i = emailCodes.length - 1; i >= 0; i--) {
											data.Emails.push(self.ContactList.find(x => x.Code === emailCodes[i]).EMail);
										}
									}
									
								}
							}
						
						 
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);							 
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);						 
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();

								//console.log(data.DateFrom, 	data.DateTo)
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							data.Imeis = [];
							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									data.Imeis.push(el.getAttribute('data-imei'));
								}
							});

							data.reportOptionsEnum = 0;
							optionsArry = tripOptionsEl.val();
							if (optionsArry && optionsArry.length) {
								for (let i = optionsArry.length - 1; i >= 0; i--) {
									data.reportOptionsEnum += parseInt(optionsArry[i], 10);
								}
							}


							break;

						case '13': // Servicing OVERVIEW
							url = API_URL.GET_REPORT_SERVICING_OVERVIEW;
							data.ServicesNumbers = intervalServicesEl.val().toString();
							break;

						case '14': // OVERVIEW
							url = API_URL.GET_REPORT_OVERVIEW;

							if (self.CustomPeriod) {
								data.From = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.To = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								//data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.From = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.To = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								//data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							data.Groups = assetsGroupEl.val();
							data.Imeis = [];
							data.Alerts = alertListEl.val();
							data.GetGeofenceCodes = geofencesEl.val();
							data.Features = overviewOptionsEl.val();

							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									data.Imeis.push(el.getAttribute('data-imei'));
								}
							});

							break;

						case '15': // LOT OVERVIEW2
							url = API_URL.GET_REPORT_LOT_OVERVIEW;
							data.Groups = assetsGroupEl.val();
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							break;

						case '16': // FBT REPORT
						
							url = self.selectOptimized ? API_URL.GET_REPORT_TRIP : API_URL.GET_REPORT_TRIP2;

							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							data.Imeis = [];
							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									data.Imeis.push(el.getAttribute('data-imei'));
								}
							});

							data.reportOptionsEnum = 0;
							optionsArry = FBTOptionsEl.val();
							if (optionsArry && optionsArry.length) {
								for (let i = optionsArry.length - 1; i >= 0; i--) {
									data.reportOptionsEnum += parseInt(optionsArry[i], 10);
								}
							}
							data.reportTripPurpose = 'custom';//tripPuposeEl.val();
							break;

						case '17': // FTC REPORT
							url = API_URL.GET_FTC_REPORT_ON_MAIL;
							let offsetZZformat = self.$app.methods.convertTimZoneValToZZformat(userInfo.UserInfo.TimeZone);

							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								//data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().format(window.COM_TIMEFORMAT);
								//data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							//data.Imeis = [];
							data.Assets = [];
							data.extension = 'pdf';
							data.Logo = self.$app.data.AppDetails.logoExternal ? self.$app.data.AppDetails.logoExternal : 'https://client.quikloc8.com/resources/images/login/client/logo.png';
							data.displayTimeZone = self.$app.methods.findTimeZoneNameByOffset(offsetZZformat);

							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									let imei = el.getAttribute('data-imei');
									//data.Imeis.push(imei);
									data.Assets.push({
										IMEI: imei,
										Registration: POSINFOASSETLIST[imei].Registration ? POSINFOASSETLIST[imei].Registration : LANGUAGE.COM_MSG103,
										Make: POSINFOASSETLIST[imei].Describe1 ? POSINFOASSETLIST[imei].Describe1 : LANGUAGE.COM_MSG103,
										Model: POSINFOASSETLIST[imei].Describe2 ? POSINFOASSETLIST[imei].Describe2 : LANGUAGE.COM_MSG103,
										EngineCapacity: POSINFOASSETLIST[imei].EngineCapacity ? POSINFOASSETLIST[imei].EngineCapacity + ' ' + LANGUAGE.ASSET_EDIT_MSG20 : LANGUAGE.COM_MSG103,
										OffroadTaxCredit: POSINFOASSETLIST[imei].OffroadTaxCredit,
									});
								}
							});

							data.Recipients = [];
							let contactCodes = contactListEl.val();

							if (contactCodes.length && self.ContactList) {
								for (let i = contactCodes.length - 1; i >= 0; i--) {
									data.Recipients.push(self.ContactList.find(x => x.Code === contactCodes[i]).EMail);
								}
							}

							break;

						case '18': // ALARM
							url = API_URL.GET_REPORT_FLEET;
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							data.reportOptionsEnum = 0;
							optionsArry = tripOptionsEl.val();
							if (optionsArry && optionsArry.length) {
								for (let i = optionsArry.length - 1; i >= 0; i--) {
									data.reportOptionsEnum += parseInt(optionsArry[i], 10);
								}
							}

							data.AsIds = assetsEl.val();
							data.AlertIds = alertListEl.val();

							break;
						case '19': // PLAYBACK
							if (self.CustomPeriod) {
								data.From = data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.To = data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
								
							} else {
								data.From = data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.To = data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							let imei = '';
							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									imei = el.getAttribute('data-imei');
									return false;
								}
							});

							if (self.ContactListShow) {
								url = API_URL.GET_PLAYBACK_REPORT_ON_MAIL;
								let offsetZZformat = self.$app.methods.convertTimZoneValToZZformat(userInfo.UserInfo.TimeZone);

								data.Assets = [
									{
										Name: POSINFOASSETLIST[imei].Name,
										IMEI: imei,
										Id: POSINFOASSETLIST[imei].Id,
										Make: POSINFOASSETLIST[imei].Describe1,
										Model: POSINFOASSETLIST[imei].Describe2,
										Color: POSINFOASSETLIST[imei].Describe3,
										Year: POSINFOASSETLIST[imei].Describe4,
										Registration: POSINFOASSETLIST[imei].Registration,
										EngineCapacity: POSINFOASSETLIST[imei].EngineCapacity,
									},
								];
								data.extension = "pdf";
								data.Logo = self.$app.data.AppDetails.logoExternal ? self.$app.data.AppDetails.logoExternal : 'https://client.quikloc8.com/resources/images/login/client/logo.png';
								data.displayTimeZone = self.$app.methods.findTimeZoneNameByOffset(offsetZZformat);
								data.Recipients = [];

								let contactCodes = contactListEl.val();
								if (contactCodes.length && self.ContactList) {
									for (let i = contactCodes.length - 1; i >= 0; i--) {
										data.Recipients.push(self.ContactList.find(x => x.Code === contactCodes[i]).EMail);
									}
								}


							} else {
								url = API_URL.GET_PLAYBACK_ARR_WITHOUTADDRESSES;
								if (self.CustomPeriod) {
									data.From = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.To = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
								} else {
									data.From = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.To = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
								}
								data.reportOptionsEnum = 0;
								data.Code = assetsEl.val();
								data.imei = imei;
							}

							break;
						case '36': // STATUS
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
								
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							let imei2 = '';
							assetsEl.find('option').each((i, el) => {
								if (el.selected) {
									imei2 = el.getAttribute('data-imei');
									return false;
								}
							});

							//if (self.ContactListShow) {
								url = API_URL.GET_STATUS_REPORT;
								//let offsetZZformat = self.$app.methods.convertTimZoneValToZZformat(userInfo.UserInfo.TimeZone);


								data.MajorToken =  userInfo.MajorToken;
								data.MinorToken = userInfo.MinorToken;
								data.AsId = POSINFOASSETLIST[imei2].Id
										//DateFrom:'2023-12-19 08:04:24',
										//DateTo:'2023-12-19 14:04:24',
								data.Option = statusOptionEl.val()
								data.MinValue = minValEl.val() // '-14.5'
								data.MaxValue = maxValEl.val() // '50'
									
								
								//data.extension = "pdf";
								//data.Logo = self.$app.data.AppDetails.logoExternal ? self.$app.data.AppDetails.logoExternal : 'https://client.quikloc8.com/resources/images/login/client/logo.png';
								//data.displayTimeZone = self.$app.methods.findTimeZoneNameByOffset(offsetZZformat);
								//data.Recipients = [];

								/*let contactCodes = contactListEl.val();
								if (contactCodes.length && self.ContactList) {
									for (let i = contactCodes.length - 1; i >= 0; i--) {
										data.Recipients.push(self.ContactList.find(x => x.Code === contactCodes[i]).EMail);
									}
								}*/


							//} else {
							
								/*url = API_URL.GET_PLAYBACK_ARR_WITHOUTADDRESSES;
								if (self.CustomPeriod) {
									data.From = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.To = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
								} else {
									data.From = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.To = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT2);
									data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
								}
								data.reportOptionsEnum = 0;
								data.Code = assetsEl.val();
								data.imei = imei;*/
							//}

							break;

						case '25': // Device Installed
							url = API_URL.GET_REPORT_ACTIVATIONS;

							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							data.Types = ["Install"];

							break;

						case '26': // Device Deactivated
							url = API_URL.GET_REPORT_ACTIVATIONS;

							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							data.Types = ["DeActivate"];
							break;

						case '28':
							url = API_URL.GET_REPORT_DRIVER_BEHAVIOUR;

							if (self.CustomPeriod) {
								data.beginTime = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.endTime = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.beginTime = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.endTime = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							/*data.Imeis = [];
							assetsEl.find('option').each((i, el)=>{
								if (el.selected) {
									data.Imeis.push(el.getAttribute('data-imei'));
								}
							});*/

							break;
						case '29': // OVERVIEW
							url = API_URL.GET_REPORT_DRIVER_ID;

							if (self.CustomPeriod) {
								data.From = moment(startDateTimeEl.val(), datepickerFormat).utc().format(window.COM_TIMEFORMAT);
								data.To = moment(endDateTimeEl.val(), datepickerFormat).utc().format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.From = moment().subtract(fixedPeriodEl.val(), 'hours').utc().format(window.COM_TIMEFORMAT);
								data.To = moment().utc().format(window.COM_TIMEFORMAT);
								data.timePeriodText = moment().subtract(fixedPeriodEl.val(), 'hours').format(window.COM_TIMEFORMAT5) + ' - ' + moment().format(window.COM_TIMEFORMAT5);
							}

							data.reportOptionsEnum = 0;
							optionsArry = DriverIDOptionsEl.val();
							if (optionsArry && optionsArry.length) {
								for (let i = optionsArry.length - 1; i >= 0; i--) {
									data.reportOptionsEnum += parseInt(optionsArry[i], 10);
								}
							}
							break;
						case '31': // DRIVER TRIP REPORT
							//url = API_URL.GET_REPORT_TRIP;
						
							url =  API_URL.GET_TASK_OF_DRIVER ;
						
						 

							let contactCode = driverCodeEl.val();

							console.log(contactCode)

	                     	data.MajorToken =  userInfo.MajorToken;
		                    data.MinorToken = contactCode;
						 
							if (self.CustomPeriod) {
								data.from = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);							 
								data.to = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);						 
							//	data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();

								//console.log(data.DateFrom, 	data.DateTo)
							} else {
								data.from = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.to = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							//	data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

				 

							break;
						case '32': // driver trip extended report
							url =  API_URL.GET_TRIP_EXTENDED_REPORT

							data.CustomerCode =  userInfo.MajorToken;

							data.DriverCodes = driverCodeMEl.val()

					 

							if (self.CustomPeriod) {
								data.BeginDate = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);							 
								data.EndDate = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);						 
							//	data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();

								//console.log(data.DateFrom, 	data.DateTo)
							} else {
								data.BeginDate = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.EndDate = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
							//	data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}

							break;
						default: // 4    POWER DISCONNECT
							if (self.CustomPeriod) {
								data.DateFrom = moment(startDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment(endDateTimeEl.val(), datepickerFormat).utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = startDateTimeEl.val() + ' - ' + endDateTimeEl.val();
							} else {
								data.DateFrom = moment().subtract(fixedPeriodEl.val(), 'hours').utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.DateTo = moment().utc().utcOffset(userInfo.UserInfo.TimeZone * -1 + intTz).format(window.COM_TIMEFORMAT);
								data.timePeriodText = fixedPeriodEl[0].options[fixedPeriodEl[0].selectedIndex].text;
							}
							data.AsIds = assetsEl.val();
							data.AlertIds = parseInt(reportTypeEl.val(), 10);
					}
					//console.log(data);
					 self.getReportData(data, url);

				 
					return false;
				});



				var startPicker = new MaterialDatetimePicker({
					el: startDateTimeEl[0],
					format: datepickerFormat,
					openedBy: 'click',
				});
				var endPicker = new MaterialDatetimePicker({
					el: endDateTimeEl[0],
					format: datepickerFormat,
					openedBy: 'click',
				});

				$$(page.$el).on('click', '.startDateTimeWrapper', function () {
					startPicker.open();
				});
				$$(page.$el).on('click', '.endDateTimeWrapper', function () {
					endPicker.open();
				});
				$$(page.$el).on('change', '[name = "FixedPeriod"]', function (el) {
					if (el.target.value == '1') {
						self.$setState({
							CustomPeriod: true,
						});

						startDateTimeEl = page.$el.find('input[name = "StartDateTime"]');
						endDateTimeEl = page.$el.find('input[name = "EndDateTime"]');
						startPicker = new MaterialDatetimePicker({
							el: startDateTimeEl[0],
							format: datepickerFormat,
							openedBy: 'click',
						});
						endPicker = new MaterialDatetimePicker({
							el: endDateTimeEl[0],
							format: datepickerFormat,
							openedBy: 'click',
						});
					} else {
						self.$setState({
							CustomPeriod: false,
						});
					}
				});
				self.clockPickerInit();
				
				
				//console.log('all',$$(page.$el).find('[name = "Assets"]').html())
								
				$$(page.$el).on('change', '[name = "selectAllAssets"]', function (el) {
					self.$setState({
						selectAllAssets: document.getElementById("selectAllAssets").checked,
					});
				})
				$$(page.$el).on('change', '[name = "selectAllDrivers"]', function (el) {
					self.$setState({
						selectAllDrivers: document.getElementById("selectAllDrivers").checked,
					});
				})
				$$(page.$el).on('change', '[name = "selectOptimized"]', function (el) {
					self.$setState({
						selectOptimized: document.getElementById("selectOptimized").checked,
					});
				})
				
				$$(page.$el).on('change', '[name = "selectAllAlarms"]', function (el) {
					self.$setState({
						selectAllAlarms: document.getElementById("selectAllAlarms").checked,
					});
				})
				$$(page.$el).on('change', '[name = "displayAllAddresses"]', function (el) {
					self.$setState({
						displayAllAddresses: document.getElementById("displayAllAddresses").checked,
					});
				})
				$$(page.$el).on('change', '[name = "displayNotMovingOnly"]', function (el) {
					self.$setState({
						displayNotMovingOnly: document.getElementById("displayNotMovingOnly").checked,
					});
				})
				$$(page.$el).on('change', '[name = "SendByEmail"]', function (el) {
					self.$setState({
						sendByEmail: document.getElementById("SendByEmail").checked,
					});
				})
				
				
				/*~
				var listAssetEl = self.$el.find('.custom-smart-select-assets');   
				$$(page.$el).on('change', '[name = "Assets"]', function (el) {
					$(this).find('option').each((i, el) => {
						if(i == 0 && el.selected){
							$(this).find('option').each((i, el) => {
								el.setAttribute('selected','selected')	
							})
							self.$app.smartSelect.close(listAssetEl);
						}else if(i == 0 && !el.selected){						
							$(this).find('option').each((i, el) => {
								el.removeAttribute('selected')	
							})							
							self.$app.smartSelect.close(listAssetEl);
						}
						//setTimeout(()=> self.$app.smartSelect.open(listAssetEl), 2000);
					});
				});
					
				/*var box = $(this).prop('checked');
				var val = $(this).val();
				var all = $(this).parents('ul').find('input[value="all"]');    
				if (val == 'all') {
					$(this).parents('ul').find('input[type="checkbox"]').filter(function (index, el) {
						if (index != 0) {
							 $(el).prop('checked',box).trigger('change');
						}
					});
				} else {
					if (box == false) {
						if (all.prop('checked') == true) {  
							all.prop('checked',false).trigger('change');
							$(this).prop('checked', true).trigger('change');
						}
					}
				}
				});*/

				$$(page.$el).on('change', '[name = "SendByEmail"]', function (el) {
					self.$setState({
						ContactListShow: this.checked,
						//BottomEmailDescriptionShow: this.checked,
					});
				});


				reportTypeEl.on('change', function (el) {

					self.$setState({
						Type: el.target.value
					});

					self.$app.utils.nextFrame(() => {
						var fixedPeriodEl = page.$el.find('[name = "FixedPeriod"]');
						//fix to set Custom Period option in select if it was selected previously and additional datepickers was shown
						if (fixedPeriodEl.length && self.CustomPeriod) {
							fixedPeriodEl.val('1').change();
						}

						if (el.target.value === '18') {
							self.clockPickerInit();
						} else {
							if (self.ClockPickerStart && !self.ClockPickerStart.destroyed) {
								self.ClockPickerStart.destroy();
							}
						}
						self.$setState({
							ContactListShow: false,
							BottomEmailDescriptionShow: false,
						});
						/*if (el.target.value === '17'){
							self.$setState({
								ContactListShow: true
							});
						}else{
							self.$setState({
								ContactListShow: false
							});
						}*/


					})


				});


			},
			pageAfterOut: function () {

			},

			pageBeforeRemove: function () {
				let self = this;

				if (self.DaysOfWeekSelect) {
					self.DaysOfWeekSelect.destroy();
				}
		
			},

		}
	};
</script>