@extends('academia.dashboard')

@section('content')

@include('academia.home.slider.index')


@if($eventos != null)
<div class="row mt-4">
    <div class="col-12">
        <div class="d-flex justify-content-center">
            <div class="col-12 col-xl-12">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="card-body p-4">

                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                            <h4 class="text-dark fw-bold mb-0">
                                <i class="bi bi-bookmark-star-fill text-primary me-2"></i>Último curso visto
                            </h4>
                            <a class="text-secondary text-decoration-none small fw-semibold" href="{{ route('cursos-show') }}">
                                Ver cursos sin completar <i class="bi bi-arrow-right ms-1"></i>
                            </a>
                        </div>

                        <div class="row g-4 align-items-center">
                            <div class="col-md-4 col-12">
                                <img src="{{ asset('cursos/'.$eventos->course->cover) }}"
                                     alt="{{ $eventos->course->title }}"
                                     class="rounded-3 shadow-sm w-100"
                                     style="aspect-ratio: 16/10; object-fit: cover;">
                            </div>

                            <div class="col-md-8 col-12">
                                <span class="badge bg-light text-dark border fw-normal mb-2">
                                    {{ $eventos->course->category->title }}
                                </span>
                                <h4 class="text-dark fw-bold mb-3">{{ $eventos->course->title }}</h4>

                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small text-muted">
                                        {{ $eventos->orden }} de {{ $eventos->course->lessons->count() }} lecciones completadas
                                    </span>
                                    <span class="small fw-bold text-primary">{{ $eventos->porcentaje }}%</span>
                                </div>

                                <div class="progress mb-4" style="height: 8px;">
                                    <div class="progress-bar bg-primary"
                                         role="progressbar"
                                         style="width: {{ $eventos->porcentaje }}%;"
                                         aria-valuenow="{{ $eventos->porcentaje }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100"></div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <a class="btn btn-primary fw-semibold px-4" href="{{ route('academia-eventos-index', ['slug' => $eventos->course->slug, 'ordenevent' => $eventos->leccion]) }}">
                                        <i class="bi bi-play-circle-fill me-1"></i> Continuar
                                    </a>
                                </div>
                            </div>
                        </div>

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


<div class="row mt-5">
    <div class="col-12">
        <div class="d-flex justify-content-center">
            <div class="col-12 col-xl-12">

                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-4">
                    <div>
                        <h3 class="text-dark text-uppercase fw-bold mb-1">Lo más nuevo</h3>
                        <p class="text-muted small mb-0">Cursos recién publicados en la plataforma</p>
                    </div>
                </div>

                <div class="d-none d-md-block">
                    <div id="carouselCursos" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner pb-2">
                            @foreach($cursos->chunk(4) as $chunk)
                            <div class="carousel-item @if($loop->first) active @endif">
                                <div class="row g-3 px-5">
                                    @foreach($chunk as $cur)
                                    <div class="col-lg-3 col-md-6">
                                        @include('academia.home.componentes.curso-card', ['cur' => $cur])
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev carousel-btn-custom" type="button" data-bs-target="#carouselCursos" data-bs-slide="prev">
                            <i class="bi bi-chevron-left fs-4 text-dark"></i>
                            <span class="visually-hidden">Anterior</span>
                        </button>
                        <button class="carousel-control-next carousel-btn-custom" type="button" data-bs-target="#carouselCursos" data-bs-slide="next">
                            <i class="bi bi-chevron-right fs-4 text-dark"></i>
                            <span class="visually-hidden">Siguiente</span>
                        </button>
                    </div>
                </div>

                <div class="d-block d-md-none">
                    <div id="carouselCursosMobile" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner pb-2">
                            @foreach($cursos as $cur)
                            <div class="carousel-item @if($loop->first) active @endif">
                                <div class="px-5">
                                    @include('academia.home.componentes.curso-card', ['cur' => $cur])
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev carousel-btn-custom" type="button" data-bs-target="#carouselCursosMobile" data-bs-slide="prev">
                            <i class="bi bi-chevron-left fs-4 text-dark"></i>
                            <span class="visually-hidden">Anterior</span>
                        </button>
                        <button class="carousel-control-next carousel-btn-custom" type="button" data-bs-target="#carouselCursosMobile" data-bs-slide="next">
                            <i class="bi bi-chevron-right fs-4 text-dark"></i>
                            <span class="visually-hidden">Siguiente</span>
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<div class="row mt-5">
    <div class="col-12 text-center">
        <h3 class="text-dark fw-bold mb-1">CURSOS ESPECIALIZADOS SEGÚN TUS INTERESES</h3>
        <h5 class="text-primary text-uppercase fw-bold mb-4">Categorías</h5>
    </div>
</div>


<div class="row mt-3 mb-5">
    <div class="col-12">
        <div class="d-flex justify-content-center">
            <div class="col-12 col-xl-12">
                <div class="row g-4">
                    
                    @include('academia.categorias.componentes.lista_categorias', ['categorias' => $categorias, 'tipo' => '1'])
                    
                </div>
            </div>
        </div>
    </div>
</div>

@endsection