{% 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>
    function printDiv(divId) {
        document.getElementById("submitall").style.display = "none";
        document.getElementById("otp-generation").style.display = "none";
        var printContents = document.getElementById(divId).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
    }
</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">Multiple App Sites</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">Multiple App Sites 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">Multiple App Sites {{siteName}}</div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Start: Search Form Section -->
                            <form method="GET" action="{{ url_for('multiple_app_sites.site_assign_payment_gateways') }}"
                                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>
                                    <input type="hidden" name="siteId" value="{{ siteId }}">
                                    <select class="form-control chosen-select" name="paymentModeId" id="paymentModeId"
                                        onchange="getPaymentModes(this.value, 'add', '')">
                                        <option value="">Select</option>
                                        {% for paymentMode in paymentsModeList %}
                                        <option value="{{ paymentMode.id }}" {% if paymentModeId==paymentMode.id
                                            %}selected{% endif %}>
                                            {{ paymentMode.paymentMode }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    {% for error in form.paymentModeId.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                </div>

                                <div class="col-md-3 form-group">
                                    <label for="settlementType">Settlement Type*</label>
                                    <select class="form-select" name="settlementType" id="settlementType">
                                        <option value="">Select</option>
                                        <option value="True" {% if settlementType==True %}selected{% endif %}>True
                                        </option>
                                        <option value="False" {% if settlementType==False %}selected{% endif %}>False
                                        </option>
                                    </select>
                                    {% for error in form.settlementType.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span><br>
                                    {% endfor %}
                                </div>

                                <div class="col-auto">
                                    <button type="submit" class="btn btn-primary" name="action" value="search"
                                        style="margin-top: 20px;">Search</button>
                                </div>

                                <div class="col-auto">
                                    <button class="btn btn-secondary" onclick="printDiv('printableDiv')"
                                        style="margin-top: 20px;">Print
                                        <i class="ri-printer-line ms-1 align-middle d-inline-block"></i>
                                    </button>
                                </div>
                            </form>
                        </div>

                        <div class="col-xl-10">
                            <div class="row">
                                <div class="col-xl-12" id="printableDiv">
                                    <div class="card custom-card">
                                        <div class="card-header">
                                            <div class="card-title">
                                                Sub Payment Modes Configuration {{siteName}}
                                            </div>
                                        </div>
                                        <div class="card-header">
                                            <div class="card-title">
                                                {{paymentModeName}} 
                                                <!-- - {{txnName}} -->
                                            </div>
                                        </div>
                                        {% if not siteAssignPaymentgatewaysList %}
                                        <h5 class="mt-2" style="text-align: center; font-size: medium;">No sub-payments
                                            available</h5>
                                        {% endif %}
                                        <div class="card-body">
                                            <div class="card-body"
                                                style="{% if showData == True %}display: block;{% else %}display: none;{% endif %}">
                                                <form method="POST"
                                                    action="{{ url_for('multiple_app_sites.sites_api_upsert_setup_charge_commission_table') }}"
                                                    id="submitForm" class="data-requires-location">
                                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                    <input type="hidden" id="latitude" name="latitude">
                                                    <input type="hidden" id="longitude" name="longitude">
                                                    <input type="hidden" name="defaultVerificationId"
                                                        id="defaultVerificationId">
                                                    <table class="table table-bordered">
                                                        <thead class="table-primary">
                                                            <tr>
                                                                <th>S.No</th>
                                                                <th>Sub Payment Mode</th>
                                                                <th>Api Name</th>
                                                                <th>Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                            {% for each_site_assign in siteAssignPaymentgatewaysList %}
                                                            <tr data-index="{{ loop.index }}">
                                                                <td>{{ loop.index }}</td>

                                                                <td>
                                                                    <input type="hidden" name="subPaymentModeId"
                                                                        value="{{ each_site_assign.subPaymentModeId }}">
                                                                    {{ each_site_assign.subPaymentModeType }}
                                                                </td>

                                                                <td>
                                                                    <select class="form-select" name="transactionApiId">
                                                                        <option value="">Select</option>
                                                                        {% for each_payin_pg in payinPgsList %}
                                                                        <option value="{{ each_payin_pg.id }}" {% if
                                                                            each_site_assign.transactionApiId==each_payin_pg.id
                                                                            %}selected{% endif %}>
                                                                            {{ each_payin_pg.apiName }}
                                                                        </option>
                                                                        {% endfor %}
                                                                    </select>
                                                                    <span id="transactionApiId{{ loop.index }}_error"
                                                                        class="error"></span>
                                                                </td>

                                                                <td>
                                                                    <select class="form-select" name="status"
                                                                        style="width: 150px;">
                                                                        <option value="Active" {% if
                                                                            each_site_assign.status==1 %}selected{%
                                                                            endif %}>Active</option>
                                                                        <option value="Deactive" {% if
                                                                            each_site_assign.status==0 %}selected{%
                                                                            endif %}>Deactive</option>
                                                                    </select>
                                                                    <span id="status{{ loop.index }}_error"
                                                                        class="error"></span>
                                                                </td>

                                                            </tr>
                                                            {% endfor %}

                                                        </tbody>
                                                    </table>

                                                    <!-- Hidden Inputs for transaction Id and Payment Mode -->
                                                    <input type="hidden" name="transactionApiId"
                                                        value="{{ transactionApiId }}">
                                                    <input type="hidden" name="paymentModeId"
                                                        value="{{ paymentModeId }}">
                                                    <input type="hidden" name="siteId" value="{{ siteId }}">
                                                    <input type="hidden" name="settlementType"
                                                        value="{{ settlementType }}">


                                                    <div id="otp-generation">
                                                        <div class="form-group mt-3">
                                                            <button type="button" class="btn btn-warning generateOtpBtn"
                                                                data-mail-type="Profile Setup" data-index="all">Generate
                                                                OTP</button>
                                                            <input type="hidden" id="otpLogidall" name="otpLogid">
                                                        </div>

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



                                                    <div class="text-center mt-3" id="submitall">
                                                        <button type="submit" class="btn btn-primary updateBtn"
                                                            id="updateBtnall" disabled>Submit All</button>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End: Submit Form Section -->
                        </div>
                    </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 type="text/javascript">

    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".data-requires-location").forEach(function (form) {
            form.addEventListener("submit", function (event) {
                const latInput = form.querySelector("input[name='latitude']");
                const lngInput = form.querySelector("input[name='longitude']");

                if (latInput?.value && lngInput?.value) {
                    return;
                }

                event.preventDefault();

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        function (position) {
                            latInput.value = position.coords.latitude;
                            lngInput.value = position.coords.longitude;
                            // form.submit();
                        },
                        function () {
                            alert("Location access is required to proceed. Please enable location services.");
                        },
                        {
                            enableHighAccuracy: true,
                            timeout: 10000,
                            maximumAge: 0
                        }
                    );
                } else {
                    alert("Geolocation is not supported by this browser.");
                }
            });
        });
    });
