@extends('layouts.admin')

@section('content')

<div class="main-content-wrap sidenav-open d-flex flex-column">
  <!-- ============ Body content start ============= -->
  <div class="main-content">

    <div class="row">
      <div class="col-md-12">
        <label></label>

      </div>
    </div>

  <!-- first row -->

    <div class="row py-2">
      <div class="col-md-12">
         <div class="row">
            <div class="col-md-3">
               <div class="box-style">
             <ul>
                <li  ><b style=" font-size:25px;display:block;">143</b><b  class="theme_red">Active Learners</b></li>
                <li class=""><i class="fas fa-users fa-2x  pl-3 text-success fa-3x"></i></li>
              </ul>
            </div>
            </div><!-- BOX1 ends-->
          <div class="col-md-3">
            <div class="box-style">
              <ul>
                <li class="" ><b style=" font-size:25px;display:block;">58</b><b  class="theme_red">Inactive Learners</b></li>
                <li ><i class="fas fa-users fa-2x  pl-3 text-warning fa-3x" style=" margin-left:30px;"></i></li>
              </ul>
            </div>
          </div><!-- BOX2 ends-->
         
          <div class="col-md-3">
            <div class="box-style">
              <ul>
                <li class="" ><b style=" font-size:25px;display:block;">58</b><b  class="theme_red"> Pending Instructors</b></li>
                <li ><i class="fas fa-users fa-2x  pl-3 text-warning fa-3x" style=" margin-left:30px;"></i></li>
              </ul>
            </div>
          </div><!-- BOX3 ends-->
          <div class="col-md-3">
            <div class="box-style">
             <ul>
                <li class="" ><b style=" font-size:25px;display:block;">58</b><b  class="theme_red"> Unverified Instructors</b></li>
                <li ><i class="fas fa-user-slash fa-2x  pl-3 text-danger fa-3x" style=" margin-left:30px;"></i></li>
              </ul>
            </div>
          </div><!-- BOX4 ends-->

          <div class="col-md-3">
            <div class="box-style">
              <ul>
                <li class="" ><b style=" font-size:25px;display:block;">58</b> <b class="theme_red">Verified Instructors</b></li>
                <li ><i class="fas fa-user-check fa-2x  pl-3 text-success fa-3x" style=" margin-left:30px;"></i></li>
              </ul>
            </div>
          </div><!-- BOX5 ends-->
          <div class="col-md-3">
            <div class="box-style">
             <ul>
                <li class="" ><b style=" font-size:25px;display:block;">58</b><b  class="theme_red">Active Users</b></li>
                <li ><i class="fas fa-user-friends fa-2x  pl-3 text-success fa-3x" style=" margin-left:30px;"></i></li>
              </ul>
            </div>
          </div><!-- BOX6 ends-->
      </div>
      </div>

    </div> 

   <!-- second row -->
  <!-- Libraies Section -->

    <div class="row py-2">
      <div class="col-md-12 p-2 rounded">
        <div class=""><i class="fa fa-server"></i><b> Statistics</b></div>
      </div>
     <div class="col-md-6 ">
        <div class="row">
          <div class="col-md-12 ">
             <div id="ds-chart" class="bg-white"></div>
          </div>
        </div>
      </div> 
      <div class="col-md-6 ">
        <div class="row bg-white">
          <canvas id="myChart2" style="width:100%;max-width:600px"></canvas>
        </div> 
      </div>

    </div>

  <!-- Second ROW End-->
  <!-- Third ROW start-->

  <div class="row py-2">
     {{-- <div class="col-md-6 ">
        <div class="row  ">
          <div class="col-md-12 ">
            <div class="text-white bg-blue p-2 rounded"><i class="fa fa-users"></i><b> Recent Users</b><!-- <span class="text-right"><button type="button" class="btn btn-white btn-sm"><b> See More</b></button></span> --></div>
          </div>

          <div class="col-md-12 ">
            <div class="bg-white">
            <div class="row">
              <div class="col-md-12 table-responsive">
                   <table class="text-center">
                     <thead>
                       <tr>
                         <th>Name</th>
                         <th>Phone</th>
                         <th>Email</th>
                         <th>Role</th>
                         <th>Status</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr class="border-top">
                        <td><a href="#"> Ahmet Ali</a></td>

                       <td>
                        +1-7875646545
                      </td>
                      <td>
                        ms@mailinator.com
                      </td>
                      <td>
                       Manager
                      </td>
                      <td>
                        <p class="bg-danger mb-0 p-1 text-white"> Inactive</p>
                      </td>
                    </tr> <!-- firsttable row end -->

                     <tr class="border-top">
                        <td><a href="#">Mukul Anand</a></td>

                       <td>
                        +1-9798988767
                      </td>
                      <td>
                       a@mailinator.com
                      </td>
                      <td>
                        Manager
                      </td>
                      <td>
                        <p class="bg-success mb-0 p-1 text-white"> Active</p>
                      </td>
                    </tr> <!-- secondtable row end -->

                     <tr class="border-top">
                        <td><a href="#"> Aakash Sharma</a></td>

                       <td>
                        +1-345676567
                      </td>
                      <td>
                        akash@mailinator.com
                      </td>
                      <td>
                       Manager
                      </td>
                      <td>
                        <p class="bg-danger mb-0 p-1 text-white"> Not Verified</p>
                      </td>
                    </tr> <!-- thridtable row end -->
                     </tbody>
                   </table>
              </div>
            </div>
            </div>
          </div>

        </div>

      </div> --}}


      <div class="col-md-6 ">

      <!--Configuration Section-->
        {{-- <div class="row bg-white">

          <div class="col-md-12 text-white bg-blue p-2 rounded">
            <div class=""><i class="fas fa-user-cog"></i><b> Staffs</b></div>
          </div>

          <div class="col-md-12"> <b>Select an existing Employee, then click a link</b></div>
          <div class="col-md-12 ">
                <div class="input-group mb-3">
                  <select class="custom-select" id="inputGroupSelect02">
                    <option selected>Enter Employee Name To Search</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>
                </div>
          </div>
          <div class="col-md-6 ">
            <div class="border-top p-2">
              <a href="upload-bci-fbi.php">Documents</a>
            </div>
          </div>
           <div class="col-md-6 ">
            <div class="border-top p-2">
              <a href="7-webchecks.php">Employee Profile</a>
            </div>
          </div>
          <div class="col-md-6 ">
             <div class="border-top p-2">
              <a href="90-day-review.php">Jobs</a>
            </div>
          </div>
          <div class="col-md-6 ">
             <div class="border-top p-2">
              <a href="tb-test-form.php">Payments</a>
            </div>
          </div>
          <div class="col-md-6 ">
             <div class="border-top p-2">
              <a href="reference-check-form.php">Settings</a>
            </div>
          </div>

          <div class="col-md-6 ">
             <div class="border-top p-2">
              <a href="professional-reference.php">Professional Information</a>
              </div>
          </div>

        </div> --}}
      </div>

    </div>

