{% extends 'super_admin_templates/base.html' %}
{% set path = "patterns_configuarations" %}
{% set subpath = "commissions" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<script>
    $('.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
    });


    function updateFinalPrice(index) {
        console.log("Updating final price for index:", index);

        let gstIncludeField = document.getElementById(`gstInclude${index}`);
        let gstValueField = document.getElementById(`gstValue${index}`);
        let tdsIncludeField = document.getElementById(`tdsInclude${index}`);
        let tdsValueField = document.getElementById(`tdsValue${index}`);

        if (!gstIncludeField || !gstValueField || !tdsIncludeField || !tdsValueField) {
            console.error(`GST/TDS fields are missing for index: ${index}`);
            return;
        }

        let gstInclude = gstIncludeField.value;
        let gstValue = parseFloat(gstValueField.value) || 18;
        let tdsInclude = tdsIncludeField.value;
        let tdsValue = parseFloat(tdsValueField.value) || 0;

        // Update Final Price for FIXED PRICE MODE
        let chargeValueField = document.getElementById(`chargeValue${index}`);
        let finalPriceField = document.getElementById(`readonlyPrice${index}`);

        if (chargeValueField && finalPriceField) {
            let chargeValue = parseFloat(chargeValueField.value) || 0;
            let finalPrice = chargeValue;

            if (gstInclude === "No") {
                finalPrice += (chargeValue * (gstValue / 100));
            }

            if (tdsInclude === "No") {
                finalPrice += (chargeValue * (tdsValue / 100));
            }

            finalPriceField.value = finalPrice.toFixed(2);
        }

        // Update Final Price for RANGE PRICE MODE
        let rows = document.querySelectorAll(`#addMoreSlabs${index} tr`);
        rows.forEach((row, rowIndex) => {
            let chargeValueField = row.querySelector(`input[name="chargeValueList"]`);
            let finalPriceField = row.querySelector(`input[name="finalPrice"]`);

            if (!chargeValueField || !finalPriceField) {
                console.error(`Fields not found in row ${rowIndex} for index: ${index}`);
                return;
            }

            let chargeValue = parseFloat(chargeValueField.value) || 0;
            let finalPrice = chargeValue;

            if (gstInclude === "No") {
                finalPrice += (chargeValue * (gstValue / 100));
            }

            if (tdsInclude === "No") {
                finalPrice += (chargeValue * (tdsValue / 100));
            }

            finalPriceField.value = finalPrice.toFixed(2);
        });
    }

