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

import { onMount } from 'svelte';
import { goto, invalidate, pushState, replaceState } from '$app/navigation';

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


import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';

// import type { Writable } from 'svelte/store';

import Element_data_store from '$lib/element_data_store.svelte';
import Element_qr_scanner from '$lib/element_qr_scanner.svelte';

import Leads_manage from './leads_manage.svelte';
import Leads_payment from './leads_payment.svelte';

let param_slug_event_exhibit_id = data.params.slug;
let url_passcode = data.url.searchParams.get('passcode');
console.log(`ae_events_leads exhibit [slug] +page.svelte: param_slug_event_exhibit_id=${param_slug_event_exhibit_id}; passcode=${url_passcode}`);
if (url_passcode) {
    $events_sess.leads.entered_passcode = url_passcode;
}

let event_exhibit_obj = liveQuery(
    () => db_events.exhibits.get(param_slug_event_exhibit_id)
    // () => db_events.exhibits.toArray()
    // () => db_events.exhibits
    //     .where('id_random')
    //     .equals($events_slct.exhibit_id)
    //     // .orderBy('name')
    //     // .offset(10).limit(5)
    //     .toArray()
);

let event_exhibit_obj_v2 = db_events.exhibits.get(param_slug_event_exhibit_id);

// Load the Event Exhibit Obj with ID based on the slug param.
$events_slct.exhibit_id = param_slug_event_exhibit_id;
console.log('Selected Event Exhibit ID:', $events_slct.exhibit_id);
$events_trigger = 'load__event_exhibit_obj';

let license_submit_results: Promise<any>|key_val;

if (!$events_loc.leads.tab) {
    $events_loc.leads.tab = {};
    $events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
}

if (!$events_loc.leads.auth_exhibit_kv) {
    $events_loc.leads.auth_exhibit_kv = {};
}

if ($events_loc.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]) {
    console.log('Logged in using shared exhibit staff passcode.');

    if ($events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key) {
        console.log(`Using the license key: ${$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}`);
    } else {
        console.log('License key (email) not used.');
        $events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
    }
} else {
    console.log('Not logged in using shared exhibit staff passcode.');
    $events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
}


onMount(() => {
    console.log('Events Leads Exhibit [slug]: +page.svelte');

    console.log(`ae_events_leads exhibit [slug] +page.svelte data:`, data);

    if ($events_slct.exhibit_id) {
        console.log(`Got an ID. Let's do something!?`);
    } else {
        console.log(`No ID. Nothing to show. Try setting the ID again.`);
        $events_slct.exhibit_id = param_slug_event_exhibit_id;
    }

    // We need to remove the url_passcode from the URL GET params after we use it. It should be safe to assume that onMount is a safe place to do this.
    if (url_passcode) {
        // console.log('Remove the passcode from the URL.');
        data.url.searchParams.delete('passcode');
        let new_url = data.url.toString()
        console.log(new_url);
        goto(new_url, {replaceState: true});
    }
});
// console.log(`$ae_loc = `, $ae_loc);

$: if ($events_slct.exhibit_obj && $events_sess.leads.entered_passcode) {
    console.log('Check the passcode?');
    if ($events_sess.leads.entered_passcode.length > 4) {
        console.log('Check the passcode');
        handle_check_event_exhibit_staff_passcode();
    }
} else {
    // console.log('Nothing at this time');
}


function handle_check_event_exhibit_staff_passcode() {
    // console.log(`*** handle_check_event_exhibit_staff_passcode() *** $slct_event_exhibit_obj=`, $events_slct.exhibit_obj);

    // if (!$events_loc.leads.auth_exhibit_li) {
    //     $events_loc.leads.auth_exhibit_li = {};
    // }

    if (!$events_loc.leads.auth_exhibit_kv) {
        $events_loc.leads.auth_exhibit_kv = {};
    }

    if ($events_slct.exhibit_obj && $events_sess.leads.entered_passcode && $events_sess.leads.entered_passcode.length >= 4) {
        if ($events_slct.exhibit_obj.staff_passcode == $events_sess.leads.entered_passcode) {
            console.log('Passcode matched');
            // disable_open_lead_retrieval_btn = false;
            $events_sess.leads.entered_passcode = null;
            $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = {
                key: null,
                updated_on: new Date().toISOString()
                };

        } else {
            // console.log('Passcode does not match');
            // disable_open_lead_retrieval_btn = true;
            return false;
        }
    } else {
        console.log('Missing selected event exhibit and or staff passcode.');
        // disable_open_lead_retrieval_btn = true;
        return null;
    }

    if ($events_loc.leads.auto_view) {
        // open_exhibit_tracking($events_slct.exhibit_obj.event_exhibit_id_random, event_exhibit_staff_passcode)
    } else {
        // console.log(document.getElementById('open_lead_retrieval_btn'));
        // document.getElementById('open_lead_retrieval_btn').focus();
    }
}


$: if ($events_trigger == 'load__event_exhibit_obj' && $events_slct.exhibit_id) {
    console.log('Selected Event Exhibit ID:', $events_slct.exhibit_id);

    $events_trigger = null;

    // handle_load_ae_obj_id__event({event_exhibit_id: $events_slct.exhibit_id, try_cache: false});

    let load_event_exhibit_obj = events_func.handle_load_ae_obj_id__exhibit({api_cfg: data.ae_api, exhibit_id:  $events_slct.exhibit_id, try_cache: false})
    .then(function (result) {
        console.log(`load_event_exhibit_obj = `, result);

        // Check if the license_li_json is an array and if not, convert it to an array.
        if (result.license_li_json && !Array.isArray(result.license_li_json)) {
            console.log('Convert license_li_json to an array.');
            result.license_li_json = [];
        }

        $events_slct.exhibit_obj = result;

        // let license_key = 'example@oneskyit.com';

        // $events_slct.exhibit_obj.url = `${data.url.origin}/events_leads/exhibit/${$events_slct.exhibit_id}?license_key=${license_key}&event_id=${$events_slct.event_id}`;
    });

    // handle_load_ae_obj_id__event_exhibit({event_exhibit_id: $events_slct.exhibit_id, try_cache: false});

}


