{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl }}'
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_transaction_charges_settings.js' %}"></script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">

                <div class="card-header">
                    <div class="row">
                        <div class="col-6">
                            <input type="text" class="form-control" id="search_acc"
                                   onkeyup="doSearch()" name="" placeholder="Search for saving product">
                        </div>
                        <div class="col-6">
                        </div>
                    </div>
                </div>


                {#                            ################## Edit modal start #######################################}

                <div class="card-body">
                    <div class="spinner-border text-danger" role="status" id="submittingRegistration"
                         style="display:none;margin-top: 10px">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <table class="table dt-responsive nowrap w-100">
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Saving product</th>
                            <th>Account type</th>
                            <th>Charges on Depositing</th>
                            <th>Charges on Withdrawing</th>
                            <th>Charges on Transferring</th>
                        </tr>
                        </thead>
                        <tbody id="types_table_rows">
                        {% for acc_type in accountTypesObj %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ acc_type.name }}</td>
                                {% if acc_type.is_fixed %}
                                    <td>Fixed</td>
                                {% else %}
                                    <td>Standard</td>
                                {% endif %}
                                <td>
                                {% if 'add_transaction_charges' in user_perms %}
                                    <!-- Bool Switch-->
                                    <input type="checkbox" id="customSwitch1{{ acc_type.id }}"
                                           onchange="onchangeSwitch({{ acc_type.id }}, 'd')"
                                           {% if acc_type.deposit_charge %}checked{% endif %} data-switch="bool"/>
                                    <label for="customSwitch1{{ acc_type.id }}" data-on-label="On"
                                           data-off-label="Off"></label>
                                {% endif %}
                                </td>
                                <td>
                                {% if 'add_transaction_charges' in user_perms %}
                                 <!-- Bool Switch-->
                                    <input type="checkbox" id="customSwitch2{{ acc_type.id }}"
                                           onchange="onchangeSwitch({{ acc_type.id }}, 'w')"
                                           {% if acc_type.withdraw_charge %}checked{% endif %} data-switch="bool"/>
                                    <label for="customSwitch2{{ acc_type.id }}" data-on-label="On"
                                           data-off-label="Off"></label>
                                {% endif %}
                                </td>
                                <td>
                                {% if 'add_transaction_charges' in user_perms %}
                                <!-- Bool Switch-->
                                    <input type="checkbox" id="customSwitch3{{ acc_type.id }}"
                                           onchange="onchangeSwitch({{ acc_type.id }}, 't')"
                                           {% if acc_type.transfer_charge %}checked{% endif %} data-switch="bool"/>
                                    <label for="customSwitch3{{ acc_type.id }}" data-on-label="On"
                                           data-off-label="Off"></label>
                                {% endif %}
                                </td>
                            </tr>

                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>

{% endblock %}