@extends('layout.basic_front')

@section("content")
<div class="col-md-12 look_container" style="z-index: 2;    float: left;">    
	<div class="col-md-10 col-md-offset-1">
		<div class="row">

			<div class="col-sm-5 page_title" style="padding-right:40px;clear:both;">
				<a href="{{URL::to('front')}}"><h2>BRANDS</h2><h2 style="margin-top:-10px;">LOOKNOW</h2></a>
			</div>
		</div>

		<div class="col-md-12">
			<div id="brands" class="col-md-10 col-md-offset-1">
				<div id="brands2" class="clean">
				@foreach ($brandsnew as $brand)
					<div class="brand_list text-center">
						<a href="{{URL::to('front/brandinfo/'.$brand->id)}}">
							{{ HTML::image($brand->img_path,"",['class'=>"img-circle",'style'=>'width:85px;height:85px']) }}
							<p>{{$brand->name}}</p>
						</a>
					</div>
				@endforeach
				</div> 
			</div>
		</div>


{{--        <div class="container" id="clean">
            <div class="row">
			@foreach ($brandsnew as $brand)
				<a href="{{URL::to('front/brandinfo/'.$brand->id)}}">
                <div class="grid8 align-center">
						{{ HTML::image($brand->img_path,"",['class'=>"media-object img-circle",'style'=>'width:100px;height:100px']) }}
                        <p>{{$brand->name}}</p>
                </div></a>
			@endforeach
            </div>
        </div>	--}}

        <div class="container inline-content hide">
            <a href="#" class="btn btn-default" id="more">MORE</a>
        </div>
	</div>
</div>

<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
var From = 16;
var popular = 0;

/*	$("#more").click(function(){
		$.get('../appendbrand/1', {from:From,popular:popular}, function(data){
//			console.log(data);
			var content = "";

			for(i=0 ; i<data.length ; i++){
			var url = "{{URL::to('front/brandinfo/')}}"+'/'+data[i].id;
			content += '<a href="'+url+'"><div class="grid8 align-center"> <img style="width:100px;height:100px" src="../../..'+data[i].img_path+'" class="img-responsive img-circle"> <p>'+data[i].name+'</p> </div></a>';
			}
			var str = '<div class="row">'+content+'</div>';
			$(".clean").append(str);
		});
		From += 16;
	});
*/
	$("#new").click(function(){
		popular = 0;
		From = 16;
		var articlesnew = {{json_encode($brandsnew)}};
		var content = "";

		for(i=0 ; i<articlesnew.length ; i++){
			var url = "{{URL::to('front/brandinfo/')}}"+'/'+articlesnew[i].id;

			content += '<div class="brand_list text-center"><a href="'+url+'"><img style="width:85px;height:85px" src="../..'+articlesnew[i].img_path+'" class="img-circle"> <p>'+articlesnew[i].name+'</p></a></div>';
		}
		
		$(".clean").html("");
		$(".clean").html(content);

//		$("#new").attr('class', "btn btn-looknow actived");
//		$("#popular").attr('class', "btn btn-looknow unactive");
	});

	$("#popular").click(function(){
		popular = 1;
		From = 16;
		var articlesnew = {{json_encode($brandspopular)}};
		var content = "";
//		console.log(articlesnew);

		for(i=0 ; i<articlesnew.length ; i++){
			var url = "{{URL::to('front/brandinfo/')}}"+'/'+articlesnew[i].id;

			content += '<div class="brand_list text-center"><a href="'+url+'"><img style="width:85px;height:85px" src="../..'+articlesnew[i].img_path+'" class="img-circle"> <p>'+articlesnew[i].name+'</p></a></div>';
		}

		$(".clean").html("");
		$(".clean").html(content);

//		$("#new").attr('class', "btn btn-looknow unactive");
//		$("#popular").attr('class', "btn btn-looknow actived");
	});
});
</script>

@stop