@extends('pwa.template.app.main')

@push('scripts')

<script>
    async function addToCart(actionURL) {

        const response = await fetch(actionURL, {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json',

                'X-CSRF-Token': '{{ csrf_token() }}'

            },

            body: JSON.stringify({

                kuantitas: $('#kuantitas').val()

            })

        })

        const data = await response.json();


        $('#cart-items-amount').html(data.cart_kuantitas);


        Swal.fire({

            icon: 'success',

            title: 'Produk sukses ditambahkan ke keranjang',

            html: "<a href='{{route('cart')}}'>Lihat keranjang</a>",

        })

    }

</script>

@endpush

@section('app-content')

<style>
    .single-product-slide {

        display: flex;

        justify-content: center;

    }



    .pic-produk {

        max-width: 700px;

    }

</style>

<div class="product-slide-wrapper">

    <!-- Product Slides-->

    <div class="product-slides owl-carousel">

        <!-- Single Hero Slide-->

        <div class="single-product-slide">

            <img class="pic-produk mb-2" src="{{ asset('storage/' . $produk->foto) }}" alt="">

        </div>

    </div>

    {{-- <!-- Single Hero Slide-->

        <div class="single-product-slide" style="background-image: url('img/bg-img/10.jpg')"></div>

        <!-- Single Hero Slide-->

        <div class="single-product-slide" style="background-image: url('img/bg-img/11.jpg')"></div> --}}

</div>

