@extends('user.layouts.app')
@section('metapart')
<meta property="og:url" content="{{ \Illuminate\Support\Facades\URL::full() }}">
<meta property="og:title" content="{{$sitesetting->meta_tag}}">
<meta property="og:description" content="{{ $product->name }} | {{$sitesetting->meta_tag}}">
<meta property="og:type" content="Website">
<meta property="og:image" content="{{$product->image_url}}">
<meta property="og:image:secure_url" content="{{$product->image_url}}">	
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">

@endsection

@section('pagetitle')
<title>{{ $product->name }} | {{ $sitesetting->comp_name }}</title>
@endsection

@section('body')
<section class="breadcrumb-area" style="background-image: url({{ url('public/assets/user') }}/images/breadcrumb-bg.jpg);">
	<div class="container-fluid text-center">
		<h1>{{ $product->name }}</h1>
		<div class="breadcrumb-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="left pull-left">
                            <ul>
                                <li><a href="{{ url('/') }}">Home</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
								@if(!empty($categoryfirst))
                                <li><a href="{{ url('/categorylist'.'/'.$categoryfirst->slug) }}">{{ $categoryfirst->name }}</a></li>
								@else
								<li></li>
								@endif
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li>{{ $product->name }}</li>
                            </ul>    
                        </div>   
                    </div>
                </div>
            </div>
		</div>
	</div>
</section>
<section id="blog-area" class="blog-single-area">
    <div class="container">
        <div class="row">
			<div class="col-md-5 col-xs-12">
                <div class="blog-post">
                    <div class="single-blog-item">
                        <div class="app-figure" id="zoom-fig">
							<a id="Zoom-1" data-options="zoomPosition: inner;" class="MagicZoom" title="{{ $product->name }}"
								href="{{ $product->image_url }}">
								<img src="{{ $product->image_url }}" srcset="{{ $product->image_url }}"alt="{{ $product->name }}"/>
							</a>
							<div class="selectors product-carousel">
								<div class="single-slide-item">
									<a data-zoom-id="Zoom-1" href="{{ $product->image_url }}" data-image="{{ $product->image_url }}">
										<img srcset="{{ $product->image_url }}" src="{{ $product->image_url }}"/>
									</a>
								</div>
								@foreach($subimages as $singlesubimage)
								<div class="single-slide-item">
									<a data-zoom-id="Zoom-1" href="{{ $singlesubimage->image_url }}" data-image="{{ $singlesubimage->image_url }}" >
										<img srcset="{{ $singlesubimage->image_url }}" src="{{ $singlesubimage->image_url }}"/>
									</a>
								</div>
								@endforeach
							</div>
						</div>
                    </div>
                </div>
            </div>
			<div class="col-md-7 col-xs-12">
                <div class="blog-post">
                    <div class="product-block bg-gray p-a30 p-b15 m-b30">
						<div class="row">
							<div class="col-md-12">
								<div class="productname">
									<h3 class="blog-title">{{ $product->name }}</h3>
								</div>
								<div class="table-responsive">
									<table class="table table-striped">
										<tbody>
											<tr>
												<th scope="row">SIZE</th>
												<td>{{ $product->size }}</td>
											</tr>
											
											<tr>
												<th scope="row">THICKNESS</th>
												<td>{{ $product->thickness }}</td>
											</tr>
											@if(!empty($product->lookandfeel))
											<tr>
												<th scope="row">LOOK & FEEL</th>
												<td>{{ $product->lookandfeel }}</td>
											</tr>
											@endif
											<tr>
												<th scope="row">FINISH</th>
												<td>{{ $product->finish }}</td>
											</tr>
											@if(!empty($product->colour))
											<tr>
												<th scope="row">COLOUR</th>
												<td>{{ $product->colour }}</td>
											</tr>
											@endif
										</tbody>
									</table>
								</div>
								@if(!empty($product->pdf) || !empty($product->link))
								<div class="brochure_wp">
									<div class="titel_bro">
										<h4>Product Brochure</h4>
									</div>
									<div class="titel_brobtn">
										<ul>
										@if(!empty($product->pdf))
											<li class="button"><a class="thm-btn bg-cl-1" href="{{ Storage::url($product->pdf) }}" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</a></li>
										@endif
										@if(!empty($product->link))
											<li class="button"><a class="thm-btn bg-cl-1" target="_blank" href="{{$product->link}}"><i class="fa fa-eye" aria-hidden="true"></i> View</a></li>
										@endif
										</ul>
									</div>
								</div>
								@endif
							</div>
						</div>
					</div>
                </div>
            </div>
            <div class="col-md-12 col-xs-12">
                <div class="blog-post producttexts">
                    <div class="single-blog-item">
                        <div class="text-holder">
                            <div class="text">
                                <p class="mar-bottom">{!! $product->description !!}</p>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('js')


@endsection