<style>
    .ListRowCard {
        margin-bottom: 5px;
    }
</style>
<div id="MainView">

    <div class="row">
        <div class="col-md" style="overflow:hidden;">
            <a href="javascript:void(0);" onclick="">
                <div class="card ListRowCard" id="ListRowCard-0" style="">
                    <div id="cardheader-ListRowCard-0" class="card-header ui-sortable-handle"
                        style="cursor: move;display:none;">
                        <h3 class="card-title" style="" id="card-title-ListRowCard-0"></h3>
                        <div class="card-tools" id="card-tools-ListRowCard-0">

                        </div>
                    </div>
                    <div class="card-body ListCardRow" id="card-body-ListRowCard-0">
                        <div style="text-align:center;" id="PhotosCard">

                        </div>
                        <br>
                        <div class="row" style="">
                            <div class="col">
                                <h3 id="StoreNameMarketPlace"></h3>
                            </div>
                            <div class="col" id="StoreLocationMarketPlace"></div>
                        </div>

                        <ul class="mt-3 box-outstanding-service" id="ControlsAddCartBuy">
                            <li onclick="LoadDataPageFunc.ViewAllStoreDetails();return false;">
                                <div class="">
                                    <img src="/assets/search.png" style="width: 30; height: 30;" class="icon-user">
                                </div>More Details
                            </li>
                            <li onclick="LoadDataPageFunc.Report();return false;">
                                <div class="">
                                    <img src="/assets/reportaccount.png" style="width: 30; height: 30;"
                                        class="icon-user">
                                </div>Report
                            </li>
                        </ul>
                    </div>

                </div>
        </div>
        </a>
    </div>

    <div class="col-md" style="overflow:hidden;">
        <a href="javascript:void(0);" onclick="">
            <div class="card ListRowCard" id="ListRowCard-2" style="">

                <div class="card-body ListCardRow" id="card-body-ListRowCard-2">
                    <div style="text-align:center;" id="StoreDescription">

                    </div>

                    <h5></h5>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md" style="overflow:hidden;" id="StoreProductsColumn">

    </div>
    <div class="col-md" style="overflow:hidden;display: none;" id="ReviewsCard">
        <UI type="card" id="ReviewsCard" title="Reviews" tools="no">
            content
        </UI>

    </div>
</div>

</div>

<script>
    LoadDataPageFunc = {};
    LoadDataPageFunc.PageTitle = 'Store Details';
    LoadDataPageFunc.MainDetailsURL = '';
    LoadDataPageFunc.Details = {};
    LoadDataPageFunc.Settings = {};

    LoadDataPageFunc.Disabled = false;


    LoadDataPageFunc.ProductsListNewCard = function (object, rownum) {
        if (!object || rownum === false || rownum === null || typeof rownum === undefined) {
            return '';
        }
        let hash =object.hashkey || false;
        let name = object.name || '';
        let price = object.price || '';
        let photo = object.photourl || '';
        const unit = object.unitname || '';
        if(!hash){return '';}

        if (typeof photo ==='array'){
            photo =photo[0];
        }

        name = trimStringToMaxLength(name, 16, suffix = '');
       // price = trimStringToMaxLength(price, 16, suffix = '');

        const productColumnSize='6';

        const newcol = function (colinner, colsize = "12", style='') {
            return `<div class="col-${colsize}" style="${style}">${colinner}</div>`;
        }
        /* html */
        const imgelement =`
                        <img id="marketplacelistproductphoto-1" src="${photo}" loading="lazy" class="StoreProductsIMGMarket" 
                        style="width: 60%;height: 60%;object-fit: contain;">
                        `;

        /* html */
        let finalcontent =imgelement+`<br><div class="row" style=""><div class="col"><h4>${name}</h4></div></div>`;
        finalcontent +=`<div class="row" style=""><div class="col"><h6>P${price} / ${unit}</h6></div></div>`;

        const maincolstyle='';
        return  newcol(`<center onclick="gotoPage('BuyViewProductMarket','${hash}')">`+CreateCardSimple(false, finalcontent, 'StoreProductCard-' + rownum,'width: 100%; height: 100%; object-fit: cover;')+'</center>',productColumnSize,maincolstyle);
    }


    LoadDataPageFunc.UpdateProductsListCard = function (productslist) {
        const isempty = typeof productslist === 'array' || productslist.length === 0;
        if (!productslist || isempty) {
            $('#card-body-StoreProductsCard').html('<p style="text-align:center;">No Products</p>');
            return false;
        }
        let cardarray = [];
        cardarray.push('<div class="row" style="">');
        iterateArray(productslist, (data, rownum) => {
            cardarray.push(LoadDataPageFunc.ProductsListNewCard(data, rownum));
        });
        cardarray.push('</div>');

        const finalhtml = cardarray.join('');
        $('#card-body-StoreProductsCard').html(finalhtml);
        LoadPhotoIMGTargetClass('StoreProductsIMGMarket', settodisplaylater = true) ;
        return true;
    };

    LoadDataPageFunc.PopulateDetailsNow = function (name, description, address, category, subcategory, products) {
        $('#StoreNameMarketPlace').html(name);
        $('#StoreDescription').html(description);
        $('#StoreLocationMarketPlace').html(address);
        const StoreProductsColumn = UICardSimple('Products', text = '', id = 'StoreProductsCard');
        $('#StoreProductsColumn').html(StoreProductsColumn);
        LoadDataPageFunc.UpdateProductsListCard(products);
    };


    

    LoadDataPageFunc.ViewPhotosLink = function (){
        const datasend = {t:currenttarget,type: LoadDataPageFunc.Settings.Phototype};
        ButtonGo('ViewAllPhotos',datasend);
    }


    LoadDataPageFunc.Settings.Phototype = "StoreMarket";

    LoadDataPageFunc.StoreLoadErrorModal=function(){
        ModalQuickDismiss(false, 'Store Not Available!', 'UnavailableStoreModal');
    }

    LoadDataPageFunc.PopulateDetails = function () {
        let description;
        let photosarray;

        if (!currenttarget){LoadDataPageFunc.StoreLoadErrorModal();}

        const UpdateDetailsUI = function (response) {


            if (!response) {
                LoadDataPageFunc.StoreLoadErrorModal();
                return false;
            }

           
            Preloaders.ImageList(currenttarget,LoadDataPageFunc.Settings.Phototype);

      
            LoadPhotosCard('PhotosCard', "LoadDataPageFunc.ViewPhotosLink();", response.photourl);


            LoadDataPageFunc.PopulateDetailsNow(response.name, response.description, response.address, response.category, response.subcategory, response.products);

        };

        Preloaders.ViewStoreinMarket(currenttarget, true, UpdateDetailsUI);

    };


    

    LoadDataPageFunc.Main = function () {
        changeTopbarTitle(LoadDataPageFunc.PageTitle);
        LoadDataPageFunc.PopulateDetails();
    };



    LoadDataPageFunc.Main();
</script>