{% extends 'super_admin_templates/base.html' %}trigger
{% set path = "settlement" %}
{% set subpath = "bank_holidays" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
  
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
}
.pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
}
select option:first-child {
  color: #000; /* grey for placeholders */
}
 
select:invalid {
  color: #000; /* force placeholder to stay grey on load */
}

select:valid {
  color: #000; /* normal black once a real value is chosen */
}

select option {
  color: #000; /* fallback color for all other options */
}
.centered {
  text-align: center;
}
</style>

<script>
    function openUpdateTaskModal(each_txn_limit_setting) {
        console.log("open update transaction:", each_txn_limit_setting)
      // Set the form action URL using the ID
      const updatetransactionLimitTypeBaseURL = "{{url_for('transaction_limit_settings.update_txn_limit_setting',txnLimitSettingId='__ID__') }}";
      const formAction = updatetransactionLimitTypeBaseURL.replace('__ID__', each_txn_limit_setting.id);
      console.log("==========->", formAction)
      document.getElementById('updateTaskForm').action = formAction;
  
      // Populate the form fields
        document.getElementById('editName').value = each_txn_limit_setting.name || '';
        document.getElementById('pgTypeEdit').value = each_txn_limit_setting.pgType || '';
        // document.getElementById('paymentGatewayIdsEdit').value = each_txn_limit_setting.paymentGatewayIds || '';
        document.getElementById('editCode').value = each_txn_limit_setting.code || '';
        document.getElementById('editSingleTxnLowerLimit').value = each_txn_limit_setting.singleTxnLowerLimit || '';
        document.getElementById('editSingleTxnUpperLimit').value = each_txn_limit_setting.singleTxnUpperLimit || '';
        document.getElementById('editDailyTxnLimit').value = each_txn_limit_setting.dailyTxnLimit || '';
        document.getElementById('editDailyTxnCount').value = each_txn_limit_setting.dailyTxnCount || '';
        document.getElementById('editMinimunAccountBalance').value = each_txn_limit_setting.minimunAccountBalance || '';
        document.getElementById('editMonthlyTxnLimit').value = each_txn_limit_setting.monthlyTxnLimit || '';
        document.getElementById('editMonthlyTxnCount').value = each_txn_limit_setting.monthlyTxnCount || '';
        // document.getElementById('editIsUserWise').value = each_txn_limit_setting.isUserWise || '';
        // document.getElementById('editUserIds').value = each_txn_limit_setting.userIds || '';
        // // document.getElementById('editUserIdupdateList').value = each_txn_limit_setting.pgType || '';
        // getPaymentGateways(each_txn_limit_setting.pgType, "Edit", each_txn_limit_setting.paymentGatewayIds);
      // document.getElementById('editCountryId').value = state.countryId || '';
      
      var htmldata = "<option value='' disabled selected hidden>Select</option>";
      console.log("each_txn_limit_setting.paymentGatewayIds", each_txn_limit_setting.paymentGatewayIds)
      if (each_txn_limit_setting.pgType == "Payin"){
        htmldata += "<option selected value='Payin'>Payin</option> <option value='Payout'>Payout</option>";
        getPaymentGateways("Payin", 'Edit', each_txn_limit_setting.paymentGatewayIds|| '' )
      }
      else if(each_txn_limit_setting.pgType == "Payout"){
        htmldata += "<option value='Payin'>Payin</option> <option selected value='Payout'>Payout</option>";
        getPaymentGateways("Payout", 'Edit', each_txn_limit_setting.paymentGatewayIds || '')
      }
      $('#pgTypeEdit').html(htmldata);
      // console.log(typeof(each_txn_limit_setting.isUserWise || ""))

      console.log("=======", each_txn_limit_setting.userIds)
      var userList = {{ userList | tojson }}; 
      htmldata = ""
      userList.forEach(each_user=>{
        if(each_txn_limit_setting.userIds.includes(each_user.id)){
          htmldata = htmldata + "<option selected value='" + each_user.id + "'>" + each_user.fullName + "</option>";
        }
        else{
          htmldata = htmldata + "<option value='" + each_user.id + "'>" + each_user.fullName + "</option>";
        }
      })
      $('#editUserIds').html(htmldata);
      $('#editUserIds').trigger("chosen:updated");

      console.log("userwise:", each_txn_limit_setting.isUserWise)
        if((each_txn_limit_setting.isUserWise || "").toString() == "True"){
          document.getElementById('editIsUserWise').checked = true;
          document.getElementById("userIdupdateList").style.display = "block"
        }
        else{
          document.getElementById('editIsUserWise').checked = false;
          ShowHide(document.getElementById('editIsUserWise'),"userIdupdateList")
          
          document.getElementById("userIdupdateList").style.display = "none"
        }

      htmldata = '<label for="params">Payment Mode Wise Limit List</label><br>'
      // var paymodeWiseLimitList = getAttribute('data-txn');
      var paymodeWiseLimitList = each_txn_limit_setting.paymodeWiseLimitList || ""
      
      console.log("=======:", typeof(paymodeWiseLimitList), paymodeWiseLimitList)
      // if(paymodeWiseLimitList){
      //   paymodeWiseLimitList = JSON.parse(paymodeWiseLimitList);
      //   console.log(typeof(paymodeWiseLimitList), paymodeWiseLimitList)
      // }
      // else{
      //   paymodeWiseLimitList = []
      // }

      if(paymodeWiseLimitList){
        paymodeWiseLimitList.forEach(param => {
          htmldata +=`<div class="input-group mb-2">
                          <input type="hidden" name="paymentMode[]" value="${param.paymentModeId }">
                          <input type="text" value="${ param.paymentModeName }" class="form-control" readonly>

                          <input type="hidden" name="subPaymentMode[]" value="${param.subPaymentModeId}">
                          <input type="text" value="${param.subPaymentModeName }" class="form-control" readonly>
                          <input type="text" name="transactionAmountLimit[]" value="${ param.transactionAmountLimit }" class="form-control" >
                          <input type="text" name="transactionCountLimit[]" value="${ param.transactionCountLimit }" class="form-control" >
                          <button type="button" class="btn btn-danger" onclick="removeExistingInputField(this, 'Edit', '${ param.paymentModeId }')">Remove</button>
                      </div>`
          
        });
      }
      $('#updateInputContainerEdit').html(htmldata);
 
  
  
      // Show the modal
      
      const modal = new bootstrap.Modal(document.getElementById('updateTask'));
      modal.show();
    }

    function addInputField(loopIndex,isUpdate="no") {
        console.log("isUpdate",isUpdate, loopIndex, "pgType" + loopIndex)
    if( isUpdate == "yes"){
        pgType = document.getElementById("pgType" + loopIndex).value;
        console.log("upg=====",pgType)
    }
    else{
        pgType = document.getElementById("pgType").value;
        console.log("pg=====",pgType)
    }
    console.log("pgType1")
    console.log("pgType22")
    var payinApiPaymentModesList = JSON.parse('{{ payinApiPaymentModesList | tojson | safe }}');
    var payoutApiPaymentModesList = JSON.parse('{{ payoutApiPaymentModesList | tojson | safe }}');
    var containerId = "updateInputContainer" + loopIndex;
    console.log("loopIndex",loopIndex)
    var container = document.getElementById(containerId);
    var newDiv = document.createElement('div');
    newDiv.className = 'input-group mb-2 d-flex gap-2 align-items-center flex-wrap';

    // Dropdown 1 - PayIn (Populated from Backend)
    var paymentModeSelect = document.createElement('select');
    paymentModeSelect.name = 'paymentMode[]';
    paymentModeSelect.className = 'form-select chosen-select';
    paymentModeSelect.required = true;
    paymentModeSelect.setAttribute("onchange", "getPaymentModes(this)");
    paymentModeSelect.innerHTML = "<option value=''>Payment Mode</option>";
    
    // defaultOption.disabled = true;
    // paymentModeSelect.appendChild(defaultOption);

    console.log("pgType",pgType)
    console.log("container",container)

    if (pgType === "Payin") {
        console.log("asdasdasdasd")
        console.log("asdasdasdasd")
        payinApiPaymentModesList.forEach(option => {
            var opt = new Option(option.paymentModeName, option.id);
            paymentModeSelect.appendChild(opt);
        });
    } else if (pgType === "Payout") {
        console.log("asdasdasdasdasdasdasdasdasdsadaihyasgF:KJ hbsp; hojt|{SWOREgjp}")
        payoutApiPaymentModesList.forEach(option => {
            var opt = new Option(option.paymentModeName, option.id);
            paymentModeSelect.appendChild(opt);
        });
    }

    var subPaymentModeSelect = document.createElement('select');
    subPaymentModeSelect.name = 'subPaymentMode[]';
    subPaymentModeSelect.className = 'form-select chosen-select';
    subPaymentModeSelect.required = true;
    subPaymentModeSelect.innerHTML = "<option value=''>Sub Payment Mode</option>";

    // Input 1 - Transaction Amount Limit
    var transactionAmountInput = document.createElement('input');
    transactionAmountInput.type = 'text';
    transactionAmountInput.name = 'transactionAmountLimit[]';
    transactionAmountInput.placeholder = 'Amount Limit';
    transactionAmountInput.className = 'form-control';
    transactionAmountInput.required = true;
    transactionAmountInput.min = 0;

    // Input 2 - Transaction Count Limit
    var transactionCountInput = document.createElement('input');
    transactionCountInput.type = 'text';
    transactionCountInput.name = 'transactionCountLimit[]';
    transactionCountInput.placeholder = 'Count Limit';
    transactionCountInput.className = 'form-control';
    transactionCountInput.required = true;
    transactionCountInput.min = 1;

    // Remove Button
    var removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'btn btn-danger';
    removeButton.innerHTML = 'Remove';
    removeButton.onclick = function () {
        container.removeChild(newDiv);
    };

    // Append elements to the div
    newDiv.appendChild(paymentModeSelect);
    newDiv.appendChild(subPaymentModeSelect);
    newDiv.appendChild(transactionAmountInput);
    newDiv.appendChild(transactionCountInput);
    newDiv.appendChild(removeButton);

    // Append to container
    container.appendChild(newDiv);
}


