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

<style type="text/css">
  .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>

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

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

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


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

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

</style>

<style>

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

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Update Merchant Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </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 method="POST" action="{{url_for('user_managements.user_update', 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 }}" required>
                                              </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

                                            <div class="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>
                                            <!-- 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 method="POST" action="{{url_for('user_managements.user_update', 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.businessName }}" required>
                                                </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 }}" required>
                                                </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> -->
                                              <!-- Add more form fields as needed -->

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

                                              <div class="row">
                                                <div class="col-md-6">
                                                  <div class="form-group">
                                                    <label>Company Registration Document</label>
                                                    {% if userDict.companyRegistrationStatus == "Submitted" or userDict.companyRegistrationStatus == "Approved" %}
                                                      {% if userDict.companyRegistrationDoc %}
                                                        <button type="button" class="btn btn-primary" data-companyRegistrationDoc="{{ userDict.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 userDict.companyRegistrationStatus == "Submitted" %}
                                                      <option value="Submitted" selected>Submitted</option>
                                                      {% else %}
                                                      <option value="Submitted">Submitted</option>
                                                      {% endif %}

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

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

                                                      {% if userDict.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 userDict.moaStatus == "Submitted" or userDict.moaStatus == "Approved" %}
                                                      {% if userDict.moaDoc %}
                                                        <button type="button" class="btn btn-primary" data-moaDoc="{{ userDict.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 userDict.moaStatus == "Submitted" %}
                                                        <option value="Submitted" selected>Submitted</option>
                                                        {% else %}
                                                        <option value="Submitted">Submitted</option>
                                                        {% endif %}

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

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

                                                        {% if userDict.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 userDict.aoaStatus == "Submitted" or userDict.aoaStatus == "Approved" %}
                                                      {% if userDict.aoaDoc %}
                                                        <button type="button" class="btn btn-primary" data-aoaDoc="{{ userDict.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 userDict.aoaStatus == "Submitted" %}
                                                        <option value="Submitted" selected>Submitted</option>
                                                        {% else %}
                                                        <option value="Submitted">Submitted</option>
                                                        {% endif %}

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

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

                                                        {% if userDict.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 userDict.companyPanStatus == "Submitted" or userDict.companyPanStatus == "Approved" %}
                                                      {% if userDict.companyPanDoc %}
                                                        <img class="imagepopup" src="{{ userDict.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 userDict.companyPanStatus == "Submitted" %}
                                                        <option value="Submitted" selected>Submitted</option>
                                                        {% else %}
                                                        <option value="Submitted">Submitted</option>
                                                        {% endif %}

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

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

                                                        {% if userDict.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_update', 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>
                                                      {% if userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userDict.panNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="panNumber" name="panNumber" value="{{ userDict.panNumber }}" required>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <label>Document/</label>
                                                      {% if userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                        {% if userDict.panDocument %}
                                                          <img class="imagepopup" src="{{ userDict.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 userDict.panStatus == "Submitted" or userDict.panStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="panName" name="panName" value="{{ userDict.panName }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="panName" name="panName" value="{{ userDict.panName }}">
                                                      {% endif %}
                                                    </div>

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

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

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

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

                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="panReason">Pan Reason</label>
                                                        <input type="text" class="form-control" id="panReason" name="panReason" value="{{ userDict.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 userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                        <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userDict.aadharNumber }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="aadharNumber" name="aadharNumber" value="{{ userDict.aadharNumber }}" required>
                                                      {% endif %}
                                                    </div>

                                                    <div class="col-md-6">
                                                      <label>Aadhar Front Document</label>
                                                      {% if userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved" %}
                                                        {% if userDict.aadharDocument %}
                                                          <img  class="imagepopup" src="{{ userDict.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 userDict.aadharStatus == "Submitted" or userDict.aadharStatus == "Approved"%}
                                                        <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userDict.aadharName }}" readonly>
                                                      {% else %}
                                                        <input type="text" class="form-control" id="aadharName" name="aadharName" value="{{ userDict.aadharName }}">
                                                      {% endif %}
                                                    </div>

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

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

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

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

                                                    </div>

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

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

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

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

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

                                                          {% if userDict.bankStatus == "Approved" %}
                                                          <option value="Approved" selected>Approved</option>
                                                          {% else %}
                                                          <option value="Approved">Approved</option>
                                                          {% endif %}
                                                        </select>
                                                      </div>
                                                    </div>
                                                    
                                                    <div class="col-md-6">
                                                      <div class="form-group">
                                                        <label for="bankReason">Bank Reason</label>
                                                        <input type="text" class="form-control" name="bankReason" id="bankReason" value="{{userDict.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>
                                                  <!-- 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 method="POST" action="{{url_for('user_managements.user_update', 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.videoVerificationStatus == "Submitted" or userDict.videoVerificationStatus == "Approved"%}
                                                      {% if userDict.uploadVideo %}
                                                          <video width="400" height="300" controls>
                                                              <source src="{{ userDict.uploadVideo }}" type="video/mp4">
                                                          </video>
                                                      {% else %}
                                                        <input type="file" name="uploadVideo" accept="video/*">
                                                      {% endif %}
                                                    {% else %}
                                                        <input type="file" name="uploadVideo" accept="video/*">
                                                    {% endif %}
                                                </div>

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

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

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

                                            <div class="row">
                                              <div class="col-md-6">
                                                <div class="form-group">
                                                  <label for="videoVerificationReason">Video Verification Reason</label>
                                                  <input type="text" class="form-control" name="videoVerificationReason" id="videoVerificationReason" value="{{userDict.videoVerificationReason}}">
                                                </div>
                                              </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>
                                            <!-- 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 method="POST" action="{{url_for('user_managements.user_update', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label>Agreement Document</label>
                                                    {% if userDict.agreementDocument %}
                                                      <button type="button" class="btn btn-primary" data-agreementDocument="{{ userDict.agreementDocument }}" id="showAgreementPdf">Show PDF</button>
                                                    {% else %}
                                                      <input type="hidden" id="showAgreementPdf">
                                                    {% endif %}
                                                </div>

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

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

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

                                            <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 aadharDocumentimg = document.getElementById("aadharDocument");
var modalImg = document.getElementById("panDocumentImg");
var captionText = document.getElementById("caption");
var showAgreementPdf = document.getElementById("showAgreementPdf");
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;
}

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

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