</script>

<script>
    // Clear custom validation messages on input
    $('input, select').on('invalid', function () {
        this.setCustomValidity('');
    }).on('input change', function () {
        this.setCustomValidity('');
    });

    $(document).ready(function () {
        $('#submitForm').validate({
            errorElement: 'div',
            errorClass: 'error',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            ignore: ":hidden",
            rules: {
                transactionApiId: {
                    required: true,
                },
                status: {
                    required: true,
                },
            },
            messages: {

                transactionApiId: {
                    required: 'Api name is required',
                },
                status: {
                    required: 'Status is required',
                },
            },

            submitHandler: function (form, event) {

                $('#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) {
                                if (response.responseStatus === 1 || response.responseStatus === 4) {

                                    form.reset();
                                    window.location.reload()
                                } else if (response.responseStatus === 0) {
                                    $('#newLoadingModel').hide();
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value);
                                    });
                                } else if (response.responseStatus === 2) {

                                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } else {
                                    // location.reload();
                                    window.location.reload();
                                }
                            },
                            error: function () {
                                $('#errorMessage').text('Something went wrong. Please try again.');
                            }
                        });
                    },
                    function () {

                        $('#newLoadingModel').hide();
                        alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });
    });
</script>


<script type="text/javascript">


    $(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 },
                'servicePaymentType': { required: true },

            },
            messages: {
                'paymentModeId': { required: 'This field is required' },
                'servicePaymentType': { required: 'This field is required' },
            },
            submitHandler: function (form) {
                form.submit();
            }
        });



    });


</script>
{% endblock %}