@extends('layouts/main')
@section('content')
	<h1>Ejercicio: <small>{{$exercise->name}}</small></h1>
	<div class='col-md-12'>	
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3>{{$exercise->name}}</h3>	
			</div>
	  		<div class="panel-body">
	  			<div class='col-md-6'>
	  				<p>	
							<strong>Descripción detallada: </strong> {{$exercise->long_description}}<br/>
							<strong>Grupo muscular principal:</strong> {{$exercise->muscle_group_principal()->first()->name}}<br/>
							<strong>Grupo muscular secundario:</strong> {{$exercise->muscle_group_secundario()->first()->name}}<br/>
						</p>
						<div class="row">
							<h3>Imagenes de apoyo</h3>
							<div>
							@foreach($exercise->extra_images_path() as $image)
								<div class="col-md-4">
									<a href="{{$image['image_path']}}" title="Imagen {{$image['id']}}" data-gallery>
										<img src="{{$image['image_path']}}" width="120px" heigth="120px" class="img-rounded">
									</a>
									<div class="caption">
										<a class="badge" onclick="del_image({{$image['id']}})">Eliminar</a>
									</div>
								</div>
								{!! Form::open(["route" => ['exercise_image.destroy', $image['id']], "method"=>"DELETE", "id"=>"del_image_".$image['id']]) !!}
								{!! Form::close() !!}
							@endforeach
							</div>
						</div>
	  			</div>
	  			<div class='col-md-6'>
	  				<div class="row">
					  <div class="col-md-offset-2 col-md-8">
					    <div class="thumbnail">
					      <img src="{{$exercise->animation_path()}}" class="" alt="Ejercicio"> 
					      <div class="caption">
					        <h3>{{$exercise->name}}</h3>
					        <p>{{$exercise->description}}
					        </p>
					      </div>
					    </div>
					  </div>
					</div>	
	  			</div>
	  			<div class="col-md-12">
	  				<div class="pull-right">
		  				<a href="{{route('exercises.edit',[$exercise->id])}}" class="btn btn-success">Editar</a>
		  			</div>
	  			</div>
	  		</div>
		</div>
	</div>
	<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
  <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
  </div>
  @foreach($exercise->extra_images_path() as $image)	
		<form method="POST" action="{{route('exercise_image.destroy',[$image['id']])}}" accept-charset="UTF-8" id="del_image_{{$image['id']}}">
			<input name="_method" type="hidden" value="DELETE">
			{{Form::token()}}
		</form>
	@endforeach	
@endsection
@section('breadcrumbs')
	{!! Breadcrumbs::render('exercises', 'show', $exercise) !!}
@endsection
@section('scripts')
    <!-- blueimp gallery -->
	<script src="/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
	<script type="text/javascript">
		function del_image(id){
			$("#del_image_"+id).submit();
		}
	</script>
@endsection