{% 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;
  }

  select option:first-child {
    color: #000;
    /* grey for placeholders */
  }

  select:invalid {
    color: #000;
    /* force placeholder to stay grey on load */
  }

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

  select option {
    color: #000;
    /* fallback color for all other options */
  }

  .centered {
    text-align: center;
  }
</style>

<!-- <script>
function openeditModal(each_modal) {
    $('#verifyeditDiv').hide();
    $('#updateeditGenerateBtn').text('Generate OTP').prop('disabled', false).show();

}
</script> -->
<script>
  function openaddModal(each_modal) {
    $('#verifyaddDiv').hide();
    $('#updateaddGenerateBtn').text('Generate OTP').prop('disabled', false).show();

  }
</script>

<script>
  function openeditModal(each_modal) {
    $('#verifyeditDiv').hide();
    $('#updateeditGenerateBtn').text('Generate OTP').prop('disabled', false).show();
    const editBaseURL = "{{ url_for('user_managements.user_update', userId='__ID__') }}";
    const formAction = editBaseURL.replace('__ID__', each_modal.id);
    const form = document.querySelector('#remarkeditModal form');
    if (form) {
      form.action = formAction;
    }


    document.getElementById('defaultVerificationIdedit').value = each_modal.id || '';
    document.getElementById('updateBtnupdateuser').setAttribute('data-user-id', each_modal.id);

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

  function enableSaveButton() {
    document.getElementById('updateBtnupdateuser').disabled = false;
  }

  function redirectToUpdate() {
    const userId = document.getElementById('updateBtnupdateuser').getAttribute('data-user-id');
    if (userId) {
      const redirectURL = "{{ url_for('user_managements.user_update', userId='__ID__') }}".replace('__ID__', userId);
      window.location.href = redirectURL;
    }
  }
</script>

<script>
  function opencapbalModal(each_modal) {
    $('#verifycapDiv').hide();
    $('#updatecapGenerateBtn').text('Generate OTP').prop('disabled', false).show();
    const formAction = "{{ url_for('user_managements.merchant_capbalance', userId='__ID__') }}".replace('__ID__', each_modal.id);
    const form = document.querySelector('#remarkCapBalanceModal form');
    form.action = formAction;

    document.getElementById('defaultVerificationIdcapbal').value = each_modal.id || '';
    document.getElementById('editremark_capbal').value = each_modal.remark || '';
    document.getElementById('editcapBalance').value = each_modal.capBalance || '';

    const modal = new bootstrap.Modal(document.getElementById('remarkCapBalanceModal'));
    modal.show();
  }



</script>

<script>
  function openremarkblockModal(block) {
    $('#verifyDiv').hide();
    $('#updateGenerateBtn').text('Generate OTP').prop('disabled', false).show();
    // Set the form action URL using the ID
    const updateblockstatusBaseURL = "{{ url_for('user_managements.block_user_status', userId='__ID__') }}";
    const formAction = updateblockstatusBaseURL.replace('__ID__', block.id);
    document.getElementById('updateblockStatusForm').action = formAction;


    document.getElementById('defaultVerificationIdblock').value = block.id || '';

    // Populate form fields
    document.getElementById('editremark').value = block.remark || '';
    const modal = new bootstrap.Modal(document.getElementById('remarkBlockModal'));
    modal.show();
  }

</script>

<script>
  function openremarkdeleteModal(delete_modal) {
    $('#verifydeleteDiv').hide();
    $('#updateGeneratedeleteBtn').text('Generate OTP').prop('disabled', false).show();
    // Set the form action URL using the ID
    const updatedeleteBaseURL = "{{ url_for('user_managements.delete_user', userId='__ID__') }}";
    const formAction = updatedeleteBaseURL.replace('__ID__', delete_modal.id);
    document.getElementById('updateremarkdeleteForm').action = formAction;

    document.getElementById('defaultVerificationIddelete').value = delete_modal.id || '';
    // Populate form fields
    document.getElementById('editremark').value = delete_modal.remark || '';
    const modal = new bootstrap.Modal(document.getElementById('remarkDeleteModal'));
    modal.show();
  }

</script>

<!-- <script>
function openeditModal(each_modal) {
   
    const editBaseURL = "{{ url_for('user_managements.user_update', userId='__ID__') }}";
    const formAction = editBaseURL.replace('__ID__', each_modal.id);

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

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

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



<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);
            $('#cityId').trigger('chosen:updated');
          } else {
            $('#cityId').html(htmldata);
            $('#cityId').trigger('chosen:updated');
          }

        }
      });
    } else {
      $('#cityId').html("<option value=''>Select city</option>");
      $('#cityId').trigger('chosen:updated');
      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);
            $('#blockPoId').trigger('chosen:updated');
          } else {
            $('#blockPoId').html(htmldata);
            $('#blockPoId').trigger('chosen:updated');
          }

        }
      });
    } else {
      $('#blockPoId').html("<option value=''>Select block/po</option>");
      $('#blockPoId').trigger('chosen:updated');
      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);
            $('#pincodeId').trigger('chosen:updated');
          } else {
            $('#pincodeId').html(htmldata);
            $('#pincodeId').trigger('chosen:updated');
          }

        }
      });
    } else {
      $('#pincodeId').html("<option value=''>Select Pincode</option>");
      $('#pincodeId').trigger('chosen:updated');
      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 src="https://code.jquery.com/jquery-3.6.0.min.js"></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="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 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" onclick="resetFormDataNew('merchant_registration'); openaddModal({})">
                <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="GET" 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"
                      pattern="^[a-zA-Z0-9]*$" minlength="3" maxlength="10" placeholder="Merchant id">

                  </div>



                  <div class="col-auto">
                    <input type="email" class="form-control" value="{{merchantEmail}}" name="merchantEmail"
                      id="merchantEmail" minlength="6" maxlength="100" placeholder="Merchant email">
                  </div>


                  <div class="col-auto">
                    <input type="text" class="form-control" value="{{merchantName}}" name="merchantName"
                      pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" title="Name Accepts Only letters, numbers, and @#$()+_-/"
                      id="merchantName" minlength="3" maxlength="75" placeholder="Merchant name">
                  </div>


                  <div class="col-auto">
                    <input type="text" class="form-control" value="{{merchantPhone}}" name="merchantPhone"
                      pattern="^\d{1,10}$" title="Phone Number accepts 10 digits" id="merchantPhone" minlength="1"
                      maxlength="10" placeholder="Merchant phonenumber">
                  </div>


                  <div class="col-auto">
                    <select class="form-control chosen-select" name="parentId" id="parentId">
                      <option value="">Select parent</option>
                      {% for each_user in parentsList %}
                      <option value="{{each_user.id}}" {% if each_user.id|string==parentId|string %}selected{% endif %}>
                        {{ each_user.fullName }} - {{each_user.phoneNumber}}</option>
                      {% endfor %}
                    </select>
                  </div>


                  <div class="col-auto">
                    <select class="form-control chosen-select" name="patternId">
                      <option value="">Select profile</option>
                      {% for each_profile in patternsList %}
                      <option value="{{each_profile.id}}" {% if each_profile.id|string==patternId|string %}selected{%
                        endif %}>{{each_profile.name}}</option>
                      {% endfor %}
                    </select>
                  </div>


                  <div class="col-auto">
                    <select class="form-control chosen-select" name="merchantType" id="merchantType_search">
                      <option value="">Select merchant type</option>
                      <option value="Super Distributor" {% if merchantType=="Super Distributor" %}selected{% endif %}>
                        Super Distributor</option>
                      <option value="Master Distributor" {% if merchantType=="Master Distributor" %}selected{% endif %}>
                        Master Distributor</option>
                      <option value="Area Distributor" {% if merchantType=="Area Distributor" %}selected{% endif %}>Area
                        Distributor</option>
                      <option value="Retailer" {% if merchantType=="Retailer" %}selected{% endif %}>Retailer</option>
                      <option value="customer" {% if merchantType=="customer" %}selected{% endif %}>Customer</option>
                    </select>
                  </div>

                  <div class="col-auto">
                    <select class="form-control chosen-select" name="siteTitle" id="siteTitle_search">
                      <option value="">Select site title</option>
                      {% for each_site in siteTitleList %}
                      <option value="{{each_site.siteCode}}" {% if each_site.siteCode==siteTitle %}selected{% endif %}>
                        {{ each_site.siteCode }} </option>
                      {% endfor %}
                    </select>
                  </div>

                  <div class="col-auto">
                    <select class="form-control chosen-select" name="stateId" id="stateId_search"
                      onChange="getCities(this.value)">
                      <option value="">Select state</option>
                      {% for each_state in statesList %}
                      <option value="{{each_state.id}}" {% if each_state.id|string==stateId|string %}selected{% endif
                        %}>{{each_state.stateName}}</option>
                      {% endfor %}
                    </select>
                  </div>



                  <div class="col-auto">
                    <button type="submit" class="btn btn-primary" style="height: 42px;">Search</button>
                  </div>
                  <div class="col-auto">
                    <a href="{{url_for('user_managements.manage_users_list')}}"><button type="button"
                        class="btn btn-warning">Reset</button></a>
                  </div>

                  <div class="col-auto">
                    <a
                      href="{{url_for('user_managements.admin_download_merchant_management_excel_reports')}}?merchantId={{ request.args.get('merchantId', '') }}&merchantEmail={{ request.args.get('merchantEmail', '') }}&merchantName={{ request.args.get('merchantName', '') }}&merchantPhone={{ request.args.get('merchantPhone', '') }}&parentId={{ request.args.get('parentId', '')}}&patternId={{ request.args.get('patternId', '') }}&merchantType={{ request.args.get('merchantType', '') }}&siteTitle={{ request.args.get('siteTitle', '') }}&stateId={{ request.args.get('stateId','')}} ">
                      <button type="button" title="Click to download" style="height: 42px;" class="btn btn-secondary"><i
                          class="ri-file-excel-line"></i></button>
                    </a>
                  </div>

                  <br>
                  {% for error in form.merchantId.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.merchantEmail.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}
                  {% for error in form.merchantName.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.merchantPhone.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.parentId.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.patternId.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.merchantType.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.siteTitle.errors %}
                  <span class="text-danger" class="error">{{ error }}</span><br>
                  {% endfor %}

                  {% for error in form.stateId.errors %}
                  <span class="text-danger" class="error">{{ error }}</span>
                  {% endfor %}


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

            <!-- Add some space -->
            <div class="mt-3"></div>
            <!-- End space -->
            <div class="table-responsive">
              <table id="datatable-basic" class="table text-nowrap" style="padding-bottom: 200px;">
                <thead class="table-primary">
                  <tr>
                    <th scope="col">S.No</th>
                    <th scope="col">Site Title</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">Merchant Type</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">State</th>
                    {% if 'edit' in session.get('userManagementPermissions', []) %}
                    <th scope="col">Status</th>
                    {% endif %}
                    {% if 'edit' in session.get('userManagementPermissions', []) or 'view' in
                    session.get('userManagementPermissions', []) or 'block' in
                    session.get('userManagementPermissions',[]) or 'delete' in session.get('userManagementPermissions',
                    []) or 'viewchild' in session.get('userManagementPermissions', []) or 'viewparent' in
                    session.get('userManagementPermissions', []) or 'capBalance' in
                    session.get('userManagementPermissions', []) %}
                    <th scope="col">Action</th>
                    {% endif %}
                  </tr>
                </thead>
                <tbody>
                  {% if usersList %}
                  {% for each_user in usersList %}
                  <tr>
                    <td>{{snoCount + loop.index}}</td>

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

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


                    {% if each_user.email or each_user.fullName or each_user.phoneNumber %}
                    <td>{{ each_user.email }}<br>{{ each_user.fullName }} <br> {{each_user.phoneNumber}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}


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


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


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


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


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

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


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

                    <!-- {% 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" data-requires-location>
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" id="latitude_status{{ loop.index }}" name="latitude">
                                <input type="hidden" id="longitude_status{{ loop.index }}" name="longitude">
                                <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{{ loop.index }}"
                                          pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                          title="Remark must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                                          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 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> -->
                          <!-- <a class="dropdown-item editUserBtn" href="javascript:void(0);" data-user-id="{{ each_user.id }}">
                                                              <span class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                                                                <i class="ri-edit-line"></i>
                                                              </span> Edit
                                                            </a> -->


                          <!-- Edit Button (Opens OTP Modal) -->
                          <!-- <a class="dropdown-item editUserBtn" href="javascript:void(0);" data-bs-toggle="modal"
                            data-bs-target="#remarkeditModal{{ loop.index }}" data-user-id="{{ each_user.id }}" onclick='openeditModal({})' >
                            <span class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                              <i class="ri-edit-line"></i>
                            </span> Edit
                          </a> -->

                          <a class="dropdown-item editUserBtn" href="javascript:void(0);" onclick='openeditModal({
                            "id": "{{ 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> -->

                          <a class="dropdown-item " href="javascript:void(0);" onclick='openremarkblockModal({
                            "id": "{{ each_user.id }}",
                            "remark":" {{ each_user.remark}}", 
                              })'>
                            <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> -->

                          <a class="dropdown-item " href="javascript:void(0);" onclick='openremarkdeleteModal({
                              "id": "{{ each_user.id }}",
                              "remark":" {{ each_user.remark}}", 
                                })'>
                            <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 'viewchild' 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 'viewparent' 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 %}

                          {% if 'capBalance' in session.get('userManagementPermissions', []) %}
                          <!--  <a class="dropdown-item" href="#" data-bs-toggle="modal"
                            data-bs-target="#remarkCapBalanceModal{{ loop.index }}" onclick='opencapbalModal({})'><span
                              class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></span>Cap Balance</a> -->

                          <a class="dropdown-item " href="javascript:void(0);" onclick='opencapbalModal({
                              "id": "{{ each_user.id }}",
                              "capBalance":" {{ each_user.capBalance}}", 
                              "remark":" {{ each_user.remark}}", 
                                })'>
                            <span class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                              <i class="ri-edit-line"></i>
                            </span> Cap Balance
                          </a>


                          {% endif %}
                          <!-- <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>

                    </td>
                  </tr>




                  {% endfor %}
                  {% else %}
                  <tr>
                    <td colspan="16" style="text-align: center;">No Data Found</td>
                  </tr>
                  {% endif %}
                </tbody>
                <div class="flashes">
                  <center>
                    {% 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 %}

                    {% if error %}
                    <h2><b>
                        <center style="color:RED">{{ error }}</center>
                      </b></h2>
                    {% endif %}
                  </center>
              </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 -->