// // Load the Event Presenter Obj with ID based on the URL param.
// // $events_slct.exhibit_id = data.url.searchParams.get('ae_id');
// $events_slct.exhibit_id = data.url.searchParams.get('event_exhibit_id');
// if ($events_slct.exhibit_id) {
//     console.log('Selected Event Presenter ID:', $events_slct.exhibit_id);
//     $events_trigger = 'load__event_exhibit';

//     // $events_loc.leads.show_edit__event_exhibit_obj = true;
//     // $events_trigger = 'show_edit__event_exhibit';
// }


async function handle_load_ae_obj_id__event_exhibit({event_exhibit_id, try_cache=false}) {
    console.log(`*** handle_load_ae_obj_id__event_exhibit() *** event_exhibit_id=${event_exhibit_id}`);

    let params = {};

	// $ae_loc.hub.event_exhibit_id_qry_status = 'loading';
    ae_event_exhibit_get_promise = api.get_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: 'event_exhibit',
        obj_id: event_exhibit_id,
        use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
        use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
        params: params,
        log_lvl: 0
        })
    .then(function (event_exhibit_get_result) {
        if (event_exhibit_get_result) {
            $events_slct.exhibit_obj = event_exhibit_get_result;
            console.log(`event_exhibit object:`, $events_slct.exhibit);
        }

        // Auto show the selected event_exhibit ID
        // Is this pushState needed here?
        // Set the URL param "event_exhibit_id" to the current event_exhibit ID.
        // const url = new URL(location);
        // url.searchParams.set('event_exhibit_id', $events_slct.exhibit_id);
        // history.pushState({}, '', url);

        // Is this postMessage needed here?
        // let message = {'event_exhibit_id': $events_slct.exhibit_id};
        // window.parent.postMessage(message, "*");
    })
    .catch(function (error) {
        console.log('No results returned or failed.', error);
    });

    return ae_event_exhibit_get_promise;
}

async function handle_submit_form_license_update(event) {
    console.log('*** handle_submit_form_license_update() ***');

    // Data in
    let tmp_obj = $event_exhibit_obj;

    if ($events_sess.leads.tmp_license.index >= 0 && $events_sess.leads.tmp_license.email && $events_sess.leads.tmp_license.full_name) {
        tmp_obj.license_li_json[$events_sess.leads.tmp_license.index] = $events_sess.leads.tmp_license;
        console.log('Update license:', tmp_obj);
    } else if ($events_sess.leads.tmp_license.index >= 0 && !$events_sess.leads.tmp_license.email && !$events_sess.leads.tmp_license.full_name) {
        console.log('No license email and full_name to update and there is an index number. Remove the license.');

        console.log('Remove License');
        let tmp_obj = $event_exhibit_obj;
        tmp_obj.license_li_json.splice($events_sess.leads.tmp_license.index, 1);

        console.log('Removed license:', tmp_obj);
    } else if ($events_sess.leads.tmp_license.email && $events_sess.leads.tmp_license.full_name) {
        if (!Array.isArray(tmp_obj.license_li_json)) {
            tmp_obj.license_li_json = [];
        }
        tmp_obj.license_li_json.push($events_sess.leads.tmp_license);
        console.log('Add license:', tmp_obj);
    } else if ($events_sess.leads.tmp_license.index === -1) {
        // console.log('No license email and full_name to add or update and index is -1. This was already deleted based on the old index number! Just submit what is already there?', tmp_obj);
    } else {
        return false;
    }

    // tmp_obj.license_li_json.push($events_sess.leads.tmp_license);

    // Save to local IDB
    await db_events.exhibits.put(tmp_obj);

    // Save to the database
    // Data out
    let exhibit_do: key_val = {};
    exhibit_do['license_li_json'] = $event_exhibit_obj?.license_li_json;

    console.log('exhibit_do:', exhibit_do);

    console.log(`ae_ Exhibit Update:`, exhibit_do);
    exhibit_submit_results = handle_update__exhibit({
        obj_type: 'event_exhibit',
        obj_id: $events_slct.exhibit_id,
        data: exhibit_do
    })
    .then( function (exhibit_results) {
        console.log(`ae_ Exhibit Update Results:`, exhibit_results);
        if (exhibit_results) {
        }
        return exhibit_results;
    })
    .finally(function () {
        $events_trigger == 'load__event_exhibit_obj'
        // $ae_sess.ds.submit_status = 'updated';
    });

    $events_sess.leads.show_form__license = false;
    $events_loc.leads.edit_license_li = false;
}


