<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- utf-8 works for most cases -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Forcing initial-scale shouldn't be necessary -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- Use the latest (edge) version of IE rendering engine -->
		<title></title>
		<!-- The title tag shows in email notifications, like Android 4.4. -->
		<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
		<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->
		<!-- CSS Reset -->
		<style type="text/css">
			/* What it does: Remove spaces around the email design added by some email clients. */
			/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
			html,  body {
			margin: 0 !important;
			padding: 0 !important;
			height: 100% !important;
			width: 100% !important;
			}
			/* What it does: Stops email clients resizing small text. */
			* {
			-ms-text-size-adjust: 100%;
			-webkit-text-size-adjust: 100%;
			}
			/* What it does: Forces Outlook.com to display emails full width. */
			.ExternalClass {
			width: 100%;
			}
			/* What is does: Centers email on Android 4.4 */
			div[style*="margin: 16px 0"] {
			margin: 0 !important;
			}
			/* What it does: Stops Outlook from adding extra spacing to tables. */
			table,  td {
			mso-table-lspace: 0pt !important;
			mso-table-rspace: 0pt !important;
			}
			/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
			table {
			border-spacing: 0 !important;
			border-collapse: collapse !important;
			table-layout: fixed !important;
			margin: 0 auto !important;
			}
			table table table {
			table-layout: auto;
			}
			/* What it does: Uses a better rendering method when resizing images in IE. */
			img {
			-ms-interpolation-mode: bicubic;
			}
			/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
			.yshortcuts a {
			border-bottom: none !important;
			}
			/* What it does: Another work-around for iOS meddling in triggered links. */
			a[x-apple-data-detectors] {
			color: inherit !important;
			}
		</style>
		<!-- Progressive Enhancements -->
		<style type="text/css">
			/* What it does: Hover styles for buttons */
			.button-td,
			.button-a {
			transition: all 100ms ease-in;
			}
			.button-td:hover,
			.button-a:hover {
			background: #555555 !important;
			border-color: #555555 !important;
			}
			/* Media Queries */
			@media screen and (max-width: 600px) {
			textarea {width: 90% !important;}
			img {width:80%}
			.email-container {
			width: 100% !important;
			}
			.email-container2 {
			width: 85% !important;
			}
			/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
			.fluid,
			.fluid-centered {
			max-width: 100% !important;
			height: auto !important;
			margin-left: auto !important;
			margin-right: auto !important;
			}
			/* And center justify these ones. */
			.fluid-centered {
			margin-left: auto !important;
			margin-right: auto !important;
			}
			/* What it does: Forces table cells into full-width rows. */
			.stack-column,
			.stack-column-center {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
			direction: ltr !important;
			}
			/* And center justify these ones. */
			.stack-column-center {
			text-align: center !important;
			}
			/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
			.center-on-narrow {
			text-align: center !important;
			display: block !important;
			margin-left: auto !important;
			margin-right: auto !important;
			float: none !important;
			}
			table.center-on-narrow {
			display: inline-block !important;
			}
			}
		</style>
	</head>
	<body width="100%" yahoo="yahoo" styler="background: #f2f5f6;
		background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
		background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
		background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );">
		<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse;background: #f2f5f6;
			background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
			background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
			background: linear-gradient(to bottom, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );">
			<tr>
				<td>
					<!-- Visually Hidden Preheader Text : BEGIN -->
					<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Work Order: {{ $work_order_visit->work_order->number }} / {{ $work_order_visit->status_formatted }}</div>
					<!-- Visually Hidden Preheader Text : END --> 
					<!-- Email Header : BEGIN -->
					<table align="center" width="600" class="email-container2" style="-webkit-box-shadow: 0px 0px 20px 0px rgba(170,170,170,1);-moz-box-shadow: 0px 0px 20px 0px rgba(170,170,170,1);box-shadow: 0px 0px 20px 0px rgba(170,170,170,1);">
						<!-- -->
						<table align="center" width="600" bgcolor="#ffffff" class="email-container">
							<tr>
								<td align="center" valign="top" style="padding: 10px 10px 0px 10px;">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tr>
											<td width="58%" class="stack-column-center">
												<table cellspacing="0" cellpadding="0" border="0" style="width: 100%">
													<tr>
														<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:0 10px 10px 10px; text-align: left;" class="center-on-narrow">
															@if (isset($company->preferences['image']) && $company->preferences['image'])<img src="{{ $company->image_full }}" alt="alt_text" border="0" width="320">@endif
															<table>
																<tr>
																	<td width="50%">
																		<h5 style="margin:0;padding:0;text-align: right;padding-right:10px;">{{ $work_order_visit->work_order->customer->name }}</h5>
																	</td>
																	<td width="50%">
																		<p style="margin:0;padding:0;font-size: 0.7em;line-height: 18px;"><a href="https://maps.google.com/?q={{ $work_order_visit->work_order->property->location['address'] }}" target="_blank" style="color: #333333; text-decoration: none;">{{ $work_order_visit->work_order->property->location['address'] }}</a></p>
																	</td>
																</tr>
															</table>
														</td>
													</tr>
												</table>
											</td>
											<td width="42%" class="stack-column-center">
												<table cellspacing="0" cellpadding="0" border="0" style="width: 100%">
													<tr>
														<td style="font-family: sans-serif;font-size: 0.8em; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:10px;text-align: right !important;" class="center-on-narrow">
															<strong>Status:</strong> {{ $work_order_visit->status_formatted }}<br>
															<strong>Work Order:</strong> {{ $work_order_visit->work_order->number }}<br>
															<strong>Work Order Visit:</strong> {{ $work_order_visit->number }}<br>
															<strong>When:</strong> {{ $work_order_visit->date_formatted }}<br>
															{{ $work_order_visit->start_time_formatted }} - {{ $work_order_visit->end_time_formatted }}<br>
															@if (count($work_order_visit->employees))
															<strong>Technicians:</strong>&nbsp;
															@foreach($work_order_visit->employees as $employee)
															{{$employee->name}},&nbsp;
															@endforeach
															<br />
															@endif
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
						<!-- Email Header : END --> 
						<!-- Email Body : BEGIN -->
						@if (count($work_order_visit->services))
						<table  cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
							<tbody style="font-family: sans-serif; font-size: 0.8em; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:0 10px 10px 10px; text-align: center !important;">
								<tr width="100%">
									<th colspan="2" scope="col">
										<div style="margin:0 7%;background:#e3eaed;border-radius:5px;">Services</div>
									</th>
								</tr>
								@foreach($work_order_visit->services as $service)
								<tr>
									<td align="left" valign="top" style="padding: 10px 10px 10px 12%;"><strong>{{$service->name}}</strong></td>
									<td align="center" valign="top" style="padding: 10px 12% 10px 10px;">{{$service->pivot->qty}}<br></td>
								</tr>
								@endforeach
							</tbody>
						</table>
						@endif
						@if (count($work_order_visit->products))
						<table  cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
							<tbody style="font-family: sans-serif; font-size: 0.8em; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:0 10px 10px 10px; text-align: center !important;">
								<tr width="100%">
									<th colspan="2" scope="col">
										<div style="margin:0 7%;background:#e3eaed;border-radius:5px;">Products</div>
									</th>
								</tr>
								@foreach($work_order_visit->products as $product)
								<tr>
									<td align="left" valign="top" style="padding: 10px 10px 10px 12%;"><strong>{{$product->name}}</strong></td>
									<td align="center" valign="top" style="padding: 10px 12% 10px 10px;">{{$product->pivot->qty}}<br></td>
								</tr>
								@endforeach
							</tbody>
						</table>
						@endif
						<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
							<tbody style=" font-family: sans-serif; font-size: 0.8em; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:0 10px 10px 10px; text-align: center !important;">
								<tr bgcolor="" style="margin:0 10px !important;">
									<th colspan="2" scope="col">
										<div style="margin:0 7%;background:#e3eaed;border-radius:5px;">Notes To Customer</div>
									</th>
								</tr>
								@if (isset($work_order_visit->notes_to_customer['weather_condition']) && $work_order_visit->notes_to_customer['weather_condition'])
								<tr>
									<td align="left" valign="top" style="padding: 10px 10px 10px 12%;"><strong>Weather Condition</strong></td>
									<td align="center" valign="top" style="padding: 10px 12% 10px 10px">{{ $work_order_visit->notes_to_customer['weather_condition'] }}</td>
								</tr>
								@endif
								@if (isset($work_order_visit->notes_to_customer['not_swim_for']) && $work_order_visit->notes_to_customer['not_swim_for'])
								<tr>
									<td align="left" valign="top" style="padding: 10px 10px 10px 12%;"><strong>Do not Swim for</strong></td>
									<td align="center" valign="top" style="padding: 10px 12% 10px 10px">{{ $work_order_visit->notes_to_customer['not_swim_for'] }}</td>
								</tr>
								@endif
								<tr>
									<td colspan="2" align="left" valign="top" style="padding: 10px 12% 10px 12%">
										@if ($work_order_visit->notes_to_customer['add_water'])
										- Pool water level is low. Please add water<br />
										@endif
										@if ($work_order_visit->notes_to_customer['pool_door_inaccessible'])
										- Pool doors inaccessible or pet in vicinity<br />
										@endif
										@if ($work_order_visit->notes_to_customer['no_power'])
										- No power to equipment. Please check breakers<br />
										@endif
										@if ($work_order_visit->notes_to_customer['phosphate_treatment'])
										- Phosphate treatment. Pool will be cloudy for 24-48 hours<br />
										@endif
										@if ($work_order_visit->notes_to_customer['call_office'])
										- Please call the office<br />
										@endif
										@if ($work_order_visit->notes_to_customer['time_change_filter_cartridge'])
										- Time to change the filter cartridge<br />
										@endif
										@if ($work_order_visit->other_notes)
										- {{ $work_order_visit->other_notes }}
										@endif
									</td>
								</tr>
							</tbody>
						</table>
						@if (count($work_order_visit->pictures))
						<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="600" class="email-container">
							<tbody style=" font-family: sans-serif; font-size: 0.8em; mso-height-rule: exactly; line-height: 20px; color: #555555; padding:0 10px 10px 10px; text-align: center !important;">
								<tr bgcolor="" style="margin:0 10px !important;">
									<th colspan="2" scope="col">
										<div style="margin:0 7%;background:#e3eaed;border-radius:5px;">Pictures</div>
									</th>
								</tr>
								@foreach($work_order_visit->pictures as $picture)
								<tr>
									<td align="left" valign="top" style="padding: 10px 10px 10px 12%;">
										<a href="{{ $picture->url_full }}" target="_blank">
											<img src="{{ $picture->url_full }}" style="width: 75px; height: auto;" />
										</a>
									</td>
									<td align="right" valign="top" style="padding: 10px 12% 10px 10px;">
										{{ $picture->created_at_formatted }}<br />
										{{ $picture->when_formatted }}
									</td>
								</tr>
								@endforeach
							</tbody>
						</table>
						@endif
						<table align="center" width="600" class="email-container" bgcolor="#777">
							<tr>
								<td style="padding: 20px 10px;width: 100%;font-size: 12px; font-family: sans-serif; mso-height-rule: exactly; line-height:18px; text-align: center; color: #eee !important;">
									{{ $company->name }} - <span class="mobile-link--footer"><a href="https://maps.google.com/?q={{ $company->location['address'] }}" style="color: #FFFFFF; text-decoration: none;">{{ $company->location['address'] }}</a></span><br>{{ $company->contacts['phone'] }} | <a href="mailto:{{$company->contacts['email']}}" style="color: #FFFFFF; text-decoration: none;">{{ $company->contacts['email'] }}</a>
								</td>
							</tr>
						</table>
						<!-- -->
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>