@extends('layouts.store')
@section('body')
    <section class="py-3 bg-light-grey">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/store">Home</a></li>
                <li class="breadcrumb-item"><a href="#">{{ $product->category->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
            </ol>
        </div>
    </section>

    <!-- ========================= SECTION CONTENT ========================= -->
    <section class="section-content bg-white padding-y">
        <div class="container">

            <!-- ============================ ITEM DETAIL ======================== -->
            <div class="row">
                <aside class="col-md-6">
                    <div class="card">
                        <article class="gallery-wrap">
                            <div class="img-big-wrap">
                                <div>
                                    @if ($product->featured_image)
                                        <a href="{{ $product->featured_image->getUrl() }}" target="_blank"
                                            style="display: inline-block">
                                            <img width="100%" src="{{ $product->featured_image->getUrl() }}">
                                        </a>
                                    {{-- @else
                                        <a href="#" class="img-wrap"> <img
                                                src="{{ $product->category->image->getURL('preview') }}">
                                        </a> --}}
                                    @endif
                                </div>
                            </div> <!-- slider-product.// -->
                            {{-- <div class="thumbs-wrap">
        <a href="#" class="item-thumb"> <img src="images/items/15.jpg"></a>
        <a href="#" class="item-thumb"> <img src="images/items/15-1.jpg"></a>
        <a href="#" class="item-thumb"> <img src="images/items/15-2.jpg"></a>
        <a href="#" class="item-thumb"> <img src="images/items/15-1.jpg"></a>
      </div> <!-- slider-nav.// --> --}}
                        </article> <!-- gallery-wrap .end// -->
                    </div> <!-- card.// -->
                </aside>
                <main class="col-md-6">
                    <article class="product-info-aside">

                        <h2 class="title mt-3">{{ $product->name }}</h2>

                        <div class="rating-wrap my-3">
                            {{-- <ul class="rating-stars">
          <li style="width:80%" class="stars-active"> 
              <i class="fa fa-star"></i> <i class="fa fa-star"></i> 
              <i class="fa fa-star"></i> <i class="fa fa-star"></i> 
              <i class="fa fa-star"></i> 
          </li>
          <li>
              <i class="fa fa-star"></i> <i class="fa fa-star"></i> 
              <i class="fa fa-star"></i> <i class="fa fa-star"></i> 
              <i class="fa fa-star"></i> 
          </li>
      </ul>
      <small class="label-rating text-muted">132 reviews</small>
      <small class="label-rating text-success"> <i class="fa fa-clipboard-check"></i> 154 orders </small> --}}
                        </div> <!-- rating-wrap.// -->

                        <div class="mb-3">
                            <var class="price h4">Rp {{ number_format($product->price_range) }}</var>
                            {{-- <span class="text-muted">USD 562.65 incl. VAT</span> --}}
                        </div> <!-- price-detail-wrap .// -->

                        <p>{{ $product->excerpt }}</p>


                        <dl class="row">
                            <dt class="col-sm-3">Category</dt>
                            <dd class="col-sm-9">{{ $product->category->name }}</dd>

                            <dt class="col-sm-3">Part number</dt>
                            <dd class="col-sm-9">{{ $product->part_number }}</dd>

                            <dt class="col-sm-3">Stock</dt>
                            <dd class="col-sm-9">{{ $product->stock }}</dd>

                            <dt class="col-sm-3">Pre Order</dt>
                            <dd class="col-sm-9">{{ $product->is_preorder }}</dd>
                            
                        </dl>


                        <form method="POST" action="{{ url('/store/carts') }}">
                            {{ csrf_field() }}
                            <div class="form-row  mt-4">
                                <div class="form-group col-md flex-grow-0">
                                    <input value="{{ $product->id }}" name="product_id" type="hidden">
                                    <input value="{{ Auth::user()->sub ?? 0 }}" name="user_id" type="hidden"><input value="1" name="user_id" type="hidden">
                                    <div class="input-group mb-3 input-spinner">
                                        <div class="input-group-prepend">
                                            <button class="btn btn-light" type="button" id="button-minus"> &minus; </button>
                                        </div>
                                        <input type="text" class="form-control" name="qty" id="count" value="1">
                                        <div class="input-group-append">
                                            <button class="btn btn-light" type="button" id="button-plus"> + </button>
                                        </div>
                                    </div>
                                </div> <!-- col.// -->

                                <div class="form-group col-md">
                                    <button class="btn  btn-primary">
                                        <i class="fas fa-shopping-cart"></i> <span class="text">Add to cart</span>
                                    </button>
                                    {{-- <a href="#" class="btn btn-light">
                <i class="fas fa-envelope"></i> <span class="text">Contact supplier</span> 
              </a> --}}
                                </div> <!-- col.// -->
                            </div> <!-- row.// -->


                        </form>
                    </article> <!-- product-info-aside .// -->
                </main> <!-- col.// -->
            </div> <!-- row.// -->

            <!-- ================ ITEM DETAIL END .// ================= -->


        </div> <!-- container .//  -->
    </section>
    <!-- ========================= SECTION CONTENT END// ========================= -->

    <!-- ========================= SECTION  ========================= -->
    <section class="section-name padding-y bg">
        <div class="container">

            <div class="row">
                <div class="col-md-9">
                    <h5 class="title-description">Description</h5>
                    @php
                        echo $product->description;
                    @endphp

                    <h5 class="title-description">Specifications</h5>
                    @php
                        echo $product->specification;
                    @endphp
                </div> <!-- col.// -->

                <aside class="col-md-3">

                    <div class="box">

                        <h5 class="title-description">Files</h5>
                        @foreach ($product->resources as $key => $resource)
                            <article class="media mb-3">
                                <a href="#"><img class="img-sm mr-3" src="{{ env('APP_URL') }}/img/pdf.png"></a>
                                <div class="media-body">
                                    <h6 class="mt-0"><a href="#">{{ $resource->title ?? 'Documentation' }}</a></h6>
                                    <div class="col-sm-2"><a
                                            href="{{ env('APP_URL') }}/resources/{{ $resource->id }}/download"
                                            class="btn btn-sm btn-primary">Download</a></div>
                                </div>
                            </article>
                        @endforeach
                    </div> <!-- box.// -->
                </aside> <!-- col.// -->
            </div> <!-- row.// -->

        </div> <!-- container .//  -->
    </section>
    <!-- ========================= SECTION CONTENT END// ========================= -->


    </div>
    </section>
@endsection