{% 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) {
        var csrfToken = $('input[name="csrf_token"]').val()
        $.ajax({
            url: "{{url_for('patterns_configuarations.sub_payment_based_payment_modes_list')}}",
            data: { "paymentModeId": paymentModeId ,"csrf_token":csrfToken},
            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.');
            }
        });
    }
    $('.readonly-dropdown').on('keydown', function (event) {
        event.preventDefault(); // Prevent keyboard interactions
    });

    // Prevent focus if needed
    $('.readonly-dropdown').on('focus', function (event) {
        $(this).blur(); // Remove focus if it somehow gets focused
    });

</script>

<style>
    .readonly-dropdown {
        pointer-events: none;
        /* Prevent interaction */
        background-color: #f5f5f5;
        /* Gray out */
        user-select: none;
        /* Prevent text selection */
        opacity: 0.6;
        /* Optional: visually indicate it's read-only */
    }
</style>

<!-- 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>
        {% 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 %}

        <!-- 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</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Start: Search Form Section -->
                            <form method="GET"
                                action="{{ url_for('patterns_configuarations.new_get_setup_charge_commissions_list') }}"
                                class="row gy-2 gx-3 align-items-center mb-4" id="searchForm">

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

                                <div class="col-md-6  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</option>
                                        {% for paymentMode in paymentsModeList %}
                                        {% if paymentModeId ==
                                        paymentMode.id %}
                                        <option value="{{ paymentMode.id }}" selected>
                                            {{ paymentMode.paymentMode }}
                                        </option>
                                        {% else %}
                                        <option value="{{ paymentMode.id }}">
                                            {{ paymentMode.paymentMode }}
                                        </option>
                                        {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>

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

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

                                <div class="col-auto">
                                    <button type="submit" class="btn btn-primary" name="action" value="search"
                                        onclick="showAdditionalFieldsAndSearch(event)">Search</button>
                                </div>

                            </form>
                        </div>

                        <!-- End: Search Form Section -->

                        <!-- Start: Submit Form Section -->
                        <form method="POST"
                            action="{{ url_for('patterns_configuarations.new_get_setup_charge_commissions_list') }}"
                            class="row gy-2 gx-3 align-items-center mb-4" id="submitForm"
                            style="display: {% if editable %} block {% else %} none {% endif %}">

                            <input type="hidden" name="patternId" value="{{ patternId }}">
                            <input type="hidden" name="paymentModeId" value="{{ paymentModeId }}">
                            <input type="hidden" name="subPaymentModeId" value="{{ subPaymentModeId }}">
                            <input type="hidden" name="transactionAPIId" value="{{ transactionAPIId }}">
                            <input type="hidden" name="recordId" value="{{ recordId }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                            <!-- 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>
                                        {% if priceType == 'FIXED' %}
                                        <option value="FIXED" selected>FIXED</option>
                                        {% else %}
                                        <option value="FIXED">FIXED</option>
                                        {% endif %}
                                        {% if priceType == 'RANGE' %}
                                        <option value="RANGE" selected>RANGE</option>
                                        {% else %}
                                        <option value="RANGE">RANGE</option>
                                        {% endif %}
                                    </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">Is Unlimited</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">&nbsp;</th>
                                            </tr>
                                        </thead>
                                        <tbody id="addMoreSlabs">
                                            {% for i in range(priceRangeList|length) %}
                                            <tr class="price-range-row">
                                                <td>
                                                    <input type="text" class="form-control"
                                                        pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="startAmount[]"
                                                        id="startAmount_{{ i }}"
                                                        value="{% if i == 0 %}0{% else %}{{ (priceRangeList[i - 1].endAmount + 0.1) if priceRangeList[i - 1].endAmount is not none else 0.1 }}{% endif %}"
                                                        placeholder="Enter Start Amount" {% if (i <
                                                        priceRangeList|length - 1) %}{% endif %}readonly>

                                                </td>
                                                <td>
                                                    <input type="text" class="form-control"
                                                        pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="endAmount[]"
                                                        id="endAmount_{{ i }}"
                                                        value="{% if priceRangeList[i].endAmount is not none %}{{ priceRangeList[i].endAmount }}{% else %}0{% endif %}"
                                                        placeholder="Enter charge value" {% if i < priceRangeList|length
                                                        - 1 %}readonly{% endif %}>
                                                </td>
                                                <td>
                                                    <input type="checkbox" name="isUnlimited" {% if
                                                        priceRangeList[i].isUnlimited %}checked{% endif %} {% if i <
                                                        priceRangeList|length - 1 %}disabled{% endif %}
                                                        onchange="checkUnlimited(this)">
                                                </td>
                                                <td>
                                                    <select class="form-control" name="aggregatorType[]" {% if i <
                                                        priceRangeList|length - 1
                                                        %}onchange="this.setAttribute('data-readonly', 'true')"
                                                        onclick="if(this.getAttribute('data-readonly') === 'true') { event.preventDefault(); }"
                                                        {% endif %}>
                                                        <option value="FLAT" {% if
                                                            priceRangeList[i].aggregatorType=='FLAT' %}selected{% endif
                                                            %}>FLAT</option>
                                                        <option value="PERCENTAGE" {% if
                                                            priceRangeList[i].aggregatorType=='PERCENTAGE' %}selected{%
                                                            endif %}>PERCENTAGE</option>
                                                    </select>

                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="aggregatorValue[]"
                                                        pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                                        value="{% if priceRangeList[i].aggregatorValue is not none %}{{ priceRangeList[i].aggregatorValue }}{% else %}0{% endif %}"
                                                        placeholder="Enter aggregator value" {% if i <
                                                        priceRangeList|length - 1 %}readonly{% endif %}>
                                                </td>
                                                <td>
                                                    <select class="form-control" name="chargeType[]" {% if i <
                                                        priceRangeList|length - 1 %}{% endif %}>
                                                        <option value="FLAT" {% if priceRangeList[i].chargeType=='FLAT'
                                                            %}selected{% endif %}>FLAT</option>
                                                        <option value="PERCENTAGE" {% if
                                                            priceRangeList[i].chargeType=='PERCENTAGE' %}selected {%
                                                            endif %}>PERCENTAGE</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" name="chargeValue[]"
                                                        value="{% if priceRangeList[i].chargeValue is not none %}{{ priceRangeList[i].chargeValue }}{% else %}0{% endif %}"
                                                        pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                                        placeholder="Enter charge value" {% if i < priceRangeList|length
                                                        - 1 %}readonly{% endif %}>
                                                </td>
                                                <td>
                                                    <button class="btn btn-primary-light removetr" type="button"
                                                        onclick="removeLastRow()" {% if i < priceRangeList|length - 1
                                                        %}disabled{% endif %}>Remove</button>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>

                                    </table>

                                    <div><button type="button" class="btn btn-primary-light btn-wave" id="addMoreButton"
                                            style="margin: 10px 0px;"
                                            onclick="if (validateAllRows()) { 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">
                                                {% if aggregatorType == 'FLAT' %}
                                                <option value="FLAT" selected>FLAT</option>
                                                {% else %}
                                                <option value="FLAT">FLAT</option>
                                                {% endif %}
                                                {% if 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>
                                            <input type="text" class="form-control"
                                                pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="aggregatorValue"
                                                value="{% if aggregatorValue is not none %}{{ aggregatorValue }}{% else %}0{% endif %}"
                                                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" name="chargeType">
                                                {% if chargeType == 'FLAT' %}
                                                <option value="FLAT" selected>FLAT</option>
                                                {% else %}
                                                <option value="FLAT">FLAT</option>
                                                {% endif %}
                                                {% if 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"
                                                pattern="([0-9]+([.][0-9]*)?|[.][0-9])" name="chargeValue"
                                                value="{% if chargeValue is not none %}{{ chargeValue }}{% else %}0{% endif %}"
                                                placeholder="Enter charge value">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <!-- GST Include -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="gstInclude">GST Include*</label>
                                        <select class="form-control" name="gstInclude"
                                            onchange="toggleGSTFields(this.value)">
                                            {% if gstInclude == 'Yes' %}
                                            <option value="Yes" selected>Yes</option>
                                            {% else %}
                                            <option value="Yes">Yes</option>
                                            {% endif %}
                                            {% if gstInclude == 'No' %}
                                            <option value="No" selected>No</option>
                                            {% else %}
                                            <option value="No">No</option>
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6" id="gstFields">
                                    <div class="form-group">
                                        <label for="gstValue">GST%*</label>
                                        <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                            name="gstValue"
                                            value="{% if gstValue is not none %}{{ gstValue }}{% else %}0{% endif %}"
                                            placeholder="Enter GST Value">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tdsInclude">TDS Include*</label>
                                        <select class="form-control" name="tdsInclude"
                                            onchange="toggleTDSFields(this.value)">
                                            {% if tdsInclude == 'Yes' %}
                                            <option value="Yes" selected>Yes</option>
                                            {% else %}
                                            <option value="Yes">Yes</option>
                                            {% endif %}
                                            {% if tdsInclude == 'No' %}
                                            <option value="No" selected>No</option>
                                            {% else %}
                                            <option value="No">No</option>
                                            {% endif %}
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col-md-6" id="tdsFields">
                                    <div class="form-group">
                                        <label for="tdsValue">TDS%*</label>
                                        <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                            name="tdsValue"
                                            value="{% if tdsValue is not none %}{{ tdsValue }}{% else %}0{% endif %}"
                                            placeholder="Enter TDS Value">
                                    </div>
                                </div>
                            </div>

                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary" name="action" value="submit">
                                    {% if update %}Update{% else %}Submit{% endif %}
                                </button>
                            </div>


                        </form>

                        <!-- End: Submit Form Section -->

                    </div>

                    <center>
                        {% if error %}
                        <h2><b>
                                <center style="color:RED">{{ error }}</center>
                            </b></h2>
                        {% endif %}
                    </center>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- End::app-content -->

<!-- JavaScript to Show Additional Fields -->
<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';
        }
    }
    document.addEventListener('DOMContentLoaded', function () {
        var priceType = document.getElementById('priceType').value;
        togglePriceFields(priceType);
    });



    document.addEventListener('DOMContentLoaded', function () {
        toggleGSTFields('{{ gstInclude }}'); // Initial state based on your data
        toggleTDSFields('{{ tdsInclude }}'); // Initial state based on your data
    });
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('#submitForm'); // Adjust the selector as needed

        form.addEventListener('submit', function (event) {
            let isValid = true;
            const rows = document.querySelectorAll('.price-range-row');

            rows.forEach(row => {
                const startAmountInput = row.querySelector('input[name="startAmount[]"]');
                const endAmountInput = row.querySelector('input[name="endAmount[]"]');

                const startAmount = parseFloat(startAmountInput.value);
                const endAmount = parseFloat(endAmountInput.value);

                // Validate if inputs are valid numbers
                if (isNaN(startAmount) || isNaN(endAmount)) {
                    isValid = false;
                    alert(`Please enter valid numbers for start and end amounts in the row.`);
                    return; // Exit this iteration
                }

                // Validate endAmount must be greater than startAmount
                if (endAmount <= startAmount) {
                    isValid = false;
                    alert(`End amount must be greater than start amount for the row.`);
                    return; // Exit this iteration
                }
            });

            // If not valid, prevent form submission
            if (!isValid) {
                event.preventDefault();
            }
        });
    });
