@extends('frontend.m9')
@section('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/overview.css')}}">
@endsection
@section('content')
@php $language = session()->get('language'); @endphp
<div id="content" role="main">
    <div class="gb-gnb__bar"></div>
    <div class="cm-breadcrumb">
        <div class="cm-breadcrumb__inner">
            @if($language == 'en')
            <ul class="cm-breadcrumb__path">
                <li><a href="#">
                    <span>Home</span>
                </a>
             / </li>
                <li>
                    <span>overview</span>
             / </li>
             <li>
                @if($select_parent_category_name == 'smart-phone')
                    <span>Smartphone</span>
                @elseif($select_parent_category_name == 'watches')
                    <span>Watches</span>
                @elseif($select_parent_category_name == 'audio')
                    <span>Audio</span>
                @elseif($select_parent_category_name == 'accessories')
                    <span>Accessories</span>
                @elseif($select_parent_category_name == 'tablet')
                    <span>Tablet</span>
                @elseif($select_parent_category_name == 'wearable-accessories')
                    <span>Wearable & Accessories</span>
                @elseif($select_parent_category_name == 'consumer-electronic')
                    <span>Consumer Electronic</span>
                @endif
             </li>
            </ul>
            @else
            <ul class="cm-breadcrumb__path">
                <li><a href="#">
                <span>ပင်မစာမျက်နှာ</span>
                </a>
             / </li>
             <li>
                    <span>overview</span>
             / </li>
             <li>
                @if($select_parent_category_name == 'smart-phone')
                    <span>စမတ်ဖုန်း</span>
                @elseif($select_parent_category_name == 'watches')
                    <span>နာရီများ</span>
                @elseif($select_parent_category_name == 'audio')
                    <span>အသံ</span>
                @elseif($select_parent_category_name == 'accessories')
                    <span>ဆက်စပ်ပစ္စည်းများ</span>
                @elseif($select_parent_category_name == 'tablet')
                    <span>တက်ဘလတ်</span>
                @elseif($select_parent_category_name == 'wearable-accessories')
                    <span>Wearable & Accessories</span>
                @elseif($select_parent_category_name == 'consumer-electronic')
                    <span>Consumer Electronic</span>
                @endif
             </li>
            </ul>
            @endif
        </div>
    </div>
    {{--@if($select_parent_category_name == 'audio')
    <div>
        <div>
            <img class="image" src="{{asset('images/Buds.jpg')}}" alt=""/>
        </div>
    @elseif($select_parent_category_name == 'watches')
        <div>
            <img class="image" src="{{asset('images/watch.jpg')}}" alt=""/>
        </div>
    @elseif($select_parent_category_name == 'accessories')
        <div>
            <img class="image" src="{{asset('images/tab-accessories.JPG')}}" alt=""/>
        </div>
    </div>
    @endif--}}

    <div class="par parsys">
        @if (count($sub_categories)>0)
        @php
            $first_item = $sub_categories->first();
            // dd($first_item);
        @endphp
         <div class="pr-g-feature-benefit section">
            <section class="feature-benefit s-bg-white s-text-align-mo-center   feature-benefit--padding-top-normal">
                <div class="feature-benefit__text-wrap">
                    <div class="feature-benefit__text">
                        {{--<h2 class="feature-benefit__title contrast-target" data-font-size-pc="64" data-font-size-mo="70">{{$language == 'en'? $first_item->name_en : $first_item->name_mm}}</h2>
                        <div class="feature-benefit__desc-wrap">
                        <p class="feature-benefit__desc contrast-target" data-font-size-pc="18" data-font-size-mo="28">{{ $language == 'en'? substr(strip_tags($first_item['description_en']),0,20) : substr(strip_tags($first_item['description_mm']),0,13) }}...</p>--}}
                            <div class="feature-benefit__cta-wrap">
                                <a href="{{ route('shop_page',['cat1'=>Request::segment(2),'cat2'=>$first_item->slug]) }}" style="background:white; color:black" class="contrast-target s-btn-encased">
                                    LEARN MORE
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="feature-benefit__img-wrap align-center">
                    
                    @if(isset($first_item->sub_banner_image))
                    <img class="img-responsive" src="{{ asset('storage/uploads/category/sub-banner') }}/{{ $first_item->sub_banner_image ?? '' }}" alt=""/>
                    @else
                    <img class="img-responsive" src="{{ asset('images/default-sub-banner.jpg') }}" alt=""/>
                    @endif
                    
                </div>
            </section>
            </div>
        @endif

    <div class="pr-g-primary-selection section">
        <div class="primary-selection">
            <div class="primary-selection__title">
                <h2 class="primary-selection__title-tit s-font-sharpsans" data-font-size-pc="32" data-font-size-mo="44">
                     Choose a category
                </h2>
                {{-- <a href="{{ route('shop_page',['cat1'=>Request::segment(2),'cat2'=>'all']) }}" class="s-btn-text">
                    SEE ALL {{App\Category::where('slug',Request::segment(2))->first()->name_en}}
                </a> --}}
            </div>

            <div class="primary-selection__product  primary-selection__product--4column">
                <div class="js-primary-selection-carousel">
                    @foreach ($sub_categories as $item)
                        <div class="primary-selection__product-ct" style="margin-bottom: 100px">
                            <div class="primary-selection__product-ct-img-wrap">
                                <a href="#" class="s-contents-wrap-cta">
                                    @if($item->category_image)
                                    <img class="" 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
                                </a>
                            </div>

                            <div>
                                <div class="primary-selection__product-txt">
                                    <p class="primary-selection__product-name" data-font-size-pc="20" data-font-size-mo="32">
                                        {{$language == 'en'? $item->name_en : $item->name_mm}}
                                    </p>
                                    <p class="primary-selection__product-desc">
                                    {{ $language == 'en'? substr(strip_tags($item['description_en']),0,20) : substr(strip_tags($item['description_mm']),0,13) }}...
                                    </p>
                                </div>

                                @if ($check_main != null)
                                <div class="primary-selection__product-btn">
                                    <a href="{{ route('overview',['cat1'=>$item->slug]) }}" class="s-btn-encased">
                                    SEE ALL
                                    </a>
                                </div>
                                @else
                                <div class="primary-selection__product-btn">
                                    <a href="{{ route('shop_page',['cat1'=>Request::segment(2),'cat2'=>$item->slug]) }}" class="s-btn-encased">
                                    SEE ALL
                                    </a>
                                </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="pr-g-feature-benefit section mt-5">
    <section class="feature-benefit s-bg-white s-img-align-right s-text-align-mo-center   feature-benefit--padding-top-normal">
        <div class="feature-benefit__text-wrap">
            <div class="feature-benefit__text">
                <h2 class="feature-benefit__title contrast-target" data-font-size-pc="64" data-font-size-mo="70">QLED 8K</h2>
                <div class="feature-benefit__desc-wrap">
                    <p class="feature-benefit__desc contrast-target" data-font-size-pc="18" data-font-size-mo="28">A TV that can change, changes everything</p>
                    <div class="feature-benefit__cta-wrap">
                        <a href="#" class="contrast-target s-btn-encased">
                            LEARN MORE
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-benefit__img-wrap">
            <img src="images/PCD_LTV.png">
        </div>
    </section>
    </div>

    <div class="pr-g-feature-benefit section">
    <section class="feature-benefit s-bg-white s-text-align-mo-center   feature-benefit--padding-top-normal">
        <div class="feature-benefit__text-wrap">
            <div class="feature-benefit__text">
                <h2 class="feature-benefit__title contrast-target" data-font-size-pc="64" data-font-size-mo="70">QLED 8K</h2>
                <div class="feature-benefit__desc-wrap">
                    <p class="feature-benefit__desc contrast-target" data-font-size-pc="18" data-font-size-mo="28">A TV that can change, changes everything</p>
                    <div class="feature-benefit__cta-wrap">
                        <a href="#" class="contrast-target s-btn-encased">
                            LEARN MORE
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-benefit__img-wrap">
            <img src="images/smart-tv-PC.webp">
        </div>
    </section>
    </div>

    <div class="pr-g-feature-benefit section mt-5">
    <section class="feature-benefit s-bg-white s-img-align-right s-text-align-mo-center   feature-benefit--padding-top-normal">
        <div class="feature-benefit__text-wrap">
            <div class="feature-benefit__text">
                <h2 class="feature-benefit__title contrast-target" data-font-size-pc="64" data-font-size-mo="70">QLED 8K</h2>
                <div class="feature-benefit__desc-wrap">
                    <p class="feature-benefit__desc contrast-target" data-font-size-pc="18" data-font-size-mo="28">A TV that can change, changes everything</p>
                    <div class="feature-benefit__cta-wrap">
                        <a href="#" class="contrast-target s-btn-encased">
                            LEARN MORE
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature-benefit__img-wrap">
            <img src="images/2019_Super_Big_TV_PCD_KV_PC.webp">
        </div> --}}
    </section>
    </div>

</div>
</div>
@endsection