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

{{ define "title" }}Data Entry{{ end }}
{{ define "extraheader" }}
	<style>
		.tech-photo {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 50%;
		}
		.main-container {
			max-width: 1200px;
			margin: 0 auto;
		}
		.action-button {
			padding: 15px 30px;
			font-size: 1.2rem;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container-fluid p-4 main-container">
		<h1 class="mb-4">Technician Routing & Dispatch</h1>

		<div class="card mb-4">
			<div class="card-header bg-primary text-white">
				<h2 class="h4 mb-0">Technician Roster</h2>
			</div>
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-hover align-middle">
						<thead class="table-light">
							<tr>
								<th>Technician</th>
								<th>Working Hours</th>
								<th>Truck Assignment</th>
								<th>Warrant Service</th>
								<th>Drone Certified</th>
								<th>Routing Options</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/men/32.jpg"
											alt="John Davis"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">John Davis</div>
											<div class="small text-muted">ID: T-1001</div>
										</div>
									</div>
								</td>
								<td>7:00 AM - 3:30 PM</td>
								<td>Truck #103</td>
								<td><span class="badge bg-success">Yes</span></td>
								<td><span class="badge bg-danger">No</span></td>
								<td>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="warrant-partner1"
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Require second person for warrant service"
										/>
										<label class="form-check-label" for="warrant-partner1"
											>Warrant Partner</label
										>
									</div>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="resident-history1"
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Route to previously visited residents"
										/>
										<label class="form-check-label" for="resident-history1"
											>Prior Interactions</label
										>
									</div>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											id="include-route1"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Include in route calculations"
										/>
										<label class="form-check-label" for="include-route1"
											>Include in Routes</label
										>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/women/65.jpg"
											alt="Sarah Johnson"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">Sarah Johnson</div>
											<div class="small text-muted">ID: T-1042</div>
										</div>
									</div>
								</td>
								<td>8:00 AM - 4:30 PM</td>
								<td>Truck #118</td>
								<td><span class="badge bg-success">Yes</span></td>
								<td><span class="badge bg-success">Yes</span></td>
								<td>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="warrant-partner2"
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Require second person for warrant service"
										/>
										<label class="form-check-label" for="warrant-partner2"
											>Warrant Partner</label
										>
									</div>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="resident-history2"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Route to previously visited residents"
										/>
										<label class="form-check-label" for="resident-history2"
											>Prior Interactions</label
										>
									</div>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											id="include-route2"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Include in route calculations"
										/>
										<label class="form-check-label" for="include-route2"
											>Include in Routes</label
										>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/men/44.jpg"
											alt="Michael Chen"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">Michael Chen</div>
											<div class="small text-muted">ID: T-1019</div>
										</div>
									</div>
								</td>
								<td>6:30 AM - 3:00 PM</td>
								<td>Truck #107</td>
								<td><span class="badge bg-danger">No</span></td>
								<td><span class="badge bg-success">Yes</span></td>
								<td>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="warrant-partner3"
											disabled
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Require second person for warrant service"
										/>
										<label class="form-check-label" for="warrant-partner3"
											>Warrant Partner</label
										>
									</div>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="resident-history3"
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Route to previously visited residents"
										/>
										<label class="form-check-label" for="resident-history3"
											>Prior Interactions</label
										>
									</div>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											id="include-route3"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Include in route calculations"
										/>
										<label class="form-check-label" for="include-route3"
											>Include in Routes</label
										>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="d-flex align-items-center">
										<img
											src="https://randomuser.me/api/portraits/women/22.jpg"
											alt="Jessica Martinez"
											class="tech-photo me-3"
										/>
										<div>
											<div class="fw-bold">Jessica Martinez</div>
											<div class="small text-muted">ID: T-1055</div>
										</div>
									</div>
								</td>
								<td>7:30 AM - 4:00 PM</td>
								<td>Truck #112</td>
								<td><span class="badge bg-success">Yes</span></td>
								<td><span class="badge bg-success">Yes</span></td>
								<td>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="warrant-partner4"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Require second person for warrant service"
										/>
										<label class="form-check-label" for="warrant-partner4"
											>Warrant Partner</label
										>
									</div>
									<div class="form-check mb-2">
										<input
											class="form-check-input"
											type="checkbox"
											id="resident-history4"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Route to previously visited residents"
										/>
										<label class="form-check-label" for="resident-history4"
											>Prior Interactions</label
										>
									</div>
									<div class="form-check">
										<input
											class="form-check-input"
											type="checkbox"
											id="include-route4"
											checked
											data-bs-toggle="tooltip"
											data-bs-placement="left"
											title="Include in route calculations"
										/>
										<label class="form-check-label" for="include-route4"
											>Include in Routes</label
										>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="d-grid gap-2 col-md-6 mx-auto">
			<a
				href="{{ .URLs.DispatchResults }}"
				class="btn btn-primary btn-lg action-button"
				type="button"
			>
				<i class="bi bi-calculator me-2"></i>Calculate Routes
			</a>
		</div>
	</div>
{{ end }}