{% extends 'super_admin_templates/base.html' %}
{% set path = "patterns_configuarations" %}
{% set subpath = "commissions" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<script>
    // Attach event listener for payment change
    $('#paymentModeId').change(function() {
        var paymentModeId = $(this).val();
        if (paymentModeId) {
            getPaymentModes(paymentModeId, 'add', '');
        } else {
            $('#subPaymentModeIdadd').html("<option value=''>Select Sub Payment Mode</option>");
            alert('Please select a payment mode.');
        }
    });

    // Function to get services based on category
    function getPaymentModes(paymentModeId, variablev, selectedid) {
        $.ajax({
            url: "{{url_for('patterns_configuarations.sub_payment_based_payment_modes_list')}}",
            data: { "paymentModeId": paymentModeId },
            dataType: "json",
            type: "post",
            success: function(resultdata) {
                if (resultdata.responseStatus == 1) {
                    var htmldata = "<option value=''>Select Sub Payment Mode</option>";
                    $.each(resultdata.subPaymentsModeList, function(key, value) {
                        var selected = (selectedid != "" && selectedid == value.id) ? 'selected' : '';
                        htmldata += "<option value='" + value.id + "' " + selected + ">" + value.subPaymentModeType + "</option>";
                    });
                    $('#subPaymentModeId' + variablev).html(htmldata);
                } else {
                    $('#subPaymentModeId' + variablev).html("<option value=''>Select Sub Payment Mode</option>");
                }
            },
            error: function() {
                $('#subPaymentModeId' + variablev).html("<option value=''>Select Sub Payment Mode</option>");
                alert('Failed to retrieve sub payment modes.');
            }
        });
    }

</script>

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Setup Charge Commissions</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Setup Charge Commissions List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Setup Charge Commissions List
                        </div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('chargeCommissionsPermissions', []) %}
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Slab
                              </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="POST" action="{{ url_for('patterns_configuarations.get_setup_charge_commissions_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput"
                                            placeholder="Search...">
                                    </div>
                                    
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                            <!-- Add some space -->
                            <div class="mt-3"></div>
                            <!-- End space -->
                            <div class="table-responsive">
                                <table id="datatable-basic" class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Slab</th>
                                        <th scope="col">Payment Mode</th>
                                        <th scope="col">Sub Payment Mode</th>
                                        <th scope="col">API</th>
                                        <th scope="col">Charges</th>
                                        <th scope="col">GST</th>
                                        <th scope="col">TDS</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for each_setup_charge_commission in commissionsList %}
                                    <tr>
                                        <td>{{loop.index}}</td>
                                        <td>{{each_setup_charge_commission.slabName}}</td>
                                        <td>{{each_setup_charge_commission.paymentModeName}}</td>
                                        <td>{{each_setup_charge_commission.subPaymentModeName}}</td>
                                        <td>{{each_setup_charge_commission.transactionAPIName}}</td>
                                        {% if each_setup_charge_commission.chargeType == "PERCENTAGE" %}
                                            <td>{{each_setup_charge_commission.chargeValue}}%</td>
                                        {% else %}
                                            <td>{{each_setup_charge_commission.chargeValue}}</td>
                                        {% endif %}
                                        <td>{{each_setup_charge_commission.gstValue}}</td>
                                        <td>{{each_setup_charge_commission.tdsValue}}</td>

                                        {% if 'edit' in session.get('chargeCommissionsPermissions', []) %}
                                            <td>
                                                {% if each_setup_charge_commission.actionText == "Active" %}
                                                    <a class="btn btn-sm btn-success-light" href="{{ url_for('patterns_configuarations.update_setup_charge_commission_status', commissionId=each_setup_charge_commission.id) }}">{{each_setup_charge_commission.actionText}}</a>
                                                {% else %}
                                                    <a class="btn btn-sm btn-warning-light" href="{{ url_for('patterns_configuarations.update_setup_charge_commission_status', commissionId=each_setup_charge_commission.id) }}">{{each_setup_charge_commission.actionText}}</a>
                                                {% endif %}
                                            </td>
                                        {% endif %}

                                        {% if 'edit' in session.get('chargeCommissionsPermissions', []) %}
                                            <td>
                                                <a class="btn btn-icon btn-sm btn-info-transparent rounded-pill" href="{{ url_for('patterns_configuarations.update_setup_charge_commission',commissionId=each_setup_charge_commission.id) }}"><i class="ri-edit-line"></i></a>
                                            </td>
                                        {% endif %}
                                    </tr>
                                    {% endfor %}
                                </tbody>
                                {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                <ul class="flashes">
                                    {% for message in messages %}
                                    <h2>
                                        <b>
                                            <center style="color:green">{{ message }}</center>
                                        </b>
                                    </h2>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% endwith %}
                                </table>
                            </div>

                            <!-- Add some space -->
                            <!-- <div class="col-sm-12 col-md-5 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                  <ul class="pagination mb-0">
                                      <li class="page-item disabled">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-left-s-line align-middle"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                      <li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="bi bi-three-dots"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-right-s-line align-middle"></i>
                                          </a>
                                      </li>
                                  </ul>
                              </nav>
                            </div> -->
                            <!-- End space -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->
