@extends('portal.includes.layout')

@section('title', trans('project_pages.students_title'))
@section('description', trans('project_pages.students_description'))

@inject('auth', 'App\Http\Controllers\Portal\AuthController')

@section('content')

    <div class="container container-up">
        <div class="row">
            <div class="col-xs-12"><img class="img-responsive center-block" src="/img/cabeceras/students.png" alt=""></div>
        </div>
    </div>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center">
                <ul class="list-unstyled list-inline list-nav-sec">
                    <li><a href="{{ route('trainers_list') }}">{{ trans('generales.profesores') }}</a></li>
                    <li><a href="{{ route('students-courses') }}" class="active">{{ trans('generales.alumnos') }}</a></li>
                    <li><a href="{{ route('q-and-a') }}">{{ trans('generales.faq') }}</a></li>
                    <li><a href="{{ route('resources') }}">{{ trans('generales.resources') }}</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <h1 class="granate texto-8">{!!  trans("static.student_courses.head_1")  !!}</h1>
                <p>
                    {!!  trans("project_pages.students_text")  !!}
                <a name="video"></a>
                </p>
            </div>
        </div>
        <p><span class="texto-10 gris-4  text-center" >{!!  trans("project_pages.video_lead-in_title")  !!}</span></p>
        <p>
            {!!  trans("project_pages.video_lead-in_text")  !!}
            <br>
        </p>
        <videoIncrustado>
          <div class="video-responsive">
            <iframe width="800" height="600" src="https://www.youtube.com/embed/oqfE7eXWsew" frameborder="0" allowfullscreen></iframe>
          </div>
          <pieVideo>
            Certificación PMP® - Cálculo del camino crítico (CPM)
          </pieVideo>
        </videoIncrustado>

        <div class="row margin-top-40">
            <div class="col-xs-12">
                <h2 class="granate texto-8" style="text-align:left;">{!!  trans("project_pages.students_text_6")  !!}</h2>
            </div>
        </div>
        <div class="row">

            <div class="col-xs-12 col-sm-5 pull-right">
                <br>
                <br>
                <ul class="pull-right list-inline">
                    <li>
                        <span class="texto-1">{!!  trans("generales.certified_by")  !!}
                        <input type="checkbox" id="check-certified" checked>
                        <label for="check-certified"></label>
                    </span>
                    </li>
                    <li>
                        <span class="texto-1">{!!  trans("generales.skills")  !!}
                        <input type="checkbox" id="check-skills" checked>
                        <label for="check-skills"></label>
                    </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <br>
                <br>
                <!-- HEADER -->
                <div class="row table-header-1 hidden-xs hidden-sm">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-2">
                        <span class="texto-11 gris-4">{!!  trans("generales.title")  !!}</span>
                    </div>
                    <div class="col-xs-4">
                        <span class="texto-11 gris-4">{!!  trans("generales.description")  !!}</span>
                    </div>
                    <div class="col-xs-2">
                        <span class="texto-11 gris-4">{!!  trans("generales.language")  !!}</span>
                    </div>
                    <div class="col-xs-2 text-center">
                        <span class="texto-11 gris-4">{!!  trans("generales.clasification")  !!}</span>
                    </div>
                    <div class="col-xs-1 text-center">
                        <span class="texto-11 gris-4">{!!  trans("generales.pdus")  !!}</span>
                    </div>
                </div>
                <!-- ROWS OF CONTENT -->

                @foreach ($courses as $item)
                @if(sizeof($item->planificaciones) > 0)
                <!-- ROW -->
                <a href="{{ route('course_call', [ 'id' => $item->id ]) }}">
                <div class="row table-row-1 students text-left" data-id-tipo-curso="{{ $item->id_tipo_curso }}">
                    <div class="col-xs-4 col-md-1 ">
                        <img src="{{ env('RESOURCES_URI') . 'cursos/cursos/' .  $item->img_curso }}" class="img-responsive" alt="">
                    </div>
                    <div class="col-xs-12 col-md-2">
                        <span class="texto-12 gris-2"><strong>{{ $item->titulo }}</strong></span>
                    </div>
                    <div class="col-xs-12 col-md-4">
                        <p>{{ $item->descripcion }}</p>
                    </div>
                    <div class="col-xs-3 col-md-2">
                                        </div>
                    <div class="col-xs-2 col-md-2 text-center">
                        <span class="hidden-md hidden-lg">{!!  trans("generales.clasification")  !!}:<br></span>
                        <span class="texto-12 gris-2">{{ $item->talent }}</span>
                    </div>
                    <div class="col-xs-2 col-md-1 text-center">
                        <span class="hidden-md hidden-lg">{!!  trans("generales.pdus")  !!}:<br></span>
                        <span class="texto-12 gris-2">{{ $item->pdus }}</span>
                    </div>
                </div>
                </a>
                <!-- /ROW -->
                @endif
                @endforeach

            </div>
        </div>
    </div>
    @if($auth->isLogged())

            @if( $auth->isTeacher() === true)

                <div class="row">
                    <div class="col-xs-12 col-sm-12 text-center">
                            <p><span class="texto-10 gris-4">{!!  trans("project_pages.students_text_1")  !!}</span></p>
                            <div class="text-center texto-5">
                                <div style="display: inline-block;"><img src="/img/icons/no-teacher.png" alt=""></div>
                                <div style="display: inline-block;margin-left: 20px; margin-bottom:-20px;" class="text-center">{!!  trans("project_pages.students_text_2")  !!}</div>
                            </div>
                    </div>
                </div>
                @else
                <div class="row">
                    <div class="col-xs-12 col-sm-12 text-center">
                            <p><span class="texto-10 gris-4">{!!  trans("project_pages.students_text_1")  !!}</span></p>
                            <div class="text-center texto-5">
                                <div style="display: inline-block;"><img src="/img/icons/no-teacher.png" alt=""></div>
                                <div style="display: inline-block;margin-left: 20px; margin-bottom:-20px;" class="text-left"><a href="{{ route('show-register-teacher') }}">{!!  trans("project_pages.students_text_3")  !!}</a></div>
                            </div>
                    </div>
                </div>
                @endif

        @else

        <div class="row">
            <div class="col-xs-12 col-sm-12 text-center">

            <p><span class="texto-10 gris-4  text-center" >{!!  trans("project_pages.students_text_4")  !!}</span></p>
            <div class="text-center texto-5">
                <div style="display: inline-block;"><img src="/img/icons/no-teacher.png" alt=""></div>
                <div style="display: inline-block;margin-left: 20px; margin-bottom:-20px;" class="text-left"><a href="javascript:void(0);" data-toggle="modal" data-target="#login-modal">{!!  trans("project_pages.students_text_5")  !!}</a></div>
            </div>
        </div>
            </div>

    @endif

    <script>
     $(function() {
        var listado_certificados = $('[data-id-tipo-curso="1"]');
        var listado_skills = $('[data-id-tipo-curso="2"]');
        $('#check-certified').on('change', function(e){
            $(this).is(':checked') ? listado_certificados.show() : listado_certificados.hide();
        });
        $('#check-skills').on('change', function(e){
            $(this).is(':checked') ? listado_skills.show() : listado_skills.hide();
        });
     });


    </script>

@stop