@extends('frontend.layouts.app')

@section('meta')
    <meta name="description" content="{{ getCachedOption('site_description_'.App::getLocale()) }}">
@endsection

@section('title', getCachedOption('site_title_'.App::getLocale()))

@section('main')
<section class="sec-1 full-slider owl-carousel owl-theme">
    @foreach($slides as $slide)
    <a href="{{ $slide->link }}" class="item-slider">
        <img src="{{ $slide->image_url }}" alt="Transoft">
    </a>
    @endforeach
</section>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.full-slider').owlCarousel({
            items: 1,
			autoHeight: true,
            margin: 0,
            autoplay: true,
            autoplayTimeout: 5000,
            smartSpeed: 1000,
            loop: false,
            rewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            dots: true,
            nav: true,
            navText: ['<i class="far fa-angle-left"></i>', '<i class="far fa-angle-right"></i>'],
        });
    });
</script>
<!-- end-full-slider -->

<section class="sec-2">
    <div class="inner-container">
        <div class="main-sec-2 flex">
            <div class="col-sec-2 left-sec-2">
                <div class="slider-service swiper-container">
                    <div class="swiper-wrapper">
                        @foreach($services as $service)
                        <div class="swiper-slide item-service">
                            <div class="img-item-service">
                                <img src="{{ $service->image_url }}" alt="Transoft">
                            </div>
                            <div class="ct-item-service">
                                <h3 class="tt-item-service">{{ $service->name }}</h3>
                                <div class="des-item-service">
                                    {!! $service->content !!}
                                </div>
                                <strong class="price-item-service">{{ $service->price }}</strong>
                            </div>
                            <a href="{{ $service->link }}" class="btn-item-service">了解更多<i class="fad fa-angle-double-right"></i></a>
                        </div>
                        @endforeach
                    </div>
                    <div class="nav-btn swiper-button-next"><i class="fad fa-arrow-right"></i></div>
                    <div class="nav-btn swiper-button-prev"><i class="fad fa-arrow-left"></i></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- end-left-sec-2 -->

            <div class="col-sec-2 right-sec-2">
                <h3>我們的服務核心</h3>
                <p>{!! $servicePage->content !!}</p>
                <ul class="list-ctrl-service">
                @foreach($services as $service)
                    <li class="ctrl-service {{ $service == $services[0] ? 'active' : '' }}"><i class="far fa-star"></i><span>{{ $service->name }}</span></li>
                @endforeach
                </ul>
            </div>
            <!-- end-right-sec-2 -->
        </div>
        <!-- end-main-sec-2 -->
        <script type="text/javascript">
            jQuery(document).ready(function() {
                var sv = new Swiper('.slider-service', {
                    allowTouchMove: false,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    pagination: {
                        el: ".swiper-pagination",
                    },
                    // Responsive breakpoints
                    breakpoints: {
                        // when window width is >= 961px
                        960: {
                            allowTouchMove: true,
                        }
                    }
                });
                jQuery(document).on('click', '.ctrl-service', function() {
                    jQuery('.ctrl-service').removeClass('active');
                    jQuery(this).addClass('active');
                    var idx = jQuery(this).index();
                    sv.slideTo(idx, 400);
                });
            });
        </script>
    </div>
    <!-- end-inner-container -->
</section>
<!-- end-sec-2 -->

<section class="sec-3">
    <div class="inner-container">
        <div class="main-sec-3">
            <h3 class="tt-sec-3">成功案例</h3>
            <div class="ct-main-sec-3 swiper-container">
                <div class="swiper-wrapper">
                    @foreach($templates as $template)
                    <div class="swiper-slide">
                        <div class="item-project">
                            <div class="img-item-project">
                                <img src="{{ $template->image_url }}" alt="Transoft">
                                <div class="overlay-item-project">
                                    <a href="{{ $template->link }}" class="btn-item-project" target="_blank">瀏覽</a>
                                </div>
                            </div>
                            <div class="ct-item-project">
                                <h4>{{ $template->name }}</h4>
                                <h5>{{!empty($template->theme['name']) ? $template->theme['name'] : '其他' }}</h5>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="nav-swiper swiper-button-next"><i class="fal fa-angle-right"></i></div>
                <div class="nav-swiper swiper-button-prev"><i class="fal fa-angle-left"></i></div>
            </div>
            <div class="btn-all-project">
                <a href="{{ route('tsvn.projects') }}">瀏覽更多</a>
            </div>

        </div>
        <!-- end-main-sec-3 -->
    </div>
    <!-- end-inner-container -->
    <div class="bg-sec-3" style="background: url(/frontend/images/bg-project.jpg) no-repeat scroll center;background-size: cover;"></div>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            var slProject = new Swiper('.ct-main-sec-3', {
                slidesPerView: 3,
                slidesPerColumn: 2,
                spaceBetween: 30,
                autoplay: {
                    delay: 5000,
                },
                speed: 1000,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                // Responsive breakpoints
                breakpoints: {
                    // when window width is <= 640px
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 10,
                    },
                    // when window width is <= 768px
                    768: {
                        slidesPerView: 2,
                        spaceBetween: 10,
                    },
                    // when window width is <= 960px
                    960: {
                        spaceBetween: 10,
                    }
                }
            });

            jQuery('.ct-main-sec-3').mouseenter(function() {
                slProject.autoplay.stop();
            });
            jQuery('.ct-main-sec-3').mouseleave(function() {
                slProject.autoplay.start();
            });

            jQuery('.item-project').hover(function() {
                var h = jQuery(this).find('.img-item-project').height();
                var hi = jQuery(this).find('img').height();
                var ht = h - hi;
                jQuery(this).find('img').css('top', ht);
            }, function() {
                jQuery(this).find('img').css('top', 0);
            });
        });
    </script>
