{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}',
                accTypesJson: '{{ accTypesJson|safe }}',
                transactionChargesJson: '{{ transactionChargesJson|safe }}',
                firstId: '{{ firstId }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/currency_formatter.js' %}"></script>
        <script src="{% static 'sacco/assets/custom_js/custom_transaction_charges.js' %}"></script>
    {% endblock %}
    <div class="row">
        <div class="modal fade" id="addChargeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalTitle">Add new charge</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post">
                            {% csrf_token %}

                            <span style="display:none" id="varry_div">

                        <div class="mb-2">
                                <label class="form-label" for="name">Minimum amount</label>
                                <input type="text" data-type="currency" class="form-control"
                                       id="minimum_amt" name="minimum_balance" placeholder="Minimum balance" value='0'
                                       min="0" readonly required>
                          </div>
                            <div class="mb-2" id="maturity_div">
                                <label class="form-label" for="name">Maximum amount</label>
                                <input type="text" data-type="currency" class="form-control"
                                       id="maximum_amt" name="max_amount" placeholder="" min="0" required>
                          </div>

                            <div class="mb-2" id="">
                                    <label class="form-label" for="name">Is charge an amount or a percentage</label>
                                    <select class="form-control" id="amt_percentage_varry"
                                            name="deposit_charge_vary" onchange="onChangeThePercOrAmt()">
                                        <option value="" selected disabled>select</option>
                                      <option value="p">Use percentage</option>
                                      <option value="a">Use amount</option>
                                    </select>
                              </div>
                            <div class="mb-2" id="maturity_div">
                                <label class="form-label" for="name">Charge amount / Charge Percentage</label>
                                <input type="text" data-type="currency" class="form-control"
                                       id="charge_range_varry" name="max_amount"
                                       placeholder="Enter charge range/ percentage" min="0" required>
                          </div>
                    </span>

                            <span style="display: none" id="flat_charge">
                        <div class="mb-2" id="">
                                <label class="form-label" for="name">Is charge an amount or a percentage</label>
                                <select class="form-control" id="amt_percentage_flat"
                                        name="deposit_charge_vary" onchange="onChangeThePercOrAmtFlat()">
                                    <option value="" selected disabled>select</option>
                                  <option value="p">Use percentage</option>
                                  <option value="a">Use amount</option>
                                </select>
                            </div>
                        <div class="mb-2" id="maturity_div">
                                <label class="form-label"
                                       for="name">Charge amount / Charge Percentage (Flat charge)</label>
                                <input type="text" data-type="currency" class="form-control"
                                       id="charge_for_flat" name="max_amount" placeholder="Charge amount / Percentage"
                                       min="0" required>
                          </div>

                    </span>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="modalAddButton" onclick="handleSubmit()">
                                Add account type
                            </button>
                            <div class="spinner-border text-danger" role="status" id="submitting" style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {#        ++++++++++++++++++++++++++++++++++++++++ Editing the transaction type +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#}
        <div class="modal fade" id="editTransactionCharge" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit transaction charge</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="edit_form">
                            {% csrf_token %}
                            <span id="edit_varry_div" style="display: none">
                                            <div class="mb-2">
                                                    <label class="form-label" for="name">Minimum amount</label>
                                                    <input type="text" data-type="currency"
                                                           class="form-control"
                                                           id="edit_minimum_amt" name="minimum_balance"
                                                           placeholder="Minimum balance" value='0' min="0" required>
                                              </div>
                                            <div class="mb-2" id="maturity_div">
                                                <label class="form-label" for="name">Maximum amount</label>
                                                <input type="text" data-type="currency"
                                                       class="form-control" id="edit_maximum_amt"
                                                       name="max_amount" placeholder="" min="0" required>
                                            </div>
                                            <div class="mb-2" id="">
                                                    <label class="form-label" for="name">Is charge an amount or a percentage</label>
                                                    <select class="form-control"
                                                            id="edit_amt_percentage_varry" name="deposit_charge_vary"
                                                            onchange="onChangeThePercOrAmtFlatEdit()">
                                                        <option value="" selected disabled>select</option>
                                                      <option value="p">Use percentage</option>
                                                      <option value="a">Use amount</option>
                                                    </select>
                                              </div>
                                            <div class="mb-2" id="maturity_div">
                                                <label class="form-label" for="name">Charge range</label>
                                                <input type="text" data-type="currency"
                                                       class="form-control" id="edit_charge_range"
                                                       name="max_amount" placeholder="Enter charge range" min="0"
                                                       required>
                                          </div>
                                        </span>
                            <span style="display: none" id="edit_flat_charge">
                                            <div class="mb-2" id="">
                                                    <label class="form-label" for="name">Is charge an amount or a percentage</label>
                                                    <select class="form-control"
                                                            id="edit_amt_percentage_flat" name="deposit_charge_vary"
                                                            onchange="onChangeThePercOrAmtFlatEdit()">
                                                        <option value="" selected disabled>select</option>
                                                      <option value="p">Use percentage</option>
                                                      <option value="a">Use amount</option>
                                                    </select>
                                              </div>
                                            <div class="mb-2" id="maturity_div">
                                                    <label class="form-label" for="name">Charge amount / Charge Percentage (Flat charge)</label>
                                                    <input type="text" data-type="currency"
                                                           class="form-control"
                                                           id="edit_charge_for_flat" name="max_amount"
                                                           placeholder="Charge amount / Percentage" min="0" required>
                                              </div>
                                        </span>
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" id="update_button_after_edit"
                                    onclick="handleEditSubmit()">
                                Update transaction charge
                            </button>
                            <div class="spinner-border text-danger" role="status" id="submitting" style="display: none">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {#        ++++++++++++++++++++++++++++++++++++++++ Editing the transaction type +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#}

        <div class="card-body" id="replaceBody">
            <div class="accordion custom-accordion" id="custom-accordion-one">
                {% for acc_type in account_types %}
                    <div class="card mb-0">
                        <div class="card-header" id="headingFour{{ acc_type.id }}">
                            <h5 class="m-0">
                                <a class="custom-accordion-title text-uppercase d-block py-1"
                                   onclick="onClickCollapseButton({{ acc_type.id }})"
                                   data-bs-toggle="collapse" href="#collapseFour{{ acc_type.id }}"
                                   aria-expanded="true" aria-controls="collapseFour{{ acc_type.id }}">
                                    {{ forloop.counter }}. {{ acc_type.name }} <i
                                        class="mdi mdi-chevron-down accordion-arrow"></i>
                                </a>
                            </h5>
                        </div>
                        <div id="collapseFour{{ acc_type.id }}"
                             class="{% if forloop.counter == 1 %} collapse show {% else %} collapse {% endif %}"
                             aria-labelledby="headingFour{{ acc_type.id }}"
                             data-bs-parent="#custom-accordion-one">
                            <div class="card-body">
                                {% if 'add_transaction_charges' in user_perms %}
                                    <div class="d-flex justify-content-end mb-2">
                                        <button type="button" data-bs-toggle="modal" data-bs-target="#addChargeModal"
                                                class="btn btn-primary pull-right mr-3" id="addButton{{ acc_type.id }}"
                                                onclick="onClickAdd()"><i class="feather icon-plus mr-2"></i>Add Deposit
                                            charge
                                        </button>
                                    </div>
                                {% endif %}
                                <div class="card-body">
                                    <ul class="nav nav-tabs mb-3" id="defaultTab{{ acc_type.id }}" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" onclick="onTabChange('#Deposit_charge')"
                                               id="home-tab" data-bs-toggle="tab"
                                               href="#Deposit_charge{{ acc_type.id }}"
                                               role="tab" aria-controls="home" aria-selected="true">Deposit charges</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="profile-tab"
                                               onclick="onTabChange('#Withdraw_charge')"
                                               data-bs-toggle="tab" href="#Withdraw_charge{{ acc_type.id }}" role="tab"
                                               aria-controls="profile" aria-selected="false">Withdraw charges</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" id="contact-tab"
                                               onclick="onTabChange('#Transfer_charge')"
                                               data-bs-toggle="tab" href="#Transfer_charge{{ acc_type.id }}" role="tab"
                                               aria-controls="contact" aria-selected="false">Transfer charges</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content" id="defaultTabContent">
                                        <div class="tab-pane fade show active" id="Deposit_charge{{ acc_type.id }}"
                                             role="tabpanel" aria-labelledby="home-tab">
                                            {% if acc_type.deposit_charge_vary %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: teal;font-weight: bold;font-size: 20px;">Currently using varying charges</span>
                                                </div>

                                            {% else %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: chocolate;font-weight: bold;font-size: 20px;">Currently using a flat charge</span>
                                                </div>

                                            {% endif %}
                                            <table class="table dt-responsive nowrap w-100">
                                                <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Minimum</th>
                                                    <th>Maximum</th>
                                                    <th>Charge</th>
                                                    <th>Charge measure</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody id="types_table_rows">
                                                {% for charge in transactions_charges %}
                                                    {% if charge.account_type == acc_type and charge.charge_type == 'd' %}
                                                        {% if charge.charge_type == 'd' %}
                                                            <tr>
                                                                <td>{{ forloop.counter }}</td>
                                                                <td>{{ charge.start | intcomma }}</td>
                                                                <td>{{ charge.end | intcomma }}</td>
                                                                <td>{{ charge.charge | intcomma }}</td>
                                                                {% if charge.is_charge_percentage %}
                                                                    <td>Percentage</td>
                                                                {% else %}
                                                                    <td>Amount</td>
                                                                {% endif %}
                                                                <td>
                                                                    {% if 'edit_transaction_charges' in user_perms %}
                                                                        <button type="button" class="btn btn-info mr-3"
                                                                                onclick="setEditData({{ charge.id }})">
                                                                            Edit
                                                                        </button>
                                                                    {% endif %}
                                                                    {% if 'add_transaction_charges' in user_perms %}
                                                                        <a href="{% url 'delete_transaction_charge' charge.id %}">
                                                                        <button type="button"
                                                                                class="btn btn-danger mr-3">
                                                                            Delete
                                                                        </button>
                                                                    {% endif %}
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="tab-pane fade" id="Withdraw_charge{{ acc_type.id }}" role="tabpanel"
                                             aria-labelledby="profile-tab">
                                            {% if acc_type.withdraw_charge_vary %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: teal;font-weight: bold;font-size: 20px;">Currently using varying charges</span>
                                                </div>
                                            {% else %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: chocolate;font-weight: bold;font-size: 20px;">Currently using a flat charge</span>
                                                </div>
                                            {% endif %}
                                            <table class="table dt-responsive nowrap w-100">
                                                <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Minimum</th>
                                                    <th>Maximum</th>
                                                    <th>Charge</th>
                                                    <th>Charge measure</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody id="types_table_rows">
                                                {% for charge in transactions_charges %}
                                                    {% if charge.account_type == acc_type and charge.charge_type == 'w' %}
                                                        {% if charge.charge_type == 'w' %}
                                                            <tr>
                                                                <td>{{ forloop.counter }}</td>
                                                                <td>{{ charge.start }}</td>
                                                                <td>{{ charge.end }}</td>
                                                                <td>{{ charge.charge }}</td>
                                                                {% if charge.is_charge_percentage %}
                                                                    <td>Percentage</td>
                                                                {% else %}
                                                                    <td>Amount</td>
                                                                {% endif %}
                                                                <td>
                                                                    <button type="button" class="btn btn-info mr-3"
                                                                            onclick="setEditData({{ charge.id }})">Edit
                                                                    </button>
                                                                    <a href="{% url 'delete_transaction_charge' charge.id %}">
                                                                        <button type="button"
                                                                                class="btn btn-danger mr-3">
                                                                            Delete
                                                                        </button>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="tab-pane fade" id="Transfer_charge{{ acc_type.id }}" role="tabpanel"
                                             aria-labelledby="contact-tab">
                                            {% if acc_type.transfer_charge_vary %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: teal;font-weight: bold;font-size: 20px;">Currently using varrying charges</span>
                                                </div>
                                            {% else %}
                                                <div style="margin-top: 10px;margin-bottom: 10px">
                                                    <span style="color: chocolate;font-weight: bold;font-size: 20px;">Currently using a flat charge</span>
                                                </div>
                                            {% endif %}
                                            <table class="table dt-responsive nowrap w-100">
                                                <thead>
                                                <tr>
                                                    <th>S/N</th>
                                                    <th>Minimum</th>
                                                    <th>Maximum</th>
                                                    <th>Charge</th>
                                                    <th>Charge measure</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody id="types_table_rows">
                                                {% for charge in transactions_charges %}
                                                    {% if charge.account_type == acc_type and charge.charge_type == 't' %}
                                                        {% if charge.charge_type == 't' %}
                                                            <tr>
                                                                <td>{{ forloop.counter }}</td>
                                                                <td>{{ charge.start }}</td>
                                                                <td>{{ charge.end }}</td>
                                                                <td>{{ charge.charge }}</td>
                                                                {% if charge.is_charge_percentage %}
                                                                    <td>Percentage</td>
                                                                {% else %}
                                                                    <td>Amount</td>
                                                                {% endif %}
                                                                <td>
                                                                    <button type="button" class="btn btn-info mr-3"
                                                                            onclick="setEditData({{ charge.id }})">Edit
                                                                    </button>
                                                                    <a href="{% url 'delete_transaction_charge' charge.id %}">
                                                                        <button type="button"
                                                                                class="btn btn-danger mr-3">
                                                                            Delete
                                                                        </button>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

{% endblock %}