package view

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

templ BookingById(booking *BookingViewModel) {
	@layout.BaseLayout() {
		<section class="flex justify-between items-center p-4 bg-base-100">
			<hgroup class="flex flex-col">
				<h1 class="text-2xl font-bold text-primary">{ booking.Name }</h1>
				<span class="text-sm text-base-content/60">{ booking.Id }</span>
			</hgroup>
			<div class="flex items-center gap-4">
				<a class="btn btn-primary btn-sm" href={ booking.PdfUrl } target="_blank">Create PDF</a>
				<a href="https://web.whatsapp.com/" target="_blank" rel="noreferrer noopener" class="btn btn-ghost btn-sm btn-square">
					<img src="/static/icons/whatsapp.png" class="w-6 h-6"/>
				</a>
				<a href="https://dashboard.stripe.com/payments/new" target="_blank" rel="noreferrer noopener" class="btn btn-ghost btn-sm btn-square">
					<img src="/static/icons/stripe.png" class="w-6 h-6"/>
				</a>
				if booking.Canceled {
					<span class="badge badge-error">Canceled</span>
				} else {
					<button class="btn btn-outline btn-error btn-sm" hx-patch={ booking.CancelUrl } hx-swap="outerHTML">Cancel</button>
				}
			</div>
		</section>
		<section>
			@BookingForm(*booking)
		</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>
						<tr>
							<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>
						</tr>
					</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" required/>
					</label>
					<label for="new-line-price">
						Price
						<input type="number" name="price" inputmode="decimal" step="0.01" id="new-line-price" required/>
					</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>
	}
}