{% extends 'super_admin_templates/base.html' %}

{% block content %}
<!-- Content Wrapper. Contains page content -->
<style>
  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 openaddModal(each_modal) {
    $('#verifyaddDiv').hide();
    $('#updateaddGenerateBtn').text('Generate OTP').prop('disabled', false).show();

  }
</script>
<script>
  function openaddassignModal(each_modal) {
    $('#verifyaddassignDiv').hide();
    $('#updateaddassignGenerateBtn').text('Generate OTP').prop('disabled', false).show();

  }
</script>
<script>
  function addInputField(containerId) {
    var container = document.getElementById(containerId);
    var newDiv = document.createElement('div');
    newDiv.className = 'input-group mb-2';

    var newInputKey = document.createElement('input');
    newInputKey.type = 'text';
    newInputKey.name = 'inputKeyField[]';
    newInputKey.placeholder = 'Enter Param Key';
    newInputKey.className = 'form-control';

    var newInputValue = document.createElement('input');
    newInputValue.type = 'text';
    newInputValue.name = 'inputValueField[]';
    newInputValue.placeholder = 'Enter Param Value';
    newInputValue.className = 'form-control';

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

    newDiv.appendChild(newInputKey);
    newDiv.appendChild(newInputValue);
    newDiv.appendChild(removeButton);
    container.appendChild(newDiv);
  }

  function removeParamsField(containerId) {
    var container = document.getElementById(containerId);
    if (container.children.length > 1) {
      container.removeChild(container.lastChild);
    }
  }
</script>

<script>
  function openKycApiUpdateModal(each_modal) {
    $('#verifyKycDiv').hide();
    $('#updateGenerateKycBtn').text('Generate OTP').prop('disabled', false).show();
    // Set the form action URL using the ID
    const updateKycApiBaseURL = "{{ url_for('kyc_apis.update_kyc_apis', kycApiId='__ID__') }}";
    const formAction = updateKycApiBaseURL.replace('__ID__', each_modal.id);
    document.getElementById('defaultVerificationIdu').value = each_modal.id || '';
    document.getElementById('updateKycApiForm').action = formAction;
    resetFormDataNew('updateKycApiForm');

    console.log("((((((((((((((each_modal))))))))))))))", each_modal);

    // Populate the form fields
    document.getElementById('editApiName').value = each_modal.apiName || '';
    document.getElementById('editCode').value = each_modal.code || '';

    const inputContainer = document.getElementById('updateInputContainer');
    inputContainer.innerHTML = '<label for="params">Parameters</label><br>';

    // Step 2: Re-add input groups based on paramsList
    (each_modal.paramsList || []).forEach((param, index) => {
      const div = document.createElement('div');
      div.className = 'input-group mb-2';
      div.innerHTML = `
                <input type="text" name="inputKeyField[]" placeholder="Enter Param Key"
                    value="${param.key || ''}" class="form-control" readonly>
                <input type="text" name="inputValueField[]" placeholder="Enter Param Value"
                    value="${param.value || ''}" class="form-control">
                <button type="button" class="btn btn-danger" onclick="this.parentElement.remove()">Remove</button>
            `;
      inputContainer.appendChild(div);
    });

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('updatekycTask'));
    modal.show();
  }
</script>
<script>
function openUpdateAssignModal(each_modal) {
  $('#verifyDiv').hide();
  $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
  
  const updateKycApiBaseURL = "{{ url_for('kyc_apis.update_assign_kyc', AssignKycId='__ID__') }}";
  const formAction = updateKycApiBaseURL.replace('__ID__', each_modal.id);

  document.getElementById('defaultVerificationIdassign').value = each_modal.id || '';
  document.getElementById('updateAssignKycForm').action = formAction;
  resetFormDataNew('updateAssignKycForm');

  document.getElementById('editKycApiId').value = each_modal.kycApiId || '';
  document.getElementById('editKycApiId_display').value = each_modal.kycApiId || '';


  const documentNameList = each_modal.documentNameList || [];
  const selectElement = document.getElementById('editDocumentNameList');
  const options = selectElement.options;

  for (let option of options) {
    option.selected = documentNameList.includes(option.value);
  }

  $(selectElement).trigger('chosen:updated');

  // Show modal
  const modal = new bootstrap.Modal(document.getElementById('updateassignkyc'));
  modal.show();
}
</script>




<script>
  function opendeletekycModal(each_modal) {
    $('#verifydeleteKycDiv').hide();
    $('#updateGeneratedeleteKycBtn').text('Generate OTP').prop('disabled', false).show();
    const deleteKycApiBaseURL = "{{ url_for('kyc_apis.delete_kyc_api', kycApiId='__ID__',search_element='__SEARCH__',kycApisPage='__PAGE__') }}";
    const formAction = deleteKycApiBaseURL.replace('__ID__', each_modal.id).replace('__SEARCH__', encodeURIComponent(each_modal.search_element)).replace('__PAGE__', encodeURIComponent(each_modal.kycApisPage));

    // Set the form action
    document.querySelector('#kycapiDeleteModal form').action = formAction;

    // Set the hidden ID field
    document.getElementById('defaultVerificationIddeletekycapi').value = each_modal.id || '';

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('kycapiDeleteModal'));
    modal.show();
  }
</script>


