@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/courses-list.png" alt="">
            </div>
        </div>
    </div>
    <br>
    <div class="container">

        <div class="row margin-top-40">
            <div class="col-xs-12 col-sm-12 text-center">
                    <p><span class="texto-10 gris-4">{{  trans("generales.course_list_header")  }}</span></p>
                    <p><a href="{{ route('students-courses')}}" class="bot-2">{{  trans("generales.course_list_header_bt")  }}</a></p>
            </div>
        </div>
        <div class="row margin-top-40">
            <div class="col-xs-12 col-sm-7">
                <h3 class="granate texto-8 text-uppercase">{{ trans('generales.cursos') }}</h3>
            </div>
            <div class="col-xs-12 col-sm-5">
                <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 text-uppercase">{!! trans('generales.skills') !!}
                        <input type="checkbox" id="check-skills" checked>
                        <label for="check-skills"></label>
                    </span>
                    </li>
                </ul>
            </div>
        </div>
        <br/>
        <div class="row listado-cursos">

            @foreach ($courses as $item)
                <div class="col-xs-12 col-sm-6 col-lg-3 no-gap-btwn-cols" data-id-tipo-curso="{{ $item->id_tipo_curso }}" style="height: 440px;">
                    <a href="{{ route('course_detail', [ 'id' => $item->id ]) }}" class="over-course">
                        <dl>
                            <img src="{{ env('RESOURCES_URI') . 'cursos/cursos/' .  $item->img_curso }}" class="img-responsive center-block" alt="">
                            <dt>{{ $item->titulo }}</dt>
                            <dd>{{ $item->descripcion }}</dd>
                        </dl>
                    </a>
                </div>
            @endforeach

        </div>
    </div>

    <script>
     $(function() {
        var listado_certificados = $('.listado-cursos').find('[data-id-tipo-curso="1"]');
        var listado_skills = $('.listado-cursos').find('[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