<div class="schedule-shift-dialog-container zoom-anim-dialog mfp-hide dialog" ng-controller="ShiftScheduleScheduleShiftCtrl">

	<div>
		<h1 ng-if="!loading" class="title">
			<span>{{shift.community.name}}</span>
		</h1>
		<h1 ng-if="loading" class="title"><span>Loading</span></h1>

		<div class="divider"></div>

		<span ng-if="loading"><br></span>

		<div class="bar-loader bar-loader-search" ng-class="{'bar-loader-loading': loading}"></div>

		<div class="support-box-wrap box-content2">

			<div class="box-content-table">
				<h2>Schedule changes</h2>
				<div class="log">
					<div ng-if="!shift.log.length">There is no schedule log.</div>
					<table class="tb-grid tb-zebra" ng-if="shift.log.length">
						<thead>
							<tr>
								<th>Driver</th>
								<th>Action</th>
								<th>Date</th>
								<th>Changed by</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="log in shift.log">
								<td>{{log.driver}}</td>
								<td>
									<span class="tag tag-green" ng-if="log.assigned">Assigned</span>
									<span class="tag tag-red" ng-if="!log.assigned">Removed</span>
									<span ng-if="!log.assigned">
										<span ng-if="log.reason" class="listview-smallest">{{log.reason}}</span><span ng-if="log.reason_other" class="listview-smallest">: {{log.reason_other}}</span>
										<span class="tag tag-green" ng-if="log.find_replacement === true">Found replacement</span>
										<span class="tag tag-red" ng-if="log.find_replacement === false">Didn't find replacement</span>
									</span>
								</td>
								<td>{{log.date | localtime:'MM/DD @ h:mm a'}}</td>
								<td>{{log.admin}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="support-box-wrap box-content2">
			<div class="box-content-table">
				<div class="ul-inputs">
					<ul ng-class="{'submitted':formEditShiftSubmitted}" class="ul-inputs">
						<li class="li-input">
							<div class="info">
								<span class="label">From:</span>
								{{shift.segment.start.day}}<strong>{{shift.segment.start.hour}}</strong>
								&nbsp;&nbsp;<span class="label">To:</span>
								{{shift.segment.end.day}}<strong>{{shift.segment.end.hour}}</strong>
								({{shift.community.tz}})
								<span class="tag tag-red" ng-if="shift.hidden">This shift is hidden from drivers!</span>
								<span class="tag tag-green" ng-if="saved">Saved!</span>
								<span class="tag tag-red" ng-if="!shift.editable">Ready only!</span>
							</div>
						</li>
					</ul>
				</div>

				<div class="drivers" id="driverShiftScroll">
					<table class="tb-grid tb-zebra" ng-if="shift.drivers">
						<thead>
							<tr>
								<th></th>
								<th>Driver</th>
								<th>Preferences</th>
								<th ng-if="shift.recurring">Make it permanent</th>
								<th>Notes</th>
							</tr>
						</thead>
						<tbody ng-repeat="driver in shift.drivers">
							<tr>
								<td>
									<input type="checkbox" ng-disabled="!shift.editable" ng-change="assignDriver( driver )" ng-model="driver.assigned">
								</td>
								<td>
									{{driver.name}}
									<br><a href ng-click="openCallTextModal(driver.phone)" class="listview-smaller">{{driver.phone | formatPhone}}</a>
									<div ng-if="driver.id_admin_shift_assign_log">
										<br>
										<button ng-click='driver.removal_info = !driver.removal_info' class="button button-small button-empty button-border button-blue"><i class="fa fa-edit"></i>&nbsp;&nbsp;Edit removal info</button>
									</div>
									<div class="listview-smaller">
										Orders/Hr: {{driver.statistics.avg_orders_hours}}<br>
										Avg Delivery Time: {{driver.statistics.avg_delivery_time}} min<br>
										Total Orders: {{driver.statistics.orders}}<br>
									</div>
								</td>
								<td>
									<span class="tag tag-green" ng-if="driver.ranking == 1">Yes, definitely</span>
									<span class="tag tag-blue" ng-if="driver.ranking >= 2">I'm available</span>
									<span class="tag tag-red" ng-if="driver.ranking == 0">Definitely not</span>
									<span class="tag tag-grey" ng-if="driver.ranking == -1">Did not fill out</span>
									<div class="listview-small">
									Shifts desired:
										<strong ng-if="driver.total_shifts_want_work">{{driver.total_shifts_want_work}}</strong>
										<strong ng-if="!driver.total_shifts_want_work">?</strong>
										<br>Assigned shifts: <strong>{{driver.total_shifts}}</strong>
									</div>

								</td>
								<td ng-if="shift.recurring"><input ng-change="assignDriverPermanently( driver )" ng-disabled="!shift.editable" type="checkbox" ng-model="driver.assigned_permanently"></td>
								<td>

									<div ng-if="!driver.editing" ng-click="driver.editing = true">
										<div ng-if="driver.notes_text">
											<div class="schedule-notes listview-smaller wrap">{{driver.notes_text}}</div>
												<span ng-if="driver.notes.id_admin" class="listview-smaller">
													<i>by <span>{{driver.notes.added_by}}</span> @
														<span>{{driver.notes.date_utc | localtime:'MM/DD h:mm a'}}</span>
												</i>
											</span>
										</div>
										<div ng-if="!driver.notes_text">
											<button class="button button-small button-empty button-border button-blue"><i class="fa fa-pencil"></i>&nbsp;&nbsp;Add Note</button>
										</div>
									</div>

									<div ng-if="driver.editing">
										<textarea ng-model="driver.notes_text"></textarea>
										<br>
										<button ng-click='saveDriverNote( driver )' class="button button-small button-empty button-border button-green"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;Save Notes</button>
										<button ng-click='driver.editing = false' class="button button-small button-empty button-border button-red"><i class="fa fa-ban"></i>&nbsp;&nbsp;Cancel</button>
									</div>
								</td>
							</tr>
							<tr ng-if="driver.removal_info">
								<td></td>
								<td colspan="4">
									<table class="tb-grid tb-sub-grid">
										<tr>
											<td>
												<strong ng-if="!driver.id_admin_shift_assign_log">Remove from shift reason:</strong>
												<strong ng-if="driver.id_admin_shift_assign_log">Edit removal info:</strong>
											</td>
											<td ng-if="driver.reason && driver.reason != 'Our decision'"><strong>Did they find one replacement:</strong></td>
											<td width="100%;"></td>
										</tr>
										<tr>
											<td>
												<select ng-model="driver.reason">
													<optgroup label="Unacceptable reason">
														<option value="Unacceptable: Doesn't want to work">Doesn't want to work</option>
														<option value="Unacceptable: Studying / Homework">Studying / Homework</option>
														<option value="Unacceptable: Conflicting other job / commitment">Conflicting other job / commitment</option>
														<option value="Unacceptable: Flaked/MIA">Flaked/MIA</option>
														<option value="Unacceptable: Other">Other</option>
													</optgroup>
													<optgroup label="Acceptable reason">
														<option value="Acceptable: Sick">Sick</option>
														<option value="Acceptable: Car Troubles">Car Troubles</option>
														<option value="Acceptable: Family Emergency">Family Emergency</option>
														<option value="Acceptable: Other">Other</option>
													</optgroup>
													<option value="Our decision">Removed from shift, our decision</option>
												</select>
												<br>
												<input type="text" class="text-reason" ng-if="driver.reason == 'Unacceptable: Other' || driver.reason == 'Acceptable: Other'" placeholder="Type the reason" maxlength="200" ng-model="driver.reason_other" />
											</td>
											<td ng-if="driver.reason && driver.reason != 'Our decision'">
												<select ng-model="driver.find_replacement">
													<option value="false">No</option>
													<option value="true">Yes</option>
												</select>
											</td>
											<td>
												<button ng-if="!driver.id_admin_shift_assign_log" ng-click='removeShiftAssigment( driver )' class="button button-small button-empty button-border button-red"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;Remove assignment!</button>
												<button ng-if="driver.id_admin_shift_assign_log" ng-click='updateRemovalInfo( driver )' class="button button-small button-empty button-border button-blue"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;Update removal info</button>

											</td>
										</tr>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>