{% extends 'super_admin_templates/base.html' %}
{% set path = "user_managements" %}
{% set subpath = "user_managements_list" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
  }
  .pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
  }
  #rotateButton {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background-color: #f1f1f1;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.approved {
    color: green;
}
.zoom-controls button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin: 0 10px;
}

</style>
<style>
  .custom-select {
    width: 100px; 
    height: 31px;
    display: inline-block; 
    padding: 0.375rem 0.75rem; 
    border-radius: 0.25rem;
}
.image-modal {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        overflow: hidden; 
    }

    .modal-content {
        max-width: 80%; 
        max-height: 80%; 
        object-fit: contain; 
        transition: transform 0.3s; 
    }

     /* .close-modal {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    } */

    .rotate-button {
        background: none;
        border: none;
        color: white;
        font-size: 30px;
        cursor: pointer;
        margin-top: 5px;
        margin-right: 120px;
        float: right;
    }
    .img-thumbnail {
    max-height: 100%; 
    max-width: 100%; 

    
</style>
<style>
  .btn-edit {
    background-color: transparent;
    border: none;
    color: #007bff;
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline;
  }


  .image-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.imagepopup {
  display: block;
  width: 100%;
  height: 80%;
  cursor: zoom-in;
}

.zoom-preview {
  position: absolute;
  top: 0;
  left: 160px; /* Offset to the right of the image */
  width: 400px; /* Increase width to match flipkart-style zoom */
  height: 400px; /* Increase height to match flipkart-style zoom */
  border: 1px solid #ddd;
  background-color: #fff;
  background-size: 600px 600px; /* Zoom level */
  display: none; /* Initially hidden */
  z-index: 1000;
  overflow: hidden; 
  background: no-repeat;
}
    .backzoom-preview{
  position: absolute;
  top: 0;
  left: 160px;
  width: 400px; 
  height: 400px; 
  border: 1px solid #ddd;
  background-color: #fff;
  background-size: 600px 600px; 
  display: none; 
  z-index: 1000;
  overflow: hidden; 
  background: no-repeat;
}
.zoom-preview2 {
  position: absolute;
  top: 0; 
  left: -420px; 
  width: 400px; 
  height: 400px; 
  border: 1px solid #ddd;
  background-color: #fff;
  background-size: 100% 100%; 
  display: none; 
  z-index: 1000;
  overflow: hidden; 
  background-repeat: no-repeat; 
  transition: display 0.3s ease; 
}


</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
      const panImage = document.querySelector('#panDocument');
      const panZoomPreview = document.querySelector('.zoom-preview');
    
      const aadharImage = document.querySelector('#aadharDocument');
      const aadharZoomPreview = document.querySelector('#aadharZoomPreview');
      const backAadharImage = document.querySelector("#aadharBackDocument");
      const backAadharZoomPreview = document.querySelector('.backzoom-preview');
  
      const zoomLevel = {
          pan: 5,
          aadhar: 5,
          backAadhar: 5
      };
  
      function handleZoom(image, zoomPreview, zoomKey) {
          image.addEventListener('mousemove', function (e) {
              zoomPreview.style.display = 'block';
              const posX = e.offsetX;
              const posY = e.offsetY;
              const width = image.offsetWidth;
              const height = image.offsetHeight;
              const backgroundPosX = (posX / width) * 100;
              const backgroundPosY = (posY / height) * 100;
  
              zoomPreview.style.backgroundImage = `url(${image.src})`;
              zoomPreview.style.backgroundPosition = `${backgroundPosX}% ${backgroundPosY}%`;
              zoomPreview.style.backgroundSize = `${width * zoomLevel[zoomKey]}px ${height * zoomLevel[zoomKey]}px`;
          });
  
          image.addEventListener('mouseleave', function () {
              zoomPreview.style.display = 'none';
          });
  
          // Zoom In and Out
          const zoomInButton = image.parentElement.querySelector('.zoom-in');
          const zoomOutButton = image.parentElement.querySelector('.zoom-out');
  
          zoomInButton.addEventListener('click', function () {
              zoomLevel[zoomKey] *= 1.2; // Increase zoom level by 20%
              updateZoomPreview(image, zoomPreview, zoomKey);
          });
  
          zoomOutButton.addEventListener('click', function () {
              zoomLevel[zoomKey] /= 1.2; // Decrease zoom level by 20%
              updateZoomPreview(image, zoomPreview, zoomKey);
          });
      }
  
      function updateZoomPreview(image, zoomPreview, zoomKey) {
          const width = image.offsetWidth;
          const height = image.offsetHeight;
          zoomPreview.style.backgroundSize = `${width * zoomLevel[zoomKey]}px ${height * zoomLevel[zoomKey]}px`;
      }
  
      if (panImage && panZoomPreview) {
          handleZoom(panImage, panZoomPreview, 'pan');
      }
  
      if (aadharImage && aadharZoomPreview) {
          handleZoom(aadharImage, aadharZoomPreview, 'aadhar');
      }
  
      if (backAadharImage && backAadharZoomPreview) {
          handleZoom(backAadharImage, backAadharZoomPreview, 'backAadhar');
      }
  });
  
    
    </script>

<style>

  .tab-style-3 .nav-item .nav-link.tab-num-2:after {
    content: "2"; 
  }

  .tab-style-3 .nav-item .nav-link.tab-num-3:after {
      content: "3";
  }

  .tab-style-3 .nav-item .nav-link.tab-num-4:after {
      content: "4";
  }

  .tab-style-3 .nav-item .nav-link.tab-num-5:after {
      content: "5";
  }


#home-tab, #profile-tab, #contact-tab, #test-tab, #testing-tab {
    position: relative; 
    display: inline-block;
    padding-right: 25px;
    font-size: 12px; 
    line-height: 1.5; 
    vertical-align: middle;
    cursor: pointer; 
}

#home-tab.success::after{
    content: "\f00c"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: green; 

}

#profile-tab.success::after,
#contact-tab.success::after,
#test-tab.success::after,
#testing-tab.success::after {
    content: "\f00c"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: green; 
}

#home-tab.pending::after{
    content: "\f00c"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: green; 

}

#profile-tab.pending::after,
#contact-tab.pending::after,
#test-tab.pending::after,
#testing-tab.pending::after {
    content: "\f141"; 
    font-family: 'Font Awesome 5 Free';
    color: #ffcb22;
    font-size: 16px;
    z-index: 1;
/*    background-color: #ffcb22; */
}

#home-tab.error::after{
    content: "\f00c"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: green; 

}

#profile-tab.error::after,
#contact-tab.error::after,
#test-tab.error::after,
#testing-tab.error::after {
    content: "\f00d"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: red;
}

#home-tab.submitted::after{
    content: "\f00c"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: green; 
}

#profile-tab.submitted::after,
#contact-tab.submitted::after,
#test-tab.submitted::after,
#testing-tab.submitted::after {
    content: "\f15b"; 
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 16px;
    z-index: 1;
    background-color: #ff8c00; 
}

</style>

<style>

.imagepopup {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.imagepopup:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    position: fixed;
    right: 0; /* Change this to your desired distance from the right */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
  
    padding: 10px; /* Add padding to the modal */
}
.modal-content {
    margin: auto;
    display: block;
    width: 485px; /* Fixed width */
    position: fixed;
    right: 0;
    top: 50%; /* Centered vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    transition: transform 0.2s; /* Smooth scaling transition */
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 60px;
  right: 20px;
  color: #d12d2d;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index: 999;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .imagepopup {
    margin-left: -400px; 
  }
}
</style>