</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">Merchant Profile</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">Api 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">Api Setup Charge Commissions List</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Start: Search Form Section -->
                            <form method="GET"
                                action="{{ url_for('patterns_configuarations.get_api_setup_charge_commissions_list',action='search') }}"
                                class="row gy-2 gx-3 align-items-center mb-4" id="searchForm">
                                <div class="col-md-3  form-group">
                                    <label for="paymentModeId">Payment Mode*</label>
                                    <select class="form-select chosen-select" name="paymentModeId" id="paymentModeId"
                                        onchange="getPaymentModes(this.value,'add','')">
                                        <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-3  form-group">
                                    <label for="transactionAPIId">Transaction API*</label>
                                    <select class="form-select chosen-select" name="transactionAPIId"
                                        id="transactionAPIId">
                                        <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-3">
                                    <button type="submit" class="btn btn-primary" name="action" value="search"
                                        style="margin-top: 20px;">Search</button>
                                    <a
                                        href="{{url_for('patterns_configuarations.get_api_setup_charge_commissions_list')}}"><button
                                            type="button" class="btn btn-warning"
                                            style="margin-top: 20px;">Reset</button></a>
                                </div>
                                {% for error in form.paymentModeId.errors %}
                                <span class="text-danger" class="error">{{ error }}</span>
                                {% endfor %}
                                {% for error in form.transactionAPIId.errors %}
                                <span class="text-danger" class="error">{{ error }}</span>
                                {% endfor %}

                            </form>
                        </div>
                        <div class="col-xl-10">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div>Please select Payment Mode and Transaction API and click Search to configure.
                                    </div>
                                    <div class="card custom-card">
                                        <div class="card-header">
                                            <div class="card-title">
                                                Sub Payment Modes Configuration
                                            </div>
                                        </div>

                                        <div class="card-body">
                                            <div class="accordion accordion-customicon1 accordion-primary"
                                                id="accordionSubPaymentModes">
                                                {% if setup_charge_commission_list %}
                                                {% for setup_commission in setup_charge_commission_list %}
                                                {% set outer_loop = loop %}
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingSubPayment{{ loop.index }}">
                                                        <button
                                                            class="accordion-button {{ 'collapsed' if not loop.first }}"
                                                            type="button" data-bs-toggle="collapse"
                                                            data-bs-target="#collapseSubPayment{{ loop.index }}"
                                                            aria-expanded="{{ 'true' if loop.first else 'false' }}"
                                                            aria-controls="collapseSubPayment{{ loop.index }}">
                                                            {% for transactionAPI in transactionAPIsList %}
                                                            {% if transactionAPI.id == setup_commission.transactionAPI
                                                            %}
                                                            {{ transactionAPI.transactionAPI }} -
                                                            {% endif %}
                                                            {% endfor %}
                                                            {{transactionapiName}} - {{
                                                            setup_commission.subPaymentModeType }}
                                                        </button>
                                                    </h2>
                                                    <div id="collapseSubPayment{{ loop.index }}"
                                                        class="accordion-collapse collapse {{ 'show' if loop.first }}"
                                                        aria-labelledby="headingSubPayment{{ loop.index }}"
                                                        data-bs-parent="#accordionSubPaymentModes">
                                                        <div class="accordion-body">
                                                            <form method="POST"
                                                                action="{{ url_for('patterns_configuarations.api_upsert_setup_charge_commission') }}"
                                                                class="row gy-2 gx-3 align-items-center mb-4 api_upsert_setup_charge_commission"
                                                                id="submitForm{{ loop.index }}">
                                                                <input type="hidden" name="csrf_token"
                                                                    value="{{ csrf_token() }}">
                                                                <input type="hidden" name="defaultVerificationId"
                                                                    id="defaultVerificationId">
                                                                <input type="hidden" name="paymentModeId"
                                                                    value="{{ paymentModeId }}">
                                                                <input type="hidden" name="transactionAPIId"
                                                                    value="{{ transactionAPIId }}">
                                                                <input type="hidden" name="subPaymentModeId"
                                                                    value="{{ setup_commission.subPaymentModeId }}">
                                                                <input type="hidden" id="latitude_add" name="latitude">
                                                                <input type="hidden" id="longitude_add"
                                                                    name="longitude">

                                                                <!-- Price Type -->
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="priceType{{ loop.index }}">Price
                                                                            Type*</label>
                                                                        <select class="form-select"
                                                                            id="priceType{{ loop.index }}"
                                                                            name="priceType"
                                                                            onchange="togglePriceFields(this.value, {{ loop.index }})"
                                                                            required>
                                                                            <option value="FIXED" {% if
                                                                                setup_commission.priceType=='FIXED'
                                                                                %}selected{% endif %}>FIXED</option>
                                                                            <option value="RANGE" {% if
                                                                                setup_commission.priceType=='RANGE'
                                                                                %}selected{% endif %}>RANGE</option>
                                                                        </select>
                                                                        <span id="priceType_error" class="error"></span>
                                                                    </div>
                                                                </div>

                                                                <!-- Range Fields -->
                                                                <div id="rangeFields{{ loop.index }}" class="col-md-12"
                                                                    style="{% if setup_commission.priceType == 'RANGE' %}display: block;{% else %}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">Is Unlimited</th>
                                                                                    <th scope="col">Charge Type</th>
                                                                                    <th scope="col">Charge Value</th>
                                                                                    <th scope="col">&nbsp;</th>
                                                                                    <th scope="col">&nbsp;</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody id="addMoreSlabs{{ loop.index }}">
                                                                                {% for i in
                                                                                range(setup_commission.price_ranges|length)
                                                                                %}
                                                                                <tr class="price-range-row">
                                                                                    <td>
                                                                                        <input type="number"
                                                                                            class="form-control"
                                                                                            name="startAmount"
                                                                                            id="startAmount_{{ i }}"
                                                                                            value="{% if setup_commission.price_ranges[i].startAmount is not none %}{{ setup_commission.price_ranges[i].startAmount }}{% else %}0{% endif %}"
                                                                                            placeholder="Enter Start Amount"
                                                                                            {% if i <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}{% endif %}readonly>
                                                                                        <span
                                                                                            id="startAmount{{ loop.index }}_error"
                                                                                            class="error"></span>
                                                                                    </td>
                                                                                    <td>
                                                                                        <input type="number"
                                                                                            class="form-control"
                                                                                            name="endAmount"
                                                                                            id="endAmount_{{ i }}"
                                                                                            value="{% if setup_commission.price_ranges[i].endAmount is not none %}{{ setup_commission.price_ranges[i].endAmount }}{% else %}0{% endif %}"
                                                                                            placeholder="Enter End Amount"
                                                                                            {% if i <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}readonly{% endif %}>
                                                                                        <span
                                                                                            id="endAmount{{ loop.index }}_error"
                                                                                            class="error"></span>
                                                                                    </td>
                                                                                    <td>
                                                                                        <input type="checkbox"
                                                                                            name="isUnlimited" {% if
                                                                                            setup_commission.price_ranges[i].isUnlimited
                                                                                            %}checked{% endif %} {% if i
                                                                                            <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}disabled{% endif %}
                                                                                            onchange="toggleAddButton(this , {{ outer_loop.index }})">
                                                                                        <!-- Use loop.index0 for 0-based index -->
                                                                                        <span
                                                                                            id="isUnlimited{{ loop.index }}_error"
                                                                                            class="error"></span>
                                                                                    </td>

                                                                                    <td>
                                                                                        <select class="form-select"
                                                                                            name="chargeTypeList"
                                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})"
                                                                                            {% if i <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}disabled{% endif %}>
                                                                                            <option value="FLAT" {% if
                                                                                                setup_commission.price_ranges[i].chargeType=='FLAT'
                                                                                                %}selected{% endif %}>
                                                                                                FLAT</option>
                                                                                            <option value="PERCENTAGE"
                                                                                                {% if
                                                                                                setup_commission.price_ranges[i].chargeType=='PERCENTAGE'
                                                                                                %}selected{% endif %}>
                                                                                                PERCENTAGE</option>
                                                                                        </select>
                                                                                        <span
                                                                                            id="chargeTypeList{{ loop.index }}_error"
                                                                                            class="error"></span>
                                                                                    </td>
                                                                                    <td>
                                                                                        <input type="number"
                                                                                            class="form-control"
                                                                                            name="chargeValueList"
                                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})"
                                                                                            value="{% if setup_commission.price_ranges[i].chargeValue is not none %}{{ setup_commission.price_ranges[i].chargeValue }}{% else %}0{% endif %}"
                                                                                            placeholder="Enter charge value"
                                                                                            {% if i <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}readonly{% endif %}>
                                                                                        <span
                                                                                            id="chargeValueList{{ loop.index }}_error"
                                                                                            class="error"></span>
                                                                                    </td>
                                                                                    <td>
                                                                                        <input type="number"
                                                                                            class="form-control"
                                                                                            id="finalPrice_${slabCount}"
                                                                                            name="finalPrice" readonly>
                                                                                    </td>
                                                                                    <td>
                                                                                        <button
                                                                                            class="btn btn-primary-light removetr"
                                                                                            type="button"
                                                                                            onclick="removeLastRow({{ i }})"
                                                                                            {% if i <
                                                                                            setup_commission.price_ranges|length
                                                                                            - 1 %}disabled{% endif
                                                                                            %}>Remove</button>
                                                                                    </td>
                                                                                </tr>
                                                                                {% endfor %}

                                                                            </tbody>



                                                                        </table>
                                                                        <div>
                                                                            <button type="button"
                                                                                class="btn btn-primary-light btn-wave"
                                                                                id="addMoreButton{{ outer_loop.index }}"
                                                                                style="margin: 10px 0px;"
                                                                                onclick="if (validateAllRows({{ outer_loop.index }})) { addMoreSlabs({{ outer_loop.index }}); }">Add
                                                                                +</button>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- Fixed Fields -->
                                                                <div id="fixedFields{{ loop.index }}"
                                                                    style="{% if setup_commission.priceType == 'FIXED' %}display: block;{% else %}display: none;{% endif %}">
                                                                    <div class="row">
                                                                        <div class="col-md-6">
                                                                            <div class="form-group">
                                                                                <label
                                                                                    for="chargeType{{ loop.index }}">Charge
                                                                                    Type*</label>
                                                                                <select class="form-select"
                                                                                    name="chargeType"
                                                                                    id="chargeType{{ loop.index }}">
                                                                                    <option value="FLAT" {% if
                                                                                        setup_commission.chargeType=='FLAT'
                                                                                        %}selected{% endif %}>FLAT
                                                                                    </option>
                                                                                    <option value="PERCENTAGE" {% if
                                                                                        setup_commission.chargeType=='PERCENTAGE'
                                                                                        %}selected{% endif %}>PERCENTAGE
                                                                                    </option>
                                                                                </select>
                                                                                <span id="chargeType_error"
                                                                                    class="error"></span>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-4">
                                                                            <div class="form-group">
                                                                                <label
                                                                                    for="chargeValue{{ loop.index }}">Charge
                                                                                    Value*</label>
                                                                                <input type="number"
                                                                                    class="form-control"
                                                                                    name="chargeValue"
                                                                                    id="chargeValue{{ loop.index }}"
                                                                                    value="{{ setup_commission.chargeValue }}"
                                                                                    placeholder="Enter charge value"
                                                                                    required
                                                                                    oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                                <span id="chargeValue_error"
                                                                                    class="error"></span>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-2">
                                                                            <div class="form-group">
                                                                                <label
                                                                                    for="readonlyPrice{{ loop.index }}"
                                                                                    style="font-weight: 700;"><strong>Final
                                                                                        Price</strong></label>
                                                                                <input type="number"
                                                                                    class="form-control"
                                                                                    id="readonlyPrice{{ loop.index }}"
                                                                                    style="font-weight: 700; color: red;"
                                                                                    name="readonlyPrice" readonly>
                                                                                <span id="readonlyPrice_error"
                                                                                    class="error"></span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <!-- GST Include -->
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="gstInclude{{ loop.index }}">GST
                                                                            Include*</label>
                                                                        <select class="form-select" name="gstInclude"
                                                                            id="gstInclude{{ loop.index }}"
                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                            <option value="Yes" {% if
                                                                                setup_commission.gstInclude=='Yes'
                                                                                %}selected{% endif %}>Yes</option>
                                                                            <option value="No" {% if
                                                                                setup_commission.gstInclude=='No'
                                                                                %}selected{% endif %}>No</option>
                                                                        </select>
                                                                        <span id="gstInclude_error"
                                                                            class="error"></span>
                                                                    </div>
                                                                </div>

                                                                <!-- GST Fields -->
                                                                <div class="col-md-6" id="gstFields{{ loop.index }}"
                                                                    style="display: block;">
                                                                    <div class="form-group">
                                                                        <label
                                                                            for="gstValue{{ loop.index }}">GST%*</label>
                                                                        <input type="number" class="form-control"
                                                                            name="gstValue"
                                                                            id="gstValue{{ loop.index }}"
                                                                            value="{{ setup_commission.gstValue }}"
                                                                            placeholder="Enter GST Value" required
                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                        <span id="gstValue_error" class="error"></span>
                                                                    </div>
                                                                </div>

                                                                <!-- TDS Include -->
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="tdsInclude{{ loop.index }}">TDS
                                                                            Include*</label>
                                                                        <select class="form-select" name="tdsInclude"
                                                                            id="tdsInclude{{ loop.index }}"
                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                            <option value="Yes" {% if
                                                                                setup_commission.tdsInclude=='Yes'
                                                                                %}selected{% endif %}>Yes</option>
                                                                            <option value="No" {% if
                                                                                setup_commission.tdsInclude=='No'
                                                                                %}selected{% endif %}>No</option>
                                                                        </select>
                                                                        <span id="tdsInclude_error"
                                                                            class="error"></span>
                                                                    </div>
                                                                </div>

                                                                <!-- TDS Fields -->
                                                                <div class="col-md-6" id="tdsFields{{ loop.index }}"
                                                                    style="display: block;">
                                                                    <div class="form-group">
                                                                        <label
                                                                            for="tdsValue{{ loop.index }}">TDS%*</label>
                                                                        <input type="number" class="form-control"
                                                                            oninput="updateFinalPrice({{ loop.index }}, {{ i }})"
                                                                            name="tdsValue"
                                                                            id="tdsValue{{ loop.index }}"
                                                                            value="{{ setup_commission.tdsValue }}"
                                                                            placeholder="Enter TDS Value" required>
                                                                        <span id="tdsValue_error" class="error"></span>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group mt-3">
                                                                    <button type="button"
                                                                        class="btn btn-warning generateOtpBtn"
                                                                        data-index="u{{ loop.index }}"
                                                                        data-mail-type="Profile Setup">Generate
                                                                        OTP</button>
                                                                    <input type="hidden" id="otpLogidu{{ loop.index }}"
                                                                        name="otpLogid">
                                                                </div>

                                                                <div class="form-group mt-3 otp-section"
                                                                    data-index="u{{ loop.index }}"
                                                                    style="display: none;">
                                                                    <label for="otpCodeu{{ loop.index }}">Enter
                                                                        OTP*</label>
                                                                    <input type="text" class="form-control otp-input"
                                                                        id="otpCodeu{{ loop.index }}" name="otpCode"
                                                                        pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                                                        placeholder="Enter OTP">
                                                                    <button type="button"
                                                                        class="btn btn-primary verifyOtpBtn mt-2"
                                                                        data-index="u{{ loop.index }}">Verify
                                                                        OTP</button>
                                                                    <button type="button"
                                                                        class="btn btn-secondary resendOtpBtn mt-2"
                                                                        data-index="u{{ loop.index }}"
                                                                        data-mail-type="Profile Setup">Resend
                                                                        OTP</button>
                                                                    <div id="otpMessageu{{ loop.index }}"
                                                                        class="text-danger mt-2"></div>
                                                                </div>

                                                                <!-- Submit Button -->
                                                                <div class="modal-footer justify-content-between">
                                                                    <span id="errorMessage" class="error"></span>
                                                                    <button type="submit"
                                                                        class="btn btn-primary updateBtn form_submit"
                                                                        id="updateBtnu{{ loop.index }}"
                                                                        disabled>Submit</button>
                                                                </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>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                                {% else %}
                                                <tr>
                                                    <td colspan="" style="text-align: center;">
                                                        <center>No sub-payments available</center>
                                                    </td>
                                                </tr>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End: Submit Form Section -->
                    </div>
                    <center>
                        <div class="flashes">
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </div>
                    </center>

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

