@extends('layout.qr')
@section('header')
 <link id="pagestyle" href="{{asset('dashboard/adminlte.css')}}" rel="stylesheet" />

@endsection
@section('content')
<style>
        
</style>
<div class="content text-center" style="margin-left:50px; margin-right:50px;">
    <div class="card border-dark " style="width:100%;">
        <div class="card-header"><br></div>
        <div class="card-body text-dark">
          <h5 class="card-title">
          </h5><center><strong>CODELCO-DIVISION CHUQUICAMATA</strong></center>
          <br>

          <div class="row justify-content-center">
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box">
                <span class="info-box-icon bg-info elevation-1"><i class="fa-solid fa-user"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">Funcionarios Registrados</span>
                  <span class="info-box-number">
                    {{sizeof($users)}}
                    <small></small>
                  </span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>

            <!-- /.col -->
            <div class="col-12 col-sm-6 col-md-3">
              <div class="info-box mb-3">
                <span class="info-box-icon bg-danger elevation-1"><i class="fa-solid fa-file-pen"></i></span>

                <div class="info-box-content">
                  <span class="info-box-text">Capacitaciones</span>
                  <span class="info-box-number">20</span>
                </div>
                <!-- /.info-box-content -->
              </div>
              <!-- /.info-box -->
            </div>
            <!-- /.col -->

            <!-- fix for small devices only -->
            <div class="clearfix hidden-md-up"></div>
            <!-- /.col -->
          </div>
        </div><!-- Termina div con contadores -->
         <div class="justify-content-center row">
              <div class="col-lg-4">
                <table class="table table-sm">
                  <tr>
                    <th>Capacitación:</th>
                    <td>
                      <select class="form-control" onchange="checkselect(this.value);">
                        <option value="todos">Todos</option>
                        @foreach($capa as $c)
                          <option value="{{$c->nombre}}">{{$c->nombre}}</option>
                        @endforeach
                      </select>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
        <div class="row justify-content-center" id="divtodos">
          <div class="col-lg-6">
            <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Aprobados</h3>

                        <div class="card-tools">
                          <!-- <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                          </button> -->
                          <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                          </button> -->
                        </div>
                      </div>
                      <!-- /.card-header -->
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="chart-responsive">
                              <canvas id="pieChart" height="150"></canvas>
                            </div>
                            <!-- ./chart-responsive -->
                          </div>
                          <!-- /.col -->
                          <div class="col-md-4">
                            <ul class="chart-legend clearfix">
                              <li><i class="far fa-circle text-danger"></i> Andamio</li>
                              <li><i class="far fa-circle text-success"></i> BEL</li>
                              <li><i class="far fa-circle text-warning"></i> SSO</li>
                              <li><i class="far fa-circle text-info"></i> USO EXTINTORES</li>
                            </ul>
                          </div>
                          <!-- /.col -->
                        </div>
                        <!-- /.row -->
                      </div>
                      <!-- /.card-body -->
                      
                      <!-- /.footer -->
                </div>
          </div><!-- Termina div grafico -->
          <div class="col-lg-6">
            <div class="card-footer p-0">
              <center><strong>Porcentajes de Aprobacion</strong></center> <br>
                        <ul class="nav nav-pills flex-column">
                          <li class="nav-item">
                            <a href="#" class="nav-link">
                              BEL
                              <span class="float-right text-success">
                                <i class="fas fa-arrow-up text-sm"></i> 92%
                              </span>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="#" class="nav-link">
                              Andamio
                              <span class="float-right text-success">
                                <i class="fas fa-arrow-up text-sm"></i>
                                80%</span>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="#" class="nav-link">
                              SSO
                              <span class="float-right text-warning">
                                <i class="fas fa-arrow-left text-sm"></i> 65%
                              </span>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a href="#" class="nav-link">
                              USO EXTINTORES
                              <span class="float-right text-danger">
                                <i class="fas fa-arrow-down text-sm"></i> 45%
                              </span>
                            </a>
                          </li>
                        </ul>
                      </div>
          </div>
      </div>
      <div class="row" id="divsolo" style="display: none">
        <div class="col-lg-6">
            <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Aprobados <tex id='tituaprotxt'></tex></h3>

                        <div class="card-tools">
                          <!-- <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                          </button> -->
                          <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                          </button> -->
                        </div>
                      </div>
                      <!-- /.card-header -->
                      <div class="card-body">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="chart-responsive">
                              <canvas id="piesolo" height="150"></canvas>
                            </div>
                            <!-- ./chart-responsive -->
                          </div>
                          <!-- /.col -->
                          <div class="col-md-4">
                            <ul class="chart-legend clearfix">
                              <li><i class="far fa-circle text-success"></i> Aprobados</li>
                              <li><i class="far fa-circle text-danger"></i> Reprobados</li>
                            </ul>
                          </div>
                          <!-- /.col -->
                        </div>
                        <!-- /.row -->
                      </div>
                      <!-- /.card-body -->
                      
                      <!-- /.footer -->
                </div>
          </div><!-- Termina div grafico -->
          <div class="col-lg-6">
            <div class="card-footer p-0">
              <center><strong><text id='txtnotatitu'></text></strong></center> <br>
              <center><strong>Fecha Vigencia:</strong>05/01/2026<br>
                  <strong>Nota Promedio</strong><br>
                  <h2 id="notapromtxt"></h2>
                  <strong>Asistencia Promedio</strong><br>
                  <h2 id="asistxt"></h2>  
              </center>   
            </div>
          </div>
      </div>
  </div>
