{% extends 'super_admin_templates/base.html' %}
{% set path = "regions" %}
{% set subpath = "kyc_master" %}
{% 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; /* Set the color you want for the button text */
    cursor: pointer;
  }

  .btn-edit:hover {
    text-decoration: underline; /* Underline the text on hover (optional) */
  }
</style>



<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>KYC Master</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">KYC Master</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <center>
                {% if error %}
                <h2><b><center style="color:RED"> {{error}}</center></b></h2>
                {% endif %}
              </center>

              <div class="row">
          <div class="col-md-12">
            <div class="card card-primary card-tabs">
              <div class="card-header p-0 pt-1">
                <ul class="nav nav-tabs" id="custom-tabs-five-tab" role="tablist">
                  <li class="nav-item">
                    {% if redirectval == "Ekyc" %}
                    <a class="nav-link active" id="custom-tabs-five-overlay-tab" data-toggle="pill" href="#custom-tabs-five-overlay" role="tab" aria-controls="custom-tabs-five-overlay" aria-selected="true">Ekyc</a>
                    {% else %}
                    <a class="nav-link" id="custom-tabs-five-overlay-tab" data-toggle="pill" href="#custom-tabs-five-overlay" role="tab" aria-controls="custom-tabs-five-overlay" aria-selected="false">Ekyc</a>
                    {% endif %}
                  </li>
                  <li class="nav-item">
                    {% if redirectval == "Document" %}
                    <a class="nav-link active" id="custom-tabs-five-overlay-dark-tab" data-toggle="pill" 
                    href="#custom-tabs-five-overlay-dark" role="tab" aria-controls="custom-tabs-five-overlay-dark" aria-selected="true">Document</a>
                    {% else %}
                    <a class="nav-link" id="custom-tabs-five-overlay-dark-tab" data-toggle="pill" 
                    href="#custom-tabs-five-overlay-dark" role="tab" aria-controls="custom-tabs-five-overlay-dark" aria-selected="false">Document</a>
                    {% endif %}
                  </li>
                  <li class="nav-item">
                    {% if redirectval == "DocumentAttribute" %}
                    <a class="nav-link active" id="custom-tabs-five-normal-tab" data-toggle="pill" href="#custom-tabs-five-normal" role="tab" aria-controls="custom-tabs-five-normal" aria-selected="true">Document Attribute</a>
                    {% else %}
                    <a class="nav-link" id="custom-tabs-five-normal-tab" data-toggle="pill" href="#custom-tabs-five-normal" role="tab" aria-controls="custom-tabs-five-normal" aria-selected="false">Document Attribute</a>
                    {% endif %}
                  </li>
                  <li class="nav-item">
                    {% if redirectval == "KycGroup" %}
                    <a class="nav-link active" id="custom-tabs-cities-normal-tab" data-toggle="pill" href="#custom-tabs-cities-normal" role="tab" aria-controls="custom-tabs-cities-normal" aria-selected="true">KYC Group</a>
                    {% else %}
                    <a class="nav-link" id="custom-tabs-cities-normal-tab" data-toggle="pill" href="#custom-tabs-cities-normal" role="tab" aria-controls="custom-tabs-cities-normal" aria-selected="false">KYC Group</a>
                    {% endif %}
                  </li>
                  <li class="nav-item">
                    {% if redirectval == "KycGroupConfig" %}
                    <a class="nav-link active" id="custom-tabs-block-normal-tab" data-toggle="pill" href="#custom-tabs-block-normal" role="tab" aria-controls="custom-tabs-block-normal" aria-selected="true">KYC Group Config</a>
                    {% else %}
                    <a class="nav-link" id="custom-tabs-block-normal-tab" data-toggle="pill" href="#custom-tabs-block-normal" role="tab" aria-controls="custom-tabs-block-normal" aria-selected="false">KYC Group Config</a>
                    {% endif %}
                  </li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-five-tabContent">
                  {% if redirectval == "Ekyc" %}
                  <div class="tab-pane fade show active" id="custom-tabs-five-overlay" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-tab">
                    {% else %}
                    <div class="tab-pane fade" id="custom-tabs-five-overlay" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-tab">
                      {% endif %}
                    <div class="overlay-wrapper">
                      <form method="POST" action="{{ url_for('kyc_masters.kyc_masters_list')}}" enctype="multipart/form-data" > 
                          <input type="text" value="{{ekyc_search_element}}" name="ekyc_search_element"/>
                          <button type="submit">Search</button>
                      </form>
                          <button type="button" style="float:right;" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
                              Add New EKYC
                          </button>

                          <a href="{{ url_for('kyc_masters.ekyc_csv_list')}}" style='float:right'>Export CSV
                            <img src="{{ url_for('static',filename='images/csv-download.png')}}" alt="CSV download" width="25" height="25">
                          </a>

                          <div class="modal fade" id="modal-default">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h4 class="modal-title">Add New EKYC</h4>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">
                                  <form method="POST" action="{{url_for('kyc_masters.add_ekyc')}}" enctype="multipart/form-data">
                                      <!-- Add your form fields here -->
                                      <div class="form-group">
                                          <label for="name">EKYC Name*</label>
                                          <input type="text" class="form-control" id="name" name="name" placeholder="Enter ekyc Name" required>
                                      </div>

                                      <div class="form-group">
                                          <label for="code">Code*</label>
                                          <input type="text" class="form-control" id="code" name="code" placeholder="Enter code" required>
                                      </div>

                                      <div class="form-group">
                                        <label for="ekycType">Ekyc Type*</label>
                                        <select class="form-control" id="ekycType" name="ekycType">
                                          <option value="" disabled selected hidden>Select a Field Name</option>
                                          <option value="Name Based">Name Based</option>
                                          <option value="OTP Based">OTP Based</option>
                                        </select>
                                      </div>
                                      <!-- Add more form fields as needed -->

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

                      <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>EKYC Name</th>
                           <th>Code</th>
                           <th>Ekyc Type</th>
                           <th>Status</th>
                           <th>Edit</th>
                           <th>Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                        {% for each_ekyc in ekycList %}
                        <tr>
                          <td>{{loop.index}}</td>
                          <td>{{each_ekyc.name}}</td>
                          <td>{{each_ekyc.code}}</td>
                          <td>{{each_ekyc.ekycType}}</td>

                          <td><a href="{{ url_for('kyc_masters.update_ekyc_status', ekycId=each_ekyc.id) }}">{{each_ekyc.actionText}}</a></td>
                         
                          <td>
                              <button type="button" class="btn-edit" data-toggle="modal" data-target="#editRegionModal{{ loop.index }}"> <i class="fas fa-edit"></i></button>

                              <div class="modal fade" id="editRegionModal{{ loop.index }}" tabindex="-1"role="dialog" aria-labelledby="editRegionModalLabel"aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title"id="editRegionModalLabel">Edit EKYC</h5>
                                                <button type="button" class="close"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                        </div>
                                        <!-- Add your edit form fields here -->
                                        <div class="modal-body">
                                            <form method="POST"action="{{url_for('kyc_masters.update_ekyc',ekycId=each_ekyc.id)}}"enctype="multipart/form-data">
                                                <div class="form-group">
                                                    <label for="name">EKYC Name*</label>
                                                    <input type="text" class="form-control"id="name"name="name" value="{{each_ekyc.name}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="code">Code*</label>
                                                        <input type="text" class="form-control"id="code"name="code" value="{{each_ekyc.code}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="ekycType">EKYC Type*</label>
                                                    <select class="form-control" id="ekycType" name="ekycType" required>
                                                      {% if each_ekyc.ekycType == "Name Based" %}
                                                      <option value="Name Based" selected>Name Based</option>
                                                      {% else %}
                                                      <option value="Name Based">Name Based</option>
                                                      {% endif %}

                                                      {% if each_ekyc.ekycType == "OTP Based" %}
                                                      <option value="OTP Based" selected>OTP Based</option>
                                                      {% else %}
                                                      <option value="OTP Based">OTP Based</option>
                                                      {% endif %}
                                                    </select>
                                                </div>
                                                        <!-- Add more edit form fields as needed -->

                                                <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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </td>

                          <td>
                              <a href="#" onclick="confirmDelete('{{ url_for('kyc_masters.delete_ekyc', ekycId=each_ekyc.id) }}')">
                                <i style='font-size:16px' class='far'>&#xf2ed;</i>
                              </a>
                          </td>


                        {% endfor %}

                          </tbody>
                          {% with messages = get_flashed_messages() %}
                          {% if messages %}
                          <ul class=flashes>
                            {% for message in messages %}
                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                            {% endfor %}
                          </ul>
                          {% endif %}
                          {% endwith %}
                        </table>
                    </div>
                  </div>



                  {% if redirectval == "Document" %}
                  <div class="tab-pane fade show active" id="custom-tabs-five-overlay-dark" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-dark-tab">
                    {% else %}
                    <div class="tab-pane fade" id="custom-tabs-five-overlay-dark" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-dark-tab">
                      {% endif %}
                    <div class="overlay-wrapper">

                      <form method="POST" action="{{ url_for('kyc_masters.kyc_masters_list')}}" enctype="multipart/form-data" > 
                          <input type="text" value="{{document_search_element}}" name="document_search_element"/>
                          <button type="submit">Search</button>
                      </form>
                      <button type="button" style="float:right;" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-country">
                          Add Document
                      </button>

                      <a href="{{ url_for('kyc_masters.document_csv_list')}}" style='float:right'>Export CSV
                            <img src="{{ url_for('static',filename='images/csv-download.png')}}" alt="CSV download" width="25" height="25">
                      </a>

                      <div class="modal fade" id="modal-add-country">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Add Document</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form method="POST" action="{{url_for('kyc_masters.add_document')}}" enctype="multipart/form-data">
                                  <!-- Add your form fields here -->
                                  <div class="form-group">
                                      <label for="name">Document Name*</label>
                                      <input type="text" class="form-control" id="name" name="name" placeholder="Enter document Name" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="priority">Priority*</label>
                                      <input type="number" class="form-control" id="priority" name="priority" required>
                                  </div>

                                  <div class="horizontal-checkboxes form-check">
                                    <input type="checkbox" class="form-check-input" name="hasExpiry">
                                    <label class="form-check-label" for="hasExpiry">hasExpiry</label>
                                  </div>

                                  <div class="horizontal-checkboxes form-check">
                                    <input type="checkbox" class="form-check-input" name="isKYC">
                                    <label class="form-check-label" for="isKYC">isKYC</label>
                                  </div>

                                  <div class="horizontal-checkboxes form-check">
                                    <input type="checkbox" class="form-check-input" name="isMandatory">
                                    <label class="form-check-label" for="isMandatory">isMandatory</label>
                                  </div>
                                  <!-- Add more form fields as needed -->

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

                      <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>Document Name</th>
                           <th>Priority</th>
                           <th>Has Expiry</th>
                           <th>Is KYC</th>
                           <th>Is Mandatory</th>
                           <th>Status</th>
                           <th>Edit</th>
                           <th>Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                        {% for each_document in documentsList %}
                        <tr>
                          <td>{{loop.index}}</td>
                          <td>{{each_document.name}}</td>
                          <td>{{each_document.priority}}</td>
                          <td>
                            {% if each_document.hasExpiry == True %}
                              &#10003; <!-- Checkmark symbol -->
                            {% else %}
                              &#10007; <!-- Cross mark symbol -->
                            {% endif %}
                          </td>

                          <td>
                            {% if each_document.isKYC == True %}
                              &#10003; <!-- Checkmark symbol -->
                            {% else %}
                              &#10007; <!-- Cross mark symbol -->
                            {% endif %}
                          </td>

                          <td>
                            {% if each_document.isMandatory == True %}
                              &#10003; <!-- Checkmark symbol -->
                            {% else %}
                              &#10007; <!-- Cross mark symbol -->
                            {% endif %}
                          </td>

                          <td><a href="{{ url_for('kyc_masters.update_document_status', documentId=each_document.id) }}">{{each_document.actionText}}</a></td>
                         
                          <td>
                              <button type="button" class="btn-edit" data-toggle="modal" data-target="#editCountryModal{{ loop.index }}"> <i class="fas fa-edit"></i></button>

                              <div class="modal fade" id="editCountryModal{{ loop.index }}" tabindex="-1"role="dialog" aria-labelledby="editCountryModalLabel"aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title"id="editCountryModalLabel">Edit Document</h5>
                                                <button type="button" class="close"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                        </div>
                                        <!-- Add your edit form fields here -->
                                        <div class="modal-body">
                                            <form method="POST"action="{{url_for('kyc_masters.update_document',documentId=each_document.id)}}"enctype="multipart/form-data">
                                                <div class="form-group">
                                                    <label for="name">Document Name*</label>
                                                    <input type="text" class="form-control"id="name"name="name" value="{{each_document.name}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="priority">Priority*</label>
                                                    <input type="text" class="form-control"id="priority"name="priority" value="{{each_document.priority}}" required>
                                                </div>

                                                <div class="horizontal-checkboxes form-check">
                                                  {% if each_document.hasExpiry == True %}
                                                      <input type="checkbox" class="form-check-input" name="hasExpiry" checked>
                                                  {% else %}
                                                      <input type="checkbox" class="form-check-input" name="hasExpiry">
                                                  {% endif %}
                                                  <label class="form-check-label" for="hasExpiry">hasExpiry</label>
                                                </div>

                                                <div class="horizontal-checkboxes form-check">
                                                  {% if each_document.isKYC == True %}
                                                      <input type="checkbox" class="form-check-input" name="isKYC" checked>
                                                  {% else %}
                                                      <input type="checkbox" class="form-check-input" name="isKYC">
                                                  {% endif %}
                                                  <label class="form-check-label" for="isKYC">isKYC</label>
                                                </div>

                                                <div class="horizontal-checkboxes form-check">
                                                  {% if each_document.isMandatory == True %}
                                                      <input type="checkbox" class="form-check-input" name="isMandatory" checked>
                                                  {% else %}
                                                      <input type="checkbox" class="form-check-input" name="isMandatory">
                                                  {% endif %}
                                                  <label class="form-check-label" for="isMandatory">isMandatory</label>
                                                </div>
                                                <!-- Add more edit form fields as needed -->

                                                <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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </td>

                          <td>
                              <a href="#" onclick="confirmDelete('{{ url_for('kyc_masters.delete_document', documentId=each_document.id) }}')">
                                <i style='font-size:16px' class='far'>&#xf2ed;</i>
                              </a>
                          </td>


                        {% endfor %}

                          </tbody>
                          {% with messages = get_flashed_messages() %}
                          {% if messages %}
                          <ul class=flashes>
                            {% for message in messages %}
                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                            {% endfor %}
                          </ul>
                          {% endif %}
                          {% endwith %}
                        </table>

                  </div>
                  </div>

                  {% if redirectval == "DocumentAttribute" %}
                  <div class="tab-pane fade show active" id="custom-tabs-five-normal" role="tabpanel" aria-labelledby="custom-tabs-five-normal-tab">
                    {% else %}
                    <div class="tab-pane fade" id="custom-tabs-five-normal" role="tabpanel" aria-labelledby="custom-tabs-five-normal-tab">

                    {% endif %}
                    <div class="overlay-wrapper">

                      <form method="POST" action="{{ url_for('kyc_masters.kyc_masters_list')}}" enctype="multipart/form-data" > 
                          <input type="text" value="{{attribute_search_element}}" name="attribute_search_element"/>
                          <button type="submit">Search</button>
                      </form>
                      <button type="button" style="float:right;" class="btn btn-primary" data-toggle="modal" data-target="#modal-state-country">
                          Add New Document Attribute
                      </button>

                      <a href="{{ url_for('kyc_masters.attributes_csv_list')}}" style='float:right'>Export CSV
                            <img src="{{ url_for('static',filename='images/csv-download.png')}}" alt="CSV download" width="25" height="25">
                      </a>

                      <div class="modal fade" id="modal-state-country">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Add New Document Attribute</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form method="POST" action="{{url_for('kyc_masters.add_document_attribute')}}" enctype="multipart/form-data">
                                  <!-- Add your form fields here -->
                                  <div class="form-group">
                                      <label for="attributeName">Attribute Name*</label>
                                      <input type="text" class="form-control" id="attributeName" name="attributeName" placeholder="Enter Attribute Name" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="documentId">Document*</label>
                                      <select class="form-control" name="documentId" id="documentId" required>
                                        {% for each_document in documentsList %}
                                          <option value="{{each_document.id}}">{{each_document.name}}</option>
                                        {% endfor %}
                                      </select>                                        
                                  </div>

                                  <div class="form-group">
                                    <label for="fieldType">Field Type*</label>
                                    <select class="form-control" id="fieldType" name="fieldType">
                                      <option value="" disabled selected hidden>Select a Field Name</option>
                                      <option value="text">Text</option>
                                      <option value="file">File</option>
                                      <option value="radio">Radio</option>
                                      <option value="dropDown">Drop Down</option>
                                      <option value="checkBox">Check Box</option>
                                    </select>
                                  </div>

                                  <div class="form-group">
                                    <label for="supportedFileType">Supported Field Type*</label>
                                    <select class="form-control" id="supportedFileType" multiple name="supportedFileType">
                                      <option value="" disabled selected hidden>Select a Field Name</option>
                                      <option value="txt">txt</option>
                                      <option value="pdf">pdf</option>
                                      <option value="png">png</option>
                                      <option value="jpg">jpg</option>
                                      <option value="jpeg">jpeg</option>
                                    </select>
                                  </div>

                                  <div class="form-group">
                                      <label for="regex">Regex</label>
                                      <input type="text" class="form-control" id="regex" name="regex" placeholder="Enter regex">
                                  </div>

                                  <div class="form-group">
                                      <label for="maxSize">Max Size</label>
                                      <input type="text" class="form-control" id="maxSize" name="maxSize" placeholder="Enter Max Size">
                                  </div>

                                  <div class="form-group">
                                      <label for="minWidth">Min-Widith</label>
                                      <input type="text" class="form-control" id="minWidth" name="minWidth" placeholder="Enter Min Width">
                                  </div>

                                  <div class="form-group">
                                      <label for="maxWidth">Max-Width</label>
                                      <input type="text" class="form-control" id="maxWidth" name="maxWidth" placeholder="Enter Max Width">
                                  </div>

                                  <div class="form-group">
                                      <label for="label">Label*</label>
                                      <input type="text" class="form-control" id="label" name="label" placeholder="Enter Label" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="validationMessage">Validation Message</label>
                                      <input type="text" class="form-control" id="validationMessage" name="validationMessage" placeholder="Enter Validation Message">
                                  </div>

                                  <div class="form-group">
                                      <label for="priority">Priority</label>
                                      <input type="number" class="form-control" id="priority" name="priority" placeholder="Enter priority">
                                  </div>

                                  <div class="horizontal-checkboxes form-check">
                                    <input type="checkbox" class="form-check-input" name="isKYC">
                                    <label class="form-check-label" for="isKYC">Is KYC</label>
                                  </div>
                                  <!-- Add more form fields as needed -->

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

                      <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>Attribute Name</th>
                           <th>Document Name</th>
                           <th>Field Type</th>
                           <th>Is EKYC</th>
                           <th>EKYC Code</th>
                           <th>Label</th>
                           <th>Max Size</th>
                           <th>Max Width</th>
                           <th>Priority</th>
                           <th>Min Width</th>
                           <th>Web Regex</th>
                           <th>Mobile Regex</th>
                           <th>Status</th>
                           <th>Edit</th>
                           <th>Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                        {% for each_attribute in attributesList %}
                        <tr>
                          <td>{{loop.index}}</td>
                          <td>{{each_attribute.attributeName}}</td>
                          <td>{{each_attribute.documentName}}</td>
                          <td>{{each_attribute.fieldType}}</td>
                          <td>
                            {% if each_attribute.isKYC == True %}
                              &#10003; <!-- Checkmark symbol -->
                            {% else %}
                              &#10007; <!-- Cross mark symbol -->
                            {% endif %}
                          </td>
                          <td>{{each_attribute.ekycName}}</td>
                          <td>{{each_attribute.label}}</td>
                          <td>{{each_attribute.maxSize}}</td>
                          <td>{{each_attribute.maxWidth}}</td>
                          <td>{{each_attribute.priority}}</td>
                          <td>{{each_attribute.minWidth}}</td>
                          <td>{{each_attribute.webRegex}}</td>
                          <td>{{each_attribute.mobileRegex}}</td>

                          <td><a href="{{ url_for('kyc_masters.update_attribute_status', attributeId=each_attribute.id) }}">{{each_attribute.actionText}}</a></td>
                         
                          <td>
                              <button type="button" class="btn-edit" data-toggle="modal" data-target="#editStateModal{{ loop.index }}"> <i class="fas fa-edit"></i></button>

                              <div class="modal fade" id="editStateModal{{ loop.index }}" tabindex="-1"role="dialog" aria-labelledby="editStateModalLabel"aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title"id="editStateModalLabel">Edit Attribute</h5>
                                                <button type="button" class="close"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                        </div>
                                        <!-- Add your edit form fields here -->
                                        <div class="modal-body">
                                            <form method="POST"action="{{url_for('kyc_masters.update_attribute',attributeId=each_attribute.id)}}"enctype="multipart/form-data">
                                                <div class="form-group">
                                                    <label for="attributeName">Attribute Name*</label>
                                                    <input type="text" class="form-control"id="attributeName"name="attributeName" value="{{each_attribute.attributeName}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="documentId">Document*</label>
                                                    <select class="form-control" name="documentId" id="documentId">
                                                      {%for each_document in documentsList%}
                                                        {%if each_document.id == each_attribute.documentId%}
                                                          <option selected value="{{each_document.id}}">{{each_document.name}}</option>
                                                        {%else%}
                                                        <option value="{{each_document.id}}">{{each_document.name}}</option>
                                                        {%endif%}
                                                      {%endfor%}
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label for="fieldType">Field Type*</label>
                                                    <select class="form-control" id="fieldType" name="fieldType" required>
                                                      {% if each_attribute.fieldType == "text" %}
                                                      <option value="text" selected>Text</option>
                                                      {% else %}
                                                      <option value="text">Text</option>
                                                      {% endif %}

                                                      {% if each_attribute.fieldType == "file" %}
                                                      <option value="file" selected>File</option>
                                                      {% else %}
                                                      <option value="file">File</option>
                                                      {% endif %}

                                                      {% if each_attribute.fieldType == "radio" %}
                                                      <option value="radio" selected>Radio</option>
                                                      {% else %}
                                                      <option value="radio">Radio</option>
                                                      {% endif %}

                                                      {% if each_attribute.fieldType == "dropDown" %}
                                                      <option value="dropDown" selected>Drop Down</option>
                                                      {% else %}
                                                      <option value="dropDown">Drop Down</option>
                                                      {% endif %}

                                                      {% if each_attribute.fieldType == "checkBox" %}
                                                      <option value="checkBox" selected>Check Box</option>
                                                      {% else %}
                                                      <option value="checkBox">Check Box</option>
                                                      {% endif %}
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                  <label for="supportedFileType">Supported Field Type*</label>
                                                  <select class="form-control" id="supportedFileType" multiple name="supportedFileType">
                                                    <option value="" disabled selected hidden>Select a Field Name</option>
                                                    <option value="txt">txt</option>
                                                    <option value="pdf">pdf</option>
                                                    <option value="png">png</option>
                                                    <option value="jpg">jpg</option>
                                                    <option value="jpeg">jpeg</option>
                                                  </select>
                                                </div>

                                                <div class="form-group">
                                                    <label for="regex">Regex</label>
                                                    <input type="text" class="form-control"id="regex"name="regex" value="{{each_attribute.regex}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="maxSize">Max Size</label>
                                                    <input type="text" class="form-control"id="maxSize"name="maxSize" value="{{each_attribute.maxSize}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="minWidth">Min-Widith</label>
                                                    <input type="text" class="form-control"id="minWidth"name="minWidth" value="{{each_attribute.minWidth}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="maxWidth">Max-Width</label>
                                                    <input type="text" class="form-control"id="maxWidth"name="maxWidth" value="{{each_attribute.maxWidth}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="label">Label*</label>
                                                    <input type="text" class="form-control"id="label"name="label" value="{{each_attribute.label}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="validationMessage">Validation Message</label>
                                                    <input type="text" class="form-control"id="validationMessage"name="validationMessage" value="{{each_attribute.validationMessage}}">
                                                </div>

                                                <div class="form-group">
                                                    <label for="priority">Priority</label>
                                                    <input type="number" class="form-control"id="priority"name="priority" value="{{each_attribute.priority}}">
                                                </div>

                                                <div class="horizontal-checkboxes form-check">
                                                  {% if each_attribute.isKYC == True %}
                                                      <input type="checkbox" class="form-check-input" name="isKYC" checked>
                                                  {% else %}
                                                      <input type="checkbox" class="form-check-input" name="isKYC">
                                                  {% endif %}
                                                  <label class="form-check-label" for="isKYC">Is KYC</label>
                                                </div>
                                                <!-- Add more edit form fields as needed -->

                                                <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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </td>

                          <td>
                              <a href="#" onclick="confirmDelete('{{ url_for('kyc_masters.delete_attribute', attributeId=each_attribute.id) }}')">
                                <i style='font-size:16px' class='far'>&#xf2ed;</i>
                              </a>
                          </td>


                        {% endfor %}

                          </tbody>
                          {% with messages = get_flashed_messages() %}
                          {% if messages %}
                          <ul class=flashes>
                            {% for message in messages %}
                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                            {% endfor %}
                          </ul>
                          {% endif %}
                          {% endwith %}
                        </table>
                  </div>
                  </div>

                  {% if redirectval == "KycGroup" %}
                  <div class="tab-pane fade show active" id="custom-tabs-cities-normal" role="tabpanel" aria-labelledby="custom-tabs-cities-normal-tab">
                      {% else %}
                    <div class="tab-pane fade" id="custom-tabs-cities-normal" role="tabpanel" aria-labelledby="custom-tabs-cities-normal-tab">
                      {% endif %}
                    <div class="overlay-wrapper">
                      <form method="POST" action="{{ url_for('kyc_masters.kyc_masters_list')}}" enctype="multipart/form-data" > 
                          <input type="text" value="{{group_search_element}}" name="group_search_element"/>
                          <button type="submit">Search</button>
                      </form>
                      <button type="button" style="float:right;" class="btn btn-primary" data-toggle="modal" data-target="#modal-city">
                          Add New Kyc Group
                      </button>

                      <a href="{{ url_for('kyc_masters.groups_csv_list')}}" style='float:right'>Export CSV
                            <img src="{{ url_for('static',filename='images/csv-download.png')}}" alt="CSV download" width="25" height="25">
                      </a>

                      <div class="modal fade" id="modal-city">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Add New Kyc Group</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form method="POST" action="{{url_for('kyc_masters.add_kyc_group')}}" enctype="multipart/form-data">
                                  <!-- Add your form fields here -->
                                  <div class="form-group">
                                      <label for="name">KYC Group Name*</label>
                                      <input type="text" class="form-control" id="name" name="name" placeholder="Enter Group Name" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="code">Code*</label>
                                      <input type="text" class="form-control" id="code" name="code" placeholder="Enter Code" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="priority">Priority*</label>
                                      <input type="number" class="form-control" id="priority" name="priority" placeholder="Enter Priority" required>
                                  </div>

                                  <div class="form-group">
                                      <label for="description">Description*</label>
                                      <input type="text" class="form-control" id="description" name="description" placeholder="Enter Description" required>
                                  </div>

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

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

                      <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>KYC Group Name</th>
                           <th>Description</th>
                           <th>Code</th>
                           <th>Priority</th>
                           <th>Status</th>
                           <th>Edit</th>
                           <th>Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                        {% for each_group in groupsList %}
                        <tr>
                          <td>{{loop.index}}</td>
                          <td>{{each_group.name}}</td>
                          <td>{{each_group.description}}</td>
                          <td>{{each_group.code}}</td>
                          <td>{{each_group.priority}}</td>

                          <td><a href="{{ url_for('kyc_masters.update_group_status', groupId=each_group.id) }}">{{each_group.actionText}}</a></td>
                         
                          <td>
                              <button type="button" class="btn-edit" data-toggle="modal" data-target="#editCityModal{{ loop.index }}"> <i class="fas fa-edit"></i></button>

                              <div class="modal fade" id="editCityModal{{ loop.index }}" tabindex="-1"role="dialog" aria-labelledby="editCityModalLabel"aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title"id="editCityModal">Edit Kyc Group</h5>
                                                <button type="button" class="close"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                        </div>
                                        <!-- Add your edit form fields here -->
                                        <div class="modal-body">
                                            <form method="POST"action="{{url_for('kyc_masters.update_kyc_group',groupId=each_group.id)}}"enctype="multipart/form-data">
                                                <div class="form-group">
                                                    <label for="name">Group Name*</label>
                                                    <input type="text" class="form-control"id="name"name="name" value="{{each_group.name}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="code">Code*</label>
                                                    <input type="text" class="form-control"id="code"name="code" value="{{each_group.code}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="description">Description*</label>
                                                    <input type="text" class="form-control"id="description"name="description" value="{{each_group.description}}" required>
                                                </div>

                                                <div class="form-group">
                                                    <label for="priority">Priority*</label>
                                                    <input type="number" class="form-control"id="priority"name="priority" value="{{each_group.priority}}" required>
                                                </div>
                                                <!-- Add more edit form fields as needed -->

                                                <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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </td>

                          <td>
                              <a href="#" onclick="confirmDelete('{{ url_for('kyc_masters.delete_kyc_group', cityId=each_group.id) }}')">
                                <i style='font-size:16px' class='far'>&#xf2ed;</i>
                              </a>
                          </td>


                        {% endfor %}

                          </tbody>
                          {% with messages = get_flashed_messages() %}
                          {% if messages %}
                          <ul class=flashes>
                            {% for message in messages %}
                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                            {% endfor %}
                          </ul>
                          {% endif %}
                          {% endwith %}
                        </table>
                  </div>
                  </div>

                  {% if redirectval == "KycGroupConfig" %}
                  <div class="tab-pane fade show active" id="custom-tabs-block-normal" role="tabpanel" aria-labelledby="custom-tabs-block-normal-tab">
                    {% else %}
                    <div class="tab-pane fade" id="custom-tabs-block-normal" role="tabpanel" aria-labelledby="custom-tabs-block-normal-tab">
                      {% endif %}
                    <div class="overlay-wrapper">
                      <form method="POST" action="{{ url_for('kyc_masters.kyc_masters_list')}}" enctype="multipart/form-data" > 
                          <input type="text" value="{{config_search_element}}" name="config_search_element"/>
                          <button type="submit">Search</button>
                      </form>
                      <button type="button" style="float:right;" class="btn btn-primary" data-toggle="modal" data-target="#modal-block">
                          Add New KYC Group Config
                      </button>

                      <a href="{{ url_for('kyc_masters.config_csv_list')}}" style='float:right'>Export CSV
                            <img src="{{ url_for('static',filename='images/csv-download.png')}}" alt="CSV download" width="25" height="25">
                      </a>

                      <div class="modal fade" id="modal-block">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h4 class="modal-title">Add New KYC Group Config</h4>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <form method="POST" action="{{url_for('kyc_masters.add_kyc_group_config')}}" enctype="multipart/form-data">
                                  <!-- Add your form fields here -->
                                  <div class="form-group">
                                      <label for="groupId">KYC Group*</label>
                                      <select class="form-control" name="groupId" id="groupId" required>
                                        {% for each_group in groupsList %}
                                          <option value="{{each_group.id}}">{{each_group.name}}</option>
                                        {% endfor %}
                                      </select>                                        
                                  </div>

                                  <div class="form-group">
                                      <label for="documentId">Document*</label>
                                      <select class="form-control" name="documentId" id="documentId" required>
                                        {% for each_document in documentsList %}
                                          <option value="{{each_document.id}}">{{each_document.name}}</option>
                                        {% endfor %}
                                      </select>                                        
                                  </div>

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

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

                      <table id="example4" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                          <tr>
                           <th>S.No</th>
                           <th>Document Name</th>
                           <th>Document Group Name</th>
                           <th>Status</th>
                           <th>Edit</th>
                           <th>Delete</th>
                         </tr>
                       </thead>
                       <tbody>
                        {% for each_config in configsList %}
                        <tr>
                          <td>{{loop.index}}</td>
                          <td>{{each_config.documentName}}</td>
                          <td>{{each_config.groupName}}</td>

                          <td><a href="{{ url_for('kyc_masters.update_config_status', configId=each_config.id) }}">{{each_config.actionText}}</a></td>
                         
                          <td>
                              <button type="button" class="btn-edit" data-toggle="modal" data-target="#editBlockModal{{ loop.index }}"> <i class="fas fa-edit"></i></button>

                              <div class="modal fade" id="editBlockModal{{ loop.index }}" tabindex="-1"role="dialog" aria-labelledby="editBlockModalLabel"aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title"id="editBlockModalLabel">Edit KYC Group Config</h5>
                                                <button type="button" class="close"data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                        </div>
                                        <!-- Add your edit form fields here -->
                                        <div class="modal-body">
                                            <form method="POST"action="{{url_for('kyc_masters.update_config',configId=each_config.id)}}"enctype="multipart/form-data">
                                                <label for="documentId">Document*</label>
                                                <select class="form-control" name="documentId" id="documentId">
                                                {%for each_document in documentsList%}
                                                {%if each_document.id == each_config.documentId%}
                                                <option selected value="{{each_config.documentId}}">{{each_config.documentId.name}}</option>
                                                {%else%}
                                                <option value="{{each_document.id}}">{{each_document.name}}</option>
                                                {%endif%}
                                                {%endfor%}
                                                </select>

                                                <label for="groupId">KYC Group*</label>
                                                <select class="form-control" name="groupId" id="groupId">
                                                {%for each_group in groupsList%}
                                                {%if each_group.id == each_config.groupId%}
                                                <option selected value="{{each_config.groupId}}">{{each_config.groupId.name}}</option>
                                                {%else%}
                                                <option value="{{each_group.id}}">{{each_group.name}}</option>
                                                {%endif%}
                                                {%endfor%}
                                                </select>
                                                <!-- Add more edit form fields as needed -->

                                                <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">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          </td>

                          <td>
                              <a href="#" onclick="confirmDelete('{{ url_for('kyc_masters.delete_config', configId=each_config.id) }}')">
                                <i style='font-size:16px' class='far'>&#xf2ed;</i>
                              </a>
                          </td>


                        {% endfor %}

                          </tbody>
                          {% with messages = get_flashed_messages() %}
                          {% if messages %}
                          <ul class=flashes>
                            {% for message in messages %}
                            <h2><b><center style="color:green">{{ message }}</center></b></h2>
                            {% endfor %}
                          </ul>
                          {% endif %}
                          {% endwith %}
                        </table>
                  </div>
                  </div>





                </div>
              </div>
              <!-- /.card -->
            </div>
          </div>
        </div>
        </div>
              
              <!-- /.card-body -->
            </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script>
      function Deactivate() {
        alert("Do you want to deactivate this role?");
      }
    </script>
    <script>
      function Activate() {
        alert("Do you want to activate this role?");
      }
    </script>
    <!-- Add the following JavaScript code -->
    <script>
        function confirmDelete(url) {
            if (confirm("Are you sure want to delete?")) {
                window.location.href = url;
            }
        }
    </script>

    <script>
      $(function () {
   var activeTab = $('[href=' + location.hash + ']');
   activeTab && activeTab.tab('show');alert(activeTab);
});
    </script>

    {%endblock%}