{% if 'block' in session.get('userManagementPermissions', []) %}

<div class="modal fade" id="remarkBlockModal" 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="" enctype="multipart/form-data" name="updateblockStatusForm"
          id="updateblockStatusForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_block" name="latitude">
          <input type="hidden" id="longitude_block" name="longitude">
          <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdblock">
          <div class="form-group">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="editremark">Remark*</label>
                  <input type="text" class="form-control" id="editremark" name="remark"
                    pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$"
                    title="Remark contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                    placeholder="Enter remark" required>
                  <span id="remark_edit_error" class="error"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group mt-3">
            <button type="button" class="btn btn-warning generateOtpBtn" id="updateGenerateBtn" data-index="block"
              data-mail-type="User Registration">Generate OTP</button>
            <input type="hidden" id="otpLogidblock" name="otpLogid">
          </div>

          <div class="form-group mt-3 otp-section" data-index="block" style="display: none;" id="verifyDiv">
            <label for="otpCodeblock">Enter OTP*</label>
            <input type="text" class="form-control otp-input" id="otpCodeblock" name="otpCode" placeholder="Enter otp">
            <div class="mt-2">
              <button type="button" class="btn btn-primary verifyOtpBtn" data-index="block">Verify
                OTP</button>
              <button type="button" class="btn btn-secondary resendOtpBtn" data-index="block"
                data-mail-type="User Registration">Resend OTP</button>
            </div>
            <div id="otpMessageblock" class="text-danger mt-2"></div>
            <span id="otpCode_error" class="error"></span>
          </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="updateBtnblock" disabled>Submit</button>
          </div>


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

