LMS-Estafeta/admin/reportes.html

<style type="text/css">
.nav-link{
  color: #174d8f !important;
}

.nav-link:hover{
  color: #a41414 !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: white !important;
    background-color: #a41414;
}

</style>

<section class="py-md-4 py-2">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <h1 class="text-secondary font-weight-bolder">Reportes</h1>
        <!--
        <p>Sistema de reportes por categoría, hay recursos calificables y no calificabes, en el caso de los recursos calificables la escala es de 0 a 100 y para los recursos no calificables tales como: pdf, videos, infografías el resultado de la calificación siempre es 100.</p>-->
      </div>
    </div>
  </div>
</section>

<section class="py-md-4 py-2 controller">
  
<div class="container-fluid">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="nav-item" id="btnReporte1">
      <a class="nav-link active" data-toggle="tab" href="#reporte1">Reporte general</a>
    </li>
    <li class="nav-item" id="btnReporte2" style="display:none;">
      <a class="nav-link" data-toggle="tab" href="#reporte2">Reporte por categorías completadas</a>
    </li>
    <li class="nav-item" id="btnReporte3" style="display:none;">
      <a class="nav-link" data-toggle="tab" href="#reporte3">Reporte por recursos revisados </a>
    </li>
    <li class="nav-item" id="btnReporte4" style="display:none;">
      <a class="nav-link" data-toggle="tab" href="#reporte4">Reporte por distritos</a>
    </li>
    <li class="nav-item" id="btnReporte7" >
      <a class="nav-link" data-toggle="tab" href="#reporte7">Reporte por cada categoría completados</a>
    </li>
    <li class="nav-item" id="btnReporte8" >
      <a class="nav-link" data-toggle="tab" href="#reporte8">Reporte por cada categoría visitados</a>
    </li>


    <li class="nav-item" id="btnReporte5" style="display: none;">
      <a class="nav-link" data-toggle="tab" href="#reporte5">Reporte categoría</a>
    </li>
    <li class="nav-item" id="btnReporte6" style="display: none;">
      <a class="nav-link" data-toggle="tab" href="#reporte3">Reporte por curso</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="reporte1" class="container-fluid tab-pane active"><br>


    </div>
    <div id="reporte2" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte3" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte4" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte5" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte6" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte7" class="container-fluid tab-pane fade"><br>

    </div>
    <div id="reporte8" class="container-fluid tab-pane fade"><br>

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





</section>

  <script type="text/javascript">
  jQuery(document).ready(function ($) {

    $(".nav-item").click(function(){
      //console.log($(this).attr("id"));
      $(".layer-load").show();
      switch($(this).attr("id")) {
        case "btnReporte1":
            $("#reporte1").load("reporte_general.php", function () {
              //$(".layer-load").hide();
            });
          break;
        case "btnReporte2":
            $("#reporte2").load("reporte_categoria_completada.php", function () {
              //$(".layer-load").hide();
            });
          break;
        case "btnReporte3":
            $("#reporte3").load("reporte_categoria_visitados.php", function () {
              //$(".layer-load").hide();
            });
          break;
        case "btnReporte4":
            $("#reporte4").load("reporte_distrito.php", function () {
              //$(".layer-load").hide();
            });
          break;
        case "btnReporte5":
           $("#reporte5").load("reporte_categoria.php", function () {
            //$(".layer-load").hide();
           });
          break;
        case "btnReporte6":
           $("#reporte6").load("reporte_curso.php", function () {
            //$(".layer-load").hide();
           });
          break;
        case "btnReporte7":
           $("#reporte7").load("reporte_categoria_completadav2.php", function () {
            //$(".layer-load").hide();
           });
          break;
        case "btnReporte8":
           $("#reporte8").load("reporte_categoria_visitadosv2.php", function () {
            //$(".layer-load").hide();
           });
          break;
        default:
          //$(".layer-load").hide();
      }

    });


    $("#reporte1").load("reporte_general.php", function () {
      $(".layer-load").hide();
    });

  });
  </script>