{{-- Part of phoenix project. --}}

@extends('_global.html')

@section('script')

<script>
    $(document).ready(function(){
        $('.parallax-window').parallax({
            imageSrc: '{{ $app->get('datavideo.banner') ? : $uri['media.path'] . 'images/banner/gift.jpg' }}'
        });
    });

    $(document).ready(function() {
        var waypointClass = 'main [class*="col-"]';
        var animationClass = 'fadeInUp';
        var delayTime;

        $(waypointClass).waypoint(function() {
                delayTime += 100;
                $(this).delay(delayTime).queue(function(next){
                    $(this).toggleClass('animated');
                    $(this).toggleClass(animationClass);
                    delayTime = 0;
                    next();
                });
            },
            {
                offset: '90%',
                triggerOnce: true
            });

        // H1 fade in
        $('.lyra').fadeIn(3800);

        // Smooth Scroll
        $('a[href*=#]').bind('click', function(e) {
            e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump

            var target = $(this).attr("href"); //Get the target

            var scrollToPosition = $(target).offset().top;

            // perform animated scrolling by getting top-position of target-element and set it     as scroll target
            $('html, body').stop().animate({ scrollTop: scrollToPosition}, 800, function() {
                location.hash = target;  //attach the hash (#jumptarget) to the pageurl
            });

            return false;

        });
    });
</script>
@stop

@section('hero')
<style>
    html:not(.no-csstransitions) main [class*="col-"] {
        opacity: 0;
    }
</style>

<!-- ============================================================= SECTION – HERO ============================================================= -->

@if(!$isMobile)
    <section id="hero" style="overflow:hidden;">
        <div class="homepage-hero-module">
            <div class="video-container hero-container">
                <div class="filter"></div>

                {{-- Main Header--}}
                <div class="lyra-mainheader">
                    <h1 class="light-color lyra" style="">
                        @translate('catalog.home.banner.title')
                    </h1>
                    <p class="light-color lyra" style="" >
                        @translate('catalog.home.banner.subtitle')
                    </p>
                    <div class="lyra banner-arrow" style="margin-top: 150px">
                        <a id="button-main" href="#item">
                            <h1><i class="icon-down-open-big light-color"></i></h1>
                        </a>
                    </div>
                </div>
                {{-- Main Header End--}}

                {{-- Video --}}
                <video autoplay="" loop="" class="fillWidth fadeIn animated">
                    <source src="{{ $video }}" type="video/mp4">Your browser does not support the video. I suggest you upgrade your browser.
                </video>
                {{-- End Video--}}

            </div>
        </div>
    </section>
@else
    <section id="mobile-hero">
        <div class="parallax-window">
            {{-- Main Header--}}
            <div class="lyra-mainheader">
                <h1 class="light-color lyra" style="">
                    @translate('catalog.home.banner.title')
                </h1>
                <p class="light-color lyra" style="" >
                    @translate('catalog.home.banner.subtitle')
                </p>
                <div class="lyra banner-arrow" style="margin-top: 150px">
                    <a id="button-main" href="#item">
                        <h1><i class="icon-down-open-big light-color"></i></h1>
                    </a>
                </div>
            </div>
            {{-- Main Header End--}}
        </div>
    </section>
@endif

<!-- ============================================================= SECTION – HERO : END ============================================================= -->
@stop


@section('main-section')
    <section id="item">

        <div class = "container inner ">
            {{--標題--}}
            <div class = "col-md-8 col-sm-9 center-block text-center" >
                <h1 style="font-weight:100; margin-bottom: 1em;">Virtual Set</h1>
            </div>
            {{--TAGS--}}
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul id="" class="filter">

                            @foreach ($productCategories as $category)
                            <li>
                                <a href="{{ $router->html('category', ['alias' => $category->alias]) }}">
                                    {{ $category->title }}
                                </a>
                            </li>
                            @endforeach
                        </ul><!-- /#transitionType -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container -->


            {{--新增--}}

            <section id="items">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="owl-featured-works" class="owl-carousel owl-outer-nav owl-ui-lg">

                                <div class="item">
                                    <figure>
                                        <div class="row">
                                            @foreach ($items as $k => $item)

                                                <div class="col-sm-4 inner-top">

                                                    <figure>
                                                        <a href="{{ \Catalog\Helper\ProductHelper::link($item->id, $item->alias, $item->category_alias) }}">
                                                            <img src="{{ $uri['media.path'] }}images/placeholder/16-9-placeholder.png" alt="{{ $item->title }}"
                                                                style="background-image: url({{ $item->image_url }}); background-size: cover;">
                                                        </a>

                                                        <figcaption class="bordered no-top-border">
                                                            <a href="{{ \Catalog\Helper\ProductHelper::link($item->id, $item->alias, $item->category_alias) }}">
                                                                <div class="info">
                                                                    <h4>
                                                                        {{ $item->title }}
                                                                    </h4>
                                                                    <p>
                                                                        {{ $item->price_range }}
                                                                    </p>
                                                                </div>
                                                            </a>
                                                        </figcaption>
                                                    </figure>
                                                </div>

                                                @if ($k % 3 == 2)
                                        </div>@if ($k % 6 == 5 && $k != 17)
                                {{--</div>--}}
                                </figure>
                            </div>
                            <div class="item">
                                <figure>
                                    {{--<div class="row">--}}
                                                  @endif
                                            <div class="row">
                                            @endif


                                            @endforeach
                                        </div>
                                    </figure>
                                </div><!-- /.item -->

                                {{--<div class="item">--}}
                                    {{--<figure>--}}
                                        {{--@include+('_global.widget.products')--}}
                                    {{--</figure>--}}
                                {{--</div><!-- /.item -->--}}

                                {{--<div class="item">--}}
                                    {{--<figure>--}}
                                        {{--@include('_global.widget.products')--}}
                                    {{--</figure>--}}
                                {{--</div><!-- /.item -->--}}

                            </div><!-- /.owl-carousel -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->

                </div><!-- /.container -->
            </section>

            {{--新增ＥＮＤ--}}

        </div>
    </section>
@stop

@section('feature-section')
    <!-- ============================================================= SECTION – BLOCK ============================================================= -->

    {!! (new \Catalog\Widget\BlockWidget)->render() !!}

    <!-- ============================================================= SECTION – BLOCK END ============================================================= -->


    <!-- ============================================================= SECTION – MAIN SLIDER HERO ============================================================= -->

    {!! (new \Catalog\Widget\BannerWidget)->render() !!}

    <!-- ============================================================= SECTION – MAIN SLIDER HERO : END ============================================================= -->
@stop