@extends('portal.includes.layout')

@section('title', trans("home.title"))
@section('description', trans("home.description"))

@section('content')

<div class="container">
        <div class="row">
            <div class="col-xs-12 text-center">
            <!---->
                <h1 class="texto-8 negro">{!! trans("home.destacado_1") !!}</h1>
                <br>
                <div id="carousel-home-header" class="carousel slide" data-ride="carousel" data-interval="10000">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-home-header" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-home-header" data-slide-to="1"></li>
                    <li data-target="#carousel-home-header" data-slide-to="2"></li>
                    <li data-target="#carousel-home-header" data-slide-to="3"></li>
                    <li data-target="#carousel-home-header" data-slide-to="4"></li>
                    <li data-target="#carousel-home-header" data-slide-to="5"></li>
                    <li data-target="#carousel-home-header" data-slide-to="6"></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active">
                      <img src="/img/cabeceras/img1_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_1') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img2_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_2') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img3_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_3') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img4_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_4') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img5_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_5') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img6_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_6') }}">
                    </div>
                    <div class="item">
                      <img src="/img/cabeceras/img7_{{ app('translator')->getLocale() }}.png" class="img-responsive center-block" alt="{{ trans('home.carousel_7') }}">
                    </div>
                  </div>

                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-home-header" role="button" data-slide="prev"></span>
                  <span class="flecha"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#carousel-home-header" role="button" data-slide="next">
                  <span class="flecha"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="total bg-gris-2">
        <div class="container text-center">
            <div class="row">
                <div class="col-xs-12">
                    <p class="texto-2 granate">
                        {!!  trans("home.text_1")  !!}
                        <br>
                        <span class="texto-1 gris-2">
                            {!!  trans("home.text_2")  !!}
                        </span>
                    </p>
                    <br>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('students-courses') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("generales.alumnos")  !!}</span>
                        <br>
                        <div class="bot-circle-1 students">
                            <span class="icons-students"><span class="sr-only">{!!  trans("home.text_12")  !!}</span></span>
                        </div>
                        <br>
                        <p class="texto-3 gris-2" style="padding: 0 10%;">{!!  trans("home.text_13")  !!}</p>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('prj_sponsors') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("home.text_4")  !!}</span>
                        <br>
                        <div class="bot-circle-1 sponsors">
                            <span class="icons-sponsors"><span class="sr-only">{!!  trans("home.text_14")  !!}</span></span>
                        </div>
                        <br>
                        <p class="texto-3 gris-2" style="padding: 0 10%;">{!!  trans("home.text_15")  !!}</p>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('prj_organizations') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("home.text_5")  !!}</span>
                        <br>
                        <div class="bot-circle-1 organizations">
                            <span class="icons-organizations"><span class="sr-only">{!!  trans("home.text_16")  !!}</span></span>
                        </div>
                        <br>
                        <p class="texto-3 gris-2" style="padding: 0 10%;">{!!  trans("home.text_17")  !!}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="total bg-gris">
        <div class="container text-center">
            <div class="row">
                <div class="col-xs-12">
                    <p class="texto-2 granate">
                        {!!  trans("home.text_6")  !!}
                        <br>
                        <span class="texto-1 gris-2">
                            {!!  trans("home.text_6_1")  !!}
                        </span>
                    </p>
                    <br>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('trainers_list') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("generales.profesores")  !!}</span>
                        <br>
                        <div class="bot-circle-2 trainers">
                            <span class="icons-trainers"><span class="sr-only">{!!  trans("home.text_18")  !!}</span></span>
                        </div>
                        <br>
                        <p class="texto-3 gris-3" style="padding: 0 10%;">{!!  trans("home.text_19")  !!}</p>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('prj_managers') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("home.text_8")  !!}</span>
                        <br>
                        <div class="bot-circle-2 pm">
                            <span class="icons-pm"><span class="sr-only">{!!  trans("home.text_8")  !!}</span></span>
                        </div>
                        <p class="texto-3 gris-3" style="padding: 0 10%;">{!!  trans("home.text_20")  !!}</p>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="{{ route('prj_consultants') }}" class="bot-1">
                        <span class="texto-2 gris-2">{!!  trans("home.text_9")  !!}</span>
                        <br>
                        <div class="bot-circle-2 consultant">
                            <span class="icons-consultant"><span class="sr-only">{!!  trans("home.text_21")  !!}</span></span>
                        </div>
                        <br>
                        <p class="texto-3 gris-3" style="padding: 0 10%;">{!!  trans("home.text_22")  !!}</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>
                    <span class="texto-4 granate uppercase">{!!  trans("generales.cursos")  !!}</span>
                    <span class="texto-1 gris-2">{!!  trans("home.text_10")  !!}</span>
                </h2>
                <br class="visible-xs">
                <a href="{{ route('courses_list') }}" class="bot-2 pull-right">{!!  trans("generales.all_courses")  !!}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="wrapperCarrusel">
                    <div class="carrusel" id="carr-1">
                    	                    @foreach ($courses['1'] as $item)
						    <div>
	                            <div class="diapo {{ $countCarr1 == 0 ? 'primer' : '' }}" data-descripcion="{{ $item->descripcion }}">
	                                <a href="{{ route('course_detail', [ 'id' => $item->id ]) }}">
	                                    <img src="{{ env('RESOURCES_URI') . 'cursos/cursos/' .  $item->img_curso }}" alt="{{ $item->titulo }}">
	                                </a>
	                            </div>
	                        </div>
                        						@endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <br>
                <span class="destaca-1 text-center center-block" id="txt-carr-1"></span>
            </div>
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-xs-12">
                <h2>
                    <span class="texto-4 granate uppercase">{!!  trans("generales.cursos")  !!}</span>
                    <span class="texto-1 gris-2">{!!  trans("home.text_11")  !!}</span>
                </h2>
                <br class="visible-xs">
                <a href="{{ route('courses_list') }}" class="bot-2 pull-right">{!!  trans("generales.all_courses")  !!}</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="wrapperCarrusel">
                    <div class="carrusel" id="carr-2">
                    	                    @foreach ($courses['2'] as $item)
						    <div>
	                            <div class="diapo {{ $countCarr2 == 0 ? 'primer' : '' }}" data-descripcion="{{ $item->descripcion }}">
	                                <a href="{{ route('course_detail', [ 'id' => $item->id ]) }}">
	                                    <img src="{{ env('RESOURCES_URI') . 'cursos/cursos/' .  $item->img_curso }}" alt="{{ $item->titulo }}">
	                                </a>
	                            </div>
	                        </div>
						@endforeach
                                            </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <span class="destaca-1 text-center center-block" id="txt-carr-2"></span>
            </div>
            <br><br>
            <hr class="tipo-1"><br><br><hr class="tipo-1">
            <div class="contenedor-partners ">
              <div class="partners">
                {{ trans('generales.partners') }}
                <br><br>
                  <a href="http://www.select-ing.es" target="_blank"><img src="/img/partners/select-ing.jpg" alt="Select Ing"></a>
                <br><br>
				           <a href="http://www.praiker.es" target="_blank"><img src="/img/partners/logo_praiker.png" alt="Praiker"></a>
                   <br><br>
   				           <a href="https://pmofficersconsulting.com/" target="_blank"><img src="/img/partners/LogoPMOfficers1.png" alt="PMOfficers Consulting "></a>			                   	
              </div>
            </div>
        </div>
    </div>
	<!-- SLICK -->
    <link rel="stylesheet" href="/js/vendor/slick/slick.css">
    <script src="/js/vendor/slick/slick.min.js"></script>

    <script type="text/javascript">
    $(function() {
        /*$('#carr-1 .diapo a').on('mouseover', function(e){
            var desc = $(this).parent().attr('data-descripcion');
            $('#txt-carr-1').text(desc);
        });

        $('#carr-2 .diapo a').on('mouseover', function(e){
            var desc = $(this).parent().attr('data-descripcion');
            $('#txt-carr-2').text(desc);
        });*/

        $('.carrusel').slick({
            dots: false,
            arrows: true,
            centerMode: true,
            centerPadding: '0',
            slidesToShow: 5,
            responsive: [{
                breakpoint: 992,
                settings: {
                    arrows: true,
                    centerMode: false,
                    slidesToShow: 2
                }
            }, {
                breakpoint: 480,
                settings: {
                    arrows: true,
                    centerMode: false,
                    slidesToShow: 1
                }
            }]
        });

            $('.carrusel#carr-2').on('afterChange', function(e, slick, currentSlide){
              var desc = $('#carr-2 [data-slick-index="' + currentSlide + '"]').find('.diapo').attr('data-descripcion');
              $('#txt-carr-2').text(desc);
            });

            $('.carrusel#carr-1').on('afterChange', function(e, slick, currentSlide){
              var desc = $('#carr-1 [data-slick-index="' + currentSlide + '"]').find('.diapo').attr('data-descripcion');
              $('#txt-carr-1').text(desc);
            });

              $('#txt-carr-1').text($('#carr-1 .slick-current').find('.diapo').attr('data-descripcion'));
              $('#txt-carr-2').text($('#carr-2 .slick-current').find('.diapo').attr('data-descripcion'));

    });
    </script>

@stop