function removeInputField(containerId) {
    var container = document.getElementById(containerId);
    console.log("container",container)
    if (container.children.length > 1) {
        container.removeChild(container.lastChild);
    }
}
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }
</script>
<script type="text/javascript">
    function getPaymentGateways(pgType, variablev, selectedid) {
      console.log("getpayment gateway", selectedid)
    if (pgType) {
        var htmldata = "";
        var csrfToken = $('input[name="csrf_token"]').val()
        $.ajax({
            url: "{{ url_for('transaction_limit_settings.pgtype_based_payment_gateways') }}",
            data: { "pgType": pgType,"csrf_token":csrfToken },
            dataType: "json",
            type: "post",
            success: function(resultdata) {
                if (resultdata.responseStatus == 1) {
                    $.each(resultdata.apiDropdownList, function(key, value) {
                        // Check if value.id is in selectedid (which is an array now)
                        if (selectedid.includes(value.id.toString())){
                            htmldata += "<option selected value='" + value.id + "'>" + value.apiName + "</option>";
                        } else {
                            htmldata += "<option value='" + value.id + "'>" + value.apiName + "</option>";
                        }
                    });
                }

                // Debugging the correct ID before applying the data
                console.log('#paymentGatewayIds' + variablev); 

                // Populate the appropriate select element
                $('#paymentGatewayIds' + variablev).html(htmldata);

                // Reinitialize the chosen plugin for dynamically loaded content
                $('#paymentGatewayIds' + variablev).trigger("chosen:updated");
            },
            error: function(xhr, status, error) {
                console.error("Error fetching payment gateways:", error);
                $('#paymentGatewayIds' + variablev).html(htmldata);
            }
        });
    } else {
        $('#paymentGatewayIds' + variablev).html("<option value=''>Select API Name</option>");
        alert('Please select API Name.');
    }
}

