package view

import (
	"fmt"
	"github.com/rjNemo/rentease/internal/view/layout"
)

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
	PdfUrl         templ.SafeURL
	Total          string
}

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

templ BookingById(booking *BookingViewModel) {
	@layout.BaseLayout() {
		<section class="grid">
			<hgroup>
				<h1>{ booking.Name }</h1>
				<h2>{ booking.Id }</h2>
			</hgroup>
			<div>
				<a class="outline" role="button" href={ booking.PdfUrl } target="_blank">Create PDF</a>
				<a href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener"><img src="/static/icons/whatsapp.png" width="20px" style="width: 2rem; margin: 0 1rem"/></a>
				<a href="https://dashboard.stripe.com/payments/new" target="_blank" rel="noreferrer noopener"><img src="/static/icons/stripe.png" width="20px" style="width: 2rem;"/></a>
			</div>
		</section>
		<section>
			<form hx-put={ booking.Url }>
				<fieldset>
					<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>
				</fieldset>
				<button type="submit">Update</button>
			</form>
		</section>
		<section>
			<h3>Line Items </h3>
			<div class="overflow-auto">
				<table class="striped">
					<thead>
						<tr>
							<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>
							<th scope="col"></th>
						</tr>
					</thead>
					<tbody id="line-items">
						for _, item := range booking.Items {
							@LineItem(&item)
						}
					</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">{ booking.Total }</th>
						<th scope="col"></th>
					</tfoot>
				</table>
			</div>
		</section>
		<details>
			<summary role="button" class="secondary">Add line </summary>
			<form hx-post={ fmt.Sprintf("%s/items", 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>
	}
}