 
<?php $__env->startSection('content'); ?>
	<div id="root" class="container-fluid" @mouseup="mouseUp" :class="{notLoaded: !loaded, thinking: thinking&&!showing&&!task}" v-cloak>
		<div class="row" v-if="mobile&&!showing&&!task" style="padding-top: 15px;">
			<div class="col-xs-12 mobile-sub-menu">
				<a 
					class="col-xs-6 mobile-sub-menu-item" 
					@click="
						mobileAppointments=true; 
						mobileFlexTasks=false; 
						lowlightTasks();
						movePointer(-1*pointer)
					" 
					:class="{active:mobileAppointments}"
				>
					Appointments
				</a>
				<a class="col-xs-6 mobile-sub-menu-item" @click="mobileAppointments=false; mobileFlexTasks=true;" :class="{active:mobileFlexTasks}">
					FlexTasks
				</a>
			</div>
		</div>
		<div class="row outer-row" :class="{mobileOuterRow:mobile,mobileOuterRowTask:mobile&&task}" v-show="loaded">
			<div :class="task?'col-lg-3 outer-column':'col-lg-9 outer-column'" id="appointments" v-show="!mobile||mobileAppointments" >
				<div class="col-lg-12 head mobile-pointer" v-if="mobile&&!showing">
					<div class="col-xs-2">
						<i class="fa fa-angle-double-left fa-lg" @click="movePointer(-2)" title="-2 Days" :key="'downweek'"></i>
					</div>
					<div class="col-xs-2">
						<i class="fa fa-angle-left fa-lg" @click="movePointer(-1)" title="-1 Day" :key="'downday'"></i>
					</div>
					<div class="col-xs-4">
						<span class="fa-stack" :key="'today'"  @click="movePointer(-1*pointer)" title="Today" :style="{opacity:pointer!=0?'1':'.5'}">
							<i class="fa fa-calendar-o fa-lg fa-stack-1x lh-icon"></i>
							<i class="fa fa-stack-1x lh-date">{{serverTime.getDate()}}</i>
						</span>
					</div>
					<div class="col-xs-2">
						<i class="fa fa-angle-right fa-lg" @click="movePointer(1)" title="+1 Day" :key="'upday'"></i>
					</div>
					<div class="col-xs-2">
						<i class="fa fa-angle-double-right fa-lg fa-fw" @click="movePointer(2)" title="+2 Days" :key="'upweek'"></i>
					</div>
				</div>
				<div class="col-lg-12 head" v-if="!mobile">
					<strong>
						Appointments

						<div class="dropdown">
							<i @click="technicianSelector = !technicianSelector" class="fa fa-address-book-o dropdown-btn" title="View Other Technicians" aria-hidden="true" style="padding-left: 5px;"></i>
							<div class="dropdown-content" v-show="technicianSelector">
								<a v-for="technician in technicians" :href="'/uadmin/appointments/technician/'+technician.id" v-text="technician.name"></a>
							</div>
						</div>
					</strong>

					<transition-group name="fadein" class="arrows">
						<i class="fap fa fa-angle-double-left fa-lg" v-if="!showing&&!task" @click="movePointer(-2)" title="-2 Days" :key="'downweek'"></i>
						<i class="fap fa fa-angle-left fa-lg" v-if="!showing&&!task" @click="movePointer(-1)" title="-1 Day" :key="'downday'"></i>

						<span class="fap fa-stack" :key="'today'" v-if="!showing&&!task" @click="movePointer(-1*pointer)" title="Today" :style="{opacity:pointer!=0?'1':'.5'}">
							<i class="fa fa-calendar-o fa-lg fa-stack-1x lh-icon"></i>
							<i class="fa fa-stack-1x lh-date">{{serverTime.getDate()}}</i>
						</span>

						<i class="fap fa fa-angle-right fa-lg" v-if="!showing&&!task" @click="movePointer(1)" title="+1 Day" :key="'upday'"></i>
						<i class="fap fa fa-angle-double-right fa-lg" v-if="!showing&&!task" @click="movePointer(2)" title="+2 Days" :key="'upweek'"></i>
					</transition-group>
				</div>
				<div class="col-lg-12 calendar" ref="calendar" id="calendar">
					<transition-group :name="pointerTransition()" tag="div" @before-enter="hideOverflow" @enter="showOverflow" @leave="hideOverflow" @after-leave="showOverflow" mode="out-in">
						<div 
							class="calendar-column"
							v-for="(day,order) in displayedDays"
							:key="'d'+day.day"
							:class="{
								today:day.day==0,
								fridayColumn:order!=2&&isFriday(day.day),
								'col-lg-4':mobile||!task,
								'col-lg-12':!mobile&&task
							}"
							v-if="(!mobile&&!task)||order==0"
						>
							<div class="calendar-day"
			    				:style="{
			    					opacity: showing || task || tasksDay !== null ? '0.5' : 1
				    			}"
			    			>
		    					{{getDate(day.day)}}
		    					<i 
		    						v-if="hasTask(day.day) && day.day<0"
		    						class="fa fa-exclamation-triangle" 
	    							style="color: #c60032; float: right; cursor: pointer;"
	    							@click="highlightTasks(day.day,order)"
	    						></i>
	    						<i 
		    						v-else-if="hasTask(day.day) && day.day==0"
		    						class="fa fa-circle" 
	    							style="color: #efbf2e; float: right; cursor: pointer;"
	    							@click="highlightTasks(day.day,order)"
	    						></i>
	    						<i 
		    						v-else-if="hasTask(day.day)"
		    						class="fa fa-circle" 
	    							style="color: #ccc; float: right; cursor: pointer;"
	    							@click="highlightTasks(day.day,order)"
	    						></i>
		    				</div>
		    				<div v-for="time in displayedTimes()">
		    					<div 
		    						class="calendar-item" 
		    						v-if="showAppointment(time.time,day.appointments,true)" 
			    					:key="'w_'+time.time+'_'+day.day"
			    					:style="{
			    						height: setHeight(getAppointment(time.time,day.appointments))+'px',
			    						cursor: 'default',
			    						opacity: showing || task || tasksDay !== null ? '0.5' : 1,
			    						backgroundColor: setAppointmentColor(getAppointment(time.time,day.appointments))
			    					}" 
			    					:class="appointmentAlert(getAppointment(time.time,day.appointments))"
			    					@click.self="hideDetails"
		    					>
		    						<div class="calendar-item-time">
		    							{{time.formatted}} - {{getEndTime(getAppointment(time.time,day.appointments)).formatted}} 
		    						</div>
		    						<span :style="{cursor: 'pointer'}" 
		    							@click="getDetails(getAppointment(time.time,day.appointments),order,day)" 
		    							class="name-and-city"
		    							v-if="mobile&&!showing"
	    							>
	    								<p v-if="getAppointment(time.time,day.appointments).customer">
		    								{{getAppointment(time.time,day.appointments).customer}}
		    							</p>
		    							<p v-if="getAppointment(time.time,day.appointments).phone">
		    								<a :href="'tel:'+getAppointment(time.time,day.appointments).phone">
	    										{{getAppointment(time.time,day.appointments).phone}}
	    									</a>
		    							</p>
		    							<span v-if="getAppointment(time.time,day.appointments).city&&getAppointment(time.time,day.appointments).state">
		    								<p v-if="getAppointment(time.time,day.appointments).address">
		    									<a 
		    										:href="
		    											'https://www.google.com/maps?q='+
		    											getAppointment(time.time,day.appointments).address+'%20-%20'+
		    											getAppointment(time.time,day.appointments).city+',%20'+
		    											getAppointment(time.time,day.appointments).state
		    										"
		    										target="_blank"
		    									>
	    											{{getAppointment(time.time,day.appointments).address?getAppointment(time.time,day.appointments).address:'&nbsp;'}}
	    										</a>
	    									</p>
	    									<p>
		    									{{getAppointment(time.time,day.appointments).city+', '+getAppointment(time.time,day.appointments).state}}
		    								</p>
		    							</span>
		    						</span>
		    						<span :style="{cursor: 'pointer'}" 
		    							@click="getDetails(getAppointment(time.time,day.appointments),order,day)" 
		    							class="name-and-city"
		    							v-else-if="!mobile&&getAppointment(time.time,day.appointments).length>=1"
	    							>
		    							<p v-if="getAppointment(time.time,day.appointments).customer">
		    								{{getAppointment(time.time,day.appointments).customer}}
		    							</p>
		    							<p v-if="getAppointment(time.time,day.appointments).phone">
		    								<a :href="'tel:'+getAppointment(time.time,day.appointments).phone">
	    										{{getAppointment(time.time,day.appointments).phone}}
	    									</a>
		    							</p>
		    							<span v-if="getAppointment(time.time,day.appointments).city&&getAppointment(time.time,day.appointments).state">
		    								<p v-if="getAppointment(time.time,day.appointments).address">
		    									<a 
		    										:href="
		    											'https://www.google.com/maps?q='+
		    											getAppointment(time.time,day.appointments).address+'%20-%20'+
		    											getAppointment(time.time,day.appointments).city+',%20'+
		    											getAppointment(time.time,day.appointments).state
		    										"
		    										target="_blank"
		    									>
	    											{{getAppointment(time.time,day.appointments).address?getAppointment(time.time,day.appointments).address:'&nbsp;'}}
	    										</a>
	    									</p>
	    									<p>
		    									{{getAppointment(time.time,day.appointments).city+', '+getAppointment(time.time,day.appointments).state}}
		    								</p>
		    							</span>
		    						</span>
		    						<span :style="{cursor: 'pointer'}" 
		    							@click="getDetails(getAppointment(time.time,day.appointments),order,day)" 
		    							class="name-and-city"
		    							v-else
	    							>
		    							{{getAppointment(time.time,day.appointments).customer?getAppointment(time.time,day.appointments).customer:'&nbsp;'}}
		    							{{getAppointment(time.time,day.appointments).city&&getAppointment(time.time,day.appointments).state?
		    							' - '+getAppointment(time.time,day.appointments).city+', '+getAppointment(time.time,day.appointments).state:'&nbsp;'}}
		    						</span>
		    					</div>
			    				<div 
			    					class="calendar-time" 
			    					v-else-if="showAppointment(time.time,day.appointments,false)" 
			    					:id="'ct_'+time.time+'_'+day.day"
			    					:key="'wo_'+time.time+'_'+day.day"
			    					:ctday="day.day"
			    					:style="{
	    								cursor: 'default',
	    								opacity: showing || task || tasksDay !== null ? '0.5' : 1
									}"
									@click.self="hideDetails"
    							>
		    						{{time.formatted}}
			    				</div>	
			    			</div>
			    			<div class="fridayHidden visible-lg-inline" v-if="order!=2&&!showing&&!task" :class="{fridayMarker:order!=2&&isFriday(day.day)}" :style="{cursor: 'default'}"></div>
						</div>
						<div	
							class="col-lg-8 details-container" 
							key="details-history"
							v-if="showing"
						>
							<div class="col-lg-12 details-appointment" :class="{onMobile:mobile}">
								<div class="details-header" :class="{onMobile:mobile}">
				    				<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>
						    				<transition name="fade" mode="out-in">
						    					<i class="fa fa-check-square complete" key="complete" style="color: #009e00; cursor: default;" v-if="showing.complete_tech" title="Appointment Complete!"></i>
							    				<i class="fa fa-flag alert-change" key="alertChange" :class="getAlertFlag()" v-else-if="showing.status" title="Priority"></i>
							    			</transition>
						    				<i class="fa fa-window-close" @click="hideDetails" key="close"></i>
							    			
					    				</div>
					    			</div>
				    			</div>
				    			
								<div class="details" :class="{onMobile:mobile}">
									<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">
						    				<div class="d-label">
												Time
						    				</div>
						    				<div class="d-data">
						    					{{getAppointmentTime(showing)?getAppointmentTime(showing):''}}
						    				</div>
						    			</div>
						    			<div class="details-row">
						    				<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">
						    					<a 
						    						v-if="showing.phone"
						    						:href="'tel:'+showing.phone"
						    						style="color: black; text-decoration: none;"
						    					>
						    						{{showing.phone}}
						    					</a>
						    				</div>
						    			</div>

						    			<div class="details-row address-row">
						    				<div class="d-label">
						    					Address
						    				</div>
						    				<div class="d-data address">
						    					<a
						    						v-if="showing.address"
		    										:href="
		    											'https://www.google.com/maps?q='+
		    											showing.address+'%20-%20'+
		    											showing.city+',%20'+
		    											showing.state
		    										"
		    										target="_blank"
		    										style="color: black; text-decoration: none;"
		    									>
						    						{{showing.address}}
						    					</a>
						    				</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;">
						    				<span class="btn btn-default" @click="completeAppointment" v-if="(showing.complete || showing.complete_tech) && !mobile">
						    					Reactivate
						    				</span>
						    			</div>
						    		</div>
						    		<div class="col-lg-6 details-column">
						    			<div class="details-row">
						    				<div class="d-label">
						    					Dispatcher
						    				</div>
						    				<div class="d-data">
						    					{{getDispatcher(showing.dispatcher).name?getDispatcher(showing.dispatcher).name:''}}
						    				</div>
						    			</div>
						    			<div class="details-row">
						    				<div class="d-label">
						    					Technician
						    				</div>
						    				<div class="d-data">
						    					{{getTechnician(showing.technician).name?getTechnician(showing.technician).name:''}}
						    				</div>
						    			</div>
						    			<div class="details-row text-row">
						    				<div class="d-label">
						    					Service Information
						    				</div>
						    				<div class="d-data text">
						    					{{showing.information?showing.information:''}}
						    				</div>
						    			</div>
						    			<div class="details-row text-row">
						    				<div class="d-label">
						    					Special Instructions
						    				</div>
						    				<div class="d-data text">
						    					{{showing.instructions?showing.instructions:''}}
						    				</div>
						    			</div>
						    			<div class="details-row complete-row">
						    				<span class="btn btn-default" @click="completeAppointment" v-if="!showing.complete && !showing.complete_tech" style="float: right;">
						    					Complete
						    				</span>
						    				<span class="btn btn-default" @click="completeAppointment" v-if="(showing.complete || showing.complete_tech) && mobile" style="float: left;">
						    					Reactivate
						    				</span>
						    			</div>
						    		</div>
								</div>
								<div class="comments-header" :class="{onMobile:mobile}">
				    				<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" :class="{onMobile:mobile}">
				    				<div class="comments-inner" id="comments-list" :class="{onMobile:mobile}">
				    					<transition-group name="from-bottom" tag="div">
					    					<div class="comments-row" v-for="(piece,order) in this.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 class="comments-add">
				    					<input type="text" v-model="newComment" @keyup.enter="addComment">
				    					<span @click="addComment" :style="{cursor:newComment?'pointer':'default'}">
				    						<i class="fa fa-send fa-lg"></i>
				    					</span>
				    				</div>
				    			</div>
							</div>								
						</div>
					</transition-group>

					<div class="dropdown" v-if="mobile" style="float: right; padding: 0px 20px 20px 0px;">
						<i @click="technicianSelector = !technicianSelector" class="fa fa-address-book-o dropdown-btn" title="View Other Technicians" aria-hidden="true" style="font-size:20px;"></i>
						<div class="dropdown-content" v-show="technicianSelector" style="bottom:120%; right:60%;">
							<a v-for="technician in technicians" :href="'/uadmin/appointments/technician/'+technician.id" v-text="technician.name"></a>
						</div>
					</div>
				</div>
	    	</div>
	    	<div :class="!task?'col-lg-3 outer-column':'col-lg-9 outer-column'" id="flextasks" v-show="!mobile||mobileFlexTasks">
				<div class="col-lg-12 head" v-if="!mobile">
					<strong>FlexTasks</strong>
				</div>
				<transition-group name="flextasks-group" tag="div">
					<div
		    			class="col-lg-8 flextask-container"
		    			v-if="task"
		    			:class="{mobileTask:mobile,onMobile:mobile}"
		    			key="theTask"
		    		>	
			    		<div class="inner-flextask" :class="{onMobile:mobile}">
			    			<div class="flextask-header" :class="{onMobile:mobile}">
		    					<div class="always">
				    				<span class="tab-details active">
				    					Details
				    				</span>
				    			</div>
				    			<div class="sometimes">
				    				<i 
				    					class="fa fa-wrench" 
				    					v-if="task.type=='trouble'" 
				    					title="Type: Trouble"
				    					style="cursor: default;"
			    					></i>
				    				<i 
				    					class="fa fa-plug" 
				    					v-else-if="task.type=='disconnect'" 
				    					title="Type: Disconnect"
				    					style="cursor: default;"
			    					></i>
				    				<transition name="fade" mode="out-in">
					    				<i 
				    						v-if="task.due<0&&!task.complete"
				    						class="fa fa-exclamation-triangle" 
			    							style="color: #c60032; cursor: default;"
			    							title="Overdue!"
			    						></i>
			    						<i 
				    						v-else-if="task.due==0&&!task.complete"
				    						class="fa fa-circle" 
			    							style="color: #efbf2e; cursor: default;"
			    							title="Due: Today"
			    						></i>
			    						<i 
				    						v-else-if="task.due>0&&!task.complete"
				    						class="fa fa-circle" 
			    							style="color: #ccc; cursor: default;"
			    							:title="'Due: '+getDate(task.due)"
			    						></i>
				    					<i 
				    						class="fa fa-check-square complete" 
				    						key="complete" 
				    						style="color: #009e00; 
				    						cursor: default;" 
				    						v-else-if="task.complete_tech" 
				    						title="FlexTask Complete!"
				    					></i>
					    			</transition>
				    				<i class="fa fa-window-close" @click="hideTask()" key="close"></i>
			    				</div>
							</div>
							<div class="details flextask-details" :class="{onMobile:mobile}">
								<div class="col-lg-6 details-column">
				    				<div class="details-row">
					    				<div class="d-label">
					    					Due Date
					    				</div>
					    				<div class="d-data">
					    					{{getDate(task.due)}}
					    				</div>
					    			</div>
					    			<div class="details-row">
					    				<div class="d-label">
					    					Customer
					    				</div>
					    				<div class="d-data">
					    					{{task.customer?task.customer:''}}
					    				</div>
					    			</div>
					    			<div class="details-row">
					    				<div class="d-label">
					    					Phone
					    				</div>
					    				<div class="d-data">
					    					<a 
					    						v-if="task.phone"
					    						:href="'tel:'+task.phone"
					    						style="color: black; text-decoration: none;"
					    					>
					    						{{task.phone}}
					    					</a>
					    				</div>
					    			</div>
					    			<div class="details-row address-row">
					    				<div class="d-label">
					    					Address
					    				</div>
					    				<div class="d-data address">
					    					<a
					    						v-if="task.address"
	    										:href="
	    											'https://www.google.com/maps?q='+
	    											task.address+'%20-%20'+
	    											task.city+',%20'+
	    											task.state
	    										"
	    										target="_blank"
	    										style="color: black; text-decoration: none;"
	    									>
					    						{{task.address}}
					    					</a>
					    				</div>
					    			</div>
					    			<div class="details-row location">
					    				<div class="city">
						    				<div class="d-label">
						    					City
						    				</div>
						    				<div class="d-data">
						    					{{task.city?task.city:''}}
						    				</div>
						    			</div>
						    			<div class="state">
						    				<div class="d-label">
						    					State
						    				</div>
						    				<div class="d-data">
						    					{{task.state?task.state:''}}
						    				</div>
						    			</div>
					    			</div>
					    			<div class="details-row complete-row">
					    				
					    			</div>
					    		</div>
					    		<div class="col-lg-6 details-column">
					    			<div class="details-row">
					    				<div class="d-label">
					    					Dispatcher
					    				</div>
					    				<div class="d-data">
					    					{{getDispatcher(task.dispatcher).name?getDispatcher(task.dispatcher).name:''}}
					    				</div>
					    			</div>
					    			<div class="details-row">
					    				<div class="d-label">
					    					Technician
					    				</div>
					    				<div class="d-data">
					    					{{getTechnician(task.technician).name?getTechnician(task.technician).name:''}}
					    				</div>
					    			</div>
					    			<div class="details-row text-row">
					    				<div class="d-label">
					    					Notes
					    				</div>
					    				<div class="d-data text">
					    					{{task.notes?task.notes:''}}
					    				</div>
					    			</div>
					    			<div class="details-row edit-row">
					    				<span class="btn btn-default" @click="completeTask()" v-if="!task.complete && !task.complete_tech" style="float: right;">
					    					Complete
					    				</span>
					    				<span class="btn btn-default" @click="completeTask()" v-if="task.complete || task.complete_tech" style="float: right;">
					    					Reactivate
					    				</span>
					    			</div>
					    		</div>
							</div>
							<div class="flextask-header flextask-comments-header" :class="{onMobile:mobile}">
		    					<div class="always">
				    				<span class="tab-comments active">
			    						History
			    					</span>
				    			</div>
				    		</div>
							<div class="comments flextask-history" :class="{onMobile:mobile}">
								<div class="comments-inner" id="comments-list" :class="{onMobile:mobile}">
			    					<transition-group name="from-bottom" tag="div">
				    					<div class="comments-row" v-for="(piece,order) in this.task.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 class="comments-add">
			    					<input type="text" v-model="newComment" @keyup.enter="addCommentTask">
			    					<span @click="addCommentTask" :style="{cursor:newComment?'pointer':'default'}">
			    						<i class="fa fa-send fa-lg"></i>
			    					</span>
			    				</div>
							</div>
						</div>
		    		</div>
					<div 
						class="flextasks"
						:class="{'col-lg-12':!task,'col-lg-4':task}"
						key="taskslisted"
						v-show="!mobile||!task"
					>
	    				<div class="tech-todo" :class="{todoOnMobile:mobile}">
	    					<div class="row flextasks-header">
	    						<span v-if="highlightedDay()!==false">
	    							{{getDate(highlightedDay())}}
	    						</span>
	    						<span v-else>
	    							All
	    						</span>
	    						<i v-if="highlightedDay()!==false" style="float: right; cursor: pointer; opacity: .75;" @click="lowlightTasks()">
	    							Show All
	    						</i>
		    				</div>
	    					<transition-group name="tasklist" tag="div" class="all" :class="{allOnMobile:mobile}">
	    						<div
			    					v-if="!hasAnyTasks()"
			    					key="no-tasks"
			    					class="tasklist"
			    					style="border: none;"
			    				>
			    					<i>(none)</i>
			    				</div>
		    					<div 
		    						v-for="dTask in displayedTasks"
		    						:title="'Due: '+getDate(dTask.due)"
		    						:key="'dTask'+dTask.id+'day'+dTask.due"
		    						:style="{
		    							opacity:1,
		    							cursor:'pointer'
		    						}"
		    						class="tasklist"
		    						@click="showTask(dTask)"
	    						>
	    							<span class="type">
			    						<i
			    							v-if="dTask.type=='trouble'"
			    							class="fa fa-wrench"
			    							style="cursor: inherit;"
			    							title="Type: Trouble"
			    						></i>
			    						<i 
			    							v-else-if="dTask.type=='disconnect'"
			    							class="fa fa-plug"
			    							style="cursor: inherit;"
			    							title="Type: Disconnect"
			    						></i>
			    					</span>
		    						<span class="flextask">
		    							{{dTask.customer}} - {{dTask.city}}, {{dTask.state}}
		    						</span>
		    						<span class="due-notice">
			    						<i 
			    							v-if="dTask.due<0"
			    							class="fa fa-exclamation-triangle" 
			    							style="color: #c60032; cursor: inherit;" 
			    							:class="{highlight:dTask.highlight}"
			    							title="Overdue!"
		    							></i>
		    							<i 
			    							v-else-if="dTask.due==0"
			    							class="fa fa-circle" 
			    							style="color: #efbf2e; cursor: inherit;"
			    							:class="{highlight:dTask.highlight}"
			    							title="Due Today!"
		    							></i>
		    							<i 
			    							v-else
			    							class="fa fa-circle" 
			    							:class="{highlight:dTask.highlight}"
			    							style="color: #ccc; cursor: inherit;" 
		    							></i>
		    						</span>
			    				</div>
			    				<div 
		    						v-for="dTask in completedTasks"
		    						title="Recently Completed FlexTask"
		    						:key="'dTask'+dTask.id+'day'+dTask.due"
		    						:style="{
		    							opacity:0.3,
		    							cursor:'pointer'
		    						}"
		    						class="tasklist"
		    						@click="showTask(dTask)"
	    						>
			    					<span class="type">
			    						<i
			    							v-if="dTask.type=='trouble'"
			    							class="fa fa-wrench"
			    							style="cursor: inherit;"
			    							title="Type: Trouble"
			    						></i>
			    						<i 
			    							v-else-if="dTask.type=='disconnect'"
			    							class="fa fa-plug"
			    							style="cursor: inherit;"
			    							title="Type: Disconnect"
			    						></i>
			    					</span>
			    					<span class="flextask">
		    							{{dTask.customer}} - {{dTask.city}}, {{dTask.state}}
		    						</span>
		    						<span class="due-notice">
			    						<i 
			    							class="fa fa-check-square" 
			    							style="color: #009e00; cursor: inherit;" 
			    							:class="{highlight:dTask.highlight}"
		    							></i>
		    						</span>
			    				</div>
			    				
			    			</transition-group>
		    			</div>

					</div>
				</transition-group>
	    	</div>
		</div>
	</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<?php echo $__env->make('residential.uadmin.appointments.tech_style', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>
	<?php echo $__env->make('residential.uadmin.appointments.tech_script', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make(isset($tid)?'residential.templates.appointments':'residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>