@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') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/portal.css') }}" />
@endsection

@section('content')

    <main class="page-main solo_portal">
        <div class="bodyfull">
            <div class="bienvenida-perfil">
                <div class="uk-flex uk-flex-middle">
                    <!-- Icon Circle -->
                    <div class="uk-border-circle uk-background-secondary uk-flex uk-flex-center uk-flex-middle btn-inicial">
                        <span class="uk-text-bold">{{ $initials }}</span>
                    </div>
                    <!-- Text Content -->
                    <div class="uk-margin-left">
                        <h4 class="uk-margin-remove uk-text-bold">Hola de nuevo, <span
                                id="user-name">{{ $user->nombre }}</span></h4>
                        <a href="{{ url('/cursos') }}" class="uk-link-text uk-text-warning">Descubre cursos de tu
                            interés</a>
                    </div>
                </div>
            </div>

            @if ($miscursos && $miscursos->isNotEmpty())

                <div class="uk-flex uk-flex-between uk-flex-middle titulo-portal">
                    <h3>Empieza a aprender</h3>
                    <a href="{{ url('/mis-cursos') }}">Ver todos mis cursos</a>
                </div>

                <ul class="js-filter uk-grid-small uk-child-width-1-1 uk-child-width-1-3@l uk-child-width-1-2@m uk-child-width-1-1@s"
                    data-uk-grid>
                    @foreach ($miscursos 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="curso-portal">
                                    <div class="stream-item__media" style="width: 50%">
                                        <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen }}"
                                            alt="image"
                                            style="{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}" />

                                    </div>
                                    <div class="stream-item__body"
                                        style="width: 50%;{{ $curso->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}">
                                        <div class="titulo_mis_cursos">{{ $curso->titulo }}</div>
                                        <div class="btn_mis_cursos">
                                            <span class="tag">Reanudar Curso</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif

            <h3 style="margin-bottom: 0">Que aprender ahora</h3>

            <div class="uk-flex uk-flex-between uk-flex-middle titulo-portal">
                <h4>Recomendaciones para ti</h4>
                <a href="{{ url('/cursos') }}">Ver todos</a>
            </div>

            <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 ($otrosCursos 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="o-course-card__play">
                                        <i class="fas fa-play"></i>
                                    </div>
                                    <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>
                                <div class="stream-item__body">
                                    <div class="stream-item__title">{{ $curso->titulo }}</div>
                                    <div class="stream-item__time">
                                        <span class="tag"><i class="fa fa-book"></i>{{ $curso->cantidad_detalles }}
                                            Masterclass</span>
                                        <span class="tag"><i class="fa fa-clock"></i>{{ $curso->id_curso }}
                                            Horas</span>
                                    </div>
                                    <div class="stream-item__tags tagsnuevo" style="display:none">
                                        @if ($curso->id_tipo == 4)
                                            <span class="tag">Gratuito</span>
                                        @else
                                            <span class="tag">Premium</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        </a>
                    </li>
                @endforeach
            </ul>

            <div class="uk-flex uk-flex-between uk-flex-middle titulo-portal">
                <h4>Simulacros de aprendizaje práctico</h4>
                <a href="{{ url('/examenes') }}">Ver todos</a>
            </div>

            <div class="uk-grid uk-grid-small uk-child-width-1-5@l uk-child-width-1-3@m uk-child-width-1-1@s">
                @foreach ($examenes as $examen)
                    <a href="{{ url('/pasarela-examen/' . $examen->titulo_rewrite) }}" class="fl-gp-link-wrapper">
                        <div class="fl-gp-box">
                            <div class="fl-cover-image">
                                <img alt="{{ $examen->titulo }}"
                                    src="{{ env('URL_ARCHIVOS') . '/images/examenes/' . $examen->imagen }}">
                            </div>
                            <div class="fl-gp-footer">
                                {{-- <div class="fl-gp-info">
                                    <i class="icon-globe"></i><span>{{ $examen->fecha_registro }}</span>
                                </div> --}}
                                <div class="fl-gp-cells">
                                    <div class="fl-gp-cell-left">
                                        <strong>{{ $examen->titulo }}</strong>
                                        <p style="margin: 0; font-weight:500">{{ $examen->breve_detalle }}</p>
                                    </div>
                                </div>
                                <div class="fl-gp-action">
                                    <div class="fl-gp-button">
                                        S/ {{ $examen->costo_promo ?? $examen->precio }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>


            <div class="uk-flex uk-flex-between uk-flex-middle titulo-portal">
                <h4>Comprado con mayor frecuencia</h4>
                <a href="{{ url('/libros') }}">Ver todos</a>
            </div>

            <div class="uk-card uk-card-default uk-grid-collapse uk-child-width-expand@s uk-margin" uk-grid>
                <!-- Video ocupa 1/3 -->

                <div class="uk-width-1-3@s uk-card-media-left uk-cover-container img-libro">
                    @if ($libros->visibilidad == 1)
                        <a href="{{ url('/detallelibro/' . $libros->titulo_rewrite) }}">
                        @else
                            <a href="javascript:void(0)" style="pointer-events: none; cursor: default;">
                    @endif
                    <div class="stream-item__media">
                        <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $libros->imagen }}" alt="image"
                            style="{{ $libros->visibilidad != 1 ? 'filter: grayscale(100%);' : '' }}" />
                        <div class="o-course-card__play">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    </a>
                </div>
                <!-- Descripción ocupa 2/3 -->
                <div class="uk-width-2-3@s">
                    <div class="cuerpo-card">
                        <div class="uk-label ">LIBROS</div>
                        <h3 class="uk-card-title">
                            Categorías Pedagógicas Y Curriculares Para Lograr El Desarrollo De Competencias Y Aprendizajes
                            Significativos
                        </h3>
                        <p>
                            Supera los Exámenes del MINEDU con Éxito: Tu Guía Definitiva hacia el Aprendizaje Significativo
                        </p>
                        <div class="stream-item__tags tagsnuevo" style="display:none">
                            @if ($libros->id_tipo == 4)
                                <span class="tag">Gratuito</span>
                            @else
                                <span class="tag">Premium</span>
                            @endif
                        </div>
                    </div>
                </div>
                </a>
            </div>

            {{-- Sólo mostramos el flotante si hay usuario suscrito y un flotante seleccionado --}}
            {{-- @if (session()->has('suscrito') && $flotante)
                <div id="ventana-emergente-1" class="uk-flex-top uk-modal uk-flex uk-open" uk-modal="bg-close: true"
                    tabindex="-1">
                    <div class="uk-modal-dialog uk-margin-auto-vertical uk-fondo">
                        <div class="modal-background">
                            <button class="uk-modal-close-default" type="button" uk-close></button>

                            <!-- Imágenes de fondo -->
                            <img src="{{ asset('ind/comunicado_web_pc.png') }}" alt="Imagen de fondo"
                                class="img-fondo-pc">
                            <img src="{{ asset('ind/comunicado_web_movil.png') }}" alt="Imagen de fondo"
                                class="img-fondo-movil">

                            @if (!empty($flotante->link))
                                <div class="rel lleva_vimeo">
                                    <iframe src="{{ $flotante->link }}" frameborder="0" allow="autoplay; fullscreen"
                                        allowfullscreen></iframe>
                                </div>
                            @elseif (!empty($flotante->imagen))
                                <figure class="lleva_img_flota">
                                    <img src="{{ env('URL_ARCHIVOS') . '/images/flotantes/' . $flotante->imagen }}"
                                        alt="Imagen flotante">
                                </figure>
                            @endif

                            <div class="des_emegente">
                                {!! $flotante->descripcion !!}
                            </div>

                            @if (!empty($flotante->enlace))
                                <p>
                                    <a href="{{ $flotante->enlace }}" target="_blank"
                                        class="uk-button uk-button-primary">
                                        Click aquí
                                    </a>
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @endif --}}

            <style>
                html blockquote {
                    background-color:transparent !important;
                    padding: 0 !important;
                    border: 0 !important;
                    font-style: normal;
                    border-left: 0 !important;
                }
            </style>

            <!-- mostrar si est aespcilidad en  0 si est alogeado  nomas  y  mostrar si  la especilidad el  logedo esta  igual al del flotante si  -->
            @if (session()->has('suscrito') && $flotante)
                <div id="ventana-emergente-1" class="uk-flex-top uk-modal uk-flex uk-open" uk-modal="bg-close: true"
                    uk-modal tabindex="-1">
                    <div class="uk-modal-dialog uk-margin-auto-vertical uk-fondo ">
                        <div class="modal-background">
                            <button class="uk-modal-close-default" type="button" uk-close></button>
                            <!-- Imagen de fondo -->
                            <img src="{{ asset('ind/comunicado.png') }}" alt="Imagen de fondo"
                                class="img-fondo-pc">
                            <img src="{{ asset('ind/comunicado_fv.png') }}" alt="Imagen de fondo"
                                class="img-fondo-movil">
                            <!-- Contenido del modal -->
                            <div class="modal-content">
                                <h3 class="poppi-sb">{{ $flotante['titulo'] }}</h3>

                                @if (!empty($flotante['link']))
                                    <div class="rel lleva_vimeo">
                                        <iframe src="{{ $flotante['link'] }}" frameborder="0"
                                            allow="autoplay; fullscreen" allowfullscreen></iframe>
                                    </div>
                                @elseif (!empty($flotante['imagen']))
                                    <figure class="lleva_img_flota">
                                        <img src="{{ env('URL_ARCHIVOS') . '/images/flotantes/' . $flotante['imagen'] }}"
                                            alt="Imagen flotante">
                                    </figure>
                                @endif

                                <div class="des_emegente">
                                    {!! $flotante['descripcion'] !!}
                                </div>

                                @if (!empty($flotante['enlace']))
                                    <p>
                                        <a href="{{ $flotante['enlace'] }}" target="_blank"
                                            class="uk-button uk-button-primary">Click aquí</a>
                                    </p>
                                @endif


                            </div>
                        </div>
                    </div>
                </div>
            @endif


        </div>
    </main>
@endsection