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


    </div>
</div>


</div>

</div>

<script>
    LoadDataPageFunc = {};
    LoadDataPageFunc.PageTitle = 'Pending Delivery';
    LoadDataPageFunc.MainDetailsURL = '';
    LoadDataPageFunc.Details = {};

    LoadDataPageFunc.SetQuantityUI = function (newquantity, rownum) {
        if (typeof rownum !== 'number') { return false; }
        if (typeof newquantity !== 'number') { return false; }
        let controlid = "ProductCartMarket-" + rownum;
        $('#' + controlid).html(newquantity);
        const newvalue = $('#' + controlid).html();
        if (newquantity !== newvalue) { return false; }
        return true;
    };


    LoadDataPageFunc.FindRowNumByHash = function (hashkey) {
        let element = $('[data-hash="' + hashkey + '"]');
        if (element.length === 0) { return false; }
        let nrownum = element.data('rownum');
        return nrownum
    };


    LoadDataPageFunc.SetQuantitybyHash = function (newquantity, hashkey) {
         
        if ( !hashkey || typeof hashkey !== 'string') { return false; }
        let rownum = '';
        rownum =LoadDataPageFunc.FindRowNumByHash(hashkey);
        
        if (rownum===false) { return false; }
        const changequantity = LoadDataPageFunc.SetQuantityUI(newquantity, rownum);
        if (!changequantity) { return false; }
        return true;
    };

    LoadDataPageFunc.UpdateProductQuantityCart=function(response,producthash){
        
        if (response === false) { return false; }
                if (typeof response !== 'number') {
                    return false;
                };
               return LoadDataPageFunc.SetQuantitybyHash(response, producthash);
                
    };


    LoadDataPageFunc.RequestData = new RequestData(false);

    LoadDataPageFunc.PendingDeliveryRow = function (rowdata, rownum) {
        const hashkey = rowdata.hashkey || false;
        if (!hashkey){return '';}
        let productviewonclick = "ButtonGo('TransactionDetailsProductMarket','" + hashkey + "');";
        const photourlsArray = rowdata.photourl;
        let photourl = ''
        if (photourlsArray && typeof photourlsArray === "array") {
            photourl = photourlsArray[0];
        } else {
            photourl = photourlsArray;
        }
        const name = rowdata.name;
        const price = rowdata.transactionprice |'';
        const unit = rowdata.unit;
        const items=rowdata.noofitems;
        const transactiondate= formatDateTimetoReadable(rowdata.date) || '';
        const priceperunit = 'P' + price + ' / ' + unit;
        photourl = '/RequestData/File/' + photourl;
        const transactioncode =rowdata.transactioncode ||'';


        return `<div class="col-md card ListRowCard" style="overflow:hidden;" data-hash="${hashkey}" data-rownum="${rownum}">
           
            <div class="row">
                <div class="col" id ="product-image-marketplace-pendingbuys-${rownum}" style=" padding-top: 10px; padding-bottom: 10px;">
                    <a href="javascript:void(0);" onclick="${productviewonclick}">
                        <img id="ProductPendingBuysMarketPlacePhoto-${rownum}" src="${photourl}"  style="width: 200px;height: 200px;">
                    </a>
                </div>
            

                <div class="col" id=${'product-controls-pendingbuys-marketplace-container-' + rownum}>
                    <div class="row">
                         <div class="col">

                        </div>
                        <div class="col-12" style=" padding-top: 10px;text-align:center;">
                        <h6 style="font-weight:200;">${transactioncode}<br>${transactiondate}</h6>
                        <h3>${name}<br>...</h3>
                        <h6>${'Total items '+items}</h6>
                        </div>
                        
                        <div class="col-12 " style="text-align: center;">
                            <br><br>
                            <h1 id="PendingBuysMarket-${rownum}">Total Price: P${price}</h1>
                        </div>
                        <div class="col-12">
                            <br><br>
                        </div>
                         
                        </div>
    
                </div>

            </div>
        </div>`;
    };


    LoadDataPageFunc.PopulateDetails = function () {

        let reqq = new RequestData(true);
        reqq.fromVarCache(true).data().url('/marketplace/pending/delivery').type('POST')
            .success((response) => {
                let htmllist = []; let finalhtml = '';

                response =[];
               response[0]={
                    hashkey:'afrvfdv',
                    date:'2024-04-29 21:26:09',
                    photourl:'d5650f203fcd447bc7c409f9f0d06a67315041dcd3fd599f63b80d8fe5cc95734b644c2d',
                    transactionprice: 200,
                    transactioncode:'BM-06A67315041DCD3FD-2024',
                    name: 'Sinandomeng',
                    noofitems: 3,
                    trackingnumber:'PXA38U67',
                };
                response[1]={
                    hashkey:'ddddd',
                    date:'2024-04-29 21:26:09',
                    photourl:'d5650f203fcd447bc7c409f9f0d06a67315041dcd3fd599f63b80d8fe5cc95734b644c2d',
                    transactionprice: 200,
                    transactioncode:'BM-06A67315041DCD3FD-2024',
                    name: 'cocopandan',
                    noofitems: 3,
                    trackingnumber:'PXA38U67',
                } ;
            
                if (!response) { return false; }

                LoopArrayorObject(response, (item,rownum) => {
                    htmllist.push(LoadDataPageFunc.PendingDeliveryRow(item, rownum));
                });

                finalhtml = htmllist.join('');
                $('#CartListRow').html(finalhtml);

                LoopArrayorObject(response, (item,rownum) => {
                    LoadAndCreateURLfromFileHash(item.photourl).then(bloburl => {
                        const imgid = 'ProductPendingBuysMarketPlacePhoto-' + rownum;
                        $('#ProductPendingBuysMarketPlacePhoto-' + rownum).attr('src', bloburl);
                    });

                });


            }).go();

    };

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



    LoadDataPageFunc.Main();
</script>