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

{% block content %}
<!-- Content Wrapper. Contains page content -->

<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>
$(document).on("click", ".generateOtpBtn", function () {
    let index = $(this).attr("data-index");
    let mailType = "API Setup"; // Ensure correct mailType
    let button = $(this);
    let messageBox = $("#otpMessage" + index);

    console.log(`🔹 Generating OTP for mailType: ${mailType}`);

    $.ajax({
        type: "POST",
        url: "/api/super_admin/add_kyc_api",
        data: {
            action: "generate",
            mailType: mailType // Ensure correct key is sent
        },
        beforeSend: function () {
            button.prop("disabled", true).text("Generating...");
        },
        success: function (response) {
            if (response.responseStatus === 1) {
                $("#otpLogid" + index).val(response.otpCheckId);
                $(".otp-section[data-index='" + index + "']").fadeIn();
                button.hide();
                messageBox.removeClass("text-danger").addClass("text-success").text("OTP Sent!");
            } else {
                alert("Error: " + response.result);
                button.prop("disabled", false).text("Generate OTP");
            }
        },
        error: function (xhr) {
            console.error("OTP Generation Error:", xhr.responseText);
            alert("Error: " + xhr.status + " " + xhr.statusText);
            button.prop("disabled", false).text("Generate OTP");
        }
    });

    // Step 2: Verify OTP & Enable the Correct Submit Button
    $(document).on("click", ".verifyOtpBtn", function () {
        var index = $(this).attr("data-index"); // Identify the form by index
        var otpCode = $("#otpCode" + index).val();
        var otpCheckId = $("#otpLogid" + index).val();

        if (!otpCode.trim() || otpCode.length !== 6) {
            $("#otpMessage" + index).text(" Enter a valid 6-digit OTP").addClass("text-danger");
            return;
        }

        $.ajax({
            type: "POST",
            url: "/api/super_admin/add_kyc_api", // Update API route
            data: { action: "verify", otpCode: otpCode, otpCheckId: otpCheckId },
            success: function (response) {
                if (response.responseStatus === 1) {
                    $("#otpMessage" + index).removeClass("text-danger").addClass("text-success").text("OTP Verified!");
                    $("#updateBtn" + index).prop("disabled", false); // Enable the correct submit button
                } else {
                    $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text(response.result);
                }
            },
            error: function () {
                $("#otpMessage" + index).removeClass("text-success").addClass("text-danger").text("Error verifying OTP.");
            }
        });
    });

    // Step 3: Click "Resend OTP"
    $(document).on("click", ".resendOtpBtn", function () {
        var index = $(this).attr("data-index");
        $(".generateOtpBtn[data-index='" + index + "']").show().prop("disabled", false).text("Generate OTP"); // Show button again for resend
        $(".generateOtpBtn[data-index='" + index + "']").click(); // Re-trigger OTP Generation
    });

});



$(document).ready(function () {
    $(document).on("click", ".deleteKycApiBtn", function () {
        var kycApiId = $(this).data("kyc-api-id"); // Get KYC API ID
        console.log("KYC API ID:", kycApiId); // Check if ID is retrieved

        if (!confirm("Are you sure you want to delete this record?")) {
            return;
        }

        // Step 1: Generate OTP
        $.ajax({
            type: "POST",
            url: "/api/super_admin/delete_kyc_api",
            data: { 
                action: "generate", 
                mailType: "API Setup"
            },
            success: function (response) {
                if (response.responseStatus === 1) {
                    console.log("OTP Generated Successfully. otpCheckId:", response.otpCheckId);

                    var otpCode = prompt("OTP has been sent. Please enter OTP:");
                    if (!otpCode) {
                        alert("OTP is required for deletion.");
                        return;
                    }

                    // ✅ Debugging: Ensure correct data is sent
                    console.log("Sending OTP verification request with:", {
                        action: "verify",
                        otpCode: otpCode,
                        otpCheckId: response.otpCheckId,
                        kycApiId: kycApiId
                    });

                    // Step 2: Verify OTP & Delete Record
                    $.ajax({
                        type: "POST",
                        url: "/api/super_admin/delete_kyc_api",
                        data: { 
                            action: "verify", 
                            otpCode: otpCode, 
                            otpCheckId: response.otpCheckId, 
                            kycApiId: kycApiId // Ensure this is passed
                        },
                        success: function (deleteResponse) {
                            if (deleteResponse.responseStatus === 1) {
                                alert("Record deleted successfully!");
                                location.reload();
                            } else {
                                alert("Error: " + deleteResponse.result);
                            }
                        },
                        error: function (xhr) {
                            alert("Error verifying OTP: " + xhr.status + " " + xhr.statusText);
                        }
                    });

                } else {
                    alert("Error generating OTP: " + response.result);
                }
            },
            error: function (xhr) {
                alert("Error generating OTP: " + xhr.status + " " + xhr.statusText);
            }
        });
    });
});


