@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;">
                <a href="{{URL::to('front/brandlist/1')}}">
                    <h2>BRAND</h2><h2 style="margin-top:-10px;">INFO</h2>
                </a>
           	</div>

    		<div class="col-md-6 text-center">
            	<div style="margin:30px 0px;">
                	<a href="#" >
					    {{ HTML::image($brand->img_path,"",['class'=>"img-circle",'style'=>'width:100px;height:100px']) }}
                    </a>
					<h1 style="clear:both;">{{$brand->name}}</h1>
					<a class="" style="margin-bottom:15px;" href="#">
						<img id="ARTICLE_{{$brand->id}}" style="margin-bottom: 2px;" height="16" src="{{asset('images/icons/icon_like_on.png')}}" onload="islike({{$brand->id}})")/>
							<span class="like_count">{{$likes}}</span>
					</a>
				</div>

				<div class="col-md-12 text-center">
						{{$brand->description}}
					<br>
                    <div class="main_button col-xs-12 text-center" style="padding-top:50px;">
                    @if($brand->buynow != null)
                    <a class="info_btn text-overflow" href="{{$brand->buynow}}"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_store.png')}}" /><span id="like" class="like_count_button liked">INFO</span></a>   
                    @endif
                    @if($brand->url != null)
					<a class="info_btn text-overflow" href="{{$brand->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($brand->location != null)
					<a class="info_btn text-overflow" href="#" id="address"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_location.png')}}" /><span class="like_count_button">LOCATION</span></a>
                    @endif
					</div>

{{--
					<div id="buynow" class="col-xs-4" style="margin-top:40px;">
                        <a class="info_btn" href="{{$brand->buynow}}"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_store.png')}}" /><span id="like" class="like_count_button liked">SHOP</span></a>   
                       </div>
                       <div id="website" class="col-xs-4" style="margin-top:40px;">
                        <a class="info_btn" href="{{$brand->url}}"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_website.png')}}" /><span class="like_count_button">WEBSITE</span></a>                           
                       </div>
                       <div id="location" class="col-xs-4" style="margin-top:40px;">
                        <a id="address" class="info_btn" href="#"><img style="margin-bottom: 2px;" height="34" src="{{asset('images/icons/icon_location.png')}}" /><span class="like_count_button">LOCATION</span></a>
                       </div>	
--}}
					<br>
                    <br>
                   	<div class="col-md-12"style="clear:both;">
                        @if($isfollow)
                            <a href="{{URL::to('front/actions/BRAND/'.$brand->id.'/FOLLOW/'.$brand->id)}}" class="btn btn-default social_btn unactive" style="margin-top:40px;clear:both;">
                                Followed
                        @else
                            <a onclick="return(chk_login());" href="{{URL::to('front/actions/BRAND/'.$brand->id.'/FOLLOW/'.$brand->id)}}" class="btn btn-default social_btn unactive" style="margin-top:40px;clear:both;">
                                +Follow
                        @endif
                            </a>
                   	</div>

                    <div class="col-md-12 social_link" style="margin-top:40px;clear:both;">
                        @if($brand->facebook_url != null)
                        <a href="{{$brand->facebook_url}}"><img src="{{asset('images/icons/icon_fb_02.png')}}"></a>
                        @endif
                        @if($brand->instagram_url != null)
						<a href="{{$brand->instagram_url}}"><img src="{{asset('images/icons/icon_instagram.png')}}"></a>
                        @endif
                        @if($brand->instagram_url != null)
						<a href="{{$brand->youtube}}"><img src="{{asset('images/icons/icon_youtube.png')}}"></a>
                        @endif
                   	</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 img-responsive",'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("Y/m/d",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>	
				<div class="text-overflow">
                        		<a href="{{ URL::to('front/video/'.$article->id) }}">
									<span class="post_title">{{$article->title}}</span>
								</a>
				</div>
                            	<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%;']) }}
											<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>
</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 content = "";

		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 base_url = "{{ URL::to('/')}}";
			var dates = new Date(articles[i].created_at);
			var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