<!-- JavaScript to Show Additional Fields -->



<script>
    function togglePriceFields(priceType, index) {
        const rangeFieldId = 'rangeFields' + index;
        const fixedFieldId = 'fixedFields' + index;

        const rangeFieldElement = document.getElementById(rangeFieldId);
        const fixedFieldElement = document.getElementById(fixedFieldId);

        if (rangeFieldElement && fixedFieldElement) {
            if (priceType === 'RANGE') {
                rangeFieldElement.style.display = 'block';
                fixedFieldElement.style.display = 'none';

                // Disable fixed fields to prevent submission
                fixedFieldElement.querySelectorAll('input, select').forEach((field) => {
                    field.disabled = true;
                });
                rangeFieldElement.querySelectorAll('input, select').forEach((field) => {
                    field.disabled = false;
                });
            } else {
                rangeFieldElement.style.display = 'none';
                fixedFieldElement.style.display = 'block';

                // Enable fixed fields for submission
                fixedFieldElement.querySelectorAll('input, select').forEach((field) => {
                    field.disabled = false;
                });
                rangeFieldElement.querySelectorAll('input, select').forEach((field) => {
                    field.disabled = true;
                });
            }
        }
    }


    document.addEventListener('DOMContentLoaded', function () {
        // Loop through each form and initialize the price type selection
        document.querySelectorAll('[id^="priceType"]').forEach(function (priceTypeElement) {
            var priceType = priceTypeElement.value;
            var index = priceTypeElement.id.replace('priceType', ''); // Extract index from ID
            togglePriceFields(priceType, index);
        });
        document.querySelectorAll('[id^="submitForm"]').forEach(function (form) {
            const formIndex = form.id.replace('submitForm', ''); // Extract the form index from the form ID

            // Ensure Fixed Pricing Updates on Load
            let priceType = document.getElementById(`priceType${formIndex}`).value;
            if (priceType === "FIXED") {
                updateFinalPrice(formIndex, null);
            }

            // Ensure Range Pricing Updates on Load
            document.querySelectorAll(`#addMoreSlabs${formIndex} tr`).forEach(function (row, rowIndex) {
                updateFinalPrice(formIndex, rowIndex);
            });
        });
    });

    // document.addEventListener('DOMContentLoaded', function () {
    //     const form = document.querySelector('[id^="submitForm"]'); // Adjust the selector as needed

    //     form.addEventListener('submit', function (event) {
    //         let isValid = true;

    //         // Select the priceType element (adjust the selector based on your form structure)
    //         const priceTypeInput = document.querySelector('select[name="priceType"]');
    //         const priceType = priceTypeInput ? priceTypeInput.value : null;

    //         // Only run the validation if priceType is 'RANGE'
    //         if (priceType === 'RANGE') {
    //             const rows = document.querySelectorAll('.price-range-row');

    //             // Check if there are no rows
    //             if (rows.length === 0) {
    //                 isValid = false;
    //                 alert("There must be at least one row to submit the form.");
    //                 event.preventDefault();
    //                 return; // Return early since there are no rows
    //             }

    //             // If there are rows, validate each 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 the form is not valid, prevent submission
    //         if (!isValid) {
    //             event.preventDefault();
    //         }
    //     });
    // });

    document.addEventListener('DOMContentLoaded', function () {
        // Loop through each form and initialize the price type selection and checkbox status
        document.querySelectorAll('[id^="submitForm"]').forEach(function (form) {
            const formIndex = form.id.replace('submitForm', ''); // Extract the form index from the form ID
            checkUnlimited(formIndex); // Call checkUnlimited for each form on page load

            // Initialize the price type dropdown based on the current state
            const priceTypeElement = document.querySelector(`#priceType${formIndex}`);
            if (priceTypeElement) {
                togglePriceFields(priceTypeElement.value, formIndex); // Initialize price fields
            }
        });
    });

