{% extends 'base.html' %}

{% load static %}
{% load humanize %}



{% 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 - {{logged_user_profile.user.first_name|upper}}
                {{logged_user_profile.middle_name|upper}} ({{logged_user_profile.user.username}}) {{today}}</h1>
        </div>


        <div class="row">

            <div class="col-md-12 col-lg-12 col-xl-6">

                <div class="row">

                    <div class="col-md-4">
                        <div class="card bg-primary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Branch Target</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="percent"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">{{monthly_branch_target_summary.percentage|floatformat:0}} %</h1>
                                <div class="mb-0">
                                    <span class="text-white">Monthly Branch Target %</span>
                                </div>
                            </div>
                        </div>

                    </div>

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

                                    <div class="col-auto">
                                        <div class="stat text-success">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-success">{{installment_due_summary.paid_amounts|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    <span class="text-primary">From Active Students</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-danger">Pending Collection</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-danger">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-danger">{{installment_due_summary.due_amount|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    <span class="text-danger">Due and Over Due</span>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>

                <div class="row">

                    


                    <div class="col-md-4">
                        <div class="card bg-success">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">New Registrations</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="book"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">{{no_of_current_month_new_registrations}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">New Registrations ({{current_date|date:"M"}})</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-primary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Active Students</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="users"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">{{no_of_studying_students}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Studying Students</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-danger">Drop Outs</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-danger">
                                            <i class="align-middle" data-feather="users"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-danger">{{no_of_current_month_dropped_out_students}}</h1>
                                <div class="mb-0">
                                    <span class="text-danger">This Month Drop Outs</span>
                                </div>
                            </div>
                        </div>

                    </div>


                    
                </div>

            </div>

            <div class="col-md-12 col-lg-12 col-xl-6">

                <div class="row">

                    <div class="col-md-4">
                        <div class="card bg-info">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Invoice count</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="file"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">{{daily_invoice_summary.invoice_count}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Total Invoice Count</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <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="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-white">{{daily_invoice_summary.invoice_total|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Total Invoice Value</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    

                    <div class="col-md-4">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Cash Drawer</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="users"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <h1 class="mt-1 mb-3 text-white">{{daily_cash_in_summary.cash_total|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Today's Cash In</span>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="row">

                    <div class="col-md-4">
                        <div class="card bg-warning">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-primary">Branch Target</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-primary">{{monthly_branch_target_summary.target_amount|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    <span class="text-primary">Monthly Branch Target</span>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="col-md-4">
                        <div class="card bg-warning">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-success">Performance</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-success">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h1 class="mt-1 mb-3 text-success">{{monthly_branch_target_summary.achived_amount|floatformat:0|intcomma}} {{currency}}</h1>
                                <div class="mb-0">
                                    <span class="text-success">Monthly Performance</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-warning">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        {% if monthly_branch_target_summary.over_target_flag %}
                                        <h5 class="card-title text-dark">Over Target</h5>
                                        {% else %}
                                        <h5 class="card-title text-danger">Pending</h5>
                                        {% endif %}
                                    </div>

                                    <div class="col-auto">
                                        {% if monthly_branch_target_summary.over_target_flag %}
                                        <div class="stat text-dark">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                        {% else %}
                                        <div class="stat text-danger">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                        {% endif%}
                                    </div>
                                </div>
                                {% if monthly_branch_target_summary.over_target_flag %}
                                <h1 class="mt-1 mb-3 text-dark">{{monthly_branch_target_summary.over_target|floatformat:0|intcomma}} {{currency}}</h1>
                                {% else %}
                                <h1 class="mt-1 mb-3 text-danger">{{monthly_branch_target_summary.pending_amount|floatformat:0|intcomma}} {{currency}}</h1>
                                
                                {% endif %}

                                <div class="mb-0">
                                    {% if monthly_branch_target_summary.over_target_flag %}
                                    <span class="text-dark">Achivement beyond Target</span>
                                    {% else %}
                                    <span class="text-danger">Pending Target</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                
            </div>


        </div>

        <div class="row">

            <div class="col-md-12 col-lg-12 col-xl-6">

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Counsellors' Monthly Performance</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="counsellors-revenue-performance-chart"></canvas>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-12 col-lg-12 col-xl-6">

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Counsellors' Monthly Performance</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="counsellors-reg-count-performance-chart"></canvas>
                        </div>
                    </div>
                </div>
                
            </div>


        </div>

        <div class="row">

            <div class="col-md-12 col-lg-12 col-xl-6">

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Monthly Income and Branch Performance for year {{today.year}}</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="monthly-income-line-chart"></canvas>
                        </div>
                    </div>
                </div>


            </div>

            <div class="col-md-12 col-lg-12 col-xl-6">


                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Monthly Course Performance</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart">
                            <canvas id="course-wise-student-count-chart"></canvas>
                        </div>
                    </div>
                </div>
                
            </div>

        

            



        </div>

        <div class="row">

            <div class="col-md-12 col-lg-6 col-xl-6">

                <div class="row">

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col mt-0">
                                    <h5 class="card-title text-primary">User Accounts</h5>
                                </div>
    
                                <div class="col-auto">
                                    <div class="stat text-primary">
                                        <i class="align-middle" data-feather="users"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-primary">{{no_of_user_profiles}}</h1>
                            <div class="mb-0">
                                
                                <span class="text-primary">Active User Accounts</span>
                            </div>
                        </div>
                    </div>
    
                </div>
    
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col mt-0">
                                    <h5 class="card-title text-primary">Counsellors</h5>
                                </div>
    
                                <div class="col-auto">
                                    <div class="stat text-primary">
                                        <i class="align-middle" data-feather="users"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-primary">{{no_of_counsellors}}</h1>
                            <div class="mb-0">
                                
                                <span class="text-primary">Active Counsellors</span>
                            </div>
                        </div>
                    </div>
    
                </div>
    
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col mt-0">
                                    <h5 class="card-title text-primary">Courses</h5>
                                </div>
    
                                <div class="col-auto">
                                    <div class="stat text-primary">
                                        <i class="align-middle" data-feather="book"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-primary">{{no_of_study_programs}}</h1>
                            <div class="mb-0">
                                <span class="text-primary">No of Study Programs</span>
                            </div>
                        </div>
                    </div>
    
                </div>

                </div>
            </div>

            <div class="col-md-12 col-lg-6 col-xl-6">

                <div class="row">

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col mt-0">
                                    <h5 class="card-title text-primary">Studying</h5>
                                </div>

                                <div class="col-auto">
                                    <div class="stat text-primary">
                                        <i class="align-middle" data-feather="users"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-primary">{{no_of_studying_students}}</h1>
                            <div class="mb-0">
                                <span class="text-primary">Total Graduates</span>
                            </div>
                        </div>
                    </div>

                </div>

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

                                <div class="col-auto">
                                    <div class="stat text-success">
                                        <i class="align-middle" data-feather="users"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-success">{{no_of_graduated_students}}</h1>
                            <div class="mb-0">
                                <span class="text-success">Total Graduates</span>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col mt-0">
                                    <h5 class="card-title text-danger">Drop Outs</h5>
                                </div>

                                <div class="col-auto">
                                    <div class="stat text-danger">
                                        <i class="align-middle" data-feather="users"></i>
                                    </div>
                                </div>
                            </div>
                            <h1 class="mt-1 mb-3 text-danger">{{no_of_dropped_out_students}}</h1>
                            <div class="mb-0">
                                <span class="text-danger">Total Drop Outs</span>
                            </div>
                        </div>
                    </div>

                </div>

                </div>

            </div>



        </div>

        <div class="row">

            <div class="col-md-4">
                <div class="card bg-light border border-primary">
                    <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="pocket"></i>
                                </div>
                            </div>
                        </div>
                        <h1 class="mt-1 mb-3 text-primary">{{program_fee_summary.program_fee|floatformat:0|intcomma}} {{currency}}</h1>
                        <div class="mb-0">
                            <span class="text-primary">Total Course Fee</span>
                        </div>
                    </div>
                </div>

            </div>


            <div class="col-md-4">
                <div class="card bg-light border border-primary">
                    <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-success">
                                    <i class="align-middle" data-feather="pocket"></i>
                                </div>
                            </div>
                        </div>
                        <h1 class="mt-1 mb-3 text-success">{{program_fee_summary.paid_fee|floatformat:0|intcomma}} {{currency}}</h1>
                        <div class="mb-0">
                            <span class="text-success">Total Paid Course Fee</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-4">
                <div class="card bg-light border border-primary">
                    <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-danger">
                                    <i class="align-middle" data-feather="pocket"></i>
                                </div>
                            </div>
                        </div>
                        <h1 class="mt-1 mb-3 text-danger">{{program_fee_summary.due_fees|floatformat:0|intcomma}} {{currency}}</h1>
                        <div class="mb-0">
                            <span class="text-danger">Total Pending Course Fee</span>
                        </div>
                    </div>
                </div>

            </div>

        </div>


    </div>
</main>


<script>
    const ctx = document.getElementById('counsellors-reg-count-performance-chart');
    //previous color 'rgba(25, 135, 84, 1)'
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{counsellor_reg_count_performance_chart_label|safe}},
            datasets: [{
                label: 'Number of Registered Students',
                data: {{counsellor_reg_count_performance_chart_data|safe}},
                backgroundColor: [
                    'rgba(29, 37, 99, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {

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

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

<script>
    const ctx3 = document.getElementById('counsellors-revenue-performance-chart');

    new Chart(ctx3, {
        type: 'bar',
        data: {
            labels: {{counsellor_revenue_performance_chart_label|safe}},
            datasets: [{
                label: 'Revenue',
                data: {{counsellor_revenue_performance_chart_data|safe}},
                backgroundColor: [
                    'rgba(29, 37, 99, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {

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

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




<script>
    const ctx2 = document.getElementById('course-wise-student-count-chart');

    new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: {{course_wise_student_count_chart_label|safe}},
            datasets: [{
                label: 'Number of Studying Students',
                data: {{course_wise_student_count_chart_data|safe}},
                backgroundColor: [
                'rgba(29, 37, 99, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {

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

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

<script>
    const ctx5 = document.getElementById('monthly-income-line-chart');

    new Chart(ctx5, {
        type: 'line',
        data: {
            labels: {{monthly_income_summary_label|safe}},
            datasets: [{
                label: 'Income {{currency}}',
                data: {{monthly_income_summary_data|safe}},
                backgroundColor: [
                    'rgb(75, 192, 192)'
                ],
                borderWidth:2,
                borderColor: 'rgb(75, 192, 192)'
            },
            {
                label: 'Branch Performance {{currency}}',
                data: {{monthly_branch_performance_summary_data|safe}},
                backgroundColor: [
                    'rgba(25, 135, 84, 1)'
                ],
                borderWidth:2,
                borderColor: 'rgba(25, 135, 84, 1)'
            }]
        },
        options: {

            scales: {
                x: {
                    stacked: true
                },
                y: {
                    
                    ticks: {
                        stepSize: 1
                    },
                },
            },
            responsive: true,
            maintainAspectRatio: false,
        }
    });
</script>




{% endblock %}