{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block styles %}
        <!-- DataTables css -->

    {% endblock %}
    {% block scripts %}
        <!-- Datatable js -->

    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" autocomplete="off">
                        {% csrf_token %}
                        <div class="row">
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="account">Member Account</label>
                                    <select class="form-control select2" data-toggle="select2"
                                            onchange="checkmember(this.value)" name="account" id="account" required>
                                        <option value="" selected disabled>Select Account</option>
                                        {% for member in members %}
                                            <option value="{{ member.the_account.id }}">
                                                {{ member.members.biodata.name }} Tel. +{{ member.members.biodata.contact }} - A/c No.{{ member.the_account }} - {{ member.the_account.account_type.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                <span id="memberresponse" style="display: none"></span>
                                <div class="alert alert-success mt-2" role="alert" id="userAllowedLoan" style="display: none">
                                    You are authorized to add another loan, continue if its okay
                                </div>
                                <div class=" mb-2 col-md-12 alert alert-info mt-2" role="alert" style="display: none" id="alertGroupBelong">
                                </div>
                                
                            </div>
                            
                            <div class="mb-2 col-md-6" style="display:none" id="guarantorship_type_div">
                                <label class="form-label" for="guarantorship_type">Guarantorship type</label>
                                    <select class="form-control" name="guarantorship_type" id="guarantorship_type">
                                        <option value="" selected disabled>Select type</option>
                                        <option value="group">Group guarantorship</option>
                                        <option value="member">Member guarantorship</option>
                                    </select>
                            </div>
                            
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="loan_type">Loan Type</label>
                                    <select class="form-control select2" data-toggle="select2"
                                            onchange="getvalues(this.value)" name="loan_type" id="loan_type" required>
                                        <option value="" selected disabled>Select Account</option>
                                        {% for item in loan_types %}
                                            <option value="{{ item.id }}">
                                                {{ item.name }} - {{ item.interest_rate }}% - {{ item.get_formula_display }}
                                            </option>
                                        {% endfor %}

                                    </select>
                            </div>
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="amount">Amount Requested</label>
                                <input type="text" class="form-control" id="amount" name="amount"
                                       placeholder="Enter requested amount" data-type="currency" required>
                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="adate">Application Date</label>
                                <input type="date" class="form-control" id="adate" name="adate"
                                       placeholder="Enter date" required>

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="officer">Staff in charge</label>
                                {% if create_or_view_all_loans_for_officers %}
                                    <select class="form-control select2" data-toggle="select2" name="officer" id="officer" required>
                                        <option value="" selected disabled>Select from staff list</option>
                                        {% for officer in officers %}
                                            <option value="{{ officer.id }}">
                                                {{ officer.biodata.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% else %}
                                    <select class="form-control select2" data-toggle="select2" name="officer" id="officer" disabled>
                                        <option value="" selected>Select from staff list</option>
                                        {% for officer in officers %}
                                            <option value="{{ officer.id }}" {% if the_staff.id == officer.id %}selected{%endif%}>
                                                {{ officer.biodata.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                {% endif %}

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="interest">Interest Rate <span id="interestPeriod" style="display:none"></span></label>
                                <input type="number" step="any" class="form-control" disabled id="interest"
                                       name="interest" placeholder="Enter interest rate" required>

                            </div>

                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="duration">Requested Duration <span id="dura">  </span> - (This duration is based on interval set on loan product)</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="mb-2 col-md-6">
                                <label class="form-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>
                            <input name="payment_method" value="1" type="hidden">
{#                            <div class="mb-2 col-md-6" id="paymentmethod">#}
{#                                <label class="form-label" for="payment_method">Repayment method</label>#}
{#                                <select class="form-control" id="payment_method"#}
{#                                        name="payment_method" required>#}
{#                                    <option value="" selected disabled>Select repayment Method</option>#}
{#                                    <option value=1> Payment by cash</option>#}
{#                                    <option value=2>By Members Account</option>#}
{##}
{##}
{#                                </select>#}
{##}
{#                            </div>#}
                            <!-- <div class="col-md-12" id="assessment" style="display: none">
                                <div style="text-align: center;"><U><B><h4>Loan Application assessment Form</h4></B></U></div>
                            </div>
                            <div class="mb-2 col-md-6">
                                <label class="form-label" for="assessment">Add Loan Assessment Form ?</label>
                                <select class="form-control" id="assessment"
                                        name="assessment " onchange="assess(this.value)" required>
                                    <option value=2>No</option>
                                    <option value=1>Yes</option>
                                </select>
                            </div> -->
                        </div>

                        <script>
                            function assess(val) {
                                if (val == 1) {
                                    document.getElementById('loanpurpose').style.display = 'block'
                                    document.getElementById('emptype').style.display = 'block'
                                    document.getElementById('marital').style.display = 'block'
                                    document.getElementById('icomesource').style.display = 'block'
                                    document.getElementById('incomerange').style.display = 'block'
                                    document.getElementById('ownership').style.display = 'block'
                                    document.getElementById('assessment').style.display = 'block'


                                } else {
                                    document.getElementById('loanpurpose').style.display = 'none'
                                    document.getElementById('emptype').style.display = 'none'
                                    document.getElementById('marital').style.display = 'none'
                                    document.getElementById('icomesource').style.display = 'none'
                                    document.getElementById('incomerange').style.display = 'none'
                                    document.getElementById('assessment').style.display = 'none'
                                    document.getElementById('ownership').style.display = 'none'
                                }
                            }
                        </script>

                        <script>
                            function getvalues(val) {

                                var xhttp = new XMLHttpRequest();
                                xhttp.onreadystatechange = function () {
                                    if (this.readyState == 4 && this.status == 200) {
                                        let response = this.responseText.split("|");
                                        // console.log('response', response)
                                        let value1 = response[0];
                                        let value2 = response[1];
                                        let value4 = response[3];
                                        let theFormulae = response[4];
                                        // interestPeriod
                                        document.querySelector('#interestPeriod').style.display = 'inline'
                                        document.querySelector('#interestPeriod').innerHTML = `(Interest generated per ${theFormulae})`
                                        console.log(theFormulae)

                                        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('duration').setAttribute("max", value4)
                                    }
                                }
                                xhttp.open("GET", "/loans/getdetails/" + val, true);
                                xhttp.send();
                            }
                        </script>


                        <div class="row">

                            <div class="mb-2 col-md-6" id="loanpurpose" style="display: none">
                                <label class="form-label" for="loan_purpose">Loan Purpose</label>
                                <input class="form-control  border border-primary" name="loan_purpose"
                                       id="loan_purpose">
                            </div>

                            <div class="mb-2 col-md-6" id="marital" style="display: none">
                                <label class="form-label" for="marital_status">Marital Status</label>
                                <select class="form-control" id="marital_status"
                                        name="marital_status">
                                    <option value="" selected disabled>Select Marital Status</option>
                                    <option value=1>Single</option>
                                    <option value=3>Married</option>
                                    <option value=2>Divorsed</option>
                                    <option value=4>Widowed</option>
                                </select>
                            </div>

                            <div class="mb-2 col-md-6" id="icomesource" style="display: none">
                                <label class="form-label" for="income_source">Primary Income source</label>
                                <input class="form-control  border border-primary" name="income_source"
                                       id="income_source">
                            </div>


                            <div class="mb-2 col-md-6" id="incomerange" style="display: none">
                                <label class="form-label" for='income'>Monthly income range</label>
                                <select class="form-control" id="income" name="income">
                                    <option value="" selected disabled>Select Monthly Income</option>
                                    <option value=1>1 - 200,000</option>
                                    <option value=2>200,001 - 500,000</option>
                                    <option value=3>500,001 - 1,000,000</option>
                                    <option value=4>1,000,000 - Above</option>
                                </select>
                            </div>


                            <div class="mb-2 col-md-6" id="ownership" style="display: none">
                                <label class="form-label" for="ownershiptype">Residential Status</label>
                                <select class="form-control" id="ownershiptype"
                                        name="ownershiptype" \>
                                    <option value="" selected disabled>Select Residential status</option>
                                    <option value=1>Owned</option>
                                    <option value=2>Not owned</option>
                                </select>
                            </div>


                            <div class="mb-2 col-md-6" id="emptype" style="display: none">
                                <label class="form-label" for="emp_type">Employment type</label>
                                <select class="form-control" id="emp_type"
                                        onchange="empty(this.value)" name="emp_type">
                                    <option value="" selected disabled>Select Employment type</option>
                                    <option value=1>Employed</option>
                                    <option value=2>Self Eployed</option>
                                    <option value=3>Unemployed</option>
                                </select>
                            </div>

                            <script>
                                function empty(empvalue) {
                                    if (empvalue == 1) {
                                        document.getElementById('empvalue').style.display = 'block'
                                        document.getElementById('employ').innerText = 'Employed '
                                    } else if (empvalue == 2) {
                                        document.getElementById('empvalue').style.display = 'block'
                                        document.getElementById('employ').innerText = 'Self employed '
                                    } else {
                                        document.getElementById('empvalue').style.display = 'block'
                                        document.getElementById('employ').innerText = 'Unemployed '
                                    }
                                }
                            </script>

                            <div class="mb-2 col-md-6" id="empvalue" style="display: none">
                                <label class="form-label" for="loan_purpose"><span id="employ"></span> For how long?</label>
                                <input class="form-control  border border-primary" name="loan_purpose"
                                       id="loan_purpose">
                            </div>
                        </div>

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


                    <script>
                        function checkmember(mem) {
                            var xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange = function () {

                                if (this.readyState == 4 && this.status == 200) {
                                    // console.log(this.responseText)
                                    document.getElementById('memberresponse').style.display = 'none'
                                    document.querySelector('#alertGroupBelong').style.display ='none'
                                    document.querySelector('#guarantorship_type_div').style.display ='none'
                                    document.getElementById('apply').disabled = true
                                    document.getElementById('userAllowedLoan').style.display = 'none'

                                    var response = this.responseText.split("|");
                                    console.log('response', response)
                                    var membername = 'Selected member'

                                    var loanstatus = response[0]
                                    var loanid = response[1]
                                    let the_group = response[2]
                                    let allow_adding_extra_loan = response[3]

                                    if (loanid > 0) {
                                        var url1 = "/loans/loan-details/" + loanid + "";
                                        document.getElementById('apply').disabled = true
                                        if (loanstatus < 3) {
                                            var url = '<a href="' + url1 + '"><u>View application details</u></a>';

                                            var message = '<h5 style="color: red" ">' + membername + ' Has a pending loan application. ' + url + '</h5>'
                                        } else {
                                            var url = '<a href="' + url1 + '"><u>View loan details</u></a>';

                                            var message = '<h5 style="color: red" ">' + membername + ' Has a running loan. ' + url + '</h5>'
                                        }
                                        document.getElementById('memberresponse').style.display = 'block'
                                        document.getElementById('memberresponse').innerHTML = message

                                        if (allow_adding_extra_loan.toLocaleLowerCase() === 'true'){
                                            document.getElementById('userAllowedLoan').style.display = 'block'
                                            document.getElementById('apply').disabled = false

                                            if(the_group != 0){
                                                let alertText =`This member belongs to a certain group ${the_group}. Please select the type of guarantorship`
                                                document.querySelector('#alertGroupBelong').style.display ='block'
                                                document.querySelector('#alertGroupBelong').innerHTML =alertText
                                                document.querySelector('#guarantorship_type_div').style.display ='block'
                                                document.querySelector('#guarantorship_type').required =true
                                                
                                                document.getElementById('apply').disabled = false
                                                
                                            }else{
                                                document.querySelector('#guarantorship_type').required =false
                                                document.querySelector('#guarantorship_type_div').style.display ='none'
                                                document.getElementById('apply').disabled = false
                                                document.getElementById('memberresponse').style.display = 'none'
                                                
                                            }
                                        }

                                    } else {
                                        if(the_group != 0){
                                            let alertText =`This member belongs to a certain group ${the_group}. Please select the type of guarantorship`
                                            document.querySelector('#alertGroupBelong').style.display ='block'
                                            document.querySelector('#alertGroupBelong').innerHTML =alertText
                                            document.querySelector('#guarantorship_type_div').style.display ='block'
                                            document.querySelector('#guarantorship_type').required =true
                                            
                                            document.getElementById('apply').disabled = false
                                            
                                        }else{
                                            document.querySelector('#guarantorship_type').required =false
                                            document.querySelector('#guarantorship_type_div').style.display ='none'
                                            document.getElementById('apply').disabled = false
                                            document.getElementById('memberresponse').style.display = 'none'
                                            
                                        }
                                        
                                    }
                                }
                            }
                            xhttp.open("GET", "/loans/check-loan/" + mem, true);
                            xhttp.send();
                        }
                    </script>
                </div>
            </div>
        </div>
        <!-- End col -->

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