{% 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="chargeValue[]"]`);
        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">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.get_api_setup_charge_commissions_list') }}"
                                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-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-3  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-3" >
                                    <button type="submit" class="btn btn-primary" name="action" value="search" style="margin-top: 20px;"
                                        onclick="showAdditionalFieldsAndSearch(event)">Search</button>
                                </div>

                            </form>
                        </div>
                        <div class="col-xl-10">
                            <div class="row">
                                <div class="col-xl-12">
                                    <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">
                                                {% 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" id="submitForm{{ loop.index }}">
                                                                    <input type="hidden" name="paymentModeId" value="{{ paymentModeId }}">
                                                                    <input type="hidden" name="transactionAPIId" value="{{ transactionAPIId }}">
                                                                    <input type="hidden" name="subPaymentModeId" value="{{ setup_commission.subPaymentModeId }}">
                                                                    
                                                                    <!-- Price Type -->
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="priceType{{ loop.index }}">Price Type*</label>
                                                                            <select class="form-control" 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>
                                                                        </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>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody id="addMoreSlabs{{ loop.index }}">
                                                                                    {% for i in range(setup_commission.price_ranges|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 %}{{ (setup_commission.price_ranges[i - 1].endAmount + 0.1) if setup_commission.price_ranges[i - 1].endAmount is not none else 0.1 }}{% endif %}"
                                                                                                placeholder="Enter Start Amount" 
                                                                                                {% if i < setup_commission.price_ranges|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 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 %}>
                                                                                        </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 -->
                                                                                        </td>
                                                                                        
                                                                                        <td>
                                                                                            <select class="form-control" 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>
                                                                                        </td>
                                                                                        <td>
                                                                                            <input type="text" class="form-control" name="chargeValue[]" 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 %}"
                                                                                                pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                                                                                placeholder="Enter charge value" 
                                                                                                {% if i < setup_commission.price_ranges|length - 1 %}readonly{% endif %}>
                                                                                        </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-control" 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>
                                                                                </div>
                                                                            </div>
                        
                                                                            <div class="col-md-4">
                                                                                <div class="form-group">
                                                                                    <label for="chargeValue{{ loop.index }}">Charge Value*</label>
                                                                                    <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" 
                                                                                        name="chargeValue" id="chargeValue{{ loop.index }}"
                                                                                        value="{{ setup_commission.chargeValue }}" 
                                                                                        placeholder="Enter charge value" oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                                </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="text" class="form-control" id="readonlyPrice{{ loop.index }}"  style="font-weight: 700; color: red;" name="readonlyPrice" readonly>
                                                                                </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-control" 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>
                                                                        </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="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])"
                                                                                name="gstValue" id="gstValue{{ loop.index }}"
                                                                                value="{{ setup_commission.gstValue }}"
                                                                                placeholder="Enter GST Value" oninput="updateFinalPrice({{ loop.index }}, {{ i }})">
                                                                        </div>
                                                                    </div>
                        
                                                                    <!-- TDS Include -->
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="tdsInclude{{ loop.index }}">TDS Include*</label>
                                                                            <select class="form-control" 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>
                                                                        </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="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" oninput="updateFinalPrice({{ loop.index }}, {{ i }})"
                                                                                name="tdsValue" id="tdsValue{{ loop.index }}"
                                                                                value="{{ setup_commission.tdsValue }}"
                                                                                placeholder="Enter TDS Value">
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group mt-3">
                                                                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="1">Generate OTP</button>
                                                                        <input type="hidden" id="otpLogid1" name="otpLogid">
                                                                    </div>

                                                                    <div class="form-group mt-3 otp-section" data-index="1" style="display: none;">
                                                                        <label for="otpCode1">Enter OTP*</label>
                                                                        <input type="text" class="form-control otp-input" id="otpCode1" name="otpCode" placeholder="Enter OTP">
                                                                        <button type="button" class="btn btn-primary verifyOtpBtn" data-index="1">Verify OTP</button>
                                                                        <button type="button" class="btn btn-secondary resendOtpBtn" data-index="1">Resend OTP</button>
                                                                        <div id="otpMessage1" class="text-danger mt-2"></div>
                                                                    </div>

                                                                    <!-- Submit Button -->
                                                                    <div class="modal-footer justify-content-between">
                                                                        <button type="submit" class="btn btn-primary updateBtn" id="updateBtn1" 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 %}
                                            </div>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                        <!-- 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>
$(document).on("click", ".generateOtpBtn", function () {
    let index = $(this).attr("data-index");
    let mailType = "Profile Setup"; // Ensure correct mailType
    let button = $(this);
    let messageBox = $("#otpMessage" + index);

    console.log(`🔹 Generating OTP for mailType: ${mailType}`);

    $.ajax({
        type: "POST",
        url: "/api/super_admin/get_api_setup_charge_commissions_list",
        data: {
            action: "generate",
            mailType: mailType // Ensure correct key is sent
        },
        beforeSend: function () {
            button.prop("disabled", true).text("Generating...");
        },
        success: function (response) {
            if (response.responseStatus === 1) {
                $("#otpLogid" + index).val(response.otpCheckId);
                $(".otp-section[data-index='" + index + "']").fadeIn();
                button.hide();
                messageBox.removeClass("text-danger").addClass("text-success").text("OTP Sent!");
            } else {
                alert("Error: " + response.result);
                button.prop("disabled", false).text("Generate OTP");
            }
        },
        error: function (xhr) {
            console.error("OTP Generation Error:", xhr.responseText);
            alert("Error: " + xhr.status + " " + xhr.statusText);
            button.prop("disabled", false).text("Generate OTP");
        }
    });


    // Step 2: Verify OTP & Enable the Correct Submit Button
    $(document).on("click", ".verifyOtpBtn", function () {
        var index = $(this).attr("data-index"); // Identify the form by index
        var otpCode = $("#otpCode" + index).val();
        var otpCheckId = $("#otpLogid" + index).val();

        if (!otpCode.trim() || otpCode.length !== 6) {
            $("#otpMessage" + index).text("⚠️ Enter a valid 6-digit OTP").addClass("text-danger");
            return;
        }

        $.ajax({
            type: "POST",
            url: "/api/super_admin/get_api_setup_charge_commissions_list", // Update API route
            data: { action: "verify", otpCode: otpCode, otpCheckId: otpCheckId },
            success: function (response) {
                if (response.responseStatus === 1) {
                    $("#otpMessage" + index).removeClass("text-danger").addClass("text-success").text("OTP Verified!");
                    $("#updateBtn" + index).prop("disabled", false); // Enable the correct submit button
                } else {
                    $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text(response.result);
                }
            },
            error: function () {
                $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text("Error verifying OTP.");
            }
        });
    });

    // Step 3: Click "Resend OTP"
    $(document).on("click", ".resendOtpBtn", function () {
        var index = $(this).attr("data-index");
        $(".generateOtpBtn[data-index='" + index + "']").show().prop("disabled", false).text("Generate OTP"); // Show button again for resend
        $(".generateOtpBtn[data-index='" + index + "']").click(); // Re-trigger OTP Generation
    });

});

</script>

<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>
    function showAdditionalFieldsAndSearch(event) {
        const searchForm = $("#searchForm");
        // Show the additional fields
        $("#submitForm").show(); 

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

        $.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="chargeValue[]"]').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="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, ${formIndex})">
            </td>
            <td>
                <select class="form-control" 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="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" name="chargeValue[]" placeholder="Enter charge value" required oninput="updateFinalPrice(${formIndex}, ${slabCount})">
            </td>
            <td>
            <input type="text" 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 %}