<script>
  function opendeleteAssignkycModal(each_modal) {
    $('#verifydeleteAssignKycDiv').hide();
    $('#updateGeneratedeleteAssignKycBtn').text('Generate OTP').prop('disabled', false).show();
    const deleteAssignKycApiBaseURL = "{{ url_for('kyc_apis.delete_assign_kyc', AssignKycId='__ID__', search_element_assign_kyc='__SEARCH__',assignKycPage='__PAGE__') }}";
    const formAction = deleteAssignKycApiBaseURL.replace('__ID__', each_modal.id).replace('__SEARCH__', encodeURIComponent(each_modal.search_element_assign_kyc)).replace('__PAGE__', encodeURIComponent(each_modal.assignKycPage));

    // Set the form action
    document.querySelector('#assignkycapiDeleteModal form').action = formAction;
    document.getElementById('defaultVerificationIddeleteassignkycapi').value = each_modal.id || '';
    

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('assignkycapiDeleteModal'));
    modal.show();


  }

</script>


<script>

  // document.querySelector('form').addEventListener('submit', function (event) {
  //   // Optionally, you can remove this if you want the form to submit after updates.
  //   // event.preventDefault(); // Prevent the default form submission behavior
  // });

  function updateFinalPrice(index) {
    console.log("Updating final price for index:", index);

    // Get the row based on the index
    let row = document.querySelector(`tr[data-index="${index}"]`);

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

    // Get the fields in the row
    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[]']");

    // Ensure all required fields are present
    if (!gstIncludeField || !gstValueField || !tdsIncludeField || !tdsValueField || !chargeValueField || !finalPriceField) {
      console.error(`One or more required fields are missing for index: ${index}`);
      return;
    }

    // Get the values from the fields
    let chargeValue = parseFloat(chargeValueField.value) || 0;
    let gstInclude = gstIncludeField.value;
    let gstValue = parseFloat(gstValueField.value) || 0;
    let tdsInclude = tdsIncludeField.value;
    let tdsValue = parseFloat(tdsValueField.value) || 0;

    // Log the values for debugging
    console.log("Charge Value:", chargeValue, "GST Include:", gstInclude, "GST Value:", gstValue, "TDS Include:", tdsInclude, "TDS Value:", tdsValue);

    // Calculate the final price based on the charge value, GST, and TDS
    let finalPrice = chargeValue;

    // Add GST if applicable
    if (gstInclude === "Yes") {
      finalPrice += (chargeValue * (gstValue / 100));
    }

    // Add TDS if applicable
    if (tdsInclude === "Yes") {
      finalPrice += (chargeValue * (tdsValue / 100));
    }

    // Set the final price field value
    finalPriceField.value = finalPrice.toFixed(2);
  }

