{% 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')}}">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="fullName">Full Name</label>
                                                    <input type="text" class="form-control" id="fullName" name="fullName" value="{{ userKycDict.fullName }}" >
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="email">Email ID</label>
                                                    <input type="text" class="form-control" id="email" name="email" value="{{ userKycDict.email }}" >
                                                </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}" value="{{userKycDict.phoneNumber}}">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="address">Address*</label>
                                                    <input type="text" class="form-control" id="address" name="address" value="{{userKycDict.address}}">
                                                </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" value="{{ userKycDict.remark }}" required>
                                              </div>

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

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

                                              <!-- Submit Button -->
                                              <div class="modal-footer justify-content-between">
                                                  <button type="submit" class="btn btn-primary updateBtn" id="updateBtn1" disabled>Submit</button>
                                              </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">
                                          <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>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="businessRemark">Business Remark*</label>
                                            <input type="text" class="form-control" id="businessRemark" name="businessRemark" value="{{ userKycDict.businessRemark }}" required>
                                        </div>

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

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

                                        <!-- Submit Button -->
                                        <div class="modal-footer justify-content-between">
                                            <button type="submit" class="btn btn-primary updateBtn" id="updateBtn2" disabled>Submit</button>
                                        </div>
                                        <!-- <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div> -->
                                          </form>
                                            
                                                <form id="businessDetailsForm" method="POST" action="{{url_for('user_managements.documents_update_status', userKycId=userKycDict.id,redirectTo='businessDetails')}}" enctype="multipart/form-data">

                                              <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" value="{{ userKycDict.documentRemark }}" >

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

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

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

                                              <!-- Submit Button -->
                                              <div class="modal-footer justify-content-between">
                                                  <button type="submit" class="btn btn-primary updateBtn" id="updateBtn3" disabled>Submit</button>
                                              </div>

                                             <!--  <div class="justify-content-between">
                                                <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') }}">
                                              <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">
                                              <input type="text" class="form-control" id="shopRemark" name="shopRemark" value="{{ userKycDict.shopRemark }}" >
                                                <select name="shopImageStatus" 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>

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

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

                                                <!-- Submit Button -->
                                                <div class="modal-footer justify-content-between">
                                                    <button type="submit" class="btn btn-primary updateBtn" id="updateBtn4" disabled>Update Status</button>
                                                </div>

                                                <!-- <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="businessDetailsForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='businessDetails')}}" enctype="multipart/form-data">
                                              <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">
                                                <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>
                                            </div>
                                                <div class="col-md-6">
                                                      <label for="videoVerificationRemark">Video Verification Remark*</label>
                                                      <input type="text" class="form-control" id="videoVerificationRemark" name="videoVerificationRemark" value="{{ userKycDict.videoVerificationRemark }}" required>
                                                  </div>
                                                  <div class="form-group mt-3">
                                                      <button type="button" class="btn btn-warning generateOtpBtn" data-index="5">Generate OTP</button>
                                                      <input type="hidden" id="otpLogid5" name="otpLogid">
                                                  </div>

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

                                                  <!-- Submit Button -->
                                                  <div class="modal-footer justify-content-between">
                                                      <button type="submit" class="btn btn-primary updateBtn" id="updateBtn5" disabled>Submit</button>
                                                  </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">
                                                  <!-- 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">
                                                        {% endif %}
                                                      {% else %}
                                                          <label>Re-upload Document</label>
                                                          <input type="file" class="form-control" id="panDocument" name="panDocument">
                                                      {% 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>
                                                        </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" value="{{ userKycDict.panReason }}" required>
                                                      </div>
                                                    </div>
                                                  </div>

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

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

                                                  <!-- Submit Button -->
                                                  <div class="modal-footer justify-content-between">
                                                      <button type="submit" class="btn btn-primary updateBtn" id="updateBtn6" disabled>Submit</button>
                                                  </div>

<!--                                                   <div class="modal-footer justify-content-between">
                                                        <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                                  </div> -->
                                                </form>
                              
                              
                                           <form id="kycForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='kycDetails')}}" enctype="multipart/form-data">
                                            <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">
                                                  {% endif %}
                                                {% else %}
                                                    
                                                    <input type="file" class="form-control"  id="aadharDocument" name="aadharDocument">
                                                {% 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">
                                                  {% endif %}
                                                {% else %}
                                                   
                                                    <input type="file" class="form-control"  id="aadharBackDocument" name="aadharBackDocument">
                                                {% 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>
                                                  </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" value="{{userKycDict.aadharReason}}" required>
                                                </div>
                                              </div>
                                            </div>
                                            <div class="form-group mt-3">
                                                <button type="button" class="btn btn-warning generateOtpBtn" data-index="7">Generate OTP</button>
                                                <input type="hidden" id="otpLogid7" name="otpLogid">
                                            </div>

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

                                            <!-- Submit Button -->
                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtn7" disabled>Submit</button>
                                            </div>
                                            <!-- <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div> -->
                                        </form> 

                                                <form id="kycForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='kycDetails')}}" enctype="multipart/form-data">
                                            <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>
                                                          {%else%}
                                                          <option 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>
                                                          {%else%}
                                                          <option 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>
                                                  </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" value="{{userKycDict.bankReason}}" required>
                                                </div>
                                              </div>
                                            </div>

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

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

                                            <!-- Submit Button -->
                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtn8" disabled>Submit</button>
                                            </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="videoVerificationForm" method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id,redirectTo='videoVerificationDetails')}}" enctype="multipart/form-data">
                                                <!-- 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/*">
                                                            <!-- You can provide an alternative message or leave it empty -->
                                                        {% endif %}
                                                    {% else %}
                                                      <input type="file" name="uploadVideo" accept="video/*">
                                                        <!-- You can provide an alternative message or leave it empty -->
                                                    {% endif %}
                                                </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>
                                                      </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" value="{{userKycDict.videoVerificationReason}}" required>
                                                </div>
                                              </div>
                                            </div>

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

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

                                            <!-- Submit Button -->
                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtn9" disabled>Submit</button>
                                            </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">
                                            <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>
                                                    </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" value="{{userKycDict.agreementVerificationReason}}" required>
                                                </div>
                                              </div>
                                            </div>
                                            </div>

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

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

                                            <!-- Submit Button -->
                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary updateBtn" id="updateBtn10" disabled>Submit</button>
                                            </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>
$(document).on("click", ".generateOtpBtn", function () {
    let index = $(this).attr("data-index");
    let mailType = "Merchant KYC"; // Ensure correct mailType
    let button = $(this);
    let messageBox = $("#otpMessage" + index);

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

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

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

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

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

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

});

    
</script>

<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() {
    const tab = document.getElementById("testing-tab");
    const agreementStatus = document.getElementById("agreementVerificationStatus")?.value || "Pending";
    updateTabStatus(tab, agreementStatus);
}

function checkBusinessDetailsForm() {
    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>

{% endblock %}