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

    <div class="row">
        <div class="col-md" style="overflow:hidden;">

                <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 class="row" style="">
                            <div class="col" id="TransactionCode">
                            </div>
                            <div class="col" id="TransactionDate"></div>
                        </div>



                    </div>

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

    <div class="col-md" style="overflow:hidden;" id="ColumnItemList">

        <div class="card ListRowCard" id="ListRowCard-0" style="">
            <div id="cardheader-ListRowCard-0" class="card-header ui-sortable-handle"
                style="cursor: move;">
                Items
                <div class="card-tools" id="card-tools-ListRowCard-0">

                </div>
            </div>
            <div class="card-body ListCardRow" id="card-body-ListRowCard-0">

                <div class="row" style="" id="ItemsList">

                </div>



            </div>

        </div>
</div>


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

                <div class="card-body ListCardRow" id="card-body-ListRowCard-2">
                    <div class="col-12" style="text-align: center;">
                        Status: <h3 id="TStatus"></h3>
                    </div>
                    <h5></h5>
                </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="">
                        <div class="row" style="">
                            <div class="col">
                                Total Items<h4 id="TotalItems"></h4>
                            </div>
                            <div class="col">
                                Total Price: <h4 id="TotalPrice"></h4>
                            </div>

                        </div>



                    </div>

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

                <div class="card-body ListCardRow" id="card-body-ListRowCard-2">
                    <button class="btn" onclick="LoadDataPageFunc.ShowConfirmDelivery();">
                        <img src="/assets/checkmark.png" style="width: 30; height: 30;" class="icon-user">
                        Set As Delivered
                    </button>

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

</div>

