@extends('front.layouts.app')
@section('title', $product->title)
@section('content')

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="product-holder">
        <div class="product-holder-bg" @if(!$product->images->isEmpty()) style="background-image: url({{url('storage/'.$product->images[0]->image_path)}})" @endif>

        </div>

      <div class="product-holder-content">

        <div class="col-md-6">
          @if ($product->images->isNotEmpty())
              @forelse($product->images as $image)
                  <a href="{{ url('storage/'.$image->image_path) }}" target="_blank">
                      <img src="{{ url('storage/'.$image->thumbnail_path) }}" alt="" width="100%">
                  </a>
              @empty
                  <img src="https://placehold.co/300" alt="">
              @endforelse
          @else
              <img src="https://placehold.co/300" alt="">
          @endif
        </div>
        <div class="col-md-6">

          <h1>{{ $product->title }}</h1>
          <h2>{{ $product->subtitle }}</h2>
          <hr>
          <label>Opis</label>
          <p>{{ $product->description }}</p>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <div class="product-holder-content-data">

                <label>Šifra</label> <br><span>{{ $product->sku }}</span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="product-holder-content-data">
                @if ($product->price_discount)
                <div class="product-box-discount pulse"><span>{{ round((($product->price-$product->price_discount)/$product->price * 100)) }}% <br /><small>POPUST</small></span></div>
                @endif

                <label>Cena</label> <br>
                @if($product->price_discount)
                  <span class="original-price">{{ $product->price }} RSD/{{ $product->unit }}</span><br>
                  <span class="discount-price">{{ $product->price_discount }} RSD/{{ $product->unit }}</span>
                @else
                    <span class="price">{{ $product->price }} RSD/{{ $product->unit }}</span>
                @endif




              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              @if(!$relatedProducts->isEmpty())
              <hr>
              <label>Ostale varijante proizvoda</label>
              <ul class="related-products">


              @foreach($relatedProducts as $product)
              <li>
                <a href="{{ route('products.show', $product->slug) }}" data-toggle="tooltip" data-placement="bottom" title="{{ $product->title }}" data-aos="fade-up" data-aos-once="true" data-aos-delay="{{ $loop->index*100 }}">
                  @forelse($product->images as $image)
                  <img src="{{url('storage/'.$image->thumbnail_path)}}" alt="">

                  @empty
                  <img src="https://placehold.co/300" alt="">
                  @endforelse
                </a>
              </li>

              @endforeach
              </ul>
             @endif
            </div>
          </div>

        </div>
      </div>
    </div>
    </div>

  </div>
</div>
<div class="section similar-products">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-push-1">
      <h2 class="text-center">Slični proizvodi</h2>
        <div class="product-list">
            @foreach($similarProducts as $product)
            <a href="{{ route('products.show', $product->slug) }}" class="product-box" data-aos="fade-up" data-aos-once="true" data-aos-delay="{{ $loop->index*100 }}">
              <div class="product-box-image">
                @forelse($product->images as $image)
                <img src="{{url('storage/'.$image->thumbnail_path)}}" alt="">

                @empty
                <img src="https://placehold.co/300" alt="">
                @endforelse

              </div>
              <h3>{{ $product->title }}</h3>
              <p>{{ $product->price }} RSD/{{ $product->unit }}</p>
           </a>
           @endforeach
        </div>
      </div>
    </div>
  </div>
</div>



@endsection
@push('scripts')
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
@endpush