@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">
            
            @foreach ($list as $item)
            @if(count($item->images))
              <div id="souvenir" class="py-4">
                <div class="container p-0">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="heading mb-3">
                        <h2>{{$item->title}}</h2>
                      </div>
                    </div>
                    <div class="col-lg-12">
                      <div id="carousel-{{$item->id}}" class="owl-carousel owl-theme">
                        @foreach ($item->images as $image)
                        <div class="item">
                          <div class="boxProduk">
                            @if ($image->file != null && $image->file != '')
                              <a href="{{asset($image->file)}}" target="_blank">
                                <div class="boxImg" style="height: 200px;width: 100%;background-size: auto 100%;background-repeat: no-repeat;background-position: top center;background-image: url('{{$image->file}}');">&nbsp;</div>
                              </a>
                            @endif
                            <div class="descProduk">
                              <div class="titleProduk">
                                <a href="{{asset($image->file)}}" target="_blank">
                                  <span>{{$image->title}}</span>
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        @endforeach
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endif
            @endforeach

          </div>
        </div>


      </div>
    </div>

  </section>
</section>
@include('layout.footer')

@foreach ($list as $item)
<script>
$("#carousel-{{$item->id}}").owlCarousel({
  nav: false,
  loop:true,
  margin:10,
  autoplay:true,
  autoplayTimeout: 7000,
  autoplaySpeed: 5000,
  dots : true,
  responsive:{
    0:{
      items:2
    },
    600:{
      items:4
    },
    1000:{
      items:4
    }
  }
});
</script>
@endforeach