</script>

<script type="text/javascript">
    function getLocationAndProceed(successCallback, errorCallback) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    successCallback(position.coords.latitude, position.coords.longitude);
                },
                function () {
                    errorCallback();
                }
            );
        } else {
            errorCallback();
        }
    }
</script>

<script>
    $(document).ready(function () {
        $('.api_upsert_setup_charge_commission').each(function () {
            console.log("(((((((inside function)))))))")
            $(this).validate({
                rules: {
                    priceType: {
                        required: true,
                    },
                    startAmount: {
                        required: false,
                        min: 0,
                        max: 9999999999,
                    },
                    endAmount: {
                        required: true,
                        min: 0,
                        max: 9999999999,
                    },
                    chargeTypeList: {
                        required: true,
                    },
                    chargeValueList: {
                        required: true,
                        min: 0,
                        max: 9999999999,
                    },
                    chargeType: {
                        required: true,
                    },
                    chargeValue: {
                        required: true,
                        min: 0,
                        max: 9999999999,
                    },
                    gstInclude: {
                        required: true,
                    },
                    gstValue: {
                        required: true,
                        min: 0,
                        max: 100,
                    },
                    tdsInclude: {
                        required: true,
                    },
                    tdsValue: {
                        required: true,
                        min: 0,
                        max: 100,
                    },
                },
                messages: {
                    priceType: {
                        required: 'Price Type is required',
                    },
                    startAmount: {
                        min: 'Amount must be greaterthan or equals to 0',
                        max: 'Amount must be lessthan or equals to 9999999999',
                    },
                    endAmount: {
                        required: "Amount is required",
                        min: 'Amount must be greaterthan or equals to 0',
                        max: 'Amount must be lessthan or equals to 9999999999',
                    },
                    chargeTypeList: {
                        required: 'Charge Type is required',

                    },
                    chargeValueList: {
                        required: "Charge Value is required",
                        min: 'chargeValue must be greaterthan or equals to 0',
                        max: 'chargeValue must be lessthan or equals to 9999999999',
                    },
                    chargeType: {
                        required: 'Charge Type is required',

                    },
                    chargeValue: {
                        required: 'chargeValue is required',
                        min: 'chargeValue must be greaterthan or equals to 0',
                        max: 'chargeValue must be lessthan or equals to 9999999999',
                    },
                    gstInclude: {
                        required: 'gstInclude is required',

                    },
                    gstValue: {
                        required: 'gstValue is required',
                        min: 'gstValue must be greaterthan or equals to 0',
                        max: 'gstValue must be lessthan or equals to 100',
                    },
                    tdsInclude: {
                        required: 'tdsInclude is required',

                    },
                    tdsValue: {
                        required: 'tdsValue is required',
                        min: 'tdsValue must be greaterthan or equals to 0',
                        max: ' tdsValuemust be lessthan or equals to 100',
                    },
                },
                submitHandler: function (form, event) {

                    let isValid = true;

                    // Custom validation for priceType == 'RANGE'
                    const priceType = $('select[name="priceType"]').val();
                    if (priceType === 'RANGE') {
                        const rows = $('.price-range-row');
                        if (rows.length === 0) {
                            isValid = false;
                            alert("There must be at least one row to submit the form.");
                        } else {
                            let previousEndAmount = null;
                            rows.each(function () {
                                const startAmount = $(this).find('input[name="startAmount"]').val();
                                const endAmount = $(this).find('input[name="endAmount"]').val();
                                const chargeValueList = $(this).find('input[name="chargeValueList"]').val();

                                // Validate if inputs are valid numbers
                                if (isNaN(startAmount) || isNaN(endAmount)) {
                                    isValid = false;
                                    alert("Please enter valid numbers for start and end amounts.");
                                } else if (parseFloat(endAmount) <= parseFloat(startAmount)) {
                                    isValid = false;
                                    alert("End amount must be greater than the start amount.");
                                } else if (endAmount === "" || chargeValueList === "") {
                                    isValid = false;
                                    alert("End amount and Charge Value cannot be empty.");
                                }

                                // NEW VALIDATION: startAmount - previousEndAmount > 0.1
                                if (previousEndAmount !== null && (parseFloat(startAmount) - previousEndAmount > 0.1)) {
                                    isValid = false;
                                    alert(`Start amount must not differ from previous end amount by more than 0.1.`);
                                }

                                // Set previousEndAmount for next iteration
                                previousEndAmount = parseFloat(endAmount);


                            });
                        }
                    }



                    if (isValid) {

                        console.log("(((((submit)))))", window.location.href)
                        $('.form_submit').prop('disabled', true);
                        $('#newLoadingModel').show();
                        event.preventDefault();
                        getLocationAndProceed(
                            function (lat, lng) {

                                $(form).find('input[name="latitude"]').val(lat);
                                $(form).find('input[name="longitude"]').val(lng);
                                $.ajax({
                                    url: form.action,
                                    type: form.method,
                                    data: $(form).serialize(),
                                    xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                                    success: function (response) {
                                        console.log("in submit hndler", response)
                                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                                            form.reset();
                                            location.reload();

                                        } else if (response.responseStatus == 0) {
                                            $('.form_submit').prop('disabled', false);
                                            $('#newLoadingModel').hide();
                                            console.log(response)
                                            $.each(response.result, function (key, value) {
                                                $('#' + key + "_error").text(value)
                                            });
                                            return false;
                                        } else if (response.responseStatus == 2) {
                                            $('.form_submit').prop('disabled', false);
                                            $('#newLoadingModel').hide();
                                            $('#errorMessage').text(response.result);
                                            return false;
                                        } else {
                                            location.reload();
                                        }

                                    },
                                    error: function (xhr) {
                                        // You can also reload page after error (e.g. CSRF token mismatch)
                                        location.reload();
                                    }
                                });
                            },
                            function () {
                                $('.form_submit').prop('disabled', false);
                                $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                            }
                        );

                    }

                }
            });
        });
    });