</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">API Master</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">KYC API</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">
            <div class="card-title">
              KYC API List
            </div>
          </div>

          <div class="card-body">
            <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
              {% if 'view' in session.get('kycApiPermissions', []) %}
              <a class="nav-link {% if redirectval == 'KycApis' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                aria-current="page" href="#nav-kyc_api" aria-selected="true">KYC API</a>
              {% endif %}
              {% if 'view' in session.get('assignKycPermissions', []) %}
              <a class="nav-link {% if redirectval == 'AssignKyc' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-assign_kyc" aria-selected="false">Assign Kyc</a>
              {% endif %}
              {% if 'edit' in session.get('kycApiChargePermissions', []) %}
              <a class="nav-link {% if redirectval == 'ApiAggregator' %}active{% endif %}" data-bs-toggle="tab"
                role="tab" href="#nav-api_aggregator" aria-selected="false">KYC API Charge</a>
              {% endif %}
            </nav>

            <center>
              {% if error %}
              <h2><b>
                  <center style="color:RED">{{ error }}</center>
                </b></h2>
              {% endif %}
            </center>

            <div class="tab-content">


              <div class="tab-pane fade {% if redirectval == 'KycApis' %}show active{% endif %}" id="nav-kyc_api"
                role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('kyc_apis.kyc_apis_list')}}"
                        class="row gy-2 gx-3 align-items-center">

                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{search_element}}" name="search_element"
                            id="search_element" minlength="3" maxlength="75" placeholder="Search element"
                            pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$"
                            title="Api Name can only contain letters, numbers, spaces, and special characters: @ # $ ( ) + _ - / .">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{url_for('kyc_apis.kyc_apis_list')}}"><button type="button"
                              class="btn btn-warning">Reset</button></a>
                        </div>
                        {% for error in kycApiform.search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        {% if 'add' in session.get('kycApiPermissions', []) %}
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addtask" onclick="resetFormDataNew('addKycApiForm');openaddModal({})">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Kyc Api
                        </button>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap" style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                        <th scope="col">S.No</th>
                        <th scope="col">ApiName</th>
                        <th scope="col">ApiCode</th>
                        <th scope="col">Parameters</th>
                        {% if 'edit' in session.get('kycApiPermissions', []) %}
                            <th scope="col">Status</th>
                        {% endif %}
                        {% if 'edit' in session.get('kycApiPermissions', []) %}
                            <th scope="col">Actions</th>
                        {% elif 'delete' in session.get('kycApiPermissions', []) %}
                            <th scope="col">Actions</th>
                        {% endif %}

                      </tr>
                    </thead>

                    <tbody>
                      {% if kycAPIList %}
                      {% for each_kyc_api in kycAPIList %}
                      <tr>
                        <td>{{kycApissnoCount+loop.index}}</td>

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

                        <td>
                          <button type="button" class="btn btn-icon btn-sm btn-warning-transparent rounded-pill"
                            data-bs-toggle="modal" data-bs-target="#viewKycAPIModal{{ loop.index }}">
                            <i class="ri-eye-line"></i>
                          </button>

                          <div class="modal fade" id="viewKycAPIModal{{ loop.index }}" tabindex="-1" role="dialog"
                            aria-labelledby="viewKycAPIModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title" id="viewKycAPIModalLabel">View Parameters</h5>
                                  <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                  <form method="POST"
                                    action="{{ url_for('kyc_apis.update_kyc_apis', kycApiId=each_kyc_api.id) }}"
                                    enctype="multipart/form-data">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token()}}">

                                    <div class="form-group">
                                      <div class="row">
                                        {% for each_dict in each_kyc_api.paramsList %}
                                        <div class="col-md-6 mb-3">
                                          <label for="apiName">{{ each_dict.get('key', '') }}</label>
                                          <input type="text" class="form-control"
                                            value="{{ each_dict.get('value', '') }}" readonly>
                                        </div>
                                        {% endfor %}
                                      </div>
                                    </div>
                                  </form>
                                </div>
                              </div>
                            </div>
                          </div>

                        </td>

                        {% if 'edit' in session.get('kycApiPermissions', []) %}
                        <td>
                          {% if each_kyc_api.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('kyc_apis.update_kyc_api_status', kycApiId=each_kyc_api.id,search_element=search_element,kycApisPage=kycApisPage) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('kyc_apis.update_kyc_api_status',  kycApiId=each_kyc_api.id,search_element=search_element,kycApisPage=kycApisPage) }}" data-requires-location>Deactivate</a>
                          {% endif %}
                        </td>
                        {% endif %}



                        <td>
                          {% if 'edit' in session.get('kycApiPermissions', []) %}
                          <a href="javascript:void(0);" onclick='openKycApiUpdateModal({
                              "id": "{{ each_kyc_api.id }}",
                              "apiName": "{{ each_kyc_api.apiName }}",
                              "code": "{{ each_kyc_api.code }}", 
                              "paramsList": {{ each_kyc_api.paramsList | tojson}} ,         
                          })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>
                          {% endif %}
                          <!--  <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('kyc_apis.delete_kyc_api', kycApiId=each_kyc_api.id) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a> -->


                          {% if 'delete' in session.get('kycApiPermissions', []) %}
                          <!--  <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-danger-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#kycapiDeleteModal{{ loop.index }}">
                                      <i class="ri-delete-bin-line"></i>
                            </a-->
                          <a href="javascript:void(0);" onclick='opendeletekycModal({
                                  "id": "{{ each_kyc_api.id }}", 
                                  "kycApisPage":"{{kycApisPage}}",
                                  "search_element":"{{search_element}}"       
                              })' class="btn btn-icon btn-sm btn-danger-transparent rounded-pill">
                            <i class="ri-delete-bin-line"></i>
                          </a>
                          {% endif %}

                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="12" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "KycApis_success" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "KycApis_danger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>  
                     {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 kycApispagination %}
                      <div class="pagination">
                        {{ kycApispagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>



              <div class="modal fade" id="kycapiDeleteModal" tabindex="-1" role="dialog"
                aria-labelledby="kycapiDeleteModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="kycapiDeleteModalLabel">OTP Verification</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" data-requires-location>
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_deletekyc" name="latitude">
                            <input type="hidden" id="longitude_deletekyc" name="longitude">
                         <input type="hidden" name="defaultVerificationId" id="defaultVerificationIddeletekycapi">


                        <div class="form-group mt-3">
                          <button type="button" class="btn btn-warning generateOtpBtn" id="updateGeneratedeleteKycBtn"
                            data-index="deletekycapi" data-mail-type="API Setup">Generate OTP</button>
                          <input type="hidden" id="otpLogiddeletekycapi" name="otpLogid">
                        </div>

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

                        <!-- Submit Button -->
                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary updateBtn" id="updateBtndeletekycapi"
                            disabled>Submit</button>
                        </div>

                      </form>
                    </div>
                  </div>
                </div>
              </div>




              <div class="tab-pane fade {% if redirectval == 'AssignKyc' %}show active{% endif %}" id="nav-assign_kyc"
                role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('kyc_apis.kyc_apis_list')}}"
                        class="row gy-2 gx-3 align-items-center">

                        <input type="hidden" name="redirectTo" value="AssignKyc">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{search_element_assign_kyc}}"
                            name="search_element_assign_kyc" id="search_element_assign_kyc" placeholder="Search element"
                            pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$" minlength="3" maxlength="75"
                            title="Api Name can only contain letters, numbers, spaces, and special characters: @ # $ ( ) + _ - / .">
                        </div>

                        <!-- <div class="col-auto">
                            <select name="kycApiId" class="form-select">
                              <option value="">Select Api Name</option>
                              {% for each_kyc_api in kycAPIList %}
                                <option value="{{ each_kyc_api.id }}"
                                  {% if each_kyc_api.id|string == kycApiId %}selected{% endif %}>
                                  {{ each_kyc_api.apiName }}
                                </option>
                              {% endfor %}
                            </select>
                          </div> -->

                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{url_for('kyc_apis.kyc_apis_list')}}"><button type="button"
                              class="btn btn-warning">Reset</button></a>
                        </div>
                        {% for error in assignKycform.search_element_assign_kyc.errors %}
                        <span class="text-danger">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        {% if 'add' in session.get('assignKycPermissions', []) %}
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addCategoryTask"
                          onClick="resetFormData1('addAssignKycForm');openaddassignModal({})">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Assign KYC
                        </button>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap" style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                        <th scope="col">S.No</th>
                        <th scope="col">ApiName</th>
                        <th scope="col">Document Name</th>
                        {% if 'edit' in session.get('assignKycPermissions', []) %}
                            <th scope="col">Status</th>
                        {% endif %}
                        {% if 'edit' in session.get('assignKycPermissions', []) %}
                            <th scope="col">Actions</th>
                        {% elif 'delete' in session.get('assignKycPermissions', []) %}
                            <th scope="col">Actions</th>
                        {% endif %}

                      </tr>
                    </thead>

                    <tbody>
                      {% if assignKycList %}
                      {% for each_assign_kyc in assignKycList %}
                      <tr>
                        <td>{{assignKycsnoCount+loop.index}}</td>

                        {% if each_assign_kyc.kycApiId.apiName %}
                        <td>{{each_assign_kyc.kycApiId.apiName}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}

                        {% if each_assign_kyc.documentNameList %}
                        <td>{{each_assign_kyc.documentNameList| join(', ')}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        
                        

                        {% if 'edit' in session.get('assignKycPermissions', []) %}
                        <td>
                          {% if each_assign_kyc.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('kyc_apis.update_assign_kyc_status', AssignKycId=each_assign_kyc.id,search_element_assign_kyc=search_element_assign_kyc,assignKycPage=assignKycPage) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('kyc_apis.update_assign_kyc_status', AssignKycId=each_assign_kyc.id,search_element_assign_kyc=search_element_assign_kyc,assignKycPage=assignKycPage) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>
                        {% endif %}

                        <td>
                          {% if 'edit' in session.get('assignKycPermissions', []) %}
                          <!--   <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                            data-bs-toggle="modal" data-bs-target="#updateassignkyc{{ loop.index }}">
                            <i class="ri-edit-line"></i>
                          </a> -->

                          <a href="javascript:void(0);" onclick='openUpdateAssignModal({
                              "id": "{{ each_assign_kyc.id }}",
                              "kycApiId": "{{ each_assign_kyc.kycApiId.id }}",
                              "apiName": "{{ each_assign_kyc.kycApiId.apiName }}",
                              
                              "documentNameList": {{ each_assign_kyc.documentNameList | tojson }}
                          })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>
                          {% endif %}

                          <!-- <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('kyc_apis.delete_assign_kyc', AssignKycId=each_assign_kyc.id) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a> -->
                          {% if 'delete' in session.get('assignKycPermissions', []) %}
                          <a href="javascript:void(0);" onclick='opendeleteAssignkycModal({
                                  "id": "{{ each_assign_kyc.id }}",      
                                  "assignKycPage":"{{assignKycPage}}",
                                  "search_element_assign_kyc":"{{search_element_assign_kyc}}"  
                              })' class="btn btn-icon btn-sm btn-danger-transparent rounded-pill">
                            <i class="ri-delete-bin-line"></i>
                          </a>
                          <!-- <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-danger-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#assignkycapiDeleteModal{{ loop.index }}">
                           {% endif %}
                                  <i class="ri-delete-bin-line"></i>
                        </a> -->

                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="12" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "AssignKyc_success" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "AssignApis_danger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>

                  </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 assignKycpagination %}
                      <div class="pagination">
                        {{ assignKycpagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>

              </div>


              <div class="modal fade" id="assignkycapiDeleteModal" tabindex="-1" role="dialog"
                aria-labelledby="assignkycapiDeleteModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="assignkycapiDeleteModalLabel">OTP Verification</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" data-requires-location>
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_deleteassign" name="latitude">
                        <input type="hidden" id="longitude_deleteassign" name="longitude">
                        <input type="hidden" name="defaultVerificationId" id="defaultVerificationIddeleteassignkycapi">

                        <div class="form-group mt-3">
                          <button type="button" class="btn btn-warning generateOtpBtn"
                            id="updateGeneratedeleteAssignKycBtn" data-index="deleteassignkycapi"
                            data-mail-type="API Setup">Generate OTP</button>
                          <input type="hidden" id="otpLogiddeleteassignkycapi" name="otpLogid">
                        </div>

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

                        <!-- Submit Button -->
                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary updateBtn" id="updateBtndeleteassignkycapi"
                            disabled>Delete</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>



              <div class="modal fade" id="updateassignkyc" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="updateTaskLabel">Update Assign KYC </h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form method="POST" id="updateAssignKycForm" name="updateAssignKycForm"
                        enctype="multipart/form-data">
                        <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdassign"> 
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_updateassign" name="latitude">
                       <input type="hidden" id="longitude_updateassign" name="longitude">


                        <div class="form-group">
                <label for="editKycApiId_display">APIName*</label>
                <!-- Display only -->
                <select class="form-control" id="editKycApiId_display" disabled>
                  {% for each_api in kycAPIList %}
                  <option value="{{ each_api.id }}">{{ each_api.apiName }}</option>
                  {% endfor %}
                </select>
                <!-- Submitted hidden input -->
                <input type="hidden" id="editKycApiId" name="kycApiId">
                <span id="kycApiId_edit_error" class="error"></span>
              </div>
                          <div class="form-group">
                          <label for="editDocumentNameList">Document Name</label>
                          <select class="form-control chosen-select" name="documentNameList" id="editDocumentNameList"
                            data-placeholder="Select documentName" multiple required>
                            <option value="Aadhar">Aadhar</option>
                            <option value="IndividualPan">Individual Pan</option>
                            <option value="Bank">Bank</option>
                            <option value="VideoKyc">VideoKyc</option>
                            <option value="NameMatch">Name Match</option>
                            <option value="AadharMobileMatch">Aadhar Mobile Match</option>
                          </select>
                          <span id="documentNameList_edit_error" class="error"></span>
                        </div>

                        <div class="form-group mt-3">
                          <button type="button" class="btn btn-warning generateOtpBtn" id="updateGenerateBtn"
                            data-index="assign" data-mail-type="API Setup">Generate OTP</button>
                          <input type="hidden" id="otpLogidassign" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="assign" style="display: none;"
                          id="verifyDiv">
                          <label for="otpCodeassign">Enter OTP*</label>
                          <input type="text" class="form-control otp-input" id="otpCodeassign" name="otpCode"
                            placeholder="Enter otp">
                          <div class="mt-2">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="assign">Verify
                              OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="assign"
                              data-mail-type="API Setup">Resend OTP</button>
                          </div>
                          <div id="otpMessageassign" class="text-danger mt-2"></div>
                          <span id="otpCode_error" class="error"></span>
                        </div>
                        <!-- End space -->

                        <!-- Add more edit form fields as needed -->
                        <span id="EditErrorMessage" class="error"></span>
                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary form_submit" id="updateBtnassign"
                            disabled>Update</button>
                        </div>

                        <!-- Add more edit form fields as needed -->

                      </form>
                    </div>
                  </div>
                </div>
              </div>


              <div class="modal fade" id="addCategoryTask" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h6 class="modal-title" id="mail-ComposeLabel">Add Assign KYC</h6>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{url_for('kyc_apis.add_assign_kyc_api')}}"
                      enctype="multipart/form-data" id="addAssignKycForm" name="addAssignKycForm">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <input type="hidden" id="latitude_addassign" name="latitude">
                      <input type="hidden" id="longitude_addassign" name="longitude">
                      <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">

                      <div class="modal-body px-4">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="kycApiId">API Name*</label>
                              <select class="form-control chosen-select" name="kycApiId" id="kycApiId" required>
                                <option value="">Select</option>
                                {% for each_api in addAssignKycAPIList %}
                                <option value="{{each_api.id}}">{{each_api.apiName}}</option>
                                {% endfor %}
                              </select>
                              <span id="kycApiId_error" class="error"></span>
                            </div>
                          </div>


                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="documentNameList">Document Name*</label>
                              <select class="form-control chosen-select disabled selected hidden" id="documentNameList"
                                name="documentNameList" multiple required>
                                <option value="">Select</option>
                                <option value="Aadhar">Aadhar</option>
                                <option value="IndividualPan">Individual Pan</option>
                                <option value="Bank">Bank</option>
                                <option value="VideoKyc">Video KYC</option>
                                <option value="NameMatch">Name Match</option>
                                <option value="AadharMobileMatch">Aadhar Mobile Match</option>
                              </select>
                              <span id="documentNameList_error" class="error"></span>
                            </div>
                          </div>

                          <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" data-index="addAssign"
                              id="updateaddassignGenerateBtn" data-mail-type="API Setup">Generate OTP</button>
                            <input type="hidden" id="otpLogidaddAssign" name="otpLogid">
                          </div>

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

                        </div>
                      </div>

                      <span id="errorMessage" class="error"></span>

                      <!-- End space -->

                      <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary form_submit" id="updateBtnaddAssign"
                          disabled>Submit</button>
                      </div>


                    </form>
                  </div>
                </div>
              </div>

              <div class="modal fade" id="updatekycTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="updateTaskLabel">Update KYC API</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <form method="POST" id="updateKycApiForm" name="updateKycApiForm" enctype="multipart/form-data">

                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="latitude_updatekyc" name="latitude">
                        <input type="hidden" id="longitude_updatekyc" name="longitude">
                        <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdu"> 
                        <div class="form-group">
                          <label for="editApiName"> API Name*</label>
                          <input type="text" class="form-control" id="editApiName" name="apiName"
                            pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$" minlength="3" maxlength="75"
                            title="API Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
                            required>
                          <span id="apiName_edit_error" class="error"></span>
                        </div>
                        <div class="form-select">
                          <label for="editCode">Code*</label>
                          <input type="text" class="form-control" name="code" id="editCode" readonly>
                          <span id="code_edit_error" class="error"></span>
                        </div>
                        <div class="form-group" id="updateInputContainer">
                          <label for="params">Parameters</label>
                          <br>

                        </div>

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

                        <div class="form-group mt-3">
                          <button type="button" class="btn btn-warning generateOtpBtn" id="updateGenerateKycBtn"
                            data-index="u" data-mail-type="API Setup">Generate OTP</button>
                          <input type="hidden" id="otpLogidu" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="u" style="display: none;"
                          id="verifyKycDiv">
                          <label for="otpCodeu">Enter OTP*</label>
                          <input type="text" class="form-control otp-input" id="otpCodeu" name="otpCode"
                            placeholder="Enter otp">
                          <div class="mt-2">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="u">Verify
                              OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="u"
                              data-mail-type="API Setup">Resend OTP</button>
                          </div>
                          <div id="otpMessageu" class="text-danger mt-2"></div>
                          <span id="otpCode_error" class="error"></span>
                        </div>
                        <!-- End space -->
                        <span id="EditErrorMessage" class="error"></span>
                        <!-- Add more edit form fields as needed -->
                        <div class="modal-footer justify-content-between">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary form_submit" id="updateBtnu"
                            disabled>Update</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>

              <div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h6 class="modal-title" id="mail-ComposeLabel">Create New Kyc API</h6>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{url_for('kyc_apis.add_kyc_api')}}" enctype="multipart/form-data"
                      id="addKycApiForm" name="addKycApiForm">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <input type="hidden" id="latitude_addkyc" name="latitude">
                      <input type="hidden" id="longitude_addkyc" name="longitude">
                      <input type="hidden" name="defaultVerificationId" id="defaultVerificationId">
                      <div class="modal-body px-4">
                        <div class="row">

                          <div class="form-group">
                            <label for="apiName">APIName*</label>
                            <input type="text" class="form-select" id="apiName" name="apiName"
                              pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$" minlength="3" maxlength="75"
                              title="API Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/."
                              placeholder="Enter api name" required>
                            <span id="apiName_error" class="error"></span>
                          </div>


                          <div class="form-group">
                            <label for="code">Code*</label>
                            <select class="form-control" name="code" id="code" required>
                              <option value="">Select code</option>
                              <option value="Signzy">Signzy</option>
                              <option value="Setu">Setu</option>
                              <option value="Vayana">Vayana</option>
                            </select>
                            <span id="code_error" class="error"></span>
                          </div>

                          <div class="form-group" id="inputContainer">
                            <label for="params">Parameters</label>
                            <br>
                            <input type="text" name="inputKeyField[]" placeholder="Enter param key"
                              class="form-control mb-2">
                            <input type="text" name="inputValueField[]" placeholder="Enter param value"
                              class="form-control mb-2">
                          </div>
                          <div class="form-group">
                            <button type="button" class="btn btn-primary-light rounded-pill btn-wave"
                              onclick="addInputField('inputContainer')">Add Param</button>
                            <button type="button" class="btn btn-danger-light rounded-pill btn-wave"
                              onclick="removeParamsField('inputContainer')">Remove Param</button>
                          </div>

                        </div>

                        <div class="form-group mt-3">
                          <button type="button" class="btn btn-warning generateOtpBtn" data-index="add"
                            id="updateaddGenerateBtn" data-mail-type="API Setup">Generate OTP</button>
                          <input type="hidden" id="otpLogidadd" name="otpLogid">
                        </div>

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

                        <!-- End space -->
                        <div class="modal-footer justify-content-between">
                          <span id="EditErrorMessage" class="error"></span>
                          <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-primary form_submit" id="updateBtnadd"
                            disabled>Submit</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>


            <!-- Api Aggregator start -->
            <div class="tab-pane fade {% if redirectval == 'ApiAggregator' %}show active{% endif %}"
              id="nav-api_aggregator" role="tabpanel">
              <div class="row">
                <div class="col-xl-12">
                  <div class="d-flex justify-content-between align-items-center mb-4">
                    <form method="GET" action="{{ url_for('kyc_apis.kyc_apis_list') }}"
                      class="row gy-2 gx-3 align-items-center w-100" id="searchForm">
                      <input type="hidden" name="redirectTo" value="ApiAggregator">

                      <div class="col-auto">
                        <label for="kycApiId">Api Name*</label>
                        <select class="form-select" name="kycApiId" id="kycApiId" style="width: 300px;">
                          <option value="">Select</option>
                          {% for each_assign_kyc in assignKycList %}
                          {% set kyc_api = each_assign_kyc.kycApiId %}
                          <option value="{{ kyc_api.id if kyc_api else '' }}" {% if kyc_api and
                            kyc_api.id|string==kycApiId %} selected {% endif %}>
                            {{ kyc_api.apiName}}
                          </option>
                          {% endfor %}
                        </select>
                      </div>
                      {% for error in form.kycApiId.errors %}
                      <span class="text-danger" class="error">{{ error }}</span>
                      {% endfor %}


                      <div class="col-auto d-flex align-items-center">
                        <button type="submit" class="btn btn-primary"
                          style="height: 38px; padding: 5px 10px;margin-top: 20px;">Search</button>
                      </div>
                      <div class="col-auto mt-4">
                        <a href="{{url_for('kyc_apis.kyc_apis_list')}}"><button type="button"
                            class="btn btn-warning">Reset</button></a>
                      </div>

                    </form>
                  </div>

                  <div class="flashes">
                  {% with messages = get_flashed_messages(with_categories=true) %}
                  {% if messages %}
          
                    {% for category, message in messages %}
                    {% if category == "charge_success" %}
                    <h2>
                      <b>
                        <center style="color:green">{{ message }}</center>
                      </b>
                    </h2>
                      {% elif category == "charge_danger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                  {% endif %}
                  {% endfor %}
                  {% endif %}
                  {% endwith %}
</div>
                  {% if kycChargeList %}
                  <!-- Display Table if kycChargeList is not empty -->
                  <div class="mt-3"></div>
                  <div class="table-responsive">
                    {% if 'edit' in session.get('kycApiChargePermissions', []) %}
                    <form method="POST" action="{{ url_for('kyc_apis.upsert_kyc_api_charge_table') }}" id="submitForm">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <input type="hidden" id="latitude_updatekycapi" name="latitude">
                        <input type="hidden" id="longitude_updatekycapi" name="longitude">
                      <table id="datatable-basic" class="table text-nowrap" style="padding-bottom: 200px;">
                        <thead class="table-primary">
                          <tr>
                            <th>S.No</th>
                            <th>Document Name</th>
                            <th>Charge Type</th>
                            <th>Charge Value</th>
                            <th>GST Included</th>
                            <th>GST%</th>
                            <th>TDS Included</th>
                            <th>TDS%</th>
                            <th>Final Price</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for charge in kycChargeList %}
                          <tr data-index="{{ loop.index }}">
                            <td>{{ loop.index }}</td>
                            <td>
                              <input type="hidden" name="documentType[]" value="{{ charge.documentType }}">
                              {{ charge.documentType }}
                            </td>
                            <td>
                              <select name="chargeType[]" class="form-control"
                                oninput="updateFinalPrice({{ loop.index }})">
                                <option value="FLAT" {% if charge.chargeType=='FLAT' %}selected{% endif %}>FLAT</option>
                              </select>
                            </td>

                            <td>
                              <input type="text" name="chargeValue[]" value="{{charge.chargeValue }}"
                                class="form-control" min="0" oninput="updateFinalPrice({{ loop.index }})">
                              <span id="chargeValue[]_error{{ loop.index }}" class="error"></span>
                            </td>

                            <td>
                              <select name="gstInclude[]" class="form-control"
                                oninput="updateFinalPrice({{ loop.index }})">
                                <option value="Yes" {% if charge.gstInclude=='Yes' %}selected{% endif %}>Yes</option>
                                <option value="No" {% if charge.gstInclude=='No' %}selected{% endif %}>No</option>
                              </select>

                            </td>

                            <td>
                              <input type="text" name="gstValue[]" value="{{charge.gstValue }}" class="form-control"
                                min="0" oninput="updateFinalPrice({{ loop.index }})">
                              <span id="gstValue[]_error" class="error"></span>
                            </td>

                            <td>
                              <select name="tdsInclude[]" class="form-control"
                                oninput="updateFinalPrice({{ loop.index }})">
                                <option value="Yes" {% if charge.tdsInclude=='Yes' %}selected{% endif %}>Yes</option>
                                <option value="No" {% if charge.tdsInclude=='No' %}selected{% endif %}>No</option>
                              </select>

                            </td>

                            <td>
                              <input type="text" name="tdsValue[]" value="{{  charge.tdsValue }}" class="form-control"
                                min="0" oninput="updateFinalPrice({{ loop.index }})">
                              <span id="tdsValue[]_error" class="error"></span>
                            </td>

                            <td>
                              <input type="text" style="color: red;font-weight: bold;"
                                class="form-control readonlyPrice" name="readonlyPrice[]" class="form-control"
                                value="{{charge.finalPrice }}" readonly>
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                      <div class="text-center mt-3" id="submitall">
                        <button type="submit" class="btn btn-primary">Submit All</button>
                      </div>

                      <input type="hidden" name="kycApiId" value="{{ kycApiId }}">
                    </form>
                    {% endif %}
                  </div>
                  {% else %}
                  <p>No charges available for the selected API.</p>
                  {% endif %}
                </div>
              </div>
              <!-- Api Aggregator tab end -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End::row-1 -->