let exhibit_submit_results: Promise<any>|key_val;
async function handle_submit_form(event) {
    console.log('*** handle_submit_form() ***');

    // $ae_sess.ds.submit_status = 'processing';


    // Data in
    let form_data = new FormData(event.target);
    console.log(form_data);

    let exhibit_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
    console.log(exhibit_di);

    // Data out
    let exhibit_do: key_val = {};

    // let exhibit_do__license_li_json: key_val = {};
    // example: {"scott.idem@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-04T15:29:59"}, "test+holly@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-13T15:20:59"}}

    let exhibit_do__license_li_json: key_val[] = [];
    if (typeof exhibit_di.license_max !== 'undefined') {
        exhibit_do['license_max'] = exhibit_di.license_max;

        // Loop through the form data licenses up to the license max and create the license list JSON object. The license related fields are prefixed with "license_". This should be pushed to the exhibit_do__license_li_json list.
        // for (let i = 0; i < exhibit_di.license_max; i++) {
        for (let i = 0; i < (exhibit_di.license_max && 10); i++) {
            // let license_key = exhibit_di[`license_${i}`];
            let license_email = exhibit_di[`license_${i}_email`];
            let license_full_name = exhibit_di[`license_${i}_full_name`];
            let license_passcode = exhibit_di[`license_${i}_passcode`];
            if (!license_passcode) {
                // Generate a random 8 character passcode using a mix of lowercase letters and numbers.
                license_passcode = Math.random().toString(36).substring(2, 10);
            }

            // if (license_key && license_email && license_full_name && license_passcode) {
            //     exhibit_do__license_li_json.push({
            //         [license_key]: {
            //             "email": license_email,
            //             "full_name": license_full_name,
            //             "passcode": license_passcode,
            //             'updated_on': new Date().toISOString()
            //         }
            //     });
            // }

            if (license_email && license_full_name && license_passcode) {
                exhibit_do__license_li_json.push({
                    "email": license_email,
                    "full_name": license_full_name,
                    "passcode": license_passcode,
                    "session_count": 0, // Max 3 browser sessions?
                    'updated_on': new Date().toISOString()
                });
            }
        }


    }

    // if (typeof exhibit_di.license_1 !== 'undefined' && typeof exhibit_di.license_1_passcode !== 'undefined') {
    //     exhibit_do__license_li_json['passcode'] = exhibit_di.passcode;
    // }

    exhibit_do['license_li_json'] = exhibit_do__license_li_json;

    console.log('exhibit_do:', exhibit_do);

    console.log(`ae_ Exhibit Update:`, exhibit_do);
    exhibit_submit_results = handle_update__exhibit({
    obj_type: 'event_exhibit',
    obj_id: $events_slct.exhibit_id,
    data: exhibit_do
    })
    .then( function (exhibit_results) {
        console.log(`ae_ Exhibit Update Results:`, exhibit_results);
        if (exhibit_results) {
        }
        return exhibit_results;
    })
    .finally(function () {
        $events_trigger == 'load__event_exhibit_obj'
        // $ae_sess.ds.submit_status = 'updated';
    });
}

let ae_promises: key_val = {}; // Promise<any>;
async function handle_update__exhibit({
        obj_type,
        obj_id,
        data
        }) {
    console.log('*** handle_update__exhibit() ***');

    $ae_sess.ds.update_status = 'starting';
    ae_promises.update__exhibit_obj = api.update_ae_obj_id_crud({
        api_cfg: $ae_api,
        obj_type: obj_type,
        obj_id: obj_id,
        fields: data,
        key: $ae_api.api_crud_super_key,
        log_lvl: 1
        })
    .then(async function (update__obj_result) {
        if (!update__obj_result) {
            console.log('The result was null or false.');
            return false;
        }
        return update__obj_result;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(error);
        return false;
    })
    .finally(function (update__obj_result) {
        $ae_sess.ds.update_status = 'finished';
        return update__obj_result;
    })

    return ae_promises.update__exhibit_obj;
}



function send_init_confirm_email({to_email}) {
    console.log(`*** send_init_confirm_email() *** to ${to_email}.`);

    let license_key = to_email;

    let subject = `Leads License Link for ${$event_exhibit_obj.name} (ID: ${$events_slct.exhibit_id})`;

    let body_html = `
    <div>${$event_exhibit_obj.license_li_json[license_key].full_name},
    <p>If this was sent to you incorrectly, plaese ignore.</p>
    </div>

    <br>

    <div>
    Exhibit ID: ${$events_slct.exhibit_id}<br>
    <p>Use your license key login link below.<br>
    Copy and paste link: <a href="${data.url.origin}/events_leads/exhibit/${$events_slct.exhibit_id}?license_key=${license_key}">${data.url.origin}/events_leads/exhibit/${$events_slct.exhibit_id}?license_key=${license_key}&event_id=${$events_slct.event_id}</a></p>
    </div>`;

    api.send_email({
        api_cfg: $ae_api,
        from_email: 'noreply+leads@oneskyit.com',
        from_name: 'OSIT Events - Leads',
        to_email: to_email,
        subject: subject,
        body_html: body_html,
    });
}


