{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block styles %}
    {% endblock %}
    {% block scripts %}

        <script src="{% static 'sacco/assets/custom_js/custom_sms_center.js' %}"></script>
    {% endblock %}
    <div class="row">
        <div class="col-md-12">
            <h4>Risk and Interest Report</h4>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline row" method="get">
                        <div class="col-6 justify-content-end">
                            <div class="form-group mx-sm-3 mb-2">
                                <label for="datefield" class="sr-only">Date</label>
                                <input type="date" class="form-control" id="datefield" name="date"
                                       value="{{ request.GET.date|default:today }}" placeholder="Date"
                                       required>
                            </div>
                        </div>
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary mb-2">Filter</button>
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-3">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-arrow-circle-up widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Amount Given Out">Amount Given Out</h5>
                            <h3 class="mt-3 mb-3">{{ disbursed|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-arrow-circle-down widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Amount Recovered">Amount Recovered</h5>
                            <h3 class="mt-3 mb-3">{{ recovered|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-plus-circle widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Interest made">Interest made</h5>
                            <h3 class="mt-3 mb-3">{{ interest|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-warning widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Interest made">Amount at Risk</h5>
                            <h3 class="mt-3 mb-3">{{ at_risk|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- end row-->
            <div class="row">
                <div class="col-md-12">
                    <div class="card border border-success">
                        <div class="card-body">
                            <div class="table-responsive">
                                <div class="table-responsive">
                                    <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                                        <thead>
                                        <tr>
                                            <th>SN</th>
                                            <th>Name</th>
                                            <th>Account</th>
                                            <th>Principle</th>
                                            <th>Interest</th>
                                            <th>Principle Balance</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for loan in loans %}
                                            <tr>
                                                <td>{{ forloop.counter }}.</td>
                                                <td>{{ loan.name|default_if_none:'' }}</td>
                                                <td>{{ loan.account|default_if_none:'' }}</td>
                                                <td>{{ loan.principle }}</td>
                                                <td>{{ loan.interest }}</td>
                                                <td>
                                                    <strong>{{ loan.balance }}</strong>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <h4>Loan Revenue Report</h4>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline row" method="get">
                        <div class="col-4 justify-content-end">
                            <div class="form-group mx-sm-3 mb-2">
                                <label for="from_date" class="sr-only">From</label>
                                <input type="date" class="form-control" id="datefield" name="from_date"
                                       value="{{ request.GET.from_date|default:today }}" placeholder="Date"
                                       required>
                            </div>
                        </div>
                        <div class="col-4 justify-content-end">
                            <div class="form-group mx-sm-3 mb-2">
                                <label for="to_date" class="sr-only">To</label>
                                <input type="date" class="form-control" id="datefield" name="to_date"
                                       value="{{ request.GET.to_date|default:today }}" placeholder="Date"
                                       required>
                            </div>
                        </div>
                        <div class="col-4">
                            <button type="submit" class="btn btn-primary mb-2">Filter</button>
                        </div>
                    </form>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-6">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-arrow-circle-up widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Amount Given Out">Amount Given Out</h5>
                            <h3 class="mt-3 mb-3">{{ amount_loaned|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border border-dark">
                        <div class="card-body">
                            <div class="float-end">
                                <i class="fa-solid fa-arrow-circle-down widget-icon bg-dark rounded-circle text-white"></i>
                            </div>
                            <h5 class="text-dark fw-normal mt-0" title="Amount Recovered">Amount Received</h5>
                            <h3 class="mt-3 mb-3">{{ amount_received|intcomma }}</h3>
                            <p class="mb-0">
                                <span class="font-13">{% now "jS F Y H:i" %}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row-->
        </div>

    </div>


{% endblock %}