{% extends 'super_admin_templates/base.html' %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<!-- 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">Update Slab</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"><a href="{{ url_for('patterns_configuarations.get_setup_charge_commissions_list') }}">Slab List</a></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">
                        <div class="card-title">
                            Update Slab Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <form method="POST" name="merchant_registration" id="form_validation_id" action="{{url_for('patterns_configuarations.update_setup_charge_commission',commissionId=setup_charge_commission_dict.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="{{setup_charge_commission_dict.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 == setup_charge_commission_dict.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,{{setup_charge_commission_dict.id}},'')" required>
                                        <option value="">Select a payment mode</option>
                                        {%for each_payment_mode in paymentsModeList%}
                                          {%if each_payment_mode.id == setup_charge_commission_dict.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 == setup_charge_commission_dict.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 == setup_charge_commission_dict.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>

                                  <!-- 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)">
                                                {% if setup_charge_commission_dict.priceType == "FIXED" %}
                                                    <option value="FIXED" selected>FIXED</option>
                                                {% else %}
                                                    <option value="FIXED">FIXED</option>
                                                {% endif %}

                                                {% if setup_charge_commission_dict.priceType == "RANGE" %}
                                                    <option value="RANGE" selected>RANGE</option>
                                                {% else %}
                                                    <option value="RANGE">RANGE</option>
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Range Fields -->
                                    {% if setup_charge_commission_dict.priceType == "RANGE" %}
                                    <div id="rangeFields" class="col-md-12" style="display: block;">
                                        {% else %}
                                        <div id="rangeFields" class="col-md-12" style="display: none;">
                                         {% endif %}
                                    <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">
                                                {% for each_slab in setup_charge_commission_dict.priceRangeList %}
                                                <tr>
                                                    
                                                    <td><input type="text" class="form-control" id="startAmount" name="startAmount[]" value="{{each_slab.startAmount}}" placeholder="Enter Start Amount" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"></td>
                                                    <td><input type="text" class="form-control" id="endAmount" name="endAmount[]" value="{{each_slab.endAmount}}" placeholder="Enter End Amount" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"></td>
                                                    <td>
                                                        <select class="form-control" id="aggregatorType" name="aggregatorType[]">
                                                            <option value="">Select</option>
                                                            {% if each_slab.aggregatorType == "FLAT" %}
                                                                <option value="FLAT" selected>FLAT</option>
                                                            {% else %}
                                                                <option value="FLAT">FLAT</option>
                                                            {% endif %}

                                                            {% if each_slab.aggregatorType == "PERCENTAGE" %}
                                                                <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                            {% else %}
                                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                                            {% endif %}
                                                        </select>
                                                    </td>
                                                    <td>
                                                        {% if each_slab.aggregatorValue >0 %}
                                                        <input type="text" class="form-control" id="aggregatorValue" name="aggregatorValue[]" value="{{each_slab.aggregatorValue}}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter aggregator value">
                                                        {% else %}
                                                        <input type="text" class="form-control" id="aggregatorValue" name="aggregatorValue[]" value="0" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter aggregator value">
                                                        {% endif %}
                                                    </td>
                                                        
                                                    <td>
                                                        <select class="form-control" id="chargeType" name="chargeType[]">
                                                            <option value="">Select</option>
                                                            {% if each_slab.chargeType == "FLAT" %}
                                                                <option value="FLAT" selected>FLAT</option>
                                                            {% else %}
                                                                <option value="FLAT">FLAT</option>
                                                            {% endif %}

                                                            {% if each_slab.chargeType == "PERCENTAGE" %}
                                                                <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                            {% else %}
                                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                                            {% endif %}
                                                        </select>
                                                    </td>
                                                    <td><input type="text" class="form-control" id="chargeValue" name="chargeValue[]" value="{{each_slab.chargeValue}}" 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>
                                                            {% if each_slab.commissionType == "FLAT" %}
                                                                <option value="FLAT" selected>FLAT</option>
                                                            {% else %}
                                                                <option value="FLAT">FLAT</option>
                                                            {% endif %}

                                                            {% if each_slab.commissionType == "PERCENTAGE" %}
                                                                <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                            {% else %}
                                                                <option value="PERCENTAGE">PERCENTAGE</option>
                                                            {% endif %}
                                                        </select>
                                                    </td>
                                                    <td><input type="text" class="form-control" id="commissionValue" name="commissionValue[]" value="{{each_slab.commissionValue}}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter commission value"></td>
                                                    
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                        <div><button type="button" class="btn btn-primary-light btn-wave" onclick="addMoreSlabs()">Add +</button></div>
                                    </div>
                                    </div>

                                    <!-- Fixed Fields -->
                                     {% if setup_charge_commission_dict.priceType == "FIXED" %}
                                    <div id="fixedFields">
                                        {% else %}
                                    <div id="fixedFields" style="display: none;">
                                        {% endif %}
                                    <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">
                                                    {% if setup_charge_commission_dict.aggregatorType == "FLAT" %}
                                                        <option value="FLAT" selected>FLAT</option>
                                                    {% else %}
                                                        <option value="FLAT">FLAT</option>
                                                    {% endif %}

                                                    {% if setup_charge_commission_dict.aggregatorType == "PERCENTAGE" %}
                                                        <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                    {% else %}
                                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                                    {% endif %}
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="aggregatorValue">Aggregator Value*</label>
                                                {% if setup_charge_commission_dict.aggregatorValue %}
                                                    <input type="text" class="form-control" id="aggregatorValue" name="aggregatorValue" value="{{setup_charge_commission_dict.aggregatorValue}}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" placeholder="Enter aggregator value">
                                                {% else %}
                                                    <input type="text" class="form-control" id="aggregatorValue" name="aggregatorValue" value="0" placeholder="Enter aggregator value">
                                                {% endif %}
                                            </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">
                                                    {% if setup_charge_commission_dict.chargeType == "FLAT" %}
                                                        <option value="FLAT" selected>FLAT</option>
                                                    {% else %}
                                                        <option value="FLAT">FLAT</option>
                                                    {% endif %}

                                                    {% if setup_charge_commission_dict.chargeType == "PERCENTAGE" %}
                                                        <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                    {% else %}
                                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                                    {% endif %}
                                                </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" name="chargeValue" value="{{setup_charge_commission_dict.chargeValue}}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" 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">
                                                    {% if setup_charge_commission_dict.commissionType == "FLAT" %}
                                                        <option value="FLAT" selected>FLAT</option>
                                                    {% else %}
                                                        <option value="FLAT">FLAT</option>
                                                    {% endif %}

                                                    {% if setup_charge_commission_dict.commissionType == "PERCENTAGE" %}
                                                        <option value="PERCENTAGE" selected>PERCENTAGE</option>
                                                    {% else %}
                                                        <option value="PERCENTAGE">PERCENTAGE</option>
                                                    {% endif %}
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="commissionValue">Commission Value*</label>
                                                <input type="text" class="form-control" id="commissionValue" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="please enter valid format." value="{{setup_charge_commission_dict.commissionValue}}" 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">
                                                {% if setup_charge_commission_dict.gstInclude == "Yes" %}
                                                    <option value="Yes" selected>Yes</option>
                                                {% else %}
                                                    <option value="Yes">Yes</option>
                                                {% endif %}

                                                {% if setup_charge_commission_dict.gstInclude == "No" %}
                                                    <option value="No" selected>No</option>
                                                {% else %}
                                                    <option value="No">No</option>
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>

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

 
 <!-- GST Include -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="gstInclude">Aggregator GST Include*</label>
                                            <select class="form-control" id="aggregatorGstInclude" name="aggregatorGstInclude">
                                                {% if setup_charge_commission_dict.aggregatorGstInclude == "Yes" %}
                                                    <option value="Yes" selected>Yes</option>
                                                {% else %}
                                                    <option value="Yes">Yes</option>
                                                {% endif %}

                                                {% if setup_charge_commission_dict.aggregatorGstInclude == "No" %}
                                                    <option value="No" selected>No</option>
                                                {% else %}
                                                    <option value="No">No</option>
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                    <!-- GST Value Field, initially hidden -->
                                        {% if setup_charge_commission_dict.aggregatorGstInclude == "Yes" %}
                                        <div id="gstFields">
                                        {% else %}
                                        <div id="gstFields">
                                        {% endif %}
                                            <div class="form-group">
                                                <label for="aggregatorGstValue">Aggregator GST%*</label>
                                                <input type="text" class="form-control" id="aggregatorGstValue" name="aggregatorGstValue" value="{{setup_charge_commission_dict.aggregatorGstValue}}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" 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">
                                                {% if setup_charge_commission_dict.tdsInclude == "Yes" %}
                                                    <option value="Yes" selected>Yes</option>
                                                {% else %}
                                                    <option value="Yes">Yes</option>
                                                {% endif %}

                                                {% if setup_charge_commission_dict.tdsInclude == "No" %}
                                                    <option value="No" selected>No</option>
                                                {% else %}
                                                    <option value="No">No</option>
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>

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

                                  <div class="col-md-12">
                                    <div class="modal-footer justify-content-between">
                                      <button type="submit" class="btn btn-primary">Update</button>
                                    </div>
                                  </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-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>

<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</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="aggregatorValue" name="aggregatorValue[]" placeholder="Enter aggregator value" required></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" 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</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="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 %}