</script>

<script>
    function showAdditionalFieldsAndSearch(event) {
        const searchForm = $("#searchForm");
        // Show the additional fields
        $("#submitForm").show();

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

        $.ajax({
            type: "GET",
            url: "{{ url_for('patterns_configuarations.get_api_setup_charge_commissions_list') }}",
            data: searchForm.serialize(), // Serialize the original search form data
            success: function (response) {
                console.log("Search submitted successfully", response);
            },
            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 disableRowInputs(row) {
        const inputs = row.find('input, select');
        inputs.prop('readonly', true);
    }


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

        if (isNaN(endAmount) || endAmount <= startAmount) {
            return false;
        }

        if (!chargeType || !chargeValue) {
            return false;
        }

        return true;
    }


    function validateAllRows(formIndex) {
        let isValid = true;
        // Use formIndex to specifically validate rows in the correct form
        $('#addMoreSlabs' + formIndex + ' 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;
            }
        });

        return isValid;
    }

    function addMoreSlabs(formIndex) {
        // Select the specific form section based on formIndex
        let slabCount = $('#addMoreSlabs' + formIndex + ' tr').length;
        let startAmountValue = slabCount === 0 ? 0 : parseFloat($('#addMoreSlabs' + formIndex + ' tr:last input[name="endAmount"]').val()) + 0.1;

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

        $('#addMoreSlabs' + formIndex).append(`
        <tr class="price-range-row">
            <td>
                <input type="number" class="form-control" name="startAmount" value="${startAmountValue.toFixed(2)}" placeholder="Enter Start Amount" required readonly>
            </td>
            <td>
                <input type="number" class="form-control" name="endAmount" placeholder="Enter End Amount" required>
            </td>
            <td>
                <input type="checkbox" name="isUnlimited" onchange="toggleAddButton(this, ${formIndex})">
            </td>
            <td>
                <select class="form-select" name="chargeTypeList" required>
                    <option value="">Select a charge type</option>
                    <option value="FLAT">FLAT</option>
                    <option value="PERCENTAGE">PERCENTAGE</option>
                </select>
            </td>
            <td>
                <input type="number" class="form-control" name="chargeValueList" placeholder="Enter charge value" required oninput="updateFinalPrice(${formIndex}, ${slabCount})">
            </td>
            <td>
            <input type="number" class="form-control" id="finalPrice_${slabCount}" name="finalPrice" readonly>
        </td>
            <td>
                <button class="btn btn-primary-light removetr" type="button" onclick="removeLastRow(${formIndex})">Remove</button>
            </td>
        </tr>
    `);

        // Disable the Remove button for all rows except the last one
        $('#addMoreSlabs' + formIndex + ' 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(formIndex);
    }

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

            if (index < $('#addMoreSlabs' + formIndex + ' 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(formIndex) {
        // Select the rows from the specific form section using formIndex
        const rows = $('#addMoreSlabs' + formIndex + ' tr');
        console.log("in remove row", rows)

        // 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(formIndex);
        }
    }

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

    function toggleAddButton(checkbox, formIndex) {
        checkUnlimited(formIndex); // Call the updated checkUnlimited function with formIndex
    }

    function checkUnlimited(formIndex) {
        const addButton = document.getElementById('addMoreButton' + formIndex);
        const anyChecked = Array.from(document.querySelectorAll(`#addMoreSlabs${formIndex} input[name="isUnlimited"]`)).some(checkbox => checkbox.checked);
        console.log(anyChecked, addButton)
        addButton.style.display = anyChecked ? 'none' : 'block';
    }
</script>
{% endblock %}