@extends('pwa.template.app.main')
@section('app-content')
{{-- <div class="blog-details-post-thumbnail" style="background-image: url('{{ asset('storage/' . $pelatihan->file) }}')">
<div class="container">
    <div class="post-bookmark-wrap">
        <!-- Post Bookmark--><a class="post-bookmark" href="#"><i class="fa-solid fa-bookmark"></i></a>
    </div>
</div>
</div> --}}
<div class="container px-0 ">
    <img src="{{ asset('storage/' . $pelatihan->file) }}" alt="">
    <div class="product-description pb-3">
        <!-- Product Title & Meta Data-->
        <div class="product-title-meta-data bg-white mb-3 py-3 dir-rtl" style="border-radius: 0;">
            <div class="container">
                <h5 class="post-title d-flex justify-content-between">
                    <span> {{ $pelatihan->judul }}</span>
                    <span class="text-muted fs-6">{{ date_format(date_create($pelatihan->tanggal), 'd M Y') }}</span>
                </h5>
                <a class="post-catagory mb-3 d-block" href="#">{{ $pelatihan->kategori }}</a>
            </div>
        </div>
        <div class="post-content bg-white py-3 mb-3 dir-rtl h-100">
            <div class="container">
                {!! $pelatihan->deskripsi !!}
            </div>
        </div>
        <div class="product-title-meta-data bg-white mt-3 py-3 dir-rtl" style="border-radius: 0;">
            <div class="container">
                <h5 class="post-title d-flex justify-content-between">
                    <span> Produk terkait </span>
                </h5>
                <div class="row">
                    @forelse ($produk as $p)
                    <div class="col-5 col-md-4">
                        <a href="{{ route('produk-detail', $p->id) }}">
                            <div class="card product-card" style="height: 100%;">
                                <div class="card-body">
                                    <div class="produks">
                                        <div class="produk-f">
                                            <!-- Thumbnail -->
                                            <div class="product-thumbnail d-block"><img class="pic-produk mb-2"
                                                    src="{{ asset('storage/' . $p->foto) }}" alt=""
                                                    style="object-fit: cover;">
                                            </div>
                                        </div>
                                        <div class="produk-lt mt-2">
                                            <!-- Product Title -->
                                            <div class="product-title" style="color: #45b05a;">{{ $p->nama }}</div>
                                            <!-- Product Price -->
                                            <p class="sale-price">@currency($p->harga)</p>
                                            <!-- Rating -->
                                            <div class="footer-produk">


                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @empty 
                    <div class="col-12">
                      Tidak ada produk terkait
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
        {{-- <!-- All Comments-->
      <div class="rating-and-review-wrapper bg-white py-3 mb-3 dir-rtl">
        <div class="container">
          <h6>Comments (3)</h6>
          <div class="rating-review-content">
            <ul class="ps-0">
              <li class="single-user-review d-flex">
                <div class="user-thumbnail mt-0"><img src="img/bg-img/7.jpg" alt=""></div>
                <div class="rating-comment">
                  <p class="comment mb-0">Very good product. It's just amazing!</p><span class="name-date">Designing World
                    12 Dec 2022</span>
                </div>
              </li>
              <li class="single-user-review d-flex">
                <div class="user-thumbnail mt-0"><img src="img/bg-img/8.jpg" alt=""></div>
                <div class="rating-comment">
                  <p class="comment mb-0">Very excellent product. Love it.</p><span class="name-date">Designing World 8
                    Dec 2022</span>
                </div>
              </li>
              <li class="single-user-review d-flex">
                <div class="user-thumbnail mt-0"><img src="img/bg-img/9.jpg" alt=""></div>
                <div class="rating-comment">
                  <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>
      <!-- Comment Form-->
      <div class="ratings-submit-form bg-white py-3 dir-rtl">
        <div class="container">
          <h6>Submit A Comment</h6>
          <form action="#" method="">
            <div class="mb-3">
              <textarea class="form-control" id="comments" name="comment" cols="30" rows="10"
                placeholder="Write your comment..."></textarea>
            </div>
            <button class="btn btn-primary" type="submit">Post Comment</button>
          </form>
        </div>
      </div> --}}
    </div>
</div>
@endsection