<!-- 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">Update KYC Merchant Details</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"><a href="{{ url_for('user_managements.pending_users_list') }}">Pending KYC Merchants List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Update KYC Merchant Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}

                            {% 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 %}
                        </center>
                        <div class="table-responsive">
                          <div class="row">
                            <div class="col-md-12">
                              <div class="card card-primary card-tabs">
                                <div class="card-header p-0 pt-1">
                                  <div class="card-body">
                                    <ul class="nav nav-tabs justify-content-center mb-5 tab-style-3" id="myTab2" role="tablist">
                                      {% if redirectval == "personalDetails" %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link active home py-1" id="home-tab" data-bs-toggle="tab"
                                            data-bs-target="#home-tab-pane" type="button" role="tab"
                                            aria-controls="home-tab-pane" aria-selected="true">Personal Details</button>
                                        </li>
                                      {% else %}
                                        <li class="nav-item me-0" role="presentation">
                                        <button class="nav-link home py-1" id="home-tab" data-bs-toggle="tab"
                                          data-bs-target="#home-tab-pane" type="button" role="tab"
                                          aria-controls="home-tab-pane" aria-selected="true">Personal Details</button>
                                        </li>
                                      {% endif %}

                                      {% if isIndividual == False %}
                                        {% if redirectval == "businessDetails" %}
                                          <li class="nav-item me-0" role="presentation">
                                            <button class="nav-link active about py-1" id="profile-tab" data-bs-toggle="tab"
                                              data-bs-target="#profile-tab-pane" type="button" role="tab"
                                              aria-controls="profile-tab-pane" aria-selected="false">Business Details</button>
                                          </li>
                                        {% else %}
                                          <li class="nav-item me-0" role="presentation">
                                            <button class="nav-link about py-1" id="profile-tab" data-bs-toggle="tab"
                                              data-bs-target="#profile-tab-pane" type="button" role="tab"
                                              aria-controls="profile-tab-pane" aria-selected="false">Business Details</button>
                                          </li>
                                        {% endif %}

                                      {% endif %}

                                      {% if redirectval == "kycDetails" %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link active services py-1" id="contact-tab" data-bs-toggle="tab"
                                            data-bs-target="#contact-tab-pane" type="button" role="tab"
                                            aria-controls="contact-tab-pane" aria-selected="false">KYC</button>
                                        </li>
                                      {% else %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link services py-1" id="contact-tab" data-bs-toggle="tab"
                                            data-bs-target="#contact-tab-pane" type="button" role="tab"
                                            aria-controls="contact-tab-pane" aria-selected="false">KYC</button>
                                        </li>
                                      {% endif %}

                                      {% if redirectval == "videoVerificationDetails" %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link active test py-1" id="test-tab" data-bs-toggle="tab"
                                            data-bs-target="#test-tab-pane" type="button" role="tab"
                                            aria-controls="test-tab-pane" aria-selected="false">Video Verification</button>
                                        </li>
                                      {% else %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link test py-1" id="test-tab" data-bs-toggle="tab"
                                            data-bs-target="#test-tab-pane" type="button" role="tab"
                                            aria-controls="test-tab-pane" aria-selected="false">Video Verification</button>
                                        </li>
                                      {% endif %}


                                      {% if redirectval == "agreementDetails" %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link active testing py-1" id="testing-tab" data-bs-toggle="tab"
                                            data-bs-target="#testing-tab-pane" type="button" role="tab"
                                            aria-controls="testing-tab-pane" aria-selected="false">Agreement</button>
                                        </li>
                                      {% else %}
                                        <li class="nav-item me-0" role="presentation">
                                          <button class="nav-link testing py-1" id="testing-tab" data-bs-toggle="tab"
                                            data-bs-target="#testing-tab-pane" type="button" role="tab"
                                            aria-controls="testing-tab-pane" aria-selected="false">Agreement</button>
                                        </li>
                                      {% endif %}
                                    </ul>

                                <div class="tab-content" id="myTabContent1">
                                  {% if redirectval == "personalDetails" %}
                                    <div class="tab-pane fade show active text-muted" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                  {% else %}
                                    <div class="tab-pane fade show text-muted" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                  {% endif %}
                                        <form id="personalDetailsForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='personalDetails')}}">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <input type="hidden" id="latitude_update" name="latitude">
                                          <input type="hidden" id="longitude_update" name="longitude">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <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" value="{{ userKycDict.fullName }}" required>
                                                    <span id="fullName_error" class="error"></span>
                                                  </div>
                                                <div class="col-md-6">
                                                    <label for="email">Email ID</label>
                                                    <input type="text" class="form-control" id="email" name="email" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"  title="Invalid email format!" value="{{ userKycDict.email }}" required>
                                                    <span id="email_error" class="error"></span>
                                                  </div>
                                                <div class="col-md-6">
                                                    <label for="phoneNumber">Mobile Number</label>
                                                    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" pattern="^[0-9]{10}$"
                                                    title="Invalid Phone Number format!"  value="{{userKycDict.phoneNumber}}" required>
                                                    <span id="phoneNumber_error" class="error"></span>
                                                </div>
                                                <div class="col-md-6">
                                                    <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: @#$()+_-/." value="{{userKycDict.address}}" required>
                                                    <span id="address_error" class="error"></span>
                                                  </div>
                                                <div class="col-md-6">
                                                  <label for="siteTitle">Site Title*</label>
                                                  <input type="text" class="form-control" id="siteTitle" name="siteTitle"  value="{{userKycDict.siteTitle}}" readonly>
                                                </div>
                                                <div class="col-md-6">
                                                <label for="patternName">Merchant Profile</label>
                                                <input type="text" class="form-control" id="patternName" name="patternName" value="{{ userKycDict.patternName }}" readonly>
                                              </div>
                                              <div class="col-md-6">
                                                <label for="entityTypeName">EntityType</label>
                                                <input type="text" class="form-control" id="entityTypeName" name="entityTypeName" value="{{ userKycDict.entityTypeName }}" readonly>
                                              </div>
                                              <div class="col-md-6">
                                                <label for="pincode">Pincode</label>
                                                <input type="text" class="form-control" id="pincode" name="pincode" value="{{ userKycDict.pincode }}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="stateName">State</label>
                                                <input type="text" class="form-control" id="stateName" name="stateName" value="{{ userKycDict.stateName }}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="cityName">City</label>
                                                <input type="text" class="form-control" id="cityName" name="cityName" value="{{ userKycDict.cityName }}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="blockPoName">Block/PO</label>
                                                <input type="text" class="form-control" id="blockPoName" name="blockPoName" value="{{ userKycDict.blockPoName }}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="merchantType">Merchant Type</label>
                                                <input type="text" class="form-control" id="merchantType" name="merchantType" value="{{ userKycDict.merchantType }}" readonly>
                                              </div>
                                              <div class="col-md-6">
                                                  <label for="remark">Remark*</label>
                                                  <input type="text" class="form-control" id="remark" name="remark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                                      title="Remark must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{ userKycDict.remark }}" required>
                                                      <span id="remark_error" class="error"></span>
                                                    </div>

                                              
                                              <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                                 
                                            </div>
                                          </form>

                                    </div>

                                  {% if redirectval == "businessDetails" %}
                                    <div class="tab-pane fade show active text-muted" name="redirectTo" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                  {% else %}
                                    <div class="tab-pane fade text-muted" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                  {% endif %}
                                      <form id="businessDetailsForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='businessDetails')}}" enctype="multipart/form-data">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                        <input type="hidden" id="latitude_business" name="latitude">
                                        <input type="hidden" id="longitude_business" name="longitude">
                                        <input type="hidden" name="subForm" value="bussiness">
                                          <div class="row">
                                              <div class="col-md-6">
                                                  <label for="businessName">Firm/Shop Name</label>
                                                  <input type="text" class="form-control" id="businessName" name="businessName" value="{{ userKycDict.businessName }}" readonly>
                                              </div>
                                              <div class="col-md-6">
                                                  <label for="businessAddress">Business Address</label>
                                                  <input type="text" class="form-control" id="businessAddress" name="businessAddress" value="{{ userKycDict.businessAddress }}" readonly>
                                              </div>
                                          </div>
                                          <div class="col-md-6">
                                          <label for="businessStatus">Business Status</label>
                                          <select class="form-control"  name="businessStatus" id="businessStatus" required>

                                            <option value="">Select</option>
                                              {% if userKycDict.businessStatus == "Submitted" %}
                                              <option value="Submitted" selected>Submitted</option>
                                              {% else %}
                                              <option value="Submitted">Submitted</option>
                                                {% endif %}
                                              {% if userKycDict.businessStatus == "Rejected" %}
                                              <option value="Rejected" selected>Rejected</option>
                                              {% else %}
                                              <option value="Rejected">Rejected</option>
                                              {% endif %}
  
                                              {% if userKycDict.businessStatus == "Pending" %}
                                              <option value="Pending" selected>Pending</option>
                                              {% else %}
                                              <option value="Pending">Pending</option>
                                              {% endif %}
  
                                              {% if userKycDict.businessStatus == "Approved" %}
                                              <option value="Approved" selected>Approved</option>
                                              {% else %}
                                              <option value="Approved">Approved</option>
                                              {% endif %}
                                          </select>
                                          <span id="businessStatus_error" class="error"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="businessRemark">Business Remark*</label>
                                            <input type="text" class="form-control" id="businessRemark" name="businessRemark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Business Remark must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." value="{{ userKycDict.businessRemark }}" placeholder="Remark" required>
                                            <span id="businessRemark_error" class="error"></span>
                                          </div>

                                        
                                        <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                          </form>
                                            
                                                <form id="documentsDetailsForm" method="POST" action="{{url_for('user_managements.documents_update_status', userKycId=userKycDict.id,redirectTo='businessDetails')}}" enctype="multipart/form-data">
                                                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <input type="hidden" id="latitude_document" name="latitude">
                                                  <input type="hidden" id="longitude_document" name="longitude">
                                                  <input type="hidden" name="subForm" value="upload_document">

                                              <div class="row mt-3">
                                                <div class="col-md-12">
                                                  <input type="hidden" name="userKycpage" value="documentStatus"/>
                                                    <h5>Uploaded Documents:</h5>
                                                    <div class="row" id="uploadedDocumentsList">
                                                        {% for document in userKycDict.documentsList %}
                                                        <div class="col-md-3 mb-4"> 
                                                          <input type="checkbox" name="documentId" id="" value="{{ document.get('documentId') }}"/>&nbsp;&nbsp; <span class="{{ 'approved' if document.get('documentStatus') == 'Approved' else '' }}">{{ document.get('documentStatus') }}</span>

                                                    
                                                          <input type="hidden" class="documentListStatus" value="{{ document.get('documentStatus') }}">
                                                            <div class="d-flex flex-column align-items-center text-center"> 
                                                              {{ document.get('documentName') }}
                                                                <div class="image-container mb-2" style="height: 100px; display: flex; align-items: center;">
                                                                    <img src="{{ document.get('image') }}" alt="Document Image" class="img-thumbnail" style="max-height: 100%; max-width: 100%;" onclick="openModal('{{ document.get('image') }}')"/>
                                                                </div>
                                                                </form>
                                                              </div>

                                                        </div>
                                                        {% endfor %}
                                                    </div>
                                              </div>
                                               <div class="col-md-6">
                                                    <label for="documentRemark">Document Remark*</label>
                                                    <input type="text" class="form-control" id="documentRemark" name="documentRemark" placeholder="Remark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Document Remark must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." value="{{ userKycDict.documentRemark }}" >
                                                    <span id="documentRemark_error" class="error"></span>
                                                    <br>
                                                    <select name="documentStatus" class="custom-select" style="width: 110px;margin-right: 2px;"> 
                                                      <option value="">Select</option>
                                                      <option value="Approved">Approved</option>
                                                      <option value="Pending" >Pending</option>
                                                      <option value="Submitted" >Submitted</option>
                                                      <option value="Rejected">Rejected</option>
                                                  </select>
                                                  <br>
                                                  <span id="documentStatus_error" class="error"></span>
                                              
                                              </div>

                                              

                                             <div class="justify-content-between mt-1">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>  
                                            </div>    
                                          
                                          </form>
                                        
                                          
                                          <div class="row mt-3">
                                            <form method="POST" action="{{ url_for('user_managements.shop_images_update_status', userKycId=userKycDict.id,redirectTo='businessDetails') }}" id="shopImagesForm">
                                              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                              <input type="hidden" id="latitude_shop" name="latitude">
                                              <input type="hidden" id="longitude_shop" name="longitude">
                                              <input type="hidden" name="subForm" value="shop_images">
                                              <input type="hidden" name="userKycpage" value="shopImageStatus">
                                              <div class="col-md-12">
                                                  <h5>Shop Images:</h5>
                                                  <div class="row" id="shopImagesList">
                                                      {% for each_image in userKycDict.shopImagesList %}
                                                      <div class="col-md-3 mb-4"> 
                                                          <div class="d-flex flex-column align-items-center text-center"> 
                                                            <input type="checkbox" name="shopImageNumber" value="{{ each_image.get('shopImageNumber') }}"> &nbsp;&nbsp;<span id="shopImageStatusDisplay" class="{{ 'approved' if each_image.get('shopImageStatus') == 'Approved' else '' }}">{{ each_image.get('shopImageStatus') }}</span>
                                                            <input type="hidden" class="shopImagesStatus" value="{{ each_image.get('shopImageStatus') }}">
                                                              <div class="image-container mb-2" style="height: 100px; display: flex; align-items: center;">
                                                                  <img src="{{ each_image.get('image') }}" alt="{{ each_image.get('shopImageNumber') }} Image" class="img-thumbnail" style="max-height: 100%; max-width: 100%;" onclick="openModal('{{ each_image.get('image') }}')">
                                                              </div>
                                                          </div>
                                                      </div>
                                                      {% endfor %}
                                                      {% if not userKycDict.shopImagesList %}
                                                      <p>No shop images uploaded.</p>
                                                      {% endif %}
                                                  </div>
                                              </div>
                                              <div class="col-md-6">
                                                <label for="shopRemark">Shop Remark*</label>
                                              <input type="text" class="form-control" id="shopRemark" name="shopRemark" placeholder="Remark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Shop Remark must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/." value="{{ userKycDict.shopRemark }}" required>
                                              <span id="shopRemark_error" class="error"></span>
                                              <br>
                                              <select name="shopImageStatus" class="custom-select" style="width: 110px; margin-right: 2px;" required>
                                                  <option value="">Select</option>
                                                    <option value="Approved">Approved</option>
                                                    <option value="Pending">Pending</option>
                                                    <option value="Submitted">Submitted</option>
                                                    <option value="Rejected">Rejected</option>
                                                </select>
                                                <br>
                                                  <span id="shopImageStatus_error" class="error"></span>
                                                  <br>
                                                <button type="submit" class="btn btn-primary btn-sm ml-2" style="height: 33px; width:120px;text-align: center; padding-top: 0.5px; padding-bottom: 0; margin-bottom: 1px;border-radius: 0.25rem;">Update Status</button>
                                            </div>
                                        </form>
                                          </div>
                                        
                                          <form id="videoVerificationForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='businessDetails')}}" enctype="multipart/form-data">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude_shopvideo" name="latitude">
                                            <input type="hidden" id="longitude_shopvideo" name="longitude">
                                            <input type="hidden" name="subForm" value="shop_video">
                                              <div class="row mt-3">
                                                  <div class="col-md-6" style="display: flex; flex-direction: column;">
                                                    <label>Video Verification</label>
                                                    {% if userKycDict.videoVerificationStatus == "Submitted" or userKycDict.videoVerificationStatus == "Approved" %}
                                                        {% if userKycDict.shopVideo %}
                                                            <video width="400" height="300" controls>
                                                                <source src="{{ userKycDict.shopVideo }}" type="video/mp4">
                                                            </video>
                                                        {% else %}
                                                          <input type="file" name="shopVideo" accept="video/*">
                                                            <!-- You can provide an alternative message or leave it empty -->
                                                        {% endif %}
                                                    {% else %}
                                                      <input type="file" name="shopVideo" accept="video/*">
                                                        <!-- You can provide an alternative message or leave it empty -->
                                                    {% endif %}
                                                </div>
                                                <div class="col-md-6">
                                              <label for="shopVideoStatus">Video Verification Status*</label>
                                              <select class="form-control"  name="shopVideoStatus" id="shopVideoStatus" required>
                                                <option value="">Select</option>
                                                  {% if userKycDict.shopVideoStatus == "Submitted" %}
                                                  <option value="Submitted" selected>Submitted</option>
                                                  {% else %}
                                                  <option value="Submitted">Submitted</option>
                                                    {% endif %}
                                                  {% if userKycDict.shopVideoStatus == "Rejected" %}
                                                  <option value="Rejected" selected>Rejected</option>
                                                  {% else %}
                                                  <option value="Rejected">Rejected</option>
                                                  {% endif %}
      
                                                  {% if userKycDict.shopVideoStatus == "Pending" %}
                                                  <option value="Pending" selected>Pending</option>
                                                  {% else %}
                                                  <option value="Pending">Pending</option>
                                                  {% endif %}
      
                                                  {% if userKycDict.shopVideoStatus == "Approved" %}
                                                  <option value="Approved" selected>Approved</option>
                                                  {% else %}
                                                  <option value="Approved">Approved</option>
                                                  {% endif %}
                                              </select>
                                              <br>
                                                  <span id="shopVideoStatus_error" class="error"></span>
                                            </div>
                                                <div class="col-md-6">
                                                      <label for="videoVerificationRemark">Video Verification Remark*</label>
                                                      <input type="text" class="form-control" id="videoVerificationRemark" name="videoVerificationRemark" placeholder="Remark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Video Verification Remark must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/." value="{{ userKycDict.videoVerificationRemark }}" required>
                                                      <span id="videoVerificationRemark_error" class="error"></span>
                                                    </div>
                                                 
                                                  

                                                 
                                                   <div class="modal-footer justify-content-between">
                                                          <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                                      </div>
                                              </div>
                                            </form>
                                          </div>
                                    
                                    {% if redirectval == "kycDetails" %}
                                      <div class="tab-pane fade show active text-muted" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                                    {% else %}
                                      <div class="tab-pane fade text-muted" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                                    {% endif %}
                                        <form id="kycForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='kycDetails')}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <input type="hidden" id="latitude_pan" name="latitude">
                                          <input type="hidden" id="longitude_pan" name="longitude">
                                          <input type="hidden" name="subForm" value="idProof">
                                                  <!-- Add your form fields here -->
                                                  <div class="row">
                                                        <div class="col-md-12">
                                                            <h5 style="margin-top: .6rem !important;">ID Proof</h5>
                                                        </div>
                                                    <div class="col-md-6">
                                                      <label for="panNumber">Pan Number</label>
                                                      {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userKycDict.panNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userKycDict.panNumber }}" required>
                                                      {% endif %}
                                                    </div>



                                                    <div class="col-md-6">
                                                      <label>Document/</label>
                                                      {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                        {% if userKycDict.panDocument %}
                                                          <div class="image-container">
                                                            <img class="imagepopup" src="{{ userKycDict.panDocument }}" id="panDocument" alt="" border="3" height="150px" width="150px">
                                                            <div class="zoom-preview"></div>
                                                            <button type="button"  style="border: none; background-color: transparent; font-size: 25px;"  class="zoom-in"><i class='bx bx-zoom-in' ></i></button>
                                                          <button style="border: none; background-color: transparent; font-size: 25px;" type="button" class="zoom-out"><i class='bx bx-zoom-out' ></i></button>
                                                          </div>
                                                        {% else %}
                                                          <label>Re-upload Document</label>
                                                          <input type="file" class="form-control" id="panDocument" name="panDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                        {% endif %}
                                                      {% else %}
                                                          <label>Re-upload Document</label>
                                                          <input type="file" class="form-control" id="panDocument" name="panDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6" >
                                                      <label for="originalPanName">Original Pan Name </label>
                                                      {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                      <div class="input-group1" style="position: relative;">
                                                        <input type="text" class="form-control" id="originalPanName" name="originalPanName" value="{{ userKycDict.originalPanName }}" readonly>
                                                        <span class="input-group-text" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent;">
                                                            <i class="fa fa-check-circle text-success"></i>
                                                        </span>
                                                    </div>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="originalPanName" name="originalPanName" value="{{ userKycDict.originalPanName }}" readonly>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <label for="panName">Pan Name</label>
                                                      {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="panName" name="panName" value="{{ userKycDict.panName }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="panName" name="panName" value="{{ userKycDict.panName }}">
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <div class="form-group" style="display: flex; align-items: center;">
                                                        <div style="width: 80vw;">
                                                        <label for="panStatus">Pan Status*</label>
                                                        <select class="form-control" id="panStatus" name="panStatus" required>
                                                          <option value="">Select</option>
                                                          {% if userKycDict.panStatus == "Submitted" %}
                                                          <option value="Submitted" selected>Submitted</option>
                                                          {% else %}
                                                          <option value="Submitted">Submitted</option>
                                                          {% endif %}

                                                          {% if userKycDict.panStatus == "Rejected" %}
                                                          <option value="Rejected" selected>Rejected</option>
                                                          {% else %}
                                                          <option value="Rejected">Rejected</option>
                                                          {% endif %}

                                                          {% if userKycDict.panStatus == "Pending" %}
                                                          <option value="Pending" selected>Pending</option>
                                                          {% else %}
                                                          <option value="Pending">Pending</option>
                                                          {% endif %}

                                                          {% if userKycDict.panStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                        </select>
                                                        <span id="panStatus_error" class="error"></span>
                                                        </div>
                                                        <div class="mt-3 ml-2">
                                                          {% if userKycDict.panStatus == "Approved" %}
                                                          <span>
                                                            <i class="fa fa-check-circle text-success"></i>
                                                        </span> 
                                                        {% endif %}
                                                      </div>
                                                      </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="panReason">Pan Remark*</label>
                                                        <input type="text" class="form-control" id="panReason" name="panReason" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                                            title="Pan Reason must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{ userKycDict.panReason }}" placeholder="Remark" required>
                                                      
                                                            <span id="panReason_error" class="error"></span>
                                                          </div>
                                                    </div>
                                                  </div>

                                                  

                                                  <div class="modal-footer justify-content-between">
                                                        <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                                  </div>
                                                </form>
                              
                              
                                           <form id="addressProofForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='kycDetails')}}" enctype="multipart/form-data">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <input type="hidden" id="latitude_aadhar" name="latitude">
                                            <input type="hidden" id="longitude_aadhar" name="longitude">
                                            <input type="hidden" name="subForm" value="aadhaarProof">
                                            <div class="row">
                                                <div class="col-md-12">
                                                 <h5 style="margin-top: .6rem !important;">Address Proof</h5>
                                             </div>
                                                 <div class="col-md-6">
                                                <label for="aadharNumber">Aadhaar No</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userKycDict.aadharNumber }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userKycDict.aadharNumber }}" readonly>
                                                {% endif %}
                                              </div>

                                            <div class="col-md-6">
                                                <label for="originalAadharName">Original AadhaarName </i></label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                <div class="input-group2" style="position: relative;">
                                                  <input type="text" class="form-control" id="originalAadharName" name="originalAadharName" value="{{ userKycDict.originalAadharName }}" 
                                                  readonly>       
                                                   <span class="input-group-text" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent;">
                                                        <i class="fa fa-check-circle text-success"></i>
                                                    </span>
                                                </div>                                         
                                                {% else %}
                                                  <input type="text" class="form-control" id="originalAadharName" name="originalAadharName" value="{{ userKycDict.originalAadharName }}" readonly>
                                                {% endif %}
                                            </div>

                                              <div class="col-md-6">
                                                <label>Aadhaar Front Document</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  {% if userKycDict.aadharDocument %}
                                                  <div class="image-container">
                                                              <img  class="imagepopup" src="{{ userKycDict.aadharDocument }}" id="aadharDocument" alt="" border="3" height="150px" width="150px">
                                                              <div class="zoom-preview" id="aadharZoomPreview"></div>
                                                              <button type="button"  style="border: none; background-color: transparent; font-size: 25px;"  class="zoom-in"><i class='bx bx-zoom-in' ></i></button>
                                                          <button style="border: none; background-color: transparent; font-size: 25px;" type="button" class="zoom-out"><i class='bx bx-zoom-out' ></i></button>
                                                            </div>
                                                  {% else %}
                                                    
                                                    <input type="file" class="form-control"  id="aadharDocument" name="aadharDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                  {% endif %}
                                                {% else %}
                                                    
                                                    <input type="file" class="form-control"  id="aadharDocument" name="aadharDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                {% endif %}
                                              </div>
                                              <div class="col-md-6">
                                                <label>Aadhaar Back Document</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  {% if userKycDict.aadharBackDocument %}
                                                  <div class="image-container">
                                                    <img class="imagepopup" src="{{ userKycDict.aadharBackDocument }}" id="aadharBackDocument" alt="" border="3" height="150px" width="150px">
                                                    <div class="backzoom-preview"></div>
                                                    <button type="button"  style="border: none; background-color: transparent; font-size: 25px;"  class="zoom-in"><i class='bx bx-zoom-in' ></i></button>
                                                          <button style="border: none; background-color: transparent; font-size: 25px;" type="button" class="zoom-out"><i class='bx bx-zoom-out' ></i></button>
                                                    </div>
                                                  {% else %}
                                                    
                                                    <input type="file" class="form-control"  id="aadharBackDocument" name="aadharBackDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                  {% endif %}
                                                {% else %}
                                                   
                                                    <input type="file" class="form-control"  id="aadharBackDocument" name="aadharBackDocument" accept=".pdf,.jpg,.jpeg" title="Only PDF, JPG, and JPEG files are allowed.">
                                                {% endif %}
                                              </div>
                                           

                                              <div class="col-md-6">
                                                <label for="aadharName">Aadhaar Name</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userKycDict.aadharName }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userKycDict.aadharName }}" readonly>
                                                {% endif %}
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group" style="display: flex; align-items: center;">
                                                  <div style="width: 80vw;">
                                                  <label for="aadharStatus">Aadhaar Status*</label>
                                                  <select class="form-control" id="aadharStatus" name="aadharStatus" required>
                                                    <option value="">Select</option>
                                                    {% if userKycDict.aadharStatus == "Submitted" %}
                                                    <option value="Submitted" selected>Submitted</option>
                                                    {% else %}
                                                    <option value="Submitted">Submitted</option>
                                                    {% endif %}
                                                    {% if userKycDict.aadharStatus == "Rejected" %}
                                                    <option value="Rejected" selected>Rejected</option>
                                                    {% else %}
                                                    <option value="Rejected">Rejected</option>
                                                    {% endif %}

                                                    {% if userKycDict.aadharStatus == "Pending" %}
                                                    <option value="Pending" selected>Pending</option>
                                                    {% else %}
                                                    <option value="Pending">Pending</option>
                                                    {% endif %}

                                                    {% if userKycDict.aadharStatus == "Approved" %}
                                                    <option value="Approved" selected>Approved</option>
                                                    {% else %}
                                                    <option value="Approved">Approved</option>
                                                    {% endif %}
                                                  </select>
                                                  <span id="aadharStatus_error" class="error"></span>
                                                  </div>
                                                  <div class="mt-3 ">
                                                    {% if userKycDict.aadharStatus == "Approved" %}
                                                    <span>
                                                      <i class="fa fa-check-circle text-success"></i>
                                                  </span> 
                                                  {% endif %}
                                                </div>
                                                </div>
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="aadharReason">Aadhaar Remark*</label>
                                                  <input type="text" class="form-control" name="aadharReason" id="aadharReason" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                                   title="Aadhar Reason must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{userKycDict.aadharReason}}" required>
                                                   <span id="aadharReason_error" class="error"></span>
                                                  </div>
                                              </div>
                                            </div>
                                            
                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                        </form> 

                                                <form id="bankVerificationForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='kycDetails')}}" enctype="multipart/form-data">
                                                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <input type="hidden" id="latitude_bank" name="latitude">
                                                  <input type="hidden" id="longitude_bank" name="longitude">
                                                  <input type="hidden" name="subForm" value="bankVerification">
                                            <div class="row">
                                                <div class="col-md-12">
                                                <h5 style="margin-top: .6rem !important;">Bank Verification</h5>
                                            </div>

                                              <div class="col-md-6">
                                                  <label for="bankId">Bank Name</label>
                                                  {% if userKycDict.bankStatus == "Submitted" or userKycDict.bankStatus == "Approved" %}
                                                    <select class="form-control" name="bankId" id="bankId" readonly>
                                                      <option value="">Select</option>
                                                        {%for each_bank in masterIfscBanksList%}
                                                          {%if each_bank.id == userKycDict.bankId%}
                                                            <option selected value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          
                                                          {%endif%}
                                                        {%endfor%}
                                                    </select>
                                                  {% else %}
                                                    <select class="form-control" name="bankId" id="bankId" readonly>
                                                        <option value="">Select Bank</option>
                                                        {%for each_bank in masterIfscBanksList%}
                                                          {%if each_bank.id == userKycDict.bankId%}
                                                            <option selected value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          {%endif%}
                                                        {%endfor%}
                                                    </select>
                                                  {% endif %}

                                                </div>

                                                <div class="col-md-6">
                                                    <label for="originalBankName" >Original Bank Name </i></label>
                                                    {% if userKycDict.bankStatus == "Submitted" or userKycDict.bankStatus == "Approved" %}
                                                    <div class="input-group3"style="position: relative;">
                                                      <input type="text" class="form-control " id="originalBankName" name="originalBankName" value="{{ userKycDict.originalBankName }}" readonly>
                                                        <span class="input-group-text" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: transparent;">
                                                            <i class="fa fa-check-circle text-success"></i>
                                                        </span>
                                                    </div>
                                                    {% else %}
                                                      <input type="text" class="form-control" id="originalBankName" name="originalBankName" value="{{ userKycDict.originalBankName }}" readonly>
                                                    {% endif %}
                                                </div>
                                           
                                              <div class="col-md-6">
                                                <label for="ifscCode">IFSC</label>
                                                {% if userKycDict.bankStatus == "Submitted" or userKycDict.bankStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ userKycDict.ifscCode }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ userKycDict.ifscCode }}" readonly>
                                                {% endif %}
                                              </div>
                                            
                                              <div class="col-md-6">
                                                <label for="bankAccountNumber">Account Number</label>
                                                {% if userKycDict.bankStatus == "Submitted" or userKycDict.bankStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" value="{{ userKycDict.bankAccountNumber }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" value="{{ userKycDict.bankAccountNumber }}" readonly>
                                                {% endif %}
                                              </div>
                                           
                                              <div class="col-md-6">
                                                 <div class="form-group" style="display: flex; align-items: center;">
                                                  <div  >
                                                  <label style="width: 38vw;" for="bankStatus">Bank Status*</label>
                                                  <select class="form-control" id="bankStatus" name="bankStatus" required>
                                                    <option value="">Select</option>
                                                    {% if userKycDict.bankStatus == "Submitted" %}
                                                    <option value="Submitted" selected>Submitted</option>
                                                    {% else %}
                                                    <option value="Submitted">Submitted</option>
                                                    {% endif %}

                                                    {% if userKycDict.bankStatus == "Rejected" %}
                                                    <option value="Rejected" selected>Rejected</option>
                                                    {% else %}
                                                    <option value="Rejected">Rejected</option>
                                                    {% endif %}

                                                    {% if userKycDict.bankStatus == "Pending" %}
                                                    <option value="Pending" selected>Pending</option>
                                                    {% else %}
                                                    <option value="Pending">Pending</option>
                                                    {% endif %}

                                                    {% if userKycDict.bankStatus == "Approved" %}
                                                    <option value="Approved" selected>Approved</option>
                                                    {% else %}
                                                    <option value="Approved">Approved</option>
                                                    {% endif %}
                                                  </select>
                                                  <span id="bankStatus_error" class="error"></span>
                                                  </div>
                                                  <div class="mt-3 ">
                                                    {% if userKycDict.bankStatus == "Approved" %}
                                                    <span>
                                                      <i class="fa fa-check-circle text-success"></i>
                                                  </span> 
                                                  {% endif %}
                                                </div>
                                                </div>
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="bankReason">Bank Remark*</label>
                                                  <input type="text" class="form-control" name="bankReason" id="bankReason" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                                            title="Bank Reason must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{userKycDict.bankReason}}" placeholder="Remark" required>
                                                    <span id="bankReason_error" class="error"></span>
                                                  </div>
                                              </div>
                                            </div>

                                            

                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                        </form>    

                                    </div>

                                  {% if redirectval == "videoVerificationDetails" %}
                                    <div class="tab-pane fade show active text-muted" id="test-tab-pane" role="tabpanel" aria-labelledby="test-tab" tabindex="0">
                                  {% else %}
                                    <div class="tab-pane fade text-muted" id="test-tab-pane" role="tabpanel" aria-labelledby="test-tab" tabindex="0">
                                  {% endif %}
                                        <form id="videoVerificationDetailsForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='videoVerificationDetails')}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <input type="hidden" id="latitude_videoverification" name="latitude">
                                          <input type="hidden" id="longitude_videoverification" name="longitude">
                                                <!-- Video Verification Form Fields -->
                                            <h6><b>Video</b></h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Video Verification</label>
                                                    {% if userKycDict.videoVerificationStatus == "Submitted" or userKycDict.videoVerificationStatus == "Approved" %}
                                                        {% if userKycDict.uploadVideo %}
                                                            <video width="400" height="300" controls>
                                                                <source src="{{ userKycDict.uploadVideo }}" type="video/mp4">
                                                            </video>
                                                        {% else %}
                                                          <input type="file" name="uploadVideo" accept="video/*" title="Please select video of type .mp4">
                                                            <!-- You can provide an alternative message or leave it empty -->
                                                        {% endif %}
                                                    {% else %}
                                                      <input type="file" name="uploadVideo" accept="video/*" title="Please select video of type .mp4">
                                                        <!-- You can provide an alternative message or leave it empty -->
                                                    {% endif %}
                                                    <span id="uploadVideo_video_error" class="error"></span>
                                                </div>
                                                <div class="row">
                                                  <div class="col-md-6">
                                                   <div class="form-group" style="display: flex; align-items: center;">
                                                      <div style="width: 39vw;">
                                                      <label for="videoVerificationStatus">Video Verification Status*</label>
                                                      <select class="form-control" id="videoVerificationStatus" name="videoVerificationStatus" required>
                                                        <option value="">Select</option>
                                                          {% if userKycDict.videoVerificationStatus == "Submitted" %}
                                                          <option value="Submitted" selected>Submitted</option>
                                                          {% else %}
                                                          <option value="Submitted">Submitted</option>
                                                            {% endif %}
                                                          {% if userKycDict.videoVerificationStatus == "Rejected" %}
                                                          <option value="Rejected" selected>Rejected</option>
                                                          {% else %}
                                                          <option value="Rejected">Rejected</option>
                                                          {% endif %}

                                                          {% if userKycDict.videoVerificationStatus == "Pending" %}
                                                          <option value="Pending" selected>Pending</option>
                                                          {% else %}
                                                          <option value="Pending">Pending</option>
                                                          {% endif %}

                                                          {% if userKycDict.videoVerificationStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                      </select>
                                                      <span id="videoVerificationStatus_video_error" class="error"></span>
                                                      </div>
                                                  <div class="mt-3 ml-2">
                                                  {% if userKycDict.videoVerificationStatus == "Approved" %}
                                                  <span>
                                                    <i class="fa fa-check-circle text-success"></i>
                                                </span> 
                                         
                                              {% endif %}
                                              </div>
                        
                                                    </div>
                                                  </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="videoVerificationReason">Video Verification Remark*</label>
                                                  <input type="text" class="form-control" name="videoVerificationReason" id="videoVerificationReason" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" placeholder="Remark"
                                                            title="Video Verification Remark must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{userKycDict.videoVerificationReason}}" required>
                                                            <span id="videoVerificationReason_video_error" class="error"></span>
                                                          </div>
                                              </div>
                                            </div>

                                            

                                            <div class="modal-footer justify-content-between">
                                                
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                          </form>    
                                    </div>

                                  {% if redirectval == "agreementDetails" %}
                                    <div class="tab-pane fade show active text-muted" id="testing-tab-pane" role="tabpanel" aria-labelledby="testing-tab" tabindex="0">
                                  {% else %}
                                    <div class="tab-pane fade text-muted" id="testing-tab-pane" role="tabpanel" aria-labelledby="testing-tab" tabindex="0">
                                  {% endif %}
                                        <form id="agreementForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='agreementDetails')}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <input type="hidden" id="latitude_agreement" name="latitude">
                                          <input type="hidden" id="longitude_agreement" name="longitude">
                                            <div class="row">

                                                <div class="col-md-6">
                                                    <label>Agreement Document</label>
                                                    {% if userKycDict.agreementDocument %}
                                                    <button type="button" class="btn btn-primary submit-btn" data-agreementDocument="{{ userKycDict.agreementDocument }}" id="showAgreementPdf">Show PDF</button>
                                                    {% else %}
                                                    <span id="showAgreementPdf"></span>
                                                    {% endif %}

                                                      <!-- <img class="imagepopup" src="{{ userKycDict.agreementDocument }}" id="agreementDocument" alt="" border="3" height="150px" width="150px"> -->
                                                </div>
                                              <div class="row">
                                                <div class="col-md-6">
                                                  <div class="form-group" style="display: flex; align-items: center;">
                                                  <div style="width: 39vw;">
                                                    <label for="agreementVerificationStatus">Agreement Verification Status*</label>
                                                    <select class="form-control" id="agreementVerificationStatus" name="agreementVerificationStatus" required>
                                                      <option value="">Select</option>
                                                        {% if userKycDict.agreementVerificationStatus == "Submitted" %}
                                                        <option value="Submitted" selected>Submitted</option>
                                                        {% else %}
                                                        <option value="Submitted">Submitted</option>
                                                          {% endif %}
                                                        {% if userKycDict.agreementVerificationStatus == "Rejected" %}
                                                        <option value="Rejected" selected>Rejected</option>
                                                        {% else %}
                                                        <option value="Rejected">Rejected</option>
                                                        {% endif %}

                                                        {% if userKycDict.agreementVerificationStatus == "Pending" %}
                                                        <option value="Pending" selected>Pending</option>
                                                        {% else %}
                                                        <option value="Pending">Pending</option>
                                                        {% endif %}

                                                        {% if userKycDict.agreementVerificationStatus == "Approved" %}
                                                        <option value="Approved" selected>Approved</option>
                                                        {% else %}
                                                        <option value="Approved">Approved</option>
                                                        {% endif %}
                                                    </select>
                                                    <span id="agreementVerificationStatus_error" class="error"></span>
                                                    </div>
                                                  <div class="mt-3 ml-2">
                                                  {% if userKycDict.agreementVerificationStatus == "Approved" %}
                                                  <span>
                                                    <i class="fa fa-check-circle text-success"></i>
                                                </span> 
                                         
                                              {% endif %}
                                              </div>
                                                  </div>
                                                </div>
                                              </div>
                                            <div class="row">
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="agreementVerificationReason">Agreement Verification Remark*</label>
                                                  <input type="text" class="form-control" name="agreementVerificationReason" id="remark" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                                    title="Agreement Verification Reason must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" placeholder="Remark" value="{{userKycDict.agreementVerificationReason}}" required>
                                                    <span id="agreementVerificationReason_error" class="error"></span>
                                                  </div>
                                              </div>
                                            </div>
                                            </div>

                                            

                                            <div class="modal-footer justify-content-between">
                                                
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                        </form>        
                                    </div>
                                </div>
                         
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="myPanDocument" class="modal">
                            <span class="close">&times;</span>
                            <button class="rotate-button" onclick="rotateImage()">&#x21BB;</button>
                            <img class="modal-content" id="panDocumentImg">
                            <div id="caption"></div>
                          </div>
                          <script>
                            let currentRotation = 0; // Track the current rotation angle

document.getElementById("rotateButton").addEventListener("click", function() {
    currentRotation += 90; // Increment the rotation by 90 degrees
    document.getElementById("panDocumentImg").style.transform = `rotate(${currentRotation}deg)`;
});

                          </script>

                          <div id="mypdfModel" class="modal">
                            <span class="close">&times;</span>
                            <embed class="modal-content" id="pdffile" width="800px" height="700px" />
                          </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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




<script>
var modal = document.getElementById("myPanDocument");
var pdfmodal = document.getElementById("mypdfModel");

var panDocumentimg = document.getElementById("panDocument");
var aadharDocumentimg = document.getElementById("aadharDocument");
var aadharBackDocumentimg = document.getElementById("aadharBackDocument")
var modalImg = document.getElementById("panDocumentImg");
var captionText = document.getElementById("caption");
var showAgreementPdf = document.getElementById("showAgreementPdf");
var pdfFile = document.getElementById("pdffile");
var scale = 1;
var posX = 0;
var posY = 0;
var isDragging = false;
var startX, startY;

// Zoom in/out with the mouse wheel
modalImg.onwheel = function(event) {
    event.preventDefault();
    const zoomFactor = 0.1;
    scale += event.deltaY < 0 ? zoomFactor : -zoomFactor;
    scale = Math.min(Math.max(1, scale), 4); // Limit zoom level
    modalImg.style.transform = `scale(${scale}) translate(${posX}px, ${posY}px)`;
};

// Panning functionality
modalImg.onmousedown = function(event) {
    isDragging = true;
    startX = event.clientX;
    startY = event.clientY;
    modalImg.style.cursor = 'grabbing'; // Change cursor to indicate dragging
};

modalImg.onmouseup = function() {
    isDragging = false;
    modalImg.style.cursor = 'grab'; // Reset cursor when not dragging
};

modalImg.onmousemove = function(event) {
    if (isDragging) {
        const dx = event.clientX - startX; // Change in X
        const dy = event.clientY - startY; // Change in Y
        posX += dx; // Update position
        posY += dy; // Update position
        startX = event.clientX; // Update startX for next move
        startY = event.clientY; // Update startY for next move
        modalImg.style.transform = `scale(${scale}) translate(${posX}px, ${posY}px)`; // Apply transformation
    }
};

// Prevent the default context menu on right-click
modalImg.oncontextmenu = function(event) {
    event.preventDefault();
};

// Close modal on clicking outside the image
window.onclick = function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
};

// Reset dragging state when mouse leaves the image
modalImg.onmouseleave = function() {
    isDragging = false;
    modalImg.style.cursor = 'default'; // Reset cursor
};
panDocumentimg.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

aadharDocumentimg.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
aadharBackDocumentimg.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
showAgreementPdf.onclick = function(){
  pdfmodal.style.display = "block";
  pdfFile.src = this.getAttribute("data-agreementDocument");
  captionText.innerHTML = this.alt;
}

// Handle closing for both modals 
var closeButtons = document.getElementsByClassName("close");

for (var i = 0; i < closeButtons.length; i++) {
  closeButtons[i].onclick = function() {
    modal.style.display = "none";
    pdfmodal.style.display = "none";
  }
}

// Optional: Handle click outside the modal to close
// window.onclick = function(event) {
//   if (event.target == modal) {
//     modal.style.display = "none";
//   } else if (event.target == pdfmodal) {
//     pdfmodal.style.display = "none";
//   }
// }
</script>

<script type="text/javascript">

function updateTabStatus(tab, statusValue) {
    if (!tab) return;

  
    tab.classList.remove("pending", "error", "submitted", "success");

    
    switch (statusValue) {
        case "Approved":
            tab.classList.add("success");
            break;
        case "Rejected":
            tab.classList.add("error");
            break;
        case "Pending":
            tab.classList.add("pending");
            break;
        case "Submitted":
            tab.classList.add("submitted");
            break;
    }
}

function checkPersonalDetailsForm() {
    const form = document.getElementById("personalDetailsForm");
    const tab = document.getElementById("home-tab");
    let allFilled = Array.from(form.querySelectorAll("input[required], select[required]"))
        .every(input => input.value);
  
    updateTabStatus(tab, allFilled ? "Approved" : "Pending");
}

function checkKYCForm() {
    const tab = document.getElementById("contact-tab");
    const aadharStatus = document.getElementById("aadharStatus")?.value.trim();
    const bankStatus = document.getElementById("bankStatus")?.value.trim();
    const panStatus = document.getElementById("panStatus")?.value.trim();
    const statuses = [aadharStatus, bankStatus, panStatus];

    
    if (statuses.includes("Rejected")) {
        updateTabStatus(tab, "Rejected");
    } else if (statuses.every(status => status === "Approved")) {
        updateTabStatus(tab, "Approved");
    } else if (statuses.every(status => status === "Submitted")) {
        updateTabStatus(tab, "Submitted");
    } else if (statuses.every(status => status === "Pending")) {
        updateTabStatus(tab, "Pending");
    } else if (statuses.filter(status => status === "Approved").length === 2 && statuses.includes("Submitted")) {
        updateTabStatus(tab, "Submitted");
    } else {
        updateTabStatus(tab, "Pending");
    }
}

function checkVideoVerificationForm() {
    const tab = document.getElementById("test-tab");
    const videoVerificationStatus = document.getElementById("videoVerificationStatus")?.value || "Pending";
    updateTabStatus(tab, videoVerificationStatus);
}

function checkAgreementForm() {
  console.log("hehe")
    const tab = document.getElementById("testing-tab");
    const agreementStatus = document.getElementById("agreementVerificationStatus")?.value || "Pending";
    updateTabStatus(tab, agreementStatus);
}

function checkBusinessDetailsForm() {
  console.log("helloooooooooo")
    const tab = document.getElementById("profile-tab");
    const businessStatus = document.getElementById("businessStatus")?.value || "Pending";
    const shopVideoStatus = document.getElementById("shopVideoStatus")?.value || "Pending";
    const statuses = [shopVideoStatus, businessStatus];
    // const shopImagesStatus = document.getElementByClass("shopImagesStatus");
    var shopImagesinputs = $(".shopImagesStatus");
    for(var i = 0; i < shopImagesinputs.length; i++){
      statuses.push($(shopImagesinputs[i]).val())
  }
  
  var documentinputs = $(".documentListStatus");
    for(var i = 0; i < documentinputs.length; i++){
      statuses.push($(documentinputs[i]).val())
  }

    
    if (statuses.includes("Rejected")) {
        updateTabStatus(tab, "Rejected");
    }else if (statuses.every(status => status === "Submitted")) {
        updateTabStatus(tab, "Submitted");
    } else if (statuses.every(status => status === "Approved")) {
        updateTabStatus(tab, "Approved");
    }else {
        updateTabStatus(tab, "Pending");
    }
}

function setInitialTabStatuses() {
    
    updateTabStatus(document.getElementById("home-tab"), document.getElementById("personalDetailsStatus")?.value || "Pending");
    updateTabStatus(document.getElementById("contact-tab"), document.getElementById("kycStatus")?.value || "Pending");
    updateTabStatus(document.getElementById("test-tab"), document.getElementById("videoVerificationStatus")?.value || "Pending");
    updateTabStatus(document.getElementById("testing-tab"), document.getElementById("agreementVerificationStatus")?.value || "Pending");
    updateTabStatus(document.getElementById("profile-tab"), document.getElementById("businessDetailsStatus")?.value || "Pending");
}


document.getElementById("personalDetailsForm")?.addEventListener("input", checkPersonalDetailsForm);
document.getElementById("kycForm")?.addEventListener("input", checkKYCForm);
document.getElementById("videoVerificationForm")?.addEventListener("input", checkVideoVerificationForm);
document.getElementById("agreementForm")?.addEventListener("input", checkAgreementForm);
document.getElementById("businessDetailsForm")?.addEventListener("input", checkBusinessDetailsForm);

window.onload = function () {
 
    setInitialTabStatuses();
    checkPersonalDetailsForm();
    checkKYCForm();
    checkVideoVerificationForm();
    checkAgreementForm();
    checkBusinessDetailsForm();
};


document.getElementById("videoVerificationStatus")?.addEventListener("change", checkVideoVerificationForm);
document.getElementById("agreementVerificationStatus")?.addEventListener("change", checkAgreementForm);



document.addEventListener("DOMContentLoaded", function() {
    const kycTab = document.querySelector(".nav-link.services");
    const videoTab = document.querySelector(".nav-link.test");
    const agreementTab = document.querySelector(".nav-link.testing");
    const businessTab = document.getElementById("profile-tab"); 
    
    
    if (!businessTab || businessTab=="undefined" || businessTab==null) {
        
        kycTab.textContent = "KYC";
        videoTab.textContent = "Video Verification";
        agreementTab.textContent = "Agreement";

        kycTab.setAttribute("data-bs-target", "#contact-tab-pane");
        videoTab.setAttribute("data-bs-target", "#test-tab-pane");
        agreementTab.setAttribute("data-bs-target", "#testing-tab-pane");

        
        kycTab.setAttribute("data-bs-toggle", "tab");
        kycTab.setAttribute("id", "contact-tab");
        kycTab.classList.add("tab-num-2");

        videoTab.setAttribute("data-bs-toggle", "tab");
        videoTab.setAttribute("id", "test-tab");
        videoTab.classList.add("tab-num-3");

        agreementTab.setAttribute("data-bs-toggle", "tab");
        agreementTab.setAttribute("id", "testing-tab");
        agreementTab.classList.add("tab-num-4");
    } else {
        
        kycTab.textContent = "KYC";
        videoTab.textContent = "Video Verification";
        agreementTab.textContent = "Agreement";

        kycTab.setAttribute("data-bs-target", "#contact-tab-pane");
        videoTab.setAttribute("data-bs-target", "#test-tab-pane");
        agreementTab.setAttribute("data-bs-target", "#testing-tab-pane");

        
        kycTab.setAttribute("data-bs-toggle", "tab");
        kycTab.setAttribute("id", "contact-tab");
        kycTab.classList.add("tab-num-3");

        videoTab.setAttribute("data-bs-toggle", "tab");
        videoTab.setAttribute("id", "test-tab");
        videoTab.classList.add("tab-num-4");

        agreementTab.setAttribute("data-bs-toggle", "tab");
        agreementTab.setAttribute("id", "testing-tab");
        agreementTab.classList.add("tab-num-5");
    }
});



</script>

<script>
    let rotationDegree = 0; 

    function openModal(imageSrc) {
        modal.style.display = "block";
      modalImg.src = imageSrc;
        rotationDegree = 0; 
        modalImg.style.transform = `rotate(${rotationDegree}deg)`; 
    }

    function rotateImage() {
        rotationDegree = (rotationDegree + 90) % 360; 
        modalImg.style.transform = `rotate(${rotationDegree}deg)`; 
    }
</script>
<script type="text/javascript">
document.querySelectorAll('.imagepopup').forEach(image => {
    image.addEventListener('mouseover', function () {
        const zoomPreview = this.nextElementSibling; 
        zoomPreview.style.display = 'block'; 
        zoomPreview.style.backgroundImage = `url(${this.src})`; 
    });

    image.addEventListener('mousemove', function(event) {
        const rect = this.getBoundingClientRect();
        const x = event.clientX - rect.left; 
        const y = event.clientY - rect.top; 

        
        zoomPreview.style.backgroundPosition = `-${(x * 2)}px -${(y * 2)}px`; // Adjust the multiplier for zoom level
    });

    image.addEventListener('mouseleave', function () {
        const zoomPreview = this.nextElementSibling;
        zoomPreview.style.display = 'none'; 
    });
});

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

  $(document).ready(function () {
    $('#personalDetailsForm').validate({
      rules: {
        fullName: {
          required: true,
          minlength:3,
          maxlength:75,
        },
        phoneNumber:{
          required: true,
          minlength:10,
          maxlength:10,
          pattern: "^[0-9]{10}$"
        },
        email:{
          required:true,
          minlength:6,
          maxlength:100,
        },
        address:{
          required:true,
          minlength:6,
          maxlength:100,
        },
        remark:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        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',
            pattern: "Phone number is Invalid!"
          },
          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',
          },
          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',
          },
          remark:{
            required:"Remark is required",
            minlength: 'Remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                  success: function (response) {
                    console.log("********response*******", response)
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $.each(response.result, function (key, value) {
                        $('#' + key + "_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
        
                  }
                });
              },
              function () {
                $('.form_submit').prop('disabled', false);
                $('#newLoadingModel').hide();
                    alert("Location access is required to proceed. Please enable it in your browser.");
            }
        );
    }
  });

    $('#businessDetailsForm').validate({
      rules: {
        businessStatus: {
          required: true,
        },
        businessRemark:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          businessStatus: {
            required: "Business status is required"
          },
          businessRemark:{
            required:"Business remark is required",
            minlength: 'Business remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Business remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                  success: function (response) {
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $.each(response.result, function (key, value) {
                        
                        $('#' + key + "_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
        
                  }
                });
              },
              function () {
                            $('.form_submit').prop('disabled', false);
                            $('#newLoadingModel').hide();
                                alert("Location access is required to proceed. Please enable it in your browser.");
                        }
                    );
                }
            });
    
      $('#documentsDetailsForm').validate({
      rules: {
        documentStatus: {
          required: true,
        },
        documentRemark:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          documentStatus: {
            required: "Document status is required"
          },
          documentRemark:{
            required:"Document remark is required",
            minlength: 'Document remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Document remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                  success: function (response) {
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $.each(response.result, function (key, value) {
                        $('#' + key + "_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
        
                  }
                });
              },
              function () {
                $('.form_submit').prop('disabled', false);
                $('#newLoadingModel').hide();
                    alert("Location access is required to proceed. Please enable it in your browser.");
            }
        );
    }
  });
      
      $('#shopImagesForm').validate({
      rules: {
        shopImageStatus: {
          required: true,
        },
        shopRemark:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          shopImageStatus: {
            required: "Shop image status is required"
          },
          shopRemark:{
            required:"Shop remark is required",
            minlength: 'Shop remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Shop remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                      success: function (response) {
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                          form.reset();
                          location.reload();
                        } else if (response.responseStatus == 0) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $.each(response.result, function (key, value) {
                            $('#' + key + "_error").text(value)
                          });
                          return false;
                        } else if (response.responseStatus == 2) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $('#errorMessage').text(response.result);
                          return false;
                        } else {
                          location.reload();
                        }
            
                      }
                    });
                  },
                  function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
         });
      
      $('#videoVerificationForm').validate({
      rules: {
        shopVideoStatus: {
          required: true,
        },
        videoVerificationRemark:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          shopVideoStatus: {
            required: "Video verification status is required"
          },
          videoVerificationRemark:{
            required:"Video verification remark is required",
            minlength: 'Video verification remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Video verification remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                      success: function (response) {
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                          form.reset();
                          location.reload();
                        } else if (response.responseStatus == 0) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $.each(response.result, function (key, value) {
                            $('#' + key + "_error").text(value)
                          });
                          return false;
                        } else if (response.responseStatus == 2) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $('#errorMessage').text(response.result);
                          return false;
                        } else {
                          location.reload();
                        }
            
                      }
                    });
                  },
                  function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
          });
      
      $('#kycForm').validate({
      rules: {
        panStatus: {
          required: true,
        },
        panReason:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          panStatus: {
            required: "Pan status is required"
          },
          panReason:{
            required:"Pan remark is required",
            minlength: 'Pan remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Pan remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                        success: function (response) {
                          if (response.responseStatus == 1 || response.responseStatus == 4) {
                            form.reset();
                            location.reload();
                          } else if (response.responseStatus == 0) {
                            $('.submit-btn').prop('disabled', false);
            				        $('#newLoadingModel').hide();
                            $.each(response.result, function (key, value) {
                              $('#' + key + "_error").text(value)
                            });
                            return false;
                          } else if (response.responseStatus == 2) {
                            $('.submit-btn').prop('disabled', false);
            				        $('#newLoadingModel').hide();
                            $('#errorMessage').text(response.result);
                            return false;
                          } else {
                            location.reload();
                          }
              
                        }
                      });
                    },
                    function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
              }
            });
            
      $('#addressProofForm').validate({
      rules: {
        aadharStatus: {
          required: true,
        },
        aadharReason:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          aadharStatus: {
            required: "Aadhaar status is required"
          },
          aadharReason:{
            required:"Aadhaar remark is required",
            minlength: 'Aadhaar remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Aadhaar remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                      success: function (response) {
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                          form.reset();
                          location.reload();
                        } else if (response.responseStatus == 0) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $.each(response.result, function (key, value) {
                            $('#' + key + "_error").text(value)
                          });
                          return false;
                        } else if (response.responseStatus == 2) {
                          $('.submit-btn').prop('disabled', false);
          				        $('#newLoadingModel').hide();
                          $('#errorMessage').text(response.result);
                          return false;
                        } else {
                          location.reload();
                        }
            
                      }
                    });
                  },
                  function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
          });
      
      $('#bankVerificationForm').validate({
      rules: {
        bankStatus: {
          required: true,
        },
        bankReason:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          bankStatus: {
            required: "Bank status is required"
          },
          bankReason:{
            required:"Bank remark is required",
            minlength: 'Bank remark is must be greaterthan or equals to 1 charecters',
            maxlength: 'Bank remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.submit-btn').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(),
                  success: function (response) {
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $.each(response.result, function (key, value) {
                        $('#' + key + "_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.submit-btn').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
        
                  }
                });
              },
              function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
          });

      $('#videoVerificationDetailsForm').validate({
      rules: {
        videoVerificationStatus: {
          required: true,
        },
        videoVerificationReason:{
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          videoVerificationStatus: {
            required: "Video verification status is required"
          },
          videoVerificationReason:{
            required:"Video verification remark is required",
            minlength: 'Video verification remark  is must be greaterthan or equals to 1 charecters',
            maxlength: 'Video verification remark is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.form_submit').prop('disabled', true);
				  $('#newLoadingModel').show();
          event.preventDefault();
          getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);
                $.ajax({
                  url: form.action,
                  type: form.method,
                  data: $(form).serialize(),
                  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 + "_video_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }
        
                  }
                });
              },
              function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
          });

    $('#agreementForm').validate({
      rules: {
        agreementVerificationStatus: {
          required: true,
        },
        agreementVerificationReason: {
          required:true,
          minlength:1,
          maxlength:100,
        }
      },
        messages: {
          agreementVerificationStatus: {
            required: "Agreement verification status is required"
          },
          agreementVerificationReason:{
            required:"Agreement verification reason is required",
            minlength: 'Agreement verification reason  is must be greaterthan or equals to 1 charecters',
            maxlength: 'Agreement verification reason is must be lessthan or equals to 100 charecters',
          }
        },
        submitHandler: function (form, event) {
          $('.form_submit').prop('disabled', true);
				        $('#newLoadingModel').show();
          event.preventDefault();
          getLocationAndProceed(
            function (lat, lng) {
               
                $(form).find('input[name="latitude"]').val(lat);
                $(form).find('input[name="longitude"]').val(lng);

                $.ajax({
                  url: form.action,
                  type: form.method,
                  data: $(form).serialize(),
                  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)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
      				        $('#newLoadingModel').hide();
                      $('#errorMessage').text(response.result);
                      return false;
                    } else {
                      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 %}