@extends('academia.dashboard')

@section('content')

@if($curso->url_introduccion != null)
<div class="row mb-4">
    <div class="col-12">
        <div class="ratio ratio-16x9 rounded-4 overflow-hidden shadow-sm bg-dark">
            <iframe class="vimeo-player" src="{{ $informacion->url }}" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>
@endif


<div class="row g-4">

    <div class="col-lg-8 col-12">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-3 p-md-4">

                <ul class="nav nav-pills nav-fill mb-4 bg-light rounded-3 p-1" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#curso" data-bs-toggle="tab" class="nav-link rounded-2 active fw-semibold" role="tab" aria-selected="true">
                            <i class="bi bi-info-circle me-1"></i>Acerca del Curso
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#comentarios" data-bs-toggle="tab" class="nav-link rounded-2 fw-semibold" role="tab" aria-selected="false">
                            <i class="bi bi-chat-square-text me-1"></i>Comentarios
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#materiales" data-bs-toggle="tab" class="nav-link rounded-2 fw-semibold" role="tab" aria-selected="false">
                            <i class="bi bi-folder2-open me-1"></i>Materiales
                        </a>
                    </li>
                    @if($eventos->porcentaje >= 100 && $pruebas != null && $pruebas->calificacion >= 60)
                    <li class="nav-item">
                        <a href="{{ route('academia-certificado-index', ['id' => $eventos->idcourse]) }}" class="nav-link rounded-2 fw-semibold text-success">
                            <i class="bi bi-award-fill me-1"></i>Certificado
                        </a>
                    </li>
                    @endif
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="curso" role="tabpanel">
                        @include('academia.eventos.recurso.descripcion')
                    </div>
                    <div class="tab-pane fade" id="comentarios" role="tabpanel">
                        @livewire('comentarioacademia', ['idcurso' => $curso->id])
                    </div>
                    <div class="tab-pane fade" id="materiales" role="tabpanel">
                        @include('academia.eventos.recurso.materiales')
                    </div>
                </div>

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

    <div class="col-lg-4 col-12">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">

            <div class="card-header text-white py-3 px-4 border-0" style="background-color: #1c2945;">
                <h5 class="mb-0 fw-bold text-uppercase">
                    <i class="bi bi-collection-play-fill me-2"></i>Contenido del Curso
                </h5>
                <small class="text-white-50">
                    {{ count($lecciones) }} {{ count($lecciones) == 1 ? 'lección' : 'lecciones' }}
                </small>
            </div>

            <div data-simplebar style="max-height: 600px;">
                <div class="list-group list-group-flush">
                    @foreach($lecciones as $lecc)
                    <a href="{{ route('academia-eventos-index', ['slug' => $curso->slug, 'ordenevent' => $lecc->id]) }}"
                       class="list-group-item list-group-item-action border-0 px-4 py-3 @if($lecc->id == $informacion->id) bg-primary bg-opacity-10 border-start border-primary border-4 @endif">
                        <div class="d-flex align-items-start">
                            <div class="me-3 flex-shrink-0">
                                @if($lecc->id == $informacion->id)
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center shadow-sm" style="width: 38px; height: 38px;">
                                        <i class="bi bi-play-fill fs-5"></i>
                                    </div>
                                @else
                                    <div class="bg-light text-secondary rounded-circle d-flex align-items-center justify-content-center fw-bold border" style="width: 38px; height: 38px;">
                                        {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                                    </div>
                                @endif
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-1 fw-semibold text-dark">{{ $lecc->title }}</h6>
                                <small class="text-muted">
                                    <i class="bi bi-clock me-1"></i>{{ $lecc->tiempo }}
                                </small>
                                @if($lecc->id == $informacion->id && !empty($lecc->description))
                                <p class="small text-secondary mt-2 mb-0">
                                    {{ $lecc->description }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>

            @if($eventos->porcentaje >= 100 && $evaluacion->count() > 0 && ($pruebas == null || $pruebas->calificacion < 60))
            <div class="border-top">
                <a href="{{ route('academia-evaluacion-presentar', ['id' => $eventos->idcourse]) }}"
                   class="d-flex align-items-center text-decoration-none p-3 text-white"
                   style="background-color: #1c2945;">
                    <div class="bg-white bg-opacity-25 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                        <i class="bi bi-clipboard-check-fill fs-5"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-bold text-uppercase small">Presentar Evaluación</div>
                        <small class="text-white-50">Disponible ahora</small>
                    </div>
                    <i class="bi bi-arrow-right-circle-fill fs-4"></i>
                </a>
            </div>
            @endif

        </div>
    </div>

</div>

@endsection