package views

type BookingViewModel struct {
	Id             string
	Name           string
	PhoneNumber    string
	CustomerNumber string
	Email          string
	From           string
	To             string
	Platform       string
	Platforms      []string
	PlatformFees   string
	Items          []ItemViewModel
	ItemList       []string
	PaymentMethods []string
	Url            string
	Total          string
}

type ItemViewModel struct {
	Item          string
	Quantity      string
	Price         string
	SubTotal      string
	PaymentMethod string
	PaymentStatus string
}

templ BookingById(booking *BookingViewModel) {
	@BaseLayout() {
		<div class="grid">
			<hgroup>
				<h1>Booking ID VFNI#{ booking.Id } </h1>
				<h2>Manage a booking </h2>
			</hgroup>
			<div>
				<a class="outline" role="button" href="/pdf" target="_blank">Create PDF</a>
			</div>
		</div>
		<form method="POST">
			<div class="grid">
				<label for="name">
					Customer name
					<input type="text" id="name" name="name" value={ booking.Name } required autofocus/>
				</label>
				<label for="phone_number">
					Phone number
					<input type="tel" id="phone_number" name="phone_number" value={ booking.PhoneNumber }/>
				</label>
			</div>
			<div class="grid">
				<label for="customer_number">
					Customer number
					<input type="number" id="customer_number" name="customer_number" required value={ booking.CustomerNumber }/>
				</label>
				<label for="email">
					Email
					<input type="email" id="email" name="email" value={ booking.Email }/>
				</label>
			</div>
			<div class="grid">
				<label for="from">
					From
					<input type="date" id="from" name="from" value={ booking.From }/>
				</label>
				<label for="to">
					To
					<input type="date" id="to" name="to" value={ booking.To }/>
				</label>
			</div>
			<div class="grid">
				<label for="platform">
					Platform
					<select id="platform" name="platform">
						<option value={ booking.Platform } selected>{ booking.Platform } </option>
						for _, platform := range booking.Platforms {
							<option value={ platform }>{ platform } </option>
						}
					</select>
				</label>
				<label for="platform_fees">
					Fees
					<input type="number" id="platform_fees" inputmode="decimal" step="0.01" name="platform_fees" value={ booking.PlatformFees }/>
				</label>
			</div>
			<button type="submit">Update</button>
		</form>
		<h3>Line Items </h3>
		<figure>
			<table role="grid">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Item</th>
						<th scope="col">Quantity</th>
						<th scope="col">Price (€)</th>
						<th scope="col">Payment Method</th>
						<th scope="col">Payment Status</th>
						<th scope="col">Sub-total (€)</th>
					</tr>
				</thead>
				<tbody id="line-items">
					for _, item := range booking.Items {
						<tr>
							<th scope="row"></th>
							<td>{ item.Item }</td>
							<td>{ item.Quantity }</td>
							<td>{ item.Price }</td>
							<td>{ item.PaymentMethod }</td>
							<td>{ item.PaymentStatus }</td>
							<td>{ item.SubTotal }</td>
						</tr>
					}
				</tbody>
				<tfoot>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col">{ booking.Total }</th>
				</tfoot>
			</table>
		</figure>
		<details>
			<summary role="button" class="secondary">Add line </summary>
			<form hx-post={ booking.Url } hx-target="#line-items" hx-swap="afterend" hx-on::after-request=" if(event.detail.successful) this.reset()">
				<article>
					<label for="new-line-item">
						Item
						<select name="item" id="new-line-item">
							for _, item := range booking.ItemList {
								<option value={ item }>{ item } </option>
							}
						</select>
					</label>
					<label for="new-line-quantity">
						Quantity
						<input type="number" name="quantity" id="new-line-quantity"/>
					</label>
					<label for="new-line-price">
						Price
						<input type="number" name="price" inputmode="decimal" step="0.01" id="new-line-price"/>
					</label>
					<label for="new-line-method">
						Payment Method
						<select name="method" id="new-line-method">
							for _, paymentMethod := range booking.PaymentMethods {
								<option value={ paymentMethod }>{ paymentMethod } </option>
							}
						</select>
					</label>
					<button type="submit">Add</button>
				</article>
			</form>
		</details>
	}
}