<script lang="ts">
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import { liveQuery } from 'dexie';
	import { db_events } from '$lib/ae_events/db_events';
	import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger
	} from '$lib/stores/ae_events_stores';

	let event_exhibit_obj = liveQuery(() => db_events.exhibit.get($events_slct.exhibit_id));

	if (!$events_sess.stripe) {
		$events_sess.stripe = {};
	}
	if (!$events_sess.stripe.license_qty) {
		$events_sess.stripe.license_qty = 1;
		$events_sess.stripe.rental_qty = 0;
		$events_sess.stripe.client_reference_id = $events_slct.exhibit_id;
		// $events_sess.stripe.btn_payment_id

		console.log(`$events_sess.stripe =`, $events_sess.stripe);
	}

	// $: if ($events_sess.stripe.rental_option) {
	//     console.log('Rental Option', $events_sess.stripe.rental_option);
	//     if ($events_sess.stripe.rental_option == true && !$events_sess.stripe.rental_qty) {
	//         $events_sess.stripe.rental_qty = 1;
	//     } else if (!$events_sess.stripe.rental_option) {
	//         $events_sess.stripe.rental_qty = 0;
	//     }
	// } else {
	//     $events_sess.stripe.rental_option = false;
	// }

	$: if (
		($events_sess.stripe && $events_sess.stripe.license_qty >= 0) ||
		$events_sess.stripe.rental_qty >= 0
	) {
		console.log(
			`$events_sess.stripe.license_qty=${$events_sess.stripe.license_qty} and $events_sess.stripe.rental_qty=${$events_sess.stripe.rental_qty}`
		);
		// $events_sess.stripe.license_qty = parseInt($events_sess.stripe.license_qty);

		// $events_sess.stripe.rental_qty = parseInt($events_sess.stripe.rental_qty);

		if ($events_sess.stripe.rental_qty == 0) {
			// $events_sess.stripe.rental_qty = 0;

			if ($events_sess.stripe.license_qty == 1) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_1_license;
			}
			if ($events_sess.stripe.license_qty == 3) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_3_license;
			}
			if ($events_sess.stripe.license_qty == 6) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_6_license;
			}
			if ($events_sess.stripe.license_qty == 10) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_10_license;
			}
		} else {
			if ($events_sess.stripe.license_qty == 1) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_1_license_rental;
			}
			if ($events_sess.stripe.license_qty == 3) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_3_license_rental;
			}
			if ($events_sess.stripe.license_qty == 6) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_6_license_rental;
			}
			if ($events_sess.stripe.license_qty == 10) {
				$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_10_license_rental;
			}
		}

		// We need to force the Stripe Buy Button to reload. I was expecting this to happen automatically when the payment ID changed.
		// console.log(document.getElementById('stripe_buy_button'));

		if (!$events_sess.stripe.client_reference_id) {
			$events_sess.stripe.client_reference_id = $events_slct.exhibit_id;
		}
		console.log(`$events_sess.stripe =`, $events_sess.stripe);

		if (document.getElementById('stripe_buy_button')) {
			document.getElementById('stripe_buy_button').remove();

			let stripe_buy_button = document.createElement('stripe-buy-button');
			stripe_buy_button.id = 'stripe_buy_button';
			stripe_buy_button.setAttribute('buy-button-id', $events_sess.stripe.btn_payment_id);
			stripe_buy_button.setAttribute('publishable-key', $events_sess.stripe.publishable_key);
			stripe_buy_button.setAttribute(
				'client-reference-id',
				$events_sess.stripe.client_reference_id
			);
			document.getElementById('stripe_buy_button_container').appendChild(stripe_buy_button);
		} else {
			console.log('No Stripe Buy Button found.');
		}
	}
</script>

