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

<style type="text/css">

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.rotate-360 {
  transform: rotate(360deg);
}

  .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%;
  }
</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: 100%;
  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;
}

</style>

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

.backzoom-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;
}

.aadhar-privewzoom{
  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;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

</style>



<script>
  document.addEventListener('DOMContentLoaded', function () {
    const panImage = document.querySelector('#panDocument');
    const panZoomPreview = document.querySelector('.zoom-preview');
    const panModalImage = document.querySelector('#panDocumentImg'); // Modal image reference

    const aadharImage = document.querySelector('#aadharDocument');
    const aadharZoomPreview = document.querySelector('.aadhar-privewzoom'); // Use a unique class for Aadhar preview

    const backaadharImage = document.querySelector("#aadharBackDocument");
    const backaadharZoomPreview = document.querySelector('.backzoom-preview');

    function handleZoom(image, zoomPreview) {
      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 * 5}px ${height * 5}px`; // Zoom level

        // Apply rotation to zoom preview if any
        const rotationClass = image.className.match(/rotate-\d+/);
        if (rotationClass) {
          zoomPreview.className = `zoom-preview ${rotationClass[0]}`; // Sync rotation class with preview
        }
      });

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

    function rotateImage(element) {
      const imageElement = typeof element === 'string' ? document.getElementById(element) : element;

      let currentRotationClass = imageElement.className.match(/rotate-\d+/);

     
      if (currentRotationClass) {
        imageElement.classList.remove(currentRotationClass[0]);
      }

      const nextRotationClass = getNextRotationClass(currentRotationClass ? currentRotationClass[0] : null);
      if (nextRotationClass) {
        imageElement.classList.add(nextRotationClass);
      }

    
      if (panModalImage) {
        panModalImage.className = `modal-content ${nextRotationClass}`;
      }

      if (panZoomPreview) {
        panZoomPreview.className = `zoom-preview ${nextRotationClass}`;
      }
    }

    function getNextRotationClass(currentClass) {
      switch (currentClass) {
        case 'rotate-90':
          return 'rotate-180';
        case 'rotate-180':
          return 'rotate-270';
        case 'rotate-270':
          return 'rotate-360';
        case 'rotate-360':
          return null;
        default:
          return 'rotate-90';
      }
    }

    // Attach zoom functionality to PAN document
    if (panImage && panZoomPreview) {
      handleZoom(panImage, panZoomPreview);
    }

    // Attach zoom functionality to Aadhar document
    if (aadharImage && aadharZoomPreview) {
      handleZoom(aadharImage, aadharZoomPreview);
    }

    // Attach zoom functionality to Aadhar back document
    if (backaadharImage && backaadharZoomPreview) {
      handleZoom(backaadharImage, backaadharZoomPreview);
    }

    // Open modal function
    window.openModal = function (src) {
      const modal = document.getElementById("myPanDocument");
      const modalImage = document.getElementById("panDocumentImg");
      modalImage.src = src;

      // Sync rotation for the modal image
      let currentRotationClass = panImage.className.match(/rotate-\d+/);
      if (currentRotationClass) {
        modalImage.classList.add(currentRotationClass[0]); // Apply rotation class to modal image
      }

      modal.style.display = "block";
    };

    // Close modal function
    window.closeModal = function () {
      document.getElementById("myPanDocument").style.display = "none";
    };
  });
</script>


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

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

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


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

<style>
    .tab-style-3 .nav-item .nav-link.test:after {
  content: "4";
}
.tab-style-3 .nav-item .nav-link.testing:after {
  content: "5";
}

</style>

<style>
    .image-modal {
        display: flex;
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh; 
        background-color: rgba(0, 0, 0, 0.8); 
        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: blue;
        font-size: 30px;
        cursor: pointer;
        margin-top: 10px;
    }
    .img-thumbnail {
    transition: transform 0.3s ease;
}

</style>

<style>

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

.imagepopup:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* 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)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 95px;
  right: 85px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.custom-select {
    width: 100px; 
    height: 31px;
    display: inline-block; 
    padding: 0.375rem 0.75rem; 
    border-radius: 0.25rem;
}

.image-container {
        height: 100px; 
        display: flex;
        align-items: center; 
        justify-content: center; 
    }

/* Rotate image by 90 degrees */
.rotate-90 {
    transform: rotate(90deg);
}

/* Rotate image by 180 degrees */
.rotate-180 {
    transform: rotate(180deg);
}

/* Rotate image by 270 degrees */
.rotate-270 {
    transform: rotate(270deg);
}

/* Rotate image by 360 degrees (or 0 degrees, same as no rotation) */
.rotate-360 {
    transform: rotate(360deg);
}

/* Smooth transition for rotation */
.rotatable-image {
    transition: transform 0.3s ease;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</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">Merchant Management</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('user_managements.manage_users_list') }}">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 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">
                                      <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>
                                      {% if isIndividual == False %}
                                      <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 %}
                                      <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>
                                      <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>
                                      <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>
                                    </ul>


                                <div class="tab-content" id="myTabContent1">
                                    <div class="tab-pane fade show active text-muted" id="home-tab-pane"
                                        role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                        <form id="personalDetailsForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <!-- Add your form fields here -->
                                            <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="{{ userDict.fullName }}" required>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="email">Email ID</label>
                                                <input type="text" class="form-control" id="email" name="email" value="{{ userDict.email }}" required>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="phoneNumber">Mobile Number</label>
                                                <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" value="{{userDict.phoneNumber}}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="address">Address*</label>
                                                <input type="text" class="form-control" id="address" name="address" value="{{userDict.address}}" required>
                                              </div>

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

                                              <!-- <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="categoryId">Category*</label>
                                                    <select class="form-control" name="categoryId" id="categoryId" onChange="getUpdateSubCategories(this.value)" required>
                                                      {% for each_merchant_category in categorysList %}
                                                        {%if each_merchant_category.id == userDict.categoryId%}
                                                          <option selected value="{{each_merchant_category.id}}">{{each_merchant_category.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_merchant_category.id}}">{{each_merchant_category.name}}</option>
                                                        {%endif%}
                                                      {% endfor %}
                                                    </select>                                        
                                                </div>
                                              </div>

                                              <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="subCategoryId">Subcategory*</label>
                                                    <select class="form-control" name="subCategoryId" id="subCategoryId" required>
                                                      {% for each_sub_merchant_category in subCategorysList %}
                                                        {%if each_sub_merchant_category.id == userDict.patternId%}
                                                          <option selected value="{{each_sub_merchant_category.id}}">{{each_sub_merchant_category.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_sub_merchant_category.id}}">{{each_sub_merchant_category.name}}</option>
                                                        {%endif%}
                                                      {% endfor %}
                                                    </select>                                        
                                                </div>
                                              </div> -->

                                              <!-- <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="profileId">Profile*</label>
                                                    <select class="form-control" name="profileId" id="profileId">
                                                      {%for each_profile in profilelList%}
                                                        {%if each_profile.id == userDict.profileId%}
                                                          <option selected value="{{each_profile.id}}">{{each_profile.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_profile.id}}">{{each_profile.name}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div> -->

                                              <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="entityTypeId">EntityType*</label>
                                                    <select class="form-control" name="entityTypeId" id="entityTypeId">
                                                      {%for each_entity in userEntityList%}
                                                        {%if each_entity.id == userDict.entityTypeId%}
                                                          <option selected value="{{each_entity.id}}">{{each_entity.entityType}}</option>
                                                        {%else%}
                                                        <option value="{{each_entity.id}}">{{each_entity.entityType}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div>

                                              <!-- <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="parentId">Parent*</label>
                                                    <select class="form-control" name="parentId" id="parentId">
                                                      {%for each_parent in tenantslList%}
                                                        {%if each_parent.id == userDict.parentId%}
                                                          <option selected value="{{each_parent.id}}">{{each_parent.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_parent.id}}">{{each_parent.name}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div> -->

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

                                              <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="cityId">City*</label>
                                                    <select class="form-control" name="cityId" id="cityId" onChange="getBlockPo(this.value)">
                                                      {%for each_city in citiesList%}
                                                        {%if each_city.id == userDict.cityId%}
                                                          <option selected value="{{each_city.id}}">{{each_city.cityName}}</option>
                                                        {%else%}
                                                        <option value="{{each_city.id}}">{{each_city.cityName}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div>

                                              <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="blockPoId">Select Block/PO*</label>
                                                    <select class="form-control" name="blockPoId" id="blockPoId" onChange="getPincode(this.value)">
                                                      {%for each_block in blocksList%}
                                                        {%if each_block.id == userDict.blockPoId%}
                                                          <option selected value="{{each_block.id}}">{{each_block.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_block.id}}">{{each_block.name}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div>

                                              <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="pincodeId">Pincode*</label>
                                                    <select class="form-control" name="pincodeId" id="pincodeId">
                                                      {%for each_pincode in pincodesList%}
                                                        {%if each_pincode.id == userDict.pincodeId%}
                                                          <option selected value="{{each_pincode.id}}">{{each_pincode.pincode}}</option>
                                                        {%else%}
                                                        <option value="{{each_pincode.id}}">{{each_pincode.pincode}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>
                                              </div>
                                            </div>

                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="merchantType">Merchant Type*</label>
                                                <select class="form-control" name="merchantType" id="merchantType" required>
                                                    <option value="">Select</option>
                                                    <option value="Super Distributor" {% if userDict.merchantType == 'Super Distributor'%}selected {% endif %}>Super Distributor</option>
                                                    <option value="Master Distributor" {% if userDict.merchantType == 'Master Distributor'%}selected {% endif %}>Master Distributor</option>
                                                    <option value="Area Distributor" {% if userDict.merchantType == 'Area Distributor'%}selected {% endif %}>Area Distributor</option>
                                                    <option value="Retailer" {% if userDict.merchantType == 'Retailer'%}selected {% endif %}>Retailer</option>
                                                    <option value="customer" {% if userDict.merchantType == 'customer'%}selected {% endif %}>Customer</option>
                                                    <!-- <option value="retailer" {% if userDict.merchantType == 'retailer'%}selected {% endif %}>CC Customer</option> -->
                                                  </select>
                                              </div>
                                            </div>
                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="maxPayinLimit">Max. Payin Limit</label>
                                                <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="maxPayinLimit" name="maxPayinLimit" value="{{userDict.maxPayinLimit}}" placeholder="Enter Max Txn Limit">
                                              </div>
                                            </div>

                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="maxPayoutLimit">Max. Payout Limit</label>
                                                <input type="text" pattern="([0-9]+([.][0-9]*)?|[.][0-9])" class="form-control" id="maxPayoutLimit" name="maxPayoutLimit" value="{{userDict.maxPayoutLimit}}" placeholder="Enter Max Txn Limit">
                                              </div>
                                            </div>

                                            <div class="col-md-6">
                                              <div class="form-group">
                                                <label for="remark">Remark*</label>
                                                <input type="text" class="form-control" id="remark" name="remark" value="{{userDict.remark}}" placeholder="Enter Remark" required>
                                              </div>
                                            </div>

                                             

                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                            <!-- Add more form fields as needed -->
                                          </form>

                                    </div>
                                    <div class="tab-pane fade text-muted" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                      <form id="businessDetailsForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <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="{{ userDict.businessName }}">
                                              </div>
                                              <div class="col-md-6">
                                                  <label for="businessAddress">Business Address</label>
                                                  <input type="text" class="form-control" id="businessAddress" name="businessAddress" value="{{ userDict.businessAddress }}">
                                              </div>

                                              <div class="col-md-6">
                                                <label for="businessStatus">Business Status</label>
                                                <select class="form-control"  name="businessStatus" id="businessStatus" required>
                                                    {% if userDict.businessStatus == "Submitted" %}
                                                    <option value="Submitted" selected>Submitted</option>
                                                    {% else %}
                                                    <option value="Submitted">Submitted</option>
                                                      {% endif %}
                                                    {% if userDict.businessStatus == "Rejected" %}
                                                    <option value="Rejected" selected>Rejected</option>
                                                    {% else %}
                                                    <option value="Rejected">Rejected</option>
                                                    {% endif %}
        
                                                    {% if userDict.businessStatus == "Pending" %}
                                                    <option value="Pending" selected>Pending</option>
                                                    {% else %}
                                                    <option value="Pending">Pending</option>
                                                    {% endif %}
        
                                                    {% if userDict.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 Remarks*</label>
                                                  <input type="text" class="form-control" id="businessRemark" name="businessRemark" value="{{ userDict.businessRemark }}">
                                              </div>
                                          </div>

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

                                        
                                            <form id="docsform" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <div class="row mt-3">
                                            <div class="col-md-12">
                                                <h5>Uploaded Documents:</h5>
                                                <div class="row" id="uploadedDocumentsList">
                                                    {% for document in userDict.documentsList %}
                                                    <div class="col-md-3 mb-4"> 
                                                        <div class="d-flex flex-column align-items-center text-center"> 
                                                            <label class="d-block mb-2">{{ document.get('documentName') }}</label>
                                                            
                                                            <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 rotatable-document-image" 
                                                                  style="max-height: 100%; max-width: 100%;" 
                                                                  onclick="openModal('{{ document.get('image') }}')">
                                                              
                                                              <button type="button" class="rotate-button" onclick="rotateImage(this.previousElementSibling)">&#x21BB;</button>
                                                          </div>
                                                          

                                                            <form method="POST" action="{{ url_for('user_managements.documents_update_status', userId=userDict.id) }}">
                                                                <input type="hidden" name="documentId" value="{{ document.get('documentId') }}">
                                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                                <div class="d-flex align-items-center">
                                                                    <select name="documentStatus" class="custom-select" style="width: 110px;margin-right: 2px;"> 
                                                                        <option value="Approved" {% if document.get('documentStatus') == "Approved" %}selected{% endif %}>Approved</option>
                                                                        <option value="Pending" {% if document.get('documentStatus') == "Pending" %}selected{% endif %}>Pending</option>
                                                                        <option value="Submitted" {% if document.get('documentStatus') == "Submitted" %}selected{% endif %}>Submitted</option>
                                                                        <option value="Rejected" {% if document.get('documentStatus') == "Rejected" %}selected{% endif %}>Rejected</option>
                                                                    </select>
                                                                    <button type="submit" class="btn btn-primary ml-2" style="height: 33px; text-align: center; padding-top: 0.5px; padding-bottom: 0;">Update Status</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                                <div class="col-md-6">
                                                  <label for="documentRemark">Document Remark*</label>
                                                  <input type="text" class="form-control" id="documentRemark" name="documentRemark" value="{{ userDict.documentRemark }}">
                                              </div>
                                              <div class="modal-footer justify-content-between">
                                              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                          </div>
                                            </div>

                                        </div>
                                      </form>
                                          <form id="shopform" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <div class="row mt-3">
                                              <div class="col-md-12">
                                                  <h5>Shop Images:</h5>
                                                  <div class="row" id="shopImagesList">
                                                      {% for each_image in userDict.shopImagesList %}
                                                      <div class="col-md-3 mb-4"> 
                                                          <div class="d-flex flex-column align-items-center text-center"> 
                                                              <div class="image-container mb-2" style="height: 100px; display: flex; align-items: center;">
                                                                  <img id="image-{{ each_image.get('shopImageNumber') }}" src="{{ each_image.get('image') }}" 
                                                                       alt="{{ each_image.get('shopImageNumber') }} Image" class="img-thumbnail rotatable-image" 
                                                                       style="max-height: 100%; max-width: 100%;" 
                                                                       onclick="openModal('{{ each_image.get('image') }}')">
                                                                  <button type="button" class="rotate-button" onclick="rotateImage('image-{{ each_image.get('shopImageNumber') }}')">&#x21BB;</button> 
                                                              </div>

                                                              <form method="POST" action="{{ url_for('user_managements.shop_images_update_status', userId=userDict.id) }}">
                                                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                                  <input type="hidden" name="shopImageNumber" value="{{ each_image.get('shopImageNumber') }}">
                                                                  <div class="d-flex align-items-center">
                                                                      <select name="shopImageStatus" class="custom-select" style="width: 110px; margin-right: 2px;">
                                                                          <option value="Approved" {% if each_image.get('shopImageStatus') == "Approved" %}selected{% endif %}>Approved</option>
                                                                          <option value="Pending" {% if each_image.get('shopImageStatus') == "Pending" %}selected{% endif %}>Pending</option>
                                                                          <option value="Submitted" {% if each_image.get('shopImageStatus') == "Submitted" %}selected{% endif %}>Submitted</option>
                                                                          <option value="Rejected" {% if each_image.get('shopImageStatus') == "Rejected" %}selected{% endif %}>Rejected</option>
                                                                      </select>
                                                                      <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>
                                                      </div>
                                                      {% endfor %}
                                                      {% if not userDict.shopImagesList %}
                                                      <p>No shop images uploaded.</p>
                                                      {% endif %}
                                                  </div>
                                                  <div class="col-md-6">
                                                  <label for="shopRemark">Shop Remark*</label>
                                                  <input type="text" class="form-control" id="shopRemark" name="shopRemark" value="{{ userDict.shopRemark }}">
                                              </div>
                                              <div class="modal-footer justify-content-between">
                                              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                          </div>
                                              
                                              </div>
                                          </div>
                                        </form>


                                          <label>Video Verification</label>
                                          <form id="businessDetailsForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                          <div class="row">
                                              <div class="col-md-6">
                                                
                                                {% if userDict.videoVerificationStatus == "Submitted" or userDict.videoVerificationStatus == "Approved" %}
                                                    {% if userDict.shopVideo %}
                                                        <video width="400" height="300" controls>
                                                            <source src="{{ userDict.shopVideo }}" 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="col-md-6">
                                              <label for="shopVideoStatus">Video Verification Status</label>
                                              <select class="form-control"  name="shopVideoStatus" id="shopVideoStatus">
                                                  {% if userDict.shopVideoStatus == "Submitted" %}
                                                  <option value="Submitted" selected>Submitted</option>
                                                  {% else %}
                                                  <option value="Submitted">Submitted</option>
                                                    {% endif %}
                                                  {% if userDict.shopVideoStatus == "Rejected" %}
                                                  <option value="Rejected" selected>Rejected</option>
                                                  {% else %}
                                                  <option value="Rejected">Rejected</option>
                                                  {% endif %}
      
                                                  {% if userDict.shopVideoStatus == "Pending" %}
                                                  <option value="Pending" selected>Pending</option>
                                                  {% else %}
                                                  <option value="Pending">Pending</option>
                                                  {% endif %}
      
                                                  {% if userDict.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="{{ userDict.videoVerificationRemark }}">
                                              </div>
                                              
                                          <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                            <!-- Add more form fields as needed -->
                                        </form>
                                    </div>
                                    <div class="tab-pane fade text-muted" id="contact-tab-pane"
                                        role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                                  
                                        <form id="kycForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <!-- 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 userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userDict.panNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userDict.panNumber }}" required>
                                                      {% endif %}
                                                    </div>



                                                    <div class="col-md-6">
                                                      <label>Document/</label>
                                                      {% if userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                        {% if userDict.panDocument %}
                                                        <div class="image-container" style="display: flex; align-items: center;">
                                                          <img class="imagepopup" src="{{ userDict.panDocument }}" id="panDocument" alt="PAN Document" border="3" height="150px" width="150px" onclick="openModal('{{ userDict.panDocument }}')">
                                                          <button type="button" class="rotate-button" onclick="rotateImage('panDocument')" style="font-size: 16px; margin-left: 10px;">&#x21BB;</button>
                                                        </div>
                                                        <div class="zoom-preview"></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 userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                      <div class="input-group1" style="position: relative;">
                                                        <input type="text" class="form-control" id="originalPanName" name="originalPanName" value="{{ userDict.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="{{ userDict.originalPanName }}" readonly>
                                                      {% endif %}
                                                    </div>

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

                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="panStatus">Pan Status</label>
                                                        <select class="form-control" id="panStatus" name="panStatus" required>
                                                          {% if userDict.panStatus == "Submitted" %}
                                                          <option value="Submitted" selected>Submitted</option>
                                                          {% else %}
                                                          <option value="Submitted">Submitted</option>
                                                          {% endif %}

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

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

                                                          {% if userDict.panStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                        </select>
                                                      </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="{{ userDict.panReason }}" required>
                                                      </div>
                                                    </div>
                                                  </div>

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

                                                <form id="kycForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <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 userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userDict.aadharNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userDict.aadharNumber }}" required>
                                                      {% endif %}
                                                    </div>

                                                    <div class="row">
                                                      <!-- Aadhar Front Document -->
                                                      <div class="col-md-6">
                                                        <label>Aadhaar Front Document/</label>
                                                        {% if userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                          {% if userDict.aadharDocument %}
                                                            <div class="image-container">
                                                              <img class="imagepopup" src="{{ userDict.aadharDocument }}" id="aadharDocument" alt="" border="3" height="150px" width="150px">
                                                              <button type="button" class="rotate-button" onclick="rotateImage('aadharDocument')" style="font-size: 16px; margin-left: 10px;">&#x21BB;</button>
                                                              <div class="aadhar-privewzoom" ></div>

                                                            </div>
                                                          {% else %}
                                                            <label>Re-upload Document</label>
                                                            <input type="file" class="form-control" id="aadharDocument" name="aadharDocument">
                                                          {% endif %}
                                                        {% else %}
                                                          <label>Re-upload Document</label>
                                                          <input type="file" class="form-control" id="aadharDocument" name="aadharDocument">
                                                        {% endif %}
                                                      </div>

                                                      <!-- Aadhar Back Document -->
                                                      <div class="col-md-6">
                                                        <label>Aadhaar Back Document/</label>
                                                        {% if userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                          {% if userDict.aadharBackDocument %}
                                                            <div class="image-container">
                                                              <img class="imagepopup" src="{{ userDict.aadharBackDocument }}" id="aadharBackDocument" alt="" border="3" height="150px" width="150px">
                                                              <button type="button" class="rotate-button" onclick="rotateImage('aadharBackDocument')" style="font-size: 16px; margin-left: 10px;">&#x21BB;</button>
                                                              <div class="backzoom-preview" ></div>
                                                          {% else %}
                                                            <label>Re-upload Document</label>
                                                            <input type="file" class="form-control" id="aadharBackDocument" name="aadharBackDocument">
                                                          {% endif %}
                                                        {% else %}
                                                          <label>Re-upload Document</label>
                                                          <input type="file" class="form-control" id="aadharBackDocument" name="aadharBackDocument">
                                                        {% endif %}
                                                      </div>
                                                    </div>


                                                    <div class="col-md-6">
                                                      <label for="originalAadharName">Original AadhaarName </i></label>
                                                        {% if userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                           <div class="input-group2" style="position: relative;">
                                                            <input type="text" class="form-control" id="originalAadharName" name="originalAadharName" value="{{ userDict.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="{{ userDict.originalAadharName }}" readonly>
                                                        {% endif %}
                                                      </div>

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

                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="aadharStatus">Aadhaar Status</label>
                                                        <select class="form-control" id="aadharStatus" name="aadharStatus" required>
                                                          {% if userDict.aadharStatus == "Submitted" %}
                                                          <option value="Submitted" selected>Submitted</option>
                                                          {% else %}
                                                          <option value="Submitted">Submitted</option>
                                                          {% endif %}
                                                          {% if userDict.aadharStatus == "Rejected" %}
                                                          <option value="Rejected" selected>Rejected</option>
                                                          {% else %}
                                                          <option value="Rejected">Rejected</option>
                                                          {% endif %}

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

                                                          {% if userDict.aadharStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                        </select>
                                                      </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="{{userDict.aadharReason}}" required>
                                                      </div>
                                                    </div>
                                                  </div>
                                                  
                                                  <div class="modal-footer justify-content-between">
                                                        <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                                  </div>
                                                </form>

                                                <form id="kycForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <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 userDict.bankStatus == "Submitted" or userDict.bankStatus == "Approved" %}
                                                        <select class="form-control" name="bankId" id="bankId" readonly>
                                                            {%for each_bank in masterIfscBanksList%}
                                                              {%if each_bank.id == userDict.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 == userDict.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="ifscCode">IFSC</label>
                                                      {% if userDict.bankStatus == "Submitted" or userDict.bankStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ userDict.ifscCode }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ userDict.ifscCode }}" required>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <label for="originalBankName" >Original Bank Name </i></label>
                                                      {% if userDict.bankStatus == "Submitted" or userDict.bankStatus == "Approved" %}
                                                      <div class="input-group3" style="position: relative;">
                                                        <input type="text" class="form-control " id="originalBankName" name="originalBankName" value="{{ userDict.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="{{ userDict.originalBankName }}" readonly>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <label for="bankAccountNumber">Account Number</label>
                                                      {% if userDict.bankStatus == "Submitted" or userDict.bankStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" value="{{ userDict.bankAccountNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" value="{{ userDict.bankAccountNumber }}" required>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="bankStatus">Bank Status</label>
                                                        <select class="form-control" id="bankStatus" name="bankStatus" required>
                                                          {% if userDict.bankStatus == "Submitted" %}
                                                          <option value="Submitted">Submitted</option>
                                                          {% else %}
                                                          <option value="Submitted">Submitted</option>
                                                          {% endif %}

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

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

                                                          {% if userDict.bankStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                        </select>
                                                      </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="{{userDict.bankReason}}" required>
                                                      </div>
                                                    </div>
                                                  </div>

                                                  <div class="modal-footer justify-content-between">
                                                      <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                                  </div>
                                                  <!-- Add more form fields as needed -->

                                                </form>    

                                    </div>

                                    <div class="tab-pane fade text-muted" id="test-tab-pane"
                                        role="tabpanel" aria-labelledby="test-tab" tabindex="0">
                                        <form id="videoVerificationForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <!-- Add your form fields here -->
                                            <h6><b>Video</b></h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Video Verification</label>
                                                    {% if userDict.videoVerificationStatus == "Submitted" or userDict.videoVerificationStatus == "Approved"%}
                                                      {% if userDict.uploadVideo %}
                                                          <video width="400" height="300" controls>
                                                              <source src="{{ userDict.uploadVideo }}" type="video/mp4">
                                                          </video>
                                                      {% else %}
                                                        <input type="file" name="uploadVideo" accept="video/*">
                                                      {% endif %}
                                                    {% else %}
                                                        <input type="file" name="uploadVideo" accept="video/*">
                                                    {% endif %}
                                                </div>

                                                <div class="form-group">
                                                  <label for="videoVerificationStatus">Video Verification Status</label>
                                                  <select class="form-control" id="videoVerificationStatus" name="videoVerificationStatus" required>
                                                      {% if userDict.videoVerificationStatus == "Submitted"%}
                                                      <option value="Submitted" selected>Submitted</option>
                                                      {% else %}
                                                      <option value="Submitted">Submitted</option>
                                                        {% endif %}
                                                      {% if userDict.videoVerificationStatus == "Rejected" %}
                                                      <option value="Rejected" selected>Rejected</option>
                                                      {% else %}
                                                      <option value="Rejected">Rejected</option>
                                                      {% endif %}

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

                                                      {% if userDict.videoVerificationStatus == "Approved" %}
                                                      <option value="Approved" selected>Approved</option>
                                                      {% else %}
                                                      <option value="Approved">Approved</option>
                                                      {% endif %}
                                                  </select>
                                                </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="{{userDict.videoVerificationReason}}" required>
                                                </div>
                                              </div>
                                            </div>

                                            <div class="modal-footer justify-content-between">
                                                <button type="submit" class="btn btn-primary submit-btn">Submit</button>
                                            </div>
                                            <!-- Add more form fields as needed -->
                                          </form>  
                                    </div>

                                    <div class="tab-pane fade text-muted" id="testing-tab-pane"
                                        role="tabpanel" aria-labelledby="testing-tab" tabindex="0">
                                        <form id="agreementForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Agreement Document</label>
                                                    {% if userDict.agreementDocument %}
                                                      <button type="button" class="btn btn-primary" data-agreementDocument="{{ userDict.agreementDocument }}" id="showAgreementPdf">Show PDF</button>
                                                    {% else %}
                                                      <input type="hidden" id="showAgreementPdf">
                                                    {% endif %}
                                                </div>

                                                <div class="form-group">
                                                  <label for="agreementVerificationStatus">Agreement Verification Status</label>
                                                  <select class="form-control" id="agreementVerificationStatus" name="agreementVerificationStatus" required>
                                                      {% if userDict.agreementVerificationStatus == "Submitted" %}
                                                      <option value="Submitted" selected>Submitted</option>
                                                      {% else %}
                                                      <option value="Submitted">Submitted</option>
                                                        {% endif %}
                                                      {% if userDict.agreementVerificationStatus == "Rejected" %}
                                                      <option value="Rejected" selected>Rejected</option>
                                                      {% else %}
                                                      <option value="Rejected">Rejected</option>
                                                      {% endif %}

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

                                                      {% if userDict.agreementVerificationStatus == "Approved" %}
                                                      <option value="Approved" selected>Approved</option>
                                                      {% else %}
                                                      <option value="Approved">Approved</option>
                                                      {% endif %}
                                                  </select>
                                                </div>

                                                <div class="row">
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="agreementVerificationReason">Agreement Verification Reason*</label>
                                                  <input type="text" class="form-control" name="agreementVerificationReason" id="agreementVerificationReason" value="{{userDict.agreementVerificationReason}}" required>
                                                </div>
                                              </div>
                                            </div>
                                            </div>

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

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

                        <div id="myPanDocument" class="modal" style="display: none;">
                          <span class="close" onclick="closeModal()">&times;</span>
                          <button type="button"  onclick="rotateImage()" style="font-size: 16px; margin-left: 10px; position: relative; left: 400px;" >Button</button> 
                          <img class="modal-content" id="panDocumentImg">
                          <div id="caption"></div>
                        </div>

                          <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>
// Get the modal
// Get modals and elements
var modal = document.getElementById("myPanDocument");
var pdfmodal = document.getElementById("mypdfModel");

var modalImg = document.getElementById("panDocumentImg");
var captionText = document.getElementById("caption");
var pdfFile = document.getElementById("pdffile");

// Document images
var panDocumentimg = document.getElementById("panDocument");
var aadharDocumentimg = document.getElementById("aadharDocument");
var backaadharDocumentimg = document.getElementById("aadharBackDocument");

// PDF trigger
var showAgreementPdf = document.getElementById("showAgreementPdf");

let rotationAngle = 0; // For rotating the image

// Function to open image modal
function openImageModal(imgElement) {
  modal.style.display = "block";
  modalImg.src = imgElement.src;
  captionText.innerHTML = imgElement.alt;
  rotationAngle = 0; // Reset rotation
  modalImg.style.transform = `rotate(${rotationAngle}deg)`; // Reset image orientation
}

// Image click event listeners
panDocumentimg.onclick = function() {
  openImageModal(this);
}

aadharDocumentimg.onclick = function() {
  openImageModal(this);
}

backaadharDocumentimg.onclick = function() {
  openImageModal(this);
}

// Function to rotate image
function rotateImage() {
  rotationAngle += 90; // Increment rotation by 90 degrees
  modalImg.style.transform = `rotate(${rotationAngle}deg)`;
}

// Function to open PDF modal
showAgreementPdf.onclick = function() {
  pdfmodal.style.display = "block";
  pdfFile.src = this.getAttribute("data-agreementDocument");
  captionText.innerHTML = this.alt;
}

// Close modal function (can be used for both image and pdf modals)
function closeModal() {
  modal.style.display = "none";
  pdfmodal.style.display = "none";
}

// 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";
  }
}


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 handleTabChange(event) {
    const activeTabId = event.target.id; 
    localStorage.setItem('activeTab', activeTabId); 
}


document.querySelectorAll('.nav-link').forEach(tab => {
    tab.addEventListener('click', handleTabChange);
});


function setInitialActiveTab() {
    const savedTabId = localStorage.getItem('activeTab');
    const defaultTab = document.getElementById('home-tab'); 

   
    if (savedTabId && document.getElementById(savedTabId)) {
        const savedTab = document.getElementById(savedTabId);
        const savedTabPane = document.querySelector(savedTab.getAttribute("data-bs-target"));

        
        document.querySelectorAll('.nav-link').forEach(tab => tab.classList.remove('active'));
        document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active', 'show'));

        
        savedTab.classList.add('active');
        savedTabPane.classList.add('active', 'show');
    } else {
        
        defaultTab.classList.add('active');
        const defaultTabPane = document.querySelector(defaultTab.getAttribute("data-bs-target"));
        defaultTabPane.classList.add('active', 'show');
    }
}


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";
    updateTabStatus(tab, businessStatus);
}

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 () {
  setInitialActiveTab();
    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>


{% endblock %}