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

<style type="text/css">
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
  }
  .pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
  }
</style>

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

  .btn-edit:hover {
    text-decoration: underline;
  }
</style>


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

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


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

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

.img-thumbnail {
    max-height: 100%; 
    max-width: 100%; 
}

/* 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">
                            View Merchant Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </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 home py-1 active" 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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <!-- 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 }}" readonly>
                                              </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 }}" readonly>
                                              </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 }}" readonly>
                                              </div>

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

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

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

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

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

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

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

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

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

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

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

                                              <div class="col-md-6">
                                                <label for="maxPayinLimit">Max. Payin Limit</label>
                                                <input type="text" class="form-control" id="maxPayinLimit" name="maxPayinLimit" value="{{ userDict.maxPayinLimit }}" readonly>
                                              </div>

                                              <div class="col-md-6">
                                                <label for="maxPayoutLimit">Max. Payout Limit</label>
                                                <input type="text" class="form-control" id="maxPayoutLimit" name="maxPayoutLimit" value="{{ userDict.maxPayoutLimit }}" readonly>
                                              </div>

                                            </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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <!-- Add your form fields here -->
                                              <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.get('businessName') }}" readonly>
                                                </div>

                                                <div class="col-md-6">
                                                  <label for="businessAddress">Business Address</label>
                                                  <input type="text" class="form-control" id="businessAddress" name="businessAddress" value="{{ userDict.businessAddress }}" readonly>
                                                </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="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" style="max-height: 100%; max-width: 100%;" onclick="openModal('{{ document.get('image') }}')">
                                                        </div>

                                                        <form method="POST" action="{{ url_for('user_managements.documents_update_status', userId=userDict.id) }}">
                                                            <input type="hidden" name="documentId" value="{{ document.get('documentId') }}">
                                                            <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>
                                    </div>
                                    <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 src="{{ each_image.get('image') }}" alt="{{ each_image.get('shopImageNumber') }} Image" class="img-thumbnail" style="max-height: 100%; max-width: 100%;" onclick="openModal('{{ each_image.get('image') }}')">
                                                        </div>
                                                        <form method="POST" action="{{ url_for('user_managements.shop_images_update_status', userId=userDict.id) }}">
                                                            <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>
                                    </div>
                                    <label>Video Verification</label>
                                                <form id="businessDetailsForm" method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                                    <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>
                                                </form>


                                              </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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                                <!-- Add your form fields here -->

                                              <div class="row">
                                                <div class="col-md-12">
                                                      <h5 style="margin-top: .6rem !important;">ID Proof</h5>
                                                  </div>
                                                <div class="col-md-6">
                                                  <label for="panNumber">Pan Number</label>
                                                  <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userDict.panNumber }}" readonly>
                                                </div>
                                              </div>

                                              <div class="row">
                                                  <div class="col-md-6">
                                                      <label>PAN Document</label>
                                                      <!-- Check if userDict.panDocument exists before displaying the image -->
                                                      {% if userDict.panDocument %}
                                                          <img class="imagepopup" src="{{ userDict.panDocument }}" id="panDocument" alt="" border="3" height="150px" width="150px">
                                                      {% else %}
                                                          <input type="hidden" id="panDocument">
                                                      {% endif %}
                                                  </div>
                                              </div>
                                            <div class="row">
                                              <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>

                                              <div class="row">
                                                <div class="col-md-6">
                                                  <label for="panStatus">Pan Status</label>
                                                  <input type="text" class="form-control" id="panStatus" name="panStatus" value="{{ userDict.panStatus }}" readonly>
                                                </div>
                                              </div>

                                              <div class="row">
                                                <div class="col-md-6">
                                                  <label for="panReason">Pan Remark</label>
                                                  <input type="text" class="form-control" id="panReason" name="panReason" value="{{ userDict.panReason }}" readonly>
                                                </div>
                                              </div>

                                              

                                              
                                              <div class="row">
                                                <div class="col-md-12">
                                                     <h5 style="margin-top: .6rem !important;">Address Proof</h5>
                                                 </div>
                                                  <div class="col-md-6">
                                                      <label>Aadhar Front Document</label>
                                                      <!-- Check if userDict.aadharDocument exists before displaying the image -->
                                                      {% if userDict.aadharDocument %}
                                                          <img class="imagepopup" src="{{ userDict.aadharDocument }}" id="aadharDocument" alt="" border="3" height="150px" width="150px">
                                                      {% else %}
                                                          <input type="hidden" id="aadharDocument">
                                                      {% endif %}
                                                  </div>

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

                                                <div class="col-md-6">
                                                    <label for="originalAadharName">Original AadharName </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="aadharStatus">Aadhar Status</label>
                                                  <input type="text" class="form-control" id="aadharStatus" name="aadharStatus" value="{{ userDict.aadharStatus }}" readonly>
                                                </div>

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

                                              </div>

                                              <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="bankName">Bank Name</label>
                                                  <input type="text" class="form-control" id="bankName" name="bankName" value="{{ userDict.bankName }}" readonly>
                                                </div>

                                                <div class="col-md-6">
                                                  <label for="ifscCode">IFSC</label>
                                                  <input type="text" class="form-control" id="ifscCode" name="ifscCode" value="{{ userDict.ifscCode }}" readonly>
                                                </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>
                                                  <input type="text" class="form-control" id="bankAccountNumber" name="bankAccountNumber" value="{{ userDict.bankAccountNumber }}" readonly>
                                                </div>

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

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

                                              </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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                              <!-- Add your form fields here -->
                                              <h6><b>Video</b></h6>
                                              <div class="row">
                                                  <div class="col-md-6">
                                                      <label>Video Verification</label>
                                                      {% if userDict.uploadVideo %}
                                                          <video width="400" height="300" controls>
                                                              <source src="{{ userDict.uploadVideo }}" type="video/mp4">
                                                          </video>
                                                      {% else %}
                                                          <!-- You can provide an alternative message or leave it empty -->
                                                      {% endif %}
                                                  </div>
                                              </div>
                                              <div class="row">
                                                <div class="col-md-6">
                                                  <label for="videoVerificationStatus">Video Verification Status</label>
                                                  <input type="text" class="form-control" id="videoVerificationStatus" name="videoVerificationStatus" value="{{ userDict.videoVerificationStatus }}" readonly>
                                                </div>
                                              </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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                <!-- Add your form fields here -->
                                        <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="col-md-6">
                                              <label for="agreementVerificationStatus">Agreement Verification Status</label>
                                              <input type="text" class="form-control" id="agreementVerificationStatus" name="agreementVerificationStatus" value="{{ userDict.agreementVerificationStatus }}" readonly>
                                            </div>
                                        </div>
                                    </form>      
                                    </div>
                                     <div id="myPanDocument" class="modal">
                                    <span class="close">&times;</span>
                                    <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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


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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var panDocumentimg = document.getElementById("panDocument");
var showAgreementPdf = document.getElementById("showAgreementPdf");
var aadharDocumentimg = document.getElementById("aadharDocument");
var modalImg = document.getElementById("panDocumentImg");
var captionText = document.getElementById("caption");
panDocumentimg.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
span1.onclick = function() { 
  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 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 () {
    setInitialTabStatuses();
    checkPersonalDetailsForm();
    checkKYCForm();
    checkVideoVerificationForm();
    checkAgreementForm();
    checkBusinessDetailsForm();
};


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



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

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

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

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

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

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

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

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

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



</script>

<script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.nav-link');
 
    
    let activeTab = localStorage.getItem('activeTab') || 'home-tab-pane';  
 
    console.log('Active tab from localStorage:', activeTab); 
    tabs.forEach(tab => {
        tab.classList.remove('active');
        const target = tab.getAttribute('data-bs-target');
        document.querySelector(target).classList.remove('show', 'active');
    });
 
    
    const activeTabElement = document.querySelector(`#${activeTab}`);
    if (activeTabElement) {
        activeTabElement.classList.add('show', 'active');
        const correspondingButton = document.querySelector(`[data-bs-target="#${activeTab}"]`);
        correspondingButton.classList.add('active');
    } else {
        console.error('Active tab element not found! Defaulting to Personal Details tab.');
    }
 
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            const targetPane = this.getAttribute('data-bs-target').substring(1);  
            console.log('Switching to tab:', targetPane);  
            localStorage.setItem('activeTab', targetPane);  
        });
    });
});
 
 
</script>

{% endblock %}