{{/* [ .Shops, .SelectedPlatform, .SelectedShopID, .Listings ] */}}

{{- $acctID := .Identity.Account.AccountID -}}
{{- $shops := .Shops }}
{{- if not $shops }}
	{{- $shops = .Accounts.GetMockShops $acctID -}}
{{- end }}
{{- $selectedPlatform := .SelectedPlatform }}
{{- $selectedShopID := .SelectedShopID }}
{{- if not $selectedPlatform | or (not $selectedShopID) }}
	{{- $formSelections := .Accounts.GetMockEventFormValues $acctID }}
	{{- $selectedPlatform = $formSelections.SalePlatform }}
	{{- $selectedShopID = $formSelections.SaleShopID }}
{{- end }}
{{- $listings := .Listings }}
{{- if $selectedShopID }}
	{{ $listings = .Accounts.GetMockListingsForShop $acctID $selectedPlatform $selectedShopID }}
{{- end }}



{{/* SALES */}}
{{- define "sale-accordion-header" }}
	<h2 class="inline-block">
		Sale
	</h2>
{{ end }}

{{- define "sale-accordion-body" }}
	{{ $acctID := .Identity.Account.AccountID }}
	{{ $selectedPlatform := .SelectedPlatform }}
	{{ $selectedShopID := .SelectedShopID }}
	{{ $listings := .Listings }}

	{{/* form updater*/}}
	<div
		hidden
		hx-trigger="sse:accounts_{{$acctID}}_simulations_sale"
		hx-get="/ui/accounts/{{$acctID}}/simulations/sales-form"
		hx-select="#sales-form"
		hx-target="#sales-form"
	>
	</div>

	<form
		id="sales-form"
		class="flex flex-col items-center gap-[0.75em]"
		hx-post="/api/accounts/{{$acctID}}/simulations/sale"
		hx-swap="none"
		hx-vals='js:{
			"platform": {{printf "%q" $selectedPlatform}},
			"shop-id": {{printf "%q" $selectedShopID}},
		}'
	>
		<select
			name="shop-id"
			class="bg-background"
			required
			hx-put="/api/accounts/{{$acctID}}/simulations/sale/form/shop"
			hx-vals='js:{
				platform: event.target.value.replace(/-[^ ]*/, ""),
				"shop-id": event.target.value.replace(/[^ -]*-/, "")
			}'
		>
			<option disabled selected>
				- Select A Shop -
			</option>
		{{- range $shop := .Shops }}
			<option
				value="{{$shop.Platform}}-{{$shop.ShopID}}"
			{{- if and
				(eq $shop.Platform $selectedPlatform)
				(eq $shop.ShopID $selectedShopID)
			}}
				selected
			{{- end }}
			>
				{{ $shop.Name }}
			</option>
		{{- end }}
		</select>

		<select
			name="listing-id"
			class="bg-background"
			required
		>
		{{- if $listings }}
			<option disabled selected>
				- Select A Listing -
			</option>
			{{- range $listing := $listings }}
			<option value="{{$listing.ListingID}}">
				{{ $listing.Name }} - {{ $listing.SKU }}
			</option>
			{{- end }}
		{{- else }}
			<option disabled selected>
				- No Listings Found -
			</option>
		{{- end }}
		</select>

		<input
			class="p-[0.5em] border-medium border-border rounded-lg bg-background"
			type="number"
			min="1"
			max="1000000000"
			name="count"
			value="0"
			required
		/>

		<div>
			{{ component "button"
				"Text"			"Submit"
				"Background"	true
				"Class"			"m-0"
			}}
		</div>
	</form>
{{ end }}

{{ component "accordion"
	"Name"				"simulate"
	"Shops"				$shops
	"SelectedPlatform"	$selectedPlatform
	"SelectedShopID"	$selectedShopID
	"Listings"			$listings
	"Class" `
		mx-[1em]
		mb-[1em]
	`
	"#accordion-header"	"sale-accordion-header"
	"#accordion-body"	"sale-accordion-body"
}}