<section class="tab__payment flex flex-col wrap justify-center items-center space-y-4">
	<h2 class="h3">
		<span class="fas fa-credit-card mx-1"></span>
		Payment
	</h2>

	{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
		{#if $event_exhibit_obj?.priority}
			<h3 class="h4">Marked as Paid</h3>

			<div class="border border-slate-500/10 p-2 preset-tonal-success space-y-4">
				<p>
					Thank you for your payment. You have purchased {$event_exhibit_obj?.license_max} user license(s)
					for the lead retrieval service with your booth at ISHLT 2024 in Prague.
				</p>

				{#if $event_exhibit_obj?.leads_device_sm_qty > 0}
					<p>
						You have also rented {$event_exhibit_obj?.leads_device_sm_qty} tablet(s) for using with the
						lead retrievals. You will be able to pick up your rental tablets at ISHLT's onsite registration.
					</p>
				{:else}
					<p>
						You have not rented any tablets for scanning. You can use your own device(s) with this
						service.
					</p>
				{/if}

				<p>
					To save space while using this app you can hide this payment tab now that you have paid
					for your licenses. This can be unhidden under the Conf(ig) tab if needed.
				</p>
			</div>

			<button
				type="button"
				on:click={() => {
					let confirm_hide = confirm('You can unhide this later under the Config tab.');
					if (confirm_hide) {
						$events_loc.leads.show_option__paid_tab = false;
						$events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
					}
				}}
				class="btn preset-tonal-primary"
				title="This payment tab can be hidden once marked as paid."
			>
				<span class="fas fa-eye-slash m-1"></span>
				Hide This Paid Tab?
			</button>
		{:else}
			<h3 class="h4">Not Marked as Paid</h3>

			<div class="border border-slate-500/10 p-2 preset-tonal-secondary">
				<p>
					Please select the number of licenses to purchase and if you need to rent any tablets for
					scanning. As a reminder, you can use your own device (cell phone, tablet, laptop, etc) to
					scan the QR codes on the badges of the attendees. Tablet rentals are limited in supply for
					ISHLT 2024 in Prague and will be given out on a first come first served basis.
				</p>
			</div>

			<script async src="https://js.stripe.com/v3/buy-button.js">
			</script>

			<div class="w-2/3">
				<label>
					Select number of licenses to purchase:<br />
					<select
						id="license_qty"
						name="license_qty"
						bind:value={$events_sess.stripe.license_qty}
						class="select max-w-72"
					>
						<option value={1}> 1 user license - $120 </option>
						<option value={3}> Up to 3 user licenses - $330 </option>
						<option value={6}> Up to 6 user licenses - $660 </option>
						<option value={10}> Up to 10 user licenses - $1,100 </option>
					</select>
				</label>
				<p class="text-sm">
					Each person associated with your exhibit needs a license to use the lead retrieval service
					for exhibitors.
				</p>
			</div>

			<!-- <div>
    CHK Do you need to rent tablets as well?
    <input
        type="checkbox"
        name="rental_option"
        value="testing"
        bind:checked={$events_sess.stripe.rental_option}
        on:click={() => {
            console.log('Rental Option', $events_sess.stripe.rental_option);
            // $events_sess.stripe.rental_qty = 0;
        }}
        >
</div> -->

			<!-- {#if $events_sess.stripe.rental_qty > 0} -->
			<!-- <div> -->
			<!-- Do you need to rent tablets as well?
<input
    type="checkbox"
    name="rental_option"
    value={true}
    bind:checked={$events_sess.stripe.rental_option}
    on:click={() => {
        console.log('Rental Option');
        if ($events_sess.stripe.rental_option) {
            $events_sess.stripe.rental_qty = 1;
        } else {
            $events_sess.stripe.rental_qty = 0;
        }
        // $events_sess.stripe.rental_qty = 0;
    }}
    > -->

			<!-- <button on:click={() => {
    console.log('License(s) Only');
    $events_sess.stripe.rental_qty = 0;
    }}
    class="btn variant-soft-secondary"
    >
    License(s) Only
</button> -->
			<!-- </div> -->

			<div class="w-2/3">
				<label>
					Select number of tablets to rent:<br />
					<select
						id="rental_qty"
						name="rental_qty"
						bind:value={$events_sess.stripe.rental_qty}
						class="select max-w-52"
					>
						<option value={0}>No tablet rentals - $0</option>
						<option value={1}>1 tablet - $115</option>
						<option value={2}>2 tablets - $230</option>
						<option value={3}>3 tablets - $345</option>
						<option value={4}>4 tablets - $460</option>
						<option value={5}>5 tablets - $575</option>
						<option value={6}>6 tablets - $690</option>
						<option value={7}>7 tablets - $805</option>
						<option value={8}>8 tablets - $920</option>
						<option value={9}>9 tablets - $1,035</option>
						<option value={10}>10 tablets - $1,150</option>
					</select>
				</label>
				<p class="text-sm">
					You can use your own device(s) with this service. Renting tablets for scanning is not
					required.
				</p>
			</div>

			<!-- {:else} -->

			<!-- <div>
BTN Do you need to rent tablets as well?
<button on:click={() => {
    console.log('License(s) with Tablet Rental');
    $events_sess.stripe.rental_qty = 1;
    }}
    class="btn variant-soft-secondary"
    >
    License(s) with Tablet Rental
</button>
</div> -->
			<!-- {/if} -->

			{#if $events_sess.stripe.btn_payment_id}
				<div id="stripe_buy_button_container" class="w-2/3">
					<stripe-buy-button
						id="stripe_buy_button"
						buy-button-id={$events_sess.stripe.btn_payment_id}
						publishable-key={$events_sess.stripe.publishable_key}
						client-reference-id={$events_sess.stripe.client_reference_id}
					>
					</stripe-buy-button>
					<p class="text-sm">
						You have selected to purchase {$events_sess.stripe.license_qty} user license(s) and rent
						{$events_sess.stripe.rental_qty} tablet(s). Press the button above to pay by credit card,
						debit card, or ACH direct debit.
					</p>
					<p class="text-sm preset-tonal-warning">
						<strong>WARNING:</strong> Please be sure to double check and update the quantities on the
						next page.
					</p>
				</div>
			{/if}

			<div class="border border-slate-500/10 p-2 preset-tonal-warning">
				<p>
					<strong>NOTE:</strong> Your payment will be reviewed and is not reflected immediately on
					this page for your exhibit. It may take up to 2 business days for this to show as being
					paid. If you have any questions or concerns please email
					<a
						href="mailto:exhibits@oneskyit.com"
						class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
						>exhibits@oneskyit.com</a
					>.
				</p>
			</div>

			<!-- <div>
1 user license<br>
<stripe-buy-button
    buy-button-id="buy_btn_1OvqWJ2gJkNsDuiNqMCWz5nG"
    publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
    >
</stripe-buy-button>
</div> -->

			<!-- <div>
1 user license with tablet rental<br>
<stripe-buy-button
    buy-button-id="buy_btn_1OvqVA2gJkNsDuiNhk9r8Io2"
    publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
    >
</stripe-buy-button>
</div> -->

			<!-- <div>
Up to 3 user licenses<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrI22gJkNsDuiNXjBg3c4Y"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- <div>
Up to 3 user licenses with tablet rental<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrKa2gJkNsDuiNhSBCkNau"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- <hr> -->

			<!-- <div>
Up to 6 user licenses<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrWc2gJkNsDuiN7mnwvZNL"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- <div>
Up to 6 user licenses with tablet rental<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrXP2gJkNsDuiNZpWZs3Uy"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- <div>
Up to 10 user licenses<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrPM2gJkNsDuiNRCMHfSuz"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- <div>
Up to 10 user licenses with tablet rental<br>
<stripe-buy-button
  buy-button-id="buy_btn_1OvrPs2gJkNsDuiN1nPkjPOM"
  publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
>
</stripe-buy-button>
</div> -->

			<!-- </div> -->
		{/if}
	{:else}
		<div class="preset-tonal-warning">
			Please go to the Main tab to login using the shared staff passcode for this exhibit. Then
			select a license to use.
		</div>
	{/if}
</section>
