@extends('layouts.master')

@section('title')
	{{ str_replace('-',' ',title_case($page)) }}
@endsection

@php
	$share_url = Request::url();
	$share_title = str_replace('-',' ',title_case($page));
	$share_desc = strip_tags($data->product_content);
	$share_img = asset($storage_url.'img/products/'.$data->product_code.'/'.$data->product_image);
@endphp

@section('meta')
	<meta name="title" content="{{$share_title}}">
	<meta name="description" content="{{$share_desc}}">
@endsection

@section('sharing-meta')
{{-- FACEBOOK --}}
<meta property="og:url" content="{{$share_url}}" />
<meta property="og:type" content="place" />
<meta property="og:title" content="{{$share_title}}" />
<meta property="og:description" content="{{ $share_desc }}" />
<meta property="og:image" content="{{$share_img}}" />

{{-- TWITTER --}}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="{{$share_url}}">
<meta name="twitter:title" content="{{$share_title}}">
<meta name="twitter:description" content="{{ $share_desc }}">
<meta name="twitter:image:src" content="{{$share_img}}">

{{--GOOGLE PLUS --}}
<meta itemprop="name" content="{{ $share_title }}">
<meta itemprop="description" content="{{ $share_desc }}">
<meta itemprop="image" content="{{$share_img}}">

@endsection

