@extends('academia.dashboard')

@section('content')

<!-- Slider banner -->
@include('academia.home.slider.index')
    
    
<div class="row mt-4">
    <div class="col-12">
        <div class="row">
            
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm rounded-3 border-top border-4 border-success">
                    <div class="card-body p-3">
                        <div class="bg-success-subtle text-success d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                            <i class="bi bi-mortarboard-fill fs-3"></i>
                        </div>
                        <p class="text-secondary text-uppercase small fw-semibold mb-1">Estudiantes</p>
                        <h2 class="fs-1 fw-bold mb-1 text-dark">{{ $totalestudiantes }}</h2>
                        <span class="badge bg-success-subtle text-success rounded-pill px-2 py-2 fw-normal">
                            <i class="bi bi-arrow-up"></i> {{ $totalestmes }} este mes
                        </span>
                    </div>
                </div>
            </div>
            
            
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm rounded-3 border-top border-4 border-primary">
                    <div class="card-body p-3">
                        <div class="bg-primary-subtle text-primary d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                          <i class="bi bi-book-fill fs-3"></i>
                        </div>
                        <p class="text-secondary text-uppercase small fw-semibold mb-1">Cursos</p>
                        <h2 class="fs-1 fw-bold mb-1 text-dark">{{ $totalcursos }}</h2>
                        <span class="badge bg-primary-subtle text-primary rounded-pill px-2 py-2 fw-normal">
                           <i class="bi bi-arrow-up"></i> {{ $totalcursomes }} este mes
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm rounded-3 border-top border-4 border-info">
                    <div class="card-body p-3">
                        <div class="bg-info-subtle text-info d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                          <i class="bi bi-person-video2 fs-3"></i>
                        </div>
                        <p class="text-secondary text-uppercase small fw-semibold mb-1">Mentores</p>
                        <h2 class="fs-1 fw-bold mb-1 text-dark">{{ $totalmentores }}</h2>
                        <span class="badge bg-info-subtle text-info rounded-pill px-2 py-2 fw-normal">
                           <i class="bi bi-arrow-up"></i> {{ $totalmentormes }} este mes
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="card border-0 shadow-sm rounded-3 border-top border-4 border-warning">
                    <div class="card-body p-3">
                        <div class="bg-warning-subtle text-warning d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                          <i class="bi bi-stack fs-3"></i>
                        </div>
                        <p class="text-secondary text-uppercase small fw-semibold mb-1">Categorías</p>
                        <h2 class="fs-1 fw-bold mb-1 text-dark">{{ $totalcategorias }}</h2>
                        <span class="badge bg-warning-subtle text-warning rounded-pill px-2 py-2 fw-normal">
                           <i class="bi bi-arrow-up"></i> {{ $totalcatmes }} este mes
                        </span>
                    </div>
                </div>
            </div>
      
        </div>
    </div>
</div>



<div class="row">
    
    <div class="col-12 col-lg-8">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                
                <div class="d-flex align-items-start gap-2 mb-3">
                     <div class="bg-success-subtle text-success d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                         <i class="fa-solid fa-chart-area fs-3"></i>
                     </div>
                     
                     <h5 class="mt-2 fs-4">Resumen de la academia</h5>
                </div> 
                
                <div id="grafica_barra" data-url="{{ route('grafica-academia') }}" style="width: 100%; height: 320px;"></div>
            </div>
        </div>
    </div>
    
    
    <div class="col-12 col-lg-4">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                
                <div class="d-flex align-items-start gap-2 mb-3">
                     <div class="bg-info-subtle text-info d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                         <i class="fa-solid fa-chart-pie fs-3"></i>
                     </div>
                     
                     <h5 class="mt-2 fs-4">Distribución</h5>
                </div> 
                
                <div id="grafica_donut" data-url="{{ route('grafica-academia') }}" style="width: 100%; height: 320px;"></div>
            </div>
        </div>
    </div>
    
    
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                
                <div class="d-flex align-items-start gap-2 mb-3">
                     <div class="bg-primary-subtle text-primary d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                         <i class="fa-solid fa-trophy fs-3"></i>
                     </div>
                     
                     <h5 class="mt-2 fs-4">Top cursos</h5>
                </div> 
                
                @php
                    $topData = [];
                    foreach($top as $index => $to) {
                        $topData[] = [
                            'title' => $to->course->title,
                            'category' => $to->course->category->title,
                            'lessons' => $to->course->lessons->count(),
                            'registros' => $to->count(),
                            'index' => $index
                        ];
                    }
                    $barColors = ['success', 'info', 'primary', 'warning', 'danger'];
                @endphp
               
                @foreach($topData as $curso)
                <div class="d-flex align-items-start gap-3 mb-3">
                    <div class="bg-{{ $barColors[$curso['index']] }}-subtle text-{{ $barColors[$curso['index']] }} fw-bold d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width: 32px; height: 32px;">
                       {{ ($curso['index'] + 1) }}
                    </div>

                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <p class="fw-bold mb-1 text-dark">{{ $curso['title'] }}</p>
                                <p class="text-secondary small mb-0">{{ $curso['category'] }} - {{ $curso['lessons'] }} lecciones</p>
                            </div>
                            <span class="fw-bold ms-3 text-dark"> {{ $curso['registros'] }}</span>
                        </div>
                            <div class="progress" role="progressbar" aria-label="Progreso del curso" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
                            <div class="progress-bar bg-{{ $barColors[$curso['index']] }}" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>
    
    
    <div class="col-12 col-lg-6">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                
                <div class="d-flex align-items-start gap-2 mb-3">
                     <div class="bg-info-subtle text-info d-inline-flex align-items-center justify-content-center rounded-3 p-2 mb-1" style="width: 48px;height: 48px;">
                         <i class="fa-solid fa-users fs-3"></i>
                     </div>
                     
                     <h5 class="mt-2 fs-4">Últimos estudiantes registrados</h5>
                </div>
                
                @foreach($ultimosestudiantes as $ultimos)
                <div class="d-flex align-items-center gap-3 py-2">
                    <div class="text-white d-flex align-items-center justify-content-center rounded-circle flex-shrink-0">
                       <img src="{{ asset('fondo/'.$ultimos->avatar) }}" style="height: 40px; width: 40px; border-radius: 50%;">
                    </div>
                    <div class="flex-grow-1 min-w-0">
                      <p class="fw-semibold mb-0 text-truncate">{{ $ultimos->display_name }}</p>
                      <p class="text-secondary small mb-0 text-truncate">{{ $ultimos->user_email }}</p>
                    </div>
                    @if($ultimos->status == 1)
                      <span class="badge bg-success-subtle text-success rounded-pill px-2 py-2 fw-normal">Activo</span>
                    @else
                      <span class="badge bg-danger-subtle text-danger rounded-pill px-2 py-2 fw-normal">Inactivo</span>
                    @endif
                    <span class="text-secondary small d-none d-md-inline">
                      <i class="bi bi-link-45deg"></i> {{ $ultimos->patrocinador->nameuser }}
                    </span>
                </div>
                @endforeach
          
            </div>
        </div>
    </div>    
    
</div>

@endsection

@push('script')
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<script src ="{{ asset('assets/plugins/amcharts/academia.js') }}"></script>
@endpush