<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <h3 class="text-themecolor">Dashboard</h3>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
            <li class="breadcrumb-item active">Dashboard</li>
        </ol>
    </div>
    <div class="col-md-7 col-4 align-self-center">
        <!--a href="https://themewagon.com/themes/bootstrap-4-responsive-admin-template/" class="btn waves-effect waves-light btn-danger pull-right hidden-sm-down"></a-->
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row hide" id="admin_dashboard_content">
    <div class="col-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card-deck">
            <div class="card">
                <a href="#users_menu_link" class="card-header bg-primary" style="color: white;" onclick="users_summary_view()">
                    <span class="fas fa-users"></span>
                    Users : 3000
                </a>
            </div>
            <div class="card">
                <a href="#staff_menu_link" class="card-header bg-success" style="color: white;" onclick="active_staff_summary_view()">
                    <span class="fas fa-chalkboard-teacher"></span>
                    Staff : 60
                </a>
            </div>
            <div class="card">
                <a href="#school_menu_link" class="card-header bg-primary" style="color: white;" onclick="active_students_summary_view()">
                    <span class="fas fa-user-graduate"></span>
                    Students : 2940
                </a>
            </div>
        </div>
    </div>
    <!-- Column -->
    <div class="col-lg-12 col-md-12">
        <canvas id="myChart" style="max-height: 70vh"></canvas>
        <!--div class="card">
            <div class="card-block">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex flex-wrap">
                            <div>
                                <h3 class="card-title">Sales Overview</h3>
                                <h6 class="card-subtitle">Ample Admin Vs Pixel Admin</h6> </div>
                            <div class="ml-auto">
                                <ul class="list-inline">
                                    <li>
                                        <h6 class="text-muted text-success"><i class="fa fa-circle font-10 m-r-10 "></i>Ample</h6> </li>
                                    <li>
                                        <h6 class="text-muted  text-info"><i class="fa fa-circle font-10 m-r-10"></i>Pixel</h6> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="amp-pxl" style="height: 360px;"></div>
                    </div>
                </div>
            </div>
        </div-->
    </div>
    <!--div class="col-lg-4 col-md-5">
        <div class="card">
            <div class="card-block">
                <h3 class="card-title">Our Visitors </h3>
                <h6 class="card-subtitle">Different Devices Used to Visit</h6>
                <div id="visitor" style="height:290px; width:100%;"></div>
            </div>
            <div>
                <hr class="m-t-0 m-b-0">
            </div>
            <div class="card-block text-center ">
                <ul class="list-inline m-b-0">
                    <li>
                        <h6 class="text-muted text-info"><i class="fa fa-circle font-10 m-r-10 "></i>Mobile</h6> </li>
                    <li>
                        <h6 class="text-muted  text-primary"><i class="fa fa-circle font-10 m-r-10"></i>Desktop</h6> </li>
                    <li>
                        <h6 class="text-muted  text-success"><i class="fa fa-circle font-10 m-r-10"></i>Tablet</h6> </li>
                </ul>
            </div>
        </div>
    </div-->
