package view

import "github.com/rjNemo/rentease/internal/view/layout"

templ NewBooking(platforms []string) {
	@layout.BaseLayout() {
		<section class="flex justify-between items-center p-4 bg-base-100">
			<hgroup class="flex flex-col">
				<h1 class="text-3xl font-bold text-primary">New Booking</h1>
				<h2 class="text-lg text-muted">Create a new booking</h2>
			</hgroup>
		</section>
		<form method="POST" class="p-4 bg-base-200 rounded-lg shadow-lg w-[98%] mx-auto">
			<fieldset class="space-y-6">
				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
					<label class="form-control w-full">
						<div class="label">
							<span class="label-text">Customer name</span>
						</div>
						<input type="text" id="name" name="name" placeholder="John Doe" 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" placeholder="06 12 34 56 78" class="input input-bordered w-full"/>
					</label>
					<label class="form-control w-full">
						<div class="label">
							<span class="label-text">Customer number</span>
						</div>
						<input type="number" inputmode="numeric" id="customer_number" name="customer_number" placeholder="1" required class="input input-bordered w-full"/>
					</label>
				</div>
				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
					<label class="form-control w-full">
						<div class="label">
							<span class="label-text">Email</span>
						</div>
						<input type="email" id="email" name="email" placeholder="john@doe.com" class="input input-bordered w-full"/>
					</label>
					<label class="form-control">
						<div class="label">
							<span class="label-text">From</span>
						</div>
						<input type="date" id="from" name="from" required 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" required class="input input-bordered w-full"/>
					</label>
				</div>
				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
					<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">
							for _, platform := range platforms {
								<option value={ platform }>{ platform } </option>
							}
						</select>
					</label>
					<label class="form-control w-full">
						<div class="label">
							<span class="label-text">Fees</span>
						</div>
						<input type="number" inputmode="decimal" step="0.01" id="platform_fees" name="platform_fees" placeholder="0" class="input input-bordered w-full"/>
					</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" placeholder="XXX-XXXX-XX" class="input input-bordered w-full"/>
					</label>
				</div>
				<div class="mt-6 flex justify-end">
					<button type="submit" class="btn btn-primary">Submit</button>
				</div>
			</fieldset>
		</form>
	}
}