<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">
                            <img src="/assets/micons//image-alt.svg" style="max-width: 100%; 
                                  max-height: 100%; width: auto; height: 100%;">
                        </div>
                        <br>
                        <div class="row" style="">
                            <div class="col">
                                <h3 id="ProductNameMarketPlace"></h3>
                            </div>
                            <div class="col" id="ProductUnitMarketPlace"></div>
                        </div>

                        <ul class="mt-3 box-outstanding-service" id="ControlsAddCartBuy">
                            <li onclick="LoadDataPageFunc.AddToCart();return false;">
                                <div class="">
                                    <img src="/assets/addtocart.png" style="width: 30; height: 30;" class="icon-user">
                                </div>Add To Cart
                            </li>
                            <li onclick="LoadDataPageFunc.Buy();return false;">
                                <div class="">
                                    <img src="/assets/buy.png" style="width: 30; height: 30;" class="icon-user">
                                </div>Buy
                            </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="ProductDescription">

                    </div>

                    <h5></h5>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md" style="overflow:hidden;display: none;" id="OutOfStockColumn">
        <div class="card ListRowCard" id="ListRowCard-3" style="">
            <div class="card-body ListCardRow" id="card-body-ListRowCard-3">
                <div style="text-align:center;" id="OutOfStockMessage">
                    Out of Stock!
                    <button class="btn" onclick="ButtonGo('ListProductsMarket','');">Go to Market</button>
                </div>

                <h5></h5>
            </div>
        </div>
    </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 = 'Product Details';
    LoadDataPageFunc.MainDetailsURL = '';
    LoadDataPageFunc.Details = {};
    LoadDataPageFunc.Settings = {};

    LoadDataPageFunc.Disabled = false;

    LoadDataPageFunc.OutofStock = function () {
        $('#OutOfStockColumn').show();
        $('#ControlsAddCartBuy').hide()

        ModalQuickDismiss(false, 'Product Out of Stock');
        LoadDataPageFunc.Disabled = true;
    };

    LoadDataPageFunc.Buy = function () {
        if (LoadDataPageFunc.Disabled) { return false; }
        gotoPage('ConfirmBUYProductMarket', cartobj, nohistory = 0, redundantpage = 0);
    };
    LoadDataPageFunc.AddToCart = function () {
        if (LoadDataPageFunc.Disabled) { return false; }
        if (!currenttarget) { return false; }
        let reqq = new RequestData(false);
        reqq.fromVarCache(false).data(null).url(`/cart/add/one/${currenttarget}`).type('GET')
            .success((response) => {
                if (response === true) {
                    ModalQuickDismiss('', 'Added to Cart!', 'ModalAddedtoCartSuccessfully');
                    $('#modal-header-ModalAddedtoCartSuccessfully').hide();
                } else {
                    ModalQuickDismiss('', 'Unable to Add to Cart!', 'ModalUnableAddtoCart');
                    $('#modal-header-ModalUnableAddtoCart').hide();
                }
                Preloaders.CartContents();
            }).go();
    };
    LoadDataPageFunc.PopulateDetailsNow = function (name, description, price, unit, available) {

        $('#ProductNameMarketPlace').html(name);
        $('#ProductDescription').html(description);
        $('#ProductUnitMarketPlace').html('P' + price + ' / ' + unit);
        
        if (!available) { LoadDataPageFunc.OutofStock(); }
    };



    LoadDataPageFunc.Settings.Phototype = "ProductMarket";

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

        const UpdateDetailsUI = function (response) {


            const ErrorModal = function () {
                ModalQuickDismiss(false, 'Product Not Available!', 'UnavailableProductModal');
            };

            if (!response) {
                ErrorModal();
                return false;
            }

            let ProductData = response.data || false;
            if (!ProductData) { ErrorModal(); return false; }

            LoadDataPageFunc.Details.photourl = ProductData.photourl;
            LoadPhotosCard('PhotosCard', onclick = `ButtonGo('ViewAllPhotos','${currenttarget}');`, ProductData.photourl);

            LoadDataPageFunc.PopulateDetailsNow(ProductData.name, ProductData.description, ProductData.price, ProductData.unitname, ProductData.available);

        };

        Preloaders.ViewProductinMarket(currenttarget, true, UpdateDetailsUI);

        
    };

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



    LoadDataPageFunc.Main();
</script>