</script>


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


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


<script>
    function showAdditionalFieldsAndSearch(event) {

        const searchForm = $("#searchForm");
        // Show the additional fields
        $("#submitForm").show(); // Show submit form

        const formData = searchForm.serialize() + "&action=search"; // Append action to the serialized data


        // Submit the form via AJAX
        $.ajax({
            type: "GET",
            url: "{{ url_for('patterns_configuarations.new_get_setup_charge_commissions_list') }}",
            data: searchForm.serialize(), // Serialize the original search form data
            success: function (response) {
                console.log("Search submitted successfully", response);
                // Optionally, handle response data
            },
            error: function (xhr, status, error) {
                console.error("Error submitting search:", error);
            }
        });
    }

    // Attach this function to the search button
    $("#searchForm button[type='submit']").on("click", showAdditionalFieldsAndSearch);






    // 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><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();
    // });
    function disableRowInputs(row) {
        const inputs = row.find('input, select');
        inputs.prop('readonly', true); // Disable inputs
        // inputs.prop('disabled', true);  // Also disable inputs if necessary
    }


    function validateRow(row) {
        const startAmount = parseFloat(row.find('input[name="startAmount[]"]').val());
        const endAmount = parseFloat(row.find('input[name="endAmount[]"]').val());
        const aggregatorType = row.find('select[name="aggregatorType[]"]').val();
        const chargeType = row.find('select[name="chargeType[]"]').val();
        const aggregatorValue = row.find('input[name="aggregatorValue[]"]').val();
        const chargeValue = row.find('input[name="chargeValue[]"]').val();

        // Check if endAmount is null or less than or equal to startAmount
        if (isNaN(endAmount) || endAmount <= startAmount) {
            return false; // Validation failed for amount comparison
        }

        // Check for required fields
        if (!aggregatorType || !chargeType || !aggregatorValue || !chargeValue) {
            return false; // Validation failed for required fields
        }

        return true; // Validation passed
    }


    function validateAllRows() {
        let isValid = true;
        $('#addMoreSlabs tr').each(function () {
            if (!validateRow($(this))) {
                isValid = false;
                alert('Please ensure all fields are filled and that End Amount is greater than Start Amount for all rows.');
                return false; // Exit the each loop
            }
        });
        return isValid;
    }


    function addMoreSlabs() {
        let slabCount = $('#addMoreSlabs tr').length;
        let startAmountValue = slabCount === 0 ? 0 : parseFloat($('#addMoreSlabs tr:last input[name="endAmount[]"]').val()) + 0.1;

        // Disable the current last row if it exists
        if (slabCount > 0) {
            const lastRow = $('#addMoreSlabs tr').last();
            disableRowInputs(lastRow);
        }

        $('#addMoreSlabs').append(`
        <tr class="price-range-row">
            <td>
                <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" name="startAmount[]" value="${startAmountValue.toFixed(2)}" placeholder="Enter Start Amount" required readonly>
            </td>
            <td>
                <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" name="endAmount[]" placeholder="Enter End Amount" required>
            </td>
            <td>
                <input type="checkbox" name="isUnlimited" onchange="toggleAddButton(this)">
            </td>
            <td>
                <select class="form-control" name="aggregatorType[]" required>
                    <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])" name="aggregatorValue[]" placeholder="Enter aggregator value" required>
            </td>
            <td>
                <select class="form-control" name="chargeType[]" required>
                    <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" name="chargeValue[]" placeholder="Enter charge value" required>
            </td>
            <td>
                <button class="btn btn-primary-light removetr" type="button" onclick="removeLastRow()">Remove</button>
            </td>
        </tr>
    `);

        // Disable the Remove button for all rows except the last one
        $('#addMoreSlabs tr').each(function (index) {
            const checkbox = $(this).find('input[name="isUnlimited"]');
            checkbox.prop('disabled', index < slabCount); // Disable for all but the last row
            const removeButton = $(this).find('.removetr');
            removeButton.prop('disabled', index < slabCount); // Disable for all but the last row
        });

        updateDropdownStates();
    }
    function updateDropdownStates() {
        $('#addMoreSlabs tr').each(function (index) {
            const selects = $(this).find('select');

            if (index < $('#addMoreSlabs tr').length - 1) {
                selects.addClass('readonly-dropdown'); // Add class to make it readonly
            } else {
                selects.removeClass('readonly-dropdown'); // Allow editing for the last row
            }
        });
    }


    // Call updateDropdownStates on initialization to set the right state
    updateDropdownStates();

    function removeLastRow() {
        const rows = $('#addMoreSlabs tr');

        // Check if there is more than one row
        if (rows.length > 1) {
            const lastRow = rows.last();
            lastRow.remove(); // Remove the last row

            // Enable inputs and button in the new last row if it exists
            const newLastRow = rows.eq(rows.length - 2);
            const inputs = newLastRow.find('input, select');
            inputs.each(function () {
                if ($(this).attr('name') !== 'startAmount[]') {
                    $(this).removeAttr('disabled').removeAttr('readonly'); // Enable inputs
                }
            });

            // Enable the remove button for the new last row
            const removeButton = newLastRow.find('.removetr');
            removeButton.prop('disabled', false); // Enable the remove button

            updateDropdownStates();
        }
    }



    $("#addMoreSlabs").on("click", ".removetr", function () {
        $(this).closest("tr").remove();
        checkUnlimited(); // Check again after removal
    });

    function toggleAddButton(checkbox) {
        checkUnlimited(); // Check every time a checkbox is toggled
    }

    function checkUnlimited() {
        const addButton = document.getElementById('addMoreButton');
        const anyChecked = Array.from(document.querySelectorAll('input[name="isUnlimited"]')).some(checkbox => checkbox.checked);
        addButton.style.display = anyChecked ? 'none' : 'block';
    }

</script>

{% endblock %}