function handle_qr_scan_result(event) {
    console.log('*** handle_qr_scan_result() ***');

    let qr_scan_result = event.detail.result;
    console.log(qr_scan_result);
    let qr_scan_obj = ae_util.process_data_string(qr_scan_result);

    if (qr_scan_obj.qr_type == 'OBJ') {
        console.log(`Got a QR type of OBJ. Type ${qr_scan_obj.type}; ID ${qr_scan_obj.id}`);

        if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_badge') {
            console.log(`Found an Event Badge object type and ID.`);
            let event_badge_id = qr_scan_obj.id

            $events_sess.leads.qr_scan_result = `Found a badge type with ID: ${event_badge_id}`;

            // event_exhibit_tracking_obj_create_promise = await handle_create_event_exhibit_tracking_obj($slct.event_exhibit_id, event_badge_id);
            // console.log(event_exhibit_tracking_obj_create_promise);
            // if (event_exhibit_tracking_obj_create_promise) {
            //     console.log('Created new log entry for this badge.');
            //     console.log(event_exhibit_tracking_obj_create_promise);

            //     handle_load_event_exhibit_obj({event_exhibit_id: $slct.event_exhibit_id, try_cache: false});

            //     $slct.event_exhibit_tracking_obj = event_exhibit_tracking_obj_create_promise;
            //     $slct.event_exhibit_tracking_id = $slct.event_exhibit_tracking_obj.event_exhibit_tracking_id_random;
            //     // $slct.event_badge_obj = $slct.event_exhibit_tracking_obj.event_badge;
            //     // $slct.event_badge_id = $slct.event_badge_obj.event_badge_id_random;
            //     show_add_qr = false;
            //     qr_scan_result = '';
            //     qr_scan_obj = {};
            //     show_tracking_entry = true;
            // } else if (event_exhibit_tracking_obj_create_promise === null) {
            //     console.log('A matching log entry probably exists for this person!');
            // } else {
            //     console.log('Something unexpected happened???');
            // }

        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_exhibit') {
            console.log(`Ignoring.`);
        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_person') {
            console.log(`Ignoring.`);
        } else if (qr_scan_obj.type && qr_scan_obj.id && qr_scan_obj.type == 'event_session') {
            console.log(`Ignoring.`);
        } else {
            console.log(`Ignoring. The object returned was unexpected or not valid.`);
            console.log(qr_scan_obj);
        }
    } else if (qr_scan_obj.qr_type == 'MECARD') {
        console.log(`Got a QR type of MECARD. This was not expected, but we will at least display it???`);

        // https://github.com/ertant/vCard
        // vcard = vCardParser.parse(qr_scan_obj.str); // vCard
        // console.log(vcard);

        mecard = qr_scan_obj.str.split(';'); // vCard
        // NOTE: Next we need to loop through the values and split each again on ":".
        // NOTE: Then probably do a second check based on the known key values (N, EMAIL, ADR).
        console.log(mecard);

        show_mecard = true;
    } else {
        console.log(`Got a QR type of ${qr_scan_obj.qr_type}. Display warning to user, but otherwise ignoring.`);
        console.log(qr_scan_obj);
    }
}

function handle_qr_camera(event) {
    console.log('*** handle_qr_camera() ***', event.detail);

    if (!$ae_loc.hub.qr) {
        $ae_loc.hub.qr = {};
    }

    if (event.detail.status == 'allowed') {
        // console.log('Camera access allowed');
        $ae_loc.hub.qr.camera_status = 'allowed';
    } else if (event.detail.status == 'denied') {
        console.log('Camera access denied!?');
        $ae_loc.hub.qr.camera_status = 'denied';
    }
}




</script>


<section
    class="ae_events_leads md:container h-full mx-auto flex flex-col items-center space-y-4"
    >


<!-- <Element_data_store
    ds_code="page__events_leads__exhibit_main_header"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    display="block"
    class_li=""
    /> -->

<!-- <div
    class="events__leads__exhibit_obj_main_about"
    class:hidden={$events_loc.leads.tab[$events_slct.exhibit_id] !== 'start'}
    >
    <Element_data_store
        ds_code="events__leads__exhibit_obj_main_about"
        ds_type="html"
        for_type="event"
        for_id={$events_slct.event_id}
        display="block"
        class_li=""
        />
</div> -->