<script>
    LoadDataPageFunc = {};
    LoadDataPageFunc.PageTitle = 'Purchase Details';
    LoadDataPageFunc.MainDetailsURL = '';
    LoadDataPageFunc.Details = {};
    LoadDataPageFunc.Settings = {};
    LoadDataPageFunc.Settings.ProductNotAvailableModalDismissed = false;

    LoadDataPageFunc.SendPostData = function (url, func, VarCache = false, fromhashcache = false) {
        let reqq = new RequestData()
        reqq.fromVarCache(false).data({ target: currenttarget }).url(url).type('POST')
            .success((response) => {
                if (func) {
                    return func(response);
                }
            }).go();
    }

    LoadDataPageFunc.ProductRow = function (rowdata, rownum) {
        const hashkey = rowdata.hashkey;
        let productviewonclick = "ButtonGo('BuyViewProductMarket','" + hashkey + "');";
        const photourlsArray = rowdata.photourl;
        let photourl = ''
        if (photourlsArray && typeof photourlsArray === "array") {
            photourl = photourlsArray[0];
        } else {
            photourl = photourlsArray;
        }
        const name = rowdata.name;
        const quantity = rowdata.quantity;
        const price =rowdata.price;
        const totalprice = rowdata.totalprice;
        const unit = rowdata.unit;
        const priceperunit = 'P' + price + ' / ' + unit;
        photourl = '/RequestData/File/' + photourl;

        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-cart-${rownum}" style=" padding-top: 10px; padding-bottom: 10px;">
                    <a href="javascript:void(0);" onclick="${productviewonclick}">
                        <img id="ProductCartMarketPlacePhoto-${rownum}" src="${photourl}"  style="width: 200px;height: 200px;">
                    </a>
                </div>
            

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

                        </div>
                        <div class="col-12" style=" padding-top: 10px;text-align:center;">
                        <h3>${name}</h3>
                        <h6>${priceperunit}</h6>
                        </div>
                        
                        <div class="col-12 " style="text-align: center;">
                           <br> Quantity<h3 id="ProductTransactionBuyDetailsMarket-Item-Quantity-${rownum}">${quantity}</h3>
                        </div>

                        <div class="col-12">
                            <br>
                        </div>
                        <div class="col-12" style="text-align: center;" id="totalitemprice-${rownum}">
                            <br> Price<h3 id="ProductTransactionBuyDetailsMarket-Item-Price-${rownum}">${totalprice}</h3>
                        </div>
                         
                        </div>
    
                </div>

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

    LoadDataPageFunc.ConfirmDelivery = function () {
        let responsefunc = function (response) {

            if (response!==true){
                ModalQuickDismiss(false,'Unable to Confirm Delivery<br>'+response);  return false;}
            else{
                hidemodal('TransactionConfirmDeliveryModal');
                ModalQuickDismiss(false,'Delivery Confirmed');  
                ReloadPage();
            return true;}

        };
        LoadDataPageFunc.SendPostData('/Transactions/Buy/Market/Confirm/Delivery', responsefunc);

    };

    LoadDataPageFunc.ShowConfirmDelivery = function () {
        const modalbody = `Are you sure you wish to Confirm Delivery?<br>
                                            Please Check Items First!`;
        const modalfooter = `<button class="btn" onclick="LoadDataPageFunc.ConfirmDelivery();"><img src="/assets/checkmark.png" style="width: 30; height: 30;" class="icon-user">Confirm</button>`;

        CreateAndShowModal('TransactionConfirmDeliveryModal', false, modalbody, modalfooter);
    };


    LoadDataPageFunc.PopulateDetailsNow = function (data) {

        const tcode = data.transactioncode;
        const tdate = formatDateTimetoReadable(data.transactiondate) || '';
        const tprice = data.totalprice;
        const tItems = data.totalitems;
        const status = data.status;

        $('#TransactionCode').html(tcode);
        $('#TransactionDate').html(tdate);
        $('#TotalItems').html(tItems);
        $('#TotalPrice').html('P' + tprice);
        $('#TStatus').html(status);

        if (strtolower(status)==='delivered'){$('#ColumnConfirmDeliveryButton').hide();}


    };

    LoadDataPageFunc.Settings.Phototype = "ProductMarket";



    LoadDataPageFunc.BuySuccess = function () {
        ModalQuickDismiss(false, 'Successfully Bought Product!', 'ModalConfirmBuySuccess');
        gotoPage('PendingBuysProductMarket');
        return;
    };


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


        let responsefunc = function (response) {
            response = {};
          
            response.data = {
                transactioncode: 'sgfesbgb',
                transactiondate: '2024-12-12 19:19:00',
                totalprice: '9030',
                totalitems: 5,
                status: 'paid',
                items: [
                    {
                        hashkey:'asdfasfvv443',
                        name: 'Sinandomeng',
                        unit: '25kg',
                        quantity: 5,
                        price: 1430,
                        totalprice: 5 * 1430,
                        photourl: 'd5650f203fcd447bc7c409f9f0d06a67315041dcd3fd599f63b80d8fe5cc95734b644c2d'
                    },
                    {
                        hashkey:'asdfasfvv443',
                        name: 'Coco Pandan',
                        unit: '25kg',
                        quantity: 7,
                        price: 1235,
                        totalprice: 7 * 1235,
                        photourl: '09db0d2947463d87aee76aec90dc18d439bc6fe9c8d454b6c3de35d7006bc526cbfbafcf'
                    },
                    {
                        hashkey:'asdfasfvv443',
                        name: 'Buko Pandan',
                        unit: '50kg',
                        quantity: 18,
                        price: 2000,
                        totalprice: 18 * 2000,
                        photourl: '0fdd3d467dfc392f4a8a34e37e81ca15bf613ab6304f6b4c3af6519ae6a323d5cac63666'
                    }

                ]
            };



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

            let ProductData = response.data;
            let ItemsArr = ProductData.items;
            let htmlrows=[];

for (let i = 0; i < ItemsArr.length; i++) {
    htmlrows.push(LoadDataPageFunc.ProductRow(ItemsArr[i],i));
}

const htmlprods=htmlrows.join('');

document.getElementById('ItemsList').innerHTML = htmlprods;

LoopArrayorObject(ItemsArr,(item,rowno)=>{
    LoadPhototoIMG('ProductCartMarketPlacePhoto-'+rowno,item.photourl, onclick = `ButtonGo('BuyViewProductMarket','${item.hashkey}');`);
});
        
            LoadDataPageFunc.PopulateDetailsNow(response.data);



        };

        LoadDataPageFunc.SendPostData(`/View/Product/Details`, responsefunc, true, true);




    };

    LoadDataPageFunc.TransactionDetailsNotAvailable = function () {
        const modalfooter = `
            <button class="btn" onclick="Backkey();">Back</button>
            <button class="btn" onclick="ButtonGo('PendingBuysProductMarket')">All Pending Delivery</button>
            `;
        CreateAndShowModal('modal-buyconfirm-productunavailable', false, 'Product Not Available', modalfooter, false);
        $('#modal-buyconfirm-productunavailable').on('hidden.bs.modal', function () {
            LoadDataPageFunc.Settings.ProductNotAvailableModalDismissed = true;
            ButtonGo('ListProductsMarket');
        });
    };

    LoadDataPageFunc.Main = function () {
        //   if (!currenttarget  ||  currenttarget==='0'){   LoadDataPageFunc.ProductNotAvailable();return false;}
        changeTopbarTitle(LoadDataPageFunc.PageTitle);
        LoadDataPageFunc.PopulateDetails();
    };



    LoadDataPageFunc.Main();
</script>