@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">
                    
                    <div class="row">
                        <div class="col-md-6 border-right border-bottom">
                            <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-graduation-cap text-info mt-2" style="font-size: 30px;"></i>
                                </div>
                            </div>
                            
                            <h4 class="mb-2 mt-2 text-center">
                                <span class="text-dark"> {{ $totalestudiantes }} Estudiantes</span>
                            </h4>
                            
                            <p class="text-center">
                                <span class="text-dark"> {{ $totalestmes }} Nuevos Estudiantes en el mes</span>
                            </p>
                        </div>
                        
                        
                        
                        <div class="col-md-6 border-bottom">
                            <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>
                            
                            <p class="text-center">
                                <span class="text-dark"> {{ $totalcursomes }} Nuevos Cursos en el mes</span>
                            </p>
                        </div>
                        
                        
                        <div class="col-md-6 border-right">
                            <div class="d-flex justify-content-center mt-3">
                                <div class="rounded-circle text-primary text-center" style="width:60px; height: 60px; border-style: solid;">
                                    <i class="fa-brands fa-elementor text-primary mt-2" style="font-size: 38px;"></i>
                                </div>
                            </div>
                            
                            <h4 class="mb-2 mt-2 text-center">
                                <span class="text-dark"> {{ $totalmentores }} Mentores</span>
                            </h4>
                            
                            <p class="text-center">
                                <span class="text-dark"> {{ $totalmentormes }} Nuevos Mentores en el mes</span>
                            </p>
                        </div>
                        
                        
                        
                        <div class="col-md-6">
                            <div class="d-flex justify-content-center mt-3">
                                <div class="rounded-circle text-danger text-center" style="width:60px; height: 60px; border-style: solid;">
                                    <i class="fa-solid fa-layer-group text-danger mt-2" style="font-size: 34px;"></i>
                                </div>
                            </div>
                            
                            <h4 class="mb-2 mt-2 text-center">
                                <span class="text-dark"> {{ $totalcategorias }} Categorías</span>
                            </h4>
                            
                            <p class="text-center">
                                <span class="text-dark"> {{ $totalcatmes }} Nuevas Categorías en el mes</span>
                            </p>
                        </div>
                    </div>
                    
                    
                    
                </div>
            </div>    
        </div>
        
    
        
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    
                    <h5>Top Cursos</h5>
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead style="background-color:#0093f8; color:#fff;">
                              <tr>
                                <th class="text-white text-center">Curso</th>
                                <th class="text-white text-center">Categoría</th>
                                <th class="text-white text-center">Lecciones</th>
                                <th class="text-white text-center">Total Registros</th>
                              </tr>
                            </thead>
                            <tbody>
                                @foreach($top as $to)
                              <tr>
                                <td class="text-dark text-center">{{ $to->course->title }}</td>
                                <td class="text-dark text-center">{{ $to->course->category->title }}</td>
                                <td class="text-dark text-center">{{ $to->course->lessons->count() }}</td>
                                <td class="text-dark text-center">{{ $to->count() }}</td>
                              </tr>
                                @endforeach 
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
    


        <div class="col-md-7">
            <div class="card">
                <div class="card-body">
                    
                    <h5>Ultimos Estudiantes Registrados</h5>
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead style="background-color:#0093f8; color:#fff;">
                              <tr>
                                <th class="text-white text-center">Nombre</th>
                                <th class="text-white text-center">Correo</th>
                                <th class="text-white text-center">Estatus</th>
                                <th class="text-white text-center">Patrocinador</th>
                              </tr>
                            </thead>
                            <tbody>
                            @foreach($ultimosestudiantes as $ultimos)
                              
                              @php
                                $patrocinador = DB::table($settings->prefijo_wp.'users')->select('display_name')->where('ID', '=', $ultimos->referred_id)->first();
                              @endphp
                              
                              <tr>
                                <td class="text-dark text-center">{{ $ultimos->display_name }}</td>
                                <td class="text-dark text-center">{{ $ultimos->user_email }}</td>
                                <td class="text-dark text-center">
                                    @if($ultimos->status == 0)
                                      Inactivo
                                    @else
                                      Activo
                                    @endif
                                </td>
                                <td class="text-dark text-center">
                                    @if($patrocinador != null)
                                      {{ $patrocinador->display_name }}
                                    @endif  
                                </td>
                              </tr>
                            @endforeach  
                            </tbody>
                        </table>
                    </div>
                    
                </div>
            </div>
        </div>
        
        
        
        <div class="col-md-5">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Paises con mas estudiantes</h4>
                    <div id="donut"></div>
                </div>
            </div>
        </div>
        
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    
                    <h5>Ultimos Comentarios</h5>
                    
                    @foreach($comentarios as $comen)
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="media border mt-2">
                                <img src="{{ asset('fondo/'.$comen->user->avatar) }}" class="align-self-start ml-3 mr-3 mt-2" alt="..." style="width: 80px; height: 80px; border-radius: 50%;">

                                <div class="media-body mt-2">
                          
                                    <h5 class="mt-0 text-dark">{{ $comen->user->display_name }}</h5>
                          
                                    <p class="text-dark">{{ $comen->comentario }}</p>
                                    <p class="text-dark">
                    
                                       {{ $comen->fecha }}
                        
                                       @if(Auth::user()->rol_id == 0)
                                       <a class="btn btn-danger text-white float-right" href="{{ route('academia-eventos-comen-eliminar', ['id' => $comen->id]) }}">
                                          <i class="fa-solid fa-trash"></i>
                                       </a>
                                       @endif
                        
                                   </p>
                   
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    
                </div>
            </div>
        </div>
        
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Ventas del mes</h4>
                    <div id="chart"></div>
                </div>
            </div>
        </div>
    
    </div>
</div>

@endsection

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


@push('script')
<script>

    let paises = []
    let volumen = []

    let url = 'grafica/pais'

    $.get(url, function (response) {

        let data = JSON.parse(response)
      
        data.forEach(element => {

            paises.push(element.nombre)
            volumen.push(element.total)
             
        });


    var options = {
          series: volumen,
          labels: paises,
          chart: {
          width: 430,
          type: 'donut',
        },
        plotOptions: {
          pie: {
            startAngle: -90,
            endAngle: 270
          }
        },
        dataLabels: {
          enabled: false
        },
        fill: {
          type: 'gradient',
        },
        legend: {
          formatter: function(val, opts) {
            return val + " - " + opts.w.globals.series[opts.seriesIndex]
          }
        },
        
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
    };

    var chart = new ApexCharts(document.querySelector("#donut"), options);
    chart.render();
    
});
   
    
    let ventas = []
    @foreach($ventas as $venta)
       ventas.push('{{$venta['total']}}')
    @endforeach
    
    var options = {
          series: [{
          name: 'Ventas',
          data: ventas
        }],
          chart: {
          type: 'bar',
          height: 250
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: ['Enero','Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        },
        
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function (val) {
              return "$ " + val
            }
          }
        }
        };

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