{% 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 = () =>{
            {#console.log('TOP UP IS RUNNING')#}
            //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 = ''


        }


    </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>
                        <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>

                {# ======= 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</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="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>


                <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>
                                    <td>{{ upload.loan_type.name }}</td>
                                    <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>
                                        <button
                                                data-bs-toggle="modal"
                                                data-bs-target=".deleteupload{{ upload.id }}"
                                                class="btn btn-danger btn-sm"
                                        >
                                            <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 %}