package view

import (
	"github.com/rjNemo/rentease/internal/i18n"
	"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">{ i18n.Localize(ctx, "booking.new.title") }</h1>
				<h2 class="text-lg text-muted">{ i18n.Localize(ctx, "booking.new.subtitle") }</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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.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">{ i18n.Localize(ctx, "booking.new.submit") }</button>
				</div>
			</fieldset>
		</form>
	}
}