{% 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">User 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-12">

                <div class="row">

                    

                    <div class="col-md-3">
                        <div class="card bg-secondary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">B/F</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="pocket"></i>
                                        </div>
                                    </div>
                                </div>
                                <h3 class="mt-1 mb-3 text-white">{{currency}} {{previous_balance|floatformat:2|intcomma}}</h3>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Opening Balance</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">Cash In</h5>
                                    </div>

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="plus-circle"></i>
                                        </div>
                                    </div>
                                </div>
                                <h3 class="mt-1 mb-3 text-white">{{currency}} {{transaction_summary.debit_total|floatformat:2|intcomma}}</h3>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Today</span>
                                </div>
                            </div>
                        </div>

                    </div>

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

                                    <div class="col-auto">
                                        <div class="stat text-primary">
                                            <i class="align-middle" data-feather="minus-circle"></i>
                                        </div>
                                    </div>
                                </div>
                                <h3 class="mt-1 mb-3 text-white">{{currency}} {{transaction_summary.credit_total|floatformat:2|intcomma}}</h3>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Today</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-3">
                        <a href="{% url 'transaction-details' %}" class="text-decoration-none">
                        <div class="card bg-primary">
                            <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="inbox"></i>
                                        </div>
                                    </div>
                                </div>
                                <h3 class="mt-1 mb-3 text-white">{{currency}} {{current_balance|floatformat:2|intcomma}}</h3>
                                <div class="mb-0">
                                    <span class="text-white">Today</span>
                                </div>
                            </div>
                        </div>
                        </a>

                    </div>


                </div>

            </div>




        </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-info">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Medicine</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">{{currency}} {{pdq_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Revenue</span>
                                </div>
                            </div>
                        </div>

                    </div>


                    <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">Medicne</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">{{currency}} {{bank_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Profit</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <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">Therapy</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">{{currency}} {{bank_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Revenue</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-success">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Medical Test</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">{{currency}} {{previous_balance|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Revenue</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <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">Consultation</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">{{currency}} {{transaction_summary.debit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Revenue</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <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">Hospital Charges</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">{{currency}} {{transaction_summary.credit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Revenue</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    

                </div>

                
            </div>


        </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">N Profit</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">{{currency}} {{pdq_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Net profit</span>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="col-md-4">
                        <div class="card bg-dark">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Cash</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">{{currency}} {{bank_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Cash in Hand</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-dark">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">PDQ</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">{{currency}} {{previous_balance|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Card Payments</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-dark">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Bank</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">{{currency}} {{transaction_summary.debit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Bank Balance</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-danger">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Expense</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">{{currency}} {{transaction_summary.credit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Expenses</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-white">Stock</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">{{currency}} {{current_balance|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Stock Value</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    

                </div>

                
            </div>


        </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">G Profit</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">{{currency}} {{pdq_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Gross Profit</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">Sales</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">{{currency}} {{bank_total|floatformat:0}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Sales Value</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-danger">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">S Return</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">{{currency}} {{previous_balance|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Sales Returns</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-secondary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">COGS</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">{{currency}} {{transaction_summary.debit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Cost of Goods Sold</span>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="card bg-danger">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col mt-0">
                                        <h5 class="card-title text-white">Purchase</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">{{currency}} {{transaction_summary.credit_total|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    
                                    <span class="text-white">Purchase Value</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">P Return</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">{{currency}} {{current_balance|floatformat:0|intcomma}}</h1>
                                <div class="mb-0">
                                    <span class="text-white">Purchase Returns</span>
                                </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">PDQ Payments</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    
                                    <th>Invoice</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Status</th>
                                    <th class="text-sm-end">Amount ({{currency}})</th>
                                    
                                    
                                </tr>
                            </thead>
                            <tbody>

                                {% for invoice_payment in pdq_list %}
                                <tr>
                                    
                                    <td>{{invoice_payment.invoice.id}}</td>
                                    <td>{{invoice_payment.invoice.invoice_date}}</td>
                                    <td>{{invoice_payment.invoice.invoice_time}}</td>

                                    {% if invoice_payment.invoice.invoice_status|lower == "paid" %}
                                        <td><span class="badge bg-success">Paid</span></td>
                                        {% elif invoice_payment.invoice.invoice_status|lower == "unpaid" %}
                                        <td><span class="badge bg-warning">Unpaid</span></td>
                                        {% elif invoice_payment.invoice.invoice_status|lower == "cancelled" %}
                                        <td><span class="badge bg-danger">Cancelled</span></td>
                                        {% else %}
                                        <td><span class="badge bg-danger">Error# {{invoice_payment.invoice.invoice_status}}</span></td>
                                        {% endif %}

                                    <td class="text-sm-end">{{currency}} {{invoice_payment.amount|floatformat:2|intcomma}}</td>
                                    

                                </tr>
                                {% endfor %}
                               
                            </tbody>
                        </table>
                    </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">Bank Payments</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    
                                    <th>Invoice</th>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Status</th>
                                    <th class="text-sm-end">Amount ({{currency}})</th>
                                    
                                </tr>
                            </thead>
                            <tbody>

                                {% for invoice_payment in bank_list %}
                                <tr>
                                    
                                    <td>{{invoice_payment.invoice.id}}</td>
                                    <td>{{invoice_payment.invoice.invoice_date}}</td>
                                    <td>{{invoice_payment.invoice.invoice_time}}</td>
                                    {% if invoice_payment.invoice.invoice_status|lower == "paid" %}
                                        <td><span class="badge bg-success">Paid</span></td>
                                        {% elif invoice_payment.invoice.invoice_status|lower == "unpaid" %}
                                        <td><span class="badge bg-warning">Unpaid</span></td>
                                        {% elif invoice_payment.invoice.invoice_status|lower == "cancelled" %}
                                        <td><span class="badge bg-danger">Cancelled</span></td>
                                        {% else %}
                                        <td><span class="badge bg-danger">Error# {{invoice_payment.invoice.invoice_status}}</span></td>
                                        {% endif %}
                                    <td class="text-sm-end">{{currency}} {{invoice_payment.amount|floatformat:2|intcomma}}</td>
                                    
                                </tr>
                                {% endfor %}
                               
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>


        </div>     


    </div>
</main>


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

    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 ctx2 = document.getElementById('counsellors-revenue-performance-chart');

    new Chart(ctx2, {
        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>


{% endblock %}