<script lang="ts">
// export let data;
// console.log(`ae_events_leads exhibit [slug] leads_payment.svelte data:`, data);

import { ae_util } from '$lib/ae_utils';
import { liveQuery } from "dexie";
import { db_events } from "$lib/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';

// let param_slug_event_exhibit_id = data.params.slug;

let event_exhibit_obj = liveQuery(
    () => db_events.exhibits.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 variant-soft-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 variant-soft-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 variant-soft-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 variant-soft-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 variant-soft-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="variant-soft-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>
