<div id='ListMainContainer'>




</div>


<script>




    LoadDataPageFunc = {};


    LoadDataPageFunc.InitializeDynamicVariables = function () {
        LoadDataPageFunc.URLs.QueryListData = '/ReferralCode/List/data';

        LoadDataPageFunc.Settings.ViewDetailsOnclick = function (data) {
            return `Copy', '${data}')`;
        };

        LoadDataPageFunc.Settings.CurrentTargetRequired = false;

        LoadDataPageFunc.Settings.DefaultDatatoSend = null;

        LoadDataPageFunc.NewRow = function (objectdata, rownum) {

            let rowhtml = [];
            const created = formatDateTimetoReadable(dateobjectdata.created) || '';
            const modified = formatDateTimetoReadable(dateobjectdata.modified) || '';
            const views = objectdata.referral_hits;
            const leads_submitted = objectdata.referral_submit;
            const referralCode = objectdata.referral_code;
            const fullurl = window.location.origin+'/r/'+referralCode;

            rowhtml.push(dualcolrow('Status', Status, rowclass = ''));
            rowhtml.push(dualcolrow('Target Viewing Date', TargetViewingDate, rowclass = ''));


            rowhtml.push('<div id="' + LoadDataPageFunc.ids.HashKeyContainer + '-' + rownum + '" style="display:none;">' + hashkey + '</div>');
            rowhtml.push(row(col('<br>' + buttonprimary('View', '', LoadDataPageFunc.Settings.ViewDetailsOnclick(hashkey), '-12', 'ListCardGoRow-' + rownum))));
            let FinalBody = rowhtml.join('');

            return createCard(objectdata.fullname, cardid = 'ListRowCard-' + rownum, created, cardbodyid = '', FinalBody, cardbodyclassadd = 'ListCardRow');
        };




        LoadDataPageFunc.Settings.SortArray = function (arr) {
            return arr.sort((a, b) => new Date(b.created) - new Date(a.created));
        };
    };

    LoadDataPageFunc.Settings = {};
    LoadDataPageFunc.Settings.PageName = 'My Referral URLs';
    LoadDataPageFunc.Settings.DefaultCardNoDetailsMessage = 'No Data';
    LoadDataPageFunc.Settings.DefaultRequestType = 'POST';
    LoadDataPageFunc.Settings.fromVarCache = true;
    LoadDataPageFunc.Settings.SortArray = function (arr) {
        return arr.sort((a, b) => new Date(b.created) - new Date(a.created));
    };


    LoadDataPageFunc.ids = {};
    LoadDataPageFunc.ids.MainContainer = 'ListMainContainer';
    LoadDataPageFunc.ids.SearchInput = 'List_Search';
    LoadDataPageFunc.ids.ListContainer = 'ListContainer';
    LoadDataPageFunc.ids.HashKeyContainer = 'ListRowCardHash';
    LoadDataPageFunc.ids.MainCardBody = 'MAINCARDBODY_LIST';

    LoadDataPageFunc.URLs = {};






    $$$ = {};
    $$$.UpdateMainContainer = function (html) {
        $('#' + LoadDataPageFunc.ids.MainContainer).html(html);
    };

    LoadDataPageFunc.Settings = {};
    LoadDataPageFunc.Settings.ViewDetailsOnclick = function (data) {
        return `ButtonGo('ViewDetails', '${data}')`;
    };


    LoadDataPageFunc.CheckCachefromURLandChangeURLToBlob = function (photourl) {
        if (!photourl) { return ''; }
        photoblob = reqcacheload(photourl);
        if (photoblob) {
            photourl = URL.createObjectURL(photoblob);
        }
        // LoadAndCreateURLfromFileHash(FileListHash,fromvarcache=true);
        return photourl;
    }




    LoadDataPageFunc.NewRow = function (DetailsObject, rownum) {

    };





    LoadDataPageFunc.ClearSearch = function () {
        $('#' + LoadDataPageFunc.ids.SearchInput).val('');
        $('#' + LoadDataPageFunc.ids.SearchInput).trigger('keyup');
    };


    LoadDataPageFunc.CardResultInterSectionPreloadDetails = function () {
        let hashkey = '';
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const cardId = $(entry.target).attr('id');
                    const variablePart = cardId.split('-')[1];
                    const hashKeyDivId = LoadDataPageFunc.ids.HashKeyContainer + '-' + variablePart;
                    hashkey = $('#' + hashKeyDivId).text();
                    if (hashkey) {
                        request.url('/ViewLead/Details/data').success((response) => {
                        }).data({ target: hashkey }).fromVarCache(true).type('POST').go();
                    }
                    hashkey = '';
                }
            });
        }, { threshold: 0.1 });


        $('#' + LoadDataPageFunc.ids.ListContainer + ' .card').each(function () {
            observer.observe(this);
        });
    };

    LoadDataPageFunc.populatelist = function () {
        let request = new RequestData(true);
        request
            .url(LoadDataPageFunc.URLs.QueryListData)
            .type(LoadDataPageFunc.Settings.DefaultRequestType)
            .data(null)
            .fromVarCache(LoadDataPageFunc.Settings.fromVarCache)
            .success((response) => {

                if (!response) {
                    $('#card-body-' + LoadDataPageFunc.ids.MainCardBody).html(LoadDataPageFunc.Settings.DefaultCardNoDetailsMessage);
                    return;
                }

                let List = response.List;
                //LeadsList.reverse();


                List = LoadDataPageFunc.Settings.SortArray(List);

                let newhtmlrows = ''; let htmlarrayrows = [];
                const count = List.length;
                let hashkey;


                for (let i = 0; i < count; i++) {
                    let hashkey = List[i]['hashkey'];
                    htmlarrayrows.push(LoadDataPageFunc.NewRow(List[i], i));
                }

                newhtmlrows = htmlarrayrows.join('');

                $('#' + LoadDataPageFunc.ids.ListContainer).html(newhtmlrows);
                //  LoadDataPageFunc.CardResultInterSectionPreloadDetails();
            })
            .error((err) => {
                console.error(err);
            })
            .go();

    };




    LoadDataPageFunc.SearchKeyUPListPage = function () {
        $('#' + LoadDataPageFunc.ids.SearchInput).on('keyup', function () {

            let searchTerm = $(this).val().toLowerCase();

            $('#' + LoadDataPageFunc.ids.ListContainer + ' .card').each(function () {

                let title = $(this).find('.card-title').text().toLowerCase();
                let cols = $(this).find('.col').text().toLowerCase();

                if (title.includes(searchTerm) || cols.includes(searchTerm)) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    };

    LoadDataPageFunc.main = function () {
        if (LoadDataPageFunc.Settings.CurrentTargetRequired && (!currenttarget || currenttarget === '0')) {
            $$$.UpdateMainContainer('<center>No Target<br><br>' + buttonprimary('View All Leads', '', "ButtonGo('ListLeads', '')") +
                '<br><br>' + buttonprimary('Home', '', "ButtonGo('Home', '')") + '</center>'); return false;
        }
        const searchcard = UIInputGroup('Search', 'text', LoadDataPageFunc.ids.SearchInput, '', classs = '', span = '', '/assets/clear.png');
        let LeadsListContainer = UICardSimple('', 'Loading Please Wait...', LoadDataPageFunc.ids.ListContainer);
        LeadsListContainer = '<div id="' + LoadDataPageFunc.ids.ListContainer + '"><center>Loading Please Wait...</center></div>';
        const FinalInnerHTML = searchcard + LeadsListContainer;
        const MainCard = UICardSimple('Leads', FinalInnerHTML, LoadDataPageFunc.ids.MainCardBody);
        $$$.UpdateMainContainer(MainCard);
        return true;

    };

    $(document).ready(function () {
        LoadDataPageFunc.InitializeDynamicVariables();
        LoadDataPageFunc.main();
        LoadDataPageFunc.populatelist();
        changeTopbarTitle(LoadDataPageFunc.Settings.PageName);
        LoadDataPageFunc.SearchKeyUPListPage();


        $('#imgspan' + LoadDataPageFunc.ids.SearchInput).attr('onclick', 'LoadDataPageFunc.ClearSearch();');



        // $('#ListLeads_Search-div-mb3').addClass('tf-statusbar');

    });
</script>