@php
    Theme::set('stickyHeader', 'false');
    Theme::set('topHeader', Theme::partial('header-product-page', compact('product')));
    Theme::set('bottomFooter', Theme::partial('footer-product-page', compact('product')));
    Theme::set('pageId', 'product-page');
    Theme::set('headerMobile', Theme::partial('header-mobile-product'));
@endphp

<div class="ps-page--product" style="padding-bottom: 0; margin-bottom: 0; min-height: 0;">
    <div class="ps-container" id="app" style="padding-bottom: 0; margin-bottom: 0; min-height: 0;">
            <div class="ps-page__container">
                <div class="ps-page__left">
                    <div class="ps-product--detail ps-product--fullwidth">
                        <div class="ps-product__header">
                            <div class="ps-product__thumbnail">
                                @include(EcommerceHelper::viewPath('includes.product-gallery'))
                            </div>
                            <div class="ps-product__info">
                                <h1>{{ $product->name }}</h1>
                                <div class="ps-product__meta">
                                    @if ($product->brand_id)
                                        <p>{{ __('Brand') }}: <a href="{{ $product->brand->url }}">{{ $product->brand->name }}</a></p>
                                    @endif

                                    @if (EcommerceHelper::isReviewEnabled() && $product->reviews_count > 0)
                                        <div class="rating_wrap">
                                            <a href="#tab-reviews">
                                                <div class="rating">
                                                    <div class="product_rate" style="width: {{ $product->reviews_avg * 20 }}%"></div>
                                                </div>
                                                <span class="rating_num">({{ $product->reviews_count }} {{ __('reviews') }})</span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                                @if (! EcommerceHelper::hideProductPrice() || EcommerceHelper::isCartEnabled())
                                    <h4 class="ps-product__price @if ($product->front_sale_price !== $product->price) sale @endif"><span>{{ format_price($product->front_sale_price_with_taxes) }}</span> @if ($product->front_sale_price !== $product->price) &nbsp;<del>{{ format_price($product->price_with_taxes) }} </del> @endif</h4>
                                @endif
                                <div class="ps-product__desc">
                                    @if (is_plugin_active('marketplace') && $product->store_id)
                                        <p>{{ __('Sold By') }}: <a href="{{ $product->store->url }}"><strong>{{ $product->store->name }}</strong></a></p>
                                    @endif

                                    <div class="ps-list--dot">
                                        {!! apply_filters('ecommerce_before_product_description', null, $product) !!}
                                        {!! BaseHelper::clean($product->description) !!}
                                        {!! apply_filters('ecommerce_after_product_description', null, $product) !!}
                                    </div>
                                </div>

                                @php
                                    $flashSale    = $product->latestFlashSales()->first();
                                    $catFlashData = null;
                                    if (! $flashSale) {
                                        $catFlashData = Botble\Ecommerce\Facades\FlashSale::getFacadeRoot()
                                            ->categoryFlashSaleForProduct($product);
                                    }
                                @endphp
                                @if ($flashSale || $catFlashData)
                                    @php
                                        $activeFlashSale = $flashSale ?? $catFlashData['flash_sale'];
                                        $catDiscount     = $catFlashData['category_discount'] ?? null;
                                        $soldQty   = $flashSale ? $flashSale->pivot->sold     : ($catDiscount->sold ?? 0);
                                        $totalQty  = $flashSale ? $flashSale->pivot->quantity  : ($catDiscount->quantity ?? 0);
                                        $progress  = $totalQty > 0 ? ($soldQty / $totalQty) * 100 : 0;
                                    @endphp
                                    <div class="ps-product__countdown">
                                        <figure>
                                            <figcaption>{{ __("Don't Miss Out! This promotion will expires in") }}</figcaption>
                                            <ul class="ps-countdown" data-time="{{ $activeFlashSale->end_date }}">
                                                <li><span class="days"></span>
                                                    <p>{{ __('Days') }}</p>
                                                </li>
                                                <li><span class="hours"></span>
                                                    <p>{{ __('Hours') }}</p>
                                                </li>
                                                <li><span class="minutes"></span>
                                                    <p>{{ __('Minutes') }}</p>
                                                </li>
                                                <li><span class="seconds"></span>
                                                    <p>{{ __('Seconds') }}</p>
                                                </li>
                                            </ul>
                                        </figure>
                                        <figure>
                                            <figcaption>{{ __('Sold Items') }}</figcaption>
                                            <div class="ps-product__progress-bar ps-progress" data-value="{{ $progress }}">
                                                <div class="ps-progress__value"><span style="width: {{ $progress }}%;"></span></div>
                                                @if (Botble\Ecommerce\Facades\FlashSale::isShowSaleCountLeft() && $totalQty)
                                                    <p><b>{{ $soldQty }}/{{ $totalQty }}</b> {{ __('Sold') }}</p>
                                                @endif
                                            </div>
                                        </figure>
                                    </div>
                                @endif

                                <form class="add-to-cart-form" method="POST" action="{{ route('public.cart.add-to-cart') }}">
                                    @csrf
                                    @if ($product->variations()->count() > 0)
                                        <div class="pr_switch_wrap">
                                            {!! render_product_swatches($product, [
                                                'selected' => $selectedAttrs,
                                                'view'     => Theme::getThemeNamespace() . '::views.ecommerce.attributes.swatches-renderer'
                                            ]) !!}
                                        </div>
                                    @endif

                                    {!! render_product_options($product) !!}

                                    <div class="number-items-available mb-3">
                                        @if ($product->isOutOfStock())
                                            <span class="text-danger">({{ __('Out of stock') }})</span>
                                        @else
                                            @if (!$productVariation)
                                                <span class="text-danger">({{ __('Not available') }})</span>
                                            @else
                                                @if ($productVariation->isOutOfStock())
                                                    <span class="text-danger">({{ __('Out of stock') }})</span>
                                                @elseif  (!$productVariation->with_storehouse_management || $productVariation->quantity < 1)
                                                    <span class="text-success">({{ __('Available') }})</span>
                                                @elseif ($productVariation->quantity)
                                                    <span class="text-success">
                                                    @if ($productVariation->quantity != 1)
                                                            ({{ __(':number products available', ['number' => $productVariation->quantity]) }})
                                                        @else
                                                            ({{ __(':number product available', ['number' => $productVariation->quantity]) }})
                                                        @endif
                                                </span>
                                                @endif
                                            @endif
                                        @endif
                                    </div>

                                    {!! apply_filters(ECOMMERCE_PRODUCT_DETAIL_EXTRA_HTML, null, $product) !!}
                                    @php
                                        $buyXGetYOffers = \Botble\Ecommerce\Models\Discount::query()
                                            ->whereIn('type_option', [
                                                \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::QUANTITY_BASED,
                                                \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::BUY_X_GET_Y,
                                                \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::BUY_X_GET_Y_DISCOUNT,
                                            ])
                                            ->active()
                                            ->available()
                                            ->with(['products', 'productCollections', 'productCategories'])
                                            ->get()
                                            ->filter(function ($discount) use ($product) {
                                                $originalProduct = $product->original_product;
                                                $currentProductIds = collect([$product->id, $originalProduct->id])->filter()->map(fn ($id) => (int) $id);
                                                $discountProductIds = $discount->products
                                                    ->flatMap(function ($discountProduct) {
                                                        $ids = collect([(int) $discountProduct->id]);

                                                        if ($discountProduct->is_variation) {
                                                            $ids->push((int) $discountProduct->original_product->id);
                                                        } else {
                                                            $ids->push(...$discountProduct->variations()->pluck('product_id')->map(fn ($id) => (int) $id)->all());
                                                        }

                                                        return $ids;
                                                    })
                                                    ->filter()
                                                    ->unique();

                                                return match ($discount->target) {
                                                    \Botble\Ecommerce\Enums\DiscountTargetEnum::SPECIFIC_PRODUCT,
                                                    \Botble\Ecommerce\Enums\DiscountTargetEnum::PRODUCT_VARIANT => $currentProductIds->intersect($discountProductIds)->isNotEmpty(),
                                                    \Botble\Ecommerce\Enums\DiscountTargetEnum::PRODUCT_COLLECTIONS => $originalProduct->productCollections->pluck('id')->intersect($discount->productCollections->pluck('id'))->isNotEmpty(),
                                                    \Botble\Ecommerce\Enums\DiscountTargetEnum::PRODUCT_CATEGORIES => $originalProduct->categories->pluck('id')->intersect($discount->productCategories->pluck('id'))->isNotEmpty(),
                                                    default => true,
                                                };
                                            })
                                            ->map(function ($discount) {
                                                if ($discount->type_option === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::QUANTITY_BASED) {
                                                    return [
                                                        'buy' => (int) $discount->product_quantity,
                                                        'products' => null,
                                                        'type_option' => $discount->type_option,
                                                        'discount_percent' => min(max((float) $discount->value, 0), 100),
                                                        'title' => $discount->title,
                                                    ];
                                                }

                                                $freeProducts = collect(\Illuminate\Support\Arr::wrap(data_get($discount->apply_conditions, 'free_products', [])))
                                                    ->mapWithKeys(fn ($item) => [(int) data_get($item, 'product_id') => [
                                                        'quantity' => max((int) data_get($item, 'quantity', 1), 1),
                                                        'discount_percent' => min(max((int) data_get($item, 'discount_percent', 100), 1), 100),
                                                    ]])
                                                    ->filter(fn ($quantity, $productId) => $productId > 0);
                                                $legacyProductIds = array_values(array_filter(array_map('intval', \Illuminate\Support\Arr::wrap(data_get($discount->apply_conditions, 'free_product_ids', [])))));
                                                foreach ($legacyProductIds as $legacyProductId) {
                                                    $freeProducts[$legacyProductId] ??= [
                                                        'quantity' => max((int) $discount->value, 1),
                                                        'discount_percent' => $discount->type_option === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::BUY_X_GET_Y_DISCOUNT ? min(max((int) $discount->value, 1), 100) : 100,
                                                    ];
                                                }

                                                $offerProducts = $freeProducts->isNotEmpty()
                                                    ? \Botble\Ecommerce\Models\Product::query()
                                                        ->whereIn('id', $freeProducts->keys()->all())
                                                        ->get()
                                                        ->keyBy('id')
                                                        ->all()
                                                    : [];

                                                $freeProductText = $freeProducts
                                                    ->map(function ($settings, $productId) use ($discount, $offerProducts) {
                                                        $offerProduct = $offerProducts[$productId] ?? null;
                                                        $productLabel = $offerProduct
                                                            ? '<a href="' . e($offerProduct->url) . '">' . e($offerProduct->name) . '</a>'
                                                            : e(__('selected product'));

                                                        return $discount->type_option === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::BUY_X_GET_Y_DISCOUNT
                                                            ? ((int) $settings['discount_percent']) . '% off ' . $productLabel
                                                            : ((int) $settings['quantity']) . ' x ' . $productLabel;
                                                    })
                                                    ->implode(', ');

                                                return [
                                                    'buy' => (int) $discount->product_quantity,
                                                    'products' => $freeProductText,
                                                    'type_option' => $discount->type_option,
                                                    'discount_percent' => null,
                                                    'title' => $discount->title,
                                                ];
                                            })
                                            ->filter(fn ($offer) => $offer['buy'] > 0 && ($offer['products'] || $offer['type_option'] === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::QUANTITY_BASED));
                                    @endphp

                                    @if ($buyXGetYOffers->isNotEmpty())
                                        <div class="bb-gift-offer-box">
                                            @foreach ($buyXGetYOffers as $offer)
                                                <div class="bb-gift-offer">
                                                    <strong>{{ __('Offer') }}:</strong>
                                                    @if ($offer['type_option'] === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::QUANTITY_BASED)
                                                        {!! __('Buy :buy or more, get :discount% off', [
                                                            'buy' => $offer['buy'],
                                                            'discount' => $offer['discount_percent'],
                                                        ]) !!}
                                                    @elseif ($offer['type_option'] === \Botble\Ecommerce\Enums\DiscountTypeOptionEnum::BUY_X_GET_Y_DISCOUNT)
                                                        {!! __('Buy :buy, get :products when added together', [
                                                            'buy' => $offer['buy'],
                                                            'products' => $offer['products'],
                                                        ]) !!}
                                                    @else
                                                        {!! __('Buy :buy, get :products free', [
                                                            'buy' => $offer['buy'],
                                                            'products' => $offer['products'],
                                                        ]) !!}
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    <div class="ps-product__shopping">
                                        <figure>
                                            <figcaption>{{ __('Quantity') }}</figcaption>
                                            <div class="form-group--number product__qty">
                                                <button class="up" type="button"><i class="icon-plus"></i></button>
                                                <button class="down" type="button"><i class="icon-minus"></i></button>
                                                <input class="form-control qty-input" type="number" name="qty" value="1" placeholder="1" min="1">
                                            </div>
                                        </figure>
                                        <input type="hidden" name="id" class="hidden-product-id" value="{{ ($product->is_variation || !$product->defaultVariation->product_id) ? $product->id : $product->defaultVariation->product_id }}"/>

                                        @if (EcommerceHelper::isCartEnabled())
                                            <button class="ps-btn ps-btn--black add-to-cart-button @if ($product->isOutOfStock()) btn-disabled @endif" type="submit" name="add_to_cart" value="1" {!! EcommerceHelper::jsAttributes('add-to-cart', $product, additional: ['data-bb-toggle' => 'none']) !!} @if ($product->isOutOfStock()) disabled @endif>{{ __('Add to cart') }}</button>
                                            {{-- 
                                                @if (EcommerceHelper::isQuickBuyButtonEnabled())
                                                    <button class="ps-btn add-to-cart-button @if ($product->isOutOfStock()) btn-disabled @endif" type="submit" name="checkout" value="1" {!! EcommerceHelper::jsAttributes('add-to-cart', $product, additional: ['data-bb-toggle' => 'none']) !!} @if ($product->isOutOfStock()) disabled @endif>{{ __('Buy Now') }}</button>
                                                @endif
                                            --}}

                                            @if (!empty($product->store->whatsapp_number))

                                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

                                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $product->store->whatsapp_number) }}?text={{ urlencode('Hi, I\'m interested in your product: ' . $product->name) }}" target="_blank" class="ps-btn add-to-cart-button connect-merchant-btn" style="display: inline-flex; align-items: center;">
                                            <i class="fab fa-whatsapp" style="font-size: 20px; margin-right: 8px;"></i>
                                            Connect with Merchant
                                            </a>
                                                                                        <!-- Include Font Awesome CDN in your HTML head if not already included -->
                                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

                                            <style>
                                            /* Default button styles */
                                            .connect-merchant-btn {
                                                display: inline-flex;
                                                align-items: center;
                                                text-decoration: none;
                                            }

                                            /* Mobile responsive styles */
                                            @media (max-width: 768px) {
                                                .connect-merchant-btn {
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                width: 100%; /* Ensure button takes full width or adjust as needed */
                                                text-align: center;
                                                }
                                                /* Optional: Center the button within its parent container */
                                                .button-container {
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                width: 100%;
                                                }
                                            }
                                            </style>

                                            @endif



                        @verbatim
                            <div id="customAddToCartModal" style="display:none;z-index:19999;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:8px;text-align:center;">
                            <p>Item added to cart!</p>
                            <p id="customGiftOfferMessage" class="text-success" style="display:none;margin-bottom:12px;"></p>
                            <div class="custom-cart-buttons">
                                <button type="button" id="continueShoppingBtn" class="custom-btn-style"> Continue Shopping </button>
                                <a href="/checkout" id="proceedToCheckoutBtn" class="ps-btn custom-btn2-style"> Proceed to Checkout </a>
                            </div>
                            </div>
                            <div id="customCartOverlay" style="display:none;z-index:19998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);"></div>
                            <script>
                                (function waitForjQuery() {
                                    if (typeof window.jQuery === 'undefined') {
                                    console.warn('Waiting for jQuery...');
                                    return setTimeout(waitForjQuery, 100);
                                    }
                                    $(document).ajaxSuccess(function(event, xhr) {
                                    try {
                                        const res = xhr.responseJSON;
                                        if (res && res.message && res.message.includes('Added product')) {
                                        const modal = document.getElementById('customAddToCartModal');
                                        const overlay = document.getElementById('customCartOverlay');
                                        const giftMessage = document.getElementById('customGiftOfferMessage');
                                        const giftOffer = res.data && res.data.gift_offer ? res.data.gift_offer : {};
                                        const gifts = []
                                            .concat(giftOffer.added || [])
                                            .concat(giftOffer.updated || []);
                                        if (giftMessage) {
                                            if (gifts.length) {
                                                giftMessage.innerHTML = gifts.map(function(gift) {
                                                    return 'Offer applied: ' + gift.quantity + ' x ' + gift.name + ' free in your cart.';
                                                }).join('<br>');
                                                giftMessage.style.display = 'block';
                                            } else {
                                                giftMessage.innerHTML = '';
                                                giftMessage.style.display = 'none';
                                            }
                                        }
                                        if (res.data && res.data.cart_content) {
                                            const parser = new DOMParser();
                                            const doc = parser.parseFromString(res.data.cart_content, 'text/html');
                                            const checkoutLinkEl = doc.querySelector('a[href*="/checkout/"]');
                                            if (checkoutLinkEl) {
                                            const checkoutUrl = checkoutLinkEl.getAttribute('href');
                                            const btn = document.getElementById('proceedToCheckoutBtn');
                                            if (btn) {
                                                btn.setAttribute('href', checkoutUrl);
                                            }
                                            } else {
                                            console.warn('❌ Checkout link not found in parsed HTML.');
                                            }
                                        }
                                        if (modal && overlay) {
                                            modal.style.display = 'block';
                                            overlay.style.display = 'block';
                                            document.body.style.overflow = 'hidden';
                                            modal.classList.add('show');
                                            document.getElementById('continueShoppingBtn').onclick = function() {
                                            modal.style.display = 'none';
                                            overlay.style.display = 'none';
                                            document.body.style.overflow = '';
                                            modal.classList.remove('show');
                                            };
                                            overlay.onclick = function() {
                                            modal.style.display = 'none';
                                            overlay.style.display = 'none';
                                            document.body.style.overflow = '';
                                            };
                                        }
                                        }
                                    } catch (e) {
                                        console.warn('❌ Failed to parse response:', e);
                                    }
                                    });
                                })();
                            </script>
                        @endverbatim

                        <style>
                            .custom-btn2-style {
                                font-size: 16px !important;
                            }

                            .bb-gift-offer-box {
                                border: 1px solid #16a34a;
                                background: #f0fdf4;
                                color: #14532d;
                                padding: 12px 14px;
                                border-radius: 8px;
                                margin: 14px 0;
                                font-size: 14px;
                            }

                            .bb-gift-offer + .bb-gift-offer {
                                margin-top: 6px;
                            }

                            .connect-merchant-btn {
                                font-size: 14px !important;
                                padding-left: 15px !important;
                                padding-right: 15px !important;
                            }
                            .custom-cart-overlay {
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: rgba(0, 0, 0, 0.4);
                                z-index: 19998;
                            }

                                @media (min-width: 600px) {
                                .custom-cart-buttons {
                                    flex-direction: row !important;
                                    justify-content: center !important;
                                }

                                .custom-cart-buttons .custom-btn-style,
                                .custom-cart-buttons .custom-btn2-style {
                                    width: auto !important;
                                }
                                }

                                .custom-cart-buttons {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 12px;
                                margin-top: 20px;
                                }

                                .custom-cart-buttons .custom-btn-style,
                                .custom-cart-buttons .custom-btn2-style {
                                width: 100%;
                                max-width: 260px;
                                padding: 14px 25px;
                                font-size: 16px;
                                text-align: center;
                                white-space: nowrap;
                                }

                                #customAddToCartModal {
                                opacity: 0;
                                transition: opacity 0.3s ease;
                                }

                                #customAddToCartModal.show {
                                opacity: 1;
                                }

                                .custom-btn-style {
                                font-size: 16px !important;
                                color: white;
                                font-weight: 600;
                                max-height: 50px;
                                padding-left: 30px;
                                padding-right: 30px;
                                background-color: #000;
                                white-space: nowrap;
                                border: none;
                                border-radius: 4px;
                                cursor: pointer;
                                display: inline-block;
                                line-height: 20px;
                                padding: 15px 45px;
                                transition: all 0.4s ease;
                                }

                                .custom-btn-style:hover {
                                background-color: rgb(18, 148, 109);
                                }

                                .custom-cart-modal {
                                position: fixed;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background: #fff;
                                z-index: 19999;
                                padding: 20px;
                                border-radius: 10px;
                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                                text-align: center;
                                min-width: 300px;
                                }

                                .custom-cart-buttons {
                                display: flex;
                                justify-content: center;
                                gap: 10px;
                                margin-top: 15px;
                                }


                        </style>









                                        @endif
                                        <div class="ps-product__actions">
                                            @if (EcommerceHelper::isWishlistEnabled())
                                                <a class="js-add-to-wishlist-button" href="#" data-url="{{ route('public.wishlist.add', $product->id) }}"><i class="icon-heart"></i></a>
                                            @endif
                                            @if (EcommerceHelper::isCompareEnabled())
                                                <a class="js-add-to-compare-button" href="#" data-url="{{ route('public.compare.add', $product->id) }}" title="{{ __('Compare') }}"><i class="icon-chart-bars"></i></a>
                                            @endif
                                        </div>
                                    </div>
                                </form>
                                <div class="ps-product__specification">

                                    <p @if (!$product->sku) style="display: none" @endif><strong>{{ __('SKU') }}:</strong> <span id="product-sku">{{ $product->sku }}</span></p>
                                    @if ($product->categories->isNotEmpty())
                                        <p class="categories"><strong> {{ __('Categories') }}:</strong>
                                            @foreach($product->categories as $category)
                                                <a href="{{ $category->url }}">{!! BaseHelper::clean($category->name) !!}</a>@if (!$loop->last),@endif
                                            @endforeach
                                        </p>
                                    @endif

                                    @if ($product->tags->isNotEmpty())
                                        <p class="tags"><strong> {{ __('Tags') }}:</strong>
                                            @foreach($product->tags as $tag)
                                                <a href="{{ $tag->url }}">{{ $tag->name }}</a>@if (!$loop->last),@endif
                                            @endforeach
                                        </p>
                                    @endif
                                </div>
                                <div class="ps-product__sharing">
                                    <span>{{ __('Share:') }}</span>

                                    {!! Theme::renderSocialSharing($product->url, SeoHelper::getDescription(), $product->image) !!}
                                </div>
                            </div>
                        </div>
                        <div class="ps-product__content ps-tab-root">
                            <ul class="ps-tab-list">
                                <li class="active"><a href="#tab-description">{{ __('Description') }}</a></li>
                                @if (EcommerceHelper::isProductSpecificationEnabled() && $product->specificationAttributes->where('pivot.hidden', false)->isNotEmpty())
                                    <li><a href="#tab-specification">{{ __('Specification') }}</a></li>
                                @endif
                                @if (EcommerceHelper::isReviewEnabled())
                                    <li><a href="#tab-reviews">{{ __('Reviews') }}&nbsp;({{ $product->reviews_count }})</a></li>
                                @endif
                                @if (is_plugin_active('marketplace') && $product->store_id)
                                    <li><a href="#tab-vendor">{{ __('Vendor') }}</a></li>
                                @endif
                                @if (is_plugin_active('faq'))
                                    @if (count($product->faq_items) > 0)
                                        <li><a href="#tab-faq">{{ __('Questions and Answers') }}</a></li>
                                    @endif
                                @endif
                            </ul>
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="tab-description">
                                    <div class="ps-document">
                                        <div class="ck-content">
                                            {!! BaseHelper::clean($product->content) !!}
                                        </div>
                                        <br />
                                        {!! apply_filters(BASE_FILTER_PUBLIC_COMMENT_AREA, null, $product) !!}
                                    </div>
                                </div>

                                @if (EcommerceHelper::isProductSpecificationEnabled() && $product->specificationAttributes->where('pivot.hidden', false)->isNotEmpty())
                                    <div class="ps-tab" id="tab-specification">
                                        <div class="tp-product-details-additional-info">
                                            @include(EcommerceHelper::viewPath('includes.product-specification'))
                                        </div>
                                    </div>
                                @endif

                                @if (EcommerceHelper::isReviewEnabled())
                                    <div class="ps-tab" id="tab-reviews">
                                        @include('plugins/ecommerce::themes.includes.reviews', ['reviewButtonClass' => 'ps-btn'])
                                    </div>
                                @endif

                                @if (is_plugin_active('marketplace') && $product->store_id)
                                    <div class="ps-tab" id="tab-vendor">
                                        <h4>{{ $product->store->name }}</h4>
                                        <div>
                                            {!! BaseHelper::clean($product->store->content) !!}
                                        </div>

                                        <a href="{{ $product->store->url }}" class="more-products">
                                            {{ __('More Products from :store',  ['store' => $product->store->name]) }}
                                        </a>
                                    </div>
                                @endif

                                @if (is_plugin_active('faq') && count($product->faq_items) > 0)
                                    <div class="ps-tab" id="tab-faq">
                                        <div class="accordion" id="faq-accordion">
                                            @foreach($product->faq_items as $faq)
                                                <div class="card">
                                                    <div class="card-header" id="heading-faq-{{ $loop->index }}">
                                                        <h2 class="mb-0">
                                                            <button class="btn btn-link btn-block text-left @if (!$loop->first) collapsed @endif" type="button" data-toggle="collapse" data-target="#collapse-faq-{{ $loop->index }}" aria-expanded="true" aria-controls="collapse-faq-{{ $loop->index }}">
                                                                {!! BaseHelper::clean($faq[0]['value']) !!}
                                                            </button>
                                                        </h2>
                                                    </div>

                                                    <div id="collapse-faq-{{ $loop->index }}" class="collapse @if ($loop->first) show @endif" aria-labelledby="heading-faq-{{ $loop->index }}" data-parent="#faq-accordion">
                                                        <div class="card-body">
                                                            {!! BaseHelper::clean($faq[1]['value']) !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ps-page__right">
                    <aside class="widget widget_product widget_features">
                        @for ($i = 1; $i <= 5; $i++)
                            @if (theme_option('product_feature_' . $i . '_title'))
                                <p><i class="{{ theme_option('product_feature_' . $i . '_icon') }}"></i> {{ theme_option('product_feature_' . $i . '_title') }}</p>
                            @endif
                        @endfor
                    </aside>
                    @if (is_plugin_active('ads'))
                        <aside class="widget">
                            {!! AdsManager::display('product-sidebar') !!}
                        </aside>
                    @endif
                </div>
            </div>

            @php
                $crossSellProducts = get_cross_sale_products($product, 7);
            @endphp
            @if (count($crossSellProducts) > 0)
                {!! Theme::partial('cross-sell-products', compact('crossSellProducts')) !!}
            @endif

            @php
                $relatedProducts = get_related_products($product, 12);

                if ($relatedProducts->isEmpty()) {
                    $relatedProducts = get_featured_products([
                        'take' => 12,
                        'condition' => [
                            ['ec_products.id', '!=', $product->getKey()],
                            'ec_products.is_featured' => 1,
                            'ec_products.is_variation' => 0,
                        ],
                    ]);
                }

                if ($relatedProducts->isEmpty()) {
                    $relatedProducts = get_products([
                        'take' => 12,
                        'condition' => [
                            ['ec_products.id', '!=', $product->getKey()],
                            'ec_products.is_variation' => 0,
                        ],
                    ]);
                }
            @endphp

            @if ($relatedProducts->isNotEmpty())
            <div class="ps-section--default ps-related-products-section" style="margin-bottom: 0; padding-bottom: 0;">
                <div class="ps-section__header" style="margin-bottom: 24px; padding-bottom: 14px;">
                    <h3>{{ __('Related products') }}</h3>
                </div>
                <div class="ps-section__content ps-shopping-product ps-related-products-scroll" style="min-height: 0 !important; height: auto !important; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; -webkit-overflow-scrolling: touch;">
                    <div class="row ps-related-products-track" style="flex-wrap: nowrap; margin-bottom: 0;">
                        @foreach($relatedProducts as $relatedProduct)
                            <div class="col-xl-2 col-lg-4 col-md-4 col-sm-6 col-6 ps-related-products-item" style="flex: 0 0 auto;">
                                <div class="ps-product">
                                    {!! Theme::partial('product-item', ['product' => $relatedProduct]) !!}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
    </div>
</div>