@extends('layouts.frontend.app')

@section('content')


<link rel="stylesheet" type="text/css" href="{{asset('/frontend/zoom/xzoom.css')}}" media="all" />
 
 <link type="text/css" rel="stylesheet" media="all" href="{{asset('/frontend/zoom/jquery.fancybox.css')}}" />
  <link type="text/css" rel="stylesheet" media="all" href="{{asset('/frontend/zoom/magnific-popup.css')}}" />
<style>
.ps-page--product {
    background: #fafafa;
    padding-bottom: 30px;
}
#fancy {
    background: white;
    padding: 10px;
}
.xzoom {
    box-shadow: none;
}
.ps-product__desc .features {
    margin-bottom: 20px;
}
.ps-product__desc .features tr td{
    border: 1px solid #d2cccc;
    padding: 6px;
}
.right-details-add-tocart {
    background: white;
    padding: 10px;
}
.right-details-add-tocart select {
    width: 100%;
    padding: 7px;
    margin-bottom: 10px;
    border: 1px solid #cecccc;
}
.right-details-add-tocart button.ps-btn {
    width: 100%;
    margin: 10px 0;
}
.right-details-add-tocart a.ps-btn {
    width: 100%;
    text-align: center;
    background: #eb1c24;
}
#addtoCartForm {
    background: white;
    padding: 10px;
}


.ps-product--detail .ps-product__thumbnail {
    display: block !important;
}
.ps-product--detail .ps-product__thumbnail .ps-product__variants {
    max-width: 100%;
    width: 100%;
    min-width: 100%;
}
.ps-product--detail .ps-product__header .ps-product__thumbnail {
    max-width: 100%;
}
.ps-product--detail .ps-product__variants .item {
    margin-right: 10px;
        width: 60px !important;
}
.ps-product--detail .ps-product__thumbnail figure {
    position: relative;
    display: block;
    max-width: 100%;
    padding-left: 0;
}
.main-details-section .slick-slide {
    height: auto !important;
    margin-bottom: 20px;
}
</style>

<div class="ps-breadcrumb">
    <div class="ps-container">
        <ul class="breadcrumb">
            <li><a href="index.php">Home</a></li>
            <li><a href="{{url('/product-parts')}}">Product Parts</a></li>
            <li>{{$productparts_details->product_name}}</li>
        </ul>
    </div>
</div>


<div class="ps-page--product">
    <div class="ps-container">
    @if ($message = Session::get('error'))
    <div class="alert alert-danger alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>	
            <strong>{{ $message }}</strong>
    </div>
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>	
                <strong>{{ $message }}</strong>
        </div>
    @endif
    
    
