<style>
    .ListRowCard {
        margin-bottom: 20px;
    }
</style>

<div id='ListMainContainer'>




</div>


<script>




    LoadDataPageFunc = {};


    LoadDataPageFunc.URLs = {};
    LoadDataPageFunc.URLs.QueryListData = '/ListStores/List/data';


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

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

    LoadDataPageFunc.Settings.PageName = 'Stores';
    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.Settings.CurrentTargetRequired = false;

    LoadDataPageFunc.Settings.DefaultDatatoSend = null;

    LoadDataPageFunc.NewRow = function (objectdata, rownum) {

        let rowhtml = [];
        const hashkey = objectdata.hashkey;
        let photourl = objectdata.photourl;
        let name = objectdata.name;
        let category = objectdata.category || '';
        let subcategory = objectdata.subcategory || '';
        let FinalBody = '';

        /* html */
        FinalBody = `
            <div class="row" onclick="LoadDataPageFunc.Settings.ViewDetailsOnclick('${hashkey}');">
                <div class="col-2">
                <img src="${photourl}"  class="StoreListIMGIcon" id="StoreListPhoto" style="width:0.5vw: height:0.5vh;display:none;">
                </div>
                <div class="col-10">
                <div class="row">
                    <div class="col-12" style="font-width:1.5vh;">
                    <b>${name}</b>
                        </div>
                    <div class="col-12"  style="font-size:1.0vh;">
                    ${category}
                    </div>
                    <div class="col-12"  style="font-size:0.7vh;">
                    ${subcategory}
                    </div>
                </div>


                </div>


                </div>
            
            `;


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






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






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


    


    LoadDataPageFunc.CheckCachefromURLandChangeURLToBlob = function (photourl) {
        if (!photourl) { return ''; }
        photoblob = reqcacheload(photourl);
        if (photoblob) {
            photourl = URL.createObjectURL(photoblob);
        }
        return photourl;
    }









    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;




                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) + '<br>');
                }

                newhtmlrows = htmlarrayrows.join('');

                $('#' + LoadDataPageFunc.ids.ListContainer).html(newhtmlrows);

                const imgclassname = 'StoreListIMGIcon';
                LoadPhotoIMGTargetClass(imgclassname, settodisplaylater = true);
                HideBrokenPhotowithClass(imgclassname);
                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 () {

        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('Stores', FinalInnerHTML, LoadDataPageFunc.ids.MainCardBody);
        $$$.UpdateMainContainer(MainCard);
        return true;

    };

    $(document).ready(function () {

        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>