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-3xl font-bold text-primary">{ booking.Name }</h1>
				<h2 class="text-lg text-muted">{ booking.Id }</h2>
			</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 class="p-4 bg-base-100 rounded-lg shadow-sm">
			<h3 class="text-xl font-semibold mb-4">Line Items</h3>
			<div class="overflow-x-auto">
				<table class="table table-zebra w-full">
					<thead>
						<tr>
							<th>Item</th>
							<th>Quantity</th>
							<th>Price (€)</th>
							<th>Payment Method</th>
							<th>Payment Status</th>
							<th>Sub-total (€)</th>
							<th></th>
						</tr>
					</thead>
					<tbody id="line-items">
						for _, item := range booking.Items {
							@LineItem(&item)
						}
					</tbody>
					<tfoot>
						<tr class="font-semibold">
							<td colspan="5" class="text-right">Total:</td>
							<td>{ booking.Total }</td>
							<td></td>
						</tr>
					</tfoot>
				</table>
			</div>
		</section>
		<details class="collapse bg-base-200 mt-8">
			<summary class="collapse-title text-xl font-medium flex items-center gap-2 hover:bg-base-300">
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
				</svg>
				Add New Line Item
			</summary>
			<div class="collapse-content">
				<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()"
					class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"
				>
					<div class="form-control w-full">
						<label class="label" for="new-line-item">
							<span class="label-text">Item</span>
						</label>
						<select class="select select-bordered w-full" name="item" id="new-line-item">
							for _, item := range booking.ItemList {
								<option value={ item }>{ item }</option>
							}
						</select>
					</div>
					<div class="form-control w-full">
						<label class="label" for="new-line-quantity">
							<span class="label-text">Quantity</span>
						</label>
						<input
							type="number"
							name="quantity"
							id="new-line-quantity"
							required
							class="input input-bordered w-full"
						/>
					</div>
					<div class="form-control w-full">
						<label class="label" for="new-line-price">
							<span class="label-text">Price (€)</span>
						</label>
						<input
							type="number"
							name="price"
							inputmode="decimal"
							step="0.01"
							id="new-line-price"
							required
							class="input input-bordered w-full"
						/>
					</div>
					<div class="form-control w-full">
						<label class="label" for="new-line-method">
							<span class="label-text">Payment Method</span>
						</label>
						<select class="select select-bordered w-full" name="method" id="new-line-method">
							for _, paymentMethod := range booking.PaymentMethods {
								<option value={ paymentMethod }>{ paymentMethod }</option>
							}
						</select>
					</div>
					<div class="md:col-span-2 flex justify-end mt-4">
						<button type="submit" class="btn btn-primary">
							Add Line Item
						</button>
					</div>
				</form>
			</div>
		</details>
	}
}