@extends('BaseSistemaWeb')

@section('CSS')
{{-- HTML::style('VideoJS/video-js.css') --}}
{{-- HTML::script('VideoJS/videojs-ie8.min.js') --}}
<style type="text/css">
	.row.modulos {
		flex-wrap: wrap;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
	}
</style>
@stop

@section('Contenido')
<div class="row">
	<div class="col-md-12">
		<h2><i class="fa fa-video-camera"></i> Video Tutoriales </h2>
	</div><!--/col-md-12-->
</div><!--/row-->

<div class="row modulos">
	@forelse($Modulos as $key => $Modulo)
	<div class="col-md-3 {{ $key+1 }}" @if( $key+1 > 13 ) style="display: none;" @endif >
		<div class="block-web">
			<h3 class="content-header text-center"> <strong> {{ $Modulo->titulo }} </strong> </h3>
			{{--<div class="panel-icon-add">
				<img src="{{ asset('SysWeb/VideoTutoriales/Modulos/Miniaturas/'.$Modulo->imagen) }}" class="img-thumbnail" alt="{{ $Modulo->titulo }}" width="304" height="236">
			</div>
			<p class="text-center"> {{ $Modulo->descripcion }} </p>--}}
			<div class="row">
				<div class="col-md-12">
					<img src="{{ asset('SysWeb/VideoTutoriales/Modulos/Miniaturas/'.$Modulo->imagen) }}?v={{ date('H:i:s') }}" class="img-thumbnail center-block" alt="{{ $Modulo->titulo }}">
				</div>
			</div>
			<br>
			<div class="row">
				<div class="col-md-10">
										<div class="progress progress-hieght">
						<div class="progress-bar progress-bar-{{ $barra }}" role="progressbar" aria-valuenow="{{ $porcentaje }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $porcentaje }}%;"> {{ $porcentaje }}% </div>
					</div>
				</div>
				<div class="col-md-2">
					<span class="@if($Modulo->orden == 1 || $activo) text-success @else text-danger @endif"> <i class="fa @if($Modulo->orden == 1 || $activo) fa-unlock @else fa-lock @endif"></i> </span>
				</div>
				<div class="col-md-12">
					@if($activo)
					<a href="{{ URL::route('SysWebVTutorialesModulosClientesVideos', array($Modulo->id)) }}" class="btn btn-primary btn-block" @if(!$activo) disabled @endif> Ver videos </a>
					@else
					<a href="#" class="btn btn-primary btn-block" @if(!$activo) disabled @endif> Ver videos </a>
					@endif
				</div>
			</div>
		</div>
	</div>
	@empty
	@endforelse
</div><!--/row end-->
@stop

@section('JS')
{{-- HTML::script('VideoJS/video.js') --}}
@stop

@section('JSOr')
@stop