</div>
@section('script')
<script src="{{asset('dashboard/plugins/chart.js/Chart.min.js')}}"></script>

<script type="text/javascript">
  var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
  var pieData = {
    labels: [
      'Andamio',
      'BEL',
      'SSO',
      'USO EXTINTORES'
    ],
    datasets: [
      {
        data: [80, 75, 50, 20],
        backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef']
      }
    ]
  }
  var pieOptions = {
    legend: {
      display: false
    }
  }
  // Create pie or douhnut chart
  // You can switch between pie and douhnut using the method below.
  // eslint-disable-next-line no-unused-vars
  var pieChart = new Chart(pieChartCanvas, {
    type: 'doughnut',
    data: pieData,
    options: pieOptions
  })

  

  //-----------------
  // - END PIE CHART -
  //-----------------
</script>
<script type="text/javascript">
  function checkselect(val){
    if(val=="todos"){
      $('#divtodos').show();
      $('#divsolo').hide();
    }else{
      $('#tituaprotxt').html(val);
      $('#divtodos').hide();
      $('#divsolo').show();
      $('#txtnotatitu').html(val);
      updatechart();
      updatenotaprom();
      updateasis();
    }
  }
  function updatechart(){
    apro=getRandomInt(1,100);
    res=0;
    if (apro!=100) {
      res=100-apro;
    }
    var pieChartCanvas2 = $('#piesolo').get(0).getContext('2d')
      var pieData2 = {
        labels: [
          'Aprobado',
          'Reprobado',
        ],
        datasets: [
          {
            data: [apro, res,],
            backgroundColor: [ '#00a65a','#f56954',]
          }
        ]
      }
      var pieOptions2 = {
        legend: {
          display: false
        }
      }
      // Create pie or douhnut chart
      // You can switch between pie and douhnut using the method below.
      // eslint-disable-next-line no-unused-vars
      var pieChart2 = new Chart(pieChartCanvas2, {
        type: 'doughnut',
        data: pieData2,
        options: pieOptions2
      })
  }
  function updatenotaprom(){
    nota=getRandomInt(0,100);
    if (nota<40) {
      $('#notapromtxt').removeClass('text-success');  
      $('#notapromtxt').removeClass('text-warning');  
      $('#notapromtxt').addClass('text-danger');  
    }else if (nota>=40 && nota<=60) {
      $('#notapromtxt').removeClass('text-success');  
      $('#notapromtxt').removeClass('text-danger');  
      $('#notapromtxt').addClass('text-warning');
    }else if(nota>60){
      $('#notapromtxt').removeClass('text-warning');  
      $('#notapromtxt').removeClass('text-danger');  
      $('#notapromtxt').addClass('text-success');
    }
    $('#notapromtxt').html(nota+"%");
  }
  function updateasis(){
    nota=getRandomInt(0,100);
    if (nota<40) {
      $('#asistxt').removeClass('text-success');  
      $('#asistxt').removeClass('text-warning');  
      $('#asistxt').addClass('text-danger');  
    }else if (nota>=40 && nota<=60) {
      $('#asistxt').removeClass('text-success');  
      $('#asistxt').removeClass('text-danger');  
      $('#asistxt').addClass('text-warning');
    }else if(nota>60){
      $('#asistxt').removeClass('text-warning');  
      $('#asistxt').removeClass('text-danger');  
      $('#asistxt').addClass('text-success');
    }
    $('#asistxt').html(nota+"%");
  }
  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min);
  }
</script>
@endsection
@endsection