@extends('academia.layouts.dashboard')

@section('content')

<div class="container-fluid mt-3">
    <div class="row">
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-info">Mi Ultimo Curso</h4>
                    
                    @if($eventos != null)
                    <div class="row">
                        <div class="col-md-4">
                            <img src="{{ asset('cursos/'.$eventos->course->cover) }}" class="card-img-top" alt="...">
                            <div class="carousel-caption">
                                <div class="row">
                                    <img src="{{ asset('recursos/svg/video-player-blue.svg') }}" style="width: 20px;"> 
                                    <h6 class="text-white mt-2 ml-2"> {{ $eventos->course->title }} </h6>
                                </div>
                                <div class="float-left">{{ $eventos->course->category->title }}</div>
                            </div>    
                        </div>
                        
                        <div class="col-md-8">
                            
                            <div class="progress" style="height: 23px; margin-top: 5rem !important;">
                                <div class="progress-bar" role="progressbar" style="width: {{ $eventos->porcentaje }}%; background-color: #0093f8;" aria-valuenow="{{ $eventos->porcentaje }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 col-12">
                                   <h4 class="mt-3">{{ $eventos->course->title }}</h4>
                                   <h4>{{ $eventos->porcentaje }}% del curso realizado</h4>
                                   <h4> {{ $eventos->orden }} de {{ $eventos->course->lessons->count() }} lecciones completadas</h4>
                                </div>
                                
                                <div class="col-md-6 col-12 text-right">
                                    <a class="btn btn-info text-white mt-3" href="{{ route('academia-eventos-index', ['slug' => $eventos->course->slug, 'ordenevent' => $eventos->leccion]) }}"> Continuar <i class="fa-solid fa-arrow-right"></i></a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    @else
                    
                    <div class="alert alert-primary" role="alert">
                      <h4>Aun no has Adquirido un curso</h4>
                    </div>
                    
                    @endif
                    
                </div>
            </div>
        </div>
    
    </div>
</div>    


<div class="container-fluid mt-3">
    <div class="row">
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    
                    <div class="row">
                        
                        @foreach($cursos as $curs)
                        <div class="col-md-3">
                            <div class="card">
                                <img src="{{ asset('cursos/'.$curs->cover) }}" style="width: 100%;">
                                <div class="card-body">
                                    
                                    <h4 class="text-left text-truncate"> {{$curs->title}} </h4>
                                    <h5 class="text-left text-truncate">{{$curs->category->title}}</h5>
                                   
                                    <a class="btn btn-info btn-block text-white" href="{{ route('academia-tienda-cursos-show', ['slug' => $curs->slug]) }}">
                                         <i class="fas fa-play-circle"></i> VER DETALLES
                                    </a>
                                   
                                </div>
                            </div>    
                        </div>
                        @endforeach
                        
                    </div>
                    
                </div>
            </div>
        </div>
    
    </div>
</div>    


<div class="container-fluid mt-3">
    <div class="row">
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-info text-center mt-3">CURSOS ESPECIALIZADOS SEGÚN TUS INTERÉSES</h4>
                    <h4 class="text-center mt-4">CATEGORÍAS</h4>
                    
                    <div class="row">
                        
                        @foreach($categorias as $cat)
                        <div class="col-md-3">
                            <div class="card">
                                <img src="{{ asset('recursos/'.$cat->cover) }}" style="width: 100%;">
                                <div class="card-body">
                                    
                                    <h4 calss="text-truncate"> <i class="{{$cat->icon}}" style="width:60px;"></i> {{ $cat->title }} </h4>
                                    
                                    <p class="text-dark text-truncate" style="font-size: 14px;">{{$cat->courses->count()}} Curso</p>
                                    
                                    <a class="btn btn-info btn-block text-white" href="{{ route('academia-tienda-show', ['tipo' => 1, 'categori' => $cat->id]) }}">
                                        <i class="fas fa-play-circle"></i> VER DETALLES
                                    </a>
                                   
                                </div>
                                
                            </div>    
                        </div>
                        @endforeach
                        
                    </div>
                    
                </div>
            </div>
        </div>
        
    </div>
</div>    
@endsection