{% extends 'extends/layout.html' %}
{% load static %}
{% load countries %}

{% block content %}
    {% get_countries as countries %}
    {% block styles %}
        <link rel="stylesheet" href="{% static 'flags/sprite.css' %}">

    {% endblock %}
    {% 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-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" {% if charge.is_revenue == 'YES' %}selected{% endif %}>Yes</option>
                                <option value="NO" {% if charge.is_revenue == 'NO' %}selected{% endif %}>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" value="{{ charge.charge }}" 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" {% if charge.application == 'l' %}selected{% endif %}>On Loan application</option>
                                    <option value="r" {% if charge.application == 'r' %}selected{% endif %}>On Registration</option>
                                    {% if request.user.staff.biodata.business.has_shares == 1 %}
                                        <option value="s" {% if charge.application == 's' %}selected{% endif %}>On Shares</option>
                                    {% endif %}
                                    <option value="o" {% if charge.application == 'o' %}selected{% endif %}>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="loan_type" multiple
                                        id="edit_select_loan_type_multiple">
                                    {% for loan_type in loan_types %}
                                        <option value='{{ loan_type.id }}' {% if loan_type.id in applications %}selected{% endif %}>{{ 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="is_percentage" onchange="onChangeAmtPercentageEdit()">
                                    <option value="" selected disabled>select amount/percentage</option>
                                    <option value="a" {% if charge.is_percentage == False %}selected{% endif %}>Use amount</option>
                                    <option value="p" {% if charge.is_percentage == True %}selected{% endif %}>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="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="is_fine">
                                    <option value="" selected disabled>Select sum</option>
                                    <option value="f" {% if charge.is_fine == True %}selected{% endif %}>Its a fine</option>
                                    <option value="n"> {% if charge.is_fine == False %}selected{% endif %}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="execution_period_number"
                                       placeholder="Period number" value='{{ charge.execution_period_number }}' 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" {% if charge.is_percentage == False %}selected{% endif %}>Use amount</option>
                                    <option value="p" {% if charge.is_percentage == True %}selected{% endif %}>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='{{ charge.amount|default_if_none:0 }}' min="0"  required>
                            </div>
                        </div>
                    <button type="submit" class="btn-dark btn-sm btn">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- End col -->

        <!-- End col -->
    </div>
{% endblock %}