{#if $events_slct.exhibit_id && $event_exhibit_obj}
<!-- <section class="ae_h_scrollfix"> -->


<!-- <hr>
<p>Mark as logged in by using: events_loc.leads.auth_exhibit_li. This is a key (exhibit ID) and value (started datetime) pair. They can be logged into more than one exhibit at a time. Warn about log out when using the "Use License" button.</p>
<p>Check that the started datetime is still within X period and check against the tracked session timestamps. The table or object field is event_exhibit.license_sess_li.</p>

<p>Exhibit license authorization link: /events_leads/exhibit/[exhibit_id]?key=[license_key]&key_pass=[the_random_passcode]</p>
<hr> -->

<TabGroup
    justify="justify-center"
    active="variant-ghost-primary"
    hover="hover:variant-soft-primary"
    flex="flex-1 lg:flex-none"
    rounded=""
    border=""
    class="bg-surface-100-800-token w-full"
    >
    <Tab
        bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
        name="tab_payment"
        value={'payment'}>
        <svelte:fragment slot="lead">
            {#if !$event_exhibit_obj.paid}
            <span class="fas fa-question text-red-500"></span>
            {:else}
            <span class="fas fa-check text-green-500"></span>
            {/if}
            <span class="fas fa-credit-card mx-1"></span>
        </svelte:fragment>
        Payment
    </Tab>

    <Tab
        bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
        name="tab_start"
        value={'start'}>
        <svelte:fragment slot="lead">
            <span class="fas fa-home"></span>
        </svelte:fragment>
        <!-- Start -->
        Main
    </Tab>

    <!-- Add/Scan - For adding attendee leads by manually adding their ID or scanning their QR code. -->
    <Tab
        bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
        name="tab_add_scan"
        value={'add_scan'}
        disabled={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
        regionTab={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] ? 'text-slate-400' : ''}
        >
        <svelte:fragment slot="lead">
            <span class="fas fa-qrcode"></span>
        </svelte:fragment>
        Add/Scan
    </Tab>

    <!-- Leads - For viewing and managing the leads that have been collected. -->
    <Tab
        bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
        name="tab_leads"
        value={'leads'}
        disabled={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
        regionTab={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] ? 'text-slate-400' : ''}
        >
        <svelte:fragment slot="lead">
            <span class="fas fa-users"></span>
        </svelte:fragment>
        Leads
    </Tab>

    <!-- Manage - For changing the settings, exporting, and other. -->
    <Tab
        bind:group={$events_loc.leads.tab[$events_slct.exhibit_id]}
        name="tab_manage"
        value={'manage'}
        disabled={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
        regionTab={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_kv || !$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] ? 'text-slate-400' : ''}
        >
        <svelte:fragment slot="lead">
            <span class="fas fa-cogs"></span>
        </svelte:fragment>
        Manage
    </Tab>
</TabGroup>


<!-- BEGIN Tab: Main (start) -->
{#if $events_loc.leads.tab[$events_slct.exhibit_id] === 'start'}


<section class="tab__start flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">

<div class="flex flex-col wrap justify-center items-center">
    <h2 class="h3">
        <!-- {$events_slct.exhibit_obj.name} -->
        <strong>{$event_exhibit_obj?.name ?? 'Welcome to Leads for Exhibits!'}</strong>
        <strong>{$event_exhibit_obj?.code ?? ''}</strong>
    </h2>
    <h3 class="h4">
        {#if $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
        <span class="fas fa-check text-green-500"></span>
        {$events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
        <button
            type="button"
            class="btn btn-sm variant-soft-warning"
            on:click={() => {
                $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key = null;
            }}
            >
            <span class="fas fa-times mx-1"></span>
            Clear License
        </button>
        {:else}
        <span class="fas fa-times text-red-500"></span>
        No license key selected
        {/if}
    </h3>
</div>

{#if $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
<p class="border-2 border-primary p-2 variant-soft-secondary">
    You are logged in using the shared exhibit staff passcode and are using the license key for {$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}. Any leads you collect will be associated with this license key (email address).
</p>
{:else if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
<p class="border-2 border-primary p-2 variant-soft-secondary">To use the lead retrieval service, please select a license from the list below. You may need to add one first.</p>
{:else}
<p>To access this exhibit you must enter the shared staff passcode that you were given. You will then be able to select a license and use the lead retrieval service from your device.</p>
<label class="label variant-glass-warning p-2 px-4 m-2 rounded-full font-bold">Shared exhibit passcode:
<input
    type="text"
    name="staff_passcode"
    bind:value={$events_sess.leads.entered_passcode}
    placeholder="Exhibit passcode"
    class="input max-w-48 font-mono"
    required
    >
</label>
{/if}


{#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}


<!-- Loop through the key value pairs. Each license key has a passcode, updated_on, etc -->
{#if $event_exhibit_obj?.license_max }
<h2 class="h3">License List (max {$event_exhibit_obj?.license_max})</h2>


{#if !Array.isArray($event_exhibit_obj.license_li_json) || (Array.isArray($event_exhibit_obj.license_li_json) && $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max)}
<button
    class="btn btn-sm variant-soft-primary w-40"
    on:click={() => {
        // let tmp_obj = $event_exhibit_obj;
        $events_sess.leads.tmp_license = {
            // 'index': $event_exhibit_obj?.license_li_json.length, // This is the index of the new license in the list.
            'email': '', // test+z@oneskyit.com
            'full_name': '', // Scott X
            // The passcode should default to a random 5 digit number.
            'passcode': Math.random().toString(36).substring(2, 8),
            'max_reuse': 0,
            'updated_on': new Date().toISOString()
        };
        // tmp_obj.license_li_json.push($events_sess.leads.tmp_license);
        // console.log('Add License:', tmp_obj);
        // db_events.exhibits.put(tmp_obj);
        // This still needs to be saved to the database.

        $events_sess.leads.show_form__license = true;
    }}
    >
    <span class="fas fa-edit mx-1"></span>
    Add License
</button>
{:else}
<!-- <button
    class="btn btn-sm variant-soft-warning w-40"
    on:click={() => {
        console.log('No more licenses available. Remove the last one from the list?');
        let tmp_obj = $event_exhibit_obj;
        tmp_obj?.license_li_json.pop();
        console.log('Remove License:', tmp_obj);
        db_events.exhibits.put(tmp_obj);
        // This still needs to be saved to the database.
    }}
    >
    <span class="fas fa-trash mx-1"></span>
    Delete License
</button> -->
{/if} <!-- $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max -->

<div>Use the "Sign In" or "Email" option buttons below to log in using one of the available licenses. If you select a license that is already in use on another device, it will be logged out. The "Sign In" option will use the license selected with your browser. The "Email" option will send an email with a link to log in.</div>

<section class="ae_license_list ae_h_scrollfix">
<form
    on:submit|preventDefault={() => {
        console.log('Save License List');
        handle_submit_form(event);
    }}
    id="form__license_table"
    class="p-0 m-0"
    >

<input type="hidden" name="license_max" value={$event_exhibit_obj?.license_max} />

<!-- <div class="ae_h_scrollfix"> -->

{#if Array.isArray($event_exhibit_obj.license_li_json) && $event_exhibit_obj.license_li_json.length > 0}
<table class="table table-compact table-hover">
    <thead>
        <tr>
            <th>License</th>
            <th>Info</th>
            <!-- <th>Email</th> -->
            <!-- <th>Full Name</th> -->
            <!-- <th>Passcode</th> -->
            <th>Save</th>
            {#if $events_loc.show_details}
            <th
                class="text-xs"
                on:click={() => {
                    $events_loc.leads.show_meta__event_exhibit_obj = !$events_loc.leads.show_meta__event_exhibit_obj;
                }}
                >Meta</th>
            {/if}
        </tr>
    </thead>
    <tbody>

<!-- This is somewhat complicated. The license list may be null, 0 length, or other lengths up to around 10 or 15. We need to loop through each existing saved license and then continue up to the license max for the exhibitor. There should be placeholders for all available licenses. The license_max may change and be over or under the current list count. -->
<!-- example: {"scott.idem@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-04T15:29:59"}, "test+holly@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-13T15:20:59"}} -->
<!-- example: {} -->

<!-- {#each Object.keys($event_exhibit_obj?.license_li_json || {}).slice(0, $event_exhibit_obj?.license_max) as key} -->
{#each $event_exhibit_obj?.license_li_json as license, index}
    <tr>
        <!-- Show the current license list information. -->
        <td>

            <input
                type="hidden"
                name={`license_${index}`}
                required
                value={index}
                placeholder="Index"
                min="1"
                class="input text-sm max-w-20 font-mono"
                />

            {#if index < $event_exhibit_obj?.license_max}
            <!-- Edit the values and save the new license list information. -->
            <!-- Button to send an email with the login link -->
            <div class="btn-group text-sm">
                <button
                    type="button"
                    on:click={() => {
                        console.log(`Use license: ${license.email}`);
                        if (confirm('Are you sure you want to use this license?')) {
                            $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = {
                                key: license.email,
                                updated_on: new Date().toISOString()
                                };
                        }
                    }}
                    class="btn btn-sm text-sm variant-soft-primary"
                    title="Sign in using this license"
                    >
                    <span class="fas fa-key mx-1"></span>
                    Sign In
                </button>
                <button
                    type="button"
                    on:click={() => {
                        console.log('Send Email');
                        // Send an email with the login link
                        send_init_confirm_email({ to_email: license.email });
                    }}
                    disabled={!$ae_loc.trusted_access}
                    class="btn btn-sm text-sm variant-soft-secondary"
                    title={`TEMPORARILY DISABLED: Send an email with the license login link to ${license.email}`}
                >
                    <span class="fas fa-envelope mx-1"></span>
                    Email
                </button>
                <button
                    type="button"
                    use:clipboard={$events_slct.exhibit_obj.url}
                    class="btn btn-sm text-sm variant-soft-tertiary"
                    class:hidden={!$ae_loc.trusted_access || !$events_loc.show_details}
                    title={`Copy link to this exhibit (ID: ${$events_slct.exhibit_id})`}
                >
                    <span class="fas fa-copy mx-1"></span>
                    Copy
                </button>
            </div>
            {:else}
            <div class="variant-soft-warning">
                <span class="fas fa-lock mx-1"></span>
                Disabled license
            </div>
            {/if}
        </td>

        <td>
        <!-- All elements should be centered horizontally and vertically using flex. -->
        <div class="
            flex flex-row wrap gap-1
            items-center justify-center
            content-center
            "
            >

        <div class="flex flex-col gap-1 wrap full_name_email grow">
            <span class="text-sm">{license.full_name}</span>
            <span class="text-sm">{license.email}</span>
        </div>

        <span
            class="font-bold text-sm"
            class:hidden={!$events_loc.show_details}
            >
            {license.passcode}
        </span>

        </div>
        </td>

        <td>
            <!-- {#if $events_loc.leads.edit_license_li}
                <button
                    type="submit"
                    disabled={index >= $event_exhibit_obj?.license_max}
                    class="btn btn-sm variant-soft-warning">
                    <span class="fas fa-save mx-1"></span>
                    Save
                </button>
            {:else} -->
            <div class="btn-group">
                <button
                    type="button"
                    on:click={() => {
                        console.log('Edit License');

                        $events_sess.leads.tmp_license = license;
                        $events_sess.leads.tmp_license['index'] = index; // This is the index of the license in the list. It will need to be removed before saving back to the list based on the index value.
                        $events_sess.leads.tmp_license['updated_on'] = new Date().toISOString();

                        // $events_loc.leads.edit_license_li = true;

                        $events_sess.leads.show_form__license = true;
                    }}
                    class="btn btn-sm variant-soft-warning">
                    <span class="fas fa-edit mx-1"></span>
                    Edit
                </button>
                <button
                    type="button"
                    on:click={() => {
                        console.log('Remove License');
                        if (confirm('Are you sure you want to remove this license?')) {
                            // This still needs to be saved to the database.
                            // Signal that this license should be removed from the list.
                            // $events_sess.leads.tmp_license.index = -1;
                            $events_sess.leads.tmp_license.index = index;
                            $events_sess.leads.tmp_license.email = null;
                            $events_sess.leads.tmp_license.full_name = null;
                            handle_submit_form_license_update(event);
                        }

                        // let tmp_obj = $event_exhibit_obj;
                        // tmp_obj?.license_li_json.splice(index, 1);
                        // console.log('Remove License:', tmp_obj);
                        // db_events.exhibits.put(tmp_obj);

                        // This still needs to be saved to the database.
                        // $events_sess.leads.tmp_license.index = -1;
                        // Signal that this license should be removed from the list.
                        // $events_sess.leads.tmp_license.index = index;
                        // $events_sess.leads.tmp_license.email = null;
                        // $events_sess.leads.tmp_license.full_name = null;
                        // handle_submit_form_license_update(event);
                    }}
                    class="btn btn-sm variant-soft-error">
                    <span class="fas fa-trash mx-1"></span>
                    Remove
                </button>
            </div>
        </td>

        {#if $events_loc.show_details}
        <td>
            <!-- class:hidden={$events_loc.leads.show_meta__event_exhibit_obj} -->
            <div class="flex flex-col wrap gap-1 text-xs">
                <div class="flex flex-row items-center space-x-2">
                    <span class="ae_label">Updated On:</span>
                    <span class="ae_value">{license.updated_on}</span>
                </div>
                <div class="flex flex-row items-center space-x-2">
                    <span class="ae_label">Created On:</span>
                    <span class="ae_value">{license.created_on}</span>
                </div>
                <div class="flex flex-row items-center space-x-2">
                    <span class="ae_label">Expires On:</span>
                    <span class="ae_value">{license.expires_on}</span>
                </div>
            </div>
        </td>
        {/if}

    </tr>
{/each}

    </tbody>
</table>
{:else}
<div class="variant-soft-warning">No licenses found. Add a license above.</div>
{/if} <!-- Array.isArray(result.license_li_json) -->
<!-- </div> --> <!-- .ae_h_scrollfix -->

</form>
</section> <!-- .ae_license_list -->

{/if} <!-- $event_exhibit_obj?.license_max -->
{/if}

</section> <!-- .tab__start -->


<!-- BEGIN Tab: Add/Scan -->
{:else if $events_loc.leads.tab[$events_slct.exhibit_id] == 'add_scan'}


<section class="tab__add_section min-w-full flex flex-col wrap justify-center items-center space-y-4 ae_h_scrollfix">

{#if $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
    {#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
    <div>Scanning for:
        {$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id].key}
    </div>
    {:else}
        <div class="variant-soft-warning">Please go to the Main tab and select a license to use.</div>
    {/if}

    <div class="variant-soft-warning">This section is not enabled for ISHLT 2024 at this time. The ability to add a lead by scanning the attendee's QR code or by searching for their name, will be enabled before the ISHLT 2024 Annual Meeting in Prague.</div>

    <p>
        <!-- This page is used to test QR scanning with your device. -->
        {#if $ae_loc.hub.qr.camera_status == 'unknown'}
            <strong>You will need to allow access to your device's camera when asked.</strong>
        {:else if $ae_loc.hub.qr.camera_status == 'denied'}
            <strong>You need to allow access to your device's camera. Currently this seems to be blocked or denied for this site.</strong>
            Please check your browser's permissions.
        {/if}
    </p>


    <span>
    <button
        class="btn btn_md variant-soft-primary mx-1 add_person_qr_btn"
        on:click={() => {
            // $slct.event_exhibit_tracking_id = null;
            // $slct.event_exhibit_tracking_obj = null;
            // show_add_qr = true;
            // qr_scan_obj = null;
            // event_exhibit_tracking_obj_create_promise = null;
        }}
        disabled={true}
        title="Scan a QR code to add a person to the leads list."
        >
        <span class="fas fa-qrcode mx-1"></span>
        Scan to Add Person
    </button>

    <button
        class="btn btn_md variant-soft-primary mx-1 add_person_search_btn"
        on:click={() => {
            // $slct.event_exhibit_tracking_id = null;
            // $slct.event_exhibit_tracking_obj = null;
            // show_add_search = true;
            // qr_scan_obj = null;
            // event_exhibit_tracking_obj_create_promise = null;
        }}
        disabled={true}
        title="Search for a person to add to the leads list."
        >
        <span class="fas fa-search mx-1"></span>
        Search to Add Person
    </button>
    </span>

    <span class="float-right">
    {#if ($events_loc.leads.show_content__scan_requirements)}
        <button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=false}><span class="fas fa-info mx-1"></span> Hide Requirements</button>
    {:else if (!$events_loc.leads.show_content__scan_requirements)}
        <button class="btn btn-sm variant-soft-secondary" on:click={() => $events_loc.leads.show_content__scan_requirements=true}><span class="fas fa-info mx-1"></span> Requirements</button>
    {/if}
    </span>

    {#if $events_loc.leads.show_content__scan_requirements}
    <div class="border-2 border-primary p-2 variant-soft-secondary">
        <p>You will need a device with a camera to scan the QR codes. You will also of course need one or more valid QR codes to scan.
        <!-- <button class="ae_btn btn_sm" on:click={() => show='qr_codes'}><span class="fas fa-qrcode"></span> Example QR Codes</button> -->
        </p>
        <ul class="list-disc list-inside">
            <li>Most laptops, workstations, Android phones/tablets, iPhones, and iPads are compatible</li>
            <li>The device must have a current (within the last 4 years) web browser such as Google Chrome, Mozilla Firefox, Apple's Safari, or Microsoft Edge. Opera is not yet fully supported.</li>
            <li>There is no Android or Apple app that needs to be installed!</li>
            <li>The device must have a camera for scanning or you will need to manually enter attendee badge IDs.</li>
            <li>The only permission you need to allow is access to your device's camera when asked.</li>
        </ul>
    </div>
    {:else}
        <!-- <button class="ae_btn btn_sm btn_info" on:click={() => show_requirements=true}><span class="fas fa-eye"></span> Requirements</button> -->
    {/if}

    <!-- <div class=""> -->
    <Element_qr_scanner show_qr_scan_result={true} show_qr_manual_badge_id_entry_option={true} on:qr_scan_result={handle_qr_scan_result} on:qr_camera={handle_qr_camera} />
    <!-- </div> -->

    <div class="qr_quick_results variant-soft-secondary font-bold p-4">
        {@html $events_sess.leads.qr_scan_result ?? 'No results yet'}
    </div>

{:else}
<div class="variant-soft-error">Not logged in. Please log in and select a user license.</div>
{/if} <!-- $events_loc?.leads.auth_exhibit_kv && $events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] -->

</section>


<!-- BEGIN Tab: Leads -->
{:else if $events_loc.leads.tab[$events_slct.exhibit_id] == 'leads'}


<h2 class="h3">Leads for {$event_exhibit_obj.name}</h2>
<div class="variant-soft-warning">This section is not currently enabled.</div>
<!-- <Leads_list /> -->



<!-- BEGIN Tab: Manage -->
{:else if $events_loc.leads.tab[$events_slct.exhibit_id] == 'manage'}


<Leads_manage />


<!-- BEGIN Tab: Payment -->
{:else if $events_loc.leads.tab[$events_slct.exhibit_id] == 'payment'}


<Leads_payment />


{/if} <!-- $events_loc.leads.tab[$events_slct.exhibit_id] -->
<!-- End of tab content -->

{/if} <!-- $events_slct.exhibit_id && $event_exhibit_obj -->

</section>


<!-- Use the values from $events_sess.leads.tmp_license to populate the inputs -->
{#if $events_sess.leads.show_form__license}
<div class="ae_quick_modal_container">
<section
    class="
        ae_quick_popover
        events__leads__exhibit_license
        z-50
        flex
        flex-col
        gap-4


        justify-stretch
        "
    >
    <header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
        <h2 class="h3">Edit License</h2>

        <div class="popover__actions">
            <button
                type="button"
                class="btn variant-soft-primary"
                on:click={() => {
                    $events_sess.leads.show_form__license = false;
                }}
                >
                <span class="fas fa-times mx-1"></span>
                Close
            </button>
        </div>
    </header>

    <section class="popover__content grow">
    <form
        id="form__license_single"
        class="form"
        on:submit|preventDefault={handle_submit_form_license_update}
        >

    <!-- <input
        type="hidden"
        name="exhibit_id_random"
        value={}
        /> -->

    <!-- {#if $ae_loc.trusted_access}
        <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
        <input
            type="checkbox"
            name="ds_use_account_id"
            class="checkbox"
            value="true"
            checked={$ae_ds_loc.account_id ? true : false}
            />
        </label>
        <input
        type="text"
        name="exhibit_id"
        class="input max-w-48 text-xs"
        placeholder="Exhibit ID"
        value={$ae_ds_loc.exhibit_id}
        />
    {/if} -->

    <!-- The email address is used as the key, not the index number from the array of licenses. The email address is used to send the login link to the user. The passcode is used to log in. The full name is used to identify the user. The passcode is generated if not provided. -->
    <input
        type="email"
        name="license_email"
        placeholder="Email address"
        bind:value={$events_sess.leads.tmp_license.email}
        required
        class="input max-w-48"
        />

    <input
        type="text"
        name="license_full_name"
        placeholder="Full name"
        bind:value={$events_sess.leads.tmp_license.full_name}
        required
        class="input max-w-48"
        />

    {#if $ae_loc.trusted_access}
    <input
        type="text"
        name="license_passcode"
        placeholder="Passcode"
        bind:value={$events_sess.leads.tmp_license.passcode}
        required
        class="input max-w-48"
        />
    {/if}

    </form>
    </section> <!-- .popover__content -->

    <footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
        <div class="popover__content__actions">
            <button
                type="button"
                class="btn variant-soft-warning"
                on:click={() => {
                    if (confirm('Are you sure you want to delete this data store?')) {
                        // trigger = 'delete__ds__code';
                        // $slct_trigger = 'delete__ds__code';
                    }
                    $events_sess.leads.show_form__license = false;
                }}
                >
                <span class="fas fa-trash mx-1"></span>
                Delete
            </button>

            <button
                type="submit"
                form="form__license_single"
                class="btn variant-soft-primary"
                disabled={license_submit_results instanceof Promise && !license_submit_results}
                on:click={() => {
                    // trigger = 'save__ds__code';
                    // $slct_trigger = 'save__ds__code';
                }}
                >
                <span class="fas fa-save mx-1"></span>
                Save
            </button>
        </div>

        <div class="popover__status">
            <!-- Something text -->
            {#await license_submit_results}
                <div class="modal-loading">
                    <span class="fas fa-spinner fa-spin"></span>
                    <span class="loading-text">
                        Saving...
                    </span>
                </div>
            {:then license_submit_results}
                {#if license_submit_results}
                <div>
                    <span class="fas fa-check text-green-500"></span>
                    <span class="saved-text">
                        Saved
                    </span>
                </div>
                {/if}
            {/await}

            <div
                class="ae_debug"
                class:hidden={!$ae_loc?.debug}
                >
                submit: {$events_sess?.leads.submit_status__license}
                <!-- create: {$events_sess?.leads.create_status__license} -->
                <!-- update: {$events_sess?.leads.update_status__license} -->
            </div>
        </div>

        <div class="popover__actions">
        <button
            type="button"
            class="btn variant-soft-primary"
            on:click={() => {
                $events_sess.leads.show_form__license = false;
            }}
            >
            <span class="fas fa-times mx-1"></span>
            Close
        </button>
        </div>

    </footer> <!-- .popover__footer -->

</section> <!-- .ae_quick_popover -->
</div>
{/if}


<style lang="postcss">

div.ae_quick_modal_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: hsla(0, 0%, 0%, .5);
}

/* The section.ae_quick_modal should be above the rest of the content and centered on the page */
section.ae_quick_popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: hsla(0, 0%, 100%, .95);
    padding: 1rem;
    border-radius: .5rem;
    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);

    min-height: 30%;
    min-width: 80%;
}
</style>