@section('content')
  <main id="mainContent" class="container-fluid">
    <div class="col-xs-12 col-md-12 col-md-offset-0 col-lg-10 col-lg-offset-1">
			
		<section class="row">
			<aside class="col-xs-12">
				<ol class="breadcrumb">
					<li><a href="{{route('home')}}"><i class="fa fa-home" aria-hidden="true"></i></a></li>
					<li><a href="{{route('categories')}}">{{ ucwords($page_product) }}</a></li>
					<li><a href="{{route('category',['id'=>$data->product_category,'category'=>$category])}}">{{ ucwords(str_replace('-',' ',$category)) }}</a></li>
					@php
						$get = $data->locales()->where('locale',config('app.locale'))->first();
					@endphp
					<li class="active">{{ucwords( isset($get)? $get->product_name : $data->product_name )}}</li>
				</ol>
			</aside>
		</section>

		<section class="row product-list">

			<figure class="col-xs-12 col-sm-4">
				<div class="row">
					@php
						$image = $data->details()->first();
					@endphp
					<div class="col-xs-3 products-thumbs js-img-zoom-wrapper">
						<ul class="thumbnails">
							@foreach ($data_detail as $key => $val)
								<li class="{{ $loop->first ? 'active' : '' }}">
									<img src="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.$val->detail_image) }}" alt="{{ $data->alt or '' }}"
										data-zoom="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.($val->detail_image_big ? $val->detail_image_big : $val->detail_image)) }}"
										class="img-responsive thumb js-zoom-thumb">
								</li>
							@endforeach
						</ul>
					</div>

	          		<div class="col-xs-9">
	            		<img
	              			src="{{ asset($storage_url.'img/products/'.$image->detail_code.'/'.$image->detail_image) }}"
						data-zoom="{{ asset($storage_url.'img/products/'.$image->detail_code.'/'.($image->detail_image_big ? $image->detail_image_big : $image->detail_image)) }}"
						alt="{{ $data->alt or '' }}"
						class="thumb-preview js-img-zoom-trigger">
					</div>
    	    	</div>
					{{-- <div class="img-zoom-wrapper">
						@component('components.image-zoom', [
							'src' => asset($storage_url.'img/products/'.$image->detail_code.'/'.$image->detail_image),
							'srcZoom' => asset($storage_url.'img/products/'.$image->detail_code.'/'.($image->detail_image_big ? $image->detail_image_big : $image->detail_image))
						])
						@endcomponent

						<div class="zoom-indicators">
							@foreach($data_detail as $key => $val)
							<div class="col-xs-4{{ $loop->first?' active':'' }} indicator js-img-zoom-select">
								<div class="row">
									<img class="img img-responsive" style="height: 80px"
										src="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.$val->detail_image) }}"
										data-zoom="{{ asset($storage_url.'img/products/'.$val->detail_code.'/'.($val->detail_image_big ? $val->detail_image_big : $val->detail_image)) }}"
										/>
								</div>
							</div>
							@endforeach
						</div>

					</div> --}}
				</figure>

				<article class="col-xs-12 col-sm-8">
					<div class="card product-detail js-img-zoom-preview">
						<header class="row">
							<span class="col-xs-12 col-sm-6">
								@php
									$get = $data->locales()->where('locale',config('app.locale'))->first();
								@endphp
								<h2>{{ ucfirst( isset($get)? $get->product_name : $data->product_name ) }}</h2>
								@php
									$currency = explode('|',$data->product_currency);
								@endphp
								@php
									if( $masterCurrency == "USD" ){
										$price = number_format($data->product_price,2,".",",");
									}elseif( $masterCurrency == "EUR" ){
										$price = number_format($data->product_price,2,",",".");
									}else{
										$price = number_format($data->product_price,0,",",".");
									}
								@endphp
								<p class="product-price"><span id="currency">{{$masterCurrency}}</span> <span id="price">{{ $price }}</span></p>
							</span>
							<span class="col-xs-12 col-sm-6 top-share-button">
								<button class="btn btn-default" data-toggle="modal" data-target="#shareLinks">
									<i class="fa fa-share-alt-square" aria-hidden="true"></i> @lang('frontend.share')
								</button>
							</span>
						</header>
						<div class="product-spec">
							{!! isset($get)? $get->product_content : $data->product_content !!}
						</div>
					</div>

					<aside class="share">
						

						<div class="modal fade" id="addToCart" role="dialog">
							<div class="modal-dialog" role="document">
    						<div class="modal-content">
									<header class="modal-header text-center">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h2><i class="fa fa-cart-plus" aria-hidden="true"></i> @lang('frontend.add_to_cart')</h2>
									</header>
									<div class="modal-body row">
										<div class="col-xs-12 col-sm-5">
											@foreach($data_detail as $key => $val)
												<img alt="" class="img img-responsive" src="{{asset($storage_url.'img/products/'.$val->detail_code.'/'.$val->detail_image)}}" style="border:5px solid #{{$btnColor[0]}}"/>
												@php
													break;
												@endphp
											@endforeach
										</div>
										<div class="col-xs-12 col-sm-7">
											<h3 class="text-capitalize">{{ $get->product_name or $data->product_name }}</h3>
											@php
												$currency = explode('|',$data->product_currency);
											@endphp
											@php
												if( $masterCurrency == "USD" ){
													$price = number_format($data->product_price,2,".",",");
												}elseif( $masterCurrency == "EUR" ){
													$price = number_format($data->product_price,2,",",".");
												}else{
													$price = number_format($data->product_price,0,",",".");
												}
											@endphp
											<p class="product-price lead"><span>{{$masterCurrency}}</span> <span>{{ $price }}</span></p>
											<div class="form-group row">
												<div class="col-xs-12 col-sm-2">
													{!! Form::label('options',__('frontend.notes'),['class'=>'control-label','style'=>'padding-top:5px']) !!}
												</div>
												<div class="col-xs-12 col-sm-10">
													{!! Form::textarea('options','',['class'=>'form-control','rows'=>2]) !!}
												</div>
											</div>

											<div class="form-group row">
												<div class="col-xs-12 col-sm-2">
													{!! Form::label('qty',__('frontend.qty'),['class'=>'control-label','style'=>'padding-top:5px']) !!}
												</div>
												<div class="col-xs-12 col-sm-5">
													{!! Form::number('qty',1,['class'=>'form-control','min'=>1, 'max' => $data->product_stock]) !!}
												</div>
												<div class="col-xs-12 col-sm-5 text-center">
													<label for="remain" style="margin: 0;">Current Stock :</label> <br>
													<span name="remain">{{ $data->product_stock or 0 }}</span>
													{{-- <input type="number" class="form-control" name="remain" value="{{ $data->product_stock or 0 }}" readonly> --}}
												</div>
											</div>

											<div class="form-group row">
												<div class="col-xs-12 col-sm-2">
													{!! Form::label('total',__('frontend.total'),['class'=>'control-label']) !!}
												</div>
												<div class="col-xs-12 col-sm-10">
													<p class="lead">
														@php
															if( $masterCurrency == "USD" ){
																$price = number_format($data->product_price,2,".",",");
															}elseif( $masterCurrency == "EUR" ){
																$price = number_format($data->product_price,2,",",".");
															}else{
																$price = number_format($data->product_price,0,",",".");
															}
														@endphp
														<span>{{$masterCurrency}}</span> <strong><span id="cal_total">{{ $price }}</span></strong>
													</p>
												</div>
											</div>

											<div class="form-group row">
												<div class="col-xs-12 col-sm-12">
													<label class="control-label">@lang('frontend.average-production-time') : {{ $data->production_time or 0 }} @lang('frontend.'.($data->production_time > 1 ? 'days' : 'day'))</label>
												</div>
											</div>

										</div>
										<div class="col-xs-12">
											<br/>
											<div id="statusItem" class=""></div>
										</div>
									</div>
									<div class="panel-footer text-center">
										<a id="addtocart" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> @lang('frontend.add_to_cart')</a>
									</div>
								</div>
							</div>
						</div>

						<button id="shareButton" class="btn btn-default" data-toggle="modal" data-target="#shareLinks">
							<i class="fa fa-share-alt-square" aria-hidden="true"></i> @lang('frontend.share')
						</button>
						<div class="modal fade" id="shareLinks" role="dialog">
							<div class="modal-dialog" role="document">
    						<div class="modal-content">
									<header class="modal-header text-center">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										<h3>@lang('frontend.share')</h3>
									</header>
									<div class="modal-body text-center">
										<div class="addthis_inline_share_toolbox"></div>
									</div>
								</div>
							</div>
						</div>
					</aside>
				</article>


			</section>
			<section class="row m-md-15 product-list item-single">
				<header class="col-xs-12">
					<h2>
						@lang('frontend.you_may_also_like')
					</h3>
					<br />
				</header>

				<div>
					@foreach ($other_product as $key => $val)
						@php
							if($key == 4):
								break;
							endif;
						@endphp
						@php
							$get = $val->locales()->where('locale',config('app.locale'))->first();
						@endphp
						<article class="col-xs-12 col-sm-6 col-md-3 p-l-5 p-r-5">
							<div class="card">
								<figure class="card-img">
									<img alt="" src="{{asset($storage_url.'img/products/'.$val->product_code.'/'.$val->product_image)}}"/>
								</figure>
								<div class="text-center card-content">
									<header class="card-header">
											<h2 class="text-capitalize h-58">{{ $get->product_name or $val->product_name }}</h2>
											<p class="product-price">@currency($val->product_price)</p>
									</header>
									<div class="card-footer">
										@php
											$name = str_slug($val->product_name ? $val->product_name : 'no-name');
										@endphp
										<a href="{{ route('productDetail',['category'=>$category,'id'=>$val->product_code,'slug'=>$name]) }}" class="btn btn-default">@lang('frontend.detail')</a>
									</div>
								</div>
							</div>
						</article>
					@endforeach
				</div>
			</section>
		</div>
  </main>

