{% extends 'extends/layout.html' %}
{% load static %}
{% block scripts %}
    <script>
        const onChangeLoanStatus = () =>{
            //remove charge application
            let loanStatus = document.querySelector('#lstatus').value
            let chargeDiv = document.querySelector('#chargeAppDiv')
            let applyFromDiv = document.querySelector('#apply_charges_fromDiv')
            if(loanStatus === '1'){
                chargeDiv.style.display = 'none'
                document.querySelector('#charge_application').required = false
                applyFromDiv.style.display = 'none'
                document.querySelector('#apply_charges_from').required = false

            }else{
                chargeDiv.style.display = 'block'
                document.querySelector('#charge_application').required = true
                applyFromDiv.style.display = 'block'
                document.querySelector('#apply_charges_from').required = true
            }
            document.querySelector('#charge_application').value = ''
            document.querySelector('#apply_charges_from').value = ''


        }

        const onChangeLoanStatusTopUp = () =>{
            //remove charge application
            let loanStatus = document.querySelector('#top_lstatus').value
            let chargeDiv = document.querySelector('#top_chargeAppDiv')
            let applyFromDiv = document.querySelector('#top_apply_charges_fromDiv')
            if(loanStatus === '1'){
                chargeDiv.style.display = 'none'
                document.querySelector('#top_charge_application').required = false
                applyFromDiv.style.display = 'none'
                document.querySelector('#top_apply_charges_from').required = false

            }else{
                chargeDiv.style.display = 'block'
                document.querySelector('#top_charge_application').required = true
                applyFromDiv.style.display = 'block'
                document.querySelector('#top_apply_charges_from').required = true
            }
            document.querySelector('#top_charge_application').value = ''
            document.querySelector('#top_apply_charges_from').value = ''

        }

        const showSpinnerTopUp = () =>{

            document.querySelector('#spinnerTopup').style.display = 'block'
            document.querySelector('#submitBtn').style.display = 'none'
        }
        document.querySelector('#topupForm').addEventListener('submit', showSpinnerTopUp);

    </script>
{% endblock %}