function getPaymentModes(element) {
    var paymentModeId = element.value; // Get selected Payment Mode ID
    var subPaymentModeDropdown = element.nextElementSibling; // Get the corresponding sub-payment dropdown
    var csrfToken = $('input[name="csrf_token"]').val()
    if (!paymentModeId) return; // Exit if no valid payment mode is selected

    $.ajax({
        url: "{{ url_for('admin_reports.get_sub_payment_list_using_payment_mode') }}",
        data: { "paymentModeIdsList": paymentModeId,"csrf_token":csrfToken },  // Send selected Payment Mode ID
        dataType: "json",
        type: "post",
        success: function(resultdata) {
            var htmldata = "<option value=''>Sub Payment Mode</option>";

            if (resultdata.responseStatus == 1) {
                $.each(resultdata.subPaymentsModeList, function(key, value) {
                    htmldata += "<option value='" + value.id + "'>" + value.subPaymentModeType + "</option>";
                });
            }

            // Update the correct sub-payment dropdown
            $(subPaymentModeDropdown).html(htmldata);
        },
        error: function() {
            $(subPaymentModeDropdown).html("<option value=''>Sub Payment Mode</option>");
            alert('Failed to retrieve sub payment modes.');
        }
    });
}


</script>

<!-- 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">Settlement</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">Transaction Limit Setting List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- 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">
                            Transaction Limit Setting List
                        </div>
                        <div class="prism-toggle">
                            {% if 'add' in session.get('txnLimitSettingsPermissions', []) %}
                          <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask" onClick="resetFormDataNew('add_transaction_limit_setting')">
                            <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Transaction Limit Setting
                            </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                        <div class="row">
                            <div class="col-xl-12">
                                <form method="GET" action="{{ url_for('transaction_limit_settings.txn_limit_settings_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" minlength="3" maxlength="75"  
                                            placeholder="Search name">
                                    </div>
                                    
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                        <div class="col-auto">
                                        <a href="{{url_for('transaction_limit_settings.txn_limit_settings_list')}}"><button type="button"
                                            class="btn btn-warning">Reset</button></a>
                                    </div>
                                    {% for error in form.search_element.errors %}
                                    <span class="text-danger" class="error">{{ error }}</span>
                                    {% endfor %}
                                </form>
                            </div>
                        </div>

                        
                            <!-- Add some space -->
                            <div class="mt-3"></div>
                            <!-- End space -->
                            <div class="table-responsive">
                                <table id="datatable-basic" class="table text-nowrap">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">API Names</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Merchant Names</th>
                                        <th scope="col">PG Type</th>
                                        <th scope="col">Code</th>
                                        <th scope="col">Single Txn Lower Limit</th>
                                        <th scope="col">Single Txn Upper Limit</th>
                                        <th scope="col">Daily Txn Limit</th>
                                        <th scope="col">Daily Txn Count</th>
                                        <th scope="col">Minimun Acc. Bal</th>
                                        <th scope="col">Monthly Txn Limit</th>
                                        <th scope="col">Monthly Txn Count</th>
                                        <th scope="col">Is User Wise</th>
                                        {% if 'edit' in session.get('txnLimitSettingsPermissions', []) %}
                                            <th scope="col">Status</th>
                                        {% endif %}
                                        {% if 'edit' in session.get('txnLimitSettingsPermissions', []) %}
                                            <th scope="col">Action</th>
                                        {% elif 'delete' in session.get('txnLimitSettingsPermissions', []) %}
                                            <th scope="col">Action</th>
                                        {% endif %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% if  txnLimitSettingsList %}
                                    {% for each_txn_limit_setting in txnLimitSettingsList %}
                                    <tr>
                                        <td>{{SnoCount+loop.index }}</td>

                                        {% if each_txn_limit_setting.apiNames %}
                                        <td>{{each_txn_limit_setting.apiNames}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_txn_limit_setting.name %}
                                        <td>{{each_txn_limit_setting.name}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_txn_limit_setting.userNames %}
                                        <td>{{each_txn_limit_setting.userNames}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_txn_limit_setting.pgType %}
                                        <td>{{each_txn_limit_setting.pgType}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        {% if each_txn_limit_setting.code %}
                                        <td>{{each_txn_limit_setting.code}}</td>
                                        {% else %}
                                        <td class="centered">-</td>
                                        {% endif %}
                                        

                                        <td>{{each_txn_limit_setting.singleTxnLowerLimit}}</td>
                                        <td>{{each_txn_limit_setting.singleTxnUpperLimit}}</td>
                                        <td>{{each_txn_limit_setting.dailyTxnLimit}}</td>
                                        <td>{{each_txn_limit_setting.dailyTxnCount}}</td>
                                        <td>{{each_txn_limit_setting.minimunAccountBalance}}</td>
                                        <td>{{each_txn_limit_setting.monthlyTxnLimit}}</td>
                                        <td>{{each_txn_limit_setting.monthlyTxnCount}}</td>
                                        <td>{{each_txn_limit_setting.isUserWise}}</td>

                                        {% if 'edit' in session.get('txnLimitSettingsPermissions', []) %}
                                        <td>
                                            {% if each_txn_limit_setting.actionText == "Active" %}
                                                <a class="btn btn-sm btn-success" href="{{ url_for('transaction_limit_settings.update_txn_limit_setting_status', txnLimitSettingId=each_txn_limit_setting.id, search_element=search_element, page=page) }}" data-requires-location>{{each_txn_limit_setting.actionText}}</a>
                                            {% else %}
                                                <a class="btn btn-sm btn-warning" href="{{ url_for('transaction_limit_settings.update_txn_limit_setting_status', txnLimitSettingId=each_txn_limit_setting.id, search_element=search_element, page=page) }}" data-requires-location>{{each_txn_limit_setting.actionText}}</a>
                                            {% endif %}
                                        </td>
                                         {% endif %}

                                        <td>
                                            {% if 'edit' in session.get('txnLimitSettingsPermissions', []) %}
                                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                                            onclick='resetFormDataNew("updateTaskForm");openUpdateTaskModal({
                                                "id": {{each_txn_limit_setting.id | tojson}},
                                                "name": "{{each_txn_limit_setting.name}}",
                                                "userNames": "{{each_txn_limit_setting.userNames}}",
                                                "userIds":"{{each_txn_limit_setting.userIds}}",
                                                "pgType":"{{each_txn_limit_setting.pgType}}",
                                                "code": "{{each_txn_limit_setting.code}}",
                                                "singleTxnLowerLimit": "{{each_txn_limit_setting.singleTxnLowerLimit}}",
                                                "singleTxnUpperLimit":"{{each_txn_limit_setting.singleTxnUpperLimit}}",
                                                "dailyTxnLimit":"{{each_txn_limit_setting.dailyTxnLimit}}",
                                                "dailyTxnCount": "{{each_txn_limit_setting.dailyTxnCount}}",
                                                "minimunAccountBalance": "{{each_txn_limit_setting.minimunAccountBalance}}",
                                                "monthlyTxnLimit":"{{each_txn_limit_setting.monthlyTxnLimit}}",
                                                "monthlyTxnCount":"{{each_txn_limit_setting.monthlyTxnCount}}",
                                                "isUserWise":"{{each_txn_limit_setting.isUserWise}}",
                                                "paymentGatewayIds":"{{each_txn_limit_setting.paymentGatewayIds}}",
                                                "paymodeWiseLimitList":{{each_txn_limit_setting.paymodeWiseLimitList}}

                                                })'>
                                                <i class="ri-edit-line"></i>
                                            </a>
                                            {% endif %}
                                            {% if 'delete' in session.get('txnLimitSettingsPermissions', []) %}
                                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('transaction_limit_settings.delete_txn_limit_setting', txnLimitSettingId=each_txn_limit_setting.id, search_element=search_element, page=page) }}')"
                                                class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                                    class="ri-delete-bin-line"></i></a>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                   {% else %}
                                    <tr ><td colspan="18" style="text-align: center;">No Data Found</td> </tr>
                                    {% endif %}
                                </tbody>
                                {% 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 %}
                                </table>
                               
                            </div>
                            <div class="col-sm-12 col-md-12 mt-3">
                              <nav aria-label="Page navigation" class="pagination-style-1">
                                  <ul class="pagination mb-0">
                                      {% if pagination %}
                                      <div class="pagination">
                                          {{ pagination.links }}
                                      </div>
                                      {% endif %}
                                  </ul>
                              </nav>
                          </div>
                            <!-- Add some space -->
                            <!-- <div class="col-sm-12 col-md-5 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                  <ul class="pagination mb-0">
                                      <li class="page-item disabled">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-left-s-line align-middle"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                      <li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="bi bi-three-dots"></i>
                                          </a>
                                      </li>
                                      <li class="page-item"><a class="page-link" href="javascript:void(0);">21</a></li>
                                      <li class="page-item">
                                          <a class="page-link" href="javascript:void(0);">
                                              <i class="ri-arrow-right-s-line align-middle"></i>
                                          </a>
                                      </li>
                                  </ul>
                              </nav>
                            </div> -->
                            <!-- End space -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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



