@extends('layouts.list-corsi')

@section('page-title', 'Elenco Corsi')
@section('page-heading', 'Elenco Corsi')

@section('content')
@include('partials.messages')
<div class="selettore">
	@foreach($categorie as $categoria)
		<div class="bottone-selettore cat-{{$categoria->id}} @if($categoria->id==1) attivo @endif" data-id="{{$categoria->id}}"><img src="{{ url('assets/img/'.$categoria->id.'.png' )}}" alt="{{$categoria->nome}}"></div>
	@endforeach
</div>
<div class="contenuto-corsi">
	<div class="container">
		@foreach($categorie as $categoria)
			<div class="tab-corsi corsi-{{$categoria->id}} @if($categoria->id==1) attivo @endif">
				<div class="row">
					@foreach($corsi as $corso)
						@if($corso->id_categoria==$categoria->id)
							<div class="col-md-4">
								<div class="box-video">
									<div class="box-video-play">
										<div class="copertina-video"></div>
										@php
											$video = explode('/',$corso->url);
										@endphp
										@if(count($video)>6)<iframe src="https://drive.google.com/file/d/{{$video[5]}}/preview"></iframe>@endif
									</div>
									<h3>{{$corso->titolo}}</h3>
								</div>
							</div>
						@endif
					@endforeach
				</div>
			</div>
		@endforeach
	</div>
</div>
@stop

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