{% extends 'super_admin_templates/base.html' %}
{% set path = "manage_users" %}
{% set subpath = "user_management" %}
{% block content %}

<style>
  .btn-edit {
    background-color: transparent;
    border: none;
    color: #007bff; /* Set the color you want for the button text */
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline; /* Underline the text on hover (optional) */
  }
  .horizontal-checkboxes {
    display: inline-block;
    margin-right: 10px; /* Adjust the margin as needed */
  }
  .error{
color:red;
margin-bottom: 10px;
}



.crm-lead-legend.mobile:before {
    background-color:limegreen;
}
.crm-lead-legend.desktop:before {
    background-color:red;
}
.crm-lead-legend.laptop:before {
    background-color:red;
}
.crm-lead-legend.tablet:before {
    background-color: #3F45A9 !important;
}
.crm-lead-legend.total:before {
    background-color: hotpink;
}
.crm-lead-legend.pending:before {
    background-color: #ffc107;
}
.crm-lead-legend.submitted:before {
    background-color: skyblue;
}

</style>


<script>
function getCities(stateId){
      if(stateId != "" && stateId != "undefined"){
        var htmldata="<option value=''>Select City</option>";
     $.ajax({
        url: "{{url_for('user_managements.cities_list')}}",//{{ url_for('admin.dashboard') }}
        data: { "stateId": stateId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.citiesList, function( key, value ) {
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.cityName+"</option>";
              });
         $('#cityId').html(htmldata);
          }else{
            $('#cityId').html(htmldata);
          }
         
        }
    });
      }else{
        $('#cityId').html("<option value=''>Select city</option>");
        alert('Please select city.');
      }
    };
     </script>

     <script>
function getBlockPo(cityId){
      if(cityId != "" && cityId != "undefined"){
        var htmldata="<option value=''>Select Block/Po</option>";
     $.ajax({
        url: "{{url_for('user_managements.block_po_list')}}",
        data: { "cityId": cityId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.blocksList, function( key, value ) {
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.name+"</option>";
              });
         $('#blockPoId').html(htmldata);
          }else{
            $('#blockPoId').html(htmldata);
          }
         
        }
    });
      }else{
        $('#blockPoId').html("<option value=''>Select block/po</option>");
        alert('Please select block/po.');
      }
    };
     </script>





<script>
function getPincode(blockPoId){
      if(blockPoId != "" && blockPoId != "undefined"){
        var htmldata="<option value=''>Select Pincode</option>";
     $.ajax({
        url: "{{url_for('user_managements.pincodes_list')}}",//{{ url_for('admin.dashboard') }}
        data: { "blockPoId": blockPoId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.pincodesList, function( key, value ) {
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.pincode+"</option>";
              });
         $('#pincodeId').html(htmldata);
          }else{
            $('#pincodeId').html(htmldata);
          }
         
        }
    });
      }else{
        $('#pincodeId').html("<option value=''>Select Pincode</option>");
        alert('Please select pincode.');
      }
    };
     </script>


<script>
function getSubCategories(categoryId){
      if(categoryId != "" && categoryId != "undefined"){
        var htmldata="<option value=''>Select Sub Categories</option>";
     $.ajax({
        url: "{{url_for('user_managements.sub_categories_list')}}",//{{ url_for('admin.dashboard') }}
        data: { "categoryId": categoryId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.subCategoriesList, function( key, value ) {
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.name+"</option>";
              });
         $('#subCategoryId').html(htmldata);
          }else{
            $('#subCategoryId').html(htmldata);
          }
         
        }
    });
      }else{
        $('#subCategoryId').html("<option value=''>Select Sub Categories</option>");
        alert('Please select sub categories.');
      }
    };
     </script>