<div class="ps-page--shop" id="shop-sidebar">
    <div class="container-fluid costum-container">
        
       <div class="main-details-section">
    <div class="row">
        <div class="col-md-3">
            <!--<div class="ps-product--detail ps-product--fullwidth">
                    <div class="ps-product__header">
                        <div class="ps-product__thumbnail" data-vertical="true">
                            <figure>
                                <div class="ps-wrapper">
                                    <div class="ps-product__gallery" data-arrow="true">
                                        <div class="item"><a href="{{ URL::asset('storage/product/large/'. $productparts_details->productpart_image) }}"><img src="{{ URL::asset('storage/product/large/'. $productparts_details->productpart_image) }}" alt=""></a></div>
                                        @foreach ($productparts_details['productpartimages'] as $productimage)
                                        <div class="item"><a href="{{ URL::asset('product/gallery/large/'. $productimage['image']) }}"><img src="{{ URL::asset('product/gallery/large/'. $productimage['image']) }}" alt=""></a></div>
                                        @endforeach
                                    </div>
                                </div>
                            </figure>
                            <div class="ps-product__variants" data-item="4" data-md="4" data-sm="4" data-arrow="false">
                                @foreach ($productparts_details['productpartimages'] as $productimage)
                                    <div class="item"><img src="{{ URL::asset('product/gallery/small/'. $productimage['image']) }}" alt=""></div>
                                @endforeach    
                            </div>
                        </div>
                    </div>
                    
                </div>-->
                
            <div id="fancy">
                 <div class="large-5 column">
                    <div class="xzoom-container">
                      <img class="xzoom" id="xzoom-default" src="{{asset('/frontend/printer-1.jpg')}}" xoriginal="{{asset('/frontend/printer-1.jpg')}}" />
                      <div class="xzoom-thumbs">
                        <a href="{{asset('/frontend/printer-1.jpg')}}"><img class="xzoom-gallery" width="80" src="{{asset('/frontend/printer-1.jpg')}}"  xpreview="{{asset('/frontend/printer-1.jpg')}}" title="The description goes here"></a>
                        <a href="{{asset('/frontend/printer-2.jpg')}}"><img class="xzoom-gallery" width="80" src="{{asset('/frontend/printer-2.jpg')}}" title="The description goes here"></a>
                        <a href="{{asset('/frontend/printer-1.jpg')}}"><img class="xzoom-gallery" width="80" src="{{asset('/frontend/printer-1.jpg')}}" title="The description goes here"></a>
                        <a href="{{asset('/frontend/printer-2.jpg')}}"><img class="xzoom-gallery" width="80" src="{{asset('/frontend/printer-2.jpg')}}" title="The description goes here"></a>
                      </div>
                    </div>        
                  </div>
            </div>
                
        </div>
        <div class="col-md-6">
           <form name="addtoCartForm" action="{{ url('/add-cart') }}" id="addtoCartForm" method="post">{{ csrf_field() }}
                <input type="hidden" name="product_id" value="{{$productparts_details->id}}">
                <input type="hidden" name="product_name" value="{{$productparts_details->product_name}}">
                <input type="hidden" name="productpart_name" value="{{$productparts_details->productpart_name}}">
                <input type="hidden" name="product_code" value="{{$productparts_details->product_code}}">
                <input type="hidden" id="price" name="price" value="{{$productparts_details->productpart_price}}">
                <h3>{{$productparts_details->productpart_name}}</h3>
               
                <h4 class="ps-product__price" id="getPrice">$ {{$productparts_details->productpart_price}}</h4>
                <ul class="ps-list--dot">
                           {!! $productparts_details->productpart_subtext !!}
                        </ul>
                <div class="ps-product__desc">
                    <div class="features">
                        <table>
                          <tbody>
                              <tr>
                                <td colspan="2">
                                  <div class="subHeading">Features</div>
                                </td>
                              </tr>
                            <tr>
                                <td width="150">Machine Size :</td>
                                <td>1050 (L) x 340 (W) x 1050 (H) mm</td>
                            </tr>
                            <tr>
                                <td width="150">Spindle Speed :</td>
                                <td>Rice Mill: 1400-1600 RPM, Disc Mill: 4500-5500 RPM</td>
                            </tr>
                            <tr>
                                <td width="150">Type of Product :</td>
                                <td>Combined Rice Mill Machine</td>
                            </tr>
                            <tr>
                                <td width="150">Production Capacity :</td>
                                <td>(Rice Mill: Rice ≥165-200 kg/hour, Millet ≥120-150 kg/hour), (Disc Mill: Pulverizer ≥180-250 kg/hour)</td>
                            </tr>
                            <tr>
                                <td width="150">Certification :</td>
                                <td>ISO9001:2015, CCC</td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                  
                </div>
                
            </form>
        </div>
        <div class="col-md-3">
            <div class="right-details-add-tocart">
                <figcaption>Size</figcaption>
                <select id="selSize" name="size">
                    <option value="">Select size</option>
                    @foreach($productparts_details->productattributes as $sizes)
                    <option value="{{ $productparts_details->id }}-{{ $sizes->size }}">{{ $sizes->size }}</option>
                    @endforeach
                </select>
                <div class="ps-product__desc">
                    <!-- <p>Sold By:<a href="shop-default.html"><strong> Go Pro</strong></a></p> -->
                    
                </div>
                <div class="ps-product__variations">
                    <figure>
                        <figcaption>Color</figcaption>
                        <div class="ps-variant ps-variant--color color--1"><span class="ps-variant__tooltip">Black</span></div>
                        <div class="ps-variant ps-variant--color color--2"><span class="ps-variant__tooltip"> Gray</span></div>
                    </figure>
                </div>
                <div class="ps-product__shopping">
                    <figure>
                        <figcaption>Quantity</figcaption>
                        <div class="form-group--number">
                            <button class="up"><i class="fa fa-plus"></i></button>
                            <button class="down"><i class="fa fa-minus"></i></button>
                            <input class="form-control" name="quantity" type="number" min="0" value="1">
                        </div>
                        </figure>
                        <button type="submit" class="ps-btn ps-btn--black" name="AddToCart" value="Add to cart">Add to cart</button>
                        <a class="ps-btn" href="#">Buy Now</a>
                         <div class="ps-product__actions">
                             <button type="submit" class="ps-btn" id="WishListButton" name="WishListButton" value="Wish List"><i class="icon-heart">Wish List</i></button>
                        </div>
                </div>
                <div class="ps-product__specification"><a class="report" href="#">Report Abuse</a>
                   
                    <p class="categories"><strong> Product name:</strong><a href="#">{{$productparts_details->product_name}}</a></p>
                    
                </div>
            </div>
        </div>
    </div>
