@extends('layouts.app')
@section('body')
    <div class="page">
      <!-- Main Navbar-->
      <header class="header">
        <nav class="navbar">
          <!-- Search Box-->
          <div class="search-box">
            <button class="dismiss"><i class="icon-close"></i></button>
            <form id="searchForm" action="#" role="search">
              <input type="search" placeholder="What are you looking for..." class="form-control">
            </form>
          </div>
          <div class="container-fluid">
            <div class="navbar-holder d-flex align-items-center justify-content-between">
              <!-- Navbar Header-->
              <div class="navbar-header">
                <!-- Navbar Brand --><a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                  <div class="brand-text d-none d-lg-inline-block"><span> </span><strong>Matriculas</strong></div>
                  <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>BD</strong></div></a>
                <!-- Toggle Button--><a id="toggle-btn" href="#" class="menu-btn active"><span></span><span></span><span></span></a>
              </div>
              <!-- Navbar Menu -->
              <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
               
               
            
               
                <!-- Logout    -->
                <li class="nav-item"><a href="login.html" class="nav-link logout"> <span class="d-none d-sm-inline">Salir</span><i class="fa fa-sign-out"></i></a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <div class="page-content d-flex align-items-stretch"> 
        <!-- Side Navbar -->
        <nav class="side-navbar">
          <!-- Sidebar Header-->
          <div class="sidebar-header d-flex align-items-center">
            <div class="avatar"><img src="img/avatar.png" alt="..." class="img-fluid rounded-circle"></div>
            <div class="title">
            <h1 class="h4">{{Session::get('Usuario')}}</h1>
              <p>Administrador</p>
            </div>
          </div>
          <!-- Sidebar Navidation Menus--><span class="heading">Iniico</span>
          <ul class="list-unstyled">
            <li class="active"><a href="Dashboard"> <i class="icon-home"></i>Inicio </a></li>
            <li><a href="Matricula"> <i class="icon-grid"></i>Matriculaa </a></li>
            <li><a href="Alumnos"> <i class="fa fa-bar-chart"></i>Alumnos </a></li>
            <li><a href="Apoderados"> <i class="icon-padnote"></i>Apoderados </a></li>
            <!--
            <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Example dropdown </a>
              <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
              </ul>
            </li>
        -->
          </ul>
          
        </nav>
        <div class="content-inner">
          <!-- Page Header-->
          <header class="page-header">
            <div class="container-fluid">
              <h2 class="no-margin-bottom">Inicio</h2>
            </div>
          </header>
          <!-- Dashboard Counts Section-->
          <section class="dashboard-counts no-padding-bottom">
            <div class="container-fluid">
              <div class="row bg-white has-shadow">
            
                 <div class="col-sm-4">
                 <canvas id="pie-chart2"></canvas>
                </div>
                <div class="col-sm-4">
                 <canvas id="pie-chart"></canvas>
                </div>
                <div class="col-sm-4">
                 <canvas id="pie-chart3"></canvas>
                </div>
                <hr style="color: #EEF5F9">
                <div class="col-sm-4">
                 <canvas id="pie-chart4"></canvas>
                </div>
                <div class="col-sm-4">
                 <canvas id="pie-chart5"></canvas>
                </div>
                <div class="col-sm-4">
                 <canvas id="pie-chart6"></canvas>
                </div>
              </div>
            </div>
          </section>
           
         
      
        
          
          <!-- Page Footer-->
          <footer class="main-footer">
            <div class="container-fluid">
              <div class="row">
                <div class="col-sm-6">
                  <p>Discovery School &copy; 2020</p>
                </div>
                <div class="col-sm-6 text-right">
                  
                </div>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  
    <script>
    
   new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_kinder}},{{$nomatriculados_kinder}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Kinder'
      }
    }
});
new Chart(document.getElementById("pie-chart2"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_prekinder}},{{$nomatriculados_prekinder}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Pre-Kinder'
      }
    }
});
new Chart(document.getElementById("pie-chart3"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_1b}},{{$nomatriculados_1b}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Primero Basico'
      }
    }
});
new Chart(document.getElementById("pie-chart4"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_2b}},{{$nomatriculados_2b}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Segundo Basico'
      }
    }
});
new Chart(document.getElementById("pie-chart5"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_3b}},{{$nomatriculados_3b}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Tercero Basico'
      }
    }
});
new Chart(document.getElementById("pie-chart6"), {
    type: 'pie',
    data: {
      labels: ["Matriculados", "No Matriculados"],
      datasets: [{
        backgroundColor: ["#3e95cd", "#8e5ea2"],
        data: [{{$matriculados_4b}},{{$nomatriculados_4b}}]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Primero Basico'
      }
    }
});
      </script>
 @endsection