{% 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 row = document.querySelector(`tr[data-index="${index}"]`);

    if (!row) {
        console.error(`Row not found for index: ${index}`);
        return;
    }

    let chargeValueField = row.querySelector("input[name='chargeValue[]']");
    let gstIncludeField = row.querySelector("select[name='gstInclude[]']");
    let gstValueField = row.querySelector("input[name='gstValue[]']");
    let tdsIncludeField = row.querySelector("select[name='tdsInclude[]']");
    let tdsValueField = row.querySelector("input[name='tdsValue[]']");
    let finalPriceField = row.querySelector("input[name='readonlyPrice[]']");

    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) || 0;
    let tdsInclude = tdsIncludeField.value;
    let tdsValue = parseFloat(tdsValueField.value) || 0;

    console.log(chargeValueField,"chargeValueField")
    console.log(finalPriceField,"finalPriceField")

    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
    
}

</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 Table 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 Table 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_table_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 chosen-select" 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 chosen-select" 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-md-3  form-group">
                                    <label for="holidayPrice">Holiday Price *</label>
                                    <select class="form-select" id="holidayPrice" name="holidayPrice">
                                        <option value="False" {% if holidayPrice == "False" %} selected {% endif %}>False</option>
                                        <option value="True" {% if holidayPrice == "True" %} selected {% endif %}>True</option>
                                    </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>
                                    <a href="{{url_for('patterns_configuarations.get_api_setup_charge_commissions_table_list')}}"><button type="button"
                                        class="btn btn-warning" style="margin-top: 20px;">Reset</button></a>
                                     <button class="btn btn-secondary me-1 w-auto" onclick="printDiv('printableDiv')"  style="margin-top: 20px;">Print<i
                                            class="ri-printer-line ms-1 align-middle d-inline-block"></i></button>
                                </div>
                                 <div class="col-3">

                                </div>
                            </form>
                            {% for error in form.paymentModeId.errors %}
                            <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                            {% for error in form.transactionAPIId.errors %}
                                <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                            {% for error in form.holidayPrice.errors %}
                                <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                        </div>
                        <div class="col-xl-10">
                            <div class="row">
                                <div>Please select Payment Mode and Transaction API and click Search to configure.
                                </div>
                                <div class="col-xl-12" id="printableDiv">
                                    <div class="card custom-card">
                                        <div class="card-header">
                                            <div class="card-title">
                                                Sub Payment Modes Configuration
                                            </div>
                                        </div>
                                       
                                      {% if paymentModeName %}
                                        <div class="card-header">
                                            <div class="card-title">
                                                 {% if paymentModeName %}
                                                 {{paymentModeName}} - {{txnName}}
                                                {% endif %}
                                            </div>
                                        </div>
                                        {% endif %}
                                         {% if not setup_charge_commission_list %}
                                                <h5 class="mt-2" style="text-align: center; font-size: medium;">No sub-payments available</h5>
                                                {% endif %}
                                        <div class="card-body"  style="{% if showData == True %}display: block;{% else %}display: none;{% endif %}" >
                                         
                                            <form method="POST" action="{{ url_for('patterns_configuarations.api_upsert_setup_charge_commission_table') }}" id="submitForm">
                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                <input type="hidden" id="latitude_add" name="latitude">
                                                <input type="hidden" id="longitude_add" name="longitude">
                                                <table class="table table-bordered">
                                                    <thead class="table-primary">
                                                        <tr>
                                                            <th>S.No</th>
                                                            <th>Sub Payment Mode</th>
                                                            <th>Charge Type</th>
                                                            <th>Charge Value</th>
                                                            <th>GST Include</th>
                                                            <th>GST%</th>
                                                            <th>TDS Include</th>
                                                            <th>TDS%</th>
                                                            <th>Final Price</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for setup_commission in setup_charge_commission_list %}
                                                        <tr data-index="{{ loop.index }}">
                                                            <td>{{ loop.index }}</td>
                                                            <td>
                                                                <input type="hidden" name="subPaymentModeId[]" value="{{ setup_commission.subPaymentModeId }}" oninput="updateFinalPrice({{ loop.index }})">
                                                                {{ setup_commission.subPaymentModeType }}
                                                            </td>
                                            
                                                            <td>
                                                                <select class="form-select" name="chargeType[]" oninput="updateFinalPrice({{ loop.index }})" style="width: 150px;">
                                                                    <option value="PERCENTAGE" {% if setup_commission.chargeType == 'PERCENTAGE' %}selected{% endif %}>PERCENTAGE</option>
                                                                    <option value="FLAT" {% if setup_commission.chargeType == 'FLAT' %}selected{% endif %}>FLAT</option>
                                                                </select>
                                                                <span id="chargeType{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <input type="text" class="form-control" name="chargeValue[]" value="{{ setup_commission.chargeValue }}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." oninput="updateFinalPrice({{ loop.index }})">
                                                                <span id="chargeValue{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <select class="form-select" name="gstInclude[]" oninput="updateFinalPrice({{ loop.index }})">
                                                                    <option value="No" {% if setup_commission.gstInclude == 'No' %}selected{% endif %}>No</option>
                                                                    <option value="Yes" {% if setup_commission.gstInclude == 'Yes' %}selected{% endif %}>Yes</option>
                                                                </select>
                                                                <span id="gstInclude{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <input type="text" class="form-control" name="gstValue[]" value="{{ setup_commission.gstValue }}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." oninput="updateFinalPrice({{ loop.index }})">
                                                                <span id="gstValue{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <select class="form-select" name="tdsInclude[]" oninput="updateFinalPrice({{ loop.index }})">
                                                                    <option value="No" {% if setup_commission.tdsInclude == 'No' %}selected{% endif %}>No</option>
                                                                    <option value="Yes" {% if setup_commission.tdsInclude == 'Yes' %}selected{% endif %}>Yes</option>
                                                                </select>
                                                                <span id="tdsInclude{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <input type="text" class="form-control" name="tdsValue[]" value="{{ setup_commission.tdsValue }}" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." oninput="updateFinalPrice({{ loop.index }})">
                                                                <span id="tdsValue{{ loop.index }}_error" class="error"></span>
                                                            </td>
                                            
                                                            <td>
                                                                <input type="text" style="color: red;font-weight: bold;" class="form-control" name="readonlyPrice[]" value="{{ setup_commission.finalPrice }}" readonly oninput="updateFinalPrice({{ loop.index }})">
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            
                                                <!-- Hidden Inputs for transaction Id and Payment Mode -->
                                                <input type="hidden" name="transactionAPIId" value="{{ transactionAPIId }}">
                                                <input type="hidden" name="holidayPrice" value="{{ holidayPrice }}">
                                                <input type="hidden" name="paymentModeId" value="{{ paymentModeId }}">
                                                
                                            
                                                <div class="text-center mt-3" id="submitall">
                                                    <button type="submit" class="btn btn-primary">Submit All</button>
                                                </div>
                                            </form>
                                            
                                        </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>
