{% extends 'admin/base.html' %}
{% block content %}
<div class="small-box bg-info"style="width: 33%;float:left;margin-right:8px;">
    <div class="inner">
        <h3>Candidate</h3>
        <p id="candidate"></p>
    </div>
    <div class="icon">
        <i class="fas fa-solid fa-graduation-cap"></i>
    </div>
    <a href="/admin/mcq/candidate/" class="small-box-footer">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
<div class="small-box bg-gradient-success"style="width: 33%;float:left;margin-right:8px;">
    <div class="inner">
        <h3>Campus</h3>
        <p id="campus_total"></p>
    </div>
    <div class="icon">
        <i class="fas fa-light fa-archway"></i>
    </div>
    <a href="/admin/mcq/campus/" class="small-box-footer" style="color: white;">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
<div class="small-box bg-gradient-warning"style="width: 33%;float: right;">
    <div class="inner"style="color: white;">
        <h3> Contact of Campus</h3>
        <p id="campus_contact"></p>
    </div>
    <div class="icon">
        <i class="fas fa-thin fa-tty"></i>
    </div>
    <a href="/admin/mcq/campuscontact/" class="small-box-footer"style="color: white;">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
<div class="small-box bg-danger"style="width: 33%;float:left;margin-right:8px;">
    <div class="inner">
        <h3>Department</h3>
        <p id="department"></p>
    </div>
    <div class="icon">
        <i class="fas fa-thin fa-address-card"></i>
    </div>
    <a href="/admin/mcq/department/" class="small-box-footer">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
<div class="small-box bg-gradient-dark"style="width: 33%;float:left;margin-right:8px;">
    <div class="inner">
        <h3>Categories</h3>
        <p id="categories"></p>
    </div>
    <div class="icon">
        <i class="fas fa-thin fa-layer-group"></i>
    </div>
    <a href="/admin/mcq/categories/" class="small-box-footer"style="color: white;">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
<div class="small-box bg-gradient-primary"style="width: 33%;float: right;">
    <div class="inner">
        <h3>Questions</h3>
        <p id="questions"></p>
    </div>
    <div class="icon">
        <i class="fas fa-solid fa-question"></i>
    </div>
    <a href="/admin/mcq/question/" class="small-box-footer"style="color: white;">
        More info <i class="fas fa-arrow-circle-right"></i>
    </a>
</div>
{% endblock %}

{% block extrajs %}
<script>
    $(document).ready(function(){
        $.ajax({ url: "/auth/post/ajax/friend/",
            context: document.body,
            success: function(data){
                console.log(data)
                document.getElementById("candidate").textContent =data.candidate
                document.getElementById("campus_total").textContent =data.campus
                document.getElementById("campus_contact").textContent =data.campus_contact
                document.getElementById("department").textContent =data.department
                document.getElementById("categories").textContent =data.categories
                document.getElementById("questions").textContent =data.questions
            }
        });
    });
</script>
{% endblock %}
