{% load humanize %}
<div class="accordion" id="accordionwithicon">
    {%  for acc_type in account_types %}
  <div class="card">
    <div class="card-header" id="heading{{ acc_type.id }}">
      <h2 class="mb-0">
        <button class="btn btn-link" onclick="onClickCollapseButton({{ acc_type.id }})" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ acc_type.id }}" aria-expanded="true" aria-controls="collapse{{ acc_type.id }}"><i class="fa fas fa-caret-down"></i> {{ acc_type.name }}</button>
      </h2>
    </div>
    <div id="collapse{{ acc_type.id }}" class={% if forloop.counter == 1 %}'collapse show'{% else %}'collapse'{% endif %}  aria-labelledby="heading{{ acc_type.id }}" data-parent="#accordionwithicon">
      <div class="card-body">
        {#                        +++++++++++++++++++++ start ++++++++++++++++++++++++++++#}
                <div class="row">
                    <div class="col-6">
                    </div>
                    <div class="col-6">
                        <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>
                </div>
                <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 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="display table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</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 %}
{#                                                            {% if acc_type.deposit_charge_vary %}#}
{#                                                                <td>Varrying</td>#}
{#                                                            {% else %}#}
{#                                                                <td>Flat</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>
                                    <tfoot>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</th>#}
                                            <th>Actions</th>
                                        </tr>
                                    </tfoot>
                                </table>
{#                                        </div>#}

                        </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 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="display table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</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 %}
{#                                                                {% if acc_type.withdraw_charge_vary %}#}
{#                                                                    <td>Varrying</td>#}
{#                                                                {% else %}#}
{#                                                                    <td>Flat</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>
                                    <tfoot>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</th>#}
                                            <th>Actions</th>
                                        </tr>
                                    </tfoot>
                                </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="display table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</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 %}
{#                                                                {% if acc_type.transfer_charge_vary %}#}
{#                                                                    <td>Varrying</td>#}
{#                                                                {% else %}#}
{#                                                                    <td>Flat</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>
                                    <tfoot>
                                        <tr>
                                            <th>S/N</th>
                                            <th>Minimum</th>
                                            <th>Maximum</th>
                                            <th>Charge</th>
                                            <th>Charge measure</th>
{#                                                        <th>Charge type</th>#}
                                            <th>Actions</th>
                                        </tr>
                                    </tfoot>
                                </table>
                        </div>
                    </div>
                </div>
{#                        ++++++++++++++++++++++ end +++++++++++++++++++++++++++++++++++#}
      </div>
    </div>



  </div>
    {% endfor %}

</div>