{% extends 'base.html' %}

{% load static %}




{% block content %}

<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Back Office Dashboard</h1>
        </div>
        <div class="row">

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">

                        <div class="col mt-0">
                            <h5 class="card-title">Number of Students</h5>
                        </div>

                        <div class="row">
                            <div class="col-md-4">

                                <div class="card bg-light border">
                                    <div class="card-body">
                                        <div class="col-md-12">
                                            <h5 class="card-title text-primary text-center">Studying</h5>
                                        </div>
                                        <div class="col-md-12">
                                            <h2 class="text-primary text-center">10</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">

                                <div class="card bg-light border">
                                    <div class="card-body">
                                        <div class="col-md-12">
                                            <h5 class="card-title text-success text-center">Graduated</h5>
                                        </div>
                                        <div class="col-md-12">
                                            <h2 class="text-success text-center">10</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">

                                <div class="card bg-light border">
                                    <div class="card-body">
                                        <div class="col-md-12">
                                            <h5 class="card-title text-danger text-center">Dropped</h5>
                                        </div>

                                        <div class="col-md-12">
                                            <h2 class="text-danger text-center">
                                                5</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>

                <div class="row">

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-primary">Number of Courses</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-primary">15</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>



                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-primary">Number of Counsellors</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-primary">12</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title">Counsellors' Performance</h5>
                            </div>
                            <div class="card-body">
                                <div class="chart">
                                    <canvas id="students-of-counsellors-chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Stydying Courses</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="courses-chart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <div class="col-md-8">



                <div class="row">


                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-primary">Course Fees</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-primary">25,000 LKR</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-success">Paid</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-success">25,000 LKR</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-danger">Due</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-danger">25,000 LKR</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>



                    <div class="col-md-3">
                        <div class="card bg-info">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Today's Invoices</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="truck"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">25,000 LKR</h1>
                                <div class="mb-0">
                                    <span class="badge badge-primary-light"> <i class="mdi mdi-arrow-bottom-right"></i>
                                        -3.65% </span>
                                    <span class="text-muted">Since last week</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Counsellor's Due</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="counsellors-due-chart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">Income</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="chartjs-dashboard-line"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>


    </div>
</main>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Bar chart
        new Chart(document.getElementById("dcounsellors-due-chart"), {
            type: "bar",
            data: {
                labels: ["Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1"],
                datasets: [{
                    label: "Last year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }, {

                    label: "This year",
                    backgroundColor: "#dee2e6",
                    borderColor: "#dee2e6",
                    hoverBackgroundColor: "#dee2e6",
                    hoverBorderColor: "#dee2e6",
                    data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: true,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script>


<script>
    const ctx = document.getElementById('counsellors-due-chart');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Counsellor 1', 'Counsellor 2', 'Counsellor 3', 'Counsellor 4', 'Counsellor 5', 'Counsellor 6','Counsellor 4', 'Counsellor 5', 'Counsellor 6'],
            datasets: [{
                label: '# of Votes',
                data: [12, 25, 3, 5, 2, 3,7,4,9],
                backgroundColor: [
                    'rgba(220, 53, 69, 1)'
                ],
                borderWidth: 1
            },
            {
                label: '# of Votes',
                data: [5, 10, 3, 8, 6,3,6,9, 7],
                backgroundColor: [
                    'rgba(25, 135, 84, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {

            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true
                },
            },
            responsive: true,
            maintainAspectRatio: false,

            //scales: {
            //    y: {
            //        beginAtZero: true
            //    }
            //}
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Doughnut chart
        new Chart(document.getElementById("chartjs-doughnut"), {
            type: "doughnut",
            data: {
                labels: ["Social", "Search Engines", "Direct", "Other"],
                datasets: [{
                    data: [260, 125, 54, 146],
                    backgroundColor: [
                        window.theme.primary,
                        window.theme.success,
                        window.theme.warning,
                        "#dee2e6"
                    ],
                    borderColor: "transparent"
                }]
            },
            options: {
                maintainAspectRatio: false,
                cutoutPercentage: 65,
                legend: {
                    display: false
                }
            }
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Bar chart
        new Chart(document.getElementById("students-of-counsellors-chart"), {
            type: "horizontalBar",
            data: {
                labels: ["Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1", "Counsellor 1"],
                datasets: [{
                    label: "Last year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }, {

                    label: "This year",
                    backgroundColor: "#dee2e6",
                    borderColor: "#dee2e6",
                    hoverBackgroundColor: "#dee2e6",
                    hoverBorderColor: "#dee2e6",
                    data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: false,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Bar chart
        new Chart(document.getElementById("chartjs-bar"), {
            type: "bar",
            data: {
                labels: ["Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1"],
                datasets: [{
                    label: "Last year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }, {

                    label: "This year",
                    backgroundColor: "#dee2e6",
                    borderColor: "#dee2e6",
                    hoverBackgroundColor: "#dee2e6",
                    hoverBorderColor: "#dee2e6",
                    data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: false,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Bar chart
        new Chart(document.getElementById("courses-chart"), {
            type: "bar",
            data: {
                labels: ["Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1", "Course1"],
                datasets: [{
                    label: "Last year",
                    backgroundColor: window.theme.primary,
                    borderColor: window.theme.primary,
                    hoverBackgroundColor: window.theme.primary,
                    hoverBorderColor: window.theme.primary,
                    data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
                    barPercentage: .75,
                    categoryPercentage: .5
                }, {

                    label: "This year",
                    backgroundColor: "#dee2e6",
                    borderColor: "#dee2e6",
                    hoverBackgroundColor: "#dee2e6",
                    hoverBorderColor: "#dee2e6",
                    data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
                    barPercentage: .75,
                    categoryPercentage: .5
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: false
                        },
                        stacked: false,
                        ticks: {
                            stepSize: 20
                        }
                    }],
                    xAxes: [{
                        stacked: false,
                        gridLines: {
                            color: "transparent"
                        }
                    }]
                }
            }
        });
    });
</script>




<script>
    document.addEventListener("DOMContentLoaded", function () {
        var ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");
        var gradientLight = ctx.createLinearGradient(0, 0, 0, 225);
        gradientLight.addColorStop(0, "rgba(215, 227, 244, 1)");
        gradientLight.addColorStop(1, "rgba(215, 227, 244, 0)");
        var gradientDark = ctx.createLinearGradient(0, 0, 0, 225);
        gradientDark.addColorStop(0, "rgba(51, 66, 84, 1)");
        gradientDark.addColorStop(1, "rgba(51, 66, 84, 0)");
        // Line chart
        new Chart(document.getElementById("chartjs-dashboard-line"), {
            type: "line",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "Sales ($)",
                    fill: true,
                    backgroundColor: window.theme.id === "light" ? gradientLight : gradientDark,
                    borderColor: window.theme.primary,
                    data: [
                        2115,
                        1562,
                        1584,
                        1892,
                        1587,
                        1923,
                        2566,
                        2448,
                        2805,
                        3438,
                        2917,
                        3327
                    ]
                }]
            },
            options: {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    intersect: false
                },
                hover: {
                    intersect: true
                },
                plugins: {
                    filler: {
                        propagate: false
                    }
                },
                scales: {
                    xAxes: [{
                        reverse: true,
                        gridLines: {
                            color: "rgba(0,0,0,0.0)"
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            stepSize: 1000
                        },
                        display: true,
                        borderDash: [3, 3],
                        gridLines: {
                            color: "rgba(0,0,0,0.0)",
                            fontColor: "#fff"
                        }
                    }]
                }
            }
        });
    });
</script>

{% endblock %}