</div>
<!-- End::app-content -->
<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("form[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 type="text/javascript">

  $(document).ready(function () {
    $('#addAssignKycForm').validate({
      rules: {
        kycApiId: {
          required: true,
        },
        documentNameList: {
          required: true,
        },

      },
      messages: {
        kycApiId: {
          required: 'Please select an API Name',

        },
        documentNameList: {
          required: 'Please select at least one Document Name',
        },

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

              // Create a new FormData object and append the form data (including image files)
              let formData = new FormData(form);

              $.ajax({
                url: form.action, // Use the form's action URL
                type: form.method, // Use the form's method (GET/POST)
                data: formData,
                processData: false,  // Don't process the data as a query string
                contentType: false,  // Let jQuery set the content-type for multipart/form-data
                xhrFields: {
                                      withCredentials: true   // THIS ensures cookies/session are sent
                                  },
                success: function (response) {
                  if (response.responseStatus == 4) {
                    form.reset();  // Reset the form
                    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 == 1) {
                                  form.reset();
                                  window.location.href = 'kyc_apis_list?redirectTo=AssignKyc&assignKycPage={{assignKycPage}}';
                  } else if (response.responseStatus == 2) {
                    $('.form_submit').prop('disabled', false);
      				      $('#newLoadingModel').hide();
                    $('#errorMessage').text(response.result);
                    return false;
                  } else {
                    location.reload();
                  }
                },
                error: function (xhr, status, error) {
                  console.log("Error uploading image: " + error);
                  $('#errorMessage').text("Error uploading image.");
                }
              });
            },
                    function () {
                        $('.form_submit').prop('disabled', false);
                        $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }

          });


    $('#updateAssignKycForm').validate({
      rules: {
        kycApiId: {
          required: true,
        },
        documentNameList: {
          required: true,
        },
      },
      messages: {
        kycApiId: {
          required: 'Please select an API Name',

        },
        documentNameList: {
          required: 'Please select at least one Document Name',
        },
      },
      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);

                let formData = new FormData(form);

                $.ajax({
                  url: form.action,
                  type: form.method,
                  data: formData,
                  processData: false,  // Don't process the data as a query string
                  contentType: false,  // Let jQuery set the content-type for multipart/form-data
                  xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                  success: function (response) {
                    if ( 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 == 1) {
                                  form.reset();
                                  window.location.href = 'kyc_apis_list?redirectTo=AssignKyc&assignKycPage={{assignKycPage}}';

                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
        				      $('#newLoadingModel').hide();
                      $('#EditErrorMessage').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.");
                    }
                );
            }
          });
        });
</script>

<script type="text/javascript">

  $(document).ready(function () {
    $('#addKycApiForm').validate({
      rules: {
        apiName: {
          required: true,
          minlength: 3,
          maxlength: 75,
          pattern: /^[a-zA-Z0-9\s@#$()+_\-/.]+$/
        },
        code: { required: true },

      },
      messages: {
        apiName: {
          required: 'API Name is required',
          minlength: 'API Name must be at least 3 characters',
          maxlength: 'API Name must be less than 75 characters',

        },
        code: { required: 'Please select a Code' },

      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
        event.preventDefault();  // Prevent the default form submission
        getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                // Create a new FormData object and append the form data (including image files)
                let formData = new FormData(form);

                $.ajax({
                  url: form.action, // Use the form's action URL
                  type: form.method, // Use the form's method (GET/POST)
                  data: formData,
                  processData: false,  // Don't process the data as a query string
                  contentType: false,  // Let jQuery set the content-type for multipart/form-data
                  xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                  success: function (response) {
                    if ( response.responseStatus == 4) {
                      form.reset();  // Reset the form
                      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 == 1) {
                                  form.reset();
                                  window.location.href = 'kyc_apis_list?redirectTo=KycApis&kycApisPage={{kycApisPage}}';
                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
        				      $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
                  },
                  error: function (xhr, status, error) {
                    console.log("Error uploading image: " + error);
                    $('#errorMessage').text("Error uploading image.");
                  }
                });
              },
              function () {
                $('.form_submit').prop('disabled', false);
                $('#newLoadingModel').hide();
                    alert("Location access is required to proceed. Please enable it in your browser.");
            }
        );
    }

});


    $('#updateKycApiForm').validate({
      rules: {
        apiName: {
          required: true,
          minlength: 3,
          maxlength: 75,
          pattern: /^[a-zA-Z0-9\s@#$()+_\-/.]+$/
        },
        code: { required: true },
      },
      messages: {
        apiName: {
          required: 'API Name is required',
          minlength: 'API Name must be at least 3 characters',
          maxlength: 'API Name must be less than 75 characters',

        },
        code: { required: 'Please select a Code' },
      },
      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);


                  let formData = new FormData(form);

                  $.ajax({
                    url: form.action,
                    type: form.method,
                    data: formData,
                    processData: false,  // Don't process the data as a query string
                    contentType: false,  // Let jQuery set the content-type for multipart/form-data
                    xhrFields: {
                                          withCredentials: true   // THIS ensures cookies/session are sent
                                      },
                    success: function (response) {
                      if ( 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 == 1) {
                                  form.reset();
                                  window.location.href = 'kyc_apis_list?redirectTo=KycApis&kycApisPage={{kycApisPage}}';

                      } else if (response.responseStatus == 2) {
                        $('.form_submit').prop('disabled', false);
          				      $('#newLoadingModel').hide();
                        $('#EditErrorMessage').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.");
                    }
                );
            }
          });
        });


</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: {
        'kycApiId': { required: true },

      },
      messages: {
        'kycApiId': { required: 'KycApiId 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();

        if ($("#submitAllButton").prop("disabled")) {
          alert("Please verify OTP first."); // Display alert if submit button is disabled
          return;
        }
        getLocationAndProceed(
                  function (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,
            xhrFields: {
                                  withCredentials: true   // THIS ensures cookies/session are sent
                              },
            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 == 1) {
                                  form.reset();
                                  window.location.href = 'kyc_apis_list?redirectTo=ApiAggregator&pincodePage={{pincodePage}}';
              } 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>

<script>

  function resetFormData1(formid) {
    const form = document.getElementById(formid); // Get the form element

    if (!form) return;

    form.reset(); // Reset standard input fields

    // Remove all jQuery Validation plugin error labels
    form.querySelectorAll('label.error').forEach(el => el.remove());

    // Clear all custom error spans
    form.querySelectorAll('span.error').forEach(el => el.innerText = '');

    // Update any chosen dropdowns if present
    $(form).find('.chosen-select').trigger('chosen:updated');
  }

</script>

<script>
  function Activate() {
    alert("Do you want to activate this role?");
  }
</script>

{%endblock%}