<!-- Third ROW start-->


  </div>
  <!-- Footer Start -->
  <div class="flex-grow-1"></div>
</div>
<!-- main content -->
<script src="https://www.latogo.de/assets/plugins/apexchart/apexcharts.min.js"></script>
<script src="https://www.latogo.de/assets/plugins/apexchart/chart-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<script>
var xValues2 = ["Available Slots", "Booked Slots"];
var yValues2 = [55, 10];
var barColors2 = [
  "#13284d",
  "#ae1e23"
];

new Chart("myChart2", {
  type: "pie",
  data: {
    labels: xValues2,
    datasets: [{
      backgroundColor: barColors2,
      data: yValues2
    }]
  },
  options: {
    title: {
      display: true,
      text: "Booking Slots"
    }
  }
});
</script>

    <script>

$(document).ready(function() {
        $('.pre-loader').hide();
    });
    $(document).on('click','.cancle1',function(){
        var active = $(this).attr('data-id');
        Swal.fire({
                title: 'Do you want to cancel the class?',
                icon: 'info',
                html:
                '<a href="https://www.latogo.de/student/cancle" target="_blank">Cancellation Policy</a> ',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, cancel it!'
                }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $('.pre-loader').show();
                    $.ajax({
                        url: "https://www.latogo.de/teacher/cancleclass",
                        type: "get",
                        data: {
                            'active': active,
                        },
                        success: function(response) {
                                window.location = "https://www.latogo.de"+"/teacher/dashboard";
                            $('.pre-loader').hide();
                        }
                    });
                }
                })
        });

        var options = {
            series: [{
                name: 'Total Available Slots',
                data: [80,70 ,42 ,51, 31, 40, 28] //[80,70 ,42 ,51, 31, 40, 28]
            }, {
                name: 'Booked Slots',
                data: [41, 52, 45, 34, 32, 20, 32] //[41, 52, 45, 34, 32, 20, 32  ]
            }],
            chart: {
                height: 300,
                type: 'area',
        toolbar: {
          show: false
        }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
      colors: ['#13284d', '#ae1e23'],
            xaxis: {
                type: 'datetime',
                categories: ["2023-08-03","2023-08-04","2023-08-05","2023-08-06","2023-08-07","2023-08-08","2023-08-09"] /*["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z",
                    "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z",
                    "2018-09-20T06:30:00.000Z"
                ]*/
            },
            tooltip: {
                x: {
                    format: 'yyyy/MM/dd'
                },
            },
        };

        var chart = new ApexCharts(document.querySelector("#ds-chart"), options);
        chart.render();


    </script>

@endsection