{% endif %}

{% if 'delete' in session.get('userManagementPermissions', []) %}
<div class="modal fade" id="remarkDeleteModal" 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="" enctype="multipart/form-data" name="updateremarkdeleteForm"
          id="updateremarkdeleteForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_delete" name="latitude">
          <input type="hidden" id="longitude_delete" name="longitude">
          <input type="hidden" name="defaultVerificationId" id="defaultVerificationIddelete">
          <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"
                    pattern="^[a-zA-Z0-9\s@#$()+_\-/.]+$"
                    title="Remark contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                    placeholder="Enter Remark" required>
                  <span id="remark_edit_error" class="error"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group mt-3">
            <button type="button" class="btn btn-warning generateOtpBtn" id="updateGeneratedeleteBtn"
              data-index="delete" data-mail-type="User Registration">Generate OTP</button>
            <input type="hidden" id="otpLogiddelete" name="otpLogid">
          </div>

          <div class="form-group mt-3 otp-section" data-index="delete" style="display: none;" id="verifydeleteDiv">
            <label for="otpCodedelete">Enter OTP*</label>
            <input type="text" class="form-control otp-input" id="otpCodedelete" name="otpCode" placeholder="Enter otp">
            <div class="mt-2">
              <button type="button" class="btn btn-primary verifyOtpBtn" data-index="delete">Verify OTP</button>
              <button type="button" class="btn btn-secondary resendOtpBtn" data-index="delete"
                data-mail-type="User Registration">Resend OTP</button>
            </div>
            <div id="otpMessagedelete" class="text-danger mt-2"></div>
            <span id="otpCode_error" class="error"></span>
          </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="updateBtndelete" disabled>Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}

