@extends('master') @section('main_content')

<section class="hero hero-page gray-bg padding-small">
  <div class="container">
    <div class="row d-flex">
      <div class="col-lg-9 order-2 order-lg-1">
        <h1>{{$product['title']}}</h1>
      </div>
      <div class="col-lg-3 text-right order-1 order-lg-2">
        <ul class="breadcrumb justify-content-lg-end">
          <li class="breadcrumb-item"><a href="{{url('')}}">Home</a></li>
          <li class="breadcrumb-item"><a href="{{url('shop')}}">Shop</a></li>
          <li class="breadcrumb-item active">{{$product['title']}}</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<section class="product-details">
  <div class="container">
    <div class="row">
      <div class="product-images col-lg-6">
        @if ($product['sale'] === 1)
        <div class="ribbon-info text-uppercase">On Sale!</div>
      @endif
        <div class="ribbon-primary text-uppercase">{{$product['stock'] .' Items Left!'}}</div>
        <div class="item">
          <img src="{{url('images') .'/'.$product['image']}}" alt="">

        </div>
        {{-- <div data-slider-id="1" class="owl-thumbs d-flex align-items-center justify-content-center">
          <button class="owl-thumb-item"><img src="img/shirt-small.png" alt="shirt"></button>
          <button class="owl-thumb-item active"><img src="img/shirt-black-small.png" alt="shirt"></button>
          <button class="owl-thumb-item"><img src="img/shirt-green-small.png" alt="shirt"></button>
          <button class="owl-thumb-item"><img src="img/shirt-red-small.png" alt="shirt"></button>
        </div> --}}
      </div>
      <div class="details col-lg-6">
        <div class="d-flex align-items-center justify-content-between flex-column flex-sm-row">
          <ul class="price list-inline no-margin">
            @if ($product['sale'] === 1)
              <li class="list-inline-item current"> $<span class="_current">{{$product['price']}}</span></li>
              <li class="list-inline-item original">${{$product['original_price']}}</li>
            @else
              <li class="list-inline-item current">${{$product['price']}}</li>
            @endif
          </ul>
          <div class="review d-flex align-items-center">
            <ul class="rate list-inline">
              <li class="list-inline-item"><i class="fa fa-star-o text-primary"></i></li>
              <li class="list-inline-item"><i class="fa fa-star-o text-primary"></i></li>
              <li class="list-inline-item"><i class="fa fa-star-o text-primary"></i></li>
              <li class="list-inline-item"><i class="fa fa-star-o text-primary"></i></li>
              <li class="list-inline-item"><i class="fa fa-star-o text-primary"></i></li>
            </ul><span class="text-muted">No reviews</span>
          </div>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
        <div class="d-flex align-items-center justify-content-center justify-content-lg-start">
          <div class="quantity d-flex align-items-center">
            <div class="dec-btn">-</div>
            <input type="text" value="1" class="quantity-no">
            <div class="inc-btn">+</div>
          </div>
          <select id="product-size" class="bs-select">
              <option value="small">Small</option>
              <option value="meduim">Medium</option>
              <option value="large">Large</option>
              <option value="x-large">X-Large</option>
            </select>
        </div>
        <ul class="CTAs list-inline">
          <li class="list-inline-item">
            {{-- <a  href="#" class="btn btn-template wide add-to-cart-btn"> --}}
              {{-- <input type="button"  name="" value=""> --}}
              <button data-id="{{$product['id']}}"  class="btn btn-template wide add-to-cart-btn" name="button">
                <i class="icon-cart">Add to Cart</i>
              </button>
          </li>
          <li class="list-inline-item"><a href="#" class="btn btn-template-outlined wide"> <i class="fa fa-heart-o"></i>Add to wishlist</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
@endsection