{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Service Requests{{ end }}
{{ define "extraheader" }}
	<style>
		.map-container {
			height: 400px;
			background-color: #e9ecef;
			border-radius: 5px;
			position: relative;
		}
		.map-pin {
			position: absolute;
			font-size: 1.5rem;
		}
		.pin-nuisance {
			color: #dc3545;
		}
		.pin-standing {
			color: #0d6efd;
		}
		.pin-breeding {
			color: #6f42c1;
		}
		.badge-nuisance {
			background-color: #dc3545;
		}
		.badge-standing {
			background-color: #0d6efd;
		}
		.badge-breeding {
			background-color: #6f42c1;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid mt-4">
		<div class="row mb-4">
			<div class="col">
				<div class="d-flex justify-content-between align-items-center mb-3">
					<h2><i class="bi bi-clipboard-check me-2"></i>Service Requests</h2>
					<button class="btn btn-primary">
						<i class="bi bi-plus-circle me-1"></i>New Request
					</button>
				</div>

				<div class="card">
					<div class="card-header">
						<div class="d-flex justify-content-between align-items-center">
							<h5 class="mb-0">District Map View</h5>
							<div>
								<button class="btn btn-sm btn-outline-secondary">
									<i class="bi bi-arrows-fullscreen me-1"></i>Expand
								</button>
								<button class="btn btn-sm btn-outline-secondary ms-2">
									<i class="bi bi-filter me-1"></i>Filter
								</button>
							</div>
						</div>
					</div>
					<div class="card-body p-0">
						<!-- Mock map container - in a real application this would be a map -->
						<div class="map-container">
							<!-- Map pins representing service requests -->
							<i
								class="bi bi-geo-alt-fill map-pin pin-nuisance"
								style="top: 150px; left: 120px;"
							></i>
							<i
								class="bi bi-geo-alt-fill map-pin pin-standing"
								style="top: 100px; left: 250px;"
							></i>
							<i
								class="bi bi-geo-alt-fill map-pin pin-standing"
								style="top: 220px; left: 180px;"
							></i>
							<i
								class="bi bi-geo-alt-fill map-pin pin-breeding"
								style="top: 180px; left: 320px;"
							></i>
							<i
								class="bi bi-geo-alt-fill map-pin pin-nuisance"
								style="top: 250px; left: 400px;"
							></i>
							<div
								class="position-absolute bottom-0 end-0 m-2 bg-white p-2 rounded shadow-sm"
							>
								<div class="d-flex align-items-center mb-1">
									<i class="bi bi-geo-alt-fill pin-nuisance me-2"></i> Biting
									Nuisance
								</div>
								<div class="d-flex align-items-center mb-1">
									<i class="bi bi-geo-alt-fill pin-standing me-2"></i> Standing
									Water
								</div>
								<div class="d-flex align-items-center">
									<i class="bi bi-geo-alt-fill pin-breeding me-2"></i> Active
									Breeding
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row mb-4">
			<div class="col">
				<div class="card">
					<div class="card-header">
						<div class="d-flex justify-content-between align-items-center">
							<h5 class="mb-0">Active Service Requests</h5>
							<div class="input-group w-25">
								<input
									type="text"
									class="form-control form-control-sm"
									placeholder="Search requests..."
								/>
								<button class="btn btn-outline-secondary btn-sm">
									<i class="bi bi-search"></i>
								</button>
							</div>
						</div>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-hover">
								<thead>
									<tr>
										<th scope="col">Created</th>
										<th scope="col">Last Action</th>
										<th scope="col">Next Step</th>
										<th scope="col">Address</th>
										<th scope="col">Photos</th>
										<th scope="col">Type</th>
										<th scope="col">Actions</th>
									</tr>
								</thead>
								<tbody>
									{{ range .C.ActiveRequests }}
										<tr>
											<td>{{ .Created|timeRelative }}</td>
											<td>{{ .LastAction|timeRelative }}</td>
											{{ if eq .NextStep "schedule-appointment" }}
												<td>
													<span class="badge bg-warning text-dark"
														>Schedule Appointment</span
													>
												</td>
											{{ else if eq .NextStep "answer-question" }}
												<td>
													<span class="badge bg-info text-dark"></span>Answer
													Question
												</td>
											{{ else if eq .NextStep "add-to-route" }}
												<td>
													<span class="badge bg-success text-dark"></span>Add to
													Route
												</td>
											{{ else if eq .NextStep "review" }}
												<td>
													<span class="badge bg-secondary text-dark"></span
													>Review
												</td>
											{{ else if eq .NextStep "confirm-details" }}
												<td>
													<span class="badge bg-danger text-dark"></span>Confirm
													Details
												</td>
											{{ else }}
												<td>
													<span class="badge bg-light text-dark"></span>Unknown
												</td>
											{{ end }}
											<td>{{ .Address }}</td>
											<td><i class="bi bi-image me-1"></i>{{ .PhotoCount }}</td>
											{{ if eq .Type "biting-nuisance" }}
												<td>
													<span class="badge badge-nuisance text-white"
														>Biting Nuisance</span
													>
												</td>
											{{ else if eq .Type "standing-water" }}
												<td>
													<span class="badge badge-standing text-white"
														>Standing Water</span
													>
												</td>
											{{ else if eq .Type "active-breeding" }}
												<td>
													<span class="badge badge-standing text-white"
														>Active Breeding</span
													>
												</td>
											{{ else }}
												<td>
													<span class="badge badge-unknown text-white"
														>Unknown</span
													>
												</td>
											{{ end }}


											<td>
												<a
													href="{{ .URLDetail }}"
													class="btn btn-sm btn-outline-info"
													><i class="bi bi-eye"></i
												></a>
											</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row mb-4">
			<div class="col">
				<div class="card">
					<div class="card-header">
						<h5 class="mb-0">Recently Closed Requests (Past 2 Weeks)</h5>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-hover">
								<thead>
									<tr>
										<th scope="col">Employee</th>
										<th scope="col">Type</th>
										<th scope="col">Closed</th>
										<th scope="col">Address</th>
										<th scope="col">Time to Resolution</th>
										<th scope="col">Actions</th>
									</tr>
								</thead>
								<tbody>
									{{ range .C.ClosedRequests }}
										<tr>
											<td>
												<div class="d-flex align-items-center">
													<i class="bi bi-person-circle me-2 fs-5"></i>
													<span>{{ .Employee }}</span>
												</div>
											</td>
											{{ if eq .Type "standing-water" }}
												<td>
													<span class="badge badge-standing text-white"
														>Standing Water</span
													>
												</td>
											{{ else if eq .Type "biting-nuisance" }}
												<td>
													<span class="badge badge-nuisance text-white"
														>Biting Nuisance</span
													>
												</td>
											{{ else if eq .Type "active-breeding" }}
												<td>
													<span class="badge badge-breeding text-white"
														>Active Breeding</span
													>
												</td>
											{{ else }}
												<td>
													<span class="badge badge-unknown text-white"
														>Unknown</span
													>
												</td>
											{{ end }}


											<td>{{ .Closed|timeRelative }}</td>
											<td>{{ .Address }}/td></td>
											<td>{{ .TimeToResolution|duration }}</td>
											<td>
												<a
													href="{{ .URLDetail }}"
													class="btn btn-sm btn-outline-info"
													><i class="bi bi-eye"></i
												></a>
											</td>
										</tr>
									{{ end }}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}