<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog custom-modal-width modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Add Transaction Limit Setting</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('transaction_limit_settings.add_transaction_limit_setting')}}" enctype="multipart/form-data" id="add_transaction_limit_setting">
                <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">
                <!-- Add your form fields here -->
                <div class="modal-body">
                    <div class="row">
                            <div class="col-md-6">
                              <label for="pgType">PG Type*</label>
                               
                                    <!-- <select class="form-control" name="pgType" id="pgType" required onchange="getPaymentGateways(this.value, 'add', '');toggleDropdowns()"> -->
                                    <select class="form-select" name="pgType" id="pgType" required onchange="getPaymentGateways(this.value, 'add', '')">
                                        <option value="">Select</option>
                                        <option value="Payin">Payin</option>
                                        <option value="Payout">Payout</option>
                                    </select>
                                    <span id="pgType_error" class="error"></span>
                                
                            </div>

                            <!-- Payment Gateway Dropdown -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="paymentGatewayIds">Payment Gateways*</label>
                                    <select class="form-control chosen-select" name="paymentGatewayIds" id="paymentGatewayIdsadd" data-placeholder="Select api name" multiple required>
                                        <option value="">Select</option>
                                        <!-- {% for each_pg in apiDropdownList %}
                                            <option data-transactionType="{{each_pg.transactionType}}" value="{{each_pg.id}}">{{each_pg.apiName}}</option>
                                        {% endfor %} -->
                                    </select>
                                    <span id="paymentGatewayIds_error" class="error"></span>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="name">Name*</label>
                                  <input type="text" class="form-control" id="name" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" placeholder="Please enter name" required>
                                  <span id="name_error" class="error"></span>
                                </div>
                             </div>
                             
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="code">Code*</label>
                                  <input type="text" class="form-control" id="code" name="code" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Code must contain only alphanumeric characters , spaces, and specific special characters: @#$()+_-/" placeholder="Enter code" required>
                                  <span id="code_error" class="error"></span>
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="singleTxnLowerLimit">Single Txn Lower Limit*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="singleTxnLowerLimit" name="singleTxnLowerLimit" placeholder="Enter single txn lower limit" required>
                                  <span id="singleTxnLowerLimit_error" class="error"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="singleTxnUpperLimit">Single Txn Upper Limit*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="singleTxnUpperLimit" name="singleTxnUpperLimit" placeholder="Enter single txn upper limit" required>
                                  <span id="singleTxnUpperLimit_error" class="error"></span>
                                </div>
                            </div>


                            <div class="col-md-6"> 
                                <div class="form-group">
                                  <label for="dailyTxnLimit">Daily Txn Limit*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="dailyTxnLimit" name="dailyTxnLimit" placeholder="Enter daily txn limit" required>
                                  <span id="dailyTxnLimit_error" class="error"></span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="dailyTxnCount">Daily Txn Count*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="dailyTxnCount" name="dailyTxnCount" placeholder="Enter daily txn count" required>
                                  <span id="dailyTxnCount_error" class="error"></span>
                                </div>
                            </div>
                            

                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="minimunAccountBalance">Minimun Acc. Bal*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="minimunAccountBalance" name="minimunAccountBalance" placeholder="Enter minimun acc. bal" required>
                                  <span id="minimunAccountBalance_error" class="error"></span>
                                </div>
                            </div>
                                
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="monthlyTxnLimit">Monthly Txn Limit*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="monthlyTxnLimit" name="monthlyTxnLimit" placeholder="Enter monthly txn limit" required>
                                  <span id="monthlyTxnLimit_error" class="error"></span>
                                </div>
                            </div>
                                
                            <div class="col-md-6">
                                <div class="form-group">
                                  <label for="monthlyTxnCount">Monthly Txn Count*</label>
                                  <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="monthlyTxnCount" name="monthlyTxnCount" placeholder="Enter monthly txn count" required>
                                  <span id="monthlyTxnCount_error" class="error"></span>
                                </div>
                            </div>
                                
                            <div class="col-md-6">
                                <div class="horizontal-checkboxes form-check">
                                    <label class="form-check-label" for="isUserWise">Is User Wise</label>
                                    <input type="checkbox" class="form-check-input" name="isUserWise" value="True" id="myCheck" onclick="ShowHideDiv(this)">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group" id="userIdList" style="display: none">
                                  <label for="userIds">User Name*</label>
                                  <select class="form-control chosen-select" name="userIds" id="userId" data-placeholder="Select user name" multiple>
                                  {% for each_user in userList %} 
                                    <option value="{{each_user.id}}">{{each_user.fullName}}</option>
                                  {% endfor %}          
                                </select>
                                <span id="userIds_error" class="error"></span>
                                </div>
                            </div>
                            <div class="form-group" id="updateInputContainer" style="padding-top: 10px">
                                <label for="params">Payment Mode Wise Transaction Limits</label>
                                <br>
                                <br>
                                <!--
                                <select name="payinType[]" class="form-select mb-2" required>
                                    <option value="">Select PayIn Type</option>
                                    {% for option in payinApiPaymentModesList %}
                                    <option value="{{ option.id }}">{{ option.apiName }}</option>
                                    {% endfor %}
                                </select>
                                <select name="payoutType[]" class="form-select mb-2" required>
                                    <option value="">Select Payout Type</option>
                                    {% for option in payoutApiPaymentModesList %}
                                    <option value="{{ option.id }}">{{ option.apiName }}</option>
                                    {% endfor %}
                                </select> -->
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary-light rounded-pill btn-wave" onclick="addInputField('')">Add Txn Limit</button>
                                <!-- <button type="button" class="btn btn-danger-light rounded-pill btn-wave" onclick="removeExistingInputField(this, '', '')">Remove Txn Limit</button> -->
                            </div>

                    
                            <div class="modal-footer justify-content-between">
                              <button type="button" class="btn btn-default" data-bs-dismiss="modal" aria-label="Close">Close</button>
                              <button type="submit" class="btn btn-primary form_submit">Submit</button>
                            </div>
                        </div>

                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

