{% extends 'extends/layout.html' %}
{% load static %}
{% load humanize %}
{% block content %}
    {% block scripts %}
        <script>
            var global_state = {
                baseUrl: '{{ baseUrl|safe }}',
                generalChargesJson: '{{ generalChargesJson|safe }}',
                applicationTypesJson: '{{ applicationTypesJson|safe }}',
            }
        </script>
        <script src="{% static 'sacco/assets/custom_js/custom_general_charges.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_charge"
                                   onkeyup="doSearch()" name="" placeholder="Search for charge">
                        </div>
                        {% if 'add_general_charges' in user_perms %}
                            <div class="col-6 d-flex justify-content-end">
                                <button type="button" data-bs-toggle="modal" data-bs-target="#addCharge"
                                        class="btn btn-primary pull-right mr-3" onclick="clearAdditionForm()"><i
                                        class="feather icon-plus mr-2"></i>Add new charge
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% if 'add_general_charges' in user_perms %}
                <div class="modal fade bd-example-modal-lg" id="addCharge" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">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 %}
                                <div class="mb-2" id="rev_type">
                                    <label class="form-label" for="is_revenue">
                                        Is it a revenue
                                    </label>
                                    <select name="is_revenue" id="is_revenue" class="form-control">
                                        <option value="">Please Select option</option>
                                        <option value="YES">Yes</option>
                                        <option value="NO">No</option>
                                    </select>
                                </div>
                                    <div class="form-group">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Charge name*</label>
                                            <input type="text" class="form-control"
                                                   id="charge_name" name="name" placeholder="Charge name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Application*</label>
                                            <select class="form-control" id="select_application"
                                                    name="application" onchange="onChangeApplication()">
                                                <option value="" selected disabled>select application</option>
                                                <option value="l">On Loan disbursement</option>
                                                <option value="r">On Registration</option>
                                                {% if request.user.staff.biodata.business.has_shares == 1 %}
                                                    <option value="s">On Shares</option>
                                                {% endif %}
                                                <option value="o">Others</option>
                                            </select>
                                        </div>
                                    </div>
                                    {#                                        Show only if loans are selected#}
                                    {#                                        +++++++++++++++++++++++++ loan extra +++++++++++++++++++++++++++++++++++#}
                                    <div class="form-group" id="loan_type_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="select_loan_type_multiple">Loan
                                                types* </label>
                                            <select class="chosen-select" tabindex="4" id="select_loan_type_multiple"
                                                    data-placeholder="Choose loan product ..."
                                                    name="states[]" multiple>
                                                <option value=""></option>
                                                {% for loan_type in loan_types %}
                                                    <option value={{ loan_type.id }}>{{ loan_type.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="loan_percentage_amount_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Percentage/Amount* </label>
                                            <select class="form-control" id="amt_percentage"
                                                    name="amt_percentage" onchange="onChangeAmtPercentage()">
                                                <option value="" selected disabled>select amount/percentage</option>
                                                <option value="a">Use amount</option>
                                                <option value="p">Use percentage</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="loan_percentage" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Percentage*</label>
                                            <input type="number" class="form-control"
                                                   id="the_loan_percentage" name="loan_percentage"
                                                   placeholder="Percentage" value='0' min="0" max="100" required>
                                        </div>
                                    </div>
                                    {#                                        ++++++++++++++++++++++++++++++ end loan +++++++++++++++++++++++++++++#}
                                    {#                                        +++++++++++++++++++++++++++++++++ registration extra  ++++++++++++++++++++++++++#}
                                    <div class="form-group" id="reg_type_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Saving
                                                products*</label>
                                            <div class="border border-primary">
                                                <select class="chosen-select" tabindex="4"
                                                        data-placeholder="Choose saving product ..."
                                                        name="states2[]" multiple
                                                        id="account_type_multiple_select">
                                                    <option value=""></option>
                                                    {% for acc_type in account_types %}
                                                        <option value={{ acc_type.id }}>{{ acc_type.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    {#                                        ++++++++++++++++++++++++++++++++++ end reg extra +++++++++++++++++++++++++++++++++++#}

                                    {#                                        +++++++++++++++++++++++++++++++++ other extra  ++++++++++++++++++++++++++#}
                                    <div class="form-group" id="where_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Where to be
                                                applied* </label>
                                            <select class="form-control" id="where_select_other"
                                                    name="where_select" onchange="onChangeWhere()">
                                                <option value="" selected disabled>select where to be applied</option>
                                                <option value="l">Loans</option>
                                                <option value="s">Saving products</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="where_saving_products_type_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Saving
                                                products*</label>
                                            <div class="border border-primary">
                                                <select class="chosen-select" tabindex="4"
                                                        data-placeholder="Choose saving product ..."
                                                        name="states3[]" multiple
                                                        id="where_saving_products_type">
                                                    <option value=""></option>
                                                    {% for acc_type in account_types %}
                                                        <option value={{ acc_type.id }}>{{ acc_type.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group" id="where_loan_types_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Loan
                                                types*</label>
                                            <select class="chosen-select" tabindex="4"
                                                    data-placeholder="Choose saving product ..."
                                                    name="states4[]" multiple id="where_loan_types">
                                                {% for loan_type in loan_types %}
                                                    <option value={{ loan_type.id }}>{{ loan_type.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="is_it_fine_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Is it a fine to be
                                                applied on loan
                                                mishandling ?* </label>
                                            <select class="form-control" id="is_it_fine"
                                                    name="is_it_fine">
                                                <option value="" selected disabled>Select sumn</option>
                                                <option value="f">Its a fine</option>
                                                <option value="n">Just a normal charge</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="execution_period_select_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Interval
                                                type*</label>
                                            <select class="form-control"
                                                    id="execution_period_select" name="execution_period_select">
                                                <option value="" selected disabled>select the interval type</option>
                                                <option value="d">Daily</option>
                                                <option value="w">Weekly</option>
                                                <option value="m">Monthly</option>
                                                <option value="y">Yearly</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="execution_period_number_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Interval*</label>
                                            <input type="number" class="form-control"
                                                   id="execution_period_number" name="execution_period_number"
                                                   placeholder="Period number" value='1' min="1" required>
                                        </div>
                                    </div>
                                    <div class="form-group" id="others_loan_percentage_amount_div"
                                         style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Percentage/Amount* </label>
                                            <select class="form-control" id="other_amt_percentage"
                                                    name="others_amt_percentage"
                                                    onchange="onSelectOtherAmtPercentage()">
                                                <option value="" selected disabled>select amount/percentage</option>
                                                <option value="a">Use amount</option>
                                                <option value="p">Use percentage</option>
                                            </select>
                                        </div>
                                    </div>
                                    {#                                        ++++++++++++++++++++++++++++++++++ end other extra +++++++++++++++++++++++++++++++++++#}
                                    <div class="form-group" id="amt_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name" id="amount_label">Amount*</label>
                                            <input type="text" data-type="currency"
                                                   class="form-control" id="final_amt"
                                                   name="amount" placeholder="Amount" value='0' min="0" required>
                                        </div>
                                    </div>
                                </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 new 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>
            {% endif %}


                {#                            ################## Edit modal start #######################################}
            {% if 'add_general_charges' in user_perms %}
                <div class="modal fade" id="editCharge" 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 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 %}
                                <div class="form-group">
                                    <label class="form-label" for="edit_is_revenue">
                                        Is it a revenue
                                    </label>
                                    <select name="is_revenue" id="edit_is_revenue" class="form-control">
                                        <option value="">Please Select option</option>
                                        <option value="YES">Yes</option>
                                        <option value="NO">No</option>
                                    </select>
                                </div>
                                    <div class="form-group">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Charge name*</label>
                                            <input type="text" class="form-control"
                                                   id="edit_charge_name" name="name" placeholder="Charge name" required>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Application*</label>
                                            <select class="form-control"
                                                    id="edit_select_application" name="application"
                                                    onchange="onChangeApplicationEdit()">
                                                <option value="" selected disabled>select application</option>
                                                <option value="l">On Loan application</option>
                                                <option value="r">On Registration</option>
                                                {% if request.user.staff.biodata.business.has_shares == 1 %}
                                                    <option value="s">On Shares</option>
                                                {% endif %}
                                                <option value="o">Others</option>
                                            </select>
                                        </div>
                                    </div>
                                    {#                                        Show only if loans are selected#}
                                    {#                                        +++++++++++++++++++++++++ loan extra +++++++++++++++++++++++++++++++++++#}
                                    <div class="form-group" id="edit_loan_type_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Loan type*</label>

                                            <select class="chosen-select" tabindex="4"
                                                    data-placeholder="Choose saving product ..."
                                                    name="statesL12[]" multiple
                                                    id="edit_select_loan_type_multiple">
                                                {% for loan_type in loan_types %}
                                                    <option value={{ loan_type.id }}>{{ loan_type.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group" id="edit_loan_percentage_amount_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Percentage/Amount* </label>
                                            <select class="form-control" id="edit_amt_percentage"
                                                    name="edit_amt_percentage" onchange="onChangeAmtPercentageEdit()">
                                                <option value="" selected disabled>select amount/percentage</option>
                                                <option value="a">Use amount</option>
                                                <option value="p">Use percentage</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group" id="edit_loan_percentage" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Percentage*</label>
                                            <input type="number" class="form-control"
                                                   id="edit_the_loan_percentage" name="loan_percentage"
                                                   placeholder="Percentage" value='0' min="0" max="100" required>
                                        </div>
                                    </div>


                                    {#                                        ++++++++++++++++++++++++++++++ end loan +++++++++++++++++++++++++++++#}
                                    {#                                        +++++++++++++++++++++++++++++++++ registration extra  ++++++++++++++++++++++++++#}
                                    <div class="form-group" id="edit_reg_type_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="edit_account_type_multiple_select">Saving
                                                product*</label>
                                            <select class="chosen-select" tabindex="4"
                                                    data-placeholder="Choose saving product ..."
                                                    name="states21R[]" multiple
                                                    id="edit_account_type_multiple_select">
                                                {% for acc_type in account_types %}
                                                    <option value={{ acc_type.id }}>{{ acc_type.name }}</option>
                                                {% endfor %}

                                            </select>
                                        </div>
                                    </div>
                                    {#                                        ++++++++++++++++++++++++++++++++++ end reg extra +++++++++++++++++++++++++++++++++++#}

                                    {#                                        +++++++++++++++++++++++++++++++++ other extra  ++++++++++++++++++++++++++#}
                                    <div class="form-group" id="edit_where_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Where to be
                                                applied* </label>
                                            <select class="form-control"
                                                    id="edit_where_select_other" name="edit_where_select"
                                                    onchange="onChangeWhereEdit()">
                                                <option value="" selected disabled>select where to be applied</option>
                                                <option value="l">Loans</option>
                                                <option value="s">Saving products</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group" id="edit_where_saving_products_type_div"
                                         style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Saving
                                                products*</label>
                                            <select class="chosen-select" tabindex="4"
                                                    data-placeholder="Choose saving product ..."
                                                    name="states3[]" multiple
                                                    id="edit_where_saving_products_type">
                                                {% for acc_type in account_types %}
                                                    <option value={{ acc_type.id }}>{{ acc_type.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="edit_where_loan_types_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Loan
                                                types*</label>
                                            <select class="chosen-select" tabindex="4"
                                                    data-placeholder="Choose saving product ..."
                                                    name="states4[]" multiple="multiple" id="edit_where_loan_types">
                                                {% for loan_type in loan_types %}
                                                    <option value={{ loan_type.id }}>{{ loan_type.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group" id="edit_execution_period_select_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Interval
                                                type*</label>
                                            <select class="form-control"
                                                    id="edit_execution_period_select"
                                                    name="edit_execution_period_select">
                                                <option value="" selected disabled>select the execution period</option>
                                                <option value="d">Daily</option>
                                                <option value="w">Weekly</option>
                                                <option value="m">Monthly</option>
                                                <option value="y">Yearly</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group" id="edit_is_it_fine_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="exampleFormControlSelect1">Is it a fine to be
                                                applied on loan
                                                mishandling ?* </label>
                                            <select class="form-control" id="edit_is_it_fine"
                                                    name="edit_is_it_fine">
                                                <option value="" selected disabled>Select sumn</option>
                                                <option value="f">Its a fine</option>
                                                <option value="n">Just a normal charge</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group" id="edit_execution_period_number_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name">Interval*</label>
                                            <input type="number" class="form-control"
                                                   id="edit_execution_period_number" name="edit_execution_period_number"
                                                   placeholder="Period number" value='1' min="1" required>
                                        </div>
                                    </div>

                                    <div class="form-group" id="edit_others_loan_percentage_amount_div"
                                         style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label"
                                                   for="exampleFormControlSelect1">Percentage/Amount* </label>
                                            <select class="form-control"
                                                    id="edit_other_amt_percentage" name="others_amt_percentage"
                                                    onchange="onSelectOtherAmtPercentageOther()">
                                                <option value="" selected disabled>select amount/percentage</option>
                                                <option value="a">Use amount</option>
                                                <option value="p">Use percentage</option>
                                            </select>
                                        </div>
                                    </div>


                                    {#                                        ++++++++++++++++++++++++++++++++++ end other extra +++++++++++++++++++++++++++++++++++#}


                                    <div class="form-group" id="edit_amt_div" style="display: none">
                                        <div class="mb-2 col-md-12">
                                            <label class="form-label" for="name" id="edit_amount_label">Amount*</label>
                                            <input type="text" data-type="currency"
                                                   class="form-control" id="edit_final_amt"
                                                   name="amount" placeholder="Amount" value='0' min="0" required>
                                        </div>
                                    </div>


                                </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="modalAddButtonEdit"
                                            onclick="handleSubmitEdit()">Update charge
                                    </button>
                                    <div class="spinner-border text-danger" role="status" id="submittingEdit"
                                         style="display: none">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            {% endif %}
                <div class="card-body">
                    <div id="replaceBody">
                        <table class="table dt-responsive nowrap w-100">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Charge/Function</th>
                                <th>Application</th>
                                <th>Amount/Percentage</th>
                                <th>Measure</th>
                                <th>Interval</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody id="types_table_rows">
                            {% for charge in general_charges %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ charge.charge }}</td>
                                    {% if charge.application == 'l' %}
                                        <td>Loans</td>
                                    {% elif charge.application == 'r' %}
                                        <td>Registration</td>
                                    {% elif charge.application == 's' %}
                                        <td>Shares</td>
                                    {% elif charge.application == 'o' %}
                                        <td>Others</td>
                                    {% endif %}



                                    <td>{{ charge.amount | intcomma }}</td>
                                    {% if charge.is_percentage %}
                                        <td>Percentage</td>
                                    {% else %}
                                        <td>Amount</td>
                                    {% endif %}



                                    {% if charge.execution_period == 'd' %}
                                        <td>After every {{ charge.execution_period_number }}
                                            {% if charge.execution_period_number == 1 %}day{% else %}
                                                days{% endif %}</td>
                                    {% elif charge.execution_period == 'w' %}
                                        <td>After every {{ charge.execution_period_number }}
                                            {% if charge.execution_period_number == 1 %}week{% else %}
                                                weeks{% endif %}</td>
                                    {% elif charge.execution_period == 'm' %}
                                        <td>After every {{ charge.execution_period_number }}
                                            {% if charge.execution_period_number == 1 %}month{% else %}
                                                months{% endif %}</td>
                                    {% elif charge.execution_period == 'y' %}
                                        <td>After every {{ charge.execution_period_number }}
                                            {% if charge.execution_period_number == 1 %}year{% else %}
                                                years{% endif %}</td>
                                    {% else %}
                                        <td> --</td>
                                    {% endif %}



                                    <td>
                                    {% if 'add_general_charges' in user_perms %}
                                        <button type="button" class="btn btn-info btn-sm"
                                                onclick="setEditData('{{ charge.id }}','{{ charge.get_id }}', '{{ charge.is_revenue }}')">Edit
                                        </button>
                                    {% endif %}
                                    {% if 'deactivate_general_charges' in user_perms %}
                                        {% if charge.status %}
                                            <a href="{% url 'activate_or_deativate_charge' charge.id %}">
                                                <button type="button" class="btn btn-danger btn-sm">Deactivate</button>
                                            </a>
                                        {% else %}
                                            <a href="{% url 'activate_or_deativate_charge' charge.id %}">
                                                <button type="button" class="btn btn-success btn-sm">Activate</button>
                                            </a>
                                        {% endif %}
                                    {% endif %}

                                    </td>

                                </tr>

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

{% endblock %}