{% extends 'transactions/extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_transaction_charges.js' %}"></script>
        <script>
            function thousandSepratorAllowDot(m) {
                if (m !== "" || m !== undefined || m !== 0 || m !== "0" || m !== null) {
                    let intergerSide
                    if(m.toString().includes('.')){
                        let theAmount = m.toString().split(".")
                        intergerSide = theAmount[0].replace(/[^\d.]+/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        intergerSide = intergerSide +'.'+ theAmount[1]
                    }else{
                        intergerSide = m.toString().replace(/[^\d.]+/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    }
                  return intergerSide
                } else {
                  return m;
                }
            }
            function checkloan() {
                //reset
                document.querySelector('#alertErrorCheckingLoan').style.display = 'none'
                document.querySelector('#alertArrearsData').style.display = 'none'
                // show spinner
                document.querySelector('#spinnerCheckingLoan').style.display ='flex'
                //get the current loan selected
                let selectedLoan = document.querySelector('#selectedLoan').value
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {

                    if (this.readyState == 4 && this.status == 200) {
                        {#console.log('ACCEPT IS RUNNING')#}
                        document.querySelector('#spinnerCheckingLoan').style.display ='none'
                        // console.log(this.responseText)

                        let response = this.responseText.split("|");
                        {#console.log('response', response)#}



                        if (response[0] === 'ok'){
                            // display the data
                            document.querySelector('#alertArrearsData').style.display = 'block'
                            let arreasDataDict = JSON.parse(response[2])
                            let nextScheduleData = JSON.parse(response[1])
                            // Arrears data filling
                            document.querySelector('#amtInArears').innerHTML = thousandSepratorAllowDot(arreasDataDict.amount_due)
                            document.querySelector('#totalDaysOverDue').innerHTML = arreasDataDict.total_days_overdue

                            document.querySelector('#principalNext').innerHTML = thousandSepratorAllowDot(nextScheduleData.principal_per_schedule)
                            document.querySelector('#interestNext').innerHTML = thousandSepratorAllowDot(nextScheduleData.interestperschedue)
                            document.querySelector('#totalPaidNext').innerHTML = thousandSepratorAllowDot(nextScheduleData.total_paid)
                            document.querySelector('#ScheduleBalanceNext').innerHTML = thousandSepratorAllowDot(nextScheduleData.schedule_balance)

                            // make submit button active
                            document.querySelector('#submitLoanRepayment').disabled = false
                        }else{
                            document.querySelector('#alertErrorCheckingLoan').style.display = ' block'
                            document.querySelector('#errorCheckingLoan').innerHTML = response[1]
                        }


                    }
                }
                xhttp.open("GET", "/loans/check-loan-aging-status/" + selectedLoan, true);
                xhttp.send();
            }
        </script>
    {% endblock %}
    <!-- start page title -->
    <div class="row p-0">
        <div class="col-md-12">
            <div class="card mt-2">
                <div class="card-header text-uppercase">
                    <div class="row align-content-between">
                        <div class="col-md-5">
                            <h4>Make Loan Transaction</h4>
                        </div>
                        <div class="col-md-7">
                            <!-- Any action Here --->
{#                            <div class="page-title-right d-flex justify-content-end">#}
{#                                <button class="btn btn-primary btn-block"><i class="fa fa-file"></i> Transactions Report#}
{#                                </button>#}
{#                            </div>#}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Make Loan Transaction</h4>
                    <form method="POST">
                        {% csrf_token %}

                        <div class="row mb-3">
                            <div class="form-group row col-sm-6">
                                <div class="col-12">
                                    <label id="dr_lebel">Running loan</label>
                                    <div class="input-group mt-1">
                                        <select class="form-control select2" data-toggle="select2" name="loanid" id="selectedLoan" onchange="checkloan()" required>
                                            <option value="" disabled selected>Select Loan</option>
                                            {% for loan in all_loans %}
                                                <option value="{{ loan.id }}">{{ loan.loan_number }} ({{ loan.applicant.biodata.name }})</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="mt-2" style="display: none;min-height: 10px;align-items: center" id="spinnerCheckingLoan">
                                        <div class="spinner-border spinner-border-sm" role="status">
                                          <span class="sr-only">Loading...</span>
                                        </div>
                                        <div class="ms-1">
                                            <span>Checking loan details</span>
                                        </div>
                                    </div>

                                     <div class="alert alert-danger" role="alert" style="display: none" id="alertErrorCheckingLoan">
                                      <span id="errorCheckingLoan"></span>
                                    </div>
                                    <div class="alert alert-primary mt-1" role="alert" style="display: None" id="alertArrearsData">
                                      <div>
                                          <span>
                                              <span style="font-weight: bold">Arrears: </span>
                                              <span id="amtInArears">222</span>
                                              <span class="ms-2" style="font-weight: bold">Days: </span>
                                              <span id="totalDaysOverDue"></span><span> Days</span>
                                          </span>
                                      </div>
                                      <div>
                                          <span>
                                              <span style="font-weight: bold">Next payment</span><br>
                                              <span style="font-weight: bold">Total paid:</span>
                                              <span id="totalPaidNext"></span>
                                              <span style="font-weight: bold">Schedule balance:</span>
                                              <span id="ScheduleBalanceNext"></span>
                                              <span style="font-weight: bold">Principal:</span>
                                              <span id="principalNext"></span>
                                              <span class="ms-2" style="font-weight: bold">Interest: </span>
                                              <span id="interestNext"></span>
                                          </span>
                                      </div>
                                    </div>
                                </div>

                            </div>
                            <div class="form-group row col-sm-6">
                                <div class="col-12">
                                        <label id="cr_lebel">Received through (or Dr account)</label>
                                        <div class="input-group mt-1">
                                            <select class="form-control select2" data-toggle="select2" name="debited" id="gl_cr" required>
                                                <option value="" selected disabled>
                                                    Select Account
                                                </option>
                                                <option value="m">Member Acct</option>
                                                {% for acct in bankaccounts %}
                                                    <option value={{ acct.id }}> {{ acct.name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                </div>

                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="form-group col-sm-6">
                                <label>Principal amount</label>
                                <input type="text" class="form-control" data-type="currency" name="principalbalance" placeholder="Principal Amount" id="principalbalance" oninput="updateTotalPaid()" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label>Interest amount</label>
                                <input type="text" class="form-control" data-type="currency" name="interestamount" placeholder="Interest amount" id="interestamount" oninput="updateTotalPaid()" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="form-group col-sm-6">
                                <label>Fine Amount</label>
                                <input type="text" class="form-control" data-type="currency" name="fineamount" placeholder="Fine amount" id="fineamount" oninput="updateTotalPaid()" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label>Total amount paid</label>
                                <input type="text" class="form-control" data-type="currency" name="amount" placeholder="Transaction Amount" id="totalToBePaid" readonly>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="form-group col-sm-6">
                                <label>Transaction Date</label>
                                <input type="date" name="d_date" class="form-control" placeholder="Enter Transaction Date" id="txdate" required>
                            </div>
                            <div class="form-group col-sm-6">
                                <label>Reference Number</label>
                                <input type="text" name="reference" class="form-control"
                                       placeholder="Enter Reference Number (Optional)">
                            </div>
                        </div>
                        <div class="row mb-3"   >
                            <div class="form-group mt-3 col-sm-12">
                                <label>Transaction Narrative</label>
                                <textarea class="form-control" name="narration" placeholder="Narrative (Optional)"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="reset" class="btn btn-danger">reset</button>
                            <button type="submit" class="btn btn-primary" id="submitLoanRepayment" disabled>Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div> <!-- end col -->
    </div>


{% endblock %}

{% block javascript %}
    {% for message in messages %}
        {% if message.tags %}
            <script>
                new PNotify({
                    title: '{{message|safe|escape}}',
                    text: '{{message.extra_tags|safe|escape}}',
                    type: '{{message|safe|escape}}',
                    delay: 16000,
                    animateSpeed: 'slow',
                    closerHover: false,
                    stack: false
                });

            </script>
        {% endif %}
    {% endfor %}



    <script>
        function updateTotalPaid(){
            let principal = document.querySelector('#principalbalance').value
            let interest = document.querySelector('#interestamount').value
            let fine = document.querySelector('#fineamount').value
            let totalToBePaid = 0

            principal = parseFloat(principal.replace(/,/g, ""))
            interest = parseFloat(interest.replace(/,/g, ""))
            fine= parseFloat(fine.replace(/,/g, ""))
            if (isNaN(principal)) {
              principal = 0
            }
            if (isNaN(interest)) {
              interest = 0
            }
            if (isNaN(fine)) {
              fine = 0
            }

            totalToBePaid = principal + interest + fine
            document.querySelector('#totalToBePaid').value = totalToBePaid

        }
    </script>

{% endblock %}