index.blade.php 15.7 KB
{!! $headerHtml !!}
<main>
    <section maskcolor class=" section-imagetext-wrap-block section-block-demo1-imagetext1  "
             data-screen="screen-full" mask-color="mask-color-dark" id="sectionIdhuy4658">
        <div class="layout page-title-bar">
            @if(!empty($innerPageBanner))
                @if(isset($innerPageBanner->product_banner) && !empty($innerPageBanner->product_banner))
                    <img class="page-banner" src="{{$innerPageBanner->product_banner}}" alt="">
                @else
                    <img class="page-banner" src="https://ecdn6.globalso.com/public/1.jpg" alt="">
                @endif
            @endif
            <h1 class="page-title"></h1>
        </div>
        <style>
            .section-imagetext-wrap-block .page-title-bar {
                position: relative;
            }
            .section-imagetext-wrap-block .page-title-bar:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

            }
            .section-imagetext-wrap-block[mask-color="mask-color-dark"] .page-title-bar:before {
                background-color: var(--bs-mask-dark);
                opacity: .5;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-dark"] .page-title-bar .page-title,
            .section-imagetext-wrap-block[mask-color="mask-color-theme"] .page-title-bar .page-title {
                color: #fff;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-white"] .page-title-bar:before {
                background-color: var(--bs-mask-white);
                opacity: .5;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-white"] .page-title-bar .page-title {
                color: #000;
            }
            .section-imagetext-wrap-block[mask-color="mask-color-theme"] .page-title-bar:before {
                background-color: var(--bs-theme-color);
                opacity: .5;
            }
            .section-imagetext-wrap-block .page-title-bar .page-banner {
                width: 100%;
                min-height: 10rem;
                object-fit: cover;
            }
            .section-imagetext-wrap-block .page-title-bar .page-title {
                position: absolute;
                left: 50%;
                top: 50%;
                -moz-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </section>
    <section class="section-breadcrumb-wrap-block section-block-demo1-breadcrumb1 " data-screen="screen-large"
             id="sectionIdhyi0947">
        <ul class="breadcrumb-nav d-flex align-items-center layout">
            <li><a href="/">Home</a><i class="la"></i></li>
            @if($productCategoryInfo != null)
                @if(strpos($productCategoryInfo->route, 'http://') !== false || strpos($productCategoryInfo->route, 'https://') !== false)
                    <li><a href="{{$productCategoryInfo->route}}">{{$productCategoryInfo->title}}</a><i class="la"></i></li>
                @else
                    <li><a href="/{{$productCategoryInfo->route}}/">{{$productCategoryInfo->title}}</a><i class="la"></i></li>
                @endif
            @else
                <li><a href="/products/">Products</a><i class="la"></i></li>
            @endif
        </ul>
        <style>
            .section-breadcrumb-wrap-block {
                background-color: #eee;
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav {
                padding: 20px 0;
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav li {
                list-style: none;
                margin-right: 15px;
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav li a {
                display: inline-block;
                margin-right: 10px;
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav li .la:after {
                content: "\f105";
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav li:last-of-type .la {
                display: none;
            }

            .section-breadcrumb-wrap-block .breadcrumb-nav li:last-of-type a {
                color: var(--bs-theme-color);
            }
        </style>
    </section>
    <div class="page-container" data-screen="screen-large">
        <div class="layout d-flex flex-wrap">
            <div class="page-aside">
                <section data-section="section" data-screen="screen-large"
                         class=" section-sidenav-wrap-block section-block-demo1-sidenav1" id="sectionIdpwm2857">
                    <div class="title-bar ">
                        <div class="title"> Product Category </div>
                    </div>
                    <ul class="side-nav" data-module="6" data-unable="demo1-sidenav">
                        @if(!empty($nav))
                            @include('side_nav.product_side_nav', ['nav' => $nav])
                        @endif
                    </ul>
                </section>
                <section swiperNormal activeblock maskcolor asideProduct data-section="section"
                         data-screen="screen-large" mask-color="mask-color-dark" data-pagination=false
                         class="section-sideproduct-wrap-block section-block-demo1-sideproduct1" id="sectionIdhgy0375">
                    <div class="title-bar ">
                        <div class="title">Featured Products</div>
                    </div>
                    <div class="outer-swiper-wrap layout" data-unable="demo1-sideproduct1" data-module="1"
                         data-type="recommend" data-totalnumber="5" data-image-type="1" data-ico-type="3">
                        <div class="execute-swiper-slide">
                            <div class="swiper-wrapper product-items" blockitems>
                                @if(!empty($productNews ))
                                    @foreach($productNews as $item)
                                        <div class="swiper-slide product-item" blockitem>
                                            <a href="/{{$item["aUrl"]}}/" class="item-inner">
                                                <div class="item-img"><img src="{{$item["thumb"]}}" alt="{{$item["title"]}}" blockimagetype />
                                                </div>
                                                <h3 class="item-title" blocktitle  style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
  text-overflow: ellipsis;">{{$item["title"]}}</h3>
                                            </a>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="swiper-control ">
                            <div class="swiper-pagination"></div>
                            <div class="swiper-buttons">
                                <div class="swiper-button swiper-button-prev"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64"
                                        height="64">
                                        <g>
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                            <path
                                                d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z">
                                            </path>
                                        </g>
                                    </svg>
                                </div>
                                <div class="swiper-button swiper-button-next"><svg
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64"
                                        height="64">
                                        <g>
                                            <path fill="none" d="M0 0h24v24H0z"></path>
                                            <path
                                                d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z">
                                            </path>
                                        </g>
                                    </svg></div>
                            </div>
                        </div>
                    </div>
                    <script>
                        GlobalsoIframe.Swiper.swiperNormal({
                            container: "#sectionIdhgy0375 .execute-swiper-slide",
                            direction: "vertical",
                            delay: 30000,
                            speed: 1200,
                            slidesPerView: 6,
                            spaceBetween: 10,

                        })
                    </script>
                </section>
            </div>
            <div class="page-main">
                <section galleryitems activeblock generalimgtext data-section="section" data-screen="screen-large"
                         mask-color="mask-color-dark" block-items-num="5" block-content-time="1"
                         block-content-linkbtn="1" picture-ani="1" pictext-ani="1"
                         class="section-generalimgtext-wrap-block  section-block-demo1-productlist1"
                         id="sectionIdxuua587">
                    <div class="layout d-flex flex-wrap sc-block-items " data-unable="demo1-productlist1"
                         data-module="1" data-image-type="1" data-totalnumber="5" data-type="all"
                         data-aos="bounceInRight" data-aos-duration="1000" blockitems>
                        @if(!empty($productNews ))
                            @foreach($productNews as $item)
                        <div class="block-item sc-block-item" blockitem>
                            <a href="/{{$item["aUrl"]}}/" class="item-inner">
                                <div class="item-img">
                                    <img src="{{$item["thumb"]}}" alt="{{$item["title"]}}" blockimagetype />
                                    <div class="item-btn"><svg xmlns="http://www.w3.org/2000/svg"
                                                               viewBox="0 0 24 24" width="64" height="64">
                                            <g>
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z">
                                                </path>
                                            </g>
                                        </svg></div>
                                </div>
                                <div class="item-info">
                                    <i class="item-order" blockergodic="">04</i>
                                    <span class="item-bg"></span>
                                    <h3 class="item-title" blocktitle>{{$item["title"]}}</h3>
                                    <div class="item-time">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25"
                                             height="22" stroke-width="2">
                                            <g>
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 8H4v8h16v-8zm-5-6H9v2H7V5H4v4h16V5h-3v2h-2V5zm-9 8h2v2H6v-2zm5 0h2v2h-2v-2zm5 0h2v2h-2v-2z">
                                                </path>
                                            </g>
                                        </svg>
                                        <em blocktime>{{  $item['created_at']->format('Y-m-d') }}</em>
                                    </div>
                                    <div class="item-desc" blockdesc>
{{--                                        @php--}}
{{--                                            echo mb_substr(strip_tags($item['intro']), 0, 56);--}}
{{--                                        @endphp--}}
                                    </div>
                                    <div class="btn item-more" btn-hover-animation="btn-ani-wave"
                                         btn-arrow="arrow-right2">
                                        view
                                        detail <i class="la"></i> <i class="btn-ani"></i></div>
                                </div>
                            </a>
                        </div>
                            @endforeach
                        @endif
                        <style>
                            .pagePagination{
                                width: 100%;
                                text-align: center;
                                margin-top: 20px;
                            }
                            .pagePagination a{
                                font-size: 14px;
                                border: 1px solid #eee;
                                padding: 4px 10px;
                                border-radius: 4px;
                                -webkit-transition: 0.3s;
                                -moz-transition: 0.3s;
                                -o-transition: 0.3s;
                                -ms-transition: 0.3s;
                                transition: 0.3s;
                            }
                            .pagePagination a:hover,.pagePagination a.active{
                                background: var(--bs-theme-color);
                                color: #fff;
                            }
                            .pagePagination span{
                                color: #333;
                                font-size: 12px;
                                margin-left:14px;
                            }
                        </style>
                        @if(!empty($pageInfo))
                            <div class="pagePagination">
                                <a href="/{{$routePath}}/1/">First</a>
                                <a href="/{{$routePath}}/{{$pageInfo['prev']}}/">Prev</a>
                                @foreach($pageInfo['center_page'] as $item)
                                    <a @if(!empty($pageInfo['page']) && $item == $pageInfo['page'])  class="active" @endif href="/{{$routePath}}/{{$item}}/">{{$item}}</a>
                                @endforeach
                                <a href="/{{$routePath}}/{{$pageInfo['next']}}/">Next</a>
                                <a href="/{{$routePath}}/{{$pageInfo['total']}}/">Last</a>
                                <span>Total{{$pageInfo['total']}} </span>
                            </div>
                        @endif
                    </div>
                    <style>
                        .section-block-demo1-productlist1 {
                            position: relative;
                        }
                        .section-block-demo1-productlist1 .sc-block-item .item-inner .item-info .item-title {
                            font-weight: bold;
                            color: var(--bs-theme-color);
                        }
                    </style>
                </section>
            </div>
        </div>
    </div>
</main>
{!! $footerHtml !!}