@extends('layout.basic_front')

@section("content")
        <!--LOOKER 資料-->
    <div class="col-md-12 video_whole look_container">    
        <div class="container">
            <div class="row">
                <div class="col-md-6 page_title" style="padding-right:40px;">
                    <h2>{{$category->title}}</h2><h2 style="margin-top:-10px;">LOOKNOW</h2>
                    <div class="col-md-12" style="margin-top:45px;">
                        
                        <div class="col-md-10 col-md-offset-2">
{{--                            <div class="text-right" style="z-index:999;margin-top:200px;margin-left:30px;    position: absolute;left: -109px;" >
                                <img style="width:100%;"  src="../../images/icons/line_bg_01.png">
                                <br>
                                <span style="margin-right:5px;">{{date("Y M m",strtotime($article->created_at))}}</span>
                            </div>
                            {{ HTML::image($article->img_path,"",['class' => "video"]) }}
--}}
<div class="text-right hidden-xs hidden-sm" style="z-index:999;margin-top:50%;margin-left:30px;    position: absolute;left: -106px;" >
                                <img style="width:100%;"  src="{{asset('images/icons/line_bg_01.png')}}">
                                <br>
                                <span style="margin-right:5px;    line-height: 35px;">{{date("Y M m",strtotime($article->created_at))}}</span>
                            </div>
 <!--iframe class="video" src="https://www.youtube.com/embed/lR1udarDuvo?rel=1&controls=1&showinfo=0&autohide=2&autoplay=1" frameborder="0" allowfullscreen></iframe-->
			 <iframe class="video" src="{{$article->youtube_url}}?rel=1&controls=1&showinfo=0&autohide=2&autoplay=1" frameborder="0" allowfullscreen></iframe>


                        </div>
                    </div>

                </div>


                <div class="col-md-6 video_looker" id="likes">
                        <div class="col-md-3">
                            <a href="{{URL::to('front/lookerinfo/'.$looker->id)}}">
                                {{ HTML::image($looker->photo,"",['class'=>"img-circle",'style'=>'width:100px;height:100px']) }}
                                <!--img class="media-object" src="../../images/head.jpg"--><!--大頭照-->
                            </a>
                        </div>
                        <div class="col-md-5" style="padding-left:20px; padding-top: 20px;">
                            <h3 class="media-heading"><b>{{$looker->name}}</b></h3>
                            <p><b id="FOLLOW_{{$looker->id}}">{{$looker->follow_num}}</b><b> followers</b></p>
                        </div>
                        <div class="col-md-4" style="padding-left:35px; padding-top: 20px; margin-bottom: 30px;">
                        @if($isfollow)
                            <a onclick="videoAction('LOOKER','{{$article->blogger_id}}','FOLLOW','{{$article->blogger_id}}');" id="LOOKER_FOLLOW_{{$article->blogger_id}}" name="follow" class="btn btn-default social_btn actived">   <!--追蹤-->
                                LOOK ME
                        @else
                            <a onclick="videoAction('LOOKER','{{$article->blogger_id}}','FOLLOW','{{$article->blogger_id}}');" id="LOOKER_FOLLOW_{{$article->blogger_id}}" name="follow" class="btn btn-default social_btn unactive">   <!--追蹤-->
                                +LOOK ME
                        @endif
                            </a>
                        </div>


                    <div class="col-md-12 video_title">
                        <a class="video_like">
                            <img style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_on.png" /><span class="like_count" id="LIKE_{{$article->id}}">{{$like_this}}</span></a>

                        <h1 style="clear:both;">{{$article->title}}</h1>
			<!--h2 style="font-size:30px;">沒關係，是熱天阿。</h2-->

                    </div>

                    <div class="col-md-12 video_body">
                        @if(isset($article->tag1) && $article->tag1 !="")
                        <a href="{{URL::to('front/?tag='.$article->tag1.'#content')}}" class="video_tag">#{{$article->tag1}}</a>@endif
                        @if(isset($article->tag2) && $article->tag1 !="")
                        <a href="{{URL::to('front/?tag='.$article->tag2.'#content')}}" class="video_tag">#{{$article->tag2}}</a>@endif
                        @if(isset($article->tag3) && $article->tag1 !="")
                        <a href="{{URL::to('front/?tag='.$article->tag3.'#content')}}" class="video_tag">#{{$article->tag3}}</a>@endif
                        <br>
                        <br>
                        <br>
			                        <br>
                        <br>
                        <br>
                                            
                        @if(isset($article->mention_product))
                        <a class="video_tag product_tag" href="{{URL::to('front/productinfo/'.$productid)}}">@ {{$article->mention_product}}</a>
			@if(  $_FRONTCONST["tag"] == $category->title &&  $_FRONTCONST["tag"] != "")
			<button type="button" class="btn btn_video_buy btn-xs" data-id="{{$productid}}" data-name="{{$article->mention_product}}">購買</button>
			@endif
			<button type="button" class="btn btn_video_location btn-xs"><a href="#" id="nearLocation" onclick="getLocation();"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> LOCATION</a></button>
			@endif



                    <!--div class="col-md-12 video_product">
                        <a href="#">
			    <img class="video_product_img" src="../../../images/pro.jpg">
                            <span class="video_product_name">貓絕魅惑眼線液</span>
                        </a>
                    </div-->

                    <div class="video_share">
                        @if($islike)
                        <a onclick="videoAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}');" id ="ARTICLE_LIKE_{{$article->id}}" class="btn btn-default social_btn actived">
                            <img id="loveImg" style="margin-bottom: 2px;" height="12" src="../../images/icons/icon_like_on.png" /><span id="LIKE_btn"  class="like_count_button">Liked</span></a>
                        @else
                        <a onclick="videoAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}');" id ="ARTICLE_LIKE_{{$article->id}}" class="btn btn-default social_btn unactive">
                            <img id="loveImg" style="margin-bottom: 2px;" height="12" src="../../images/icons/icon_like_off.png" /><span id="LIKE_btn"  class="like_count_button">Like</span></a>
                        @endif
                        </a>
                        @if($is_collect)
                        <a onclick="videoAction('ARTICLE','{{$article->id}}','COLLECT','{{$article->blogger_id}}');" id="ARTICLE_COLLECT_{{$article->id}}" class="btn btn-default social_btn actived">
                            <img style="margin-bottom: 2px;" height="12" src="../../images/icons/favorites.png" /><span id="COLLECT_btn"  class="like_count_button">已收藏</span></a>
                        @else
                        <a onclick="videoAction('ARTICLE','{{$article->id}}','COLLECT','{{$article->blogger_id}}');" id="ARTICLE_COLLECT_{{$article->id}}" class="btn btn-default social_btn unactive">
                            <img style="margin-bottom: 2px;" height="12" src="../../images/icons/favorites.png" /><span id="COLLECT_btn"  class="like_count_button">收藏</span></a>
                        @endif
                        </a>
                        <a class="btn btn-default social_btn" onclick="share('{{URL::to('front/video/'.$article->id)}}','{{$article->id}}','{{$article->blogger_id}}');">
			    <img style="margin-bottom: 2px;" height="12" src="{{asset('images/icons/icon_fb.png')}}" />
                            <span class="like_count_button">分享</span>
                        </a>

                   </div>

                 </div>

                </div>
            </div>
        </div>
    </div>



        <div class="col-md-12 comments look_container">
	    <div class="container">
        @foreach($comments as $comment)
            <div class="col-md-10 col-md-offset-1 comments2">
		@if($comment_num %2 ==0)               
                    <div class="dialog_left"> 
		@else
                    <div class="dialog_right"> 
		@endif
	@if($comment_num +2 == count($comments))
	<!--下錨點-->
	<a id="finish_comment" />
	@endif
		    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                {{ HTML::image($comment->img_path,"",['class' => "img-circle",'style'=>'width:75px;height:75px;']) }}
                            </a>
                        </div>
                        <div class="media-body" style="    vertical-align: middle;padding-left:20px;">
                            <h6 class="media-heading"><b>{{$comment->commender}}</b></h6>
                            <p style="margin:0px;">{{$comment->comment_content}}</p>
                        </div>
                    </div>
                    </div>

            </div> <!--col-md-10 col-md-offset-1 comments2-->
	        @endforeach
 <!--foreach-->
	<hr class="point" style="top:30px;">
	
            <div class="container">        
		    {{ Form::open(array('action'=>'FrontController@postNewcomment', 'class'=>'form-inline', 'style'=>"z-index:999;margin-top:50px;"))}}
                      <div class="form-group col-xs-2" style="    text-align: right;">
                        <div class="input-group">
			 @if($userinfo == 'visitor')
			     <img class="img-circle" style="width:50px;height:50px; margin-top: -9px;" src = "http://img4.wikia.nocookie.net/__cb20130205144914/glee-new-beginnings/images/f/fd/Unknown.gif">
			 @else
                             {{ HTML::image($userinfo,"",['class' => "img-circle",'style'=>'width:50px;height:50px; margin-top: -9px;']) }}
			 @endif
                        </div>
                      </div>
                      <div class="form-group col-xs-8 text_input">   
                                    {{Form::hidden('article_id',$article->id)}}
                                    {{Form::hidden('blogger_id',$article->blogger_id)}}
                        <input name="comment_content" id = "GoComment" style="width:100%;" type="text" class="form-control" id="exampleInputEmail2" placeholder=" 我也想說說~(*^O^*)/">
                      </div>
                      <div class="form-group col-xs-2 submit">
			@if($usercomment==1)
                        <button onclick="return(chk_login());" type="submit" id = "submit" style="width:100%;"  class="btn btn-default">送出</button>
			@else
                        <button onclick="alert('您已被停止留言的權限！請與系統管理員聯繫！')" type="button" style="width:100%;"  class="btn btn-default">送出</button>
			@endif
                      </div>
		    {{Form::close()}}
            </div>


            <div class="col-md-10 col-md-offset-1 page_title" style="padding-bottom:20px;">
                <center><h2 class="times clear" style="margin:45px auto;">RELATED</h2></center>


                @foreach($other_articles as $other_article)
                    
                        <div class="window col-md-4">
                          <div class="post">
                            <div>
                                <div class="col-xs-2 narrow">
                                <a href="{{URL::to('front/lookerinfo/'.$other_article->blogger_id)}}">
                                     {{ HTML::image($other_article->blogger_img,"",['class' => "media-object img-circle img-responsive"]) }}
                                    <!--img class="media-object img-circle" src="../../images/head.jpg"-->
                                </a>

                                </div>
                                <div class="col-xs-6 narrow">
                                    <div style="margin-left:7px;">
                                        <p class="looker_name media-heading">{{$other_article->blogger_name}}</p>
                                        <p class="post_date">{{date("Y/m/d",strtotime($other_article->created_at))}}</p>
                                    </div>

                                </div>
                                <div class="col-xs-4 narrow">
                                    <a class='like' href="#like" onclick="oneAction('ARTICLE','{{$other_article->id}}','LIKE','{{$other_article->blogger_id}}');">
                                    <img class="like_btn" id = "ARTICLE_{{$other_article->id}}" style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png"/>
                                    <span class="like_count" id="like_{{$other_article->id}}">{{$other_article->likes}}</span>
				   </a>
                                </div>
                            </div>

                                    <div class="text-overflow">
				    <a href="{{URL::to('front/video/'.$other_article->id)}}">
                            		<span class="post_title">{{$other_article->title}}</span>
				    </a>
				    </div>

                                    <a href="{{URL::to('front/video/'.$other_article->id)}}">
                           <div class="screen">
                                <div class="product">
                                    {{ HTML::image($other_article->img_path,"",['class' => "media-object",'style'=>'width:100%;']) }}
				
				     <img class="newest_post" src="{{asset('images/icons/new_bg.png')}}">
                                    <!--img src="../../images/product.jpg"-->
                                </div>
                                <div class="cover">
                                    <img style="margin-top: 45%;"  src="../../images/icons/logo_white.png" />
                                </div>
                            </div>
                                    </a>
                          </div>
                        </div>

                @endforeach
                                <!--endforeach-->



            </div>
	</div>

            
        </div>

         <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=558716530932928";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

 function share(url,article_id,blogger_id) {
   FB.ui({
     method: 'share',
     href: url,
   }, function(response){});
         action = "SHARE";
         location_url = "{{URL::to('front/actions/ARTICLE')}}"+'/'+article_id+'/'+action +'/'+ blogger_id;
        window.location.assign(location_url);
 }

           $(function(){
                $(window).resize(function(){    
                    x = $('.fanpage').innerHeight();
                    y = $('#since').innerHeight();
                    z = (x - y)/2;
                    $('#since').css('margin-top',z);
                });
                $(document).ready(function(){           
                    x = $('.fanpage').innerHeight();
                    y = $('#since').innerHeight();
                    z = (x - y)/2;
                    $('#since').css('margin-top',z);
                });
            });

        $('.screen').mouseenter(function(){
            $(this).children('.cover').fadeIn("fast");
        });

        $('.screen').mouseleave(function(){
            $(this).children('.cover').fadeOut("fast");
        });

	$(function(){
                $(window).resize(function(){    
                    windows_size = window.innerWidth;
                    if (windows_size < 650){
                        $(".text_input").addClass("col-xs-10");
                        $(".text_input").removeClass("col-xs-8");
                        $(".submit").addClass("clear");
                        $(".submit").removeClass("col-xs-2");
                        $(".submit").addClass("col-xs-4 col-xs-offset-8 ");
                    }
                    else{
                        $(".text_input").addClass("col-xs-8");
                        $(".text_input").removeClass("col-xs-10");
                        $(".submit").addClass("col-xs-2");
                        $(".submit").removeClass("clear");
                        $(".submit").removeClass("col-xs-4 col-xs-offset-8");
                        
                    }
                });
                $(document).ready(function(){           
                    windows_size = window.innerWidth;
                    if (windows_size < 650){
                        $(".text_input").addClass("col-xs-10");
                        $(".text_input").removeClass("col-xs-8");
                        $(".submit").addClass("clear");
                        $(".submit").removeClass("col-xs-2");
                        $(".submit").addClass("col-xs-4 col-xs-offset-8 ");
                    }
                    else{
                        $(".text_input").addClass("col-xs-8");
                        $(".text_input").removeClass("col-xs-10");
                        $(".submit").addClass("col-xs-2");
                        $(".submit").removeClass("clear");
                        $(".submit").removeClass("col-xs-4 col-xs-offset-8");
                        
                    }
                    
                });
            });

