 
<?php $__env->startSection('content'); ?>
	<div id="root" class="container-fluid" :class="{notLoaded: !loaded, thinking: thinking}" v-cloak>
		<div class="row outer-row">
			<div class="col-md-12 head">
				<strong>
					Appointments & FlexTasks - Archive
				</strong>
			</div>
		</div>
		<div class="row query">
			<div class="col-md-3 query-field">
				<select v-model="technician" name="Technician" @change="submitSearch()">
					<option :value="null">
						Any Technician
					</option>
					<option v-for="tech in technicians" :value="tech.id">
						{{tech.name}}
					</option>
				</select>
			</div>
			<div class="col-md-2 query-field">
				<select v-model="year" name="Year" @change="submitSearch()">
					<option :value="null">
						Any Year
					</option>
					<option v-for="y in years()" :value="y">
						{{y}}
					</option>
				</select>
			</div>
			<div class="col-md-2 query-field">
				<select v-model="month" name="Month" v-if="year" @change="submitSearch()">
					<option :value="null">
						Any Month
					</option>
					<option v-for="m in months()" :value="m.integer">
						{{m.string}}
					</option>
				</select>
			</div>
			<div class="col-md-4 query-field">
				<input v-model="search" name="Search" placeholder="Query Keywords" title="Query Keywords (Name, City, Service Information, Special Instructions, and/or Notes)" @keydown.enter="submitSearch()" @change="submitSearch()">
			</div>
			<div class="col-md-1 query-field" style="text-align: right;">
				<i class="fa fa-search" @click="submitSearch()" title="Submit Query"></i>
			</div>
		</div>
		<div class="row results">
			<div class="col-md-12 results-top" v-if="!searched">
				<strong>Complete and submit applicable query parameters above</strong>
			</div>
			<div class="col-md-12 results-top" v-else-if="results.length == 1">
				<strong>1 Result </strong>
				<i v-if="searchParameters">
					(Query Parameters: {{searchParameters}})
				</i>
			</div>
			<div class="col-md-12 results-top" v-else>
				<strong>
					{{resultCount}} Results 
				</strong>
				<span v-if="searchParameters" style="font-size: .8em;">
					<br>Query Filters: {{searchParameters}}
				</span>
				<i v-if="results.length!=resultCount" style="font-size: .8em;">
					<br>Showing the first {{results.length}} results. Query refinement is recommended.
				</i>
			</div>
			<transition-group name="fade" tag="div">
				<div 
					class="col-md-12 result" 
					v-for="result in results"
					@click="selectResult(result)"
					v-if="!showing||(showing.id==result.id)"
					:style="showing?'border: 2px solid #aaa':''"
					:key="'key-'+result.type+'-'+result.id"
				>
					<div class="col-lg-2">
						<p class="result-label">Type</p>
						<p class="result-data">{{result.type}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Status</p>
						<p class="result-data">{{result.status}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Date</p>
						<p class="result-data">{{result.date}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Customer Name</p>
						<p class="result-data">{{result.customer}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">City</p>
						<p class="result-data">{{result.city}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Technician</p>
						<p class="result-data">{{result.technician}}</p>
					</div>
				</div>
				<div 
					class="col-lg-12 showing-container" 
					v-if="showing" 
					@click.self="showing=null"
					key="key-showing-container"
				>
					<div class="col-lg-6 col-lg-offset-3">
						<div class="col-lg-12 details-appointment">
							<div class="details-header">
			    				<div class="details-menu">
			    					<div class="always">
					    				<span class="tab-details active">
					    					Details
					    				</span>
					    			</div>
					    			<div class="sometimes">
					    				<transition name="fade">
					    					<a 
					    						v-if="showing.order" 
					    						:href="showing.order.signed?'/uadmin/orders/receipt/'+showing.order.id:'/uadmin/signatures/add/'+showing.order.id" 
					    						target="_blank" key="linked_order" 
					    						style="color: black; cursor: pointer;" 
					    						:title="showing.order.signed?'Linked Order - Signed':'Linked Order - Signature Needed'"
				    						>
						    					<i class="fa fa-external-link-square" v-if="showing.order.signed"></i>
						    					<i class="fa fa-pencil-square" style="color: #c60032;" v-else></i>
						    				</a>
						    			</transition>
					    				<i class="fa fa-window-close" @click="showing=null" key="close"></i>
				    				</div>
				    			</div>
			    			</div>
							<div class="details">
								<div class="col-lg-6 details-column">
				    				<div class="details-row">
					    				<div class="d-label">
					    					Date
					    				</div>
					    				<div class="d-data">
					    					{{getAppointmentDate(showing)?getAppointmentDate(showing):''}}
					    				</div>
					    			</div>
					    			<div class="details-row" v-if="showing.isAppointment">
					    				<div class="d-label">
											Time
					    				</div>
					    				<div class="d-data">
					    					{{getAppointmentTime(showing)?getAppointmentTime(showing):''}}
					    				</div>
					    			</div>
					    			<div class="details-row" v-if="showing.isAppointment">
					    				<div class="d-label">
					    					Length
					    				</div>
					    				<div class="d-data">
					    					{{getAppointmentLength(showing)?getAppointmentLength(showing):''}}
					    				</div>
					    			</div>

					    			<div class="details-row">
					    				<div class="d-label">
					    					Customer
					    				</div>
					    				<div class="d-data">
					    					{{showing.customer?showing.customer:''}}
					    				</div>
					    			</div>

					    			<div class="details-row">
					    				<div class="d-label">
					    					Phone
					    				</div>
					    				<div class="d-data">
					    					{{showing.phone?showing.phone:''}}
					    				</div>
					    			</div>

					    			<div class="details-row address-row">
					    				<div class="d-label">
					    					Address
					    				</div>
					    				<div class="d-data address">
					    					{{showing.address?showing.address:''}}
					    				</div>
					    			</div>
					    			<div class="details-row location">
					    				<div class="city">
						    				<div class="d-label">
						    					City
						    				</div>
						    				<div class="d-data">
						    					{{showing.city?showing.city:''}}
						    				</div>
						    			</div>
						    			<div class="state">
						    				<div class="d-label">
						    					State
						    				</div>
						    				<div class="d-data">
						    					{{showing.state?showing.state:''}}
						    				</div>
						    			</div>
					    			</div>
					    			<div class="details-row complete-row" style="float: left;">
					    				
					    			</div>
					    		</div>
					    		<div class="col-lg-6 details-column">
					    			<div class="details-row" v-if="showing.isTask">
					    				<div class="d-label">
					    					Type
					    				</div>
					    				<div class="d-data">
					    					{{showing.type?showing.type:''}}
					    				</div>
					    			</div>
					    			<div class="details-row text-row" v-if="showing.isAppointment">
					    				<div class="d-label">
					    					Service Information
					    				</div>
					    				<div class="d-data text">
					    					{{showing.information?showing.information:''}}
					    				</div>
					    			</div>
					    			<div class="details-row text-row" v-if="showing.isAppointment">
					    				<div class="d-label">
					    					Special Instructions
					    				</div>
					    				<div class="d-data text">
					    					{{showing.instructions?showing.instructions:''}}
					    				</div>
					    			</div>
					    			<div class="details-row text-row" v-if="showing.isTask">
					    				<div class="d-label">
					    					Notes
					    				</div>
					    				<div class="d-data text">
					    					{{showing.notes?showing.notes:''}}
					    				</div>
					    			</div>
					    		</div>
							</div>
							<div class="comments-header">
			    				<div class="details-menu">
			    					<div class="always">
					    				<span class="tab-comments active">
				    						History
				    					</span>
					    			</div>
					    			<div class="sometimes"></div>
				    			</div>
			    			</div>
							<div class="comments" key="comments">
			    				<div class="comments-inner" id="comments-list">
			    					<transition-group name="from-bottom" tag="div">
				    					<div class="comments-row" v-for="(piece,order) in showing.history" 
				    						:class="{me:myUserID==piece.userID,system:!piece.userID}" 
				    						:key="piece.userID+piece.timestamp+order"
				    						v-bottom
			    						>
				    						<div class="userName">
				    							{{piece.userName}}
				    						</div>
				    						<div class="timestamp">
				    							{{formatTimestamp(piece.timestamp)}}
				    						</div>
				    						<div class="message-container">
				    							<div class="message">
				    								{{piece.message}}
				    							</div>
				    						</div>
				    					</div>
				    				</transition-group>
			    				</div>
			    			</div>
						</div>								
					</div>
				</div>
				<div 
					class="col-md-12 result" 
					v-for="result in results"
					@click="selectResult(result)"
					v-if="showing&&showing.id!=result.id"
					style="opacity: 0.5;"
					:key="'key-'+result.type+'-'+result.id"
				>
					<div class="col-lg-2">
						<p class="result-label">Type</p>
						<p class="result-data">{{result.type}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Status</p>
						<p class="result-data">{{result.status}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Date</p>
						<p class="result-data">{{result.date}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Customer Name</p>
						<p class="result-data">{{result.customer}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">City</p>
						<p class="result-data">{{result.city}}</p>
					</div>
					<div class="col-lg-2">
						<p class="result-label">Technician</p>
						<p class="result-data">{{result.technician}}</p>
					</div>
				</div>
			</transition-group>
		</div>
	</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<style>
		#theBody{
			max-width: 1600px;
			background-color: #eee;
			margin: auto auto;
			overflow-x: hidden;
			overflow-y: visible;
		}
		#page-wrapper{
			height: auto; 
			overflow-x: hidden;
			overflow-y: visible;
		}
		#root{

		}
		.outer-row{
			padding-top: 15px;
		}
		.head{
			padding-top: 7.5px;
			padding-bottom: 7.5px;
			padding-right: 15px;
			padding-left: 15px;
			margin-bottom: 15px;
			border-bottom: 1px solid #ddd;
			border-radius: 3px;
		}
		.head strong{
			font-size: 1.2em;
		}
		.query{

		}
		.query-field{
			padding-top: 7.5px;
			padding-bottom: 7.5px;
			padding-right: 15px;
			padding-left: 15px;
			margin-bottom: 5px;
			border-radius: 3px;
		}
		.query-field select, .query-field input{
			text-align: left;
			height: 25px;
			background-color: #efefef;
			border-radius: 2px;
			padding-top: 4px;
			padding-bottom: 4px;
			padding-left: 5px;
			padding-right: 5px;
			border-width: 0;
			width: 100%;
		}
		.query-field .fa-search{
			background-color: #efefef;
			border: 0 solid black;
			border-radius: 50%;
			padding: 10px;
			margin-top: -7.5px;
		}
		.query-field .fa-search:hover{
			background-color: #ddd;
			border: 0 solid black;
			border-radius: 50%;
			padding: 10px;
			margin-top: -7.5px;
			cursor: pointer;
		}
		.results{
			border-top: 1px solid #ddd;
			margin-bottom: 15px;
		}
		.results-top{
			margin-top: 15px;
			margin-bottom: 15px;
			padding-top: 7.5px;
			padding-bottom: 7.5px;
			text-align: center;
		}
		.result{
			padding-top: 2.5px;
			padding-bottom: 7.5px;
			padding-right: 15px;
			padding-left: 15px;
			margin-bottom: 5px;
			border-radius: 1px;
			border: 1px solid #ddd;
			cursor: pointer;
		}
		.result-label{
			font-weight: 600;
			font-size: .8em;
			margin-top: 5px;
			margin-bottom: 5px;
		}
		.result-data{
			margin-bottom: 0px;
		}

		.showing-container{
			margin-top: 10px;
			margin-bottom: 15px;
			position: relative;
			overflow: visible;
		}

		.showing-container ::-webkit-scrollbar {
		    width: 5px;
		}
		.showing-container ::-webkit-scrollbar-track {
		    background: #efefef; 
		}
		.showing-container ::-webkit-scrollbar-thumb {
		    background: #ddd;
		}
		.showing-container ::-webkit-scrollbar-thumb:hover {
		    background: #bbb;
		}

		.details-container, .flextask-container{
			padding-left: 0;
			padding-bottom: 15px;
		}

		.details-appointment, .inner-flextask{
			border-right: 0px solid lightgray;
			border-left: 0px solid lightgray;
			border-bottom: 0px solid lightgray;
			border-top: 0px solid lightgray;
			background-color: white;
			font-size: .8em;
			color: white;
			cursor: default;
			box-shadow: 0px 0px 40px 10px rgba(63,84,95,0.3);

			overflow: hidden;
			position: relative;
			transition: height .5s;
			padding-right: 0;
			padding-left: 0;
		}
		.details{
			color: black;
			width: 100%;
			padding-top: 15px;
			padding-bottom: 10px;
			padding-right: 7.5px;
			padding-left: 7.5px;
			font-size: 1.2em;
			position: relative;

			-webkit-user-select: text;       
			-moz-user-select: text;
			-ms-user-select: text;
			user-select: text;
		}
		.flextask-details{
			height: 332px;
		}


		.details-header, .flextask-header{
			width: 100%;
			height: 45px;
			padding-right: 0;
			padding-top: 0;
			padding-bottom: 0;
			padding-left: 15px;
			background-color: #efefef;
			color: black;
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.details-menu, .flextask-header{
			width: 100%;
			text-align: left;
			display: block;
			height: 45px;
			margin-top: 0;
			margin-bottom: 0;
			padding-top: 12px;
			padding-right: 15px;
			font-size: 1.8em;
			overflow-x: hidden;
			overflow-y: hidden;
			position: relative;

		}
		.details-close{
			width: 100%;
			text-align: right;
			display: block;
			height: 26px;
			padding-right: 3px;
			padding-top: 3px;
		}
		.details-close .fa-times{
			cursor: pointer;
			background-color: rgba(0,0,0,0.1);
			border-radius: 50%;
		  	padding-right: 0.585em;
		  	padding-left: 0.6em;
		  	padding-top: 0.56em;
		  	padding-bottom: 0.6em;
		}
		.details-close .fa-times:hover{
			background-color: rgba(255,255,255,0.1);
		}
		.details-menu .tab-details, .flextask-header .tab-details{
			padding-right: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 8px;
			margin-right: 5px;
			margin-left: 0;
			border-bottom: 6px solid transparent;
			height: 42px;
		}
		.details-menu .tab-comments, .flextask-header .tab-comments{
			padding-right: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 8px;
			margin-right: 5px;
			margin-left: 0;
			border-bottom: 6px solid transparent;
			height: 42px;
		}
		.details-menu .tab-edit{
			padding-right: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 8px;
			margin-right: 0;
			margin-left: 0;
			border-bottom: 6px solid transparent;
			height: 42px;
		}
		.details-menu .tab-save{
			padding-right: 5px;
			padding-left: 5px;
			padding-top: 5px;
			padding-bottom: 8px;
			margin-right: 5px;
			margin-left: 0;
			border-bottom: 6px solid transparent;
			height: 42px;
		}
		.details-menu span:hover, .flextask-header span:hover{
			border-bottom: 3px solid transparent;
			padding-bottom: 5px;
			cursor: pointer;
		}
		.details-menu i:hover, .flextask-header i:hover{
			border-bottom: 3px solid transparent;
			padding-bottom: 6px;
			cursor: pointer;
		}
		.details-menu .active, .details-menu .active:hover,
		.flextask-header .active, .flextask-header .active:hover
		{
			border-bottom: 6px solid #0067a0;
			padding-bottom: 2.5px;
			cursor: default;
		}
		.lessActive, .lessActive:hover{
			opacity: 0;
			cursor: default !important;
		}
		.details-menu .always, .flextask-header .always{
			display: inline-block;
			width: calc(50% - 3px);
		}
		.details-menu .sometimes, .flextask-header .sometimes{
			display: inline-block;
			width: calc(50% - 3px);
			text-align: right;
		}
		.details-menu .sometimes .fa, .flextask-header .sometimes .fa{
			padding-right: 5px;
			padding-left: 5px;
			margin-left: 0;
		}

		.details .break{
			height: 10px;
			width: 100%;
		}
		.details .details-row, .edit .details-row{
			overflow: hidden;
			padding-top: 4px;
			padding-bottom: 5px;
		}
		.details .d-label, .edit .d-label{
			
			text-align: left;
			font-size: .8em;
			height: 15px;
			padding-left: 5px;
			color: #666;

		}

		.details .d-data{
			text-align: left;
			height: 27px;
			background-color: white;
			border-radius: 2px;
			padding-top: 4px;
			padding-bottom: 4px;
			padding-left: 5px;
			padding-right: 5px;
			color: black;
			overflow-y: auto;
			border-left: 5px solid #efefef;
		}



		.details .text{
			height: 110.5px;
			overflow-y: auto;
		}
		.details .text-row{
			height: 134.5px;
		}
		.details .address{
			height: 37px;
			overflow-y: auto;
		}
		.details .location{
			max-height: 51px;
		}

		.details .address-row{
			height: 63px;
		}
		.details .details-column, .edit .details-column{
			padding-right: 7.5px;
			padding-left: 7.5px;
		}
		.details-row .city
		{
			display: inline-block;
			width: calc(60% - 1.9px);

		}
		.details-row .state
		{
			display: inline-block;
			width: calc(40% - 1.9px);
		}
		.complete-row
		{
			
		}

		.flextask-details .text, .flextask-edit .text{
			height: 143px;
		}
		.flextask-details .text-row
		{
			height: 167px;
		}
		.flextask-edit .text-row
		{
			height: 167px;
		}

		.comments-header, .flextask-comments-header{
			width: 100%;
			height: 45px;
			padding-right: 0;
			padding-top: 0;
			padding-bottom: 0;
			padding-left: 15px;
			color: black;
			overflow-x: hidden;
			overflow-y: hidden;
			position: relative;

			background-color: #efefef;
		}

		.comments-header .details-menu, .flextask-comments-header{
			width: 100%;
			text-align: left;
			display: block;
			height:45px;
			margin-top: 0;
			margin-bottom: 0;
			padding-top: 12px;
			padding-right: 15px;
			font-size: 1.8em;
			overflow-x: hidden;
			overflow-y: hidden;
			position: relative;
		}
		.flextask-comments-header{
			top: 332px;
		}

		.comments{
			color: black;
			width: 100%;
			padding-top: 0;
			padding-bottom: 0;
			padding-right: 0;
			padding-left: 0;
			font-size: 1.2em;
			position: relative;
			overflow: auto;
		}
		.comments .comments-inner{
			overflow-y: auto;
			width: 100%;
			padding-right: 15px;
			padding-left: 15px;
			padding-top: 15px;
			padding-bottom: 15px;

			-webkit-user-select: text;       
			-moz-user-select: text;
			-ms-user-select: text;
			user-select: text;
		}
		.flextask-history{
			top: 422px;
		}
		.flextask-history .comments-inner{

		}
		.comments-row{
			width: 100%;
			text-align: left;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		.comments-row .timestamp{
			font-size: 0.8em;
			color: #555;
			padding-right: 8px;
			padding-left: 8px;
			display: inline-block;
			width: calc(40% - 5px);
			text-align: center;
			margin-right: 30%;
			margin-left: 0;
		}
		.comments-row .userName{
			font-size: 0.7em;
			color: #aaa;
			padding-right: 8px;
			padding-left: 8px;
			display: inline-block;
			width: 30%;
		}
		.comments-row .message-container{
			width: 65%;
			display: inline-block;
			margin-right: 35%;
			margin-left: 0;
		}
		.comments-row .message-container .message{
			padding-right: 8px;
			padding-left: 8px;
			padding-top: 4px;
			padding-bottom: 4px;
			background-color: #efefef;
			border-radius: 2px;
			border: 0 solid #ddd;
			max-width: 100%;
			float: left;
		}
		.comments .me .timestamp{

		}
		.comments .me .userName{
			opacity: 0;
		}
		.comments .me .message-container{
			margin-left: 35%;
			margin-right: 0;
		}
		.comments .me .message-container .message{
			float: right;
			background-color: #009e00;
			color: white;
		}
		.comments .system{
			padding-bottom: 0;
		}
		.comments .system .message-container .message,
		.comments .system .timestamp{

		}
		.comments .system .message-container{
			width: 100%;
			margin-right: 0;
			margin-left: 0;
		}
		.comments .system .message-container .message{
			width: 100%;
			text-align: center;
			color: #aaa;
			background-color: transparent;
			padding-bottom: 0;
			padding-top: 0;
		}

		.comments .comments-add{
			padding-right: 20px;
			padding-left: 15px;
			width: 100%;
			height: 45px;
		}
		.comments .comments-add input{
			width: calc(100% - 50px);
			height: 30px;
			margin-top: 7.5px;
			margin-bottom: 7.5px;
			margin-left: 0;
			margin-right: 5px;
			padding-right: 8px;
			padding-left: 8px;
			padding-top: 4px;
			padding-bottom: 4px;
			background-color: #efefef;
			border-radius: 2px;
			border: 0 solid #ddd;
			display: inline-block;
		}
		.comments .comments-add input:hover{
			outline: none;
			border: 1px solid #ddd;
			padding-top: 3px;
			padding-bottom: 3px;
			padding-left: 7px;
			padding-right: 7px;
			cursor: text;
		}
		.comments .comments-add input:focus{
			outline: none;
			border: 1px solid #009e00;
			padding-top: 3px;
			padding-bottom: 3px;
			padding-left: 7px;
			padding-right: 7px;
			cursor: text;
		}
		
		.comments .comments-add span{
			width: 40px;
			height: 30px;
			text-align: center;
			margin-top: 6px;
			margin-bottom: 9px;
			margin-right: 0;
			margin-left: 0;
			padding-right: 8px;
			padding-left: 7px;
			padding-top: 5px;
			padding-bottom: 5px;
			border-radius: 2px;
			display: inline-block;
			background-color: transparent;
			color: black;
			vertical-align: middle;
			border: 1px solid #ddd;
		}
		.comments .comments-add span:hover{
			background-color: #fafafa;
		}



		[v-cloak] > *{
			display: none;
		}
		[v-cloak]::before, .notLoaded, .thinking{ 
			content: " ";

			position: relative;

			overflow-y: hidden;
			overflow-x: hidden;

			width: 100%;
			height: 291px;
			height: calc(100vh - 51px);

			background-color: white;
			background-image: url("<?php echo e(asset('images/loading.gif')); ?>");
			background-size: auto;
			background-repeat: no-repeat;
			background-position: center;
		}

		.thinking > *{
			opacity: 0.4;
		}

		.thinking{ 
			content: " ";

			position: relative;

			overflow-y: hidden;
			overflow-x: hidden;

			width: 100%;
			height: 291px;
			height: calc(100vh - 51px);

			background-color: white;
			background-image: url("<?php echo e(asset('images/loading.gif')); ?>");
			background-size: auto;
			background-repeat: no-repeat;
			background-position: center;
		}

		.fade-enter-active {
		  	transition: all .5s;
		}
		.fade-leave-active {

		}
		.fade-enter, .fade-leave-to {
		  	opacity: 0;
		}
		.fade-move{
			transition: transform .5s;
		}
	</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
	
	<script>

		var app = new Vue({
			el: "#root",
			data: {
				startup: {
					technicians: false
				},
				loading: {
					search: 0,
					single: 0
				},
				technicians: [],
				technician: null,
				year: null,
				month: null,
				searched: false,
				search: null,
				searchParameters: null,
				resultCount: 0,
				results: [],
				selected: null,
				showing: null,
				serverTime: new Date(<?php echo e(strtotime("now")); ?>*1000),
				myUserID: <?php echo e(Auth::user()->id); ?>,
				myName: '<?php echo e(Auth::user()->name); ?>'
			},
			watch: {
				year: function(after,before)
				{
					if(before&&!after)
					{
						this.month = null;
					}
				}
			},
			computed: {
				loaded: function()
				{
					if(this.startup.technicians)
					{
						return true;
					}
					return false;
				},
				thinking: function()
				{
					for(l in this.loading)
					{
						if(this.loading[l])
						{
							return true;
						}
					}
					return false;
				}
			},
			methods: {
				years: function(){
					let years = [];

					let start = 2019;
					let current = this.serverTime.getFullYear();

					for(i=start;i<=current;i++)
					{
						years.push(i);
					}

					return years;
				},
				months: function(){
					return [
						{
							integer: 1,
							string: 'January'
						},
						{
							integer: 2,
							string: 'February'
						},
						{
							integer: 3,
							string: 'March'
						},
						{
							integer: 4,
							string: 'April'
						},
						{
							integer: 5,
							string: 'May'
						},
						{
							integer: 6,
							string: 'June'
						},
						{
							integer: 7,
							string: 'July'
						},
						{
							integer: 8,
							string: 'August'
						},
						{
							integer: 9,
							string: 'September'
						},
						{
							integer: 10,
							string: 'October'
						},
						{
							integer: 11,
							string: 'November'
						},
						{
							integer: 12,
							string: 'December'
						}
					]
				},
				submitSearch: function()
				{
					if(!this.loaded || this.thinking)
					{
						//alert('Please wait...');
						return;
					}

					this.searched = true;
					this.showing = null;
					this.loading.search++;

					axios.post('/admin/appointments/archive/search', {
						technician: this.technician,
						year: this.year,
						month: this.month,
						search: this.search
				    })
				    .then(response => {
				    	let data = response.data;
				    	if(data.success)
				    	{
				    		this.results = data.results;

				    		this.resultCount = data.count;

				    		if(data.parameters.length)
				    		{
				    			let parameterCount = 0;

				    			this.searchParameters = '';

				    			for(p in data.parameters)
				    			{
				    				parameterCount++;

				    				this.searchParameters += data.parameters[p];

				    				if(parameterCount != data.parameters.length)
				    				{
				    					this.searchParameters += ', ';
				    				}
				    			}
				    		}
				    		else
				    		{
				    			this.searchParameters = null;
				    		}	
				    	}
				    	else
				    	{
				    		alert(data.message);
				    	}
				    	this.loading.search--;
				    })
				    .catch(error => {
						console.log(error);
						alert(error);
						self.location = window.location.href + '' + this.pointer;

					});
				},
				selectResult: function(result)
				{
					this.selected = {
						id:result.id,
						type:result.type
					}

					if(this.showing && result.id == this.showing.id)
					{
						this.showing = null;
						return;
					}

					this.loading.single++;

					axios.get(
						'/admin/appointments/single/get.json?'+
						'id='+this.selected.id+
						'&type='+this.selected.type
					)
					.then(response => {
						let data = response.data;

						console.log(data);

						if(data.success)
						{
							if(data.data.type == 'Appointment')
							{
								this.showing = data.data.appointment;
								this.showing.isAppointment = true;
								this.showing.isTask = false;
							}

							if(data.data.type == 'FlexTask')
							{
								this.showing = data.data.task;
								this.showing.isAppointment = false;
								this.showing.isTask = true;
							}
						}
						else
						{
							alert(data.message);
						}
						


						this.loading.single--;
					})
					.catch(error => {
						console.log(error);
						alert(error);
					});
				},
				getAppointmentDate(appointment)
				{
					let date = new Date(appointment.intDate);

					return date.toDateString();
				},
				getAppointmentTime(appointment)
				{
					let time = appointment.time;
					let hour = appointment.time;
					let minute = '00';
					let half = 'am';
					if(Math.floor(time)!=time)
					{
						minute = '30';
						hour = Math.floor(time);
					}
					if(hour >= 12)
					{
						half = 'pm';
					}
					if(hour >= 13)
					{
						hour = hour-12
					}
					return hour+':'+minute+' '+half;
				},
				getAppointmentLength(appointment)
				{
					let length = appointment.length;

					if(length <= 0)
					{
						return '';
					}

					let hours = Math.floor(length);
					let minutes = 0;
					if(hours!=length)
					{
						minutes = 30;
					}
					if(hours==0 && minutes)
					{
						return minutes+' minutes';
					}
					else if(hours==1 && !minutes)
					{
						return hours+' hour';
					}
					else if(hours==1 && minutes)
					{
						return hours+' hour, '+minutes+' minutes';
					}
					else
					{
						if(minutes)
						{
							return hours+' hours, '+minutes+' minutes';
						}
						else
						{
							return hours+' hours';
						}
					}
				},
				formatTimestamp: function(timestamp)
				{
					let days = [
						'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
					];
					let months = [
						'Jan','Feb','Mar','Apr','May','Jun','Jul',
						'Aug','Sep','Oct','Nov','Dec'
					];
					let datetime = new Date(timestamp);

					let yesterday = new Date(this.serverTime.getTime()-(1000*60*60*24));

					let year = datetime.getFullYear();
					let month = datetime.getMonth();
					let day = datetime.getDate();
					let weekday = datetime.getDay();
					let hour = datetime.getHours();
					let minute = datetime.getMinutes();
					let second = datetime.getSeconds();
					let half = 'AM';

					if(hour >= 12)
					{
						half = 'PM';
					}

					if(hour == 0)
					{
						hour = 12;
					}
					else if(hour > 12)
					{
						hour = hour - 12;
					}

					let time = hour+':'+(minute+'').padStart(2,'0')+' '+half;

					let date = '';

					if(datetime.toDateString() == this.serverTime.toDateString())
					{
						date = 'Today';
					}
					else if(datetime.toDateString() == yesterday.toDateString())
					{
						date = 'Yesterday';
					}
					else
					{
						date = days[weekday]+', '+months[month]+' '+day+', ';

						if(year != this.serverTime.getFullYear())
						{
							date += year;
							time = '';
						}
					}

					return date + ' ' + time;
				},
				setUrl: function(newPath)
				{
					let newTitle = 'uAdmin Appointments - Archive';
					document.title = newTitle;
					window.history.pushState({url: newPath}, newTitle, newPath);
				}
			},
			created(){
				axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

				this.loading.technicians++;
				axios
					.get('/admin/appointments/technicians/historical/get.json')
					.then(response => {
						this.technicians = response.data;
						this.startup.technicians = true;

						let rTech = <?php echo e($rTech); ?>;

						if(rTech)
						{
							for(t in this.technicians)
							{
								if(rTech == this.technicians[t].id && !this.technician)
								{
									this.technician = rTech;
									this.year = this.serverTime.getFullYear();
								}
							}
							this.setUrl('/uadmin/appointments/archive/');
						}
					})
					.catch(error => {
						console.log(error);
						alert('Something went wrong...');
					});
			},
			mounted(){
				console.log('Server Time: '+this.serverTime);
				console.log('Window: '+window.innerWidth+'px wide, '+window.innerHeight+'px high');
			},
			directives: {
				bottom: {
		  			inserted: function(el,binding,vnode)
		  			{
		  				el.parentElement.parentElement.scrollTop = el.parentElement.parentElement.scrollHeight;
		  			}
		  		}
			}
		});

	</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>