@extends('layouts.student')

@section('content')

				<!--App-Content-->
				<div class="app-content my-3 my-md-5">
	<!-- added on import -->
	{{-- https://cdn.jwplayer.com/libraries/ofWphJCc.js
					 --}}
<div class="row">
	<div class="col-md-2"></div>
	<div class="col-md-8 pt-9">
		@if ($url->first())
		<label class="h2">{{$url->first()->mtitle}}</label>
		@else
		<label class="h2">No Recordings Found</label>
		@endif
	</div>

</div>
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8 pt-5">


				{{-- <script id = "video-script" src="{{$url}}"></script>
				 --}}
				 @php
					 $i = 0;
				 @endphp
				
				 @foreach ($url as $my_url )
				<style>

.myvideo:hover {
  border-color: rgba(247, 171, 100, 0.7);
  box-shadow: 0px 0px 10px 2px rgba(247, 171, 100, 0.6);
}
.myvideo{
  transition: border-color 1s, box-shadow 0.5s;
}

				</style>
				 <div class="card">

				<div class="card-header">
					<h3 style="text-align: center;" class="card-title">{{($i+1).'- '.$my_url->rtitle}}</h3>
				</div>
				<div class="card-body">

				 <div id="myVideo-{{$i}}" class="myvideo"></div>

				 <script src="https://player.vimeo.com/api/player.js"></script>
				 <script id = "video-script-{{$i}}" >
				   var options = {
					 url: "{{$my_url->rvimeo_player_embed_url}}",
					 width: 800,
					 responsive:true,
				   };
				 
				   var videoPlayer = new Vimeo.Player('myVideo-{{$i}}', options);
				 
				   videoPlayer.on('play', function() {
					 console.log('Played the video');
				   });
				 </script>

				@php
					$i++;
				@endphp
				</div>
				 </div>
				 @endforeach
			

		</div>


		<script type="text/javascript">
			window.addEventListener('load', function () {
			 var script= document.getElementById('video-script');
			script.remove();
			})
				</script>
	</div>
				
@endsection