<!DOCTYPE html>
<html lang="en">
<script src="app/libs/requirejs/require.js"></script>
<body>
	<div ng-controller="QueryController" id="cs-body">
	  <div ng-show="showUI">
		<!-- Ark toolbar -->
		<ark-toolbar config="toolbarItems"></ark-toolbar>
		<ark-toaster toaster-options="{'time-out': 4000, 'width': 22.5}"></ark-toaster>
		
		<!-- Search bar -->
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 100%">
				<div>
					<form class="form-horizontal" role="form">
						<time-filter></time-filter>
						<span class="help-block" id="context-help"
							style="margin-left: 10px"
							ng-style="{'visibility': multipleResults?'hidden':'visible'}"
							ng-bind="queryFeedback"></span>
					</form>
				</div>
			</div>
		</div>

		<!-- if multiple customers exist, shows table so user can select the customer they want -->
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="panel-default" ng-if="multipleResults && !searching"
					style="padding-left: 15px; padding-bottom: 10px;">
					<h3 style="margin-top: 0px">Which Of these Customers are you
						referring to?</h3>
					<table class="table table-default disambiguate">
						<thead>
							<tr>
								<!-- All columns -->
								<th ng-repeat="property in customerProperties" class="clickable"
									ng-if="property.showInTable !== 'no' && property.showProperty">
									<strong id="">{{property.value}}</strong>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="customer in customerList"
								ng-click="itemClicked(customer)">
								<td class="" ng-repeat="property in customerProperties"
									ng-if="property.showInTable !== 'no' && property.showProperty">
									{{customer[property.label]}}</td>
							</tr>
						</tbody>
					</table>
					<button class="btn btn-primary close-table" ng-click="closeTable()">Cancel</button>
				</div>
			</div>
		</div>

		<div class="row" ng-if="!multipleResults" style="margin-left: 16px; height: 215px;">
			<div ng-show="tabData.treeData">	
				<div style="display: inline-block;" class="input-container">
					<span class="ark-dropdown dropdown pull-left" style="position: absolute; left: 8px; top: 2px; font-size: 15px" is-open="searchDropdown">
						<span class="ark-dropdown-toggle clickable"
			              ng-class="{'search-dropdown-active-blue': searchDropdown}"> 
			              <span class="fonticon icon-search"></span> 
			              <span class="fonticon icon-dropdown-arrow" style="font-size: 10px; color: inherit;"></span>
			            </span>
						<ul class="dropdown-menu" role="menu">
			              <li
			                ng-click="$event.stopPropagation(); searchParameters.exactValue = !searchParameters.exactValue"
			                class="search-dropdown-item">
			                <input type="checkbox" class="ark-checkbox" ng-model="searchParameters.exactValue"><span></span>Exact Value
			              </li>
			            </ul>
			        </span>
			        <input class="form-control filter-search-box left-icon right-icon" ng-disabled="task" style="display: inline-block;" type="text" placeholder="Search" ng-model="$parent.searchText">
					<span class="icon-close search-box-cancel close-span ark-fonticon" ng-show="searchText.length" ng-click="resetSearchFilter()" style="color: inherit"></span>
				</div>
				<button type="button" class="btn btn-primary" ng-disabled="task" id="cs-filter-btn" ng-click="openFilterModal()">Filter</button>
				<div ng-controller="TreeController" style="display: inline-block; float: right;">
					<!-- Sorting row -->
					<div class="row" style="text-align: right;">
						<label class="control-label" for="context-query" style="margin-left: 6px;vertical-align:super">Sort by: </label>
						<div style="display: inline-block; margin-right: 15px;">
							<div class="btn-group time-filter-select bootstrap-select">
								<button ark-select type="button"
									class="btn btn-default ark-dropdown-toggle selectpicker"
									ng-model="tabData.sortType"
									ng-disabled="task"
									ark-options="option for option in ['Time Started', 'Time Completed']"
									placeholder="Time Started"></button>
							</div>
							<div class="btn-group bootstrap-select">
								<button ark-select type="button"
									class="btn btn-default ark-dropdown-toggle selectpicker"
									ng-model="tabData.sortOrder"
									ng-disabled="task"
									ark-options="option for option in ['Earliest First', 'Latest First']"
									placeholder="Latest First"></button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div><label ng-show="csFilters.isFiltering">Filter Applied: <span ng-bind="csFilters.filterString" style="color: #666F7A; display: inline-block"> </span></label></div>
			<div class="clearfix"></div>
			<!--Display table-->
			<div class="list-container" ng-if="state || task || tabData.customerId || tabData.data.items || states.length > 0 || tasks.length > 0" style="border-right: 1px solid #DEDADA">
				<h3>Services <span class="icon-add" ng-click="createItem('Service')"></span></h3> 
				<div style="overflow: auto; height: 130px; width: 100%;">
					<p 	ng-repeat-start="service in tabData.data.items" 
						ng-click="selectService(service)" 
						ng-class="clickedService == service ? 'activeService': ''"
						ng-if="!searchFilterIsolated && 
						       ((!isSearching && (!csFilters.isFiltering || (csFilters.selectFilter == 'Service' && service.filterShow))) ||
						        (isSearching && service.searchShow && (!csFilters.isFiltering || service.filterShow)))">
						{{service.entityString}}
						<span class="icon-close" ng-click="tabData.delete(service)"></span>
					</p>
					<div class="clearfix" ng-repeat-end></div>

					<!-- when searching and a service is selected. Removes all other services from view expect for the clicked one -->
					<p 
						class="activeService"
						ng-click="selectService(clickedService)" 
						ng-if="searchFilterIsolated && clickedService">
						{{clickedService.entityString}} 
						<span class="icon-close" ng-click="tabData.delete(clickedService)"></span>
					</p>
					<div class="clearfix" ng-repeat-end></div>


				</div>
			</div>
			<div class="list-container" ng-if="state || task || tabData.customerId || tabData.data.items || states.length > 0 || tasks.length > 0" style="border-right: 1px solid #DEDADA">
				<h3>States <span class="icon-add" ng-click="createItem('State')"></span></h3> 
				<div style="overflow: auto; height: 130px; width: 100%;">

					<!-- if search filter is not used -->
					<p 	ng-repeat-start="state in flatSort(clickedService.states)" 
						ng-click="selectState(state)" 
						ng-class="clickedState == state ? 'activeService':''"
						ng-if="!isSearching">
						{{state.entityString}} 
					</p>
					<div class="clearfix" ng-repeat-end></div>
					
					<!-- for when state filter and/or search is used -->
					<p 	ng-repeat-start="filterState in flatSort(states)" 
						ng-click="selectState(filterState)" 
						ng-class="clickedState == filterState ? 'activeService':''"
						ng-if="(csFilters.isFiltering || isSearching) && !searchFilterIsolated &&
						       ((!isSearching && (!csFilters.isFiltering || (csFilters.selectFilter == 'State' && filterState.filterShow))) || 
						        (isSearching && filterState.searchShow && (!csFilters.isFiltering || filterState.filterShow)))">
						{{filterState.entityString}} 
					</p>
					<div class="clearfix" ng-repeat-end></div>

					<!-- when searching and a state is selected -->
					<p class="activeService"
						ng-click="selectState(clickedState)" 
						ng-if="searchFilterIsolated && clickedState && !clickedService">
						{{clickedState.entityString}} 
					</p>

					<!-- for searching by state id -->
					<p ng-click="selectState(state)" 
						ng-class="clickedState == state ? 'activeService':''"
						ng-if="!searchFilterIsolated &&
						       ((!isSearching && (!csFilters.isFiltering || (csFilters.selectFilter == 'State' && state.filterShow))) || 
						        (isSearching && state.searchShow && (!csFilters.isFiltering || state.filterShow)))">
						{{state.entityString}} 
					</p>
					
					<div class="clearfix" ng-repeat-end></div>
				</div>
			</div>
			<div class="list-container" ng-if="state || task || tabData.customerId || tabData.data.items || states.length > 0 || tasks.length > 0">
				<h3>Tasks <span class="icon-add" ng-click="createItem('Task')" ng-show="!tabData.node.task_id"></span></h3> 
				<div style="overflow: auto; height: 130px; width: 100%;">

					<!-- for service level tasks, when service is clicked -->
				    <p 	ng-repeat-start="task in flatSort(clickedService.tasks)" 
						ng-click="selectTask(task)" 
						ng-class="clickedTask == task ? 'activeService':''"
						ng-if="!isSearching && !task.state_id && !clickedState">
						{{task.entityString}} 
					</p>
					<div class="clearfix" ng-repeat-end></div>

					<!-- for state level tasks, when state is clicked -->
					<p 	ng-repeat-start="task in flatSort(clickedState.items)" 
						ng-click="selectTask(task)" 
						ng-class="clickedTask == task ? 'activeService':''"
						ng-if="!isSearching">
						{{task.entityString}} 
					</p>
					
					<div class="clearfix" ng-repeat-end></div>
					
					<!-- for when filter/search is being used -->
					<p 	ng-repeat-start="filterTask in flatSort(tasks)" 
						ng-click="selectTask(filterTask)" 
						ng-class="clickedTask == filterTask ? 'activeService':''"
						ng-if="(csFilters.isFiltering || isSearching) && !searchFilterIsolated &&
						       ((!isSearching && (!csFilters.isFiltering || (csFilters.selectFilter == 'Task' && filterTask.filterShow))) || 
						        (isSearching && filterTask.searchShow && (!csFilters.isFiltering || filterTask.filterShow)))">
						{{filterTask.entityString}} 
					</p>
					<div class="clearfix" ng-repeat-end></div>

					<!-- for searching by task id -->
					<p  ng-click="selectTask(task)" 
						ng-class="clickedTask == task ? 'activeService':''"
						ng-if="!searchFilterIsolated &&
							   ((!isSearching && (!csFilters.isFiltering || (csFilters.selectFilter == 'Task' && task.filterShow))) ||
							    (isSearching && task.searchShow && (!csFilters.isFiltering || task.filterShow)))">
						{{task.entityString}} 
					</p>

				</div>
			</div>

		</div>

		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width: 50%; margin-top: -10px; border-right: 1px solid #DEDADA;">
			<div class="tab-body" ng-if="!multipleResults && !searching && tabData.selectedItem">
				<div ng-if="tabData.selectedItem === 'Task' && !tabData.node.task_id">
					<h3 style="margin-left: 0px;">Task Selection</h3>
					<p style="display: inline-block">Select Task Type </p>
					<button type="button"
						class="btn btn-default btn-dropdown ark-dropdown-toggle entitySelectionButton"
						ng-model="selectedItem" data-toggle="dropdown"> {{tabData.entityLabel ? tabData.entityLabel : '-'}}
						<span class="icon-dropdown-arrow"></span>
					</button>
					<ul class="dropdown-menu" role="menu" style="top: 72px; left:124px; width:240px;">
						<li ng-repeat="att in tabData.taskAttributes"
							ng-click="selectEntityType(att)"><a
							href>{{att.label}}</a></li>
					</ul>
				</div>
				<div ng-if="tabData.selectedItem === 'Task' && tabData.entityType"
					class="form-container">
					<h3>New Task - {{tabData.entityLabel}} for {{getAttribute()[tabData.type].label}}</h3>
					<div ng-controller="TaskController">
						<createitem></createitem>
					</div>
				</div>
				
				<div ng-if="tabData.selectedItem === 'State'">
					<h3 style="margin-left: 0px;">State Selection</h3>
					<p style="display: inline-block">Select State Type </p>
					<button type="button"
						class="btn btn-default btn-dropdown ark-dropdown-toggle entitySelectionButton"
						ng-model="selectedItem" data-toggle="dropdown">{{tabData.entityLabel ? tabData.entityLabel : '-'}}
						<span class="icon-dropdown-arrow"></span>
					</button>
					<ul class="dropdown-menu" role="menu" style="top: 72px; left:124px; width:240px;">
						<li ng-repeat="att in tabData.stateAttributes"
							ng-click="selectEntityType(att)"><a
							href>{{att.label}}</a></li>
					</ul>
				</div>
				<div
					ng-if="tabData.selectedItem === 'State' && tabData.entityType"
					class="form-container">
					<h3>New State - {{tabData.entityLabel}} for {{getAttribute()[tabData.type].label}}</h3>
					<div ng-controller="StateController">
						<createitem></createitem>
					</div>
				</div>
				
				<div ng-if="tabData.selectedItem === 'Service'">
					<h3 style="margin-left: 0px;">Service Selection</h3>
					<p style="display: inline-block">Select Service Type </p>
					<button type="button"
						class="btn btn-default btn-dropdown ark-dropdown-toggle entitySelectionButton"
						ng-model="selectedItem" data-toggle="dropdown">{{tabData.entityLabel ? tabData.entityLabel : '-'}}
						<span class="icon-dropdown-arrow"></span>
					</button>
					<ul class="dropdown-menu" role="menu" style="top: 72px; left:124px; width:240px;">
						<li ng-repeat="att in tabData.serviceAttributes"
							ng-click="selectEntityType(att)">
							<a href>{{att.label}}</a>
						</li>
					</ul>
				</div>
				<div
					ng-if="tabData.selectedItem === 'Service' && tabData.entityType"
					class="form-container">
					<h3>New Service - {{tabData.entityLabel}}</h3>
					<div ng-controller="ServiceController">
						<createitem></createitem>
					</div>
				</div>
				
				<div
					ng-if="tabData.selectedItem === 'Complete' && !tabData.completed"
					class="form-container">
					<form class="form-horizontal" role="form"
						ng-controller="CompleteController">
						<div class="form-group">
							<propertylist></propertylist>
						</div>
						<div class="form-group"
							style="margin-left: 15px; margin-bottom: 0px">
							<button type="button" class="btn btn-default"
								ng-click="complete(); tabData.selectedItem = null">Complete
								{{tabData.node.type}}</button>
							<div class="btn btn-default"
								ng-click="tabData.selectedItem = null">Cancel</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Table that gives brief info about service/state/task -->
		<div style="width: 50%; float: right; padding-right: 20px; margin-top: -10px;">
			<div ng-show="tabData.id"
				style="margin-left: 16px; padding-bottom: 32px;">
				<table class="table table-default" ng-if="tabData.node">
					<tbody>
						<h3 style="text-align: center;">General Information</h3>
						<tr ng-if="tabData.customerId && tabData.node.type === 'Service'">
							<th>{{tabData.isAnon ? 'Anonymous ID' : 'Customer ID' }}</th>
							<td>{{tabData.customerId}}</td>
						</tr>
						
						<tr>
							<th>ID</th>
							<td>{{tabData.id}}</td>
						</tr>
						<tr>
							<th>{{tabData.node.type}} Type</th>
							<td ng-if="!isString(tabData.type)"
								ng-bind="getAttribute()[tabData.type].label + ' (' + tabData.type  + ')'"></td>
							<td ng-if="isString(tabData.type)"
								ng-bind="getAttribute()[tabData.type].label"></td>
						</tr>
						<tr>	
							<th>Time Started</th>
							<td>{{tabData.timeStarted}}</td>
						</tr>
						<tr>	
							<th>Completed</th>
							<td>
								<span class="icon-checkmark-bold" ng-if="tabData.completed"></span>
								<div class="btn-group dropdown-group" ng-if="!tabData.completed && tabData.node">
									<div class="btn btn-default btn-dropdown ark-dropdown-toggle" 
										 ng-click="tabData.selectedItem = 'Complete'">Complete</div>
								</div>
							</td>
						</tr>
						<tr>	
							<th ng-if="tabData.completed">Time Completed</th>
							<td ng-if="tabData.completed">{{tabData.timeCompleted}}</td>	
						</tr>
					</tbody>
				</table>
				<table class="table table-default">
					<tbody>
						<h3 style="text-align: center;">Business Attributes</th>
						<tr ng-repeat="(key, value) in tabData.node.started" ng-if="(tabData.node.started || tabData.node.completed)">
							<th ng-if="key !== 'timestamp' && key.substr(-8) != '_display'"
								ng-bind="formatKey(key, '_', ' ') + ' (Started)'"></th>
								
							<td
								ng-if="key !== 'timestamp' && key.substr(-8) != '_display'">{{tabData.node.started[key + '_display'] || value}}</td>
						</tr>
						<tr ng-repeat="(key, value) in tabData.node.completed" ng-if="(tabData.node.started || tabData.node.completed)">
							<th ng-if="key !== 'timestamp' && key.substr(-8) != '_display'"
								ng-bind="formatKey(key, '_', ' ') + ' (Completed)'"></th>
								
							<td
								ng-if="key !== 'timestamp' && key.substr(-8) != '_display'">{{tabData.node.completed[key + '_display'] || value}}</td>
						</tr>
						<tr ng-repeat="(key, value) in tabData.node.customstart" ng-if="tabData.node.customstart">
							<th ng-if="key !== 'timestamp'"
								ng-bind="formatKey(key, '_', ' ') + ' (Extension)'"></th>
							<td>{{value}}</td>
						</tr>
						<tr ng-repeat="(key, value) in tabData.node.customcomplete" ng-if="tabData.node.customcomplete">
							<th ng-if="key !== 'timestamp'"
								ng-bind="formatKey(key, '_', ' ') + ' (Extension)'"></th>
							<td>{{value}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="row" ng-class="{spacer: showHistory === true}"></div>
		<div class="history" ng-class="{in: showHistory === true}">
			<div class="panel heading">
				<h4>HTTP Request History</h4>
				<span class="icon-close"
					style="margin-right: 6px; float: right; cursor: pointer;"
					ng-click="showHistory = false;"></span>
			</div>
			<table class="http-history-table table table-default table-hover">
			    <thead>
			      <tr class="tableheader">
			        <th style="width: 20px"></th>
			        <th>Action</th>
		            <th>Path</th>
		            <th>Data</th>
		            <th>Method</th>
		            <th>Status</th>
		            <th>Time</th>
		            <th style="width: 17px; padding: 0"></th>
			      </tr>
			    </thead>
			</table>
			<div id="http-history-table-container">
			  <table class="http-history-table table table-default table-hover">
 		        <tbody>
		              <tr ng-repeat="request in tabData.ajaxHistory.slice().reverse()">
		                <td style="width: 20px" ng-click="request.selected = !request.selected">
		                    <span ng-show="!request.selected" class="fonticon icon-iw-circle-no-chevron-up"></span>
		                    <span ng-show="request.selected" class="fonticon icon-iw-circle-no-chevron-down"></span>
		                </td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">{{request.action}}</div></td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">{{request.path}}</div></td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">
		                    <span ng-if="request.selected">{{request.data}}</span>
		                    <span ng-if="!request.selected">...</span>
		                </div></td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">{{request.method}}</div></td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">{{request.status}}</div></td>
		                <td><div ng-class="{'http-history-col-unselected': !request.selected}">{{request.time}}</div></td>
		              </tr>
		        </tbody>
		      </table>
		    </div>
		</div>
	  </div>
	  <h2 ng-show="showUI === false" style="text-align: center">{{errorBALabel}}</h2>
	</div>
</body>
</html>