</div>
<!-- Row -->
<!-- Row --
<div class="row">
    <!-- Column --
    <div class="col-lg-4 col-xlg-3 col-md-5">
        <!-- Column --
        <div class="card">
            <img class="card-img-top" src="assets/images/background/profile-bg.jpg" alt="Card image cap">
            <div class="card-block little-profile text-center">
                <div class="pro-img"><img src="assets/images/users/4.jpg" alt="user" /></div>
                <h3 class="m-b-0">Angela Dominic</h3>
                <p>Web Designer &amp; Developer</p>
                <a href="javascript:void(0)" class="m-t-10 waves-effect waves-dark btn btn-primary btn-md btn-rounded">Follow</a>
                <div class="row text-center m-t-20">
                    <div class="col-lg-4 col-md-4 m-t-20">
                        <h3 class="m-b-0 font-light">1099</h3><small>Articles</small></div>
                    <div class="col-lg-4 col-md-4 m-t-20">
                        <h3 class="m-b-0 font-light">23,469</h3><small>Followers</small></div>
                    <div class="col-lg-4 col-md-4 m-t-20">
                        <h3 class="m-b-0 font-light">6035</h3><small>Following</small></div>
                </div>
            </div>
        </div>
        <!-- Column --
        <div class="card">
            <div class="card-block bg-info">
                <h4 class="text-white card-title">My Contacts</h4>
                <h6 class="card-subtitle text-white m-b-0 op-5">Checkout my contacts here</h6>
            </div>
            <div class="card-block">
                <div class="message-box contact-box">
                    <h2 class="add-ct-btn"><button type="button" class="btn btn-circle btn-lg btn-success waves-effect waves-dark">+</button></h2>
                    <div class="message-widget contact-widget">
                        <!-- Message --
                        <a href="#">
                            <div class="user-img"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
                            <div class="mail-contnet">
                                <h5>Pavan kumar</h5> <span class="mail-desc">info@wrappixel.com</span></div>
                        </a>
                        <!-- Message --
                        <a href="#">
                            <div class="user-img"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
                            <div class="mail-contnet">
                                <h5>Sonu Nigam</h5> <span class="mail-desc">pamela1987@gmail.com</span></div>
                        </a>
                        <!-- Message --
                        <a href="#">
                            <div class="user-img"> <span class="round">A</span> <span class="profile-status away pull-right"></span> </div>
                            <div class="mail-contnet">
                                <h5>Arijit Sinh</h5> <span class="mail-desc">cruise1298.fiplip@gmail.com</span></div>
                        </a>
                        <!-- Message --
                        <a href="#">
                            <div class="user-img"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
                            <div class="mail-contnet">
                                <h5>Pavan kumar</h5> <span class="mail-desc">kat@gmail.com</span></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col-xlg-9 col-md-7">
        <div class="card">
            <!-- Nav tabs --
            <ul class="nav nav-tabs profile-tab" role="tablist">
                <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Activity</a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li>
                <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li>
            </ul>
            <!-- Tab panes --
            <div class="tab-content">
                <div class="tab-pane active" id="home" role="tabpanel">
                    <div class="card-block">
                        <div class="profiletimeline">
                            <div class="sl-item">
                                <div class="sl-left"> <img src="assets/images/users/1.jpg" alt="user" class="img-circle"> </div>
                                <div class="sl-right">
                                    <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                                        <p>assign a new task <a href="#"> Design weblayout</a></p>
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 m-b-20"><img src="assets/images/big/img1.jpg" alt="user" class="img-responsive radius"></div>
                                            <div class="col-lg-3 col-md-6 m-b-20"><img src="assets/images/big/img2.jpg" alt="user" class="img-responsive radius"></div>
                                            <div class="col-lg-3 col-md-6 m-b-20"><img src="assets/images/big/img3.jpg" alt="user" class="img-responsive radius"></div>
                                            <div class="col-lg-3 col-md-6 m-b-20"><img src="assets/images/big/img4.jpg" alt="user" class="img-responsive radius"></div>
                                        </div>
                                        <div class="like-comm"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="sl-item">
                                <div class="sl-left"> <img src="assets/images/users/2.jpg" alt="user" class="img-circle"> </div>
                                <div class="sl-right">
                                    <div> <a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                                        <div class="m-t-20 row">
                                            <div class="col-md-3 col-xs-12"><img src="assets/images/big/img1.jpg" alt="user" class="img-responsive radius"></div>
                                            <div class="col-md-9 col-xs-12">
                                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </p> <a href="#" class="btn btn-success"> Design weblayout</a></div>
                                        </div>
                                        <div class="like-comm m-t-20"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="sl-item">
                                <div class="sl-left"> <img src="assets/images/users/3.jpg" alt="user" class="img-circle"> </div>
                                <div class="sl-right">
                                    <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                                        <p class="m-t-10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper </p>
                                    </div>
                                    <div class="like-comm m-t-20"> <a href="javascript:void(0)" class="link m-r-10">2 comment</a> <a href="javascript:void(0)" class="link m-r-10"><i class="fa fa-heart text-danger"></i> 5 Love</a> </div>
                                </div>
                            </div>
                            <hr>
                            <div class="sl-item">
                                <div class="sl-left"> <img src="assets/images/users/4.jpg" alt="user" class="img-circle"> </div>
                                <div class="sl-right">
                                    <div><a href="#" class="link">John Doe</a> <span class="sl-date">5 minutes ago</span>
                                        <blockquote class="m-t-10">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--second tab--
                <div class="tab-pane" id="profile" role="tabpanel">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-md-3 col-xs-6 b-r"> <strong>Full Name</strong>
                                <br>
                                <p class="text-muted">Johnathan Deo</p>
                            </div>
                            <div class="col-md-3 col-xs-6 b-r"> <strong>Mobile</strong>
                                <br>
                                <p class="text-muted">(123) 456 7890</p>
                            </div>
                            <div class="col-md-3 col-xs-6 b-r"> <strong>Email</strong>
                                <br>
                                <p class="text-muted">johnathan@admin.com</p>
                            </div>
                            <div class="col-md-3 col-xs-6"> <strong>Location</strong>
                                <br>
                                <p class="text-muted">London</p>
                            </div>
                        </div>
                        <hr>
                        <p class="m-t-30">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries </p>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <h4 class="font-medium m-t-30">Skill Set</h4>
                        <hr>
                        <h5 class="m-t-30">Wordpress <span class="pull-right">80%</span></h5>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
                        </div>
                        <h5 class="m-t-30">HTML 5 <span class="pull-right">90%</span></h5>
                        <div class="progress">
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
                        </div>
                        <h5 class="m-t-30">jQuery <span class="pull-right">50%</span></h5>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
                        </div>
                        <h5 class="m-t-30">Photoshop <span class="pull-right">70%</span></h5>
                        <div class="progress">
                            <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%; height:6px;"> <span class="sr-only">50% Complete</span> </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="settings" role="tabpanel">
                    <div class="card-block">
                        <form class="form-horizontal form-material">
                            <div class="form-group">
                                <label class="col-md-12">Full Name</label>
                                <div class="col-md-12">
                                    <input type="text" placeholder="Johnathan Doe" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="example-email" class="col-md-12">Email</label>
                                <div class="col-md-12">
                                    <input type="email" placeholder="johnathan@admin.com" class="form-control form-control-line" name="example-email" id="example-email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Password</label>
                                <div class="col-md-12">
                                    <input type="password" value="password" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Phone No</label>
                                <div class="col-md-12">
                                    <input type="text" placeholder="123 456 7890" class="form-control form-control-line">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-12">Message</label>
                                <div class="col-md-12">
                                    <textarea rows="5" class="form-control form-control-line"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12">Select Country</label>
                                <div class="col-sm-12">
                                    <select class="form-control form-control-line">
                                        <option>London</option>
                                        <option>India</option>
                                        <option>Usa</option>
                                        <option>Canada</option>
                                        <option>Thailand</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button class="btn btn-success">Update Profile</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--FOR STUDENTS-->
