@extends('layouts.frontLayout.front_design')
@section('content')
<section class="divider-screen-sm fade-medium">
  <div class="container">
    <div class="row">
      @if(Session::has('flash_message_error'))
        <div class="alert alert-error alert-block" style="background-color:#d7efe5">
          <button type="button" class="close" data-dismiss="alert">×</button> 
          <strong>{!! session('flash_message_error') !!}</strong>
        </div>
      @endif
      <div class="col-sm-12 padding-right">
        <div class="product-details">
          <div class="col-md-5 col-sm-5">
            <div class="view-product">
              <div>
                <a id="mainImgLarge" href="{{ asset('/images/backend_images/product/large/'.$productDetails->image) }}">
                 <img width="350px" id="mainImg" src="{{ asset('/images/backend_images/product/medium/'.$productDetails->image) }}" alt="" />
                </a>
              </div>
            </div>
            <div id="similar-product">
              <div>
                @if(count($productAltImages)>0)
                  <div class="item active thumbnails">
                    @foreach($productAltImages as $altimg)
                      <a href="{{ asset('images/backend_images/product/medium/'.$altimg->image) }}" data-standard="{{ asset('images/backend_images/product/small/'.$altimg->image) }}">
                        <img class="changeImage" style="width:80px; cursor:pointer" src="{{ asset('images/backend_images/product/small/'.$altimg->image) }}" alt="">
                      </a>
                    @endforeach
                  </div>
                @endif
              </div>
            </div>
          </div>
          <div class="col-sm-7">
            <form name="addtoCartForm" id="addtoCartForm" action="{{ url('add-cart') }}" method="post">{{ csrf_field() }}
              <input type="hidden" name="product_id" value="{{ $productDetails->id }}">
              <input type="hidden" name="product_name" value="{{ $productDetails->product_name }}">
              <input type="hidden" name="product_code" value="{{ $productDetails->product_code }}">
              <input type="hidden" name="product_color" value="{{ $productDetails->product_color }}">
              <input type="hidden" name="price" id="price" value="{{ $productDetails->price }}">
              <div class="product-information">
                <h2>{{ $productDetails->product_name }}</h2>
                <h4>Artikel Nr: {{ $productDetails->product_code }}</h4>
                <br>
                <span>
                  <span id="getPrice">CHF  {{ $productDetails->price }}</span>
                  <label>Menge:</label>
                  <input name="quantity" type="text" value="1" />
                  <button type="submit" class="bttn-pill bttn-md bttn-danger" id="cartButton">
                    <i class="fa fa-shopping-cart"></i>
                    In den Warenkorb
                  </button>
                </span>
                <h4>Dimension: {{ $productDetails->dimensions}}</h4>
                <h5>An Lager: <span id="Availability"> @if($total_stock>0) In Stock @else Out Of Stock @endif</span></h5>
                <h5>Lieferfrist:
                  <span id="Availability"> @if($total_stock>0) 5-15 Tage @else 3-4 Wochen @endif</span>
                </h5>
                <span id="Availability"> @if($total_stock>0) @else Warnung: Sie können keine größeren Mengen des Produkts bestellen, die nicht auf Lager sind @endif</span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="fluid-container">
        <div class="category-tab shop-details-tab">
          <div class="col-sm-12">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#care" data-toggle="tab">Beschreibung</a></li>            
            </ul>
          </div>
          <div class="tab-content"></div>
          <p class="p-25 font-17-px">{{ $productDetails->description }}</p>
        </div>
        <div class="col-md-12">
          <div class="recommended_items">
            <h2 class="title text-center">EMPFOHLENE ARTIKEL</h2>
            <div id="recommended-item-carousel" class=" slide" data-ride="carousel">
              <div class="carousel-inner">
                                @foreach($relatedProducts->chunk(3) as $chunk)
                  <div  class="item active" >
                    @foreach($chunk as $item)
                      <div class="col-sm-4">
                        <div class="product-image-wrapper">
                          <div class="single-products">
                            <div class="productinfo pcc-25 text-center">
                              <a href="{{ url('/product/'.$item->id) }}">
                                <img style="width:200px;" src="{{ asset('images/backend_images/product/small/'.$item->image) }}" alt="" />
                              </a>
                              <h2>CHF {{ $item->price }}</h2>
                              <p>{{ $item->product_name }}</p>
                              <a href="{{ url('/product/'.$item->id) }}"><button type="button" class="bttn-pill bttn-md bttn-danger"> <i class="fa fa-shopping-cart"></i> In der warenkorb</button></a>
                            </div>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                                  @endforeach
              </div>
              <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
                <i class="fa fa-angle-left"></i>
              </a>
              <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
                <i class="fa fa-angle-right"></i>
              </a>      
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection