@extends('frontend.m9')

@section('content')
    @php $language = session()->get('language'); @endphp
    <!-- content layout -->
    <div id="content" role="main">
        <!-- Layout One -->
        <div class="ho-g-home-kv-carousel aem-GridColumn aem-GridColumn--default--12">
            <section class="home-kv-carousel  home-kv-carousel--height-medium">
                <div class="home-kv-carousel__container">
                    <div class="home-kv-carousel__wrapper">
                        @foreach ($sliders as $slider)
                            <div class="home-kv-carousel__slide bg-white" an-tr="hd01_home kv carousel-home-image-swipe1"
                                an-ca="indication" an-ac="carousel" an-la="carousel:swipe:kv1">
                                <div class="home-kv-carousel__slide-inner">
                                    <div class="home-kv-carousel__text-wrap text-color--white home-kv-carousel__text-wrap--desktop-middle-left home-kv-carousel__text-wrap--mobile-top-center"
                                        style="color: #000">
                                        <!--==================== Preorder Form UI ======================-->
                                        <h2 class="home-kv-carousel__headline"
                                            style="margin-top: 150px; color: {{ config('settings.banner_text_color') ?? '' }} !important">
                                            @if ($slider->id == 6)
                                                {{ config('settings.banner_text') ?? '' }}
                                            @endif
                                        </h2>
                                        <div class="home-kv-carousel__cta-wrap">
                                            @if ($slider->id == 6)
                                                <a class="cta cta--contained cta--white"
                                                    href="{{ config('settings.slidder_button_link') ?? '' }}"
                                                    aria-label="Pre-registration" an-tr="hd01_home kv carousel-home-cta-kv"
                                                    an-ca="home content click" an-ac="kv"
                                                    an-la="kv1:galaxy unpacked:button1:pre registration:20220126">
                                                    {{ config('settings.slidder_button') ?? '' }}
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="home-kv-carousel__background-media-wrap">

                                        <div class="video lazy-load-man" data-image-default="true" data-video-embed="true"
                                            data-video-type="mp4"
                                            data-video-data='{
                                                "desktopSrc": "{{ asset('storage/slider_video') }}/{{ $slider->video }}",
                                                "mobileSrc": "{{ asset('storage/slider_video') }}/{{ $slider->video }}",
                                                "title": "",
                                                "caption": "Galaxy Note20 | 20 Ultra 5G",
                                                "muted": true,
                                                "autoplay": false,
                                                "loop": false,
                                                "controls": false
                                                }'
                                            an-tr="hd01_home kv carousel-home-cta-kv" an-ca="home content click"
                                            an-ac="kv"
                                            an-la="kv1:galaxy note20 and 20 ultra 5g:button3:play video:20200806">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="home-kv-carousel__btn-wrap">
                        <button class="home-kv-carousel__btn-prev" an-tr="hd01_home kv carousel-home-image-arrow"
                            an-ca="indication" an-ac="carousel" an-la="carousel:arrow:kv left">
                            <span class="hidden">Previous</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56"
                                focusable="false">
                                <g fill="none" fill-rule="evenodd">
                                    <circle cx="28" cy="28" r="28" fill="#FFF" opacity=".5" />
                                    <polygon fill="#000" fill-rule="nonzero"
                                        points="22.768 4.76 24.065 6.115 11.647 18 24.065 29.885 22.768 31.24 8.935 18"
                                        transform="translate(10 10)" />
                                </g>
                            </svg>
                        </button>
                        <button class="home-kv-carousel__btn-next" an-tr="hd01_home kv carousel-home-image-arrow"
                            an-ca="indication" an-ac="carousel" an-la="carousel:arrow:kv right">
                            <span class="hidden">Next</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56"
                                focusable="false">
                                <g fill="none" fill-rule="evenodd">
                                    <circle cx="28" cy="28" r="28" fill="#FFF" opacity=".5" />
                                    <polygon fill="#000" fill-rule="nonzero"
                                        points="11.935 6.115 13.232 4.76 27.065 18 13.232 31.24 11.935 29.885 24.353 18"
                                        transform="translate(10 10)" />
                                </g>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="home-kv-carousel__indicator-wrap">
                    <div class="indicator label-indicator"
                        data-indicator-data='{
                            "type": "label-indicator",
                            "autoRolling": true,
                            "infiniteRolling": true
                            }'>
                        <div class="indicator-wrap">
                            <button class="indicator__controls indicator__controls--play"
                                an-tr="hd01_home kv carousel-home-image-action" an-ca="indication" an-ac="carousel"
                                an-la="carousel:index:kv play">
                                <svg class="play" focusable="false" viewBox="0 0 96 96">
                                    <path
                                        d="M19.384 6.922c1.7-.797 3.663-.64 5.29.375l.22.144 52.35 35.87c1.578 1.081 2.513 2.805 2.513 4.69 0 1.799-.853 3.452-2.302 4.538l-.211.15-52.35 35.871a5.72 5.72 0 01-3.232 1.024c-.873 0-1.729-.21-2.509-.62-1.755-.926-2.823-2.704-2.905-4.712L16.242 84V12c0-2.026.999-3.85 2.697-4.844l.216-.12.229-.114z">
                                    </path>
                                </svg>
                                <svg class="pause" focusable="false" viewBox="0 0 96 96">
                                    <path
                                        d="M39 8.5a3.503 3.503 0 013.495 3.308L42.5 12v72a3.503 3.503 0 01-3.308 3.495L39 87.5H21a3.503 3.503 0 01-3.495-3.308L17.5 84V12a3.503 3.503 0 013.308-3.495L21 8.5h18zm36 0a3.503 3.503 0 013.495 3.308L78.5 12v72a3.503 3.503 0 01-3.308 3.495L75 87.5H57a3.503 3.503 0 01-3.495-3.308L53.5 84V12a3.503 3.503 0 013.308-3.495L57 8.5h18z">
                                    </path>
                                </svg>
                                <span class="hidden">play</span>
                            </button>
                            <div class="indicator__list-wrap">
                                <div class="indicator__list" role="tablist">

                                    @foreach ($sliders as $slider)
                                        <button class="indicator__item" role="tab" data-indicator-delay="5000"
                                            an-tr="hd01_home kv carousel-home-text-carousel" an-ca="indication"
                                            an-ac="carousel" an-la="carousel:index:kv1">
                                            <span class="indicator__dot-wrap">
                                                <span class="indicator__dot">
                                                    <span class="indicator__dot-inner"></span>
                                                </span>
                                                <span class="hidden">
                                                    @if (isset($slider->product->name_en))
                                                        {{ $slider->product->name_en ?? '' }}
                                                    @endif
                                                    @if (isset($slider->category->name_en))
                                                        {{ $slider->category->name_en ?? '' }}
                                                    @endif
                                                </span>
                                            </span>
                                            <span class="indicator__label-wrap">
                                                <span class="indicator__label-line">
                                                    <span class="indicator__label-line-filled"></span>
                                                </span>
                                                <span class="indicator__label">
                                                    @if (isset($slider->product->name_en))
                                                        {{ $slider->product->name_en ?? '' }}
                                                    @endif
                                                    @if (isset($slider->category->name_en))
                                                        {{ $slider->category->name_en ?? '' }}
                                                    @endif
                                                </span>
                                            </span>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="popup-video" role="dialog" aria-modal="true">
                    <div class="popup-video__dimmed"></div>
                    <div class="popup-video__looping--start" tabindex="0"></div>
                    <div class="popup-video__video-wrap" tabindex="0">
                    </div>
                    <button class="popup-video__btn-video-close">
                        <span class="hidden">Close</span>
                        <svg class="icon" focusable="false" viewBox="0 0 96 96">
                            <path
                                d="M80.233 12.232l3.535 3.536-32.232 32.231 32.23 32.231-3.535 3.536L48 51.535 15.768 83.768l-3.535-3.536 32.232-32.233-32.233-32.231 3.535-3.536L48 44.464z">
                            </path>
                        </svg>
                    </button>
                    <div class="popup-video__looping--end" tabindex="0"></div>
                </div>
            </section>
        </div>
        <!-- Layout One -->
        <!-- Layout Two -->
        @if (isset($mobile_sections))
            <div class="ho-g-key-feature-tab aem-GridColumn aem-GridColumn--default--12">
                <section class="key-feature-tab">
                    <div class="key-feature-tab__contents">
                        <div class="key-feature-tab__header-wrap" id="mobile-title">
                            <h2 class="key-feature-tab__title">{{ trans('sentence.phone') }}</h2>
                            <div class="tab">
                                <ul class="tab__list" role="tablist">
                                    @foreach ($mobile_sections as $item)
                                        <li class="tab__item" role="presentation" />
                                        <button class="tab__item-title" role="tab"
                                            an-tr="co07_key feature tab-home-text-mobile_galaxy unpacked_mobile_galaxy unpacked"
                                            an-ca="home content click" an-ac="product marketing"
                                            an-la="product marketing:im:galaxy unpacked">{{ $language == 'en' ? $item->name_en : $item->name_mm }}<span
                                                class="tab__item-line"></span>
                                        </button>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="key-feature-tab__container swiper-container swiper-no-swiping">
                            <div class="key-feature-tab__wrapper swiper-wrapper">
                                @foreach ($mobile_sections as $item)
                                    {{-- {{dd($item->category_image->getFirstMediaUrl())}} --}}
                                    <div class="key-feature-tab__slide swiper-slide"
                                        an-tr="co07_key feature tab-home-image-im_swipe1" an-ca="indication"
                                        an-ac="carousel" an-la="carousel:swipe:product marketing:im1">
                                        <div class="key-feature-tab__slide-inner">
                                            <div class="key-feature-tab__inner-wrap text-color--black">
                                                <div class="key-feature-tab__headline-wrap" id="home-mobile-cat">
                                                    <div
                                                        class="key-feature-tab__headline key-feature-tab__headline--without-desc">
                                                        <h2 class="key-feature-tab__headline-inner">
                                                            {{ $language == 'en' ? $item->name_en : $item->name_mm }}</h2>
                                                    </div>

                                                </div>

                                                <div class="key-feature-tab__cta-wrap">
                                                    @if (isset($item->category->ParentCategory))
                                                        <a href="{{ route('news', ['cat1' => $item->category->ParentCategory->slug, 'cat2' => $item->category->slug, 'id' => $item->id]) }}"
                                                            class="key-feature-tab__cta--video cta cta--underline cta--black">{{ trans('sentence.learn_more') }}</a>
                                                        <a href="{{ route('product_detail', ['cat1' => $item->category->ParentCategory->slug, 'cat2' => $item->category->slug, 'id' => $item->id]) }}"
                                                            class="key-feature-tab__cta--video cta cta--contained cta--black">{{ trans('sentence.buy_now') }}</a>
                                                    @else
                                                        <a href="{{ route('news', ['cat1' => 'smart-phone', 'cat2' => $item->slug]) }}"
                                                            class="key-feature-tab__cta--video cta cta--underline cta--black">{{ trans('sentence.learn_more') }}</a>
                                                        <a href="{{ route('shop_page', ['cat1' => 'smart-phone', 'cat2' => $item->slug]) }}"
                                                            class="key-feature-tab__cta--video cta cta--contained cta--black">{{ trans('sentence.buy_now') }}</a>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="key-feature-tab__background-wrap bg-white" id="image-cat-frame">

                                                <div class="image">
                                                    @if ($item->home_feature_image)
                                                        <img id="mobile-slide"
                                                            class="image__preview lazy-load responsive-img"
                                                            data-desktop-src="{{ asset('storage/uploads/product/home_feature_image') }}/{{ $item->home_feature_image ?? '' }}"
                                                            data-mobile-src="{{ asset('storage/uploads/product/home_feature_image') }}/{{ $item->home_feature_image ?? '' }}"
                                                            alt="" />
                                                        <img id="mobile-slide"
                                                            class="image__main lazy-load responsive-img"
                                                            datimga-desktop-src="{{ asset('storage/uploads/product/home_feature_image') }}/{{ $item->home_feature_image ?? '' }}"
                                                            data-mobile-src="{{ asset('storage/uploads/product/home_feature_image') }}/{{ $item->home_feature_image ?? '' }}"
                                                            alt="" />
                                                    @else
                                                        <img id="mobile-slide"
                                                            class="image__main lazy-load responsive-img"
                                                            data-desktop-src="https://via.placeholder.com/150"
                                                            data-mobile-src="https://via.placeholder.com/150"
                                                            alt="" />
                                                    @endif

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        @endif
        <!-- Layout Two -->

        <!-- Layout Three -->
        <div class="ho-g-key-feature-tab aem-GridColumn aem-GridColumn--default--12" id="home-tv">
            <section class="key-feature-tab">
                <div class="key-feature-tab__contents">
                    <div class="key-feature-tab__header-wrap ">
                        <h2 class="key-feature-tab__title">TV and Audio</h2>
                        <div class="tab">
                            <ul class="tab__list" role="tablist">
                                @foreach ($tv_sections as $item)
                                    <li class="tab__item" role="presentation">

                                        <button class="tab__item-title" role="tab"
                                            an-tr="co07_key feature tab-home-text-tv and audio_qled 8k_tv and audio_qled 8k"
                                            an-ca="home content click" an-ac="product marketing"
                                            an-la="product marketing:vd:qled 8k">{{ $language == 'en' ? $item->name_en : $item->name_mm }}<span
                                                class="tab__item-line"></span>
                                        </button>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="key-feature-tab__container swiper-container swiper-no-swiping">
                        <div class="key-feature-tab__wrapper swiper-wrapper">

                            @foreach ($tv_sections as $item)
                                <div class="key-feature-tab__slide swiper-slide"
                                    an-tr="co07_key feature tab-home-image-vd_swipe1" an-ca="indication" an-ac="carousel"
                                    an-la="carousel:swipe:product marketing:vd1">
                                    <div class="key-feature-tab__slide-inner">
                                        <div class="key-feature-tab__inner-wrap text-color--white">
                                            <div class="key-feature-tab__headline-wrap">
                                                <div
                                                    class="key-feature-tab__headline key-feature-tab__headline--without-desc">
                                                    <h2 class="key-feature-tab__headline-inner">
                                                        {{ $language == 'en' ? $item->name_en : $item->name_mm }}</h2>
                                                </div>

                                            </div>

                                            <div class="key-feature-tab__cta-wrap">

                                                <a href="{{ route('overview', ['cat1' => 'tvs']) }}"
                                                    class="key-feature-tab__cta--video cta cta--underline cta--white">{{ trans('sentence.learn_more') }}</a>
                                                <a href="{{ route('shop_page', ['cat1' => 'tvs', 'cat2' => $item->slug]) }}"
                                                    class="key-feature-tab__cta--video cta cta--contained cta--white">{{ trans('sentence.see_all') }}</a>


                                            </div>
                                        </div>
                                        <div class="key-feature-tab__background-wrap bg-white">

                                            <div class="image">
                                                @if ($item->category_image)
                                                    <img class="image__preview lazy-load responsive-img"
                                                        data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        alt="" />
                                                    <img class="image__main lazy-load responsive-img"
                                                        data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        alt="" />
                                                    {{--  <img class="image__preview lazy-load responsive-img" data-desktop-src="{{$item->category_image->getUrl() }}" data-mobile-src="{{$item->category_image->getUrl()}}" alt=""/>
                                                    <img class="image__main lazy-load responsive-img" data-desktop-src="{{$item->category_image->getUrl() }}" data-mobile-src="{{$item->category_image->getUrl()}}" alt=""/>  --}}
                                                @else
                                                    <img class="image__main lazy-load responsive-img"
                                                        data-desktop-src="https://via.placeholder.com/150"
                                                        data-mobile-src="https://via.placeholder.com/150"
                                                        alt="" />
                                                @endif


                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="popup-video" role="dialog" aria-modal="true">
                    <div class="popup-video__dimmed"></div>
                    <div class="popup-video__looping--start" tabindex="0"></div>
                    <div class="popup-video__video-wrap" tabindex="0">

                    </div>
                    <button class="popup-video__btn-video-close">
                        <span class="hidden">Close</span>
                        <svg class="icon" focusable="false" viewBox="0 0 96 96">
                            <path
                                d="M80.233 12.232l3.535 3.536-32.232 32.231 32.23 32.231-3.535 3.536L48 51.535 15.768 83.768l-3.535-3.536 32.232-32.233-32.233-32.231 3.535-3.536L48 44.464z">
                            </path>
                        </svg>
                    </button>
                    <div class="popup-video__looping--end" tabindex="0"></div>
                </div>
            </section>
        </div>
        <!-- Layout Three -->

        <!-- Layout Four -->
        <div class="ho-g-key-feature-tab aem-GridColumn aem-GridColumn--default--12" id="home-tv">
            <section class="key-feature-tab">
                <div class="key-feature-tab__contents">
                    <div class="key-feature-tab__header-wrap">
                        <h2 class="key-feature-tab__title text-color--black">Home Appliances</h2>
                        <div class="tab">
                            <ul class="tab__list" role="tablist">
                                @foreach ($home_sections as $item)
                                    <li class="tab__item" role="presentation">
                                        <button class="tab__item-title text-color--black" role="tab"
                                            an-tr="co07_key feature tab-home-text-home appliances_family hub trademark_home appliances_family hub trademark"
                                            an-ca="home content click" an-ac="product marketing"
                                            an-la="product marketing:da:family hub trademark">{{ $language == 'en' ? $item->name_en : $item->name_mm }}<span
                                                class="tab__item-line"></span>
                                        </button>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="key-feature-tab__container swiper-container swiper-no-swiping">
                        <div class="key-feature-tab__wrapper swiper-wrapper">
                            @foreach ($home_sections as $item)
                                <div class="key-feature-tab__slide swiper-slide"
                                    an-tr="co07_key feature tab-home-image-da_swipe1" an-ca="indication" an-ac="carousel"
                                    an-la="carousel:swipe:product marketing:da1">
                                    <div class="key-feature-tab__slide-inner">
                                        <div class="key-feature-tab__inner-wrap text-color--black">
                                            <div class="key-feature-tab__headline-wrap">
                                                <div
                                                    class="key-feature-tab__headline key-feature-tab__headline--without-desc">
                                                    <h2 class="key-feature-tab__headline-inner">
                                                        {{ $language == 'en' ? $item->name_en : $item->name_mm }}</h2>
                                                </div>

                                            </div>

                                            <div class="key-feature-tab__cta-wrap">
                                                <a class="cta cta--underline cta--black"
                                                    href="{{ route('overview', ['cat1' => 'home-appliance']) }}"
                                                    title="Learn more" target="_self" role="button"
                                                    an-tr="co07_key feature tab-home-cta-home appliances1_learn more"
                                                    an-ca="home content click" an-ac="product marketing"
                                                    an-la="product marketing:da:family hub trademark:its more than just a fridge:learn more">{{ trans('sentence.learn_more') }}</a>

                                                <a class="cta cta--contained cta--black"
                                                    href="{{ route('shop_page', ['cat1' => 'home-appliance', 'cat2' => $item->slug]) }}"
                                                    title="See all" target="_self" role="button"
                                                    an-tr="co07_key feature tab-home-cta-home appliances1_see all"
                                                    an-ca="home content click" an-ac="product marketing"
                                                    an-la="product marketing:da:family hub trademark:its more than just a fridge:see all">{{ trans('sentence.see_all') }}</a>

                                            </div>
                                        </div>
                                        <div class="key-feature-tab__background-wrap bg-white">

                                            <div class="image">

                                                @if ($item->category_image)
                                                    <img class="image__preview lazy-load responsive-img"
                                                        data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        alt="" />
                                                    <img class="image__main lazy-load responsive-img"
                                                        data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                        alt="" />
                                                    {{--  <img class="image__preview lazy-load responsive-img" data-desktop-src="{{$item->category_image->getUrl() }}" data-mobile-src="{{$item->category_image->getUrl()}}" alt=""/>
                                                <img class="image__main lazy-load responsive-img" data-desktop-src="{{$item->category_image->getUrl() }}" data-mobile-src="{{$item->category_image->getUrl()}}" alt=""/>  --}}
                                                @else
                                                    <img class="image__main lazy-load responsive-img"
                                                        data-desktop-src="https://via.placeholder.com/150"
                                                        data-mobile-src="https://via.placeholder.com/150"
                                                        alt="" />
                                                @endif
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="popup-video" role="dialog" aria-modal="true">
                    <div class="popup-video__dimmed"></div>
                    <div class="popup-video__looping--start" tabindex="0"></div>
                    <div class="popup-video__video-wrap" tabindex="0">
                    </div>
                    <button class="popup-video__btn-video-close">
                        <span class="hidden">Close</span>
                        <svg class="icon" focusable="false" viewBox="0 0 96 96">
                            <path
                                d="M80.233 12.232l3.535 3.536-32.232 32.231 32.23 32.231-3.535 3.536L48 51.535 15.768 83.768l-3.535-3.536 32.232-32.233-32.233-32.231 3.535-3.536L48 44.464z">
                            </path>
                        </svg>
                    </button>
                    <div class="popup-video__looping--end" tabindex="0"></div>
                </div>
            </section>
        </div>
        <!-- Layout Four -->

        <!-- Layout Five -->
        <div class="cm-g-text-block-container aem-GridColumn aem-GridColumn--default--12" id="home-tv">
            <section class="text-block-container   text-color--black" style="background: bg-white">
                <div class="text-block-container__title-wrap">
                    <div class="text-block-container__headline-wrap">
                        <h2 class="text-block-container__headline">This Month&#39;s Picks</h2>
                    </div>
                </div>
            </section>
            <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                <div class="ho-g-showcase-card-tab aem-GridColumn aem-GridColumn--default--12">
                    <div class="showcase-card-tab showcase-card-tab--merchandizing bg-white">
                        <div class="showcase-card-tab__inner">
                            {{-- start of header of this month picks --}}
                            <div class="tab">
                                <ul class="tab__list">
                                    <li class="tab__item">
                                        <button href="javascript:;" role="tab" class="tab__item-title"
                                            an-tr="co05_showcase card tab-home-text-tab" an-ca="home content click"
                                            an-ac="merchandising" an-la="merchandising:mobile">
                                            {{ trans('sentence.phone') }}<span class="tab__item-line"></span>
                                        </button>
                                    </li>
                                    <li class="tab__item">
                                        <button href="javascript:;" role="tab" class="tab__item-title"
                                            an-tr="co05_showcase card tab-home-text-tab" an-ca="home content click"
                                            an-ac="merchandising" an-la="merchandising:mobile">
                                            {{ trans('sentence.tv_av') }}<span class="tab__item-line"></span>
                                        </button>
                                    </li>
                                    <li class="tab__item">
                                        <button href="javascript:;" role="tab" class="tab__item-title"
                                            an-tr="co05_showcase card tab-home-text-tab" an-ca="home content click"
                                            an-ac="merchandising" an-la="merchandising:mobile">
                                            {{ trans('sentence.home_appliance') }}<span class="tab__item-line"></span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            {{-- end of header of this month picks --}}
                            <div class="showcase-card-tab__card-wrap swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="showcase-card-tab__card-items swiper-slide"
                                        an-tr="co05_showcase card tab-home-image-swipe1" an-ca="indication"
                                        an-ac="carousel" an-la="carousel:swipe:merchandising:1">
                                        <div class="showcase-card-tab-inner-container">
                                            @foreach ($mobile_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up == 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--large showcase-card-tab-card__text-color--black">

                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Learn more"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:mobile:im:galaxy note20 20 ultra 5g">

                                                                <div class="showcase-card-tab-card__img-wrap">

                                                                    <div class="image">
                                                                        @if ($item->category_image)
                                                                            <img class="image__preview lazy-load responsive-img"
                                                                                data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                alt="" />
                                                                            <img class="image__main lazy-load responsive-img"
                                                                                style="width: 376px; height: 376px; margin: 20%"
                                                                                data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                alt="" />
                                                                        @else
                                                                            <img class="image__main lazy-load responsive-img"
                                                                                style="width: 376px; height: 376px; margin: 20%"
                                                                                data-desktop-src="https://via.placeholder.com/150"
                                                                                data-mobile-src="https://via.placeholder.com/150"
                                                                                alt="" />
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="Learn more" role="button">
                                                                        {{ trans('sentence.learn_more') }}
                                                                    </button>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                            @foreach ($mobile_sub_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up != 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-small showcase-card-tab-card__text-color--black">
                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Learn more"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:mobile:im:galaxy watch3">

                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    style="width: 160px; height: 160px;"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    style="width: 160px; height: 160px;"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="See All" role="button">

                                                                        {{ trans('sentence.buy_now') }}
                                                                    </button>
                                                                </div>
                                                            </a>

                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                            @foreach ($tablet_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up == 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-small showcase-card-tab-card__text-color--black">
                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Learn more"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:mobile:im:galaxy watch3">
                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ $item->category_image->getUrl() }}"
                                                                                    data-mobile-src="{{ $item->category_image->getUrl() }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="{{ $item->category_image->getUrl() }}"
                                                                                    data-mobile-src="{{ $item->category_image->getUrl() }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="See All" role="button">

                                                                        {{ trans('sentence.buy_now') }}
                                                                    </button>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="showcase-card-tab__card-items swiper-slide"
                                        an-tr="co05_showcase card tab-home-image-swipe2" an-ca="indication"
                                        an-ac="carousel" an-la="carousel:swipe:merchandising:2">
                                        <div class="showcase-card-tab-inner-container">
                                            @foreach ($tv_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up == 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-large showcase-card-tab-card__text-color--black">

                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Buy now"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:tv and av:vd:the sero">

                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="Buy now" role="button">

                                                                        {{ trans('sentence.buy_now') }}

                                                                    </button>
                                                                </div>
                                                            </a>

                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                            @foreach ($tv_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up != 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-small showcase-card-tab-card__text-color--black">

                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Buy now"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:tv and av:vd:qled tv">

                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="Buy now" role="button">

                                                                        {{ trans('sentence.buy_now') }}


                                                                    </button>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="showcase-card-tab__card-items swiper-slide"
                                        an-tr="co05_showcase card tab-home-image-swipe3" an-ca="indication"
                                        an-ac="carousel" an-la="carousel:swipe:merchandising:3">
                                        <div class="showcase-card-tab-inner-container">
                                            @foreach ($home_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up == 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-large showcase-card-tab-card__text-color--black">

                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Buy now"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:home appliances:da:family hub tm">

                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="Buy now" role="button">

                                                                        {{ trans('sentence.buy_now') }}


                                                                    </button>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                            @foreach ($home_categories as $item)
                                                @if ($item->monthly_pick_up != null)
                                                    @if ($item->monthly_pick_up != 1)
                                                        <div
                                                            class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-small showcase-card-tab-card__text-color--black">

                                                            <a class="showcase-card-tab-card__full-bleed-wrap"
                                                                href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                                title="Buy now"
                                                                an-tr="co05_showcase card tab-home-cta-banner"
                                                                an-ca="home content click" an-ac="merchandising"
                                                                an-la="merchandising:home appliances:da:spacemax tm series">

                                                                <div class="showcase-card-tab-card__img-wrap">
                                                                    <div class="showcase-card-tab-card__product-img">
                                                                        <div class="image">
                                                                            @if ($item->category_image)
                                                                                <img class="image__preview lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                    alt="" />
                                                                            @else
                                                                                <img class="image__main lazy-load responsive-img"
                                                                                    data-desktop-src="https://via.placeholder.com/150"
                                                                                    data-mobile-src="https://via.placeholder.com/150"
                                                                                    alt="" />
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-wrap">
                                                                    <div
                                                                        class="showcase-card-tab-card__product-name-text-inner">
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                        <span
                                                                            class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    </div>
                                                                </div>
                                                                <div
                                                                    class="showcase-card-tab-card__product-description-wrap">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--desktop">Just
                                                                        lacunched.</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-description--mobile">Just
                                                                        lacunched.</span>
                                                                </div>
                                                                <div class="showcase-card-tab-card__product-cta">
                                                                    <button class="cta cta--contained cta--black"
                                                                        onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                        title="Buy now" role="button">

                                                                        {{ trans('sentence.buy_now') }}


                                                                    </button>
                                                                </div>
                                                            </a>

                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="showcase-card-tab__card-items swiper-slide"
                                        an-tr="co05_showcase card tab-home-image-swipe4" an-ca="indication"
                                        an-ac="carousel" an-la="carousel:swipe:merchandising:4">
                                        <div class="showcase-card-tab-inner-container">
                                            @foreach ($it_categories as $item)
                                                @if ($loop->first)
                                                    <div
                                                        class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--large showcase-card-tab-card__text-color--black">



                                                        <a class="showcase-card-tab-card__full-bleed-wrap"
                                                            href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                            title="Buy now" an-tr="co05_showcase card tab-home-cta-banner"
                                                            an-ca="home content click" an-ac="merchandising"
                                                            an-la="merchandising:it:vd:odyssey curved gaming monitor">

                                                            <div class="showcase-card-tab-card__img-wrap">

                                                                <div class="image">
                                                                    @if ($item->category_image)
                                                                        <img class="image__preview lazy-load responsive-img"
                                                                            data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                            data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                            alt="" />
                                                                        <img class="image__main lazy-load responsive-img"
                                                                            data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                            data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                            alt="" />
                                                                    @else
                                                                        <img class="image__main lazy-load responsive-img"
                                                                            data-desktop-src="https://via.placeholder.com/150"
                                                                            data-mobile-src="https://via.placeholder.com/150"
                                                                            alt="" />
                                                                    @endif
                                                                </div>

                                                            </div>
                                                            <div class="showcase-card-tab-card__product-name-text-wrap">
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-inner">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="showcase-card-tab-card__product-description-wrap">
                                                                <span
                                                                    class="showcase-card-tab-card__product-description--desktop">Just
                                                                    lacunched.</span>
                                                                <span
                                                                    class="showcase-card-tab-card__product-description--mobile">Just
                                                                    lacunched.</span>
                                                            </div>
                                                            <div class="showcase-card-tab-card__product-cta">
                                                                <button class="cta cta--contained cta--black"
                                                                    onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                    title="Buy now" role="button">

                                                                    {{ trans('sentence.buy_now') }}

                                                                </button>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @else
                                                    <div
                                                        class="showcase-card-tab-card showcase-card-tab-card showcase-card-tab-card--product-small showcase-card-tab-card__text-color--black">

                                                        <a class="showcase-card-tab-card__full-bleed-wrap"
                                                            href="{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}"
                                                            title="Buy now" an-tr="co05_showcase card tab-home-cta-banner"
                                                            an-ca="home content click" an-ac="merchandising"
                                                            an-la="merchandising:it:others:portable ssd t7 touch">

                                                            <div class="showcase-card-tab-card__img-wrap">
                                                                <div class="showcase-card-tab-card__product-img">
                                                                    <div class="image">
                                                                        @if ($item->category_image)
                                                                            <img class="image__preview lazy-load responsive-img"
                                                                                data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                alt="" />
                                                                            <img class="image__main lazy-load responsive-img"
                                                                                data-desktop-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                data-mobile-src="{{ Storage::disk('local')->url($item->category_image->id . '/' . $item->category_image->file_name) }}"
                                                                                alt="" />
                                                                        @else
                                                                            <img class="image__main lazy-load responsive-img"
                                                                                data-desktop-src="https://via.placeholder.com/150"
                                                                                data-mobile-src="https://via.placeholder.com/150"
                                                                                alt="" />
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="showcase-card-tab-card__product-name-text-wrap">
                                                                <div
                                                                    class="showcase-card-tab-card__product-name-text-inner">
                                                                    <span
                                                                        class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--desktop showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                    <span
                                                                        class="showcase-card-tab-card__product-name showcase-card-tab-card__product-name--mobile showcase-card-tab-card__product-name--black">{{ $item->monthly_pick_up_name ? $item->monthly_pick_up_name : $item->name_en }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="showcase-card-tab-card__product-description-wrap">
                                                                <span
                                                                    class="showcase-card-tab-card__product-description--desktop">Just
                                                                    lacunched.</span>
                                                                <span
                                                                    class="showcase-card-tab-card__product-description--mobile">Just
                                                                    lacunched.</span>
                                                            </div>
                                                            <div class="showcase-card-tab-card__product-cta">
                                                                <button class="cta cta--contained cta--black"
                                                                    onclick="location.href='{{ route('shop_page', ['cat1' => $item->parentCategory->slug, 'cat2' => $item->slug]) }}'"
                                                                    title="Buy now" role="button">
                                                                    {{ trans('sentence.buy_now') }}
                                                                </button>
                                                            </div>
                                                        </a>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Layout Five -->

        <!-- Looking For Something Else? -->

        <div class="cm-g-text-block-container aem-GridColumn aem-GridColumn--default--12">

            <div class="cm-g-text-block-container aem-GridColumn aem-GridColumn--default--12">
                <section class="text-block-container   text-color--black" style="background: #FFFFFF">
                    <div class="text-block-container__title-wrap">

                        <div class="text-block-container__headline-wrap">
                            <h2 class="text-block-container__headline">Looking for something else?</h2>
                        </div>

                    </div>

                </section>
            </div>
        </div>
        <div class="ho-g-home-search aem-GridColumn aem-GridColumn--default--12">

            <section class="home-page-search   margin-bottom--wide">
                <div class="home-page-search__wrap">
                    <form action="{{ route('search') }}" method="get" class="home-page-search__form" role="search">
                        @csrf
                        <fieldset>
                            <legend></legend>
                            <div class="home-page-search__form-container">
                                <div class="text-field text-field--hide-label" an-tr="fn03_home search-home-text-search"
                                    an-ca="home content click" an-ac="popular search"
                                    an-la="popular search:keyword submit">
                                    <label for="home-page-search"></label>
                                    <input id="home-page-search" type="text" name="serach_data"
                                        onfocusout="myFunction()" autocomplete="off" />
                                    <svg class="icon" viewBox="0 0 96 96">
                                        <path
                                            d="M48 2.5c25.088.001 45.5 20.413 45.5 45.5 0 25.088-20.412 45.5-45.5 45.5-12.154.001-23.58-4.732-32.174-13.326C7.232 71.581 2.5 60.155 2.5 48.001 2.5 22.912 22.911 2.5 48.002 2.5zm15.203 23.93l-15.91 15.91-15.91-15.91-4.95 4.95 15.91 15.91-15.91 15.91 4.95 4.95 15.91-15.91 15.91 15.91 4.95-4.95-15.91-15.91 15.91-15.91-4.95-4.95z">
                                        </path>
                                    </svg>
                                </div>

                                <button type="button" class="home-page-search__form-submit"><span
                                        class="hidden">search</span>
                                    <svg class="icon" focusable="false" viewBox="0 0 96 96">
                                        <path
                                            d="M40.581 4.09c20.126 0 36.5 16.374 36.5 36.5a36.325 36.325 0 01-7.963 22.733l22.8 22.948-5.674 5.639-22.767-22.913a36.327 36.327 0 01-22.896 8.093c-20.126 0-36.5-16.374-36.5-36.5s16.374-36.5 36.5-36.5zm0 8c-15.715 0-28.5 12.785-28.5 28.5s12.785 28.5 28.5 28.5 28.5-12.785 28.5-28.5-12.785-28.5-28.5-28.5z">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </fieldset>
                    </form>
                    <div class="home-page-search__keyword">
                        <h3 class="hidden">related search</h3>
                        <ul class="home-page-search__keyword-list">
                            @foreach ($products as $product)
                                <li class="home-page-search__keyword-list-item">
                                    @if (isset($product->category->ParentCategory))
                                        <a href="{{ route('product_detail', ['cat1' => $product->category->ParentCategory->slug, 'cat2' => $product->category->slug, 'id' => $product->id]) }}"
                                            class="chip  chip__action--medium chip__action--light">{{ $product->name_en }}</a>
                                    @else
                                        <a href="{{ route('product_detail', ['cat1' => $product->category->slug, 'cat2' => $product->category->slug, 'id' => $product->id]) }}"
                                            class="chip  chip__action--medium chip__action--light">{{ $product->name_en }}</a>
                                    @endif
                                </li>
                            @endforeach
                            <li class="home-page-search__keyword-list-item">
                                <a href="{{ route('offer') }}"
                                    class="chip  chip__action--medium chip__action--light">Offers</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

        </div>
        <!-- Looking For Something Else? -->
    </div>
@endsection