</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">
              <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>
              <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>

            </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" placeholder="search element">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addtask">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Kyc Api
                        </button>
                      </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>
                        <th scope="col">Status</th>
                        <th scope="col">Action</th>

                      </tr>
                    </thead>

                    <tbody>
                      {% for each_kyc_api in kycAPIList %}
                      <tr>
                        <td>{{loop.index}}</td>
                        <td>{{each_kyc_api.apiName}}</td>
                        <td>{{each_kyc_api.code}}</td>

                        <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" 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">
                                    
                                    <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>

                        <td>
                          {% if each_kyc_api.actionText == "Active" %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('kyc_apis.update_kyc_api_status', kycApiId=each_kyc_api.id) }}">{{
                            each_kyc_api.actionText }}</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('kyc_apis.update_kyc_api_status',  kycApiId=each_kyc_api.id) }}">{{
                            each_kyc_api.actionText }}</a>
                          {% endif %}
                        </td>



                        <td>
                          <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                            data-bs-toggle="modal" data-bs-target="#updatekycTask{{ loop.index }}">
                            <i class="ri-edit-line"></i>
                          </a>

                          <!-- <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> -->

                        <a href="javascript:void(0);" class="deleteKycApiBtn" data-kyc-api-id="{{ 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>





                        </td>

                        {% endfor %}
                    </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>

              <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">
                        
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{search_element}}" name="search_element"
                            id="search_element" placeholder="search element">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addCategoryTask">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Assign KYC
                        </button>
                      </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>
                        <th scope="col">Status</th>
                        <th scope="col">Action</th>

                      </tr>
                    </thead>

                    <tbody>
                      {% for each_assign_kyc in assignKycList %}
                      <tr>
                        <td>{{loop.index}}</td>
                        <td>{{each_assign_kyc.apiName}}</td>
                        <td>{{each_assign_kyc.documentName}}</td>

                        <td>
                          {% if each_assign_kyc.actionText == "Active" %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('kyc_apis.update_assign_kyc_status', AssignKycId=each_assign_kyc.id) }}">{{
                            each_assign_kyc.actionText }}</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('kyc_apis.update_assign_kyc_status', AssignKycId=each_assign_kyc.id) }}">{{
                            each_assign_kyc.actionText }}</a>
                          {% endif %}
                        </td>


                        <td>
                          <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="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> 


                          <!-- <a href="javascript:void(0);" class="deleteKycApiBtn" data-kyc-api-id="{{ 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> -->



                        </td>

                        {% endfor %}
                    </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>

              {% for each_assign_kyc in assignKycList %}
              <div class="modal fade" id="updateassignkyc{{ loop.index }}" tabindex="-1" role="dialog"
                aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">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"
                        action="{{ url_for('kyc_apis.update_assign_kyc', AssignKycId=each_assign_kyc.id) }}"
                        enctype="multipart/form-data">
                        
                        <div class="form-group">
                          <label for="kycApiId{{ loop.index }}">APIName*</label>
                          <select class="form-control" id="kycApiId{{ loop.index }}" name="kycApiId">
                            {% for each_api in kycAPIList %}
                            {% if each_api.id == each_assign_kyc.kycApiId %}
                            <option selected value="{{each_api.id}}" readonly>{{each_api.apiName}}</option>
                            {% endif %}
                            {% endfor %}
                          </select>
                        </div>
                        <div class="form-group">
                          <label for="documentNameList{{ loop.index }}">Document Name</label>
                          <select class="form-control chosen-select" name="documentNameList"
                            id="AssignKycId{{ loop.index }}" data-placeholder="Select documentName" multiple required>
                            {% if "Aadhar" in each_assign_kyc.documentNameList %}
                            <option value="Aadhar" selected>Adhar</option>
                            {% else %}
                            <option value="Aadhar">Aadhar</option>
                            {% endif %}

                            {% if "IndividualPan" in each_assign_kyc.documentNameList %}
                            <option value="IndividualPan" selected>Individual Pan</option>
                            {% else %}
                            <option value="IndividualPan">Individual Pan</option>
                            {% endif %}

                           

                            {% if "Bank" in each_assign_kyc.documentNameList %}
                            <option value="Bank" selected>Bank</option>
                            {% else %}
                            <option value="Bank">Bank</option>
                            {% endif %}

                            {% if "VideoKyc" in each_assign_kyc.documentNameList %}
                            <option value="VideoKyc" selected>Video Kyc</option>
                            {% else %}
                            <option value="VideoKyc">VideoKyc</option>
                            {% endif %}
                            
                            {% if "NameMatch" in each_assign_kyc.documentNameList %}
                            <option value="NameMatch" selected>Name Match</option>
                            {% else %}
                            <option value="NameMatch">Name Match</option>
                            {% endif %}

                            {% if "AadharMobileMatch" in each_assign_kyc.documentNameList %}
                            <option value="AadharMobileMatch" selected>AadharMobileMatch</option>
                            {% else %}
                            <option value="AadharMobileMatch">Aadhar Mobile Match</option>
                            {% endif %}
                          </select>
                        </div>

                        <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" data-index="assign{{ loop.index }}">Generate OTP</button>
                            <input type="hidden" id="otpLogidassign{{ loop.index }}" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="assign{{ loop.index }}" style="display: none;">
                            <label for="otpCodeassign{{ loop.index }}">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCodeassign{{ loop.index }}" name="otpCode" placeholder="Enter OTP">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="assign{{ loop.index }}">Verify OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="assign{{ loop.index }}">Resend OTP</button>
                            <div id="otpMessageassign{{ loop.index }}" class="text-danger mt-2"></div>
                        </div>
                        <!-- End space -->
  
                        <!-- 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 updateBtn" id="updateBtnassign{{ loop.index }}" disabled>Update</button>
                        </div>

                        <!-- Add more edit form fields as needed -->
                        
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              {% endfor %}

              <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">
                      
                      <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" 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>
                            </div>
                          </div>


                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="documentNameList">Document Name*</label>
                              <select class="form-control chosen-select" 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>
                            </div>
                          </div>

                          <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" data-index="assign">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;">
                            <label for="otpCodeassign">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCodeassign" name="otpCode" placeholder="Enter OTP">
                            <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">Resend OTP</button>
                            <div id="otpMessageassign" class="text-danger mt-2"></div>
                        </div>

                        </div>
                      </div>

                      

                        <!-- 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 updateBtn" id="updateBtnassign" disabled>Submit</button>
                        </div>

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

              {% for each_kyc_api in kycAPIList %}
              <div class="modal fade" id="updatekycTask{{ loop.index }}" tabindex="-1" role="dialog"
                aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">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" action="{{ url_for('kyc_apis.update_kyc_apis', kycApiId=each_kyc_api.id) }}"
                        enctype="multipart/form-data">
                       
                        <div class="form-group">
                          <label for="apiName{{ loop.index }}"> API Name*</label>
                          <input type="text" class="form-control" id="apiName{{ loop.index }}" name="apiName"
                            value="{{ each_kyc_api.apiName }}" required>
                        </div>
                        <div class="form-group">
                          <label for="code">Code*</label>
                          <input type="text" class="form-control" name="code" id="code" value="{{ each_kyc_api.code }}"
                            readonly>
                        </div>
                        <div class="form-group" id="updateInputContainer{{ loop.index }}">
                          <label for="params">Parameters</label>
                          <br>
                          {% for param in each_kyc_api.paramsList %}
                          <div class="input-group mb-2">
                            <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="removeParamsField('updateInputContainer{{ loop.index }}')">Remove</button>
                          </div>
                          {% endfor %}
                        </div>

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

                        <div class="form-group mt-3">
                            <button type="button" class="btn btn-warning generateOtpBtn" data-index="{{ loop.index }}">Generate OTP</button>
                            <input type="hidden" id="otpLogid{{ loop.index }}" name="otpLogid">
                        </div>

                        <div class="form-group mt-3 otp-section" data-index="{{ loop.index }}" style="display: none;">
                            <label for="otpCode{{ loop.index }}">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCode{{ loop.index }}" name="otpCode" placeholder="Enter OTP">
                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="{{ loop.index }}">Verify OTP</button>
                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="{{ loop.index }}">Resend OTP</button>
                            <div id="otpMessage{{ loop.index }}" class="text-danger mt-2"></div>
                        </div>
                        <!-- End space -->
  
                        <!-- 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 updateBtn" id="updateBtn{{ loop.index }}" disabled>Update</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              {% endfor %}

              <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">
                      
                      <div class="modal-body px-4">
                        <div class="row">
                          <div class="col-md-6">
                            <div class="form-group">
                              <label for="apiName">APIName*</label>
                              <input type="text" class="form-control" id="apiName" name="apiName"
                                placeholder="Enter   API Name" required>
                            </div>
                          </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>
                          </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">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;">
                            <label for="otpCodeadd">Enter OTP*</label>
                            <input type="text" class="form-control otp-input" id="otpCodeadd" name="otpCode" placeholder="Enter OTP">
                            <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">Resend OTP</button>
                            <div id="otpMessageadd" class="text-danger mt-2"></div>
                        </div>

                        <!-- 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 updateBtn" id="updateBtnadd" disabled>Save</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>


            </div>
          </div>

        </div>

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

</script>
<script>
  function Activate() {
    alert("Do you want to activate this role?");
  }
</script>
<!-- Add the following JavaScript code -->
<script>
  function confirmDelete(url) {
    if (confirm("Are you sure want to delete?")) {
      window.location.href = url;
    }
  }
</script>




{%endblock%}