$(document).off("click", ".generateOtpBtn").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/generateOtp",
        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).off("click", ".verifyOtpBtn").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/verifyOtp", // 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
                    $(".verifyOtpBtn[data-index='" + index + "']").hide();
                    $(".resendOtpBtn[data-index='" + index + "']").hide();
                } 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 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);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('[id^="submitForm"]'); // Adjust the selector as needed
    // Select all rows
    let rows = document.querySelectorAll("tr[data-index]");
    
    rows.forEach(row => {
        let index = row.getAttribute("data-index"); // Get the row index
        updateFinalPrice(index); // Call update function for each row
    });
});
function printDiv(divId) {
        document.getElementById("submitall").style.display = "none";
        var printContents = document.getElementById(divId).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
    }
</script>
<script type="text/javascript">
    // Clear custom validation messages on input
    $('input, select').on('invalid', function () {
        this.setCustomValidity('');
    }).on('input change', function () {
        this.setCustomValidity('');
    });

    $(document).ready(function () {

        // Validation for dtime form
        $('#searchForm').validate({
            errorElement: 'div',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                'paymentModeId': { required: true },
                'transactionAPIId': { required: true },
                'holidayPrice': { required: true },
            },
            messages: {
                'paymentModeId': { required: 'This field is required' },
                'transactionAPIId': { required: 'This field is required' },
                'holidayPrice': { required: 'This field is required' },
            },
            submitHandler: function (form) {
                form.submit(); 
            }
        });

        // Validation for addoveridedate form
        $('#submitForm').validate({
            errorElement: 'div',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {

                'chargeValue[]': {
                    required: true,
                },
                'gstValue[]': {
                    required: true,
                },
                'tdsValue[]': {
                    required: true,
                },
                },
            messages: {

                'chargeValue[]': {
                    required: 'Charge Value is required',
                },
                'gstValue[]': {
                    required: 'GST % is required',
                },
                'tdsValue[]': {
                    required: 'TDS % is required',
                },

                },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (lat, lng) => {
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);

                        let formData = new FormData(form);
                        $('.error').text('');
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                console.log('RESPONSE:', response);
                                if (response.responseStatus === 1 || response.responseStatus === 4) {
                                    form.reset();
                                    location.reload();
                                } else if (response.responseStatus === 0) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value);
                                    });
                                } else if (response.responseStatus === 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            },
                            error: function () {
                                $('#errorMessage').text('Something went wrong. Please try again.');
                            }
                        });
                    },
                    function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                    alert("Location access is required to proceed. Please enable it in your browser.");
                            }
                        );
                    }
                });

            });
</script>
{% endblock %}