@extends('layout.layout')
@section('css')
    <link href="{{asset('css/components.css')}}" rel="stylesheet">
    <link href="{{asset('css/font-awesome.min.css')}}" rel="stylesheet">
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <link href="{{asset('css/animate.css')}}" rel="stylesheet">

    
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->

    <!-- Fonts -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="bookmark" href="favicon.ico">

    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700' rel='stylesheet' type='text/css'>

    <!-- Styles -->
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('css/wongwah/header.css')}}" />
    <link rel="stylesheet" href="{{asset('css/wongwah/index.css')}}" />
    <link rel="stylesheet" href="{{asset('css/wongwah/footer.css')}}" />

    
    <link href="{{asset('css/docs.min.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/pageLayout.css')}}" rel="stylesheet">
    <link href="{{asset('css/wongwah/product.css')}}" rel="stylesheet">
    <link href="{{asset('css/gallery.css')}}" rel="stylesheet">

    <style>
        .top-banner .wrapper.style3 {
                background-image: url({{asset('upload/'.$banner->img)}});
        }
        .color-title, a.photo-more{
            color: #3776c6;
        }
        .section-title{
            color: #FFFFFF;
        }
        .navbar-default .navbar-nav > li:not(.open):hover:before{
            border-bottom: 10px solid #3776c6;
        }
        .button, .nav-id li.active a{
            background: #3776c6;
        }
        .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
            background-color: #3776c6;
        }
        #footer h3, #footer a:hover, #footer a:focus{
            color: white;
        }
    </style>

</head>
@section('content')
<!-- 首頁navber -->
@include('layout.nav')

<div id="app">
    
    <section class="top-banner">
        <div class="pageBanner wrapper style3">
            <div class="inner">
                <header class="align-center">
                    <h3 class="slogan">{{$banner->title1}}</h3>
                    <h1 class="slogan-c">{{$banner->title2}}</h1>
                </header>
            </div>
        </div>
    </section>

    <section class="productSection">
        <div class="container">

            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{asset('/')}}"><i class="glyphicon glyphicon-home"></i></a></li>
                <li class="breadcrumb-item active">產品資訊</li>
                <li class="breadcrumb-item"><a href="{{asset('ProductCategory')}}">類別總覽</a></li>
                <li class="breadcrumb-item"><a href="{{asset('ProductCategory/'.$product->product_category_id)}}">綠建材</a></li>
                <li class="breadcrumb-item active">{{$product->name}}</li>
            </ol>
            <div id="productSection" class="pageSec te">

                <div class="product-card">
                    <h1 class="color-title">{{$product->name}}</h1>
                    <br>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="centerPhoto-wrapper">
                                <a href="{{asset('upload/'.$product->img[0])}}" data-lightbox="roadtrip" data-title="紙蜂巢庫板">
                                    <img id="centerPhoto" src="{{asset('upload/'.$product->img[0])}}" width="100%">
                                </a>
                            </div>
                            
                            <br>
                        </div>
                        <div class="col-md-6">
                            <h3 style="margin-top: 0;" class="color-title">產品描述：</h3>
                            <p class="pd-descript" style="color: dimgray">{{$product->introduction}}</p>
                            <br>
                            <h3 style="margin-top: 0;" class="color-title">參考圖片：</h3>
                            <div class="small-gallery">
                                @foreach($product->img as $val)
                                <div class="photo-thumb" onclick="changeCenterPhoto(this)">
                                    <img src="{{asset('upload/'.$val)}}" width="100%">
                                </div>
                                @endforeach
                            </div>
                            <br>
                        </div>
                    </div>
                    <hr>
                    <div class="pd-html-area">
                        <p>{{$product->body}}<br></p><p><br></p>
                    </div>
                    <hr>
                    <div class="pd-html-area">
                        <p>{{$product->form}}<br></p><p><br></p>
                    </div>
                    <hr>
                </div>


                <br>
                <a href="{{asset('ProductCategory/'.$product->product_category_id)}}" class="back-btn-wrapper">
                    <button class="btn btn-default btn-dark back-btn">
                        <i class="fa fa-chevron-circle-left fa-2x"> 回列表</i>
                    </button>
                </a>
            </div>
        </div>

    </section>


</div>
@stop
@section('script')
        <!-- Scripts -->
    <script src="{{asset('js/components.js')}}"></script>
    <script src="{{asset('js/ie/html5shiv.js')}}"> </script>
    <script src="{{asset('js/ie/respond.min.js')}}"></script>
    <script src="{{asset('js/jquery.mousewheel.min.js')}}"></script>
    <script src="{{asset('js/jquery.poptrox.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrolly.min.js')}}"></script>
    <script src="{{asset('js/jquery.scrollex.min.js')}}"></script>
    <script src="{{asset('js/jquery.lettering.js')}}"></script>
    <script src="{{asset('js/jquery.textillate.js')}}"></script>
    <script src="{{asset('js/smoothScroll.js')}}"></script>
    <script>
        $(document).ready(function(){

            $(".home").click(function(){
                $("html, body").animate({scrollTop:0}, 500);
            });

            $(window).scroll(function () {

                $(".slideanim").each(function(){
                    var pos = $(this).offset().top;

                    var winTop = $(window).scrollTop();
                    if (pos < winTop + 600) {
                        $(this).addClass("slide");
                    }
                });
            })

        });

        function myMap() {
            var mapx = parseFloat('24.0628792');
            var mapy = parseFloat('120.6726313');
            var myCenter = new google.maps.LatLng(mapx, mapy);
            var mapProp = {center:myCenter, zoom:18, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var marker = new google.maps.Marker({position:myCenter});
            marker.setMap(map);
        }

        function theBodyLoad(){
            if($('.slogan').length > 0){
                $('.slogan').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
            if($('.slogan-c').length > 0){
                $('.slogan-c').textillate({
                    in: { effect: 'rollIn' },
                    loop: true,
                    out: {
                        effect: 'fadeOut',
                        delayScale: 1.5,
                        delay: 5,
                        sync: false,
                        shuffle: true,
                    }
                });
            }
        }



    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUBHlB3qV9ODgcVGyKyESZpk_hZcCWhzk&amp;callback=myMap"></script>


    <script>
        $(document).ready(function(){

        });

        function changeCenterPhoto(foto){
            var src = $('img', foto)[0].src;
            var $lightboxa = $('#centerPhoto').parent();
            if($('img#centerPhoto')[0].src != src){
                window.replaceHash('');
                toggleOpacity($('img#centerPhoto'), 0, function(){
                    loadNewPhoto(src);
                });
                $lightboxa.attr('href',src);
            }
        }

        function zoomImage(){
            $('#centerPhoto').parent().trigger('click');
        }

        function loadNewPhoto(src){
            $('img#centerPhoto').off('load').on('load',function(){
                toggleOpacity(this, 1, null);
                window.location = '#productSection';
            });
            $('img#centerPhoto')[0].src = src;
        }

        function toggleOpacity(target, opacity, completeFunc){

            $(target).animate(
                {
                    opacity: opacity
                },400,function(){
                    if(typeof completeFunc == 'function') completeFunc();
                }
            );
        }

        (function(namespace) { // Closure to protect local variable "var hash"
            if ('replaceState' in history) { // Yay, supported!
                namespace.replaceHash = function(newhash) {
                    if ((''+newhash).charAt(0) !== '#') newhash = '#' + newhash;
                    history.replaceState('', '', newhash);
                }
            } else {
                var hash = location.hash;
                namespace.replaceHash = function(newhash) {
                    if (location.hash !== hash) history.back();
                    location.hash = newhash;
                };
            }
        })(window);
    </script>

@stop