{% block content %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header d-flex justify-content-end">
                    <div class="me-2">
                        <button
                            class="btn btn-primary pull-right mr-3"
                            data-bs-toggle="modal"
                            data-bs-target="#add_loans_modal"
                        >
                            <i class="feather icon-plus mr-2"></i>Upload Loans
                        </button>

                    </div>

                    <div >
                        <button
                            class="btn btn-info pull-right mr-3"

                            data-bs-toggle="modal"
                            data-bs-target="#add_loan_topups_modal"
                        >
                            <i class="feather icon-plus mr-2"></i>Upload Loan topups
                        </button>

                    </div>

                </div>

                {# ======= ADD LOAN TYPE MODAL ============#}
                <div
                        class="modal fade bd-example-modal-lg"
                        id="add_loans_modal"
                        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">
                                    UPLOAD LOANS
                                </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-12">
                                            <label class="form-label" for="udate">Date</label>
                                            <input
                                                    type="date"
                                                    class="form-control"
                                                    id="udate"
                                                    name="udate"
                                                    placeholder="Enter loan type name"
                                                    required
                                            />
                                        </div>

                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="loan_type">Loan Type</label>
                                            <select
                                                    class="select2 form-control"
                                                    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="mb-2 col-md-12">
                                            <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>

                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="rate_type">Loan status</label>
                                            <select
                                                    class="form-control"
                                                    id="lstatus"
                                                    name="lstatus"
                                                    onchange="onChangeLoanStatus()"
                                                    required
                                            >
                                                <option value="" selected disabled>Select status</option>
                                                <option value="1">New Loans</option>
                                                <option value="2">Running or old loans</option>
                                            </select>
                                        </div>

                                        <div class="mb-2 col-md-12" id="chargeAppDiv" style="display: none">
                                            <label class="form-label" for="rate_type">Charge application </label>
                                            <select
                                                    class="form-control"
                                                    id="charge_application"
                                                    name="charge_application"
                                                    required
                                            >
                                                <option value="" selected disabled>Select atleast one</option>
                                                <option value="added_to_principal">Deducted from principal</option>
                                                <option value="charges_are_separate">Charges are registered separate</option>
                                            </select>
                                        </div>

                                        <div class="mb-2 col-md-12" id="apply_charges_fromDiv" style="display: none">
                                            <label class="form-label" for="apply_charges_from">Apply charges from (Where are charges picked from)</label>
                                            <select
                                                    class="form-control"
                                                    id="apply_charges_from"
                                                    name="apply_charges_from"
                                                    required
                                            >
                                                <option value="" selected disabled>Select atleast one</option>
                                                <option value="system">From existing charges in system</option>
                                                <option value="excel">From uploaded excel</option>
                                            </select>
                                        </div>

                                        <div class="mb-2 col-md-12">
                                            <label class="text-dark" for="logo">Excel File (CSV)</label>
                                            <div class="custom-file">
                                                <input
                                                        class="form-control"
                                                        accept="text/csv"
                                                        name="proof"
                                                        id="proof"
                                                        type="file"
                                                />
                                            </div>
                                            <span id="filename"></span>
                                        </div>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="credited">Credit account for principal</label>
                                        <select
                                                class="form-control"
                                                id="credited"
                                                name="credited"
                                                required
                                        >
                                            <option value="" selected disabled>Select Acct</option>
                                            {% for acct in bankaccounts %}
                                                <option value="{{ acct.id }}">{{ acct.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="">Debit account for loan charges</label>
                                        <select
                                                class="form-control"
                                                id="charges_debitted_acc"
                                                name="charges_debitted_acc"
                                                required
                                        >
                                            <option value="" selected disabled>Select Acct</option>
                                            {% for acct in bankaccounts %}
                                                <option value="{{ acct.id }}">{{ acct.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="narration">Narration</label>

                                        <textarea
                                                class="form-control"
                                                id="narration"
                                                name="narration"
                                                placeholder="Narration"
                                        ></textarea>
                                    </div>

                                    <input type="hidden" name="form_type" value="upload" required/>

                                    <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>
                {# =======END ADD LOAN TYPE MODAL========================#}

                {# ======= ADD LOAN TOPUPS MODAL ============#}
                <div
                        class="modal fade bd-example-modal-lg"
                        id="add_loan_topups_modal"
                        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">
                                    UPLOAD LOAN TOPUPS
                                </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" action="{% url 'upload_loan_topups' %}" id="topupForm">
                                    {% csrf_token %}

                                    <div class="row">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="udate">Date</label>
                                            <input
                                                    type="date"
                                                    class="form-control"
                                                    id="top_udate"
                                                    name="top_udate"
                                                    placeholder="Enter date"
                                                    required
                                            />
                                        </div>

{#                                        <div class="mb-2 col-md-12">#}
{#                                            <label class="form-label" for="loan_type">Loan Type</label>#}
{#                                            <select#}
{#                                                    class="select2 form-control"#}
{#                                                    name="top_loan_type"#}
{#                                                    id="top_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="mb-2 col-md-12">#}
{#                                            <label class="form-label" for="rate_type">Rate type</label>#}
{#                                            <select#}
{#                                                    class="form-control"#}
{#                                                    id="top_rate_type"#}
{#                                                    name="top_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 class="mb-2 col-md-12">#}
{#                                            <label class="form-label" for="rate_type">Loan status</label>#}
{#                                            <select#}
{#                                                    class="form-control"#}
{#                                                    id="top_lstatus"#}
{#                                                    name="top_lstatus"#}
{#                                                    onchange="onChangeLoanStatusTopUp()"#}
{#                                                    required#}
{#                                            >#}
{#                                                <option value="" selected disabled>Select status</option>#}
{#                                                <option value="1">New Loans</option>#}
{#                                                <option value="2">Running or old loans</option>#}
{#                                            </select>#}
{#                                        </div>#}

{#                                        <div class="mb-2 col-md-12" id="top_chargeAppDiv" >#}
{#                                            <label class="form-label" for="rate_type">Charge application </label>#}
{#                                            <select#}
{#                                                    class="form-control"#}
{#                                                    id="top_charge_application"#}
{#                                                    name="top_charge_application"#}
{#                                                    required#}
{#                                            >#}
{#                                                <option value="" selected disabled>Select atleast one</option>#}
{#                                                <option value="added_to_principal">Deducted from principal</option>#}
{#                                                <option value="charges_are_separate">Charges are registered separate</option>#}
{#                                            </select>#}
{#                                        </div>#}

                                        <div class="mb-2 col-md-12" id="top_apply_charges_fromDiv" >
                                            <label class="form-label" for="apply_charges_from">Apply charges from (Where are charges picked from)</label>
                                            <select
                                                    class="form-control"
                                                    id="top_apply_charges_from"
                                                    name="top_apply_charges_from"
                                                    required
                                            >
                                                <option value="" selected disabled>Select atleast one</option>
                                                <option value="system">From existing charges in system</option>
                                                <option value="excel">From uploaded excel</option>
                                            </select>
                                        </div>



                                        <div class="mb-2 col-md-12">
                                            <label class="text-dark" for="logo">Excel File (xlsx)</label>
                                            <div class="custom-file">
                                                <input
                                                        class="form-control"
                                                        accept=".xlsx"
                                                        name="top_proof"
                                                        id="top_proof"
                                                        type="file"
                                                />
                                            </div>
                                            <span id="filename"></span>
                                        </div>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="top_interest_include">Close old loan balance with interest</label>
                                        <select
                                                class="select2 form-control"
                                                name="top_interest_include"
                                                id="top_interest_include"
                                                required
                                        >
                                            <option value="" selected>Select Account</option>
                                            <option value="yes">Yes</option>
                                            <option value="no">No</option>
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="top_excel_amount_include_charge">Excel amount include charge</label>
                                        <select
                                                class="select2 form-control"
                                                name="top_excel_amount_include_charge"
                                                id="top_excel_amount_include_charge"
                                                required
                                        >
                                            <option value="" selected>Select Account</option>
                                            <option value="includes">Includes</option>
                                            <option value="doesnt_include">No, doesnt include</option>
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="credited">Credit account for principal</label>
                                        <select
                                                class="form-control"
                                                id="top_credited"
                                                name="top_credited"
                                                required
                                        >
                                            <option value="" selected disabled>Select Acct</option>
                                            {% for acct in bankaccounts %}
                                                <option value="{{ acct.id }}">{{ acct.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="">Debit account for loan charges</label>
                                        <select
                                                class="form-control"
                                                id="top_charges_debitted_acc"
                                                name="top_charges_debitted_acc"
                                                required
                                        >
                                            <option value="" selected disabled>Select Acct</option>
                                            {% for acct in bankaccounts %}
                                                <option value="{{ acct.id }}">{{ acct.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <label class="form-label" for="narration">Narration</label>

                                        <textarea
                                                class="form-control"
                                                id="top_narration"
                                                name="top_narration"
                                                placeholder="Narration"
                                        ></textarea>
                                    </div>

                                    <input type="hidden" name="form_type" value="upload" required/>

                                    <div class="modal-footer">
                                        <span id="submitBtn">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" id="savebtn" class="btn btn-primary">
                                            Submit
                                        </button>
                                        </span>
                                        <div class="spinner-border text-primary" role="status" style="display: none" id="spinnerTopup">
                                          <span class="visually-hidden">Loading...</span>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {# =======END ADD LOAN TOPUPS MODAL========================#}

                <div class="card-body">
                    <div class="row"></div>
                    <div style="alignment: center; text-align: center">
                        <h3><u>LOAN UPLOAD HISTORY</u></h3>
                    </div>
                    <div class="table-responsive">
                        <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Loan Type</th>
                                <th>Date Uploaded</th>
                                <th>Number of loans Uploaded</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for upload in uplaods %}
                                <tr>
                                    <td>{{ forloop.counter }}.</td>
                                    {% if upload.loan_type is None %}
                                        <td>Top up upload</td>
                                    {% else %}
                                        <td>{{ upload.loan_type.name }}</td>
                                    {% endif %}
                                    <td>{{ upload.upload_date }}</td>
                                    <td>{{ upload.total_records }}</td>

                                    <td>
                                        <a
                                                href="{% url 'upload_details' upload.id %}"
                                                class="btn btn-success btn-sm"
                                        ><i class="fa fa-eye"></i> Details
                                        </a>
                                        <a
                                                href="{% url 'failed_loans_upload' upload.id %}"
                                                class="btn btn-info btn-sm" target="_blank"
                                        ><i class="fa fa-download"></i> Failed loans
                                        </a>
                                        <button
                                                data-bs-toggle="modal"
                                                data-bs-target=".deleteupload{{ upload.id }}"
                                                class="btn btn-danger btn-sm"
                                                {% if upload.loan_type is None %}disabled{% endif %}
                                        >
                                            <i class="fa fa-trash"></i> Undo
                                        </button>
                                    </td>
                                </tr>

                                {# ======== EDIT LOAN TYPE MODAL ================= #}

                                <div
                                        class="modal deleteupload{{ upload.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 Records
                                                </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="uploadid"
                                                                value="{{ upload.id }}"
                                                                required
                                                        />
                                                        <input
                                                                type="hidden"
                                                                name="form_type"
                                                                value="delete"
                                                                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 these records
                                                                        ?</b
                                                                    >
                                                                </h4>

                                                                <h5 style="color: Blue">
                                                                    A total of
                                                                    <strong>{{ upload.total_records }}</strong>
                                                                    loans will be deleted, and this process is
                                                                    irreversible
                                                                </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 %}