<script>
$(document).on("click", ".generateOtpBtn", function () {
    let index = $(this).attr("data-index");
    let mailType = "User Registration"; // Ensure correct mailType
    let button = $(this);
    let messageBox = $("#otpMessage" + index);

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

    $.ajax({
        type: "POST",
        url: "/api/super_admin/merchant_capbalance",
        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/merchant_capbalance", // 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
    });

});
</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">Merchant Management</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Merchant Managements</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Merchant Managements List

                            <div class="row row-cols-12 border-top border-block-start-dashed">
                                <div class="col p-0">
                                    <div class="p-3 text-center">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend total d-inline-block">Total Merchants
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{total_merchants_count}}</span></div>
                                    </div>
                                </div>
                                 <div class="col p-0">
                                    <div class="ps-4 py-3 pe-3 text-center border-end border-inline-end-dashed ">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend mobile d-inline-block">KYC Approved
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{approved_count}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="p-3 text-center border-end border-inline-end-dashed">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend desktop d-inline-block">KYC Rejected
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{rejected_count}}</span></div>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="ps-4 py-3 pe-3 text-center border-end border-inline-end-dashed ">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend pending d-inline-block">KYC Pending
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{pending_count}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="p-3 text-center border-end border-inline-end-dashed">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend submitted d-inline-block">KYC submitted
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{submitted_count}}</span></div>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="p-3 text-center border-end border-inline-end-dashed">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend laptop d-inline-block">Blocked Merchants
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{blocked_merchants_count}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-0">
                                    <div class="p-3 text-center">
                                        <span class="text-muted fs-12 mb-1 crm-lead-legend tablet d-inline-block">Locked Merchants
                                        </span>
                                        <div><span class="fs-16 fw-semibold">{{locked_merchants_count}}</span></div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>

                        <div class="prism-toggle">
                            {% if 'add' in session.get('userManagementPermissions', []) %}
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask">
                                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Merchant
                              </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>

                        <div class="row">
                            <div class="col-xl-12">
                                <form method="POST" action="{{ url_for('user_managements.manage_users_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{merchantId}}" name="merchantId" id="merchantId"
                                            placeholder="Merchant Id">
                                    </div>

                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{merchantEmail}}" name="merchantEmail" id="merchantEmail"
                                            placeholder="Merchant Email">
                                    </div>

                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{merchantName}}" name="merchantName" id="merchantName"
                                            placeholder="Merchant Name">
                                    </div>

                                    <div class="col-auto">
                                        <input type="text" class="form-control" value="{{merchantPhone}}" name="merchantPhone" id="merchantPhone"
                                            placeholder="Merchant Phonenumber">
                                    </div>
                                    
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">Search</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                            
                            <!-- Add some space -->
                            <div class="mt-3"></div>
                            <!-- End space -->
                            <div class="table-responsive">
                              <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                                  <thead class="table-primary">
                                      <tr>
                                          <th scope="col">S.No</th>
                                          <th scope="col">Merchant Id</th>
                                          <th scope="col">Merchant Details</th>
                                          <th scope="col">Parent Name</th>
                                          <th scope="col">Profile</th>
                                          <th scope="col">Channel</th>
                                          <th scope="col">Payin Balance(₹)</th>
                                          <th scope="col">Payout Balance(₹)</th>
                                          <th scope="col">Commission Balance(₹)</th>
                                          <th scope="col">Cap Balance(₹)</th>
                                          <th scope="col">Registered On</th>
                                          <th scope="col">Status</th>
                                          <th scope="col">Action</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      {% for each_user in usersList %}
                                      <tr>
                                          <td>{{ loop.index }}</td>
                                          <td>{{ each_user.merchantUniqueNumber }}</td>
                                          <td>{{ each_user.email }}<br>{{ each_user.fullName }} <br> {{each_user.phoneNumber}}</td>
                                          <td>{{ each_user.parentName }}</td>
                                          <td>{{each_user.patternName}}</td>
                                          <td>{{each_user.channel}}</td>
                                          <td style="text-align: right;">{{each_user.walletBalance}}</td>
                                          <td style="text-align: right;">{{each_user.payoutBalance}}</td>
                                          <td style="text-align: right;">{{each_user.commissionBalance}}</td>
                                          <td style="text-align: right;">{{each_user.capBalance}}</td>
                                          <td>{{each_user.createdOn}}</td>
                                          <!-- {% if 'edit' in session.get('userManagementPermissions', []) %}
                                              <td>
                                                {% if each_user.actionText == "Approved" %}
                                                  <a class="btn btn-sm btn-success" href="{{ url_for('user_managements.update_user_status', userId=each_user.id) }}">{{each_user.actionText}}</a>
                                                {% else %}
                                                  <a class="btn btn-sm btn-warning" href="{{ url_for('user_managements.update_user_status', userId=each_user.id) }}">{{each_user.actionText}}</a>
                                                {% endif %}
                                              </td>
                                          {% endif %} -->

                                        <td>
                                            {% if each_user.actionText == "Approved" %}
                                                <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#remarkModal{{ loop.index }}">
                                                    {{each_user.actionText}}
                                                </button>
                                            {% else %}
                                                <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#remarkModal{{ loop.index }}">
                                                {{each_user.actionText}}
                                                </button>
                                            {% endif %}

                                            <div class="modal fade" id="remarkModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="remarkModalLabel" aria-hidden="true">
                                                <div class="modal-dialog" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="remarkModalLabel">Provide Remark*</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('user_managements.update_user_status', userId=each_user.id) }}" enctype="multipart/form-data">
                                                                <div class="form-group">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                          <div class="form-group">
                                                                            <label for="remark">Remark*</label>
                                                                            <input type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" required>
                                                                          </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <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" id="form_submit">Submit</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </td>

                                          <td>
                                            <div class="dropdown">
                                                <button class="btn btn-outline-secondary dropdown-toggle rounded-pill" type="button" id="actionDropdown{{ loop.index }}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="actionDropdown{{ loop.index }}">
                                                    {% if 'edit' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.user_update',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></span> Edit</a>
                                                
                                                    {% endif %}

                                                    {% if 'view' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.single_view_user',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i class="ri-eye-line"></i></span> View</a>
                                                    {% endif %}

                                                    {% if 'block' in session.get('userManagementPermissions', []) %}
                                                        {% if each_user.blockStatus == "Block" %}
                                                          <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#remarkBlockModal{{ loop.index }}"><span class="btn btn-icon btn-sm btn-warning-transparent rounded-pill"><i class="ri-close-circle-line"></i></span> Block</a>
                                                        {% endif %}
                                                    {% endif %}

                                                   <!--  {% if 'assignPg' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.assign_payment_gateways',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></span>Assign Payment Gateways</a>
                                                    {% endif %} -->
                                                    
                                                    {% if 'delete' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" onclick="#" href="#" data-bs-toggle="modal" data-bs-target="#remarkDeleteModal{{ loop.index }}"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span>Delete</a>
                                                    {% endif %}

                                                    {% if 'changePassword' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.merchant_change_password',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-lock-password-line"></i></i></span>Change Password</a>
                                                    {% endif %}

                                                    <!-- {% if 'merchantDashboard' in session.get('userManagementPermissions', []) %}
                                                        <a target="_blank" class="dropdown-item" href="{{merchantDashboardUrl+each_user.id }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-external-link-line"></i></i></span>Merchant Dashboard</a>
                                                    {% endif %} -->

                                                    {% if 'assignPg' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.view_child',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></span>View Child</a>
                                                    {% endif %}

                                                    {% if 'assignPg' in session.get('userManagementPermissions', []) %}
                                                        <a class="dropdown-item" href="{{ url_for('user_managements.view_parent',userId=each_user.id) }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></span>View Parent</a>
                                                    {% endif %}

                                                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#remarkCapBalanceModal{{ loop.index }}"><span class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i class="ri-edit-line"></i></span>Cap Balance</a>

                                                    <!-- <div class="dropdown-divider"></div>
                                                    <span class="dropdown-header">View Options</span>
                                                    {% if each_user.checkAssignCommissionForUser == False %}
                                                    <a class="dropdown-item" href="{{ url_for('user_managements.view_parent', userId=each_user.id) }}"><i class='far fa-eye mr-2'></i> View Parent</a>
                                                    {% endif %}
                                                    <a class="dropdown-item" href="{{ url_for('user_managements.view_child', userId=each_user.id) }}"><i class='far fa-eye mr-2'></i> View Child</a> -->
                                                </div>

                                            </div>
                                                 {% if 'block' in session.get('userManagementPermissions', []) %}
                                                        {% if each_user.blockStatus == "Block" %}
                                                          <div class="modal fade" id="remarkBlockModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="remarkBlockModalLabel" aria-hidden="true">
                                                                <div class="modal-dialog" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="remarkBlockModalLabel">Provide Remark*</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('user_managements.block_user_status', userId=each_user.id) }}" enctype="multipart/form-data">
                                                                                <div class="form-group">
                                                                                    <div class="row">
                                                                                        <div class="col-md-12">
                                                                                          <div class="form-group">
                                                                                            <label for="remark">Remark*</label>
                                                                                            <input type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" required>
                                                                                          </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

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

                                                                                    <div class="form-group mt-3 otp-section" data-index="1" style="display: none;">
                                                                                        <label for="otpCode1">Enter OTP*</label>
                                                                                        <input type="text" class="form-control otp-input" id="otpCode1" name="otpCode" placeholder="Enter OTP">
                                                                                        <button type="button" class="btn btn-primary verifyOtpBtn" data-index="1">Verify OTP</button>
                                                                                        <button type="button" class="btn btn-secondary resendOtpBtn" data-index="1">Resend OTP</button>
                                                                                        <div id="otpMessage1" 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="updateBtn1" disabled>Submit</button>
                                                                                    </div>

                                                                               <!--  <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" id="form_submit">Submit</button>
                                                                                </div> -->
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {% endif %}
                                                    {% endif %}

                                                    {% if 'delete' in session.get('userManagementPermissions', []) %}
                                                        <div class="modal fade" id="remarkDeleteModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="remarkDeleteModalLabel" aria-hidden="true">
                                                            <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="remarkDeleteModalLabel">Provide Remark*</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('user_managements.delete_user', userId=each_user.id) }}" enctype="multipart/form-data">
                                                                            <div class="form-group">
                                                                                <div class="row">
                                                                                    <div class="col-md-12">
                                                                                      <div class="form-group">
                                                                                        <label for="remark">Remark*</label>
                                                                                        <input type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" required>
                                                                                      </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <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" id="form_submit">Submit</button>
                                                                            </div>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                      </div>
                                                    {% endif %}

                                                    <div class="modal fade" id="remarkCapBalanceModal{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="remarkCapBalanceModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="remarkCapBalanceModalLabel">Cap Balance*</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('user_managements.merchant_capbalance', userId=each_user.id) }}" enctype="multipart/form-data">
                                                                        <div class="form-group">
                                                                            <div class="row">
                                                                                <div class="col-md-12">
                                                                                  <div class="form-group">
                                                                                    <label for="capBalance">Cap Balance*</label>
                                                                                    <input type="text" class="form-control" id="capBalance" name="capBalance" placeholder="Enter capBalance" required>
                                                                                  </div>
                                                                                </div>
                                                                                <div class="col-md-12">
                                                                                  <div class="form-group">
                                                                                    <label for="remark">Remark*</label>
                                                                                    <input type="text" class="form-control" id="remark" name="remark" placeholder="Enter Remark" required>
                                                                                  </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>

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

                                                                            <div class="form-group mt-3 otp-section" data-index="2" style="display: none;">
                                                                                <label for="otpCode2">Enter OTP*</label>
                                                                                <input type="text" class="form-control otp-input" id="otpCode2" name="otpCode" placeholder="Enter OTP">
                                                                                <button type="button" class="btn btn-primary verifyOtpBtn" data-index="2">Verify OTP</button>
                                                                                <button type="button" class="btn btn-secondary resendOtpBtn" data-index="2">Resend OTP</button>
                                                                                <div id="otpMessage2" 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="updateBtn2" disabled>Submit</button>
                                                                            </div>

                                                                        <!-- <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" id="form_submit">Submit</button>
                                                                        </div> -->
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                  </div>


                                        </td>

                                      </tr>
                                      {% 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>
                          
                            <!-- Add some space -->
                            <div class="col-sm-12 col-md-12 mt-3">
                                <nav aria-label="Page navigation" class="pagination-style-1">
                                  <ul class="pagination mb-0">
                                      {% if pagination %}
                                            <div class="pagination">
                                                {{ pagination.links }}
                                            </div>
                                        {% endif %}
                                  </ul>
                              </nav>
                            </div>
                            <!-- End space -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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

<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Merchant</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('user_managements.add_new_user') }}" name="merchant_registration" id="merchant_registration" enctype="multipart/form-data">
                <div class="modal-body px-4">
                        <!-- Add your form fields here -->
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="fullName">Full Name*</label>
                            <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter Full Name" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="phoneNumber">Phone Number*</label>
                            <input type="text" title="Please enter valid phone number" class="form-control" id="phoneNumber" pattern="[0-9]{10}" name="phoneNumber" placeholder="Enter Phone Number" required>
                          </div>
                          <span id="phoneNumber_error" style="color:red;"></span>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="email">Email*</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
                          </div>
                        </div>
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="password">Password*</label>
                            <input type="text" class="form-control" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,16}" title="Must contain number,uppercase,lowercase, special and 8 or more characters" placeholder="Enter password" required>
                          </div>
                        </div>
                        

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="patternId">Profile*</label>
                              <select class="form-control" name="patternId" id="patternId" required>
                                <option value="">Select Profile</option>
                                {% for each_pattern in patternsList %}
                                  <option value="{{each_pattern.id}}">{{each_pattern.name}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div>

                        <!-- <div class="col-md-4">
                          <div class="form-group">
                              <label for="categoryId">Category*</label>
                              <select class="form-control" name="categoryId" id="categoryId" onChange="getSubCategories(this.value)" required>
                                <option value="">Select Category</option>
                                {% for each_merchant_category in categorysList %}
                                  <option value="{{each_merchant_category.id}}">{{each_merchant_category.name}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="subCategoryId">Subcategory*</label>
                              <select class="form-control" name="subCategoryId" id="subCategoryId" required>
                                <option value="">Select Subcategory</option>
                              </select>                                        
                          </div>
                        </div> -->

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="entityTypeId">Entity Type*</label>
                              <select class="form-control" name="entityTypeId" id="entityTypeId" required>
                                <option value="">Select Entity Type</option>
                                {% for each_user_entity in userEntityList %}
                                  <option value="{{each_user_entity.id}}">{{each_user_entity.entityType}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="address">Address*</label>
                            <input type="text" class="form-control" id="address" name="address" placeholder="Enter address" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="stateId">State*</label>
                              <select class="form-control" name="stateId" id="stateId" onChange="getCities(this.value)" required>
                                <option value="">Select State</option>
                                {% for each_state in statesList %}
                                  <option value="{{each_state.id}}">{{each_state.stateName}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="cityId">City*</label>
                              <select class="form-control" name="cityId" id="cityId" onChange="getBlockPo(this.value)" required>
                              <option value="">Select City</option>
                              </select>                                        
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="blockPoId">Block/Po*</label>
                              <select class="form-control" name="blockPoId" id="blockPoId" onChange="getPincode(this.value)" required>
                                <option value="">Select Block/Po</option>
                              </select>                                        
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                              <label for="pincodeId">Pincode*</label>
                              <select class="form-control" name="pincodeId" id="pincodeId" required>
                                <option value="">Select Pincode</option>
                              </select>                                        
                          </div>
                        </div>

                        <!-- <div class="col-md-4">
                          <div class="form-group">
                              <label for="profileId">Profile*</label>
                              <select class="form-control" name="profileId" id="profileId" required>
                                <option value="">Select Profile</option>
                                {% for each_profile in profilelList %}
                                  <option value="{{each_profile.id}}">{{each_profile.name}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div> -->

                        <!-- <div class="col-md-4">
                          <div class="form-group">
                              <label for="parentId">Parent*</label>
                              <select class="form-control" name="parentId" id="parentId" required>
                                <option value="">Select Parent</option>
                                {% for each_user in usersList %}
                                  <option value="{{each_user.id}}">{{each_user.fullName}}</option>
                                {% endfor %}
                              </select>                                        
                          </div>
                        </div>
 -->
                        <!-- <div class="col-md-4">
                          <div class="form-group">
                          <label for="businessName">Business Name*</label>
                          <input type="text" class="form-control" id="businessName" name="businessName" placeholder="Enter business name" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                          <label for="businessAddress">Business Address*</label>
                          <input type="text" class="form-control" id="businessAddress" name="businessAddress" placeholder="Enter business address" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="panName">Pan Name*</label>
                            <input type="text" class="form-control" id="panName" name="panName" title="Please enter pan name" placeholder="Enter PAN" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="panNumber">Pan Number*</label>
                            <input type="text" class="form-control" id="panNumber" name="panNumber" pattern="[a-zA-z]{5}\d{4}[a-zA-Z]{1}" title="Please enter valid pan number" placeholder="Enter pan number" required>
                          </div>
                          <span id="panNumber_error" style="color:red;"></span>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="bankId">Bank Name*</label>
                            <select class="form-control" name="bankId" id="bankId" required>
                                <option value="">Select Bank</option>
                                {% for each_bank in masterIfscBanksList %}
                                  <option value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                {% endfor %}
                              </select>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="bankAccountNumber">Bank Account Number*</label>
                            <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" pattern="[0-9]{11,16}" title="Please enter valid bank account number" placeholder="Enter bank number" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="ifscCode">IFSC Code*</label>
                            <input type="text" class="form-control" id="ifscCode" name="ifscCode" pattern="[a-zA-Z0-9]{11}" title="Please enter exactly 11 digits" placeholder="Enter ifsc code" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="aadharName">Aadhar Name*</label>
                            <input type="text" class="form-control" id="aadharName" name="aadharName" placeholder="Enter aadhar name" required>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="aadharNumber">Aadhar Number*</label>
                            <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" pattern="\d{12}" title="Please enter 12 digit aadhar number" placeholder="Enter aadhar number" required>
                          </div>
                        </div> -->

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="merchantType">Merchant Type*</label>
                            <select class="form-control" name="merchantType" id="merchantType" required>
                                <option value="">Select</option>
                                <option value="Super Distributor">Super Distributor</option>
                                <option value="Master Distributor">Master Distributor</option>
                                <option value="Area Distributor">Area Distributor</option>
                                <option value="Retailer">Retailer</option>
                                <option value="customer">Customer</option>
                              </select>
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="maxPayinLimit">Max. Payin Limit</label>
                            <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="maxPayinLimit" name="maxPayinLimit" placeholder="Enter Max Txn Limit">
                          </div>
                        </div>

                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="maxPayoutLimit">Max. Payout Limit</label>
                            <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="maxPayoutLimit" name="maxPayoutLimit" placeholder="Enter Max Txn Limit">
                          </div>
                        </div>
                        <!-- Add more form fields as needed -->

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

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

                        <!-- Submit Button -->
                       
                </div>
                 <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="updateBtn3" disabled>Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

<script>

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

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

<script>
    function confirmDelete(url) {
        if (confirm("Are you sure want to delete?")) {
            window.location.href = url;
        }
    }
</script>


<script>
    $(document).ready(function() {
        $(".block-status-link").click(function() {
            $(".hide-after-click").hide();
        });

        $('#phoneNumber').on('keyup',function() {
          $('#phoneNumber_error').text('');
        var phoneNumber=  this.value;
      if(phoneNumber.length==10){
     $.ajax({
        url: "{{url_for('user_managements.checking_for_phone_number')}}",
        data: { "phoneNumber": phoneNumber },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
            $('#phoneNumber_error').text('Mobile Number Already Exist.');
            $('#form_submit').hide();
          }else{
            $('#form_submit').show();
          }
        }
    });
      }
    });
        $('#panNumber').on('keyup',function() {
          $('#panNumber_error').text('');
        var panNumber=  this.value;
      if(panNumber.length==10){
     $.ajax({
        url: "{{url_for('user_managements.checking_for_pan_number')}}",
        data: { "panNumber": panNumber },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
            $('#panNumber_error').text('Pan Number Already Exist.');
            $('#form_submit').hide();
          }else{
            $('#form_submit').show();
          }
        }
    });
      }
    });
    });
</script>


{%endblock%}