</script>
<script>
    $(function(){
        $(window).resize(function(){    
            video_width = $('.video').width();
            video_height = video_width * 520 / 400;//依照影片比例調整大小
            $('.video').css('height',video_height);
        });
        $(document).ready(function(){           
            video_width = $('.video').width();
            video_height = video_width * 520 / 400;
            $('.video').css('height',video_height);
        });

        $(".btn_video_buy").click(function(){
            var products;
            if($.cookie("cart") == undefined) {
                products = [];
            } else {
                products = JSON.parse($.cookie("cart"));
            }
            var id = $(this).data("id");
            if($.inArray(id, products) === -1) {
                products.push(id);
                $.cookie("cart", JSON.stringify(products), { expires : 1000 , path:'/'});
                alert("已加入購物車，" + $(this).data("name"));
            } else {
                alert("早就加入購物車，" + $(this).data("name"));
            }
        });
    });

    function uniqueArray(arr)
    {
        var uniqueList = [];
        $.each(arr, function(index, value) {
            if($.inArray(value, uniqueList) === -1) {
                uniqueList.push(value);
            }
        })

        return uniqueList;
    }

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
		console.log("Geolocation is not supported by this browser.");
    }
}

function showPosition(position) {
	console.log("Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude);
	var url = "{{URL::to('front/shopmap/')}}"+'/'+position.coords.latitude+'/'+position.coords.longitude+"?pid={{$productid}}";
	window.location = url;
}
</script>
@stop