{% if 'edit' in session.get('userManagementPermissions', []) %}
<!-- OTP Verification Modal -->
<div class="modal fade" id="remarkeditModal" tabindex="-1" role="dialog" aria-labelledby="remarkeditModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form method="POST" action="" enctype="multipart/form-data">
        <div class="modal-header">
          <h5 class="modal-title">OTP Verification*</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdedit">

          <!-- Generate OTP Button -->
          <div class="form-group mt-3">
            <button type="button" class="btn btn-warning generateOtpBtn" id="updateeditGenerateBtn"
              data-index="updateuser" data-mail-type="User Registration">Generate OTP</button>
            <input type="hidden" id="otpLogidupdateuser" name="otpLogid">
          </div>

          <!-- OTP Section -->
          <div class="form-group mt-3 otp-section" data-index="updateuser" style="display: none;" id="verifyeditDiv">
            <label for="otpCodeupdateuser">Enter OTP*</label>
            <input type="text" class="form-control otp-input" id="otpCodeupdateuser" name="otpCode"
              placeholder="Enter otp">
            <div class="mt-2">
              <button type="button" class="btn btn-primary verifyOtpBtn" data-index="updateuser">Verify OTP</button>
              <button type="button" class="btn btn-secondary resendOtpBtn" data-index="updateuser"
                data-mail-type="User Registration">Resend OTP</button>
            </div>
            <div id="otpMessageupdateuser" class="text-danger mt-2"></div>
            <span id="otpCode_error" class="error"></span>
          </div>

        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary updateBtn" id="updateBtnupdateuser" disabled
            onclick="redirectToUpdate()">
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endif %}

{% if 'capBalance' in session.get('userManagementPermissions', []) %}
<div class="modal fade" id="remarkCapBalanceModal" 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="" enctype="multipart/form-data" id="update_capbalance_form"
          name="update_capbalance_form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_capbal" name="latitude">
          <input type="hidden" id="longitude_capbal" name="longitude">
          <input type="hidden" name="defaultVerificationId" id="defaultVerificationIdcapbal">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label for="editcapBalance">Cap Balance*</label>
                <input type="text" class="form-control" id="editcapBalance" name="capBalance"
                  pattern="^\s*₹?(\d{1,3})(,\d{3})*(\.\d{1,2})?\s*$"
                  title="Cap Balance must contain only numeric characters" placeholder="Enter cap balance" required>
                <span id="capBalance_error" class="error"></span>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label for="editremark_capbal">Remark*</label>
                <input type="text" class="form-control" id="editremark_capbal" name="remark"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="Remark must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter remark" required>
                <span id="remark_error" class="error"></span>
              </div>
            </div>
          </div>
          <div class="form-group mt-3">
            <button type="button" class="btn btn-warning generateOtpBtn" id="updatecapGenerateBtn" data-index="capBal"
              data-mail-type="User Registration">Generate
              OTP</button>
            <input type="hidden" id="otpLogidcapBal" name="otpLogid">
          </div>

          <div class="form-group mt-3 otp-section" data-index="capBal" style="display: none;" id="verifycapDiv">
            <label for="otpCodecapBal">Enter OTP*</label>
            <input type="text" class="form-control otp-input" id="otpCodecapBal" name="otpCode" placeholder="Enter otp">
            <div class="mt-2">
              <button type="button" class="btn btn-primary verifyOtpBtn" data-index="capBal">Verify OTP</button>
              <button type="button" class="btn btn-secondary resendOtpBtn" data-index="capBal"
                data-mail-type="User Registration">Resend
                OTP</button>
            </div>
            <div id="otpMessagecapBal" class="text-danger mt-2"></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 updateBtn" id="updateBtncapBal" disabled>Submit</button>
          </div>
        </form>

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

    </div>
  </div>
</div>
{% endif %}




<!-- 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">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_add" name="latitude">
        <input type="hidden" id="longitude_add" name="longitude">

        <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" pattern="^[a-zA-Z\s@#$()+_\-/]+$"
                  title="Full Name must contain only alphabetic characters (letters) and spaces"
                  placeholder="Enter full name" required>
                <span id="fullName_error" class="error"></span>
              </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}$" title="Phone number must be exactly 10 digits" name="phoneNumber"
                  placeholder="Enter phone number" required>
                <span id="phoneNumber_error" class="error"></span>
              </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"
                  pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" title="Invalid email format!"
                  placeholder="Enter email" required>
                <span id="email_error" class="error"></span>
              </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" placeholder="Enter password"
                  required>
                <span id="password_error" class="error"></span>
              </div>
            </div>


            <div class="col-md-4">
              <div class="form-group">
                <label for="patternId">Profile*</label>
                <select class="form-control chosen-select" 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>
                <span id="patternId_error" class="error"></span>
              </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 chosen-select" 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>
                <span id="entityTypeId_error" class="error"></span>
              </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" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="Address must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/."
                  placeholder="Enter address" required>
                <span id="address_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-4">
              <div class="form-group">
                <label for="stateId">State*</label>
                <select class="form-control chosen-select" 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>
                <span id="stateId_error" class="error"></span>
              </div>
            </div>

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

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

            <div class="col-md-4">
              <div class="form-group">
                <label for="pincodeId">Pincode*</label>
                <select class="form-control chosen-select" name="pincodeId" id="pincodeId" required>
                  <option value="">Select pincode</option>
                </select>
                <span id="pincodeId_error" class="error"></span>
              </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-select" 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>
                <span id="merchantType_error" class="error"></span>
              </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">
                <span id="maxPayinLimit_error" class="error"></span>
              </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">
                <span id="maxPayoutLimit_error" class="error"></span>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="siteTitle">Site Title*</label>
                <select class="form-control chosen-select" name="siteTitle" id="siteTitle" required>
                  <option value="">Select site title</option>
                  {% for each_matchultiple_app_sites in matchultipleAppSitesList %}
                  <option value="{{each_matchultiple_app_sites.siteCode}}">{{each_matchultiple_app_sites.siteCode}}
                  </option>
                  {% endfor %}
                </select>
                <span id="siteTitle_error" class="error"></span>
              </div>
            </div>
            <!-- Add more form fields as needed -->

            <div class="form-group mt-3">
              <button type="button" class="btn btn-warning generateOtpBtn" data-index="adduser"
                id="updateaddGenerateBtn" data-mail-type="User Registration">Generate OTP</button>
              <input type="hidden" id="otpLogidadduser" name="otpLogid">
              <span id="otpLogid_error" class="error"></span>
            </div>

            <div class="form-group mt-3 otp-section" data-index="adduser" style="display: none;" id="verifyaddDiv">
              <label for="otpCode3">Enter OTP*</label>
              <input type="text" class="form-control otp-input" id="otpCodeadduser" name="otpCode"
                placeholder="Enter otp">
              <span id="otpCode_error" class="error"></span>
              <div class="mt-2">
                <button type="button" class="btn btn-primary verifyOtpBtn" data-index="adduser">Verify OTP</button>
                <button type="button" class="btn btn-secondary resendOtpBtn" data-index="adduser"
                  data-mail-type="User Registration">Resend OTP</button>
              </div>
              <div id="otpMessageadduser" class="text-danger mt-2"></div>
              <span id="otpCode_error" class="error"></span>
            </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="updateBtnadduser" disabled>Submit</button>
          </div>
      </form>
    </div>
  </div>
</div>
<!-- End Create New Bank Modal -->
<script type="text/javascript">


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

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

        event.preventDefault();

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

  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 () {
    var csrfToken = $('input[name="csrf_token"]').val()
    $(".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, "csrf_token": csrfToken },
          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, "csrf_token": csrfToken },
          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>

<script type="text/javascript">

  $(document).ready(function () {
    $('#merchant_registration').validate({
      rules: {
        fullName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        phoneNumber: {
          required: true,
          minlength: 10,
          maxlength: 10,
        },
        email: {
          required: true,
          minlength: 6,
          maxlength: 100,
        },
        password: {
          required: false,
          minlength: 6,
          maxlength: 30,
        },
        patternId: {
          required: true,
        },
        entityTypeId: {
          required: true,
        },
        address: {
          required: true,
          minlength: 6,
          maxlength: 100,
        },
        stateId: {
          required: true,
        },
        cityId: {
          required: true,
        },
        blockPoId: {
          required: true,
        },
        pincodeId: {
          required: true,
        },
        merchantType: {
          required: true,
        },
        maxPayinLimit: {
          required: false,
          minlength: 1,
          maxlength: 10,
        },
        maxPayoutLimit: {
          required: false,
          minlength: 1,
          maxlength: 10,
        },
        siteTitle: {
          required: true,
        }
      },
      messages: {
        fullName: {
          required: "Full Name is required",
          minlength: 'Full Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Full Name is must be lessthan or equals to 75 charecters',
        },
        phoneNumber: {
          required: "Phone Number is required",
          minlength: 'Phone Number is must be equals to 10 digits',
          maxlength: 'Phone Number is must be equals to 10 digits',
        },
        email: {
          required: "Email is Required",
          minlength: 'Email is must be greaterthan or equals to 6 charecters',
          maxlength: 'Email is must be lessthan or equals to 100 charecters',
        },
        password: {
          required: "Password is required",
          minlength: 'Password is must be greaterthan or equals to 6 charecters',
          maxlength: 'Password is must be lessthan or equals to 30 charecters',
        },
        patternId: {
          required: "Profile is required",
        },
        entityTypeId: {
          required: "Entity Type is required",
        },
        address: {
          required: "Address is required",
          minlength: 'Address is must be greaterthan or equals to 6 charecters',
          maxlength: 'Address is must be lessthan or equals to 100 charecters',
        },
        stateId: {
          required: " State is required",
        },
        cityId: {
          required: " City is required",
        },
        blockPoId: {
          required: "Block/PO is required",
        },
        pincodeId: {
          required: "Pincode is required",
        },
        merchantType: {
          required: "Merchant Type is required",
        },
        maxPayinLimit: {
          required: "maxPayinLimit is required",
          minlength: 'maxPayinLimit is must be greaterthan or equals to 0',
          maxlength: 'maxPayinLimit is must be lessthan or equals to 10 digits',
        },
        maxPayoutLimit: {
          required: "maxPayoutLimit is required",
          minlength: 'maxPayoutLimit is must be greaterthan or equals to 0',
          maxlength: 'maxPayoutLimit is must be lessthan or equals to 10 digits',
        },
        siteTitle: {
          required: "Site Title is required",

        }
      },
      submitHandler: function (form, event) {
        $('.updateBtn').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          function (lat, lng) {

            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);
            $.ajax({
              url: form.action,
              type: form.method,
              data: $(form).serialize(),
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                if (response.responseStatus == 1 || response.responseStatus == 4) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.updateBtn').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_error").text(value)
                  });
                  return false;
                } else if (response.responseStatus == 2) {
                  $('.updateBtn').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $('#errorMessage').text(response.result);
                  return false;
                } else {
                  location.reload();
                }

              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }
            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#update_capbalance_form').validate({
      rules: {
        capBalance: {
          required: true,
        },

        remark: {
          required: true,
          minlength: 1,
          maxlength: 150,
        },
      },
      messages: {
        capBalance: {
          required: 'Cap Balance is required',
        },

        remark: {
          required: 'Remark is required',
          minlength: 'Remark must be at least 1 character',
          maxlength: 'Remark must be less than or equal to 150 characters',
        },
      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          (lat, lng) => {
            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);

            let formData = new FormData(form);
            $.ajax({
              url: form.action,
              type: form.method,
              data: formData,
              processData: false,
              contentType: false,
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                if (response.responseStatus == 1 || response.responseStatus == 4) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_error").text(value);
                  });
                } else if (response.responseStatus == 2) {
                  $('.form_submit').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $('#errorMessage').text(response.result);
                } else {
                  location.reload();
                }
              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }

            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
  });


</script>
<script type="text/javascript">

  $(document).ready(function () {
    $('#updateblockStatusForm').validate({
      rules: {
        remark: {
          required: true,
          minlength: 3,
          maxlength: 75,

        },

      },
      messages: {
        remark: {
          required: 'Remark is required',
          minlength: 'Remark must be at least 3 characters long',
          maxlength: 'Remark must be less than or equal to 75 characters long',

        },

      },
      submitHandler: function (form, event) {
        $('.updateBtn').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          function (lat, lng) {

            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);

            let formData = new FormData(form);

            $.ajax({
              url: form.action,
              type: form.method,
              data: formData,
              processData: false,  // Don't process the data as a query string
              contentType: false,  // Let jQuery set the content-type for multipart/form-data
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                if (response.responseStatus == 1 || response.responseStatus == 4) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.updateBtn').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_edit_error").text(value)
                  });
                  return false;
                } else if (response.responseStatus == 2) {
                  $('.updateBtn').prop('disabled', true);
                  $('#newLoadingModel').hide();
                  $('#EditErrorMessage').text(response.result);
                  return false;
                } else {
                  location.reload();
                }

              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }
            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
  });
</script>


<script type="text/javascript">

  $(document).ready(function () {



    $('#updateremarkdeleteForm').validate({
      rules: {
        remark: {
          required: true,
          minlength: 3,
          maxlength: 75,

        },

      },
      messages: {
        remark: {
          required: 'Remark is required',
          minlength: 'Remark must be at least 3 characters long',
          maxlength: 'Remark must be less than or equal to 75 characters long',

        },

      },
      submitHandler: function (form, event) {
        $('.updateBtn').prop('disabled', true);
        $('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
          function (lat, lng) {

            $(form).find('input[name="latitude"]').val(lat);
            $(form).find('input[name="longitude"]').val(lng);

            let formData = new FormData(form);

            $.ajax({
              url: form.action,
              type: form.method,
              data: formData,
              processData: false,  // Don't process the data as a query string
              contentType: false,  // Let jQuery set the content-type for multipart/form-data
              xhrFields: {
                withCredentials: true   // THIS ensures cookies/session are sent
              },
              success: function (response) {
                if (response.responseStatus == 1 || response.responseStatus == 4) {
                  form.reset();
                  location.reload();
                } else if (response.responseStatus == 0) {
                  $('.updateBtn').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $.each(response.result, function (key, value) {
                    $('#' + key + "_edit_error").text(value)
                  });
                  return false;
                } else if (response.responseStatus == 2) {
                  $('.updateBtn').prop('disabled', false);
                  $('#newLoadingModel').hide();
                  $('#EditErrorMessage').text(response.result);
                  return false;
                } else {
                  location.reload();
                }

              },
              error: function (xhr) {
                // You can also reload page after error (e.g. CSRF token mismatch)
                location.reload();
              }
            });
          },
          function () {
            $('.form_submit').prop('disabled', false);
            $('#newLoadingModel').hide();
            alert("Location access is required to proceed. Please enable it in your browser.");
          }
        );
      }
    });
  });
</script>


{%endblock%}