@extends('layouts.admin')



@section('content')

<div  class="row">
    <div  class="col-lg-12" style="margin-bottom: -20px;">
    <h1 class="page-header">Admin Area</h1>
    </div>
    <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
     <div class="col-lg-4 col-md-6" >
    <div class="panel panel" style="background-color: #2E9AFE; color:white" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
    <i style="opacity: 0.3; font-size: 60px; color:black" class="fas fa-graduation-cap"></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">{{ $students->count() }}</div>
    <div>Total Student's</div>
    </div>
    </div>
    </div>
    <a href="{{URL('student')}}">
    <div class="panel-footer" style="height:20px; padding-top: -10px;
    background-color: #2E9AFE; opacity: 0.7; color:white">
    <span style="margin-top: -10px;" class="pull-left">More Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>

     <div class="col-lg-4 col-md-6" >
    <div class="panel panel-green" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
   <i style="opacity: 0.3; font-size: 60px; color:black" class="fas fa-chalkboard-teacher"></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">{{ $lecturers->count() }}</div>
    <div>Total Lecturer</div>
    </div>
    </div>
    </div>
    <a href="{{URL('lecture')}}">
    <div class="panel-footer" style="height:20px; padding-top: -10px;background-color: green; color:white; opacity: 0.7">
    <span style="margin-top: -10px;" class="pull-left">More Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>
     <div class="col-lg-4 col-md-6" >
    <div class="panel panel-red" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
    
    <i style="opacity: 0.3; font-size: 60px; color:black" class='fas fa-laptop-code'></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">4</div>
    <div>Total Course</div>
    </div>
    </div>
    </div>
    <a href="{{URL('Computer_department')}}">
    <div class="panel-footer" style="height:20px; padding-top: -10px; background-color: red; opacity: 0.7; color: white">
    <span style="margin-top: -10px;" class="pull-left">More Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>
     <div class="col-lg-4 col-md-6" >
    <div class="panel panel" style="background-color: #4A235A; color: white" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
    <i style="opacity: 0.3; font-size: 60px; color:black" class="fa fa-book fa-5x"></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">{{ $subjects->count() }}</div>
    <div>Total Subject</div>
    </div>
    </div>
    </div>
    <a href="{{URL('subjects')}}">
    <div class="panel-footer" style="height:20px; padding-top: -10px; background-color: #4A235A; color:white; opacity: 0.7">
    <span style="margin-top: -10px;" class="pull-left">More Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>
     <div class="col-lg-4 col-md-6" >
    <div class="panel panel" style="background-color: #1F618D; color:white" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
    <i style="opacity: 0.3; font-size: 60px; color:black" class="fa fa-users fa-5x"></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">{{ $users->count() }}</div>
    <div>Total Users</div>
    </div>
    </div>
    </div>
    <a href="#">
    <div class="panel-footer" style="height:20px; padding-top: -10px; background-color: #1F618D; color:white; opacity: 0.7">
    <span style="margin-top: -10px;" class="pull-left">View Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>

     <div class="col-lg-4 col-md-6" >
    <div class="panel panel" style="background-color: #F5B041; color:white;" >
    <div class="panel-heading" style="height: 80px; ">
    <div class="row" >
    <div class="col-xs-3">
    <i style="opacity: 0.3; font-size: 60px; color:black" class="fa fa-tasks fa-5x"></i>
    </div>
    <div  class="col-xs-9 text-right">
    <div style="margin-top: -10px;" class="huge">14</div>
    <div>New Application</div>
    </div>
    </div>
    </div>
    <a href="#">
    <div class="panel-footer" style="height:20px; padding-top: -10px;background-color: #F5B041; color:white; opacity: 0.7">
    <span style="margin-top: -10px;" class="pull-left">View Details</span>
    <span style="margin-top: -10px;" class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>

    <div class="clearfix"></div>
    </div>
    </a>
    </div>
    </div>



    </div>
 <div class="col-lg-8">
   
  <canvas id="myChart" width="400" height="270"></canvas>
  <hr>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Student', 'Lecturer', 'Course', 'Subject', 'AdminUser', 'Application'],
        datasets: [{
            label: 'Managment Chart',
            data: [{{ $students->count() }},
             {{ $lecturers->count() }},
              4,
               {{ $subjects->count() }},
                {{ $users->count() }},
                 8

                 ],
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)',
                'rgba(60, 179, 113, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                
                'rgba(153, 102, 255, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(60, 179, 113, 1)',
                'rgba(255, 99, 132, 1)',
                
                'rgba(153, 102, 255, 1)',
                'rgba(75, 192, 192, 1)',
                
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>


    <!-- /.panel -->
    </div>
    <!-- /.col-lg-8 -->
    <div class="col-lg-4">
    <div class="panel panel-default">
    <div class="panel-heading">
    <i class="fa fa-bell fa-fw"></i> Notifications Panel
    </div>
    <!-- /.panel-heading -->
    <div class="panel-body">
    <div class="list-group">
    <a href="#" class="list-group-item">
    <i class="fa fa-comment fa-fw"></i> New Comment
    <span class="pull-right text-muted small"><em>4 minutes ago</em>
    </span>
    </a>
    <a href="#" class="list-group-item">
    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
    <span class="pull-right text-muted small"><em>12 minutes ago</em>
    </span>
    </a>
    <a href="#" class="list-group-item">
    <i class="fa fa-envelope fa-fw"></i> Message Sent
    <span class="pull-right text-muted small"><em>27 minutes ago</em>
    </span>
    </a>
    <a href="#" class="list-group-item">
    <i class="fa fa-tasks fa-fw"></i> New Task
    <span class="pull-right text-muted small"><em>43 minutes ago</em>
    </span>
    </a>

    <a href="#" class="list-group-item">
    <i class="fa fa-bolt fa-fw"></i> System!
    <span class="pull-right text-muted small"><em>11:13 AM</em>
    </span>
    </a>

    <a href="#" class="list-group-item">
    <i class="fa fa-shopping-cart fa-fw"></i> New Application
    <span class="pull-right text-muted small"><em>9:49 AM</em>
    </span>
    </a>
    <a href="#" class="list-group-item">
    <i class="fa fa-money fa-fw"></i> Payment Received
    <span class="pull-right text-muted small"><em>Yesterday</em>
    </span>
    </a>
    </div>
    <!-- /.list-group -->
    <a href="#" class="btn btn-default btn-block">View All Alerts</a>
    </div>
    <!-- /.panel-body -->
    </div>
    <!-- /.panel -->


    <!-- /.col-lg-4 -->
    </div>
    <!-- /.row -->
     <div >
     

@endsection