<!-- Update Bank Modal -->
<div class="modal fade" id="updateTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel" aria-hidden="true">
    <div class="modal-dialog custom-modal-width modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel">Update Transaction Limit Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" enctype="multipart/form-data" id="updateTaskForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                     <input type="hidden" id="latitude_update" name="latitude">
                    <input type="hidden" id="longitude_update" name="longitude">
                <div class="row">
                    <div class="col-md-6">
                       <label for="pgTypeEdit">PG Type*</label>
                       
                           
                            <select class="form-control" name="pgType" id="pgTypeEdit" onchange="getPaymentGateways(this.value, 'Edit', '')" required>
                                <option value="">Select</option>
                            </select>
                            <span id="pgType_edit_error" class="error"></span>
                       
                    </div>

                    <div class="col-md-6">
                      <label for="paymentGatewayIds">API Name*</label>
                      
                            
                            <select class="form-control chosen-select" id="paymentGatewayIdsEdit" data-placeholder="Select api name" name="paymentGatewayIds" multiple required>
                            </select>
                            <span id="paymentGatewayIds_edit_error" class="error"></span>
                      
                    </div>


                     
                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="name">Name*</label>
                          <input type="text" class="form-control" id="editName" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  required>
                          <span id="name_edit_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="code">Code*</label>
                          <input type="text" class="form-control" id="editCode" name="code" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" required>
                          <span id="code_edit_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="singleTxnLowerLimit">Single Txn Lower Limit*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editSingleTxnLowerLimit" name="singleTxnLowerLimit"  required>
                          <span id="singleTxnLowerLimit_edit_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="singleTxnUpperLimit">Single Txn Upper Limit*</label>
                          <input type="text" class="form-control" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." id="editSingleTxnUpperLimit" name="singleTxnUpperLimit"  required>
                        <span id="singleTxnUpperLimit_edit_error" class="error"></span>
                        </div>
                    </div>
                    

                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="dailyTxnLimit">Daily Txn Limit*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editDailyTxnLimit" name="dailyTxnLimit" required>
                          <span id="dailyTxnLimit_edit_error" class="error"></span>
                        </div>
                    </div>
                        
                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="dailyTxnCount">Daily Txn Count*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editDailyTxnCount" name="dailyTxnCount" required>
                          <span id="dailyTxnCount_edit_error" class="error"></span>
                        </div>
                    </div>
                        
                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="minimunAccountBalance">Minimun Acc. Bal*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editMinimunAccountBalance" name="minimunAccountBalance"  required>
                          <span id="minimunAccountBalance_edit_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="monthlyTxnLimit">Monthly Txn Limit*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editMonthlyTxnLimit" name="monthlyTxnLimit"  required>
                          <span id="monthlyTxnLimit_edit_error" class="error"></span>
                        </div>
                    </div>
                        
                    <div class="col-md-6">
                        <div class="form-group">
                          <label for="monthlyTxnCount">Monthly Txn Count*</label>
                          <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" title="Please enter a valid number." class="form-control" id="editMonthlyTxnCount" name="monthlyTxnCount"  required>
                          <span id="monthlyTxnCount_edit_error" class="error"></span>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="horizontal-checkboxes form-check">
                            <label for="isUserWise">Is User Wise</label>
                            <input type="checkbox" class="form-check-input" id="editIsUserWise" 
                                   name="isUserWise" value="True" onclick="ShowHide(this, 'userIdupdateList')" >
                        </div>
                    </div>
                    <div class="form-group" id="userIdupdateList">
                        <label for="userIds">User Name*</label>
                        <select class="form-control chosen-select" id="editUserIds" name="userIds" multiple>
                        </select>
                        <span id="userIds_edit_error" class="error"></span>
                    </div>
                    <div class="form-group" id="updateInputContainerEdit">
                      <label for="params">Payment Mode Wise Limit List</label>
                      <br>
                      <div id="updateInputPaymentModeContainer"></div>
                  </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" onclick="addInputField('Edit', 'yes')">Add Param</button>
                    </div>


                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-default" data-bs-dismiss="modal" aria-label="Close">Close</button>
                          <button type="submit" class="btn btn-primary form_submit">Update</button>
                        </div> 

            </div>       


                <!-- Add more edit form fields as needed -->
               
              </form>
            </div>
        </div>
    </div>
