@extends('layout.basic_front')

@section("content")
<div class="col-md-12 look_container" style="padding-bottom:100px;">    
	<div class="container">
    	<div class="row">
        	<div class="col-md-3 page_title" style="padding-right:40px;">
            	<h2><a href="{{URL::to('front/productlist',$brand->id)}}">{{$brand->name}}</h2><h2 style="margin-top:-10px;">PRODUCT</h2>
           	</div>

    		<div class="col-md-6 text-center">
            	<div style="margin:30px 0px;">
                	<a href="#" >
					    {{ HTML::image($product->img_path,"",['class'=>"img-circle",'style'=>'width:100px;height:100px']) }}
                    </a>
					<h1 style="clear:both;">{{$product->title}}</h1>
				</div>

				<div class="col-md-12 text-center">
						{{$product->description}}
					<br>
                    <div class="main_button col-xs-12 text-center" style="padding-top:50px;">
					<span id="buy-now" class="info_btn text-overflow" style="cursor:pointer" data-id="{{$product->id}}" data-name="{{$product->title}}"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_store.png')}}" /><span id="like" class="like_count_button liked">BUY NOW</span></span>   
                    @if($product->official_url != null)
                    <a class="info_btn text-overflow" href="{{$product->official_url}}"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_website.png')}}" /><span class="like_count_button">WEBSITE</span></a>                           
                    @endif
                    @if($product->shops_id != null)
					<a class="info_btn text-overflow" href="#" id="nearAddress"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_location.png')}}" /><span class="like_count_button">LOCATION</span></a>
                    @endif
					</div>

					<br>
                    <br>
                   	<div class="col-md-12"style="clear:both;">
                   	</div>

                    <div class="col-md-12 social_link" style="margin-top:40px;clear:both;">
                   	</div>

             	</div>

			</div>
		</div>
	</div>
</div>
</div>
<!--
<div class="col-md-12 brand_info_ban">
	<div class="col-md-4 col-md-offset-4 text-center">

		<div class="col-xs-6 left_wave">
			<a href="#posts" class="posts"><p>Posts</p>
			<h2>{{count($articles)}}</h2></a>
		</div>
		<div class="col-xs-6">
			<a href="#followers" class="followers"><p class="followers">Followers</p>
			<h2>{{$brand->follow}}</h2></a>
		</div>
	</div>
</div>
-->
<div class="col-md-12 comments look_container">
			<div class="col-sm-2 col-sm-offset-5 three-button" style="margin-top: 20px;">
				<center>
					<div style="margin:0px 0px 33px -10px;width: 100%px;min-width:160px;">
						<div class="btn-group btn-group-justified" role="group" aria-label="...">
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-looknow actived" id="new">最新</button>
							</div>
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-looknow unactive" id="popular">熱門</button>
							</div>
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-looknow unactive" id="office">官方</button>
							</div>
						</div>
					</div>
				</center>
			</div>
	<div class="col-md-10 col-md-offset-1">

		<div class="col-md-10 col-md-offset-1 page_title" style="padding-bottom:20px;">
			<div class="append">
						@if (isset($articlestime))
						@foreach ($articlestime as $article)
		                    <div class="window col-md-4">
        		                <div class="post">
									<div>	
                        		        <div class="col-xs-2 narrow">
                                			<a href="{{URL::to('front/lookerinfo/'.$article->blogger_id)}}">
												{{ HTML::image($userphoto[$article->blogger_id],"",['class'=>"media-object img-circle",'style'=>'width:35px;height:35px']) }}
                			                </a>
                     	       			</div>

		                                <div class="col-xs-6 narrow">
        		                            <div style="margin-left:7px;">
                		                        <p class="looker_name media-heading">{{$username[$article->blogger_id]}}</p>
                        		                <p class="post_date">
                                					{{date("d M Y",strtotime($article->updated_at))}}
												</p>
                                    		</div>
                                		</div>

                                		<div class="col-xs-4 narrow">
		                                    <a class="like" href="#like" onclick="oneAction('ARTICLE','{{$article->id}}','LIKE','{{$article->blogger_id}}');"  {{--"{{URL::to('article/like/'.$article->id.'/'.$article->blogger_id)}}" --}}>
												<img id="ARTICLE_{{$article->id}}" style="margin-bottom: 2px;" height="16" src="{{asset('images/icons/icon_like_off.png')}}" class="like_btn" />
												<span class="like_count" id="like_{{$article->id}}">
													@if ( empty($likearticle[$article->id]) )  0
													@else {{ $likearticle[$article->id] }}
													@endif
												</span>
											</a>
		                                </div>

        			                </div>	
                        		<a href="{{ URL::to('front/video/'.$article->id) }}">
									<h2 class="post_title">{{$article->title}}</h2>
								</a>
                            	<a href="{{ URL::to('front/video/'.$article->id) }}">
                        			<div class="screen">
										<div class="product">
											{{ HTML::image($article->img_path,"",['class'=>"media-object",'style'=>'width:100%;height:100%']) }}
											<img class="newest_post" src="{{asset('images/icons/new_bg.png')}}">
        		                    	</div>
            		                	<div class="cover">
                		            		<img style="margin-top: 45%;" src="{{asset('images/icons/logo_white.png')}}" />
	                	    	        </div>
									</div>
								</a>
							</div>
                        </div>
					@endforeach
					@endif
				</div>
		</div>
		<div class="col-xs-12 text-center">
		<a href="#more" class="more">
	    	<span>LOOOK</span></a>
    	</div>

		<div id="follower" class="col-md-12">
			<div id="follower2">
				@foreach ($followers as $follower)
					<div class="follower_list text-center">
                    	<a href="#">
							{{ HTML::image($follower->img_path,"",['class'=>"img-circle",'style'=>'width:100%']) }}
{{--                        	<img width="100%" class="img-circle" src="{{asset('$follower->img_path')}}">	--}}
                        </a>
                    </div>
				@endforeach
			</div>
		</div>
	</div>
