@extends('layouts.list-corsi')

@section('page-title', __('List of Course'))

@if (setting('registration.captcha.enabled'))
    <script src='https://www.google.com/recaptcha/api.js'></script>
@endif

@section('content')

	<div class="selettore">
		<div class="bottone-selettore check attivo" data-id="map">
			<img src="{{ url('assets/img/map-apply.png') }}" alt="Map Aplly">
		</div>
		<div class="bottone-selettore map" data-id="check">
			<img src="{{ url('assets/img/check-go.png') }}" alt="Check Go">
		</div>
	</div>
  
	<div class="contenuto-corsi">
		<div class="tab-corsi tab-map" style="display: block">
			<div class="row">
				@foreach($corsi as $corso)
					@if($corso->id_categoria==1)
						<div class="col-md-6">
							<div class="box-video">
								<iframe width="560" height="315" src="{{$corso->url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
							</div>
						</div>
					@endif
				@endforeach
			</div>
		</div>
		<div class="tab-corsi tab-check">
			@foreach($corsi as $corso)
				@if($corso->id_categoria==2)
					<div class="col-md-6">
						<div class="box-video">
							<iframe width="560" height="315" src="{{$corso->url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						</div>
					</div>
				@endif
			@endforeach
		</div>
	</div>

@stop

@section('scripts')
    <script>
		$('.bottone-selettore').on('click',function(){
			let id=$(this).data('id');
			if($(this).hasClass('attivo')){
				
			}else{
				$('.tab-corsi').fadeOut();
				$('.bottone-selettore').removeClass('attivo');
				$(this).addClass('attivo');
				$('.tab-'+id).fadeIn();
			}
		});
	</script>
@stop