<!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>Edit Customer request</h5>
                            </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 visually-hidden">
                                            <label for="ID">{{form.ID.label}}</label>
                                            {{form.ID(class_="form-control", readonly='true', 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>
  
            {% 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>