@extends('frontend.layouts.app')

@section('title')
    News
@stop

@section('content')
@if (\App::getLocale() == 'my')
<div id="banner" style="background-image: url({{ asset('images/inside_banner_touse_1.jpg') }}); position: relative; margin-top: -50px;">
  <h1 class="text-center text-white mt-5 lang-my">Videos</h1>
</div>
@else
<div id="banner" style="background-image: url({{ asset('images/inside_banner_touse_1.jpg') }}); position: relative; margin-top: -50px;">
  <h1 class="text-center text-white mt-5">Videos</h1>
</div>
@endif

  <div class="container my-5">
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
        @foreach ($videos as $video)
          <div class="col-lg-6 col-md-6 my-4">
            <div class="card">
              <div class="card-body">
                <div class="lang-my">
                  {!! $video->video_path !!}
                </div>
              </div>
              <div class="card-title">
                <h3 class="text-center">{{$video->name}}</h3>
              </div>
            </div>
          </div>
        @endforeach
        </div>
        <div class="row mt-5">
          <div class="col d-flex justify-content-center">
            <div class="pagination">
              {!! $videos->links() !!}
            </div>
          </div>
        </div>
      </div>
  </div>
@stop
@push('scripts')
<script>
  console.log("connected");
  let frame = document.querySelectorAll("iframe");
  frame.forEach(element => element.setAttribute("allowFullScreen", true));
  frame.forEach(element => element.setAttribute("height", "300px"));
  // Refresh the iframe container in order to make fullscreen work properly. 
  // Link https://stackoverflow.com/questions/50875766/javascript-setattribute-iframe-allowfullscreen-doesnt-work-in-chrome
  frame.forEach(element => element.src = element.src);
</script>
@endpush