{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            function checkDuplicate(val) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        var response = this.responseText;
                        if (response == 1) {
                            document.getElementById("duplicate").style.display = 'block';
                            document.getElementById("duplicate").style.color = 'red';
                            document.getElementById("duplicate").innerHTML = 'Loan type already exists';
                            document.getElementById("savebtn").disabled = true;
                        } else {
                            document.getElementById("duplicate").style.display = 'none';
                            document.getElementById("duplicate").innerHTML = response;
                            document.getElementById("savebtn").disabled = false;
                        }
                    }
                };
                xhttp.open("GET", "check-loantype?type=" + val, true);
                xhttp.send();
            }

            function setPeriod(option) {
                if (option.length > 0){
                    document.getElementById("maximum_period").classList.remove("d-none")
                    if (option==1){
                        document.getElementById("period-addon").innerHTML="Weeks(s)"
                    } else if (option==3){
                        document.getElementById("period-addon").innerHTML="Month(s)"
                    }else if (option==4){
                        document.getElementById("period-addon").innerHTML="Year(s)"
                    } else if (option==0){
                        document.getElementById("period-addon").innerHTML="Day(s)"
                    }else {
                        document.getElementById("period-addon").innerHTML=""
                        document.getElementById("maximum_period").classList.add("d-none")
                    }
                }else {
                    document.getElementById("maximum_period").classList.add("d-none")
                }
            }
        </script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="button-list d-flex justify-content-end">
                        <button class="btn btn-primary btn-sm pull-right" data-bs-toggle="modal"
                                data-bs-target=".bd-example-modal-lg"><i class="feather icon-plus mr-2"></i>Add Loan
                            Products
                        </button>
                        <a href="{% url 'applications_pdf' %}" class="btn btn-secondary pull-right btn-sm"><i
                                class='fa fa-file-pdf-o'></i> PDF</a>
                        <a href="{% url 'applications_excel' %}" class="btn btn-dark pull-right btn-sm"><i
                                class='fa fa-file-excel-o'></i> EXCEL</a>
                        <a href="" class="btn btn-success pull-right btn-sm"><i class='fa fa-print'></i> PRINT</a>
                    </div>
                </div>
                {# ========================ADD LOAN TYPE MODAL ================================#}
                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleLargeModalLabel">Add New Loan Product</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                </button>
                            </div>
                            <div class="modal-body">
                                <form method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="mb-2 col-md-6">
                                            <input type="text" class="form-control" id="name"
                                                   onkeyup="checkDuplicate(this.value)" name="name"
                                                   placeholder="Enter Product name" required>
                                            <span id="duplicate"></span>
                                            <span class="text-primary small">Enter the product name eg. Business Loan.</span>
                                            <input type="hidden" name="form_type" value="1" required>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <input type="number" class="form-control"
                                                       id="maxamount" name="maxamount" value="0" required>
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">%</div>
                                                </div>
                                            </div>
                                            <span class="text-primary small">Percentage of applicant savings that doesn't require appraisal.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control" max='100'
                                                   id="interest" name="interest" step="any"
                                                   placeholder="Enter loan interest"
                                                   required>
                                            <span class="text-primary small">Enter the interest rate this product. It must be in percentage.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <select class="form-control" name="formula"
                                                    id="formula" required>
                                                <option value="" disabled selected>Select Option</option>
                                                <option value="1">Per annum</option>
                                                <option value="2">Per month</option>
                                                <option value="3">Per week</option>
                                                <option value="4">Per Day</option>
                                            </select>
                                            <span class="text-primary small">Select when Interest rate is Applied.</span>
                                        </div>

                                        <!-- <div class="mb-2 d-none" id="maximum_period">
                                            <div class="input-group flex-nowrap">
                                                <input type="number" class="form-control" name="maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period"
                                                       aria-label="maximum_period" aria-describedby="period-addon">
                                                <span class="input-group-text" id="period-addon">Month(s)</span>
                                            </div>
                                            <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                        </div> -->

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control" id="excused"
                                                   name="excused" placeholder="Grace period in days" required>
                                            <span class="text-primary small">Days beyond a due date before penalty or cancellation.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control"
                                                   id="warningDays" name="warningd" placeholder="Enter warning days"
                                                   required>
                                            <span class="text-primary small">Days applicant should start receiving reminders before due date.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="text" class="form-control"
                                                   id="maximum_securities" name="maximum_securities" value="3" required>
                                            <span class="text-primary small">Limit Number of Securities for a loan.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control"
                                                   id="security_ratio" name="security_ratio" value="150" required>
                                            <span class="text-primary small">Percentage of Total Security value to the loan.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <select class="form-control" name="interval"
                                                    id="interval" onchange="setPeriod(this.value)" required>
                                                <option value="" selected disabled>Select Interval</option>
                                                <option value="0">Daily</option>
                                                <option value="1">Weekly</option>
                                                <!-- <option value="2">BI-Weekly</option> -->
                                                <option value="3">Monthly</option>
                                                <option value="4">Yearly</option>
                                            </select>
                                            <span class="text-primary small">Period used to calculate penalty on outstanding installments.(Determine schedule dates)</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <select class="form-control" name="subSchedule"
                                                    id="sub-schedule" readonly>
                                                <option value="0" selected>False</option>
                                                <option value="1">True</option>
                                            </select>
                                            <span class="text-primary small">Allow plotting sub schedule.</span>
                                        </div>

                                        <div class="mb-2 d-none" id="maximum_period">
                                            <div class="input-group flex-nowrap">
                                                <input type="number" class="form-control" name="maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period"
                                                       aria-label="maximum_period" aria-describedby="period-addon">
                                                <span class="input-group-text" id="period-addon">Month(s)</span>
                                            </div>
                                            <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" id="savebtn" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {#=================================LOAN SETTINGS MODAL=========================================#}

                {# =======END ADD LOAN TYPE MODAL========================#}
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="default-datatable" class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Loan Type</th>
                                <th>Installment Intervals</th>
                                <th>Interest rate (%)</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for types in loantypes %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td><a href="{% url 'loan_type_detail' types.id %}">{{ types.name }}</a></td>
                                    <td>{{ types.get_interval_display }}</td>
                                    <td>{{ types.interest_rate }}% {{ types.get_formula_display }}</td>
                                    <td>
                                        <button data-bs-toggle="modal" data-bs-target=".editloantype{{ types.id }}"
                                                class="btn btn-info btn-sm"><i class="fa fa-edit"></i> Edit
                                        </button>
                                        <button data-bs-toggle="modal" data-bs-target=".editloantype{{ types.id }}"
                                                class="btn btn-success btn-sm"><i class="fa fa-eye"></i> View
                                        </button>
                                        <button data-bs-toggle="modal" data-bs-target=".deletetype{{ types.id }}"
                                                class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Delete
                                        </button>

                                    </td>
                                </tr>

                                {# ================EDIT LOAN TYPE MODAL========= #}
                                <div class="modal editloantype{{ types.id }}" tabindex="-1" role="dialog"
                                     aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleLargeModalLabel">Edit loan
                                                    Product</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close">
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form method="post" enctype="multipart/form-data">
                                                    {% csrf_token %}
                                                    <div class="row">
                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="name">Name</label>
                                                            <input type="text" class="form-control" id="name"
                                                                   onkeyup="checkDuplicate(this.value)"
                                                                   value="{{ types.name }}" name="name"
                                                                   placeholder="Enter loan type name" required>
                                                            <input type="hidden" id="typeid" value="{{ types.id }}"
                                                                   name="typeid" required>
                                                            <input type="hidden" name="form_type" value="2" required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="maxamount">Loan percentage to
                                                                savings </label>
                                                            <input type="number" class="form-control" max="100"
                                                                   id="maxamount"
                                                                   value={{ types.max_loan }}  name="maxamount"
                                                                   placeholder="Enter Maximum loan amount" required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="interest">Interest
                                                                Rate</label>
                                                            <input type="text" class="form-control" id="interest"
                                                                   value="{{ types.interest_rate }}" name="interest"
                                                                   placeholder="Enter loan interest" required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="formula">Loan interest
                                                                per..?</label>
                                                            <select class="form-control" name="formula" id="formula"
                                                                    required>
                                                                <option {% if types.formula == 1 %}
                                                                    selected {% endif %}value="1">Per annum
                                                                </option>
                                                                <option {% if types.formula == 2 %}
                                                                    selected {% endif %}value="2">Per month
                                                                </option>
                                                                <option {% if types.formula == 3 %}
                                                                    selected {% endif %}value="3">Per week
                                                                </option>
                                                                <option {% if types.formula == 4 %}
                                                                    selected {% endif %}value="4">Per Day
                                                                </option>
                                                            </select>
                                                        </div>

                                                    

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="excused">Excuse Days</label>
                                                            <input type="text"
                                                                   class="form-control"
                                                                   id="excused" value="{{ types.excuse_d }}"
                                                                   name="excused" placeholder="Enter Excuse days"
                                                                   required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="warningd">Warning
                                                                Days</label>
                                                            <input type="text"
                                                                   class="form-control"
                                                                   id="warningd" value="{{ types.warning_d }}"
                                                                   name="warningd" placeholder="Enter warning days"
                                                                   required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="maximum_securities">Maximum
                                                                securities</label>
                                                            <input type="text"
                                                                   class="form-control"
                                                                   id="maximum_securities"
                                                                   value="{{ types.maximum_securities }}"
                                                                   name="maximum_securities"
                                                                   placeholder="Enter maximum securities" required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="security_ratio">Security
                                                                ratio</label>
                                                            <input type="text"
                                                                   class="form-control"
                                                                   id="security_ratio"
                                                                   value="{{ types.security_ratio }}"
                                                                   name="security_ratio"
                                                                   placeholder="Enter security ratio" required>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="interval">Payment
                                                                Interval</label>
                                                            <select class="form-control"
                                                                    name="interval" id="interval" required>

                                                                <option {% if types.interval == 0 %}selected {% endif %}
                                                                        value="0">Daily
                                                                </option>
                                                                <option {% if types.interval == 1 %}selected {% endif %}
                                                                        value="1">Weekly
                                                                </option>
                                                                <!-- <option {% if types.interval == 2 %}selected {% endif %}
                                                                        value="2">bi-weekly
                                                                </option> -->
                                                                <option {% if types.interval == 3 %}selected {% endif %}
                                                                        value="3">Monthly
                                                                </option>
                                                                <option {% if types.interval == 4 %}selected {% endif %}
                                                                        value="4">Yearly
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div class="mb-2 col-md-6">
                                                            <label class="form-label" for="sub-schedule">Allow plotting
                                                                sub schedule</label>
                                                            <select class="form-control" name="subSchedule"
                                                                    id="sub-schedule" required>
                                                                <option {% if types.sub_intervals == 0 %}selected {% endif %}
                                                                        value="0">False
                                                                </option>
                                                                <option {% if types.sub_intervals == 1 %}selected {% endif %}
                                                                        value="1">True
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div class="mb-2">
                                                            <label class="form-label" for="max_period">Maximum Period</label>
                                                                <input type="number" id="max_period" class="form-control" value="{{ types.maximum_period }}" name="maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period">
                                                            <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                                        </div>
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-warning"
                                                                data-bs-dismiss="modal">Close
                                                        </button>
                                                        <button type="submit" class="btn btn-primary">Submit</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal deletetype{{ types.id }}" tabindex="-1" role="dialog"
                                     aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleLargeModalLabel">Delete security</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close">
                                                </button>
                                            </div>
                                            <div class="modal-body">

                                                <form method="post" enctype="multipart/form-data">
                                                    {% csrf_token %}

                                                    <div class="row">


                                                        <input type="hidden" name="typeid" value="{{ types.id }}"
                                                               required>
                                                        <input type="hidden" name="form_type" value="3" required>


                                                        <div class="mb-2 col-md-12">

                                                            <div style="text-align: center;">
                                                                <i class="fa fa-warning fa-5x" style="color: red"></i>
                                                                <h4 style="color: red"><b>Are you sure you want to
                                                                    delete Loan type <strong>{{ types.name }}</strong>
                                                                    loans?</b></h4>

                                                                <h5 style="color: Blue">Loan records attached to
                                                                    <strong>{{ types.name }}</strong> will not be
                                                                    deleted, but you will not be able to use
                                                                    <strong>{{ types.name }}</strong> again</h5>
                                                            </div>

                                                        </div>


                                                    </div>


                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">No
                                                        </button>
                                                        <button type="submit" class="btn btn-primary">Yes Delete
                                                        </button>
                                                    </div>

                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}