@include('layout.header')

<section id="content">
  <section class="bgGrey py-4">

    <div id="listProduk">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="designStandar mb-3">
              <div class="heading mb-2">
                <h2>{{$title}}</h2>
                {{-- <a href="#">Lihat Lainnya</a> --}}
              </div>
              <div id="listVideo" class="pb-2">
                <div class="container">
                  <div class="row">
                    @foreach ($list as $item)
                    <div class="col-6 col-lg-3 p-1 boxVideos">
                      <div class="boxVideo">
                                                <img src="https://img.youtube.com/vi/{{$exp[1]}}/maxresdefault.jpg" alt="{{$item->title}}">
                        <div class="descVideo">
                          <p>{{$item->title}}</p>
                        </div>
                        <div class="boxPlay cursor-pointer" data-toggle="modal" data-target="#video{{$item->id}}">
                          <img src="{{asset('assets')}}/img/iconPlay.png" alt="{{$item->title}}">
                        </div>
                      </div>
                    </div>
                    
                    {{-- Vide Modal --}}
                    <div id="video{{$item->id}}" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="videoWrapper">
                            <!-- Copy & Pasted from YouTube -->
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/{{$exp[1]}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endforeach
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>

  </section>
</section>

@include('layout.footer')