@php
    use App\Http\Controllers\Market\StoreController;
    use App\Enums\UserTypes;
    use App\Http\Controllers\FilesMainController;
    if (!$FragmentOnly && $current_target) {

    }


@endphp


<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">
                            <center>
                                <div id="PhotosPlaceholder"
                                    style="width: 100%; max-width: 600px; height: 350px; display: flex; justify-content: center; align-items: center; background: #f0f0f0; color: #555; font-size: 18px;">
                                    Loading photos...
                                </div>
                            </center>
                        </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>
                            @if($current_user->acct_type === UserTypes::ULTIMATE)
                                <li onclick="LoadDataPageFunc.Edit();return false;">
                                    <div class="">
                                        <img src="/assets/edit.png" style="width: 30; height: 30;" class="icon-user">
                                    </div>Edit
                                </li>

                            @endif
                        </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">

        </UI>



    </div>
</div>

</div>

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

    LoadDataPageFunc.Disabled = false;


    LoadDataPageFunc.Edit = function () {
        gotoPage('EditStoreAdmin', currenttarget);
    };

    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.store_price || object.price || '';
        let isStorePrice = typeof object.store_price === 'number';
        let photo = object.photourl || '';
        const unit = object.unitname || '';
        if (!hash) { return ''; }


        if (typeof photo === 'array' || typeof photo === 'object') {
            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} overflow:hidden; padding-bottom:10px;  width: 40vh;   height: 40vh; ">${colinner}</div>`;
        }


        if (isStorePrice) {
            isStorePrice = 'Store Price';
        } else {
            isStorePrice = '';
        }

        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>${isStorePrice} P${price} / ${unit}</h6></div></div>`;

        const maincolstyle = '';
        let target_data = { target: hash, store_hash: currenttarget };
        return newcol(`<center onclick='gotoPage("BuyViewProductMarket", ${JSON.stringify(target_data)})'>` + 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;
        let response;


        if (!currenttarget) { console.log('currenttarget not found', currenttarget); LoadDataPageFunc.StoreLoadErrorModal(); }

        const UpdateDetailsUI = function (response) {


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



            @if (isset($current_data) && $current_data)
                response.photourl = @json($current_data?->photourl ?? []);

                @foreach ($current_data?->photourl as $photohash)


                @endforeach
            @else
                Preloaders.ImageList(currenttarget, LoadDataPageFunc.Settings.Phototype);
            @endif


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


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

        };


        @if ($FragmentOnly)
            Preloaders.ViewStoreinMarket(currenttarget, true, UpdateDetailsUI);
        @else
            response = @json($current_data);
            UpdateDetailsUI(response);
        @endif

    };




    LoadDataPageFunc.Main = function () {
        setDynamicCSS(`  .ListRowCard {
        margin-bottom: 5px;
    }`);
        changeTopbarTitle(LoadDataPageFunc.PageTitle);
        LoadDataPageFunc.PopulateDetails();
    };



    LoadDataPageFunc.Main();
</script>