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

<div id='ListMainContainer'>




</div>


<script>



    defaultBackOnclick = null;
    LoadDataPageFunc = {};


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

    LoadDataPageFunc.Settings = {};


    ListBuilder.build({
        targetDiv: "ListMainContainer",
        title: "Stores",
        dataUrl: "/ListStores/List/data",
        pageName: 'ListStores',
        defaultback: "Home",
        search: true,
        unabletoLoadFunc: () => ModalQuickDismiss('Error', 'Unable to Load Data!'),
        // customCss:`    .ListRowCard {
        // margin-bottom: 20px;
        // }`,
        type: 'tiled',
        height: '15vh',

        renderCard: function (item, index, config) {

        photoblob = reqcacheload(item.photourl);
 


        const imageid ='StoreListPhoto-'+index;
          ListBuilder.queueImageLoad(imageid, item.photourl);

            const FinalBody = `
            <div class="row" onclick=" gotoPage('ViewStoreMarket', '${item.hashkey}');" class="ListCardRow equal-height" style="">
                <div class="col-2">
                <img src="${item.photourl}"  class="StoreListIMGIcon" id="${imageid}" style="max-width:20vw; height:10vh;">
                </div>
                <div class="col-10">
                <div class="row">
                    <div class="col-12" style="font-width:1.5vh;">
                    <b>${item.name}</b>
                        </div>
                    <div class="col-12"  style="font-size:1.0vh;">
                    ${item.category}
                    </div>
                    <div class="col-12"  style="font-size:0.7vh;">
                    ${item.subcategory}
                    </div>
                </div>


                </div>


                </div>
            
            `;

            const cardid = 'ListRowCard-' + index;

            const cardfull =    CreateCardSimple('',FinalBody,cardid,'margin:5px; height: 15vh;');
            // const cardfull = createCard(item.name, cardid, '', cardbodyid = '', FinalBody, cardbodyclassadd = 'ListCardRow', '', 'ListRowCard');
           
            return cardfull;

        },
    });


    // 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 (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('');


    //     updateHTMLifChanged(newhtmlrows, LoadDataPageFunc.ids.ListContainer);



    //     const imgclassname = 'StoreListIMGIcon';
    //     LoadPhotoIMGTargetClass(imgclassname, settodisplaylater = true);
    //     HideBrokenPhotowithClass(imgclassname);
    //     LoadDataPageFunc.CardResultInterSectionPreloadDetails();

    // };

    // LoadDataPageFunc.ListData = false;

    // LoadDataPageFunc.reloadPopulatelist = function () {


    //     loadDataWithCache({
    //         url: LoadDataPageFunc.URLs.QueryListData,
    //         currentPage: LoadDataPageFunc.currentPage,
    //         executeFunction: LoadDataPageFunc.populatelist
    //     });


    // };




    // 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();

    //     @if($FragmentOnly)
        //         LoadDataPageFunc.reloadPopulatelist()
    //     @else
        //         LoadDataPageFunc.populatelist();

    //     @endif

    //     changeTopbarTitle(LoadDataPageFunc.Settings.PageName);
    //     LoadDataPageFunc.SearchKeyUPListPage();


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



    //     // $('#ListLeads_Search-div-mb3').addClass('tf-statusbar');
    //     setDefaultbackGotoPageifNoHistory('Home', 0);
    // });
</script>