</div>
<!--end all article-->
        
        <!-- follower -->
        <div class="container hide">
            <div class="row">
		@foreach($followers as $follower)	
                <div class="grid8 align-center">
			{{ HTML::image($follower->img_path,"",['class' => "img-responsive img-circle",'style'=>'width:50px;height:50px']) }}
                        <p>{{$follower->name}}</p>
                </div>
		@endforeach
            </div>
       </div>
        <!-- end follow -->
        <!-- stop contain -->

</div>

<style type="text/css">
.posts, .posts:link, .posts:visited, .posts:hover{
	color: white;
}
.followers, .followers:link, .followers:visited, .followers:hover{
	color: white;
}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
	@if ($articles == null)
		var articles = "";	
	@else
		var articles = {{$articles}};	
	@endif
	var articlestime = {{ json_encode($articlestime) }};
	var articlesoffice = {{ json_encode($articlejoin) }};
	var username = {{ json_encode($username) }};
	var userphoto = {{ json_encode($userphoto) }};
	var From = 6;
	var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
//	console.log(articles);
	if(articles.length < 6){
		$(".more").hide();
	}
	$("#follower").hide();

	$(".more").click(function(){
		console.log(From);
		var contents = "";

		for(i = From ; i<articles.length ; i++)	{
			var lookerurl = "{{URL::to('front/lookerinfo/')}}"+articles[i].blogger_id;
			var likeurl = "{{URL::to('article/like/')}}"+articles[i].id+'/'+articles[i].blogger_id ;
			var articleurl= "{{URL::to('front/video/')}}"+articles[i].id;
			var dates = new Date(articles[i].created_at);
			var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articles[i].id+"','LIKE','"+articles[i].blogger_id+"');";

				contents += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[articles[i].blogger_id]+'" style="width:35px;height:35px"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[articles[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="#like" onclick="'+action+'"><img id="ARTICLE_'+articles[i].id+'" style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count" id="like_'+articles[i].id+'">'+articles[i].likes+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+articles[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen"><div class="product"><img src="../../'+articles[i].img_path+'" style="width:100%"><img class="newest_post" src="../../images/icons/new_bg.png"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

			if(i == From+5)
				break;
		}

		$(".append").append(contents);
		From+=6;
		if(From >= articles.length)
			$(".more").hide();
	});


	$("#new").click(function(){
		From = 0;
		if(articlestime.length < 6)
			$(".more").hide();
		else
			$(".more").show();
		$("#new").attr('class', 'btn btn-looknow actived');
		$("#popular").attr('class', 'btn btn-looknow unactive');
		$("#office").attr('class', 'btn btn-looknow unactive');
		console.log(From);
		var contents = "";

		for(i = From ; i<articlestime.length ; i++)	{
			var lookerurl = "{{URL::to('front/lookerinfo/')}}"+articlestime[i].blogger_id;
			var likeurl = "{{URL::to('article/like/')}}"+articlestime[i].id+'/'+articlestime[i].blogger_id ;
			var articleurl= "{{URL::to('front/video/')}}"+articlestime[i].id;
			var dates = new Date(articlestime[i].created_at);
			var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articlestime[i].id+"','LIKE','"+articlestime[i].blogger_id+"');";

				contents += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[articlestime[i].blogger_id]+'" style="width:35px;height:35px"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[articlestime[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="#like" onclick="'+action+'"><img id="ARTICLE_'+articlestime[i].id+'" style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count" id="like_'+articlestime[i].id+'">'+articlestime[i].likes+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+articlestime[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen"><div class="product"><img src="../../'+articlestime[i].img_path+'" style="width:100%"><img class="newest_post" src="../../images/icons/new_bg.png"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

			if(i == From+5)
				break;
		}
		$(".append").html("");
		$(".append").append(contents);
		From+=6;
		if(From >= articlestime.length)
			$(".more").hide();

	});

	$("#popular").click(function(){
		From = 0;
		if(articles.length < 6)
			$(".more").hide();
		else
			$(".more").show();
		$("#new").attr('class', 'btn btn-looknow unactive');
		$("#popular").attr('class', 'btn btn-looknow actived');
		$("#office").attr('class', 'btn btn-looknow unactive');
		console.log(From);
		var contents = "";

		for(i = From ; i<articles.length ; i++)	{
			var lookerurl = "{{URL::to('front/lookerinfo/')}}"+articles[i].blogger_id;
			var likeurl = "{{URL::to('article/like/')}}"+articles[i].id+'/'+articles[i].blogger_id ;
			var articleurl= "{{URL::to('front/video/')}}"+articles[i].id;
			var dates = new Date(articles[i].created_at);
			var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articles[i].id+"','LIKE','"+articles[i].blogger_id+"');";

				contents += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[articles[i].blogger_id]+'" style="width:35px;height:35px"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[articles[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="#like" onclick="'+action+'"><img id="ARTICLE_'+articles[i].id+'" style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count" id="like_'+articles[i].id+'">'+articles[i].likes+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+articles[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen"><div class="product"><img src="../../'+articles[i].img_path+'" style="width:100%"><img class="newest_post" src="../../images/icons/new_bg.png"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

			if(i == From+5)
				break;
		}

		$(".append").html("");
		$(".append").append(contents);
		From+=6;
		if(From >= articles.length)
			$(".more").hide();
	});

	$("#office").click(function(){
		From = 0;
		if(articlesoffice.length < 6)
			$(".more").hide();
		else
			$(".more").show();
		$("#new").attr('class', 'btn btn-looknow unactive');
		$("#popular").attr('class', 'btn btn-looknow unactive');
		$("#office").attr('class', 'btn btn-looknow actived');
		console.log(From);
		var contents = "";

		for(i = From ; i<articlesoffice.length ; i++)	{
			var lookerurl = "{{URL::to('front/lookerinfo/')}}"+articlesoffice[i].blogger_id;
			var likeurl = "{{URL::to('article/like/')}}"+articlesoffice[i].id+'/'+articlesoffice[i].blogger_id ;
			var articleurl= "{{URL::to('front/video/')}}"+articlesoffice[i].id;
			var dates = new Date(articlesoffice[i].created_at);
			var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articlesoffice[i].id+"','LIKE','"+articlesoffice[i].blogger_id+"');";

				contents += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'"><img class="media-object img-circle" src="../../'+userphoto[articlesoffice[i].blogger_id]+'" style="width:35px;height:35px"></a></div><div class="col-xs-6 narrow"><div style="margin-left:7px;"><p class="looker_name media-heading">'+username[articlesoffice[i].blogger_id]+'</p><p class="post_date">'+datess+'</p></div></div><div class="col-xs-4 narrow"><a class="like" href="#like" onclick="'+action+'"><img id="ARTICLE_'+articlesoffice[i].id+'" style="margin-bottom: 2px;" height="16" src="../../images/icons/icon_like_off.png" /><span class="like_count" id="like_'+articlesoffice[i].id+'">'+articlesoffice[i].likes+'</span></a></div></div><a href="'+articleurl+'"><h2 class="post_title">'+articlesoffice[i].title+'</h2></a><a href="'+articleurl+'"><div class="screen"><div class="product"><img src="../../'+articlesoffice[i].img_path+'" style="width:100%"><img class="newest_post" src="../../images/icons/new_bg.png"></div><div class="cover"><img style="margin-top: 45%;" src="../../images/icons/logo_white.png" /></div></div></a></div></div>';

			if(i == From+5)
				break;
		}

		$(".append").html("");
		$(".append").append(contents);
		From+=6;
		if(From >= articles.length)
			$(".more").hide();
	});

	$("#nearAddress").click(function(){
		getLocation();
	});


	$(".posts").click(function(){
		$("#follower").fadeOut();
		$(".append").fadeIn();
		$(".three-button").fadeIn();
		if(articles.length > 6)
			$(".more").show();
	});

	$(".followers").click(function(){
		$("#follower").fadeIn();
		$("#follower").show();
		$(".append").fadeOut();
		$(".three-button").fadeOut();
		$(".more").hide();
	});

    $("#buy-now").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 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);
//    x.innerHTML = "Latitude: " + position.coords.latitude + 
  //  "<br>Longitude: " + position.coords.longitude;	
	var url = "{{URL::to('front/shopmap/')}}"+'/'+position.coords.latitude+'/'+position.coords.longitude+"?pid={{$product->id}}";
	window.location = url;
}

</script>

@stop