<style type="text/css">
.modal-lg{  
--bs-modal-width: 70%!important;
}
</style>
<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Slab</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" id="form_validation_id" action="{{ url_for('patterns_configuarations.add_setup_charge_commission') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <!-- Slab Name -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="slabName">Slab Name*</label>
                                <input type="text" class="form-control" id="slabName" name="slabName" placeholder="Enter Slab name" required>
                            </div>
                        </div>

                        <!-- Merchant Category -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="patternId">Merchant Category*</label>
                                <select class="form-control" name="patternId" id="patternId" required>
                                    <option value="">Select a category</option>
                                    {% for each_pattern in patternsList %}
                                        <option value="{{ each_pattern.id }}">{{ each_pattern.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Payment Mode -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="paymentModeId">Payment Mode*</label>
                                <select class="form-control" name="paymentModeId" id="paymentModeId" onchange="getPaymentModes(this.value,'add','')" required>
                                    <option value="">Select a payment mode</option>
                                    {% for each_payment_mode in paymentsModeList %}
                                        <option value="{{ each_payment_mode.id }}">{{ each_payment_mode.paymentMode }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Sub Payment Mode -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="subPaymentModeId">Sub Payment Mode*</label>
                                <select class="form-control" name="subPaymentModeId" id="subPaymentModeIdadd" required>
                                    <option value="">Select a sub payment mode</option>
                                </select>
                            </div>
                        </div>

                        <!-- API Name -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="transactionAPIId">API Name*</label>
                                <select class="form-control" name="transactionAPIId" id="transactionAPIId" required>
                                    <option value="">Select an API</option>
                                    {% for each_transaction_api in transactionAPIsList %}
                                        <option value="{{ each_transaction_api.id }}">{{ each_transaction_api.apiName }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <!-- Price Type -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="priceType">Price Type*</label>
                                <select class="form-control" id="priceType" name="priceType" onchange="togglePriceFields(this.value)" required>
                                    <option selected value="FIXED">FIXED</option>
                                    <option value="RANGE">RANGE</option>
                                </select>
                            </div>
                        </div>

                        <!-- Range Fields -->
                        <div id="rangeFields" class="col-md-12" style="display: none;">
                        <div class="table-responsive">
                            <table class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">Start Amount</th>
                                        <th scope="col">End Amount</th>
                                        <th scope="col">Aggregator Type</th>
                                        <th scope="col">Aggregator Value</th>
                                        <th scope="col">Charge Type</th>
                                        <th scope="col">Charge Value</th>
                                        <th scope="col">Commission Type</th>
                                        <th scope="col">Commission Value</th>
                                        <th scope="col">&nbsp;</th>
                                    </tr>
                                </thead>
                                <tbody id="addMoreSlabs">
                                    <tr>
                                        <td><input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="startAmount" name="startAmount[]" value="0" placeholder="Enter Start Amount"></td>
                                        <td><input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="endAmount" name="endAmount[]" value="0" placeholder="Enter End Amount"></td>
                                        <td>
                                            <select class="form-control" id="aggregatorType" name="aggregatorType[]">
                                                <option value="">Select</option>
                                                <option value="FLAT">FLAT</option>
                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" id="aggregatorValue" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="aggregatorValue[]" value="0" placeholder="Enter aggregator value"></td>
                                        <td>
                                            <select class="form-control" id="chargeType" name="chargeType[]">
                                                <option value="">Select</option>
                                                <option value="FLAT">FLAT</option>
                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" id="chargeValue" name="chargeValue[]" value="0" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter charge value"></td>
                                        <td>
                                            <select class="form-control" id="commissionType" name="commissionType[]">
                                                <option value="">Select</option>
                                                <option value="FLAT">FLAT</option>
                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                            </select>
                                        </td>
                                        <td><input type="text" class="form-control" id="commissionValue" name="commissionValue[]" value="0" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter commission value"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <div><button type="button" class="btn btn-primary-light btn-wave" onclick="addMoreSlabs()">Add +</button></div>
                        </div>
                        </div>

                        <!-- Fixed Fields -->
                        <div id="fixedFields">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="aggregatorType">Aggregator Type*</label>
                                    <select class="form-control" id="aggregatorType" name="aggregatorType">
                                        <option value="">Select</option>
                                        <option value="FLAT">FLAT</option>
                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="aggregatorValue">Aggregator Value*</label>
                                    <input type="text" class="form-control" id="aggregatorValue" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="aggregatorValue" value="0" placeholder="Enter aggregator value">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="chargeType">Charge Type*</label>
                                    <select class="form-control" id="chargeType" name="chargeType">
                                        <option value="">Select</option>
                                        <option value="FLAT">FLAT</option>
                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="chargeValue">Charge Value*</label>
                                    <input type="text" class="form-control" id="chargeValue" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="chargeValue" value="0" placeholder="Enter charge value">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="commissionType">Commission Type*</label>
                                    <select class="form-control" id="commissionType" name="commissionType">
                                        <option value="">Select</option>
                                        <option value="FLAT">FLAT</option>
                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="commissionValue">Commission Value*</label>
                                    <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" id="commissionValue" value="0" name="commissionValue" placeholder="Enter commission value">
                                </div>
                            </div>
                        </div>
                        </div>

                    
                        <!-- GST Include -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="gstInclude">GST Include*</label>
                                <select class="form-control" id="gstInclude" name="gstInclude">
                                    <option value="">Select</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                        <!-- GST Value Field, initially hidden -->
                            <div id="gstFields">
                                <div class="form-group">
                                    <label for="gstValue">GST%*</label>
                                    <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" id="gstValue" name="gstValue" value="0" placeholder="Enter GST Value">
                                </div>
                            </div>
                        </div>

 <!-- GST Include -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="aggregatorGstInclude">Aggregator GST Include*</label>
                                <select class="form-control" id="aggregatorGstInclude" name="aggregatorGstInclude">
                                    <option value="">Select</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                        <!-- GST Value Field, initially hidden -->
                            <div id="gstFields">
                                <div class="form-group">
                                    <label for="aggregatorGstValue">Aggregator GST%*</label>
                                    <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" id="aggregatorGstValue" name="aggregatorGstValue" value="0" placeholder="Enter GST Value">
                                </div>
                            </div>
                        </div>


                        <!-- TDS Include -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tdsInclude">TDS Include*</label>
                                <select class="form-control" id="tdsInclude" name="tdsInclude">
                                    <option value="">Select</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>
                            </div>
                        </div>

                        <!-- TDS Value -->
                        <div class="col-md-6">
                            <div id="tdsFields" >
                                <div class="form-group">
                                    <label for="tdsValue">TDS*</label>
                                    <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="tdsValue" name="tdsValue" value="0" placeholder="Enter TDS Value">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Footer -->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- End Create New Bank Modal -->

<!-- {% for each_setup_charge_commission in commissionsList %} -->
<!-- Update Bank Modal -->
<!-- <div class="modal fade" id="updateTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Slab</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{url_for('patterns_configuarations.update_setup_charge_commission',commissionId=each_setup_charge_commission.id)}}" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                        <div class="form-group">
                          <label for="slabName">Slab Name*</label>
                          <input type="text" class="form-control" id="slabName" name="slabName" value="{{each_setup_charge_commission.slabName}}" required>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="patternId">Pattern Name*</label>
                          <select class="form-control" name="patternId" id="patternId" required>
                            <option value="">Select a pattern</option>
                            {%for each_pattern in patternsList%}
                              {% if each_pattern.id == each_setup_charge_commission.patternId %}
                                <option selected value="{{each_pattern.id}}">{{each_pattern.name}}</option>
                              {% else %}
                                <option value="{{each_pattern.id}}">{{each_pattern.name}}</option>
                              {% endif %}
                            {%endfor%}
                          </select>                                        
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="paymentModeId">Payment Mode*</label>
                          <select class="form-control" name="paymentModeId" id="paymentModeId" onChange="getPaymentModes(this.value,{{loop.index}},'')" required>
                            <option value="">Select a payment mode</option>
                            {%for each_payment_mode in paymentsModeList%}
                              {%if each_payment_mode.id == each_setup_charge_commission.paymentModeId%}
                              <option selected value="{{each_payment_mode.id}}">{{each_payment_mode.paymentMode}}</option>
                              {%else%}
                              <option value="{{each_payment_mode.id}}">{{each_payment_mode.paymentMode}}</option>
                              {%endif%}
                            {%endfor%}
                          </select>                                        
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="subPaymentModeId">Sub Payment Mode*</label>
                          <select class="form-control" name="subPaymentModeId" id="subPaymentModeId" required>
                            <option value="">Select a sub payment mode</option>
                            {%for each_sub_payment_mode in subPaymentsModeList%}
                              {%if each_sub_payment_mode.id == each_setup_charge_commission.subPaymentModeId%}
                              <option selected value="{{each_sub_payment_mode.id}}">{{each_sub_payment_mode.subPaymentModeType}}</option>
                              {%else%}
                              <option value="{{each_sub_payment_mode.id}}">{{each_sub_payment_mode.subPaymentModeType}}</option>
                              {%endif%}
                            {%endfor%}
                          </select>                                        
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group">
                          <label for="transactionAPIId">API Name*</label>
                          <select class="form-control" name="transactionAPIId" id="transactionAPIId" required>
                            <option value="">Select a API</option>
                            {%for each_transaction_api in transactionAPIsList%}
                              {%if each_transaction_api.id == each_setup_charge_commission.transactionAPIId%}
                              <option selected value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                              {%else%}
                              <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                              {%endif%}
                            {%endfor%}
                          </select>                                        
                        </div>
                      </div>

                      

                      <div class="col-md-12">
                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                      </div>
                    </div>
                </div>
                  </form>
            </div>
        </div>
    </div>
</div> -->
<!-- End Update Bank Modal-->
<!-- {% endfor %}   -->


<script>
    function togglePriceFields(priceType) {
        if (priceType === 'RANGE') {
            document.getElementById('rangeFields').style.display = 'block';
            document.getElementById('fixedFields').style.display = 'none';
        } else{
            document.getElementById('rangeFields').style.display = 'none';
            document.getElementById('fixedFields').style.display = 'block';
        }
    }
</script>


<script>
    function toggleGSTFields(gstInclude) {
        if (gstInclude === 'No') {
            document.getElementById('gstFields').style.display = 'block';
        } else {
            document.getElementById('gstFields').style.display = 'none';
        }
    }
</script>


<script>
    function toggleTDSFields(tdsInclude) {
        if (tdsInclude === 'No') {
            document.getElementById('tdsFields').style.display = 'block';
        } else {
            document.getElementById('tdsFields').style.display = 'none';
        }
    }
</script>


<script>
function addMoreSlabs() {
 $('#addMoreSlabs').append('<tr class=""><td><input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="startAmount" name="startAmount[]" placeholder="Enter Start Amount" required></td><td><input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="endAmount" name="endAmount[]" placeholder="Enter End Amount" required></td><td><select class="form-control" id="aggregatorType" name="aggregatorType[]"><option value="">Select an aggregator type</option><option value="FLAT">FLAT</option><option value="PERCENTAGE">PERCENTAGE</option></select></td><td><input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" id="aggregatorValue" name="aggregatorValue[]" placeholder="Enter aggregator value" required></td><td><select class="form-control" id="chargeType" name="chargeType[]"><option value="">Select a charge type</option><option value="FLAT">FLAT</option><option value="PERCENTAGE">PERCENTAGE</option></select></td><td><input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="chargeValue" name="chargeValue[]" placeholder="Enter charge value" required></td><td><select class="form-control" id="commissionType" name="commissionType[]"><option value="">Select a commission type</option><option value="FLAT">FLAT</option><option value="PERCENTAGE">PERCENTAGE</option></select></td><td><input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" id="commissionValue" name="commissionValue[]" placeholder="Enter commission value" required></td><td><button class="btn btn-primary-light removetr" type="button" onclick="removeInputField(this)">Remove</button></td></tr>');  
}

$("#addMoreSlabs").on("click", ".removetr", function() {
   $(this).closest("tr").remove();
});
</script>

{% endblock %}