@extends('academia.layouts.dashboard')

@section('content')


<div class="container-fluid mt-3">
    <div class="row">
        
        <div class="col-md-4">
            <div class="row">
                
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                    
                            <div class="col-md-12">
                                <div class="d-flex justify-content-center">
                                    <div class="rounded-circle text-success text-center" style="width:60px; height: 60px; border-style: solid;">
                                         <i class="fa-brands fa-discourse text-success mt-2 ml-1" style="font-size: 30px;"></i>
                                    </div>
                                </div>
                            
                                <h4 class="mb-2 mt-2 text-center">
                                    <span class="text-dark"> {{ $totalcursos }} Cursos</span>
                                </h4>
                            </div>
                        
                        </div>
                    </div>
                </div>
                
                
                @php
                $total = 0;
                @endphp
                
                @foreach($cursos as $curso)
                  @php
                    $total = ($total + $curso->comentarios->count());
                  @endphp
                @endforeach
                
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                    
                            <div class="col-md-12">
                                <div class="d-flex justify-content-center">
                                    <div class="rounded-circle text-info text-center" style="width:60px; height: 60px; border-style: solid;">
                                         <i class="fa-solid fa-comment text-info mt-2 ml-1" style="font-size: 30px;"></i>
                                    </div>
                                </div>
                            
                                <h4 class="mb-2 mt-2 text-center">
                                    <span class="text-dark"> {{ $total }} Comentarios</span>
                                </h4>
                            </div>
                        
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
        
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-center">Estudiantes Inscritos en mis cursos</h4>
                    
                    <div class="chart_estudiantes"></div>
                </div>
            </div>
        </div>  
        
        
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    
                    <h4 class="text-center">Materiales de Estudio</h4>
                    
                    <table class="table table-striped table-bordered zero-configuration">
                        <thead>
                            <th class="text-center">#</th>
                            <th class="text-center">Curso</th>
                            <th class="text-center">Título del material</th>
                            <th class="text-center">Tipo de material</th>
                            <th class="text-center">Acciones</th>
                        </thead>
                        <tbody>
                            @foreach ($cursos as $cur)
                            
                            @php
                              $support = DB::table('support_material')->select('id','title','type')->where('course_id', '=', $cur->id)->first();
                            @endphp
                            
                            <tr>
                                <td class="text-center">{{ $cur->id }}</td>
                                <td class="text-center">{{ $cur->title }}</td>
                                <td class="text-center">
                                    @if($support != null)
                                      {{ $support->title }}
                                    @endif  
                                </td>
                                <td class="text-center">
                                    @if($support != null)
                                       {{ $support->type }}
                                    @endif   
                                </td>
                                <td class="text-center">
                                    @if($support != null)
                                    <a class="btn btn-warning text-white" href="{{ route('cursos-recursos-vistaprevia', $support->id) }}" target="_black"> 
                                         <i class="fa fa-search"></i>
                                    </a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                        
                        
                </div>
            </div>
        </div>  
    
    </div>
</div>    
                    

@include('usuario.componentes.scritpTable')                    
@endsection

{{-- Apexcharts --}}
<script src ="{{ asset('plugins/apexcharts/apexcharts.js') }}"></script>


@push('script')
<script>

    var options = {
          series: [
              @foreach($cursos as $curso)
                {
                  name: '{{ $curso->title }}',
                  data: ['{{ $curso->eventos->count() }}']
                },
              @endforeach
            ],
          chart: {
          type: 'bar',
          height: 270
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        
        xaxis: {
          categories: ['Estudiantes'],
        },
        
        fill: {
          opacity: 1
        }
    };

    var chart = new ApexCharts(document.querySelector(".chart_estudiantes"), options);
    chart.render();
        
</script>
@endpush