{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
{% block styles %}
     {% load humanize %}
{% endblock %}
{% block scripts %}
{% endblock %}
            <div class="row">
                    <!-- Start col -->
    <div class="col-lg-4">
                        <div class="card m-b-30">

                            <div class="card-body">
{#                         <div class="card-header"> <a href="{% url 'loan_applications' %}" class="btn btn-primary pull-right mr-3"><i class="feather icon-plus mr-2"></i>View Applications</a></div>#}


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

                                    <div class="row">



                                                     <div class="form-group col-md-12">
                                        <label for="loan_type">Loan Type</label>
                                         <select class="select2 form-control  border border-primary" onchange="getvalues(this.value)" name="loan_type" id="loan_type" required>
                                             <option value="" selected disabled >Select Account</option>
                                               {% for item in loantypes %}
                                             <option value="{{ item.id }}">{{ item.name }}</option>
                                             {% endfor %}

                                         </select>
                                                     </div>




                                    <div class="form-group col-md-12">
                                        <label for="amount">Amount </label>
                                        <input type="text"  class="form-control" id="amount" data-type="currency" name="amount" placeholder="Enter amount" required>

                                    </div>

                                   <div class="form-group col-md-12">
                                        <label for="adate">Start Date</label>
                                        <input type="date" class="form-control" id="adate"  name="adate" placeholder="Enter date" required>

                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="interest">Interest Rate</label>
                                        <input type="number" class="form-control" disabled  id="interest"  name="interest" placeholder="Enter interest rate" required>

                                    </div>

                                    <input type="hidden" readonly id="typeinterval" name="typeinterval">

                                          <div class="form-group col-md-12">
                                        <label for="duration"> Duration  <span id="dura">  </span></label>
                                                <div class="input-group">
                                        <input type="number" class="form-control" id="duration"  name="duration" placeholder="Enter Duration" required>
  <div class="input-group-append">
                                        <span class="input-group-text" id="perio">Duration</span>
                                    </div>
                                        </div>
                                    </div>


                                     <div class="form-group col-md-12">
                                        <label for="rate_type">Rate type</label>
                                         <select class="form-control" id="rate_type" name="rate_type" required>
                                             <option value="" selected disabled >Select Rate type</option>
                                             <option value=1>Flat rate</option>
                                             <option value=2>Reducing balance</option>

                                         </select>

                                    </div>




                                        </div>



                                <script>
                                    function getvalues(val) {

                                        var xhttp = new XMLHttpRequest();
                                        xhttp.onreadystatechange = function () {

                                            if (this.readyState == 4 && this.status == 200) {

                                                var response = this.responseText.split("|");
                                                var response = this.responseText.split("|");
                                                var response = this.responseText.split("|");

                                                var value1 = response[0];
                                                var value2 = response[1];
                                                var value3 = response[2];

                                                document.getElementById('interest').value=value1
                                                document.getElementById('dura').innerHTML='(' +value2+')'
                                                document.getElementById('interest').disabled=false
                                                document.getElementById('duration').placeholder='Enter duration in ' +value2
                                                document.getElementById('perio').innerHTML=value2
                                                document.getElementById('typeinterval').value=value3


                                            }
                                        }
                                xhttp.open("GET", "/loans/getdetails/" + val,true);
                                xhttp.send();
                                    }
                                </script>




                                        <div class="modal-footer">
                                           <button type="reset" class="btn btn-warning">Clear</button>
                                           <button type="submit" class="btn btn-primary">Submit</button>
                                        </div>




                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- End col -->
 <div class="col-lg-8">
                        <div class="card m-b-30">

                            <div class="card-body">



                              RESULT
                                  <div class="tab-content" id="defaultTabContentLine">
                                    <div class="tab-pane fade show active" id="home-line" role="tabpanel" aria-labelledby="home-tab-line">

                                            <table  class="table table-striped table-bordered">
                                         <thead>
                                         <th>SN {{ rate_type }}</th>
                                         <th>SCHEDUE DATE</th>
                                         <th>INSTALLMENT</th>
                                         <th>PRINCIPAL</th>
                                         <th>INTEREST</th>
                                         <th>BALANCE</th>

                                         </thead>
                                          <tbody>

                                          {% if rate_type == '1' %}
                                              {% for p_date in days %}

                                     <tr>
                                     <td>{{ forloop.counter }}</td>
                                     <td>{{ p_date.0 }}</td>
                                     <td>{{ payable|intcomma }}</td>
                                     <td>{{ schedules|intcomma }}</td>
                                     <td>{{ interestperschedue|intcomma }}</td>

                                     <td>{{ p_date.4 |intcomma }}</td>
                                         <td>
                                     </tr>


{% endfor %}

                                              {% endif %}

                                          {% if rate_type == '2' %}
{% for dat in data %}

                                     <tr>
                                     <td>{{ forloop.counter }}</td>
                                     <td>{{ dat.1 }}</td>
                                     <td>{{ payable|intcomma }}</td>
                                     <td>{{ dat.0|intcomma }}</td>
                                     <td>{{ dat.3|intcomma }}</td>

                                     <td>{{ dat.2|intcomma }}</td>

                                     </tr>
                            {% endfor %}

                            {% endif %}


                                          </tbody>
                                            </table>




                                    </div>



                                </div>


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