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

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

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

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


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

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

.imagepopup:hover {opacity: 0.7;}


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

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

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

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

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

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

</style>

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Merchant Management</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('user_managements.manage_users_list') }}">Merchants List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            View Merchant Details
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                        <div class="table-responsive">
                          <div class="row">
                            <div class="col-md-12">
                              <div class="card card-primary card-tabs">
                                <div class="card-header p-0 pt-1">
                                  <div class="card-body">
                                <ul class="nav nav-tabs justify-content-center mb-5 tab-style-3" id="myTab2"
                                    role="tablist">
                                    <li class="nav-item me-0" role="presentation">
                                        <button class="nav-link 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.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <!-- Add your form fields here -->
                                            <div class="row">
                                              <div class="col-md-6">
                                                <label for="fullName">Full Name</label>
                                                <input type="text" class="form-control" id="fullName" name="fullName" value="{{ userDict.fullName }}" readonly>
                                              </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

                                            <!-- Add more form fields as needed -->

                                          </form>

                                    </div>
                                    <div class="tab-pane fade text-muted" id="profile-tab-pane"
                                        role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                            <!-- Add your form fields here -->
                                              <div class="row">
                                                <div class="col-md-6">
                                                  <label for="businessName">Firm/Shop Name</label>
                                                  <input type="text" class="form-control" id="businessName" name="businessName" value="{{ userDict.get('businessName') }}" readonly>
                                                </div>

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

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

                                              <div class="row">
                                                <div class="col-md-6">
                                                  <div class="form-group">
                                                    <label>Company Registration Document</label>
                                                    {% 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 %}
                                                  </div>
                                                </div>

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

                                                <div class="col-md-6">
                                                  <div class="form-group">
                                                    <label>MOA Document</label>
                                                    {% 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 %}
                                                  </div>
                                                </div>

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


                                                <div class="col-md-6">
                                                  <div class="form-group">
                                                    <label>AOA Document</label>
                                                    {% 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 %}
                                                  </div>
                                                </div>

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

                                                  <div class="col-md-6">
                                                    <label>Company Pan Document</label>
                                                      {% if userDict.companyPanDoc %}
                                                        <img class="imagepopup" src="{{ userDict.companyPanDoc }}" id="companyPanDoc" alt="" border="3" height="150px" width="150px">
                                                      {% else %}
                                                        <input type="hidden" id="companyPanDoc">
                                                      {% endif %}
                                                  </div>

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

                                              </div>
                                              <!-- Add more form fields as needed -->
                                        </form>        
                                    </div>
                                    <div class="tab-pane fade text-muted" id="contact-tab-pane"
                                        role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                                <!-- Add your form fields here -->

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

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

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

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

                                              

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

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

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

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

                                              </div>

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

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

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

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

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

                                              </div>

                                              <!-- Add more form fields as needed -->

                                            </form>   

                                    </div>

                                    <div class="tab-pane fade text-muted" id="test-tab-pane"
                                        role="tabpanel" aria-labelledby="test-tab" tabindex="0">
                                        <form method="POST" action="{{url_for('user_managements.single_view_user', userId=userDict.id)}}" enctype="multipart/form-data">
                                              <!-- Add your form fields here -->
                                              <h6><b>Video</b></h6>
                                              <div class="row">
                                                  <div class="col-md-6">
                                                      <label>Video Verification</label>
                                                      {% if userDict.uploadVideo %}
                                                          <video width="400" height="300" controls>
                                                              <source src="{{ userDict.uploadVideo }}" type="video/mp4">
                                                          </video>
                                                      {% else %}
                                                          <!-- You can provide an alternative message or leave it empty -->
                                                      {% endif %}
                                                  </div>
                                              </div>
                                              <div class="row">
                                                <div class="col-md-6">
                                                  <label for="videoVerificationStatus">Video Verification Status</label>
                                                  <input type="text" class="form-control" id="videoVerificationStatus" name="videoVerificationStatus" value="{{ userDict.videoVerificationStatus }}" readonly>
                                                </div>
                                              </div>

                                              <!-- Add more form fields as needed -->

                                            </form> 
                                    </div>

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

                                            <div class="col-md-6">
                                              <label for="agreementVerificationStatus">Agreement Verification Status</label>
                                              <input type="text" class="form-control" id="agreementVerificationStatus" name="agreementVerificationStatus" value="{{ userDict.agreementVerificationStatus }}" readonly>
                                            </div>
                                        </div>
                                    </form>      
                                    </div>
                                     <div id="myPanDocument" class="modal">
                                    <span class="close">&times;</span>
                                    <img class="modal-content" id="panDocumentImg">
                                    <div id="caption"></div>
                                  </div>

                                  <div id="mypdfModel" class="modal">
                                    <span class="close">&times;</span>
                                    <embed class="modal-content" id="pdffile" width="800px" height="700px" />
                                  </div>

                                </div>
                                
                               
                                </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

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


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

// Get the image and insert it inside the modal - use its "alt" text as a caption
var panDocumentimg = document.getElementById("panDocument");
var showAgreementPdf = document.getElementById("showAgreementPdf");
var aadharDocumentimg = document.getElementById("aadharDocument");
var modalImg = document.getElementById("panDocumentImg");
var captionText = document.getElementById("caption");
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;
}

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

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

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