@extends('website.layout.app')
@section('content')


<div class="video-main">
    <div class="banner">
        <div class="banner-text">
            <h3>Videos</h3>
        </div>
    </div>
    <div class="container">
        <div class="breadcrumb-area">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}"><i class="fa-solid fa-house"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Insights</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Videos</li>
                </ol>
            </nav>
        </div>
        <div class="row">
        @foreach($videos as $video)
            <div class="col-lg-4 col-md-6">
                <div class="video-box text-center">
                        <img src="{{asset($video->thumbnail_image)}}" class="img-fluid" alt="{{ $video->alt_image ?? '' }}">
                        <!-- <button class="play-btn" href="#" data-bs-toggle="modal" data-bs-target="#video-open-inpage"></button> -->
                        <button class="play-btn" onclick="videoModal('{{$video->link}}')"></button>
                    <div class="text-area">
                        <p>{{$video->title ?? ''}}</p>
                    </div>
                </div>
            </div>
        @endforeach
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="video-open-inpage" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <iframe id="videoIframe" width="100%" height="400px" src=""></iframe>
      </div>
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div> -->
    </div>
  </div>
</div>

@endsection

@section('js')
<script type="text/javascript">
   function videoModal(link)
   {
     $('#video-open-inpage').modal('show');
     document.getElementById('videoIframe').src = link;
   }
   $("#video-open-inpage").on('hidden.bs.modal', function (e) {
    $("#video-open-inpage iframe").attr("src", $("#video-open-inpage iframe").attr("src"));
});
</script>
@endsection