<div class="row hide" id="student_dashboard_content">
    <div class="col-sm-12 col-lg-12">
        <div class="card-deck">
            <div class="card">
                <a href="#d_student_status" class="card-header bg-primary" style="color: white;">
                    <span class=""></span>
                    Current class : Form 4
                </a>
            </div>
            <div class="card">
                <a href="#d_announcements" class="card-header bg-success" style="color: white;">
                    <span class="fas fa-microphone"></span>
                    Announcements : 4
                </a>
            </div>
            <div class="card">
                <a href="#d_subjects" class="card-header bg-primary" style="color: white;">
                    <span class="fas fa-list"></span>
                    Registered subjects : 8
                </a>
            </div>
        </div>
    </div>

    <!-- Column -->
    <div class="col-sm-12 col-lg-12">
        <div class="col-sm-12 col-lg-12 card" id="d_student_status">
            <div class="card-header bg-light text-center">Student status</div>
            <div class="card-body">
                <table class="table table-borderless" id="active_students_summary_table">
                   <thead>
                        <tr>
                            <th>Current form</th>
                            <th>Type</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>Day</td>
                            <td>Active</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card" id="d_announcements">
            <div class="card-header bg-light text-center">Announcements</div>
            <div class="card-body p-2">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Heading</th>
                            <th>Announcement content</th>
                            <th>Date</th>
                        </tr> 
                    </thead>
                    <tbody>
                        <tr>
                            <td>Mock Exams</td>
                            <td>You have mock exams this week</td>
                            <td>00:00:00</td>
                        </tr>
                        <tr>
                            <td>Mock Exams</td>
                            <td>You have mock exams this week</td>
                            <td>00:00:00</td>
                        </tr>
                        <tr>
                            <td>Mock Exams</td>
                            <td>You have mock exams this week</td>
                            <td>00:00:00</td>
                        </tr>
                        <tr>
                            <td>Mock Exams</td>
                            <td>You have mock exams this week</td>
                            <td>00:00:00</td>
                        </tr>
                        <tr>
                            <td>Mock Exams</td>
                            <td>You have mock exams this week</td>
                            <td>00:00:00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card" id="d_subjects">
            <div class="card-header bg-light text-center">Registered Subjects</div>
            <div class="card-body">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Academic year</th>
                            <th>Term</th>
                            <th>Subject Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-12 col-lg-12 card">
            <div class="card-header bg-light text-center">Fees Status</div>
            <div class="card-body">
                <table class="table table-borderless" id="active_students_summary_table">
                    <thead>
                        <tr>
                            <th>Academic year</th>
                            <th>Term</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2020/2021</td>
                            <td>1</td>
                            <td>Completed</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>     

