@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/portada.css') }}" />
@endsection

@section('content')

    <main class="page-main">
        @include('partials.filtro')

        <div class="bodyfull">
            <ul class="js-filter uk-grid-small uk-child-width-1-1 uk-child-width-1-5@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s"
                data-uk-grid>

                @foreach ($cursos as $curso)
                    <li>
                        {{-- <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}"> --}}
                        @if ($curso->visibilidad == 1)
                            <a href="{{ url('/contenido' . '/' . $curso->titulo_rewrite) }}">
                            @else
                                <a href="javascript:void(0)" style="pointer-events: none; cursor: default;">
                        @endif
                        <div class="stream-item">
                            <div class="stream-item__box">
                                <div class="stream-item__media">
                                    <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen }}" alt="image"
                                        style="{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}" />
                                    <div class="stream-item__info">
                                        <div class="stream-item__status"
                                            style="background-color: {{ $curso->etiqueta_fondo }};{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}">
                                            {{ $curso->etiqueta }}
                                        </div>
                                    </div>
                                    <div class="o-course-card__play">
                                        <i class="fas fa-play"></i>
                                    </div>
                                </div>

                                <div class="stream-item__body">
                                    <div class="stream-item__title">{{ $curso->titulo }}</div>
                                    <div class="stream-item__time">
                                        @if (!empty($curso->cursos_dependientes))
                                            <span class="tag"><i class="fa fa-layer-group"></i>
                                                {{ $curso->cantidad_detalles_temp }} Módulos</span>
                                        @else
                                            <span class="tag"><i class="fa fa-book"></i>
                                                {{ $curso->cantidad_detalles_temp }}
                                                Masterclass</span>
                                        @endif

                                        <!-- Calificación con estrellas -->
                                        <span class="rating">
                                            @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= floor($curso->calificacion))
                                                    <i class="fa fa-star full-star"></i> <!-- Estrella llena -->
                                                @elseif ($i - 0.5 == $curso->calificacion)
                                                    <i class="fa fa-star-half-alt half-star"></i> <!-- Media estrella -->
                                                @else
                                                    <i class="fa fa-star empty-star"></i> <!-- Estrella vacía (opcional) -->
                                                @endif
                                            @endfor

                                        </span>
                                    </div>

                                    @if ($curso->costo_promo_final != 0 || $curso->precio_final != 0)
                                        <div class="stream-item__time">
                                            <span class="precio_promo">S/. {{ $curso->costo_promo_final }}</span>
                                            <span class="precio_normal">S/. {{ $curso->precio_final }}</span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                        </div>
                        </a>
                    </li>
                @endforeach

            </ul>
        </div>
    </main>

@endsection