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

<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/get_merchant_setup_charge_commissions_table_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).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/get_merchant_setup_charge_commissions_table_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
                        $(".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>

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


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

                                <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 %}
                                        <option value="{{paymentMode.id}}" {% if paymentMode.id | string == paymentModeId %}selected{% endif %}>
                                            {{ paymentMode.paymentMode }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-md-3  form-group">
                                    <label for="instantSettlement">Instant Settlement Type*</label>
                                    <select class="form-select" name="instantSettlement" id="instantSettlement"
                                        required>
                                        <option value="">Select</option>
                                        <option value="True" {% if instantSettlement=="True" %}selected{% endif %}>True
                                        </option>
                                        <option value="False" {% if instantSettlement=="False" %}selected{% endif %}>False
                                        </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_merchant_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.patternId.errors %}
                            <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                            {% for error in form.paymentModeId.errors %}
                            <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                            {% for error in form.instantSettlement.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 %}
                                                 {{patternName}} - {{paymentModeName}}
                                                {% 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 %}">
                                            <div class="" id="">
                                                <form method="POST"
                                                    action="{{ url_for('patterns_configuarations.merchant_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>
                                                                </td>
                                                            </tr>
                                                            {% endfor %}
                                                            
                                                        </tbody>
                                                    </table>


                                                    <!-- Hidden Inputs for Merchant Profile and Payment Mode -->
                                                    <input type="hidden" name="patternId" value="{{ patternId }}">
                                                    <input type="hidden" name="paymentModeId"
                                                        value="{{ paymentModeId }}">
                                                    <input type="hidden" name="instantSettlement"
                                                        value="{{ instantSettlement }}">

                                                    <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>
                        </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 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_merchant_setup_charge_commissions_table_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: {
                'patternId': { required: true },
                'paymentModeId': { required: true },
                'instantSettlement': { required: true },
            },
            messages: {
                'patternId': { required: 'Merchant Profile is required' },
                'paymentModeId': { required: 'Payment Mode is required' },
                'instantSettlement': { required: 'Instant Settlement is required' },
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        // Validation for apicommisioncharges 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);
                            if ($("#submitAllButton").prop("disabled")) {
                                alert("Please verify OTP first."); // Display alert if submit button is disabled
                                return;
                            }
                            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 %}