<hr>
<!--FOR TEACHERS-->
<div class="row hide" id="teacher_dashboard_content">
    <div class="col-sm-12 col-lg-12">
        <div class="card-deck">
            <div class="card">
                <a href="#" class="card-header bg-primary" style="color: white;cursor: pointer;" onclick="students_in_class_view()">
                    <span class="fas fa-user-graduate"></span>
                    Total students : 300
                </a>
            </div>
            <div class="card">
                <a href="#" class="card-header bg-success" style="color: white;cursor: pointer;" onclick="students_in_class_view()">
                    <span class="fas fa-microphone"></span>
                    Your Subjects : 5
                </a>
            </div>
        </div>
    </div>
    <div class="col-sm-12 col-lg-12">
        <div class="row card-deck">
            <div class="col-sm-12 col-lg-4 card">
                <div class="card-header bg-light">Your summary</div>
                <div class="card-body p-2">
                    <table class="table table-borderless" id="active_students_summary_table">
                        <thead>
                            
                        </thead>
                        <tbody>
                            <tr>
                                <th>ID</th>
                                <td>1149</td>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td>Mwenewezi Chanika</td>
                            </tr>
                            <tr>
                                <th>Sex</th>
                                <td>Male</td>
                            </tr>
                            <tr>
                                <th>Age</th>
                                <td>22</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-sm-12 col-lg-4 card">
                <div class="card-header bg-light">Duties</div>
                <div class="card-body">
                    <table class="table table-borderless" id="active_students_summary_table">
                        <thead>
                            <tr>
                                <th>Identifier</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Position</td>
                                <td>Head Master</td>
                            </tr>
                            <tr>
                                <td>Qualification</td>
                                <td>Undergraduate degree</td>
                            </tr>
                            <tr>
                                <td>Department</td>
                                <td>Languages</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-sm-12 col-lg-4 card">
                <div class="card-header bg-light">Other details</div>
                <div class="card-body">
                    <table class="table table-borderless" id="active_students_summary_table">
                       <thead>
                            <tr>
                                <th>Identifier</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Other Name</td>
                                <td>Mw</td>
                            </tr>
                             <tr>
                                <td>Maiden Name</td>
                                <td>Mw</td>
                            </tr>
                            <tr>
                                <td>T/A</td>
                                <td>M'mberwa</td>
                            </tr>
                            <tr>
                                <td>Village</td>
                                <td>Gwamanda</td>
                            </tr>
                            <tr>
                                <td>Home District</td>
                                <td>Mw</td>
                            </tr>
                            <tr>
                                <td>Maiden Name</td>
                                <td>Mzimba</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Biology', 'Mathematics', 'English', 'Geography'],
        datasets: [{
            label: 'Teachers Vs Subjects',
            data: [4, 6 , 3, 4],
            
            borderColor: [
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
