 
<?php $__env->startSection('content'); ?>
	<div id="root" class="container-fluid" @mouseup="mouseUp" :class="{root: conflictDetected, notLoaded: !loaded, thinking: thinking}" v-cloak>
		<div class="row header">
			<div class="col-md-3">
				<a href="<?php echo e(url('uadmin')); ?>">
					<img src="<?php echo e(asset('images/theme/logo.png')); ?>" height="20px" style="margin-top: 5px;">
				</a>
			</div>
			<div class="col-md-6" style="text-align: center;">
				<h4>
					<a href="<?php echo e(url('uadmin/appointments')); ?>" style="text-decoration: none; color: black;">
						Appointments
					</a>
				</h4>
			</div>
			<div class="col-md-3 arrows" v-show="selected.id" :class="{arrowscursor: dragging}">
				<transition-group name="fadein">
					<i class="fap fa fa-circle-o-notch fa-spin fa-lg" v-if="thinking" title="Loading..." :key="'thinking'" style="cursor: default; color: #0067a0;"></i>
					<i class="fap fa fa-angle-double-left fa-lg" v-if="!dragging&&!showing" @click="movePointer(-5)" title="-1 Week" :key="'downweek'"></i>
					<i class="fap fa fa-angle-left fa-lg" v-if="!dragging&&!showing" @click="movePointer(-1)" title="-1 Day" :key="'downday'"></i>

					<span class="fap fa-stack" :key="'today'" v-if="!dragging&&!showing" @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="!dragging&&!showing" @click="movePointer(1)" title="+1 Day" :key="'upday'"></i>
					<i class="fap fa fa-angle-double-right fa-lg" v-if="!dragging&&!showing" @click="movePointer(5)" title="+1 Week" :key="'upweek'"></i>
					<i class="fap fa fa-plus-square-o fa-lg" v-if="false && !dragging&&!showing" :key="'plus'" style="margin-left: 10px;"></i>
				</transition-group>
			</div>
		</div>
	    <div class="row hidden-xs hidden-sm hidden-md" style="margin-bottom: 20px;">
	    	<div class="col-lg-2" :class="{techListColumn: dragging}">
	    		<div class="tech-list" :class="{dragLeftColumn: dragging}">
		    		<div class="col-sm-12 tech-head">
						Technicians
					</div>
					<div class="tech-list-inner">
		    			<div 
		    				class="col-sm-12 tech-ind" 
		    				v-for="technician in technicians" 
		    				:class="{selected:technician.id==selected.id,notselected:technician.id!=selected.id}" 
		    				v-inview
		    			>
		    				<span 
		    					@click="selectTech(technician)"
	    					>
	    						{{technician.name}}
	    						<transition name="fade">
			    					<a 
			    						:href="'/uadmin/appointments/archive/'+technician.id" 
			    						target="_blank"
			    						style="margin-right: 5px; margin-left: 5px; color: gray;"
			    						v-if="technician.id == selected.id"
			    						title="Archive"
			    					>
			    						<i class="fa fa-archive"></i>
			    					</a>
		    					</transition>
	    					</span>
	    					
		    				<transition name="badge">
			    				<i 
			    					v-if="technician.alerts>0" 
				    				class="fa fa-exclamation-circle tech-badge" 
				    				:title="technician.alerts+' new '+(technician.alerts>1?'alerts':'alert')" 
				    				:style="{color:'#27a4f1'}"
				    				@click="selectTech(technician)"
			    				>
			    				</i>
			    			</transition>
			    			<div
			    				v-if="selected.id==technician.id"
			    				class="tech-todo"
			    			>
				    			<table>
				    				<thead>
				    					<tr>
				    						<th width="8%" style="text-align: left;">
					    						<i
					    							v-if="!selected.technician.sortedTasks"
					    							class="fa fa-sort-amount-desc"
					    							style="cursor: pointer;"
					    							@click="clickSortTasks()"
					    							title="Sort FlexTasks"
					    						></i>
					    					</th>
				    						<th width="8%" style="text-align: center;">
				    							<i class="fa fa-plus" @click="addTask()"></i>
				    						</th>
					    					<th class="flextask-head" width="76%">
					    						FlexTasks 
					    					</th>
					    					<th width="8%" style="text-align: right;"></th>
					    				</tr>
				    				</thead>
			    					<transition-group name="tasklist" tag="tbody">
			    						<tr
					    					v-if="selected.technician&&!hasAnyTasks()"
					    					key="no-tasks"
					    				>
					    					<td width="8%"></td>
					    					<td width="84%"><i>(none)</i></td>
				    						<td width="8%"></td>
					    				</tr>
				    					<tr 
				    						v-for="task in displayedTasks"
				    						:title="'Due: '+getDate(task.due)"
				    						:key="'task'+task.id+'day'+task.due"
				    						:style="{
				    							opacity:draggingTask&&task.id!=draggingTask.id?0.3:1,
				    							cursor:draggingTask?'grabbing':'pointer'
				    						}"
				    						@mouseover="moveTask(task,$event)"
				    						@mouseup="moveTask(task,$event)"
			    						>
			    							<td 
			    								width="8%" 
			    								style="text-align: left;"
			    								:style="{
				    								opacity:!draggingTask?0.3:1,
				    								cursor:draggingTask?'grabbing':'grab'
				    							}"
				    							@mousedown="moveTask(task,$event)"
		    								>
					    						<i 
					    							class="fa fa-bars"	
					    							style="cursor: inherit;"
					    							title="Move FlexTask"
					    						></i>
					    					</td>
					    					<td width="8%" @click="showTask(task)" style="text-align: center;">
					    						<i
					    							v-if="task.type=='trouble'"
					    							class="fa fa-wrench"
					    							style="display: inline; cursor: inherit;"
					    							title="Type: Trouble"
					    						></i>
					    						<i 
					    							v-else-if="task.type=='disconnect'"
					    							class="fa fa-plug"
					    							style="display: inline; cursor: inherit;"
					    							title="Type: Disconnect"
					    						></i>
					    					</td>
					    					<td class="flextask" width="76%" @click="showTask(task)">
					    						{{task.customer}}
					    						<span v-if="task.city">
					    						 - {{task.city}}, {{task.state}}
					    						</span>
					    					</td>
					    					<td width="8%" style="text-align: right;" @click="showTask(task)">
					    						<i 
					    							v-if="showTaskBadge(task)"
					    							class="fa fa-circle" 
					    							style="color: #27a4f1; cursor: inherit;"
					    							:class="{highlight:task.highlight}"
					    							title="New Message!"
				    							></i>
				    							<i 
					    							v-else-if="task.complete_tech && !task.complete"
					    							class="fa fa-check-square" 
					    							style="color: #009e00; cursor: inherit;"
					    							:class="{highlight:task.highlight}"
					    							title="Completed by technician"
				    							></i>
					    						<i 
					    							v-else-if="task.due<0"
					    							class="fa fa-exclamation-triangle" 
					    							style="color: #c60032; cursor: inherit;" 
					    							:class="{highlight:task.highlight}"
					    							title="Overdue!"
				    							></i>
				    							<i 
					    							v-else-if="task.due==0"
					    							class="fa fa-circle" 
					    							style="color: #efbf2e; cursor: inherit;"
					    							:class="{highlight:task.highlight}"
					    							title="Due Today!"
				    							></i>
				    							<i 
					    							v-else
					    							class="fa fa-circle" 
					    							:class="{highlight:task.highlight}"
					    							style="color: #ccc; cursor: inherit;" 
				    							></i>
					    					</td>
					    				</tr>
					    				<tr 
				    						v-for="task in completedTasks"
				    						title="Recently Completed FlexTask"
				    						:key="'task'+task.id+'day'+task.due"
				    						:style="{
				    							opacity:0.3,
				    							cursor:'pointer'
				    						}"
			    						>
			    							<td width="8%"></td>
					    					<td width="8%" @click="showTask(task)" style="text-align: center;">
					    						<i
					    							v-if="task.type=='trouble'"
					    							class="fa fa-wrench"
					    							style="display: inline; cursor: inherit;"
					    							title="Type: Trouble"
					    						></i>
					    						<i 
					    							v-else-if="task.type=='disconnect'"
					    							class="fa fa-plug"
					    							style="display: inline; cursor: inherit;"
					    							title="Type: Disconnect"
					    						></i>
					    					</td>
					    					<td class="flextask" width="76%" @click="showTask(task)">
					    						{{task.customer}} - {{task.city}}, {{task.state}}
					    					</td>
					    					<td width="8%" style="text-align: right;" @click="showTask(task)">
					    						<i 
					    							v-if="showTaskBadge(task)"
					    							class="fa fa-circle" 
					    							style="color: #27a4f1; cursor: inherit;"
					    							:class="{highlight:task.highlight}"
					    							title="New Message!"
				    							></i>
					    						<i 
					    							v-else
					    							class="fa fa-check-square" 
					    							style="color: #009e00; cursor: inherit;" 
					    							:class="{highlight:task.highlight}"
				    							></i>
					    					</td>
					    				</tr>
					    				
					    			</transition-group>
				    			</table>
			    			</div>
		    			</div>
		    		</div>
	    		</div>
	    		<transition name="alertslide">
					<div class="current-alert" v-if="currentAlert.exists" key="currentAlert" 
						:style="{
							backgroundColor:currentAlert.background?currentAlert.background:'transparent'
						}">
						<div @click="clickAlert(currentAlert.click)">
							<strong :style="{
								cursor:currentAlert.click?'pointer':'default',
								color:currentAlert.color?currentAlert.color:'black'
							}">
								{{currentAlert.text}}
							</strong>
						</div>
					</div>
				</transition>
	    		<div class="drag-left" :style="{display: dragging ? 'inline-block' : 'none'}" @mouseover="dragPointer('left',$event)"></div>
	    	</div>
	    	<div class="col-lg-10 calendar" v-if="selected.id" @mousemove="getMC" ref="calendar" id="calendar">
		    	<transition-group :name="pointerTransition()" tag="div" @enter="hideOverflow" @leave="hideOverflow" @after-leave="showOverflow">
		    		<div class="col-md-2 calendar-column" v-for="(day,order) in displayedDays" :key="'d'+day.day" 
		    			:class="{today:day.day==0,fridayColumn:order!=5&&isFriday(day.day),dragRightColumn:dragging}">
		    			<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()" @mouseover="outside=false">
	    					<div class="calendar-item" v-if="checkTime(time.time,day.appointments) == 1" 
	    					:key="'w_'+time.time+'_'+day.day"
	    					:style="{
	    						height: getAppointment(time.time,day.appointments).length*2*52+'px',
	    						cursor: dragging || adding ? 'no-drop' : (expanding ? 'row-resize' :'default'),
	    						opacity: showing || task || tasksDay !== null ? '0.5' : 1,
	    						backgroundColor: setAppointmentColor(getAppointment(time.time,day.appointments))
	    					}" 
	    					:class="appointmentAlert(getAppointment(time.time,day.appointments))"
	    					@mousemove="expandOver(time.time,$event)"
	    					@mouseup.self="hideDetails"
	    					>
	    						<div class="drag-container">
									<i class="expand-up" @mousedown="expandStartTop(getAppointment(time.time,day.appointments),day,$event)" :class="{underDetails:showing||task||tasksDay!==null}"></i>
	    						</div>
	    						<div class="calendar-item-time">
	    							{{time.formatted}} - {{getEndTime(getAppointment(time.time,day.appointments)).formatted}} 
	    							<transition name="quickfade">
	    								<i class="fa fa-bars drag-bars" @mousedown="dragStart(getAppointment(time.time,day.appointments),day,$event)" @mouseup="dragFinish(time.time,day.day,order)" :class="{underDetails:showing}" v-show="!showing&&!dragging&&!expanding"></i>
	    							</transition>
	    						</div>
	    						<span 
	    							v-if="getAppointment(time.time,day.appointments).length>=1"
	    							:style="{cursor: expanding ? 'row-resize' :'pointer'}" 
	    							@click="getDetails(getAppointment(time.time,day.appointments),order,day)" 
	    							class="name-and-city"
	    							:class="{underDetails:showing||task||tasksDay!==null}"
    							>
    								<span style="display: block; height: 65px;">
		    							<span v-if="getAppointment(time.time,day.appointments).customer">
		    								{{getAppointment(time.time,day.appointments).customer}}
		    							</span>
		    							<span v-else>
		    								&nbsp;
		    							</span>
		    							<span v-if="getAppointment(time.time,day.appointments).phone">
		    								<br>
											{{getAppointment(time.time,day.appointments).phone}}
		    							</span>
		    							<span v-else>
		    								<br>
		    								&nbsp;
		    							</span>
		    							<span v-if="getAppointment(time.time,day.appointments).city&&getAppointment(time.time,day.appointments).state">
		    								<span v-if="getAppointment(time.time,day.appointments).address">
		    									<br>
		    									<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}}
	    										</a>
	    									</span>
	    									<span v-else>
	    										<br>
			    								&nbsp;
			    							</span>
	    									<br>
	    									{{getAppointment(time.time,day.appointments).city+', '+getAppointment(time.time,day.appointments).state}}
		    							</span>
		    							<span v-else>
		    								<br>
		    								<br>
		    								&nbsp;
		    							</span>
		    						</span>
	    							<span
	    								v-if="getAppointment(time.time,day.appointments).length>=1.5&&getAppointment(time.time,day.appointments).information"
	    								style="display: block; height: 52px; width: 100%; padding-right: 15px; padding-top: 5px; white-space: normal; overflow-x: hidden; overflow-y: hidden;"
	    							>
	    								{{getAppointment(time.time,day.appointments).information}}
	    							</span>
	    							<span v-else style="display: block; height: 52px; width: 100%; padding-right: 15px; padding-top: 5px; white-space: normal; overflow-x: hidden; overflow-y: hidden;">
	    								&nbsp;
	    							</span>
	    						</span>
	    						<a 
	    							v-else
	    							:style="{cursor: expanding ? 'row-resize' :'pointer'}" 
	    							@click="getDetails(getAppointment(time.time,day.appointments),order,day)" 
	    							class="name-and-city"
	    							:class="{underDetails:showing||task||tasksDay!==null}"
    							>
	    							{{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;'}}
	    						</a>
	    						<div 
	    							v-if="showBadge(getAppointment(time.time,day.appointments))"
	    							class="appointment-badge" 
	    							:style="{top:(((time.time-8)*104)+38)+'px'}"
    							>
	    							<div class="badge-dot"></div>
	    						</div>
	    						<div 
	    							class="drag-container bottom-out" 
	    							:style="{
	    								bottom: 
	    									getAppointment(time.time,day.appointments).length<1?
	    									((getAppointment(time.time,day.appointments).length*52*-2)+52)+'px':
	    									(getAppointment(time.time,day.appointments).length<1.5?
	    									((getAppointment(time.time,day.appointments).length*52*-2)+156)+'px':
	    									((getAppointment(time.time,day.appointments).length*52*-2)+156)+'px')
	    							}"
	    						>
									<i class="expand-down" @mousedown="expandStartBottom(getAppointment(time.time,day.appointments),day,$event)" :class="{underDetails:showing}"></i>
	    						</div>
	    					</div>
		    				<div class="calendar-time" 
		    					v-else-if="checkTime(time.time,day.appointments) == 0" 
		    					:id="'ct_'+time.time+'_'+day.day"
		    					:key="'wo_'+time.time+'_'+day.day"
		    					:ctday="day.day"
		    					@mousedown="addStart(time.time,day.day,$event)" @mouseup="dragFinish(time.time,day.day,order)" @mouseover="expandOver(time.time,$event)" 
		    					:class="{
		    						calendartimeover: !expanding&&!showing&&tasksDay==null&&!task, 
		    						addover: inAddDrag('ct_'+time.time+'_'+day.day),
		    						underDetails:showing||task||tasksDay!==null}" 
		    					:style="{
    								cursor: dragging ? 'move' : (expanding ? 'row-resize' :'cell'),
    								opacity: showing || task || tasksDay !== null ? '0.5' : 1
								}"
    							>
		    						{{time.formatted}}
		    				</div>	
		    			</div>
		    			<div class="fridayHidden" v-if="order!=5" :class="{fridayMarker:order!=5&&isFriday(day.day)}" :style="{cursor: dragging ? 'move' : (expanding ? 'no-drop' :'default')}"></div>
		    			<div class="drag-right" v-if="order==5" :style="{display: dragging ? 'inline-block' : 'none'}" @mouseover="dragPointer('right',$event)"></div>
		    			<div class="now-marker" v-if="day.day==0&&nowOffset" :style="{top:nowOffset+'px'}"></div>
		    		</div>
		    	</transition-group>
		    	
		    	<div class="col-md-5 details-container" ref="details" id="details" v-show="showing">
		    		<transition name="fade">
			    		<div class="details-appointment" v-if="showing" :style="{height:showing.toggle==2||showing.toggle==0?'479px':'442px'}">
			    			<div class="details-header">
			    				<div class="details-menu">
			    					<div class="always">
					    				<span class="tab-details" :class="{active:!showing.toggle||showing.toggle==2}" 
					    					@click="showing.toggle!=2?showing.toggle=0:showing.toggle=2"
					    					>
					    					Details
					    				</span>
					    				<span class="tab-comments" :class="{active:showing.toggle==1}" 
					    					@click="showing.toggle!=2?showing.toggle=1:showing.toggle=2"
					    					:style="showing.toggle==2?'cursor: default':''"
				    						>
				    						History
				    					</span>
					    			</div>
					    			<div class="sometimes">
					    				<transition name="fade">
					    					<a 
					    						v-if="showing.order" 
					    						:href="'/uadmin/orders/edit/'+showing.order.id" 
					    						target="_blank" key="linked_order" 
					    						style="color: black; cursor: pointer;" 
					    						:title="showing.order.signed?'Linked Order - Signed':'Linked Order'"
				    						>
						    					<i class="fa fa-external-link-square" :style="{color:showing.order.signed?'black':'black'}"></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" title="Appointment Complete!"></i>
						    				<i class="fa fa-flag alert-change" @click="changeAlert" key="alertChange" :class="getAlertFlag()" v-else-if="showing.initialized" title="Update Priority"></i>
						    			</transition>
					    				<i class="fa fa-window-close" @click="hideDetails" key="close"></i>
						    			
				    				</div>
				    			</div>
			    			</div>
			    			<transition :name="detailsTransition()">
				    			<div class="details"  v-if="!showing.toggle" key="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">
						    				<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">
						    					{{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">
						    				<span class="btn btn-default" @click="completeAppointment" v-if="!showing.complete">
						    					Complete
						    				</span>
						    				<span class="btn btn-default" @click="completeAppointment" v-if="showing.complete">
						    					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 edit-row">
						    				<span class="btn btn-default" @click="editShowing">
						    					Edit
						    				</span>
						    			</div>
						    		</div>
				    			</div>
				    			<div class="edit"  v-if="showing.toggle==2" key="edit">
				    				<div class="col-lg-6 details-column">
					    				<div class="details-row">
						    				<div class="d-label">
						    					Date
						    				</div>
						    				<select class="d-data" name="Date" v-required @change="changeDay">
						    					<option v-for="option in dayOptions()" 
						    						:value="option.day" 
						    						:disabled="!option.available"
						    						:selected="option.day == showingDay.day"
						    						>
						    						{{option.formatted}}
						    					</option>
						    				</select>
						    			</div>
						    			<div class="details-row">
						    				<div class="d-label">
												Time
						    				</div>
						    				<select class="d-data" v-model="showing.time" name="Time" v-required>
						    					<option v-for="option in timeOptions()" :value="option.time" :disabled="!option.available">
						    						{{option.formatted}}
						    					</option>
						    				</select>
						    			</div>
						    			<div class="details-row">
						    				<div class="d-label">
						    					Length
						    				</div>
						    				<select class="d-data" v-model="showing.length" name="Length" v-required>
						    					<option v-for="option in lengthOptions()" :value="option">
						    						{{formatLength(option)}}
						    					</option>
						    				</select>
						    			</div>

						    			<div class="details-row">
						    				<div class="d-label" v-if="showing.customer == null">
						    					Customer / Order Lookup
						    				</div>
						    				<div class="d-label" v-else>
						    					Customer &nbsp;
						    					<i 
						    						class="fa fa-pencil" 
						    						@click="orderLookup=showing.customer;showing.customer=null;" 
						    						style="cursor: pointer;"
						    						title="Change Linked Order"
					    						></i>
						    				</div>
						    				<input 
						    					class="d-data" 
						    					v-if="showing.customer == null" 
						    					v-model="orderLookup"
						    					v-focus :autofocus="!showing.initialized" 
						    					name="Order Lookup"
						    				>
						    				<input 
						    					class="d-data" 
						    					v-show="showing.customer != null"
						    					v-model="showing.customer" 
						    					v-focus :autofocus="!showing.initialized" 
						    					name="Customer" 
						    					v-required
						    				>
						    			</div>
						    			<div v-if="showing.customer == null">
						    				<div class="details-row">
						    					<div class="order-results" :class="{hasResults:orderLookup!=null}">
						    						<i v-if="orderLookup&&orderLookupResults.length==0">
						    							0 Matching Orders
						    						</i>
						    						<i v-else-if="orderLookup&&orderLookupResults.length==1">
						    							1 Matching Order
						    						</i>
						    						<i v-else-if="orderLookup&&orderLookupResults.length>1">
						    							{{orderLookupResults.length}} Matching Orders
						    						</i>
						    						<i v-else-if="orderLookup!=null">
						    							{{orderLookupResults.length}} Pending Orders
						    						</i>
						    						<i 
						    							class="fa fa-plus" 
						    							v-if="orderLookup!=null" 
						    							style="cursor: pointer;" 
						    							title="Add Customer Manually"
						    							@click="linkOrder(false)"
					    							></i>
						    						<div 
						    							class="result-item" 
						    							v-for="order in orderLookupResults" 
						    							v-html="formatLookupItem(order)"
						    							@click.shift.exact="newTab('/uadmin/orders/edit/'+order.id)"
						    							@click.exact="linkOrder(order)"
						    							style="cursor: pointer;"
						    						></div>
						    					</div>
						    				</div>
						    			</div>
						    			<div v-show="showing.customer != null">
							    			<div class="details-row">
							    				<div class="d-label">
							    					Phone
							    				</div>
							    				<input class="d-data" v-model="showing.phone">
							    			</div>
							    			<div class="details-row address-row">
							    				<div class="d-label">
							    					Address
							    				</div>
							    				<textarea class="d-data address" v-model="showing.address" rows="2"></textarea>
							    			</div>
							    			<div class="details-row">
							    				<div class="city">
								    				<div class="d-label">
								    					City
								    				</div>
								    				<input class="d-data" v-model="showing.city" name="City" v-required>
								    			</div>
								    			<div class="state">
								    				<div class="d-label">
								    					State
								    				</div>
								    				<select class="d-data" v-model="showing.state" name="State" v-required>
								    					<option v-for="option in ['UT','NV']" :value="option">
								    						{{option}}
								    					</option>
								    				</select>
								    			</div>
							    			</div>
							    		</div>
						    			<div class="details-row delete-row">
						    				<span class="btn btn-default" @click="clickDelete" v-show="showing.initialized && showing.customer != null">Delete Appointment</span>
						    			</div>
						    		</div>
						    		<div class="col-lg-6 details-column">
						    			<div class="details-row">
						    				<div class="d-label">
						    					Dispatcher
						    				</div>
						    				<select class="d-data" v-model="showing.dispatcher" name="Dispatcher" v-required>
						    					<option v-for="dispatcher in dispatchers" :value="dispatcher.id">
						    						{{dispatcher.name}}
						    					</option>
						    				</select>
						    			</div>
						    			<div class="details-row">
						    				<div class="d-label">
						    					Technician
						    				</div>
						    				<select class="d-data" v-model="showing.technician" name="Technician" v-required>
						    					<option v-for="technician in techOptions()" :value="technician.id" :disabled="!technician.available">
						    						{{technician.name}}
						    					</option>
						    				</select>
						    			</div>
						    			<div class="details-row text-row">
						    				<div class="d-label">
						    					Service Information
						    				</div>
						    				<textarea class="d-data text" v-model="showing.information"></textarea>
						    			</div>
						    			<div class="details-row text-row">
						    				<div class="d-label">
						    					Special Instructions
						    				</div>
					    					<textarea class="d-data text" v-model="showing.instructions"></textarea>
						    			</div>
						    			<div class="details-row save-row">
						    				<span class="btn btn-primary" @click="saveShowing" :class="{noSave:validationErrorsCount!=0}">
						    					Save
						    				</span>
						    				<span class="btn btn-default" @click="cancelSave">
						    					Cancel
						    				</span>
						    			</div>
						    		</div>

				    			</div>
				    			<div class="comments" v-else-if="showing.toggle==1" 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 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>
			    			</transition>
			    		</div>
		    		</transition>
		    		<transition name="quickfade">
		    			<div class="details-carrot" v-show="showing" id="carrot"></div>	
		    		</transition>
		    	</div>
		   	 	
    			<div class="col-md-2 drag-item" ref="floater" id="floater" v-show="dragging">
					<div class="calendar-item" v-if="dragging" :style="{height: (draggingAppointment.length*52*2)+'px'}">
						<div class="calendar-item-time">
							&nbsp;
						</div>
						<a>{{draggingAppointment.customer}} - {{draggingAppointment.city}}, {{draggingAppointment.state}}</a>
					</div>
				</div>
				<transition name="outer-fade">
					<div class="col-md-2 flextasks-container" ref="flextasks" id="flextasks" v-show="tasksDay!==null">
						<transition name="drop-pullup">
				    		<div class="flextasks-list-day" v-if="tasksDay!==null">
				    			<table>
				    				<thead>
				    					<tr>
				    						<th width="8%">
				    							<i class="fa fa-plus" @mousedown="addTask()" style="cursor: pointer;"></i>
				    						</th>
					    					<th class="flextask-head" width="92%">
					    						FlexTasks 
					    					</th>
					    				</tr>
				    				</thead>
			    					<tbody>
				    					<tr 
				    						v-for="task in getDayTasks()"
				    						:title="'Due: '+getDate(task.due)"
				    						:key="'task'+task.id+'day'+task.due"
				    						@click="showTask(task)"
			    						>
					    					<td width="8%">
					    						<i
					    							v-if="task.type=='trouble'"
					    							class="fa fa-wrench"
					    							style="display: inline;"
					    							title="Type: Trouble"
					    						></i>
					    						<i 
					    							v-else-if="task.type=='disconnect'"
					    							class="fa fa-plug"
					    							style="display: inline;"
					    							title="Type: Disconnect"
					    						></i>
					    					</td>
					    					<td class="flextask" width="92%">
					    						{{task.customer}}
					    						<br>
					    						{{task.city}}, {{task.state}}
					    					</td>
					    				</tr>
					    				<tr
					    					v-if="selected.technician&&selected.technician.tasks.length==0"
					    					key="no-tasks"
					    				>
					    					<td width="8%"></td>
					    					<td width="92%"><i>(none)</i></td>
					    				</tr>
					    			</tbody>
				    			</table>
				    		</div>
				    	</transition>
				    	<transition name="drop-pullup-carrot">
			    			<div class="flextasks-carrot" v-if="tasksDay!==null"></div>
			    		</transition>
					</div>
				</transition>
				<transition name="outer-fade">
					<div class="col-md-5 flextask-container" v-if="task">
						<div class="flextask-header">
	    					<div class="always">
			    				<span class="tab-details" :class="{active:!task.toggle||task.toggle==2}" 
			    					@click="task.toggle!=2?task.toggle=0:task.toggle=2"
			    					>
			    					Details
			    				</span>
			    				<span class="tab-comments" :class="{active:task.toggle==1}" 
			    					@click="task.toggle!=2?task.toggle=1:task.toggle=2"
			    					:style="task.toggle==2?'cursor: default':''"
		    						>
		    						History
		    					</span>
			    			</div>
			    			<div class="sometimes">
			    				<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" 
			    						title="FlexTask Complete!"></i>
				    			</transition>
			    				<i class="fa fa-window-close" @click="hideTask()" key="close"></i>
		    				</div>
						</div>
						<div class="details flextask-details" v-if="task.toggle==0">
							<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">
				    					{{task.phone?task.phone:''}}
				    				</div>
				    			</div>
				    			<div class="details-row address-row">
				    				<div class="d-label">
				    					Address
				    				</div>
				    				<div class="d-data address">
				    					{{task.address?task.address:''}}
				    				</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">
				    				<span class="btn btn-default" @click="completeTask()" v-if="!task.complete">
				    					Complete
				    				</span>
				    				<span class="btn btn-default" @click="completeTask()" v-if="task.complete">
				    					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(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">
				    				<div class="d-label">
				    					Type
				    				</div>
				    				<div class="d-data">
				    					<span v-if="task.type=='trouble'">
				    						<i class="fa fa-wrench"></i> Trouble
				    					</span>
				    					<span v-else-if="task.type=='disconnect'">
				    						<i class="fa fa-plug"></i> Disconnect
				    					</span>
				    				</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="editTask()">
				    					Edit
				    				</span>
				    			</div>
				    		</div>
						</div>
						<div class="edit flextask-edit" v-else-if="task.toggle==2">
							<div class="col-lg-6 details-column">
			    				<div class="details-row">
				    				<div class="d-label">
				    					Due Date
				    				</div>
				    				<select class="d-data" name="Date" v-model="task.due" v-required @change="changeDayTask">
				    					<option v-for="option in dayOptionsTask()" 
				    						:value="option.day" 
				    						:disabled="!option.available"
				    						:selected="option.day == task.due"

				    						>
				    						{{option.formatted}}
				    					</option>
				    				</select>
				    			</div>
				    			<div class="details-row">
				    				<div class="d-label">
				    					Customer
				    				</div>
				    				<input 
				    					class="d-data" 
				    					v-model="task.customer"
				    					name="Customer" 
				    					v-required
				    				>
				    			</div>

				    			<div class="details-row">
				    				<div class="d-label">
				    					Phone
				    				</div>
				    				<input class="d-data" v-model="task.phone">
				    			</div>
				    			<div class="details-row address-row">
				    				<div class="d-label">
				    					Address
				    				</div>
				    				<textarea class="d-data address" v-model="task.address" rows="2"></textarea>
				    			</div>
				    			<div class="details-row">
				    				<div class="city">
					    				<div class="d-label">
					    					City
					    				</div>
					    				<input class="d-data" v-model="task.city" name="City" v-required>
					    			</div>
					    			<div class="state">
					    				<div class="d-label">
					    					State
					    				</div>
					    				<select class="d-data" v-model="task.state" name="State" v-required>
					    					<option v-for="option in ['UT','NV']" :value="option">
					    						{{option}}
					    					</option>
					    				</select>
					    			</div>
				    			</div>
				    			<div class="details-row delete-row">
				    				<span class="btn btn-default" @click="clickDeleteTask()" v-show="task.initialized && task.customer != null">Delete FlexTask</span>
				    			</div>
				    		</div>
				    		<div class="col-lg-6 details-column">
				    			<div class="details-row">
				    				<div class="d-label">
				    					Dispatcher
				    				</div>
				    				<select class="d-data" v-model="task.dispatcher" name="Dispatcher" v-required>
				    					<option v-for="dispatcher in dispatchers" :value="dispatcher.id">
				    						{{dispatcher.name}}
				    					</option>
				    				</select>
				    			</div>
				    			<div class="details-row">
				    				<div class="d-label">
				    					Technician
				    				</div>
				    				<select class="d-data" v-model="task.technician" name="Technician" v-required @change="changeTaskTech()">
				    					<option v-for="technician in technicians" :value="technician.id">
				    						{{technician.name}}
				    					</option>
				    				</select>
				    			</div>
				    			<div class="details-row">
				    				<div class="d-label">
				    					Type
				    				</div>
				    				<select class="d-data" v-model="task.type" name="Type" v-required>
				    					<option :value="'disconnect'">
				    						Disconnect
				    					</option>
				    					<option :value="'trouble'">
				    						Trouble
				    					</option>
				    				</select>
				    			</div>
				    			<div class="details-row text-row">
				    				<div class="d-label">
				    					Notes
				    				</div>
				    				<textarea class="d-data text" v-model="task.notes"></textarea>
				    			</div>
				    			<div class="details-row save-row">
				    				<span class="btn btn-primary" @click="saveTask" :class="{noSave:validationErrorsCount!=0}">
				    					Save
				    				</span>
				    				<span class="btn btn-default" @click="cancelTask">
				    					Cancel
				    				</span>
				    			</div>
				    		</div>
						</div>
						<div class="comments flextask-history" v-else-if="task.toggle==1">
							<div class="comments-inner" id="comments-list">
		    					<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>
				</transition>	    	
			</div>
	    	<div class="col-md-10" v-else>
	    		Please select a technician from the list.
	    	</div>
	    </div>
	    <div class="row hidden-lg" style="margin-bottom: 20px;">
	    	<div class="col-md-12">
	    		This interface can only be viewed with desktop browser widths greater than 1200 pixels.
	    	</div>
	    </div>
	</div>
<?php $__env->stopSection(); ?>

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

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

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