<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        Payments
    </title>
    <!--     Fonts and icons     -->
    {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
    {% include 'admin/includes/part.menu.html' %}
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
        <!-- Navbar -->
        {% include 'admin/includes/part.header.html' %}
        <!-- End Navbar -->
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div>
                        <button class="btn btn-sm bg-gradient-dark" onclick="history.back()">Go Back</button>
                    </div>
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6>Customer Report</h6>
                        </div>
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-lg-7 col-12">
                                    <h6 class="badge badge-md bg-gradient-info">Customer Details</h6>
                                    <div class="row mb-2">
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Customer ID Number</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.ID_number}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Customer Name</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.name}}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Customer Phone</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.phone}}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Gender</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.gender}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Date of Birth</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.date_of_birth}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Marital Status</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.marital_status}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Residential Status</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.residential}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Home Residence</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.home_residence}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Landmark</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.landmark}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Social Name</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.social_name}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Next of Kin</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.next_of_kin}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Relationship with next of
                                                        kin</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.n_relationship}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Customer Business Details</h6>
                                    <div class="row mb-2">
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Business Name</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_name}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Business Type</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_type}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Business Year of
                                                        Establishment</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_year_est}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Business Location</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_location}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Business Landmark</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_landmark}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Average Daily Sales</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.business_average_daily_sales}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Does the business have a
                                                        license</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {% if user.business_has_local_license %}
                                                        Yes
                                                        {% else %}
                                                        No
                                                        {% endif %}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Referee Details</h6>
                                    <div class="row mb-2">
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Referee's Name</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.referee_name}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Relationship</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.referee_relationship}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Phone</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{user.referee_phone}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Guantor Details</h6>
                                    <div class="row mb-2">
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Guarantor's Name</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{loan.guarantor_name}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Guarantor's Phone</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{loan.guarantor_phone}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Occupation</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{loan.guarantor_occupation}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Address</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{loan.guarantor_address}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <p class="text-sm font-weight-bold mb-0">Guarantor Signed on</p>
                                                </div>
                                                <div>
                                                    <p
                                                        class="text-uppercase text-sm font-weight-bold text-secondary mb-0">
                                                        {{loan.guarantor_date}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-12">
                                    <h6 class="badge badge-md bg-gradient-success">Customer Loans</h6>
                                    {%for loan in user.loans%}
                                    <div class="border border-2 mb-2 rounded p-2">

                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-sm font-weight-bold mb-0">Loan Amount</p>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bold text-success mb-0">Kshs {{
                                                    loan.amount or 0 }}</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-sm font-weight-bold mb-0">Paid Amount</p>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bold text-info mb-0">Kshs {{
                                                    loan.paid_amount or 0 }}</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-sm font-weight-bold mb-0">Loan Type</p>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bold text-info mb-0">{{ loan.loan_type }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-sm font-weight-bold mb-0">Loan Date</p>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bold text-info mb-0">{{ loan.date_uploaded
                                                    }}</p>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                {% if loan.approved %}
                                                <span style="font-size: 10px !important;"
                                                    class="badge badge-sm bg-gradient-success">Approved</span>
                                                {% else %}
                                                <span style="font-size: 10px !important;"
                                                    class="badge badge-sm bg-gradient-danger">Not
                                                    Approved</span>
                                                {% endif %}
                                                {% if loan.disbursed %}
                                                <span style="font-size: 10px !important;"
                                                    class="badge badge-sm bg-gradient-info">Disbursed</span>
                                                {% endif %}
                                                {% if loan.fully_paid%}
                                                <span style="font-size: 10px !important;"
                                                    class="badge badge-sm bg-gradient-warning">Fully
                                                    Repaid</span>
                                                {% endif %}
                                            </div>
                                            <div>
                                                <a style="font-size: 10px !important;" class="badge badge-sm bg-info"
                                                    href="{{url_for('view_customer', ID_number=user.ID_number,loan_id=loan.id)}}">View
                                                    Payment</a>
                                            </div>
                                        </div>


                                    </div>

                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {% include 'admin/includes/part.footer.html' %}
        </div>
    </main>
    <!--   Core JS Files   -->
    {% include 'admin/includes/imports.bottom.html' %}
    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>
</body>

</html>