<!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>
        Add Customers
    </title>
    <!--     Fonts and icons     -->
    {% include 'admin/includes/imports.top.html' %}
    <style>
        #ID::-webkit-outer-spin-button,
        #ID::-webkit-inner-spin-button {
            display: none;
        }

        #ID.loading {
            background: url(http://www.xiconeditor.com/image/icons/loading.gif) no-repeat right center;
        }
    </style>
</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 class="card mb-4">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between">
                                <h5>Add Customer</h5>
                                <button type="button" class="btn btn-primary draw-menu" hidden data-bs-toggle="modal" data-bs-target="#viewCustomer">
                                    Open Add Loan Modal
                                </button>
                            </div>
                            
                        </div>
                        <div class="card-body">
                            <div>
                                <form role="form" id="user-form" method="post" novalidate>
                                    {{form.csrf_token}}
                                    <div>
                                        <h6 class="badge badge-md bg-gradient-info">Customer Details</h6>
                                    </div>
                                    <div class="row">
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="ID">{{form.ID.label}}</label>
                                            {{form.ID(class_="form-control", id="ID", pattern="\d*", maxlength="10",
                                            placeholder="ID Number",
                                            aria_label="ID", aria_describedby="ID-addon")}}
                                            {% for error in form.ID.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="name">{{form.name.label}}</label>
                                            {{form.name(class_="form-control", id="name", placeholder="Customer Name",
                                            aria_label="name", aria_describedby="name-addon")}}
                                            {% for error in form.name.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>

                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="phone">{{form.phone.label}}</label>
                                            {{form.phone(class_="form-control", id="phone", placeholder="Customer Phone Number", 
                                            aria_label="phone", aria_describedby="phone-addon")}}
                                            {% for error in form.phone.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>

                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="gender">{{form.gender.label}}</label>
                                            {{form.gender(class_="form-control", id="gender",
                                            placeholder="Customer Gender", aria_label="gender",
                                            aria_describedby="gender-addon")}}
                                            {% for error in form.gender.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="date_of_birth">{{form.date_of_birth.label}}</label>
                                            {{form.date_of_birth(class_="form-control", id="date_of_birth",
                                            placeholder="Customer's date of birth", aria_label="date_of_birth",
                                            aria_describedby="date_of_birth-addon")}}
                                            {% for error in form.date_of_birth.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="marital_status">{{form.marital_status.label}}</label>
                                            {{form.marital_status(class_="form-control", id="marital_status",
                                            placeholder="Customer's marital status", aria_label="marital_status",
                                            aria_describedby="marital_status-addon")}}
                                            {% for error in form.marital_status.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="residential">{{form.residential.label}}</label>
                                            {{form.residential(class_="form-control", id="residential",
                                            placeholder="Customer residential", aria_label="residential",
                                            aria_describedby="residential-addon")}}
                                            {% for error in form.residential.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="home_residence">{{form.home_residence.label}}</label>
                                            {{form.home_residence(class_="form-control", id="home_residence",
                                            placeholder="Customer home residence", aria_label="home_residence",
                                            aria_describedby="home_residence-addon")}}
                                            {% for error in form.home_residence.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="landmark">{{form.landmark.label}}</label>
                                            {{form.landmark(class_="form-control", id="landmark",
                                            placeholder="Customer landmark", aria_label="landmark",
                                            aria_describedby="landmark-addon")}}
                                            {% for error in form.landmark.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="social_name">{{form.social_name.label}}</label>
                                            {{form.social_name(class_="form-control", id="social_name",
                                            placeholder="Customer social name", aria_label="social_name",
                                            aria_describedby="social_name-addon")}}
                                            {% for error in form.social_name.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="next_of_kin">{{form.next_of_kin.label}}</label>
                                            {{form.next_of_kin(class_="form-control", id="next_of_kin",
                                            placeholder="Next of kin", aria_label="next_of_kin",
                                            aria_describedby="next_of_kin-addon")}}
                                            {% for error in form.next_of_kin.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="n_relationship">{{form.n_relationship.label}}</label>
                                            {{form.n_relationship(class_="form-control", id="n_relationship",
                                            placeholder="Customer relationship", aria_label="n_relationship",
                                            aria_describedby="n_relationship-addon")}}
                                            {% for error in form.n_relationship.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Loan Details</h6>
                                    <div class="row">
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="amount">{{form.amount.label}}</label>
                                            {{form.amount(class_="form-control", id="amount", placeholder="Loan Amount",
                                            aria_label="amount", aria_describedby="amount-addon")}}
                                            {% for error in form.amount.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="loan_type">{{form.loan_type.label}}</label>
                                            {{form.loan_type(class_="form-control", id="loan_type",
                                            placeholder="Loan Type", aria_label="loan_type",
                                            aria_describedby="loan_type-addon")}}
                                            {% for error in form.loan_type.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Customer Business Details(Optional)</h6>
                                    <div class="row">
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="business_name">{{form.business_name.label}}</label>
                                            {{form.business_name(class_="form-control", id="business_name",
                                            placeholder="Business name", aria_label="business_name",
                                            aria_describedby="business_name-addon")}}
                                            {% for error in form.business_name.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="business_type">{{form.business_type.label}}</label>
                                            {{form.business_type(class_="form-control", id="business_type",
                                            placeholder="Business type", aria_label="business_type",
                                            aria_describedby="business_type-addon")}}
                                            {% for error in form.business_type.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="business_year_est">{{form.business_year_est.label}}</label>
                                            {{form.business_year_est(class_="form-control",
                                            id="business_year_est", placeholder="Year established",
                                            aria_label="business_year_est",
                                            aria_describedby="business_year_est-addon")}}
                                            {% for error in form.business_year_est.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="business_location">{{form.business_location.label}}</label>
                                            {{form.business_location(class_="form-control",
                                            id="business_location", placeholder="Business location",
                                            aria_label="business_location",
                                            aria_describedby="business_location-addon")}}
                                            {% for error in form.business_location.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="business_landmark">{{form.business_landmark.label}}</label>
                                            {{form.business_landmark(class_="form-control",
                                            id="business_landmark", placeholder="Business landmark",
                                            aria_label="business_landmark",
                                            aria_describedby="business_landmark-addon")}}
                                            {% for error in form.business_landmark.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label
                                                for="business_average_daily_sales">{{form.business_average_daily_sales.label}}</label>
                                            {{form.business_average_daily_sales(class_="form-control",
                                            id="business_average_daily_sales", placeholder="Average daily sales",
                                            aria_label="business_average_daily_sales",
                                            aria_describedby="business_average_daily_sales-addon")}}
                                            {% for error in form.business_average_daily_sales.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <div class="form-check form-group">
                                                <label
                                                    for="business_has_local_license">{{form.business_has_local_license.label}}</label>
                                                {{form.business_has_local_license(class_="form-check-input",
                                                id="business_has_local_license")}}
                                            </div>
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Referee Details</h6>
                                    <div class="row">
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="referee_name">{{form.referee_name.label}}</label>
                                            {{form.referee_name(class_="form-control",
                                            id="referee_name", placeholder="Referee name",
                                            aria_label="referee_name",
                                            aria_describedby="referee_name-addon")}}
                                            {% for error in form.referee_name.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label
                                                for="referee_relationship">{{form.referee_relationship.label}}</label>
                                            {{form.referee_relationship(class_="form-control",
                                            id="referee_relationship", placeholder="Referee relationship",
                                            aria_label="referee_relationship",
                                            aria_describedby="referee_relationship-addon")}}
                                            {% for error in form.referee_relationship.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="referee_phone">{{form.referee_phone.label}}</label>
                                            {{form.referee_phone(class_="form-control",
                                            id="referee_phone", placeholder="Referee phone",
                                            aria_label="referee_phone",
                                            aria_describedby="referee_phone-addon")}}
                                            {% for error in form.referee_phone.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <h6 class="badge badge-md bg-gradient-info">Guarantor's Details</h6>
                                    <div class="row">
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="guarantor_name">{{form.guarantor_name.label}}</label>
                                            {{form.guarantor_name(class_="form-control",
                                            id="guarantor_name", placeholder="Guarantor's name",
                                            aria_label="guarantor_name",
                                            aria_describedby="guarantor_name-addon")}}
                                            {% for error in form.guarantor_name.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="guarantor_phone">{{form.guarantor_phone.label}}</label>
                                            {{form.guarantor_phone(class_="form-control",
                                            id="guarantor_phone", placeholder="Guarantor's phone",
                                            aria_label="guarantor_phone",
                                            aria_describedby="guarantor_phone-addon")}}
                                            {% for error in form.guarantor_phone.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label
                                                for="guarantor_occupation">{{form.guarantor_occupation.label}}</label>
                                            {{form.guarantor_occupation(class_="form-control",
                                            id="guarantor_occupation", placeholder="Guarantor's occupation",
                                            aria_label="guarantor_occupation",
                                            aria_describedby="guarantor_occupation-addon")}}
                                            {% for error in form.guarantor_occupation.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="guarantor_address">{{form.guarantor_address.label}}</label>
                                            {{form.guarantor_address(class_="form-control",
                                            id="guarantor_address", placeholder="Guarantor's address",
                                            aria_label="guarantor_address",
                                            aria_describedby="guarantor_address-addon")}}
                                            {% for error in form.guarantor_address.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                        <div class="mb-3 col-lg-4 col-12">
                                            <label for="guarantor_date">{{form.guarantor_date.label}}</label>
                                            {{form.guarantor_date(class_="form-control",
                                            id="guarantor_date", placeholder="Guarantor's Date",
                                            aria_label="guarantor_date",
                                            aria_describedby="guarantor_date-addon")}}
                                            {% for error in form.guarantor_date.errors %}
                                            <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <button type="submit" for="user-form" class="btn bg-gradient-primary w-100">Submit
                                        Information</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <button type="button" class="btn btn-primary draw-menu" hidden data-bs-toggle="modal" data-bs-target="#viewCustomer">
                Draw
            </button> -->
            
            <!-- Modal -->
            <div class="modal fade" id="viewCustomer" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="viewCustomerLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl  modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                    <div class="d-flex">
                        <span class="badge me-2 bg-gradient-success p-2">Returning Customer</span>
                        <h6 class="modal-title" id="viewCustomerLabel">New Loan for <span id="lonee_name"></span> </h6>
                    </div>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        <div class="col-lg-5 col-12">
                            <h6 class="badge badge-md bg-gradient-info">Previous Loan Details</h6>
                            <div class="loans-list">
                            
                            </div>
                        </div>
                        <div class="col-lg-7 col-12">
                            <h6 class="badge badge-md bg-gradient-info">New Loan Details</h6>
                            <form id="loan-form2" method="post" action="{{url_for('add_new_loan')}}">
                                <div class="visually-hidden" id="all-dets">
                                    <input name="ID_number" id="Id_number2">
                                    <input name="name2" id="name2">
                                </div>
                            <div class="row">
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="amount2">Loan Amount</label>
                                    <input class="form-control" name="amount2" id="amount2" required placeholder="New Loan Amount"
                                    aria_label="amount" aria_describedby="amount-addon">
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="loan_type2">Loan Type</label>
                                    <select aria-describedby="loan_type2-addon" name="loan_type2" aria-label="loan_type2" class="form-control" id="loan_type2" name="loan_type" placeholder="Loan Type" required="">
                                        <option value="Small Business Loan">Small Business Loan</option>
                                        <option value="Salary Advance Loan">Salary Advance Loan</option>
                                        <option value="Emergency Loan">Emergency Loan</option>
                                        <option value="Group Loan">Group Loan</option>
                                        <option value="Individual Loan">Individual Loan</option>
                                        <option value="School Fees Loan">School Fees Loan</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="guarantor_name2">New Guarantor's Name</label>
                                    <input class="form-control"
                                    id="guarantor_name2" placeholder="Guarantor's name"
                                    aria_label="guarantor_name2"
                                    name="guarantor_name2"
                                    aria_describedby="guarantor_name2-addon">
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="guarantor_phone2">New Guarantor's Phone</label>
                                    <input class="form-control"
                                    id="guarantor_phone2" placeholder="Guarantor's phone"
                                    aria_label="guarantor_phone2"
                                    name="guarantor_phone2"
                                    aria_describedby="guarantor_phone2-addon">
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label
                                        for="guarantor_occupation2">New Guarantor's Occupation</label>
                                    <input class="form-control"
                                    id="guarantor_occupation2" placeholder="Guarantor's occupation"
                                    aria_label="guarantor_occupation2"
                                    name="guarantor_occupation2"
                                    aria_describedby="guarantor_occupation2-addon">
                                </div>
                                <div class="mb-3 col-lg-6 col-12">
                                    <label for="guarantor_address2">New Guarantor's Address</label>
                                    <input class="form-control"
                                    id="guarantor_address2" placeholder="Guarantor's address"
                                    aria_label="guarantor_address2"
                                    name="guarantor_address2"
                                    aria_describedby="guarantor_address2-addon">
                                </div>
                            </div>
                            </form>
                        </div>
                        </div>
                    <form>
                    </form>
                    </div>
                    <div class="modal-footer">
                    
                    <button type="submit" form="loan-form2" class="btn btn-sm btn-primary">Submit</button>
                    </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);
        }
        $('#ID').on('input', function (event) {
            var Input = $(this);
            Input.addClass('loading');
            var ID = Input.val()
            $('#lonee_name').html('');
            $('#Id_number2').val(null);
            $('#name2').val(null);
            $('.loans-list').html('');
            if (ID.length == 8) {
                $.ajax({
                    url: "{{url_for('verify_ID')}}",
                    type: 'POST',
                    data: { ID: ID },
                    success: function (data) {
                        //console.log(ID, data);
                        if (data.success) {
                            $("#user-form :input").prop("disabled", true);
                            $("#ID").prop("disabled", false);
                            $(".draw-menu").prop("hidden", false);
                            
                            Input.removeClass('loading');
                            $('#lonee_name').html(data.user.name);
                            $('#Id_number2').val(data.user.ID_number);
                            $('#name2').val(data.user.name);
                            for (loan of data.loans){
                                badges = '';
                                if (loan.approved){
                                    badges+='<span style="font-size: 10px !important;" class="badge badge-sm me-1 bg-gradient-success">Approved</span>'
                                }
                                else {
                                    badges+='<span style="font-size: 10px !important;" class="badge badge-sm me-1 bg-gradient-danger">Not Approved</span>'
                                } 
                                if (loan.disbursed){
                                    badges+='<span style="font-size: 10px !important;" class="badge badge-sm me-1 bg-gradient-info">Disbursed</span>'
                                } 
                                if (loan.fully_paid){
                                    badges+='<span style="font-size: 10px !important;" class="badge badge-sm me-1 bg-gradient-warning">Fully Repaid</span>'
                                }
                                html = `<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 || 0).toLocaleString() +`</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 || 0).toLocaleString() +`</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>
                                        `+badges+`
                                    </div>
                                </div>`
                                $('.loans-list').append(html);
                            }
                            $('.draw-menu').click()
                        }
                        else {
                            $("#user-form :input").prop("disabled", false);
                            $(".draw-menu").prop("hidden", true);
                            Input.removeClass('loading');
                        }

                    }
                })
            }
        })
    </script>
</body>

</html>