@extends('master')
@section('title')
    {{$title}}
@endsection

@section('content')
    
     

   <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Dashboard</h1>
        </div><!-- /.col -->
      
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <!-- Small boxes (Stat box) -->
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">News</p>
          <h4  style=" color:black">Manage Latest News</h4>
        </div> 
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="{{ url('admin/news')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>    
      <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">Notices</p>
          <h4 style=" color:black">Manage latest Notices</h4>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="{{url('admin/notices')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>   
     <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">Events</p>
          <h4 style=" color:black">Post Events/ Activation</h4>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="{{ url('admin/events')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>
    
   </div>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">Online Application</p>
          <h4 style="color: black">Manage Online Application</h4>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="{{url('admin/online_application')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>  
      <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">Alumni Management</p>
          <h4>View, Post, Manage Activities</h4>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>   
     <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
      <div class="small-box bg-info">
        <div class="inner">
          <p class="text-muted">News</p>
          <h4>Manage Latest News</h4>
        </div>
        <div class="icon">
          <i class="ion ion-bag"></i>
        </div>
        <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
      </div>
    </div>
    
   </div>
      <!-- /.row -->
      <!-- Main row -->
     


          <!-- solid sales graph -->
          <div class="card bg-gradient-info">
            <div class="card bg-gradient-info">
              <div class="card-header border-0">
                <h3 class="card-title">
                  <i class="fas fa-th mr-1"></i>
                  Page Views (Last 28 Days)
                </h3>
            
                <div class="card-tools">
                  <button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas class="chart" id="line-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
              </div>
             
                  <!-- ./col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.card-footer -->
            </div>
            
            <!-- Include Chart.js -->
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script>
              var ctx = document.getElementById('line-chart').getContext('2d');
              var pageViewData = {
                labels: [
                  '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28'
                ],
                datasets: [{
                  label: 'Page Views',
                  data: [500, 600, 700, 800, 1000, 1200, 1300, 1500, 1600, 1700, 1900, 2000, 2200, 2300, 2400, 2500, 2700, 2900, 3000, 3100, 3200, 3300, 3500, 3600, 3700, 3800, 3900, 4000],
                  fill: false,
                  borderColor: '#39CCCC',
                  tension: 0.1
                }]
              };
            
              var config = {
                type: 'line',
                data: pageViewData,
                options: {
                  responsive: true,
                  plugins: {
                    legend: {
                      position: 'top',
                    },
                    tooltip: {
                      mode: 'index',
                      intersect: false,
                    }
                  },
                  scales: {
                    x: {
                      display: true,
                      title: {
                        display: true,
                        text: 'Days'
                      }
                    },
                    y: {
                      display: true,
                      title: {
                        display: true,
                        text: 'Page Views'
                      }
                    }
                  }
                }
              };
            
              var lineChart = new Chart(ctx, config);
            </script>
            
        
        
        
          </div>
        
        
          <!-- /.card -->
        </section>
        <!-- right col -->
      </div>
      <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->
 
@endsection