@extends('layouts.heading-page')

@section('title')
    Products -
@endsection

@section('seo_keywords')
    {{ $dataRow->seo_keyword }}
@endsection

@section('seo_description')
    {{ $dataRow->seo_description }}
@endsection

@section('css')
    <link href="/assets/js/slick/slick.css" rel="stylesheet"/>
	<link href="/assets/js/slick/slick-theme.css" rel="stylesheet"/>
    <link href="/assets/css/page.css" rel="stylesheet"/>
@endsection

@section('breadcrumbs')
    <a href="/products">Products</a>
    / <span><a href="/products/{{ $catalogSlug }}">{{ $catalogName }}</a></span>
    / <span>{{ $dataRow->title }}</span>
@endsection

@section('page-main')
        <!-- 資料內容 -->
        <div class="content-wrap products-wrap">
            <div class="container">
                <div class="row">
                    <?//php include("navsubProducts.php"); ?> 
                    <!-- 內容資訊 s -->
                    <div class="col-bg-12 col-xl-12">
                        <h3 class="h3-title mb-5"><i class="fas fa-caret-square-right"></i>System on Module (SOM)</h3>
                        <div class="products-detail mt-3">
                            <!-- 基本介紹 -->
                            <div class="row justify-content-center">
                                <div class="col-bg-8 col-xl-7 col-lg-12 order-xl-2">
                                    <div class="products-detail-info">
                                        <h2>{{ $dataRow->title }}<span>{{ trans('backend.product.tip_options.' . $dataRow->tip) }}</span></h2>
                                        <div class="Txt">
                                            {{ $dataRow->description }}
                                        </div>
                                        <div class="my-4">
                                            <h5>Applications:</h5>
                                            <ul class="ul-applications">
                                                @foreach ($productApplications as $tag)
                                                <li><a href="">{{ $tag->name }}</a></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="buy-btn mb-4">
                                            <a href="/support/sales-inquiry?pid={{ $dataRow->id }}" class="btn btn-danger">Get a Quote <i class="fa-solid fa-arrow-right"></i></a>
                                        </div>
        
                                    </div>
                                </div>
                                <div class="col-bg-4 col-xl-5 col-lg-8 order-xl-1">
                                    <div class="slider slider-for">
                                        @php
                                            $img_memo = '';
                                            $img_src = '//assets/img/products-item-a01.jpg';
                                            $imgs = $dataRow->photos;
                                            //$imgs = array_filter($dataRow->photos, function($v) {
                                            //        return $v['is_selected'] == true;
                                            //    });
                                            if (count($imgs) > 0) 
                                            {
                                                foreach($imgs as $img)
                                                {
                                                    $img_memo = $img['comment'];
                                                    $img_src = URL::asset('/storage/'.$img['file_path']);
                                        @endphp
                                        <div class="align-self-center">
                                            <a data-fancybox="gallery" href="{{ $img_src }}">
                                                <img src="{{ $img_src }}" alt="{{ $img_memo }}" width="auto" height="auto">
                                            </a>
                                        </div>            
                                        @php        
                                                }
                                            }
                                        @endphp
                                        
                                    </div>
                                    <div class="slider slider-nav">
                                    @php
                                            $img_memo = '';
                                            $img_src = '//assets/img/products-item-a01.jpg';
                                            $imgs = $dataRow->photos;
                                            //$imgs = array_filter($dataRow->photos, function($v) {
                                            //        return $v['is_selected'] == true;
                                            //    });
                                            if (count($imgs) > 0) 
                                            {
                                                foreach($imgs as $img)
                                                {
                                                    $img_memo = $img['comment'];
                                                    $img_src = URL::asset('/storage/'.$img['file_path']);
                                        @endphp
                                        <div class="align-self-center"><img src="{{ $img_src }}" alt="{{ $img_memo }}" width="100%" height="auto" /></div>  
                                        @php        
                                                }
                                            }
                                        @endphp
                                        
                                    </div>
                                </div>
                            </div>

                            <!-- 產品說明 -->
                            <section class="clearfix my-5 img-setup video-iframe">
                                    <div class="products-tabs">
                                        <ul class="nav nav-tabs tabs">
                                            <li><a class="active" data-toggle="tab" href="#tab11">Overview</a></li>
                                            <li><a data-toggle="tab" href="#tab12">Specifications</a></li>
                                            <li><a data-toggle="tab" href="#tab13">Resources</a></li>
                                            <li><a data-toggle="tab" href="#tab14">Related Parts</a></li>
                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab11" class="tab-pane in active">
                                                <!-- Overview 資料 -->
                                                <div class="products-tabs-content">
                                                    {!! $dataRow->feature_overview !!}
                                                </div>
                                            </div>
                                            <div id="tab12" class="tab-pane">
                                                <!-- Specifications 資料 -->
                                                <div class="products-tabs-content">
                                                    {!! $dataRow->feature_spec !!}
                                                </div>

                                            </div>
                                            <div id="tab13" class="tab-pane">
                                                <!-- Resources 資料 -->
                                                <div class="products-tabs-content">
                                                    
                                                </div>
                                            </div>
                                            <div id="tab14" class="tab-pane">
                                                <!-- Related Parts 資料 -->
                                                <div class="products-tabs-content">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </section>
        
                            <div class="btn-back"><a href="javascript:history.back()"><i class="fa fa-reply"></i>  Return to list page</a></div>
                        </div>
                        <div class="related-products">
                            <h3>Related Products</h3>
                            <div class="slider responsive-related">
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a01.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip...</p>
                                    </div>
                                </div>
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a02.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip. Featuring the...</p>
                                    </div>
                                </div>
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a03.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip. Featuring the potent...</p>
                                    </div>
                                </div>
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a01.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip. Featuring the potent...</p>
                                    </div>
                                </div>
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a02.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip. Featuring the potent...</p>
                                    </div>
                                </div>
                                <div class="related-item">
                                    <div class="products-item-img">
                                        <a href="products-detail.php">
                                            <img src="/assets/img/products-item-a03.jpg" alt="" width="100%" height="auto">
                                            <div class="products-item-mask"><span>Learn more</span></div>
                                        </a>
                                    </div>
                                    <div class="products-item-info">
                                        <h4><a href="products-detail.php">COREXOM R6490WGQ SOM</a></h4>
                                        <p>Presenting the COREXOM R6490WGQ SOM – powered by the Qualcomm® QCS6490 system-on-chip. Featuring the potent...</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('script')
    <script type="text/javascript">
		$('.slider-for').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			fade: true,
			asNavFor: '.slider-nav',
		});
		$('.slider-nav').slick({
			asNavFor: '.slider-for',
			centerMode: true,
			focusOnSelect: true,
			arrows: false,
			dots: false,
			infinite: true,
			speed: 300,
			centerMode: false,
			autoplay: false,
			autoplaySpeed: 3000,
			slidesToShow: 4,
			slidesToScroll: 1,
		});
        $('.responsive-related').slick({
          arrows: true,
          dots: false,
          infinite: true,
          speed: 300,
          autoplay: true,
          autoplaySpeed: 3000,
          slidesToShow: 5,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 1281,
              settings: {
                slidesToShow: 4,
              }
            },
            {
              breakpoint: 1025,
              settings: {
                slidesToShow: 3,
              }
            },
            {
              breakpoint: 991,
              settings: {
                slidesToShow: 2, 
              }
            },
            {
              breakpoint: 641,
              settings: {
                slidesToShow: 1,
              }
            },
          ]
        });
	</script>
@endsection