@endsection

@section('script')
	<script>
		function resize_card(){
			var $highest = 0;
			$(".product-list.item-single .card").each(function(){
				var $h = $($(this)).height();
				if($h > $highest){
					$highest = $h;
				}
			});

			$(".product-list.item-single .card").each(function(){
				$($(this)).css("height",$highest+"px");
			});
		};

		$(document).ready(function(){
			resize_card();
		});

		$(window).resize(function(){
			resize_card();
		});

		$(document).ready(function(){
			var $price = {{ $data->product_price }};

			$("input[name='qty']").change(function() {
				var $qty = $(this).val();
				var $remain = {{ $data->product_stock or 0 }}
				if ($qty > $remain) {
					$("input[name='qty']").val($remain)
					$qty = $remain
				}
				$("span[name='remain']").text($remain - $qty)

				var $total = $qty*$price;

				$.ajax({
			        type: 'post',
			        url: '{{ route('formatNumber') }}',
			        data: {
			            '_token': '{{ csrf_token() }}',
			            'total': $total,
			        },
			        success: function(data) {
								var obj = jQuery.parseJSON(data);
								$("#cal_total").html(obj.formatted_price);
			        },
			    });
			});

			$('#addToCart').on('shown.bs.modal', function () {
				var $qty = $("input[name='qty']").val();
				var $total = $qty*$price;
				$.ajax({
			        type: 'post',
			        url: '{{ route('formatNumber') }}',
			        data: {
			            '_token': '{{ csrf_token() }}',
			            'total': $total,
			        },
			        success: function(data) {
								var obj = jQuery.parseJSON(data);
								$("#cal_total").html(obj.formatted_price);
			        },
			    });
	    });

			$('#addToCart').on('hidden.bs.modal', function () {
				$("#statusItem").removeClass('alert alert-info').html('');
	    });

			$("#addtocart").click(function(){
				$("#statusItem").addClass('alert alert-info')
				.html('<i class="fa fa-spinner fa-spin fa-lg" aria-hidden="true"></i> Adding item');

				$.ajax({
			        type: 'post',
			        url: '{{ route('addToCart') }}',
			        data: {
			            '_token': '{{ csrf_token() }}',
			            'id': '{{ $data->product_code }}',
									'name': '{{ $data->product_name }}',
									'qty': $("input[name='qty']").val(),
									'price': '{{ $data->product_price }}',
									'options': {
										notes: $("textarea[name='options']").val(),
										product: {{ $data->id }}
									}
			        },
			        success: function(data) {
								$.get( '{{ route('updateBubble') }}', function( data ) {
					        if(data == 0){
					          $("#show_cart span.label").hide();
					        }else{
					          $("#show_cart span.label").show().html(data);
					        }
					      });
								$("#statusItem").removeClass('alert alert-info').addClass('alert alert-success')
								.html('<i class="fa fa-check fa-lg" aria-hidden="true"></i> Item added');
			        },
			    });
			});
		});
	</script>
@endsection