//			var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articles[i].id+"','LIKE','"+articles[i].blogger_id+"');";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+userphoto[articles[i].blogger_id]+' style="width:35px;height:35x"></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">';
                content += '<a class="like" onclick="oneAction(\'ARTICLE\',\''+ articles[i].id +'\',\'LIKE\',\''+ articles[i].blogger_id +'\');">';
                content += '<img class="like_btn" id="ARTICLE_'+ articles[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png />';
                content += '<span id="like_'+articles[i].id+'"class="like_count">'+articles[i].likes+'</span>';
                content += '</a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+articles[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(articles[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

//				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(content);
		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 content = "";

		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 base_url = "{{ URL::to('/')}}";
			var dates = new Date(articlestime[i].created_at);
			var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
		//	var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articlestime[i].id+"','LIKE','"+articlestime[i].blogger_id+"');";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+userphoto[articlestime[i].blogger_id]+' style="width:35px;height:35x"></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">';
                content += '<a class="like" onclick="oneAction(\'ARTICLE\',\''+ articlestime[i].id +'\',\'LIKE\',\''+ articlestime[i].blogger_id +'\');">';
                content += '<img class="like_btn" id="ARTICLE_'+ articlestime[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png />';
                content += '<span id="like_'+articlestime[i].id+'"class="like_count">'+articlestime[i].likes+'</span>';
                content += '</a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+articlestime[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(articlestime[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

			if(i == From+5)
				break;
		}
		$(".append").html("");
		$(".append").append(content);
		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 content = "";

		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 base_url = "{{ URL::to('/')}}";
			var dates = new Date(articles[i].created_at);
			var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
	//		var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
			var action = "oneAction('ARTICLE','"+articles[i].id+"','LIKE','"+articles[i].blogger_id+"');";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+userphoto[articles[i].blogger_id]+' style="width:35px;height:35x"></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">';
                content += '<a class="like" onclick="oneAction(\'ARTICLE\',\''+ articles[i].id +'\',\'LIKE\',\''+ articles[i].blogger_id +'\');">';
                content += '<img class="like_btn" id="ARTICLE_'+ articles[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png />';
                content += '<span id="like_'+articles[i].id+'"class="like_count">'+articles[i].likes+'</span>';
                content += '</a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+articles[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(articles[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';

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

		$(".append").html("");
		$(".append").append(content);
		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');
        
        var content = "";
        var count = 0;
        // by time
        articlesoffice = articlestime;

        for(i = From ; i<articlesoffice.length ; i++)	{
            if(articlesoffice[i].blogger_name == "{{$brand->name}}") {
                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 base_url = "{{ URL::to('/')}}";
                var dates = new Date(articlesoffice[i].created_at);
                var datess = dates.getFullYear()+'/'+ (dates.getMonth()+1) + '/' + dates.getDate();
            //	var datess = dates.getDate()+' '+monthNames[dates.getMonth()]+' '+dates.getFullYear();
                var action = "oneAction('ARTICLE','"+articlesoffice[i].id+"','LIKE','"+articlesoffice[i].blogger_id+"');";

                content += '<div class="window col-md-4"><div class="post"><div><div class="col-xs-2 narrow"><a href="'+lookerurl+'">';
                content += '<img class="media-object img-circle" src='+base_url+userphoto[articlesoffice[i].blogger_id]+' style="width:35px;height:35x"></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">';
                content += '<a class="like" onclick="oneAction(\'ARTICLE\',\''+ articlesoffice[i].id +'\',\'LIKE\',\''+ articlesoffice[i].blogger_id +'\');">';
                content += '<img class="like_btn" id="ARTICLE_'+ articlesoffice[i].id +'" style="margin-bottom: 2px;" height="16" src=' + base_url+ '/images/icons/icon_like_off.png />';
                content += '<span id="like_'+articlesoffice[i].id+'"class="like_count">'+articlesoffice[i].likes+'</span>';
                content += '</a></div></div><div class="text-overflow"><a href="'+articleurl+'"><span class="post_title">'+articlesoffice[i].title+'</span></a></div><a href="'+articleurl+'"><div class="screen"><div class="product">';
                var path = base_url.concat(articlesoffice[i].img_path);
                content += '<img src='+ path +' style="width:100%">';
                content += '</div><div class="cover"><img style="margin-top: 45%;" src="' +base_url+ '/images/icons/logo_white.png" /></div></div></a></div></div>';
                count++;
            }
			if(count == From+5)
				break;
		}

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

	var address = "{{$brand->location}}";
	var geocoder = new google.maps.Geocoder();	
	$("#address").click(function(){
		console.log(address);
		geocoder.geocode( { 'address': address}, function(results, status) {

		if (status == google.maps.GeocoderStatus.OK) {
		    var latitude = results[0].geometry.location.lat();
		    var longitude = results[0].geometry.location.lng();
			console.log(latitude+" "+longitude);
			var url = "{{URL::to('front/shopmap')}}"+"/"+latitude+"/"+longitude+"?near={{$brand->id}}";
			window.location = url;
		}

		}); 
	});

	$(".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();
	});

});
</script>

@stop