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

{{ define "title" }}Settings - Integrations{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/map-service-area.js"></script>
	<style>
		.settings-card {
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
			margin-bottom: 30px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div class="container py-4">
		<div class="row">
			<div class="col-12">
				<div class="d-flex justify-content-between align-items-center mb-4">
					<h1>
						<i class="bi bi-geo-alt-fill text-primary me-2"></i> District
						Settings
					</h1>
					<button class="btn btn-primary">
						<i class="bi bi-save me-2"></i>Save Changes
					</button>
				</div>

				{{ if .Organization.ServiceAreaCentroidGeojson.IsValue }}
					<map-service-area
						organization-id="{{ .Organization.ID }}"
						centroid="{{ .Organization.ServiceAreaCentroidGeojson.MustGet|json }}"
						xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
						ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
						xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
						ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
						tegola="{{ .URL.Tegola }}"
					></map-service-area>
				{{ end }}


				<div class="row">
					<!-- Basic Information -->
					<div class="col-md-6">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5>
									<i class="bi bi-building me-2"></i> Organization Information
								</h5>
							</div>
							<div class="card-body">
								<div class="mb-3">
									<label for="agencyName" class="form-label"
										><i class="bi bi-briefcase me-1"></i> Agency Name</label
									>
									<input
										type="text"
										class="form-control"
										id="name"
										value="{{ .Organization.Name }}"
									/>
								</div>
								<div class="mb-3">
									<label for="website" class="form-label"
										><i class="bi bi-globe me-1"></i> Website</label
									>
									<input
										type="url"
										class="form-control"
										id="website"
										value="{{ .Organization.Website.GetOr "" }}"
									/>
								</div>
								<div class="mb-3">
									<label for="generalManager" class="form-label"
										><i class="bi bi-person-badge me-1"></i> General Manager
										Name</label
									>
									<input
										type="text"
										class="form-control"
										id="generalManager"
										value="{{ .Organization.GeneralManagerName.GetOr "" }}"
									/>
								</div>
							</div>
						</div>
					</div>

					<!-- Contact Information -->
					<div class="col-md-6">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5>
									<i class="bi bi-telephone me-2"></i> Contact Information
								</h5>
							</div>
							<div class="card-body">
								<div class="mb-3">
									<label for="address" class="form-label"
										><i class="bi bi-geo me-1"></i> Street</label
									>
									<input
										type="text"
										class="form-control"
										id="address"
										value="{{ .Organization.OfficeAddressStreet.GetOr "" }}"
									/>
								</div>
								<div class="row">
									<div class="col-md-6 mb-3">
										<label for="city" class="form-label"
											><i class="bi bi-building me-1"></i> City</label
										>
										<input
											type="text"
											class="form-control"
											id="city"
											value="{{ .Organization.OfficeAddressCity.GetOr "" }}"
										/>
									</div>
									<div class="col-md-6 mb-3">
										<label for="postalCode" class="form-label"
											><i class="bi bi-mailbox me-1"></i> Postal Code</label
										>
										<input
											type="text"
											class="form-control"
											id="postalCode"
											value="{{ .Organization.OfficeAddressPostalCode.GetOr "" }}"
										/>
									</div>
								</div>
								<div class="mb-3">
									<label for="phoneNumber" class="form-label"
										><i class="bi bi-telephone me-1"></i> Phone Number
									</label>
									<input
										type="tel"
										class="form-control"
										id="phoneNumber"
										value="{{ .Organization.OfficePhone.GetOr "" }}"
									/>
								</div>
								<div class="mb-3">
									<label for="faxNumber" class="form-label"
										><i class="bi bi-printer me-1"></i> Fax Number</label
									>
									<input
										type="tel"
										class="form-control"
										id="faxNumber"
										value="{{ .Organization.OfficeFax.GetOr "" }}"
									/>
								</div>
							</div>
						</div>
					</div>

					<!-- Organization Coverage Information -->
					<div class="col-12">
						<div class="card settings-card">
							<div class="card-header bg-light">
								<h5><i class="bi bi-map me-2"></i> Service Area Coverage</h5>
							</div>
							<div class="card-body">
								<div class="row">
									<div class="col-md-6 mb-3">
										<label for="totalArea" class="form-label"
											><i class="bi bi-rulers me-1"></i> Total Area (square
											meters)</label
										>
										<input
											type="number"
											class="form-control"
											id="totalArea"
											value="{{ if .Organization.ServiceAreaSquareMeters.IsValue }}
												{{ .Organization.ServiceAreaSquareMeters.MustGet }}
											{{ end }}"
										/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--<div class="d-flex justify-content-end mt-3">
					<button class="btn btn-secondary me-2"><i class="bi bi-x-circle me-1"></i> Cancel</button>
					<button class="btn btn-primary"><i class="bi bi-save me-1"></i> Save Changes</button>
				</div>-->
			</div>
		</div>
	</div>
{{ end }}