@extends('portal.includes.layout')

@section('content')
    <div class="container container-up">
        <div class="row">
            <div class="col-xs-12"><img class="img-responsive center-block" src="/img/cabeceras/course-details.png" alt=""></div>
        </div>
    </div>
    <br>
    <div class="container">
        
        <div class="row">
            <div class="col-xs-12">
                <div class="row content-1">
                    <div class="col-xs-12 col-sm-4 text-center">
                        <img src="{{ env('RESOURCES_URI') . 'cursos/cursos/' .  $course->img_curso }}" class="img-responsive center-block" alt="">
                        @if(!empty($course->file_programa))
                        <br>
                        <a href="{{ env('RESOURCES_URI') . 'cursos/programas/' .  $course->file_programa }}" class="icons-bot-pdf-1 text-uppercase" target="_blank"><span>{{ trans('generales.program') }}</span></a>
                        @endif
                        <br>
                        <br>
                        <span class="texto-10 gris-4 text-uppercase">{{ trans('generales.duration') }}:</span>
                        <br>
                        <span class="texto-11 gris-2">{{ $course->duracion }}</span>
                        <br>
                        <br>
                        <span class="texto-10 gris-4 text-uppercase">{{ trans('generales.price') }}:</span>
                        <br>
                        <span class="texto-6 gris-2">{{ $course->precio }}€</span>
                        <br>
                        @if(!empty($course->precio_dolar))
                        <span class="texto-6 gris-2">{{ $course->precio_dolar }}$</span>
                        <br>
                        @endif
                        @if(sizeof($course->planificaciones) > 0)
                        <br>
                        <a href="{{ route('course_call', [ 'id' => $course->id ]) }}" class="bot-2">{{ trans('generales.see_plannings') }}</a>
                        <br>
                        <br>
                        @endif
                        <br>
                    </div>
                    <div class="col-xs-12 col-sm-8">
                        <div class="row">
                            <div class="col-xs-12 text-center">
                                <h3 class="texto-6 azul-1">{{ $course->titulo }}</h3>
                                <span class="texto-7 gris-2">{{ $course->descripcion }}</span>
                                <br>
                                <br>
                                <br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <p class="texto-1 gris-2">{!! $course->texto !!}</p>
                                <br>
                                <p class="texto-8 gris-4 text-uppercase">
                                    {{ trans('generales.targets') }}:
                                </p>
                                <div class="list-unstyled list-checks texto-9 gris-5">
                                    {!! $course->objetivos !!}
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                </div>
                
                @if(sizeof($course->modulos_cursos) > 0)
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-sm-offset-4">
                        <p class="texto-8 gris-4 text-uppercase">{{ trans('generales.modules') }}:</p>
                    </div>
                    <div class="col-xs-12">
                        <div class="row list-modulos">
                            @foreach($course->modulos_cursos as $item)
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
                                <span class="wrap-modulo" data-toggle="tooltip" data-placement="top" title="{{ $item->texto_modulo }}"><img class="img-responsive" src="{{ env('RESOURCES_URI') . 'modulos/' .  $item->img_modulo_modulo }}" data-hover="{{ env('RESOURCES_URI') . 'modulos/' .  $item->img_modulo_hover_modulo }}" alt=""></span>
                                <br><br>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                @if( !empty($course->url_youtube_1) || !empty($course->url_youtube_2) || !empty($course->url_youtube_3)) 
                <div class="row">
                    <div class="col-xs-12 col-sm-8 col-sm-offset-4">
                        <p class="texto-8 gris-4 text-uppercase">{{ trans('generales.videos') }}:</p>
                    </div>
                    <div class="col-xs-12">
                        <div class="row">
                            
                            @if( !empty($course->url_youtube_1)) 
                            <div class="col-xs-12 col-sm-4 text-center">
                                <a href="{{ $course->url_youtube_1 }}" target="_blank">
                                    <img src="/img/ico-video.png">
                                    <br><br>
                                    <p class="texto-7 gris-4 text-uppercase">{{ trans('generales.videos_cut') }} 1</p>
                                </a>
                            </div>
                            @endif

                            @if( !empty($course->url_youtube_2)) 
                            <div class="col-xs-12 col-sm-4 text-center">
                                <a href="{{ $course->url_youtube_2 }}" target="_blank">
                                    <img src="/img/ico-video.png">
                                    <br><br>
                                    <p class="texto-7 gris-4 text-uppercase">{{ trans('generales.videos_cut') }} 2</p>
                                </a>
                            </div>
                            @endif

                            @if( !empty($course->url_youtube_3)) 
                            <div class="col-xs-12 col-sm-4 text-center">
                                <a href="{{ $course->url_youtube_3 }}" target="_blank">
                                    <img src="/img/ico-video.png">
                                    <br><br>
                                    <p class="texto-7 gris-4 text-uppercase">{{ trans('generales.videos_cut') }} 3</p>
                                </a>
                            </div>
                            @endif
                            
                        </div>
                    </div>
                </div>
                @endif
                
                <div class="row">
                    <div class="col-xs-12">
                    <br><br>    
                        <a href="javascript: history.back();" class="bot-back">{{ trans('generales.back') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();

        var default_img = '';

        $('.list-modulos img').on('mouseover', function(e){
            default_img = $(this).attr('src');
            var over = $(this).attr('data-hover');
            $(this).attr('src', over);
        });

        $('.list-modulos img').on('mouseout', function(e){
            $(this).attr('src', default_img);
        });
    });
    </script>
    
@stop