</section>
<!-- end-sec-3 -->

<section class="sec-4">
    <div class="inner-container">
        <div class="main-sec-4">
            <h3 class="tt-sec-4">最新消息</h3>
            <div class="ct-main-sec-4 swiper-container">
                <div class="swiper-wrapper">
                    @foreach($news as $newsItem)
                    <div class="swiper-slide">

                        <li class="item-news">
                            <a href="{{ route('tsvn.news-detail', $newsItem->slug ) }}" class="img-item-news">
                                <img src="{{ $newsItem->image_url }}" alt="Transoft">
                            </a>
                            <div class="ct-item-news">
                                <h4 class="tt-item-news"><a href="{{ route('tsvn.news-detail', $newsItem->slug ) }}" title="{{ $newsItem->title }}">{{ $newsItem->title }}</a></h4>
                                <span class="date-item-news"><i class="far fa-clock"></i>{{ \Carbon\Carbon::parse($newsItem->created_at)->format('d/m/Y h:i') }}</span>
                                <p class="des-item-news">{{ $newsItem->short_description }}</p>
                                <div class="btn-item-news">
                                    <a href="{{ route('tsvn.news-detail', $newsItem->slug ) }}">了解更多<i class="fad fa-angle-double-right"></i></a>
                                </div>
                            </div>
                        </li>
                    </div>
                    @endforeach
                </div>
                <div class="nav-news swiper-button-next"><i class="fal fa-angle-right"></i></div>
                <div class="nav-news swiper-button-prev"><i class="fal fa-angle-left"></i></div>
            </div>
            <div class="btn-all-news">
                <a href="{{ route('tsvn.news') }}">瀏覽更多</a>
            </div>
        </div>
        <!-- end-main-sec-4 -->
        <script type="text/javascript">
            jQuery(document).ready(function() {
                var slideNews = new Swiper('.ct-main-sec-4', {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    autoplay: {
                        delay: 5000,
                    },
                    speed: 1000,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    // Responsive breakpoints
                    breakpoints: {
                        // when window width is <= 640px
                        640: {
                            slidesPerView: 1,
                            spaceBetween: 10,
                        },
                        // when window width is <= 768px
                        768: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                        // when window width is <= 960px
                        960: {
                            spaceBetween: 10,
                        }
                    }
                });
            });
        </script>
    </div>
    <!-- end-inner-container -->
</section>
<!-- end-sec-4 -->

<section class="sec-5">
    <div class="inner-container">
        <div class="main-sec-5 flex">
            <h3 class="tt-sec-5">合作夥伴</h3>
            <div class="ct-main-sec-5 swiper-container">
                <div class="swiper-wrapper">
                    @foreach($clients as $client)
                    <div class="item-partner swiper-slide">
                        <a href="{{ $client->link ?? '#' }}" title="{{ $client->name }}" @if($client->link) target="_blank" @endif><img src="{{ $client->image_url }}" alt="{{ $client->name }}"></a>
                    </div>
                    @endforeach
                </div>
                <div class="nav-partner swiper-button-next"><i class="fal fa-angle-right"></i></div>
                <div class="nav-partner swiper-button-prev"><i class="fal fa-angle-left"></i></div>
            </div>
        </div>
        <!-- end-main-sec-5 -->
        <script type="text/javascript">
            jQuery(document).ready(function() {
                var slidePartner = new Swiper('.ct-main-sec-5', {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    autoplay: {
                        delay: 5000,
                    },
                    speed: 1000,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                    // Responsive breakpoints
                    breakpoints: {
                        // when window width is <= 320px
                        320: {
                            slidesPerView: 1,
                            spaceBetween: 10,
                        },
                        // when window width is <= 640px
                        640: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                        // when window width is <= 768px
                        768: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        // when window width is <= 960px
                        960: {
                            spaceBetween: 10,
                        }
                    }
                });
            });
        </script>
    </div>
    <!-- end-inner-container -->
</section>
<!-- end-sec-5 -->
@endsection