</div>
<!-- End Update Bank Modal -->



<script>
    function ShowHide(myCheckupdate, id) {
    var userIdupdateList = document.getElementById(id);
    userIdupdateList.style.display = myCheckupdate.checked ? "block" : "none";

}

</script>


<script>
    function ShowHideDiv(myCheck) {
        var userIdList = document.getElementById("userIdList");
        userIdList.style.display = myCheck.checked ? "block" : "none";
    }
function removeExistingInputField(button, loopIndex, paymentModeId) {
    var containerId = loopIndex ? "updateInputContainer" + loopIndex : "updateInputContainer"; 
    var container = document.getElementById(containerId);
    var parentDiv = button.closest('.input-group'); 

    if (!container || !parentDiv) {
        console.error("Error: The container or node to be removed is not found.");
        return;
    }
    container.removeChild(parentDiv);

    // if (paymentModeId) {
    //     // Mark for deletion in backend
    //     var deleteInput = document.createElement("input");
    //     deleteInput.type = "hidden";
    //     deleteInput.name = "deletePaymentModes[]"; 
    //     deleteInput.value = paymentModeId;
    //     parentDiv.appendChild(deleteInput);

    //     // Hide instead of deleting (Backend handles deletion)
    //     parentDiv.style.display = "none";
    // } else {
    //     // Directly remove for newly added rows
    //     container.removeChild(parentDiv);
    // }
}