<div class="product-description pb-3">

    <!-- Product Title & Meta Data-->

    <div class="product-title-meta-data bg-white mb-3 py-3">

        <div class="container d-flex justify-content-between rtl-flex-d-row-r">

            <div class="p-title-price">

                <h5 class="mb-1">{{ $produk->nama }}</h5>

                <p class="sale-price mb-0 lh-1">@currency($produk->harga)</p>

            </div>

            {{-- <div class="p-wishlist-share"><a href="wishlist-grid.html"><i class="fa-solid fa-heart"></i></a></div> --}}

        </div>

        <!-- Ratings-->

        {{-- <div class="product-ratings">

        <div class="container d-flex align-items-center justify-content-between rtl-flex-d-row-r">

          <div class="ratings"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

              class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><span

              class="ps-1">3 ratings</span></div>

          <div class="total-result-of-ratings"><span>5.0</span><span>Very Good </span></div>

        </div>

      </div> --}}

    </div>

    <!-- Add To Cart-->

    <div class="cart-form-wrapper bg-white mb-3 py-3">

        <div class="container">

            <p style="margin: 0;">Stok : {{ $produk->stok }} @if ($produk->satuan == 'pcs')

                Pcs

                @else

                Pack

                @endif

            </p>

            <div class="cart-form">


                <div class="order-plus-minus d-flex align-items-center">

                    <div class="quantity-button-handler">-</div>

                    <input readonly class="form-control cart-quantity-input " type="number" step="1" name="kuantitas" value="1"
                       id="kuantitas" min="1" max="{{$produk->stok}}">
                    <div class="quantity-button-handler">+</div>

                </div>

                <button class="btn btn-danger ms-3" type="button"
                    onclick="addToCart('{{ route('cart.store', $produk->id) }}')">Add To Cart</button>

            </div>

        </div>

    </div>

    <!-- Product Specification-->

    <div class="p-specification bg-white mb-3 py-3">

        <div class="container">

            <h6>Deskripsi Produk</h6>

            {!! $produk->deskripsi !!}

        </div>

    </div>

    <!-- Product Video -->

    {{-- <div class="bg-img" style="background-image: url(img/product/18.jpg)">

      <div class="container">

        <div class="video-cta-content d-flex align-items-center justify-content-center">

          <div class="video-text text-center">

            <h4 class="mb-4">Summer Clothing</h4><a class="btn btn-info rounded-circle" id="videoButton"

              href="https://www.youtube.com/watch?v=lFGvqvPh5jI"><i class="fa-solid fa-play"></i></a>

          </div>

        </div>

      </div>

    </div>

    <div class="pb-3"></div>

    <!-- Related Products Slides-->

    <div class="related-product-wrapper bg-white py-3 mb-3">

      <div class="container">

        <div class="section-heading d-flex align-items-center justify-content-between rtl-flex-d-row-r">

          <h6>Related Products</h6><a class="btn p-0" href="shop-grid.html">View All</a>

        </div>

        <div class="related-product-slide owl-carousel">

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-warning">Sale</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"> </i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/11.png" alt="">

                <!-- Offer Countdown Timer: Please use event time this format: YYYY/MM/DD hh:mm:ss -->

                <ul class="offer-countdown-timer d-flex align-items-center shadow-sm"

                  data-countdown="2023/12/31 23:59:59">

                  <li><span class="days">0</span>d</li>

                  <li><span class="hours">0</span>h</li>

                  <li><span class="minutes">0</span>m</li>

                  <li><span class="seconds">0</span>s</li>

                </ul>

              </a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Beach Cap</a>

              <!-- Product Price -->

              <p class="sale-price">$13<span>$42</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-success">New</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"> </i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/5.png" alt=""></a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Wooden Sofa</a>

              <!-- Product Price -->

              <p class="sale-price">$74<span>$99</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-success">Sale</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"> </i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/6.png" alt=""></a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Roof Lamp</a>

              <!-- Product Price -->

              <p class="sale-price">$99<span>$113</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-danger">-18%</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"> </i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/9.png" alt="">

                <!-- Offer Countdown Timer: Please use event time this format: YYYY/MM/DD hh:mm:ss -->

                <ul class="offer-countdown-timer d-flex align-items-center shadow-sm"

                  data-countdown="2022/12/23 00:21:29">

                  <li><span class="days">0</span>d</li>

                  <li><span class="hours">0</span>h</li>

                  <li><span class="minutes">0</span>m</li>

                  <li><span class="seconds">0</span>s</li>

                </ul>

              </a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Sneaker Shoes</a>

              <!-- Product Price -->

              <p class="sale-price">$87<span>$92</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-danger">-11%</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"></i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/8.png" alt=""></a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Wooden Chair</a>

              <!-- Product Price -->

              <p class="sale-price">$21<span>$25</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

          <div class="card product-card bg-gray shadow-none">

            <div class="card-body">

              <!-- Badge--><span class="badge rounded-pill badge-warning">On Sale</span>

              <!-- Wishlist Button--><a class="wishlist-btn" href="#"><i class="fa-solid fa-heart"></i></a>

              <!-- Thumbnail --><a class="product-thumbnail d-block" href="single-product.html"><img class="mb-2"

                  src="img/product/4.png" alt=""></a>

              <!-- Product Title --><a class="product-title" href="single-product.html">Polo Shirts</a>

              <!-- Product Price -->

              <p class="sale-price">$38<span>$41</span></p>

              <!-- Rating -->

              <div class="product-rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                  class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>

              <!-- Add to Cart --><a class="btn btn-success btn-sm" href="#"><i class="fa-solid fa-plus"></i></a>

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- Rating & Review Wrapper -->

    <div class="rating-and-review-wrapper bg-white py-3 mb-3 dir-rtl">

      <div class="container">

        <h6>Ratings &amp; Reviews</h6>

        <div class="rating-review-content">

          <ul class="ps-0">

            <!-- Single User Review -->

            <li class="single-user-review d-flex">

              <div class="user-thumbnail"><img src="img/bg-img/7.jpg" alt=""></div>

              <div class="rating-comment">

                <div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                    class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>

                </div>

                <p class="comment mb-0">Very good product. It's just amazing!</p><span class="name-date">Designing

                  World 12 Dec 2022</span><a class="review-image mt-2 border rounded" href="img/product/3.png"><img

                    class="rounded-3" src="img/product/3.png" alt=""></a>

              </div>

            </li>

            <!-- Single User Review -->

            <li class="single-user-review d-flex">

              <div class="user-thumbnail"><img src="img/bg-img/8.jpg" alt=""></div>

              <div class="rating-comment">

                <div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                    class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>

                </div>

                <p class="comment mb-0">Very excellent product. Love it.</p><span class="name-date">Designing World 8

                  Dec 2022</span><a class="review-image mt-2 border rounded" href="img/product/4.png"><img

                    class="rounded-3" src="img/product/4.png" alt=""></a><a

                  class="review-image mt-2 border rounded" href="img/product/6.png"><img class="rounded-3"

                    src="img/product/6.png" alt=""></a>

              </div>

            </li>

            <!-- Single User Review -->

            <li class="single-user-review d-flex">

              <div class="user-thumbnail"><img src="img/bg-img/9.jpg" alt=""></div>

              <div class="rating-comment">

                <div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

                    class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>

                </div>

                <p class="comment mb-0">What a nice product it is. I am looking it's.</p><span

                  class="name-date">Designing World 28 Nov 2022</span>

              </div>

            </li>

          </ul>

        </div>

      </div>

    </div>

    <!-- Ratings Submit Form-->

    <div class="ratings-submit-form bg-white py-3 dir-rtl">

      <div class="container">

        <h6>Submit A Review</h6>

        <form action="#" method="">

          <div class="stars mb-3">

            <input class="star-1" type="radio" name="star" id="star1">

            <label class="star-1" for="star1"></label>

            <input class="star-2" type="radio" name="star" id="star2">

            <label class="star-2" for="star2"></label>

            <input class="star-3" type="radio" name="star" id="star3">

            <label class="star-3" for="star3"></label>

            <input class="star-4" type="radio" name="star" id="star4">

            <label class="star-4" for="star4"></label>

            <input class="star-5" type="radio" name="star" id="star5">

            <label class="star-5" for="star5"></label><span></span>

          </div>

          <textarea class="form-control mb-3" id="comments" name="comment" cols="30" rows="10"

            data-max-length="200" placeholder="Write your review..."></textarea>

          <button class="btn btn-primary" type="submit">Save Review</button>

        </form>

      </div>

    </div> --}}

</div>

@endsection