@extends('layouts.app')
@section('content')

<section id="videos" class="conteudo-internas centraliza">
    <h1 class="titulo-internas">Vídeos</h1>

      <div class="lista-videos">
    @foreach($videos as $index => $video)
        <a href="#" data-toggle="modal" data-target="#modal-lista-videos{{$index}}">
          <figure>
            <img src="{{$video['thumb']}}" alt="" class="img-fluid">
          </figure>

          <div class="box-play">
            <svg class="svg-play-video-dims">
              <use xlink:href="sprite-svg/sprite.svg#play-video"></use>
            </svg>
          </div>
        </a>

      <!-- Modal -->
      <div class="modal fade bd-example-modal-lg" id="modal-lista-videos{{$index}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">{{$video['title']}}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <iframe width="100%" height="415" src="{{$video['embed']}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    @endforeach
      </div>

      <a href="https://www.youtube.com/channel/UCqujjKQF3h8BK89WMC_4DmQ" target="blank" title="Ver todos os vídeos" class="btn btn-secondary btn-block">Ver todos os vídeos</a>

</section>
<!--Fm vídeos-->


@endsection
{{-- @push('scripts')
<script>
 $('.bd-example-modal-lg').on('hide.bs.modal', function(event) {
    $("iframe", this).each(function() {
        var src= $(this).attr('src');
        $(this).attr('src',src);
    });
});
</script>
@endpush --}}