{{ template "sync/base.html" . }}

{{ define "title" }}Dash{{ end }}
{{ define "extraheader" }}
	<style>
		body {
			overflow-x: hidden;
		}
		.map-container {
			height: 250px;
			background-color: #e9ecef;
			border-radius: 4px;
		}
		.calendar-container {
			background-color: #f8f9fa;
			border-radius: 4px;
		}
		.calendar-day {
			width: 2.5rem;
			height: 2.5rem;
			line-height: 2.5rem;
			text-align: center;
		}
		.calendar-day.has-events {
			position: relative;
		}
		.calendar-day.has-events::after {
			content: "";
			position: absolute;
			bottom: 0.2rem;
			left: 50%;
			transform: translateX(-50%);
			height: 0.25rem;
			border-radius: 0.125rem;
			background-color: #0d6efd;
		}
		.calendar-day.has-events.light::after {
			width: 0.25rem;
			background-color: #0d6efd;
		}
		.calendar-day.has-events.medium::after {
			width: 0.5rem;
			background-color: #fd7e14;
		}
		.calendar-day.has-events.heavy::after {
			width: 0.75rem;
			background-color: #dc3545;
		}
		.trap-increase {
			color: #dc3545;
		}
		.trap-decrease {
			color: #28a745;
		}
		.status-active {
			background-color: #d4edda;
		}
		.status-break {
			background-color: #fff3cd;
		}
		.status-transit {
			background-color: #cce5ff;
		}
		.tech-table tr td {
			vertical-align: middle;
		}
	</style>
{{ end }}
{{ define "content" }}
	<!-- Header -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<div class="container-fluid">
			<a class="navbar-brand d-flex align-items-center" href="#">
				<img
					src="https://via.placeholder.com/40"
					alt="{{ .DistrictName }} Logo"
					class="me-2"
				/>
				<span>{{ .DistrictName }} Mosquito Abatement District</span>
			</a>
			<button
				class="navbar-toggler"
				type="button"
				data-bs-toggle="collapse"
				data-bs-target="#navbarNav"
			>
				<span class="navbar-toggler-icon"></span>
			</button>
			<!--
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav ms-auto">
				<li class="nav-item">
					<a class="nav-link active" href="#"><i class="bi bi-house-door"></i> Dashboard</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-people"></i> Residents</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-clipboard-data"></i> Reports</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><i class="bi bi-gear"></i> Settings</a>
				</li>
			</ul>
		</div>-->
		</div>
	</nav>

	<div class="container-fluid py-3">
		<div class="row mb-3">
			<div class="col-12">
				<div class="card shadow-sm">
					<div class="card-body py-2">
						<form action="/phone-call/search-results" method="GET">
							<div class="input-group">
								<input
									type="text"
									class="form-control"
									placeholder="Search by ID (e.g., easy twin jazz cats), address, GPS, name or phone..."
									aria-label="Search"
								/>
								<button class="btn btn-primary" type="submit">
									<i class="bi bi-search"></i> Search
								</button>
							</div>
							<small class="form-text text-muted"
								>Quick search for request ID, address, coordinates, contact
								name, or phone number</small
							>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<!-- Left Column -->
			<div class="col-md-8 mb-3">
				<div class="card shadow-sm h-100">
					<div
						class="card-header bg-success text-white d-flex justify-content-between align-items-center py-2"
					>
						<h5 class="mb-0">Mosquito Activity & Relief</h5>
						<a href="/mock/admin/service-request" class="btn btn-light btn-sm"
							><i class="bi bi-plus-circle"></i> New Service Request</a
						>
					</div>
					<div class="card-body">
						<div class="row mb-2">
							<div class="col-12">
								<label class="form-label mb-1">Location of Concern</label>
								<div
									class="map-container d-flex justify-content-center align-items-center"
								>
									<div class="text-center text-muted">
										<i class="bi bi-map fs-1"></i>
										<p>Interactive map will be loaded here</p>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-6 mb-2">
								<h6 class="mb-1">Recent Trap Counts</h6>
								<div class="table-responsive">
									<table class="table table-sm table-bordered">
										<thead class="table-light">
											<tr>
												<th>Trap Location</th>
												<th>Current</th>
												<th>Week Δ</th>
												<th>Month Δ</th>
												<th>YoY</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Elmwood Park</td>
												<td>47</td>
												<td class="trap-decrease">-12%</td>
												<td class="trap-decrease">-23%</td>
												<td class="trap-increase">+5%</td>
											</tr>
											<tr>
												<td>Riverside Dr</td>
												<td>32</td>
												<td class="trap-increase">+8%</td>
												<td class="trap-decrease">-5%</td>
												<td class="trap-decrease">-10%</td>
											</tr>
											<tr>
												<td>Oakdale Creek</td>
												<td>53</td>
												<td class="trap-increase">+15%</td>
												<td class="trap-increase">+22%</td>
												<td class="trap-increase">+17%</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>

							<div class="col-md-6">
								<h6 class="mb-1">Nearby Service Requests</h6>
								<div class="table-responsive">
									<table class="table table-sm table-bordered">
										<thead class="table-light">
											<tr>
												<th>Date</th>
												<th>Status</th>
												<th>Type</th>
												<th>Distance</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>10/15/23</td>
												<td><span class="badge bg-success">Completed</span></td>
												<td>Green Pool</td>
												<td>0.2 mi</td>
											</tr>
											<tr>
												<td>10/18/23</td>
												<td>
													<span class="badge bg-warning text-dark"
														>Scheduled</span
													>
												</td>
												<td>Mosquito Nuisance</td>
												<td>0.3 mi</td>
											</tr>
											<tr>
												<td>10/19/23</td>
												<td>
													<span class="badge bg-info text-dark">Accepted</span>
												</td>
												<td>Previous Source</td>
												<td>0.5 mi</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Right Column - Calendar -->
			<div class="col-md-4 mb-3">
				<div class="card shadow-sm h-100">
					<div class="card-header bg-dark text-white py-2">
						<h5 class="mb-0">Calendar</h5>
					</div>
					<div class="card-body p-2">
						<div class="calendar-container p-2 mb-2">
							<div
								class="d-flex justify-content-between align-items-center mb-2"
							>
								<button class="btn btn-sm btn-outline-secondary">
									<i class="bi bi-chevron-left"></i>
								</button>
								<h6 class="mb-0">October 2023</h6>
								<button class="btn btn-sm btn-outline-secondary">
									<i class="bi bi-chevron-right"></i>
								</button>
							</div>
							<table class="table table-sm mb-0">
								<thead>
									<tr class="text-center">
										<th>Su</th>
										<th>Mo</th>
										<th>Tu</th>
										<th>We</th>
										<th>Th</th>
										<th>Fr</th>
										<th>Sa</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center">
										<td class="calendar-day text-muted">1</td>
										<td class="calendar-day text-muted has-events light">2</td>
										<td class="calendar-day text-muted has-events medium">3</td>
										<td class="calendar-day text-muted">4</td>
										<td class="calendar-day text-muted has-events light">5</td>
										<td class="calendar-day text-muted">6</td>
										<td class="calendar-day text-muted">7</td>
									</tr>
									<tr class="text-center">
										<td class="calendar-day text-muted">8</td>
										<td class="calendar-day text-muted has-events medium">9</td>
										<td class="calendar-day text-muted has-events light">10</td>
										<td class="calendar-day text-muted has-events heavy">11</td>
										<td class="calendar-day text-muted has-events medium">
											12
										</td>
										<td class="calendar-day text-muted has-events light">13</td>
										<td class="calendar-day text-muted">14</td>
									</tr>
									<tr class="text-center">
										<td class="calendar-day text-muted">15</td>
										<td class="calendar-day text-muted has-events medium">
											16
										</td>
										<td class="calendar-day text-muted has-events light">17</td>
										<td class="calendar-day text-muted has-events medium">
											18
										</td>
										<td class="calendar-day text-muted has-events heavy">19</td>
										<td class="calendar-day text-muted has-events medium">
											20
										</td>
										<td class="calendar-day text-muted">21</td>
									</tr>
									<tr class="text-center">
										<td class="calendar-day">22</td>
										<td
											class="calendar-day bg-primary text-white rounded has-events heavy"
										>
											23
										</td>
										<td class="calendar-day has-events medium">24</td>
										<td class="calendar-day has-events light">25</td>
										<td class="calendar-day has-events medium">26</td>
										<td class="calendar-day has-events heavy">27</td>
										<td class="calendar-day">28</td>
									</tr>
									<tr class="text-center">
										<td class="calendar-day">29</td>
										<td class="calendar-day has-events medium">30</td>
										<td class="calendar-day has-events light">31</td>
										<td class="calendar-day text-muted">1</td>
										<td class="calendar-day text-muted has-events light">2</td>
										<td class="calendar-day text-muted">3</td>
										<td class="calendar-day text-muted">4</td>
									</tr>
								</tbody>
							</table>
							<div class="d-flex justify-content-center mt-1 small">
								<span class="me-3"
									><span
										class="d-inline-block bg-primary rounded-circle"
										style="width:8px;height:8px"
									></span>
									Light</span
								>
								<span class="me-3"
									><span
										class="d-inline-block bg-warning rounded-circle"
										style="width:8px;height:8px"
									></span>
									Medium</span
								>
								<span
									><span
										class="d-inline-block bg-danger rounded-circle"
										style="width:8px;height:8px"
									></span>
									Heavy</span
								>
							</div>
						</div>

						<h6 class="mb-1">Today's Schedule - October 23, 2023</h6>
						<div class="table-responsive">
							<table class="table table-sm table-hover mb-0">
								<thead>
									<tr>
										<th>Time</th>
										<th>Address</th>
										<th>Type</th>
										<th>Technician</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>8:00 AM</td>
										<td>123 Maple St</td>
										<td>Nuisance</td>
										<td>S. Johnson</td>
									</tr>
									<tr>
										<td>9:30 AM</td>
										<td>456 Oak Ave</td>
										<td>Green Pool</td>
										<td>M. Williams</td>
									</tr>
									<tr class="table-active">
										<td>11:00 AM</td>
										<td>789 Pine Ln</td>
										<td>Prev Source</td>
										<td>L. Rodriguez</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Technician Roster - Table View -->
		<div class="row">
			<div class="col-12">
				<div class="card shadow-sm">
					<div class="card-header bg-info text-white py-2">
						<h5 class="mb-0">Today's Technician Roster</h5>
					</div>
					<div class="card-body p-0">
						<div class="table-responsive">
							<table class="table table-hover table-sm tech-table mb-0">
								<thead>
									<tr>
										<th>Technician</th>
										<th>Scheduled</th>
										<th>Completed</th>
										<th>Phone</th>
										<th>Status</th>
										<th>Location</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<div class="d-flex align-items-center">
												<img
													src="https://via.placeholder.com/32"
													class="rounded-circle me-2"
													alt="Photo"
												/>
												<span>Sarah Johnson</span>
											</div>
										</td>
										<td>8</td>
										<td>5</td>
										<td>(555) 234-5678</td>
										<td><span class="badge bg-success">Servicing</span></td>
										<td>123 Maple St, Zone 3</td>
									</tr>
									<tr>
										<td>
											<div class="d-flex align-items-center">
												<img
													src="https://via.placeholder.com/32"
													class="rounded-circle me-2"
													alt="Photo"
												/>
												<span>Mark Williams</span>
											</div>
										</td>
										<td>7</td>
										<td>3</td>
										<td>(555) 345-6789</td>
										<td>
											<span class="badge bg-warning text-dark">On Break</span>
										</td>
										<td>Office - Lunchroom</td>
									</tr>
									<tr>
										<td>
											<div class="d-flex align-items-center">
												<img
													src="https://via.placeholder.com/32"
													class="rounded-circle me-2"
													alt="Photo"
												/>
												<span>Lisa Rodriguez</span>
											</div>
										</td>
										<td>9</td>
										<td>6</td>
										<td>(555) 456-7890</td>
										<td><span class="badge bg-primary">In Transit</span></td>
										<td>En route to 789 Pine Ln</td>
									</tr>
									<tr>
										<td>
											<div class="d-flex align-items-center">
												<img
													src="https://via.placeholder.com/32"
													class="rounded-circle me-2"
													alt="Photo"
												/>
												<span>Carlos Martinez</span>
											</div>
										</td>
										<td>6</td>
										<td>4</td>
										<td>(555) 567-8901</td>
										<td><span class="badge bg-success">Servicing</span></td>
										<td>202 Birch Dr, Zone 2</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}