</div>   
    
    
        <!--<div class="ps-page__container">
            <div class="ps-page__left">
                
            </div>
            <div class="ps-page__right">
                <aside class="widget widget_product widget_features">
                    <p><i class="icon-network"></i> Shipping worldwide</p>
                    <p><i class="icon-3d-rotate"></i> Free 7-day return if eligible, so easy</p>
                    <p><i class="icon-receipt"></i> Supplier give bills for this product.</p>
                    <p><i class="icon-credit-card"></i> Pay online or when receiving goods</p>
                </aside>
                <aside class="widget widget_sell-on-site">
                    <p><i class="icon-store"></i> Sell on Martfury?<a href="#"> Register Now !</a></p>
                </aside>
                <aside class="widget widget_ads"><a href="#"><img src="img/ads/product-ads.png" alt=""></a></aside>
                
            </div>
        </div>-->
    </div>
</div>

<div class="ps-home-promotions today-offer-deal" style="padding-bottom: 0px;">
    <div class="container-fluid costum-container">
        <div class="ps-section__header pb-40 pt-30">
            <h3>Related<span> Spare </span> Parts</h3>
        </div>
        <div class="row">
            @foreach($productparts as $productpart)
               <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6 ">
                    <div class="ps-block--category"><a href="{{url('/product-parts')}}/{{$productpart->productpart_slug}}"></a><img src="{{ URL::asset('storage/product/medium/'. $productpart->productpart_image) }}" alt="Inkjet Printer">
                        <p>{{$productpart->productpart_name}}</p>
                        <button type="submit" class="home-btn ps-btn--black" name="AddToCart" value="Add to cart">Add to cart</button>
                                <button type="submit" class="home-btn ps-btn--black" style="background: #eb1c24;" name="AddToCart" value="Buy Now">Buy Now</button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="best-seler-sec bg-f4f4f4 pt-50">
    <div class="container-fluid costum-container">
        <div class="ps-layout__right">
            <div class="ps-block--shop-features">
                <div class="ps-block__header">
                    <div class="ps-section__header">
                            <h3>Related <span>Products </span></h3>
                        </div>
                    <div class="ps-block__navigation"><a class="ps-carousel__prev" href="#recommended1"><i class="icon-chevron-left"></i></a><a class="ps-carousel__next" href="#recommended1"><i class="icon-chevron-right"></i></a></div>
                </div>
                <div class="ps-block__content">
                    <div class="owl-slider" id="recommended1" data-owl-auto="true" data-owl-loop="true" data-owl-speed="10000" data-owl-gap="30" data-owl-nav="false" data-owl-dots="false" data-owl-item="6" data-owl-item-xs="2" data-owl-item-sm="2" data-owl-item-md="3" data-owl-item-lg="4" data-owl-item-xl="5" data-owl-duration="1000" data-owl-mousedrag="on">
                    @foreach($related_products as $related_product)
                        <div class="ps-product">
                            <div class="ps-product__thumbnail"><a href="{{url('products')}}/{{$related_product->slug}}"><img src="{{ URL::asset('storage/product/medium/'. $related_product->product_image) }}" alt=""></a>
                                <ul class="ps-product__actions">
                                    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Read More"><i class="icon-bag2"></i></a></li>
                                    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Add to Whishlist"><i class="icon-heart"></i></a></li>
                                    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Compare"><i class="icon-chart-bars"></i></a></li>
                                </ul>
                            </div>
                            <div class="ps-product__container"><a class="ps-product__vendor" href="{{url('products')}}/{{$related_product->slug}}">{{$related_product->product_name}}</a>
                                <div class="ps-product__content"><a class="ps-product__title" href="{{url('products')}}/{{$related_product->slug}}">{{$related_product->productpart_name}}</a>
                                    <div class="ps-product__rating">
                                        <select class="ps-rating" data-read-only="true">
                                            <option value="1">1</option>
                                            <option value="1">2</option>
                                            <option value="1">3</option>
                                            <option value="1">4</option>
                                            <option value="2">5</option>
                                        </select><span>01</span>
                                    </div>
                                    <p class="ps-product__price">${{$related_product->regular_price}}</p>
                                </div>
                                <div class="ps-product__content hover"><a class="ps-product__title" href="{{url('products')}}/{{$related_product->slug}}">{{$related_product->productpart_name}}</a>
                                    <p class="ps-product__price">${{$related_product->regular_price}}</p>
                                </div>
                                <button type="submit" class="home-btn ps-btn--black" name="AddToCart" value="Add to cart">Add to cart</button>
                                <button type="submit" class="home-btn ps-btn--black" style="background: #eb1c24;" name="AddToCart" value="Buy Now">Buy Now</button>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="ps-page--product">
        <div class="ps-container">
            <div class="ps-page__container">
                <div class="ps-page__left">
                    <div class="ps-product--detail ps-product--fullwidth">
                        <div class="ps-product__content ps-tab-root">
                            <ul class="ps-tab-list">
                                <li class="active"><a href="#tab-1">Description</a></li>
                                <li><a href="#tab-4">Reviews</a></li>
                            </ul>
                            <div class="ps-tabs">
                                <div class="ps-tab active" id="tab-1">
                                    <div class="ps-document">
                                        {!! $productparts_details->productpart_description !!}
                                    </div>
                                </div>

                                <div class="ps-tab" id="tab-4">
                                    <div class="row">
                                        <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 ">
                                            <div class="ps-block--average-rating">
                                                <div class="ps-block__header">
                                                    <h3>5.0</h3>
                                                    <select class="ps-rating" data-read-only="true">
                                                        <option value="2">1</option>
                                                        <option value="2">2</option>
                                                        <option value="2">3</option>
                                                        <option value="2">4</option>
                                                        <option value="1">5</option>
                                                    </select>
                                                    <span>1 Reviews</span>
                                                </div>
                                                <div class="ps-block__star">
                                                    <span>5 Star</span>
                                                    <div class="ps-progress" data-value="100">
                                                        <span></span>
                                                    </div>
                                                    <span>100.0%</span>
                                                </div>
                                                <div class="ps-block__star"><span>4 Star</span>
                                                    <div class="ps-progress" data-value="0"><span></span></div><span>0.0%</span>
                                                </div>
                                                <div class="ps-block__star"><span>3 Star</span>
                                                    <div class="ps-progress" data-value="0"><span></span></div><span>0.0%</span>
                                                </div>
                                                <div class="ps-block__star"><span>2 Star</span>
                                                    <div class="ps-progress" data-value="0"><span></span></div><span>0.0%</span>
                                                </div>
                                                <div class="ps-block__star"><span>1 Star</span>
                                                    <div class="ps-progress" data-value="0"><span></span></div><span>0.0%</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12 ">
                                            <form class="ps-form--review" action="" method="post">
                                                <input type="hidden" name="urlRef" value="">
                                                <input type="hidden" name="product_id" value="17">
                                                <h4>Submit Your Review</h4>
                                                <p>Your email address will not be published.</p>
                                                <div class="form-group form-group__rating">
                                                    <label>Your rating of this product</label>
                                                    <select class="ps-rating" name="rating" data-read-only="false">
                                                        <option value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                        <option value="5">5</option>
                                                    </select>
                                                </div>
                                                <div class="form-group">
                                                    <textarea class="form-control" rows="6" placeholder="Write your review here" name="message"></textarea>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12  ">
                                                        <div class="form-group">
                                                            <input required class="form-control" type="text" placeholder="Your Name" name="name" value="">
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12  ">
                                                        <div class="form-group">
                                                            <input required class="form-control" name="email" type="email" placeholder="Your Email" value="">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group submit">
                                                    <button type="submit" class="ps-btn">Submit Review</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 <script type="text/javascript" src="{{asset('/frontend/zoom/xzoom.min.js')}}"></script>
 
 <script type="text/javascript" src="{{asset('/frontend/zoom/jquery.fancybox.js')}}"></script>
  <script type="text/javascript" src="{{asset('/frontend/zoom/magnific-popup.js')}}"></script> 
 
 
 <script src="{{asset('/frontend/zoom/foundation.min.js')}}"></script>
<script src="{{asset('/frontend/zoom/setup.js')}}"></script>


@endsection