@extends('layouts.app')
@section('content')
<div class="main-container col1-layout">
    <div class="container">
      <div class="row">
        <div class="col-main">
          <div class="product-view-area">
            <div class="product-big-image col-xs-12 col-sm-5 col-lg-5 col-md-5">
              <div class="icon-sale-label sale-left">Sale</div>
              <div class="large-image"> <a href="{{ asset('storage/items/'.$item->pic) }}" class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20"> <img class="zoom-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="products"> </a> </div>
              <div class="flexslider flexslider-thumb">
                <ul class="previews-list slides">
                  <li><a href='{{ asset('storage/items/'.$item->pic) }}' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/products/product-fashion-1.jpg' "><img src="{{ asset('storage/items/'.$item->pic) }}" alt = "Thumbnail 2"/></a></li>
                 {{--  <li><a href='images/products/product-fashion-1a.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/products/product-fashion-1a.jpg' "><img src="images/products/product-fashion-1a.jpg" alt = "Thumbnail 1"/></a></li>
                  <li><a href='images/products/product-fashion-1b.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/products/product-fashion-1b.jpg' "><img src="images/products/product-fashion-1b.jpg" alt = "Thumbnail 1"/></a></li>
                  <li><a href='images/products/product-fashion-1c.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/products/product-fashion-1c.jpg' "><img src="images/products/product-fashion-1c.jpg" alt = "Thumbnail 2"/></a></li>
                  <li><a href='images/products/product-fashion-1d.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'images/products/product-fashion-1d.jpg' "><img src="images/products/product-fashion-1d.jpg" alt = "Thumbnail 2"/></a></li> --}}
                </ul>
              </div>
              
              <!-- end: more-images --> 
              
            </div>
            <div class="col-xs-12 col-sm-7 col-lg-7 col-md-7 product-details-area">
              <div class="product-name">
                <h1>{{ $item->name }}</h1>
              </div>
              <div class="price-box">
                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price">UGX {{ is_null($item->discounted_rate) ? number_format($item->rate) : number_format($item->discounted_rate) }} </span> </p>
                @if(!is_null($item->discounted_rate))
                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> UGX {{ number_format($item->rate) }} </span> </p>
                @endif
              </div>
              <div class="ratings">
                <p class="rating-links"> <a href="#">{{ $item->reviews->count() }} Review(s)</a> <span class="separator">|</span> <a href="#">Add Your Review</a> </p>
                <p class="availability in-stock pull-right">Availability: <span>{{ $item->availability }}</span></p>
              </div>
              <div class="short-description">
                <h2>Quick Overview</h2>
                <p>{{ $item->overview }}</p>
              </div>
              <div class="product-variation">
                <form action="#" method="post">
                  <div class="cart-plus-minus">
                    <label for="qty">Quantity:</label>
                    <div class="numbers-row">
                      <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty &gt; 0 ) result.value--;return false;" class="dec qtybutton"><i class="fa fa-minus">&nbsp;</i></div>
                      <input type="text" class="qty" title="Qty" value="1" maxlength="12" id="qty" name="qty">
                      <div onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="inc qtybutton"><i class="fa fa-plus">&nbsp;</i></div>
                    </div>
                  </div>
                  <button class="button pro-add-to-cart" title="Add to Cart" type="button"><span><i class="fa fa-shopping-basket"></i> Add to Cart</span></button>
                </form>
              </div>
              <div class="product-cart-option">
                <ul>
                  <li><a href="#"><i class="fa fa-heart-o"></i><span>Add to Wishlist</span></a></li>
                  <li><a href="#"><i class="fa fa-link"></i><span>Add to Compare</span></a></li>
                  <li><a href="#"><i class="fa fa-envelope"></i><span>Email to a Friend</span></a></li>
                </ul>
              </div>
              <div class="share-box">
                <div class="title">Share in social media</div>
                <div class="socials-box"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> </div>
              </div>
            </div>
          </div>
        </div>
        <div class="product-overview-tab">
          <div class="container">
            <div class="row">
              <div class="col-xs-12">
                <div class="product-tab-inner">
                  <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
                    <li class="active"> <a href="#description" data-toggle="tab"> Description </a> </li>
                    <li> <a href="#reviews" data-toggle="tab">Reviews</a> </li>
                  </ul>
                  <div id="productTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="description">
                      <div class="std">
                        <p>{{ $item->description }}</p>
                      </div>
                    </div>
                    <div id="reviews" class="tab-pane fade">
                      <div class="col-sm-5 col-lg-5 col-md-5">
                        <div class="reviews-content-left">
                          <h2>Customer Reviews</h2>
                          @foreach($item->reviews as $review)
                            <div class="review-ratting">
                            <p><a href="#">{{$review->summary }}</a></p>
                            <span>{{ $review->review }}</span>
                            <p class="author"> {{ $review->nickname }}<small> (Posted {{ $review->created_at->diffForHumans() }})</small> </p>
                          </div>
                          @endforeach
                        </div>
                      </div>
                      <div class="col-sm-7 col-lg-7 col-md-7">
                        <div class="reviews-content-right">
                          <h2>Write Your Own Review</h2>
                          <form method="POST" action="{{ url('reviews') }}">
                          	@csrf
                            <h3>You're reviewing: @if(auth()->check())<span>{{ Auth::user()->name }}</span>@endif</h3>
                            <h4>How do you rate this product?<em>*</em></h4>
                            <form class="form-area" method="POST" action="{{ url('reviews') }}">
                            	@csrf
                              <input type="hidden" name="item_id" value="{{ $item->id }}">
                              <div class="form-element" >
                                <label>Nickname <em>*</em></label>
                                <input type="text" class="form-control" name="nickname" required>
                              </div>
                              <div class="form-element">
                                <label>Summary of Your Review <em>*</em></label>
                                <input type="text" class="form-control" name="summary" required>
                              </div>
                              <div class="form-element">
                                <label>Review <em>*</em></label>
                                <textarea class="form-control" name="review" required></textarea>
                              </div>
                              <div class="buttons-set">
                                <button class="button submit" title="Submit Review" type="submit"><span><i class="fa fa-thumbs-up"></i> &nbsp;Review</span></button>
                              </div>
                            </form>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Main Container End --> 
  
  <!-- Related Product Slider -->
  
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="related-product-area">
          <div class="page-header">
            <h2>Related Products</h2>
          </div>
          <div class="related-products-pro">
            <div class="slider-items-products">
              <div id="related-product-slider" class="product-flexslider hidden-buttons">
                <div class="slider-items slider-width-col4 fadeInUp">
                  @foreach($related_items as $item)
                    <div class="product-item">
                    <div class="item-inner">
                      <div class="product-thumbnail">
                        <div class="pr-img-area"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">
                          <figure> <img class="first-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}"> <img class="hover-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}"></figure>
                          </a> </div>
                       {{--  <div class="pr-info-area">
                          <div class="pr-button">
                            <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                            <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            <div class="mt-button quick-view"> <a href="quick_view.html"> <i class="fa fa-search"></i> </a> </div>
                          </div>
                        </div> --}}
                      </div>
                      <div class="item-info">
                        <div class="info-inner">
                          <div class="item-title"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">{{ $item->name }} </a> </div>
                          <div class="item-content">
                            <div class="rating"> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price">UGX {{ number_format($item->rate) }} </span> </p>
                                {{-- <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price">  </span> </p> --}}
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span> </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection