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

<!-- 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 List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Merchant Managements List
                        </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">Pattern</th>
                                          <th scope="col">Payin Balance(₹)</th>
                                          <th scope="col">Payout 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>{{ each_user.snoCount }}</td>
                                          <td>{{ each_user.merchantUniqueNumber }}</td>
                                          <td>{{ each_user.email }}<br>{{ each_user.fullName }} <br> {{each_user.phoneNumber}}</td>
                                          <td>{{each_user.patternName}}</td>
                                          <td style="text-align: right;">{{each_user.walletBalance}}</td>
                                          <td style="text-align: right;">{{each_user.payoutBalance}}</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-light" href="{{ url_for('user_managements.update_user_status', userId=each_user.id) }}">{{each_user.actionText}}</a>
                                                {% else %}
                                                  <a class="btn btn-sm btn-warning-light" href="{{ url_for('user_managements.update_user_status', userId=each_user.id) }}">{{each_user.actionText}}</a>
                                                {% endif %}
                                              </td>
                                          {% endif %}
                                          <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="{{ url_for('user_managements.block_user_status', userId=each_user.id) }}"><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="confirmDelete('{{ url_for('user_managements.delete_user', userId=each_user.id) }}')"><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 %}

                                                    <!-- <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 %}
                                  </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">Pattern*</label>
                              <select class="form-control" name="patternId" id="patternId" required>
                                <option value="">Select Pattern</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>
                        <!-- Add more form fields as needed -->
                </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>
<!-- 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%}