@extends('layout.basic_front')

@section("content")
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                    <div class="col-md-3 hidden-xs hidden-sm">
						@for ($i=0 ; $i<4 ; $i++)
							@if (isset($productimg[$i]))
		                        <a href="#"><img class="img-responsive smallpic" src="../../..{{$productimg[$i]->image}}" data-id="{{$i}}"></a>
							@endif
						@endfor
{{--	
                        <a href="#"><img class="img-responsive" src="./images/product-480.jpg"></a>
                        <a href="#"><img class="img-responsive" src="./images/product-480.jpg"></a>
                        <a href="#"><img class="img-responsive" src="./images/product-480.jpg"></a>	--}}
                    </div>
                    <div class="col-md-9 bigpic" style="width:400px;height:300px">
					@if (isset($productimg[0]))
	                	<a href="#"><img class="img-responsive" src="../../..{{$productimg[0]->image}}" style="width:100%"></a>
					@endif
                    </div>
                    </div>
                    <hr/>
					<p>{{$product->description}}</p>
{{--                    <p>對焦輔助燈為綠色。但就小編使用過的數位單眼相機來說，K-S2的對焦輔助燈觸動的時機比我想像中還要來得特別一些。幾乎是要暗到全黑的時候對焦輔助燈才會亮起。小編使用的Nikon通常會在稍暗的地方就會亮了。<br/>
                    不過K-S2有不亮對焦輔助燈的本錢，因為它的對焦檢測範圍最低可到-3EV，而一般來說-2EV是人眼可分辨細節的極限。以Nikon的器材來說，只有最新的全片幅相機D750可以達到-3EV，Canon則是目前新款的全片幅相機都可以達到。而-4EV的寶座依然要歸給Panasonic GH4，或即將發表的G7等等。<br/>
                    不過一般的機種，即使是數位單眼也差不多都在-1或-2EV之間，能夠到-3EV已經是非常了不起了。</p>	--}}
                </div>
                <div class="col-md-6 inline-content">
                    <h1>{{$product->title}}</h1>
                    <p> {{$brands[$product->subheading]->name}} </p>
                    <hr/>
                    <div class="row">
                        <p class="col-md-6 highlight">NT {{$product->selling_price}}</p>   
                        <img src="../../..{{$brands[$product->subheading]->img_path}}" class="col-md-6">
                    </div>
                    <hr/>
                    <form accept-charset="utf-8">
                        <div class="row">
                            <div class="col-md-7">
                                <select class="form-control" id="number">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>
                            <div class="col-md-5">
								{{ Form::select('format', $format, '', array('class'=>'form-control' , 'id'=>'format') )}}	
{{--                                <input class="form-control" type="text" name="some_name" value="">	--}}
                            </div>
                        </div>
                        <input class="btn btn-default btn-block cart" type="submit" value="加入購物車">
                        <a class="btn btn-default btn-block nearshop" href="#">搜尋附近店家</a>
                    </form>
                    <div>
                        <a href="#"><img src="../../../images/icons/insta.jpg"></a>
                        <a href="#"><img src="../../../images/icons/facenbook.jpg"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container inline-content">
            <h2>Related</h2>
            <div class="row">
					@for ($i = 0 ; $i<4 ; $i++)
					@if (isset($articles[$i]))
					<div class="window col-md-3">
						<div class="row">
							<div class="col-xs-3 narrow">
								<a href="#">
								{{ HTML::image($userphoto[$articles[$i]->blogger_id],"",['class'=>"media-object img-circle",'style'=>'width:50px;height:50px']) }}
								{{--	<img class="media-object img-circle img-responsive" src="./images/head.jpg">	--}}
								</a>
							</div>
							<div class="col-xs-6 narrow">
								<h4 class="media-heading">{{$username[$articles[$i]->blogger_id]}}</h4>
                                {{ $articles[$i]->updated_at }}
							</div>
							<div class="col-xs-3 narrow">
								<a href="#"><span class="glyphicon glyphicon-heart"></span>
									@if ( empty($likearticle[$articles[$i]->id]) )  
										0
									@else
										{{ $likearticle[$articles[$i]->id] }}
									@endif
								</a>
							</div>
						</div>
                        <a href="{{ URL::to('front/video/'.$articles[$i]->id) }}"><p>{{$articles[$i]->title}}</p></a>
						<div class="screen" style="height:300px">
                            <a href="{{ URL::to('front/video/'.$articles[$i]->id) }}">
								<div class="product">
									{{ HTML::image($articles[$i]->img_path,"",['class'=>"media-object",'style'=>'width:223px']) }}
								</div>
								<div class="cover">
								</div>
							</a>
						</div>
					</div>
					@endif
					@endfor
            </div>
        </div>
<script src="{{asset('js/jquery.cookie.js')}}" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		var productimg = {{ json_encode($productimg) }};	
		console.log(productimg);	
		$(".cart").click(function(){
			var str = $("#number option:selected").text()+","+$("#format option:selected").text()+",";
			var prev = $.cookie('{{$product->id}}');
			console.log(prev);
			if(prev!=null)
				str += prev;
			console.log(str);
			$.cookie({{$product->id}},str, {path:'/'});
		});

		$(".smallpic").click(function(){
			console.log($(this).data("id"));
			var str = '<a href="#"><img class="img-responsive" src="../../..'+productimg[$(this).data("id")].image+'" sytle="width:400px;height:300px"></a>';
			$(".bigpic").html(str);
		});

		$(".nearshop").click(function(){
			getLocation();
		});

	});

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
		console.log("Geolocation is not supported by this browser.");
//        x.innerHTML = "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;
	window.location = url;
}
</script>

@stop