package view

templ BookingForm(booking BookingViewModel) {
	<form hx-put={ booking.Url } hx-swap="outerHTML" class="p-4 bg-base-200 rounded-lg shadow-lg w-[98%] mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
		<fieldset class="card bg-base-100 shadow-md p-6">
			<h2
				class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
			>
				Customer Information
			</h2>
			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Name</span>
					</div>
					<input
						type="text"
						id="name"
						name="name"
						value={ booking.Name }
						required
						autofocus
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Phone number</span>
					</div>
					<input
						type="tel"
						id="phone_number"
						name="phone_number"
						value={ booking.PhoneNumber }
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Email</span>
					</div>
					<input
						type="email"
						id="email"
						name="email"
						value={ booking.Email }
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Number of guests</span>
					</div>
					<input
						type="number"
						id="customer_number"
						name="customer_number"
						required
						value={ booking.CustomerNumber }
						class="input input-bordered w-full"
					/>
				</label>
			</div>
		</fieldset>
		<fieldset class="card bg-base-100 shadow-md p-6">
			<h2
				class="text-xl font-semibold mb-4 border-b pb-2 border-base-content/10"
			>
				Booking Details
			</h2>
			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">From</span>
					</div>
					<input
						type="date"
						id="from"
						name="from"
						value={ booking.From }
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">To</span>
					</div>
					<input
						type="date"
						id="to"
						name="to"
						value={ booking.To }
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Platform</span>
					</div>
					<select id="platform" name="platform" class="select select-bordered w-full">
						<option value={ booking.Platform } selected>{ booking.Platform } </option>
						for _, platform := range booking.Platforms {
							<option value={ platform }>{ platform } </option>
						}
					</select>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Platform ID</span>
					</div>
					<input
						type="text"
						id="external_id"
						name="external_id"
						value={ booking.ExternalId }
						class="input input-bordered w-full"
					/>
				</label>
				<label class="form-control w-full">
					<div class="label">
						<span class="label-text">Platform Fees</span>
					</div>
					<input
						type="number"
						id="platform_fees"
						inputmode="decimal"
						step="0.01"
						name="platform_fees"
						value={ booking.PlatformFees }
						class="input input-bordered w-full"
					/>
				</label>
			</div>
		</fieldset>
		<div></div>
		<div class="mt-6 flex justify-end">
			<button type="submit" class="btn btn-primary">Update</button>
		</div>
	</form>
}