@extends($activeTemplate . 'layouts.frontend')
@section('content')

    <!-- ==================== Product Details Here ==================== -->
    <section class="product-details-area py-80">
        <div class="container">
            <div class="row gy-4">
                <div class="col-lg-8">
                    <div class="product-details-left">
                        <div class="product-details-left__content">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel"
                                    aria-labelledby="home-tab" tabindex="0">
                                    <div class="product-details-left__thumb" style="background-image: url({{ getImage(getFilePath('productThumbnail') . '/' . @$product->thumbnail) }});">
                                    </div>
                                </div>
                            </div>
                            <div class="info">
                                <a href="{{ $product->demo_link }}" target="_blank">
                                    <svg class="sisalogo_product_page" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M99.1 105.4C79 114 68.2 127.2 65.2 144.8c-2.4 14.1-.7 23.2 2 29.4c2.8 6.3 7.9 12.4 16.7 18.6c19.2 13.4 48.3 22.1 84.9 32.5c1 .3 1.9 .6 2.9 .8c32.7 9.3 72 20.6 100.9 40.7c15.7 10.9 29.9 25.5 38.6 45.1c8.8 19.8 10.8 42 6.6 66.3c-7.3 42.5-35.3 71.7-71.8 87.3c-35.4 15.2-79.1 17.9-123.7 10.9l-.2 0 0 0c-24-3.9-62.7-17.1-87.6-25.6c-4.8-1.7-9.2-3.1-12.8-4.3C5.1 440.8-3.9 422.7 1.6 405.9s23.7-25.8 40.5-20.3c4.9 1.6 10.2 3.4 15.9 5.4c25.4 8.6 56.4 19.2 74.4 22.1c36.8 5.7 67.5 2.5 88.5-6.5c20.1-8.6 30.8-21.8 33.9-39.4c2.4-14.1 .7-23.2-2-29.4c-2.8-6.3-7.9-12.4-16.7-18.6c-19.2-13.4-48.3-22.1-84.9-32.5c-1-.3-1.9-.6-2.9-.8c-32.7-9.3-72-20.6-100.9-40.7c-15.7-10.9-29.9-25.5-38.6-45.1c-8.8-19.8-10.8-42-6.6-66.3l31.5 5.5L2.1 133.9C9.4 91.4 37.4 62.2 73.9 46.6c35.4-15.2 79.1-17.9 123.7-10.9c13 2 52.4 9.6 66.6 13.4c17.1 4.5 27.2 22.1 22.7 39.2s-22.1 27.2-39.2 22.7c-11.2-3-48.1-10.2-60.1-12l4.9-31.5-4.9 31.5c-36.9-5.8-67.5-2.5-88.6 6.5z"/></svg>
                                    <!--<p class="mt-3">@lang('Live Preview') <i class="far fa-eye"></i></p>-->
                                </a>

                                <div class="tab-content mt-3" id="myTabContent">
                                    @if (!empty($productImages) && is_array($productImages))
                                        @foreach ($productImages as $index => $productImage)
                                            <div class="tab-pane fade{{ $index === 0 ? ' show active' : '' }}"
                                                id="image-tab-{{ $index }}" role="tabpanel"
                                                aria-labelledby="image-tab-{{ $index }}" tabindex="0">
                                                <div class="product-details-left__thumb">
                                                    <a class="image-popup"
                                                        href="{{ getImage(getFilePath('productImage') . '/' . @$productImage) }}">
                                                        <span>@lang('View More Image')<i class="fas fa-expand"></i></span>
                                                    </a>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!--  -->
                        <div class="row py-4">
                            <div class="product-info">
                                <div class="product-title">
                                    <h3>{{ __($product->name) }}</h3>
                                    <ul class="social-list">
                                        <li class="social-list__item"><a href="