@extends('layouts.heading-home')

@section('css')
    <link href="/assets/css/index.css" rel="stylesheet" />
@endsection

@section('main')
        <!-- 首頁 carousel-intro -->
        <div id="carousel-index" class="carousel-intro carousel slide" data-ride="carousel"> 
            <ul class="carousel-indicators">
            @php
                $i = 0;
                foreach ($carouselRows as $row)
                {
            @endphp
                <li data-target="#carousel-index" data-slide-to="{{ $i }}" class="{{ $i == 0 ? 'active' : '' }}"></li>
            @php
                    $i++;
                }
            @endphp
            </ul>
            <div class="carousel-inner">
            @php
                $i = 0;
                foreach ($carouselRows as $row)
                {
                    $img_memo = '';
                    $img_src = '/assets/img/index/carousel-item01.jpg';
                    $imgs = $row->photos;
                    // $imgs = array_filter($row['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']);
                            break;
                        }
                    }

                    $img_src2 = '';
                    $imgs2 = $row->featured_photos;
                    if ($imgs2 && count($imgs2) > 0) 
                    {
                        foreach($imgs2 as $img)
                        {
                            // $img_memo = $img['comment'];
                            $img_src2 = URL::asset('/storage/'.$img['file_path']);
                            break;
                        }
                    }
            @endphp
                <div class="carousel-item {{ $i == 0 ? 'active' : '' }}">
                    <img src="{{ $img_src }}" alt="" width="100%" height="auto">
                    <div class="carousel-caption">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="caption-txt">
                                    <h2 class="animate__animated animate__fadeInUp">{{ $row->title }}</h2>
                                    <p class="animate__animated animate__fadeInUp">{{ $row->body }}</p>
                                    <div class="animate__animated animate__fadeInUp"><a href="{{ $row->link }}">DETAIL</a></div>
                                </div>
                            </div>
                            @if ($img_src2 != '')
                            <div class="col-md-6">
                                <div class="caption-img">
                                    <img src="{{ $img_src2 }}" alt="" width="auto" height="auto" class="img-fluid">
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            @php
                    $i++;
                }
            @endphp
                
            </div>
            <a class="carousel-control-prev" href="#carousel-index" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> 
            <a class="carousel-control-next" href="#carousel-index" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> 
        </div>
        
        <!-- 關於我們 -->
        <div class="about-wrap">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="about-info">
                            <h2>CRI SOMs Unleash <br />Your Potential</h2>
                            <p>CRI provides System on Module (SOM) to address the diverse robotics and AIOT market, meeting the demands for lightweight, low power consumption, superior computing power, and long range connectivity. Moreover, manufactured with a robust supply chain, offering our customers a trusted source.</p>
                            <div class="about-btn"><a href="/products">VIEW ALL<i class="fa-solid fa-arrow-right-long ml-2"></i></a></div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-img">
                            <img src="assets/img/index/about-img.png" alt="" width="auto" height="auto" class="img-fluid mb-lg-0 mb-5">
                        </div>
                    </div>
                </div>
            </div>    
        </div>

        <!-- 服務項目 -->
        <div class="service-wrap">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">
                        <div class="service-info">
                            <h2>Services<span>Services</span></h2>
                            <p>We stand together with customers through the close technical partnership, as well as our trusted hardware and firmware customization services. Everything we do is dedicated to helping our customers to release their products on time, on budget, and with the anticipated competitiveness.</p>
                            <div class="service-btn"><a href="/about">VIEW ALL<i class="fa-solid fa-arrow-right-long ml-2"></i></a></div>
                        </div>
                    </div>
<!--                    <div class="col-lg-8">
                        <div class="service-img">
                            <img src="assets/img/index/service-img.jpg" alt="" width="auto" height="auto" class="img-fluid mb-lg-0 mb-5">
                        </div>
                    </div>-->
                </div>
            </div>    
        </div>   
        
        <!-- 最新消息 -->
        <div class="news-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 pr-lg-5">
                        <div class="news-box">
                            <h3>Events<span>Events</span></h3>
                            <img src="/assets/img/index/news-a01.jpg" alt="" class="img-fluid">
                            <div class="news-inner">
            @php
                $i = 0;
                foreach ($eventRows as $row)
                {
                    $img_memo = '';
                    $img_src = '/assets/img/index/carousel-item01.jpg';
                    $imgs = $row->photos;
                    // $imgs = array_filter($row['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']);
                            break;
                        }
                    }
            @endphp
                                <div class="news-item">
                                    <time>{{ date('Y-m-d', strtotime($row->post_at)) }}</time>
                                    <h5><a href="/events/detail/{{ $row->id }}">{{ $row->title }}</a></h5>
                                    <p>Date: {{ date('Y-m-d', strtotime($row->event_at)) }}</p>
                                </div>
            @php
                    $i++;
                }
            @endphp
                            </div>
                            <div class="news-btn"><a href="/events">More Events</a></div>
                        </div>    
                    </div>
                    <div class="col-lg-6 pl-lg-5">
                        <div class="news-box">
                            <h3>News<span>News</span></h3>
                            <img src="assets/img/index/news-a02.jpg" alt="" class="img-fluid">
                            <div class="news-inner">
            @php
                $i = 0;
                foreach ($newsRows as $row)
                {
                    $img_memo = '';
                    $img_src = '/assets/img/index/carousel-item01.jpg';
                    $imgs = $row->photos;
                    // $imgs = array_filter($row['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']);
                            break;
                        }
                    }
            @endphp
                                <div class="news-item">
                                    <time>{{ date('Y-m-d', strtotime($row->post_at)) }}</time>
                                    <h4><a href="/news/detail/{{ $row->id }}">{{ $row->title }}</a></h4>
                                    <p>{{ Str::limit($row->description, 64) }}</p>
                                </div>
            @php
                    $i++;
                }
            @endphp
                            </div>
                            <div class="news-btn"><a href="/news">More News</a></div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 聯絡資訊 -->
        <div class="contact-wrap">
            <img src="assets/img/index/contact-bg.jpg" alt="" class="img-fluid">
            <div class="contact-inner">
                <h3>CONTACT</h3>
                <p>You are welcome to call us directly or through the inquiry form.</p>
                <div class="contact-btn"><a href="/support/sales-inquiry">Learn more</a></div>
            </div>    
        </div>
@endsection

@section('script')
    <script type="text/javascript">
		$(document).ready(function() {
			$(".fancybox").fancybox().trigger('click');
		});
	</script>
@endsection