</script>


<script type="text/javascript">

    $(document).ready(function () {
      $('#add_transaction_limit_setting').validate({
        rules: {
            pgType: {
            required: true,
          },
          paymentGatewayIds:{
            required: true,
            // minlength: 24,
            // maxlength: 24,
          },
          name: {
            required: true,
            minlength: 3,
            maxlength: 75,
          },
          code:{
            required: true,
            minlength: 1,
            maxlength: 15

          },
          singleTxnLowerLimit: {
            required: true,
            minlength: 0,
            maxlength: 10

          },
          singleTxnUpperLimit:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          dailyTxnLimit:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          dailyTxnCount:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          minimunAccountBalance:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          monthlyTxnLimit:{
            required: true,
            minlength: 0,
            maxlength: 10},
          monthlyTxnCount:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          userIds:{
            required : false
          }
        },
        messages: {
            pgType: {
            required: 'PG Type is required',
          },
          paymentGatewayIds: {
            required: 'Payment Gateway is required'
          },
          name:{
            required: "Name is required",
            minlength: 'Name is must be greaterthan or equals to 3 charecters',
            maxlength: 'Name is must be lessthan or equals to 75 charecters',
          },
          code:{
            required: "Code is required",
            minlength: 'Code is must be greaterthan or equals to 1 charecters',
            maxlength: 'Code is must be lessthan or equals to 15 charecters',
          },
          singleTxnLowerLimit:{
            required: "Single Txn Lower Limit is required",
            minlength: 'Single Txn Lower Limit is must be greaterthan or equals to 0',
            maxlength: 'Single Txn Lower Limit is must be lessthan or equals to 10 digits',
          },
          singleTxnUpperLimit:{
            required: "Single Txn Upper Limit is required",
            minlength: 'Single Txn Upper Limit is must be greaterthan or equals to 0',
            maxlength: 'Single Txn Upper Limit is must be lessthan or equals to 10 digits',
          },
          dailyTxnLimit:{
            required: "Daily Txn Limit is required",
            minlength: 'Daily Txn Limit Limit is must be greaterthan or equals to 0',
            maxlength: 'Daily Txn Limit Limit is must be lessthan or equals to 10 digits',
          },
          dailyTxnCount:{
            required: "Daily Txn Count Limit is required",
            minlength: 'Daily Txn Count Limit is must be greaterthan or equals to 0',
            maxlength: 'Daily Txn Count Limit is must be lessthan or equals to 10 digits',
          },
          minimunAccountBalance:{
            required: "Minimum Acount Balance Limit is required",
            minlength: 'Minimum Acount Balance is must be greaterthan or equals to 0',
            maxlength: 'Minimum Acount Balance is must be lessthan or equals to 10 digits',
          },
          monthlyTxnLimit:{
            required: "Monthly Txn Limit is required",
            minlength: 'Monthly  Txn Limit Limit is must be greaterthan or equals to 0',
            maxlength: 'Monthly Txn Limit Limit is must be lessthan or equals to 10 digits',
          },
          monthlyTxnCount:{
            required: "Monthly Txn Count Limit is required",
            minlength: 'Monthly Txn Count Limit is must be greaterthan or equals to 0',
            maxlength: 'Monthly Txn Count Limit is must be lessthan or equals to 10 digits',
          },
          userIds:{
            required: "User Name cannot be empty"
          }
        },
        submitHandler: function (form, event) {
          $('.form_submit').prop('disabled', true);
		  $('#newLoadingModel').show();
          event.preventDefault();
          getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                  $.ajax({
                    url: form.action,
                    type: form.method,
                    data: $(form).serialize(),
                    xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                    success: function (response) {
                      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)
                        });
                        return false;
                      } else if (response.responseStatus == 2) {
                        $('.form_submit').prop('disabled', false);
        				        $('#newLoadingModel').hide();
                        $('#errorMessage').text(response.result);
                        return false;
                      } else {
                        location.reload();
                      }
          
                    },
                        error: function (xhr) {
                            // You can also reload page after error (e.g. CSRF token mismatch)
                            location.reload();
                        }
                  });
                },
                function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }
              });
  
  
      $('#updateTaskForm').validate({
        rules: {
            pgType: {
            required: true,
          },
          paymentGatewayIds:{
            required: true,
          },
          name: {
            required: true,
            minlength: 3,
            maxlength: 75,
          },
          code:{
            required: true,
            minlength: 1,
            maxlength: 15

          },
          singleTxnLowerLimit: {
            required: true,
            minlength: 0,
            maxlength: 10

          },
          singleTxnUpperLimit:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          dailyTxnLimit:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          dailyTxnCount:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          minimunAccountBalance:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          monthlyTxnLimit:{
            required: true,
            minlength: 0,
            maxlength: 10},
          monthlyTxnCount:{
            required: true,
            minlength: 0,
            maxlength: 10
          },
          userIds:{
            required : false
          }
        },
        messages: {
            pgType: {
            required: 'PG Type is required',
          },
          paymentGatewayIds: {
            required: 'Payment Gateway is required'
          },
          name:{
            required: "Name is required",
            minlength: 'Name is must be greaterthan or equals to 3 charecters',
            maxlength: 'Name is must be lessthan or equals to 75 charecters',
          },
          code:{
            required: "Code is required",
            minlength: 'Code is must be greaterthan or equals to 1 charecters',
            maxlength: 'Code is must be lessthan or equals to 15 charecters',
          },
          singleTxnLowerLimit:{
            required: "Single Txn Lower Limit is required",
            minlength: 'Single Txn Lower Limit is must be greaterthan or equals to 0',
            maxlength: 'Single Txn Lower Limit is must be lessthan or equals to 10 digits',
          },
          singleTxnUpperLimit:{
            required: "Single Txn Upper Limit is required",
            minlength: 'Single Txn Upper Limit is must be greaterthan or equals to 0',
            maxlength: 'Single Txn Upper Limit is must be lessthan or equals to 10 digits',
          },
          dailyTxnLimit:{
            required: "Daily Txn Limit is required",
            minlength: 'Daily Txn Limit Limit is must be greaterthan or equals to 0',
            maxlength: 'Daily Txn Limit Limit is must be lessthan or equals to 10 digits',
          },
          dailyTxnCount:{
            required: "Daily Txn Count Limit is required",
            minlength: 'Daily Txn Count Limit is must be greaterthan or equals to 0',
            maxlength: 'Daily Txn Count Limit is must be lessthan or equals to 10 digits',
          },
          minimunAccountBalance:{
            required: "Minimum Acount Balance Limit is required",
            minlength: 'Minimum Acount Balance is must be greaterthan or equals to 0',
            maxlength: 'Minimum Acount Balance is must be lessthan or equals to 10 digits',
          },
          monthlyTxnLimit:{
            required: "Monthly Txn Limit is required",
            minlength: 'Monthly  Txn Limit Limit is must be greaterthan or equals to 0',
            maxlength: 'Monthly Txn Limit Limit is must be lessthan or equals to 10 digits',
          },
          monthlyTxnCount:{
            required: "Monthly Txn Count Limit is required",
            minlength: 'Monthly Txn Count Limit is must be greaterthan or equals to 0',
            maxlength: 'Monthly Txn Count Limit is must be lessthan or equals to 10 digits',
          },
          userIds:{
            required: "User Name cannot be empty"
          }
        },
        submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
		  $('#newLoadingModel').show();
          event.preventDefault();
          getLocationAndProceed(
                function (lat, lng) {
                   
                    $(form).find('input[name="latitude"]').val(lat);
                    $(form).find('input[name="longitude"]').val(lng);
                      $.ajax({
                        url: form.action,
                        type: form.method,
                        data: $(form).serialize(),
                        xhrFields: {
                                            withCredentials: true   // THIS ensures cookies/session are sent
                                        },
                        success: function (response) {
                          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 + "_edit_error").text(value)
                            });
                            return false;
                          } else if (response.responseStatus == 2) {
                            $('.form_submit').prop('disabled', false);
            				        $('#newLoadingModel').hide();
                            $('#EditErrorMessage').text(response.result);
                            return false;
                          } else {
                            location.reload();
                          }
              
                        },
                         error: function (xhr) {
                               location.reload();
                                        }
                      });
                    },
                     function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                    alert("Location access is required to proceed. Please enable it in your browser.");
                            }
                        );
                    }
                  });
                });
  </script>
  
{% endblock %}