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

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

/* 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">Update KYC Merchant Details</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('user_managements.pending_users_list') }}">Pending KYC Merchants List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Update KYC Merchant Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </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>
                                    <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>
                                    <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>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="fullName">Full Name</label>
                                                    <input type="text" class="form-control" id="fullName" name="fullName" value="{{ userKycDict.fullName }}" readonly>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="email">Email ID</label>
                                                    <input type="text" class="form-control" id="email" name="email" value="{{ userKycDict.email }}" readonly>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="phoneNumber">Mobile Number</label>
                                                    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" value="{{userKycDict.phoneNumber}}" readonly>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="address">Address*</label>
                                                    <input type="text" class="form-control" id="address" name="address" value="{{userKycDict.address}}" readonly>
                                                </div>
                                            </div>
                                          </form>

                                    </div>
                                    <div class="tab-pane fade text-muted" id="profile-tab-pane"
                                        role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id)}}" enctype="multipart/form-data">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="businessName">Firm/Shop Name</label>
                                                    <input type="text" class="form-control" id="businessName" name="businessName" value="{{userKycDict.businessName}}" readonly>
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="businessAddress">Business Address</label>
                                                    <input type="text" class="form-control" id="businessAddress" name="businessAddress" value="{{userKycDict.businessAddress}}" readonly>
                                                </div>
                                            </div>

                                            <br>
                                            <h6>Company KYC</h6>

                                            <div class="row">
                                                <div class="col-md-6">
                                                  <div class="form-group">
                                                    <label>Company Registration Document</label>
                                                    {% if userKycDict.companyRegistrationStatus == "Submitted" or userKycDict.companyRegistrationStatus == "Approved" %}
                                                      {% if userKycDict.companyRegistrationDoc %}
                                                        <button type="button" class="btn btn-primary" data-companyRegistrationDoc="{{ userKycDict.companyRegistrationDoc }}" id="showCompanyRegDocPdf">Show PDF</button>
                                                      {% else %}
                                                        <input type="hidden" id="showCompanyRegDocPdf">
                                                      {% endif %}
                                                    {% else %}
                                                        <label>Re-upload Document</label>
                                                        <input type="file" class="form-control" id="companyRegistrationDoc" name="companyRegistrationDoc">
                                                    {% endif %}
                                                  </div>
                                                </div>

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

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

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

                                                      {% if userKycDict.companyRegistrationStatus == "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>MOA Document</label>
                                                    {% if userKycDict.moaStatus == "Submitted" or userKycDict.moaStatus == "Approved" %}
                                                      {% if userKycDict.moaDoc %}
                                                        <button type="button" class="btn btn-primary" data-moaDoc="{{ userKycDict.moaDoc }}" id="showMoaDocPdf">Show PDF</button>
                                                      {% else %}
                                                        <input type="hidden" id="showMoaDocPdf">
                                                      {% endif %}
                                                    {% else %}
                                                        <label>Re-upload Document</label>
                                                        <input type="file" class="form-control" id="moaDoc" name="moaDoc">
                                                    {% endif %}
                                                  </div>
                                                </div>

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

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

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

                                                        {% if userKycDict.moaStatus == "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>AOA Document</label>
                                                    {% if userKycDict.aoaStatus == "Submitted" or userKycDict.aoaStatus == "Approved" %}
                                                      {% if userKycDict.aoaDoc %}
                                                        <button type="button" class="btn btn-primary" data-aoaDoc="{{ userKycDict.aoaDoc }}" id="showAoaDocPdf">Show PDF</button>
                                                      {% else %}
                                                        <input type="hidden" id="showAoaDocPdf">
                                                      {% endif %}
                                                    {% else %}
                                                        <label>Re-upload Document</label>
                                                        <input type="file" class="form-control" id="aoaDoc" name="aoaDoc">
                                                    {% endif %}
                                                  </div>
                                                </div>

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

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

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

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

                                                  <div class="col-md-6">
                                                    <label>Company Pan Document</label>
                                                    {% if userKycDict.companyPanStatus == "Submitted" or userKycDict.companyPanStatus == "Approved" %}
                                                      {% if userKycDict.companyPanDoc %}
                                                        <img class="imagepopup" src="{{ userKycDict.companyPanDoc }}" id="companyPanDoc" alt="" border="3" height="150px" width="150px">
                                                      {% else %}
                                                        <label>Re-upload Document</label>
                                                        <input type="file" class="form-control" id="companyPanDoc" name="companyPanDoc">
                                                      {% endif %}
                                                    {% else %}
                                                        <label>Re-upload Document</label>
                                                        <input type="file" class="form-control" id="companyPanDoc" name="companyPanDoc">
                                                    {% endif %}
                                                  </div>

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

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

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

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

                                              </div>

                                              <div class="modal-footer justify-content-between">
                                                  <button type="submit" class="btn btn-primary">Submit</button>
                                              </div>
                                        </form>        
                                    </div>
                                    <div class="tab-pane fade text-muted" id="contact-tab-pane"
                                        role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id)}}" enctype="multipart/form-data">
                                            <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">PancardNo</label>
                                                {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved"%}
                                                  <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userKycDict.panNumber }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userKycDict.panNumber }}" readonly>
                                                {% endif %}
                                              </div>
                                        
                                            
                                              <div class="col-md-6">
                                                <label>Document/</label>
                                                {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                  {% if userKycDict.panDocument %}
                                                    <img class="imagepopup" src="{{ userKycDict.panDocument }}" id="panDocument" alt="" border="3" height="150px" width="150px">
                                                  {% 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="panName">Pan Name</label>
                                                {% if userKycDict.panStatus == "Submitted" or userKycDict.panStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="panName" name="panName" value="{{ userKycDict.panName }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="panName" name="panName" value="{{ userKycDict.panName }}" readonly>
                                                {% 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 userKycDict.panStatus == "Submitted" %}
                                                    <option value="Submitted" selected>Submitted</option>
                                                    {% else %}
                                                    <option value="Submitted">Submitted</option>
                                                    {% endif %}

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

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

                                                    {% if userKycDict.panStatus == "Approved" %}
                                                    <option value="Approved" selected>Approved</option>
                                                    {% else %}
                                                    <option value="Approved">Approved</option>
                                                    {% endif %}
                                                  </select>
                                                </div>
                                              </div>
                                            
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="panReason">Pan Reason</label>
                                                  <input type="text" class="form-control" id="panReason" name="panReason" value="{{ userKycDict.panReason }}">
                                                </div>
                                              </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 for="aadharNumber">Aadhaar No</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userKycDict.aadharNumber }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userKycDict.aadharNumber }}" readonly>
                                                {% endif %}
                                              </div>
                                              <div class="col-md-6">
                                                <label>Aadhar Front Document/</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  {% if userKycDict.aadharDocument %}
                                                    <img class="imagepopup" src="{{ userKycDict.aadharDocument }}" id="aadharDocument" alt="" border="3" height="150px" width="150px">
                                                  {% 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>
                                           

                                           
                                              <div class="col-md-6">
                                                <label for="aadharName">Aadhaar Name</label>
                                                {% if userKycDict.aadharStatus == "Submitted" or userKycDict.aadharStatus == "Approved" %}
                                                  <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userKycDict.aadharName }}" readonly>
                                                {% else %}
                                                  <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userKycDict.aadharName }}" readonly>
                                                {% endif %}
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="aadharStatus">Aadhar Status</label>
                                                  <select class="form-control" id="aadharStatus" name="aadharStatus" required>
                                                    {% if userKycDict.aadharStatus == "Submitted" %}
                                                    <option value="Submitted" selected>Submitted</option>
                                                    {% else %}
                                                    <option value="Submitted">Submitted</option>
                                                    {% endif %}
                                                    {% if userKycDict.aadharStatus == "Rejected" %}
                                                    <option value="Rejected" selected>Rejected</option>
                                                    {% else %}
                                                    <option value="Rejected">Rejected</option>
                                                    {% endif %}

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

                                                    {% if userKycDict.aadharStatus == "Approved" %}
                                                    <option value="Approved" selected>Approved</option>
                                                    {% else %}
                                                    <option value="Approved">Approved</option>
                                                    {% endif %}
                                                  </select>
                                                </div>
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="aadharReason">Aadhar Reason</label>
                                                  <input type="text" class="form-control" name="aadharReason" id="aadharReason" value="{{userKycDict.aadharReason}}">
                                                </div>
                                              </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="bankId">Bank Name</label>
                                                  {% if userKycDict.bankStatus == "Submitted" or userKycDict.bankStatus == "Approved" %}
                                                    <select class="form-control" name="bankId" id="bankId" readonly>
                                                        {%for each_bank in masterIfscBanksList%}
                                                          {%if each_bank.id == userKycDict.bankId%}
                                                            <option selected value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          {%else%}
                                                          <option value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          {%endif%}
                                                        {%endfor%}
                                                    </select>
                                                  {% else %}
                                                    <select class="form-control" name="bankId" id="bankId" readonly>
                                                        <option value="">Select Bank</option>
                                                        {%for each_bank in masterIfscBanksList%}
                                                          {%if each_bank.id == userKycDict.bankId%}
                                                            <option selected value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          {%else%}
                                                          <option value="{{each_bank.id}}">{{each_bank.bankName}}</option>
                                                          {%endif%}
                                                        {%endfor%}
                                                    </select>
                                                  {% endif %}

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

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

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

                                                    {% if userKycDict.bankStatus == "Approved" %}
                                                    <option value="Approved" selected>Approved</option>
                                                    {% else %}
                                                    <option value="Approved">Approved</option>
                                                    {% endif %}
                                                  </select>
                                                </div>
                                              </div>
                                           
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="bankReason">Bank Reason</label>
                                                  <input type="text" class="form-control" name="bankReason" id="bankReason" value="{{userKycDict.bankReason}}">
                                                </div>
                                              </div>
                                            </div>

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

                                    </div>

                                    <div class="tab-pane fade text-muted" id="test-tab-pane"
                                        role="tabpanel" aria-labelledby="test-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id)}}" enctype="multipart/form-data">
                                                <!-- Video Verification Form Fields -->
                                            <h6><b>Video</b></h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Video Verification</label>
                                                    {% if userKycDict.videoVerificationStatus == "Submitted" or userKycDict.videoVerificationStatus == "Approved" %}
                                                        {% if userKycDict.uploadVideo %}
                                                            <video width="400" height="300" controls>
                                                                <source src="{{ userKycDict.uploadVideo }}" type="video/mp4">
                                                            </video>
                                                        {% else %}
                                                          <input type="file" name="uploadVideo" accept="video/*">
                                                            <!-- You can provide an alternative message or leave it empty -->
                                                        {% endif %}
                                                    {% else %}
                                                      <input type="file" name="uploadVideo" accept="video/*">
                                                        <!-- You can provide an alternative message or leave it empty -->
                                                    {% endif %}
                                                </div>

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

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

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

                                            <div class="row">
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="videoVerificationReason">Video Verification Reason</label>
                                                  <input type="text" class="form-control" name="videoVerificationReason" id="videoVerificationReason" value="{{userKycDict.videoVerificationReason}}">
                                                </div>
                                              </div>
                                            </div>

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

                                    <div class="tab-pane fade text-muted" id="testing-tab-pane"
                                        role="tabpanel" aria-labelledby="testing-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.user_kyc_update', userKycId=userKycDict.id)}}" enctype="multipart/form-data">
                                            <div class="row">

                                                <div class="col-md-6">
                                                    <label>Agreement Document</label>
                                                    {% if userKycDict.agreementDocument %}
                                                    <button type="button" class="btn btn-primary" data-agreementDocument="{{ userKycDict.agreementDocument }}" id="showAgreementPdf">Show PDF</button>
                                                    {% endif %}
                                                      <!-- <img class="imagepopup" src="{{ userKycDict.agreementDocument }}" id="agreementDocument" alt="" border="3" height="150px" width="150px"> -->
                                                </div>

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

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

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

                                            <div class="modal-footer justify-content-between">
                                                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </div>
                                        </form>        
                                    </div>
                                </div>
                         
                              </div>
                            </div>
                          </div>
                        </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>
        <!--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");

var showCompanyRegDocPdf = document.getElementById("showCompanyRegDocPdf");
var showMoaDocPdf = document.getElementById("showMoaDocPdf");
var showAoaDocPdf = document.getElementById("showAoaDocPdf");
var companyPanDoc = document.getElementById("companyPanDoc");

panDocumentimg.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

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

showCompanyRegDocPdf.onclick = function(){
  pdfmodal.style.display = "block";
  pdffile.src = $(this).attr("data-companyRegistrationDoc")
  captionText.innerHTML = this.alt;
}

showMoaDocPdf.onclick = function(){
  pdfmodal.style.display = "block";
  pdffile.src = $(this).attr("data-moaDoc")
  captionText.innerHTML = this.alt;
}

showAoaDocPdf.onclick = function(){
  pdfmodal.style.display = "block";
  pdffile.src = $(this).attr("data-aoaDoc")
  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";
}
</script>

{% endblock %}