@extends('layouts.display')
@section('content')
<div class="row">
	<div class="col-sm-6" style="background-color: #22313F; color: #FFF; padding:20px; min-height: calc(100vh - 100px);">
		

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
        @foreach ($currencies->chunk(9) as $chunk)
		<div class="carousel-item @if($x==0) active @endif">
			<table class="table table-condensed table-striped" id="table" style="color: #FFF;">
			<tbody id="tablecontents">
				@foreach($chunk as $currency)
				<tr data-id="{{ $currency->id }}" class="row1">
					<td style="border:none; font-weight: 600; font-size: 16px; max-width: 170px;"><div class="currency-flag currency-flag-{{str_replace(' ', '', strtolower($currency->code))}}"></div> {{$currency->name}}</td>
					<td style="border:none;"><span class="white">Buying</span> <span class="yellow">{{number_format($currency->buying,2)}}</span></td>
					<td style="border:none;"><span class="white">Selling</span> <span class="yellow">{{number_format($currency->selling,2)}}</span></td>
					<td style="border:none;"><span class="white">Mean</span> <span class="yellow">{{number_format($currency->mean,2)}}</span></td>
				</tr>
				@endforeach
			</tbody>
		</table>
	</div>
		@endforeach
  </div>
</div>


		
	</div>

	<div class="col-sm-6 mt-3">
		<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
        @foreach ($videoAdverts as $videoAdvert)
    <div class="carousel-item @if($x==0) active @endif">
    	<div class="embed-responsive embed-responsive-16by9">
            <!-- <iframe class="embed-responsive-item" src="{{url('/')}}/{{$videoAdvert->url}}" allowfullscreen></iframe> -->
            <video width="100%"  autoplay controls>
  <source src="{{asset($videoAdvert->video)}}" type="video/mp4">
  Your browser does not support the video tag.
</video>
        </div>
	</div>
		@endforeach
    @foreach ($imageAdverts as $imageAdvert)
    <div class="carousel-item @if($x==0) active @endif">
    	<img src="{{asset($imageAdvert->image)}}" style="width: 100%;">
	</div>
		@endforeach
			
  </div>
</div>
	</div>
</div>
@endsection

@section('scripts')
<script src="{{url('/')}}/js/clock.js"></script>
<script>
$('video').on('play', function (e) {
    $("#carousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
    $("#carousel").carousel();
});


 	var video = $('video').get(0);
    
    $(document).ready(function(){
    	$('.item.active video').attr('autoplay', 'autoplay'); // To play the current video
    	$('#carousel').on('slid.bs.carousel', function () { // function called when the slide is showed
    var vids = $(this).find(".active video");
   if(vids.length > 0){
      vids[0].pause();
      vids[0].currentTime = 0;
      vids[0].play();
   }
  $('.item video').removeAttr('autoplay'); // To stop all videos
  $('.item.active video').attr('autoplay', 'autoplay'); // To play the current video
});
    });

</script>
@endsection