{% extends 'super_admin_templates/base.html' %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

 <script>
    /* function getServices(transactionAPIId,variablev,selectedid){
      if(transactionAPIId != "" && transactionAPIId != "undefined"){
        var htmldata="<option value=''>Select Service</option>";
     $.ajax({
        url: "http://18.188.39.218/api/super_admin/transaction_based_services_list",//{{ url_for('admin.dashboard') }}
        data: { "transactionId": transactionAPIId },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.servicesList, function( key, value ) {
            if(selectedid!="" && selectedid==value.id){
            htmldata=htmldata+"<option selected value='"+value.id+"'>"+value.serviceName+"</option>";
          }else{
           htmldata=htmldata+"<option value='"+value.id+"'>"+value.serviceName+"</option>"; 
          }
              });
         $('#serviceId'+variablev).html(htmldata);
          }else{
            $('#serviceId'+variablev).html(htmldata);
          }
         
        }
    });
      }else{
        $('#serviceId'+variablev).html("<option value=''>Select Service</option>");
        alert('Please select Transaction api.');
      }
    
}*/

    
     function getOperators(operatorId,variablev,selectedid){
      if(operatorId != "" && operatorId != "undefined"){
        var htmldata="<option value=''>Select Operator Parameter</option>";
        var csrfToken = $('input[name="csrf_token"]').val()
     $.ajax({
        url: "{{ url_for('service_configurations.operator_based_operator_parameters_list') }}",//{{ url_for('admin.dashboard') }}
        data: { "operatorId": operatorId ,"csrf_token": csrfToken},
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.operatorParametersList, function( key, value ) {
            if(selectedid!="" && selectedid==value.id){
              htmldata=htmldata+"<option selected value='"+value.id+"'>"+value.displayName+"</option>";
            }else{
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.displayName+"</option>";
            }
              });
         $('#operatorParameterId'+variablev).html(htmldata);
          }else{
            $('#operatorParameterId'+variablev).html(htmldata);
          }
         
        }
    });
      }else{
        $('#operatorParameterId'+variablev).html("<option value=''>Select Operator Parameter</option>");
        alert('Please select operator parameter.');
      }
    
}

    function getsubOperators(operatorId,variablev,selectedid){
      if(operatorId != "" && operatorId != "undefined"){
        var htmldata="<option value=''>Select sub parameter</option>";
        var csrfToken = $('input[name="csrf_token"]').val()
     $.ajax({
        url: "{{ url_for('service_configurations.operator_based_operator_sub_parameters_list') }}",
        data: { "operatorId": operatorId,"csrf_token": csrfToken },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.operatorSubParametersList, function( key, value ) {
            if(selectedid!="" && selectedid==value.id){
              htmldata=htmldata+"<option selected value='"+value.id+"'>"+value.displayName+"</option>";
            }else{
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.displayName+"</option>";
            }
              });
         $('#operatorsubParameterId'+variablev).html(htmldata);
          }else{
            $('#operatorsubParameterId'+variablev).html(htmldata);
          }
         
        }
    });
      }else{
        $('#operatorsubParameterId'+variablev).html("<option value=''>Select sub parameter</option>");
        alert('Please select sub operator parameter.');
      }
    
}
</script>


<script>
function getOperatorGrouping(operatorParameterId,variablev,selectedid){
      if(operatorParameterId != "" && operatorParameterId != "undefined"){
        var htmldata="<option value=''>Select Parameter Grouping</option>";
        var csrfToken = $('input[name="csrf_token"]').val()
     $.ajax({
        url: "{{ url_for('service_configurations.operator_parameter_based_operator_grouping_list') }}",
        data: { "operatorParameterId": operatorParameterId,"csrf_token": csrfToken },
        dataType:"json",
        type: "post",
        success: function(resultdata){
          if(resultdata.responseStatus==1){
          $.each(resultdata.operatorGroupingList, function( key, value ) {
            if(selectedid!="" && selectedid==value.id){
              htmldata=htmldata+"<option selected value='"+value.id+"'>"+value.groupName+"</option>";
            }else{
              htmldata=htmldata+"<option value='"+value.id+"'>"+value.groupName+"</option>";
            }
              });
         $('#operatorGroupingId'+variablev).html(htmldata);
          }else{
            $('#operatorGroupingId'+variablev).html(htmldata);
          }
         
        }
    });
      }else{
        $('#operatorGroupingId'+variablev).html("<option value=''>Select Operator Parameter</option>");
        alert('Please select operator grouping.');
      }
    
}
</script>

<!-- 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">Service configuration</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">Service configuration</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">
                Service configuration
            </div>
          </div>

          <div class="card-body">
            <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
              <a class="nav-link {% if redirectval == 'ServiceGrouping' %}active{% endif %}" data-bs-toggle="tab" role="tab" aria-current="page" href="#nav-service-grouping" aria-selected="true">Service Grouping</a>
              <a class="nav-link {% if redirectval == 'Category' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-category" aria-selected="false">Category</a>
              <a class="nav-link {% if redirectval == 'Service' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-service" aria-selected="false">Service</a>
              <a class="nav-link {% if redirectval == 'Operator' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-operator" aria-selected="false">Operator</a>
              <a class="nav-link {% if redirectval == 'OperatorUpdate' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-operator-update" aria-selected="false">Operator Update</a>
              <a class="nav-link {% if redirectval == 'OperatorParameter' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-operator-parameter" aria-selected="false">Operator Parameter</a>
              <a class="nav-link {% if redirectval == 'OperatorGrouping' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-operator-grouping" aria-selected="false">Operator Grouping</a>
              <a class="nav-link {% if redirectval == 'SubParameter' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-sub-parameter" aria-selected="false">Sub Parameter</a>
              <a class="nav-link {% if redirectval == 'SubParameterGrouping' %}active{% endif %}" data-bs-toggle="tab" role="tab" href="#nav-sub-parameter-grouping" aria-selected="false">Sub Parameter Grouping</a>
            </nav>
          
            <center>
                {% if error %}
                <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                {% endif %}
            </center>

            <div class="tab-content">
              <div class="tab-pane fade {% if redirectval == 'ServiceGrouping' %}show active{% endif %}" id="nav-service-grouping" role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addtask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Service Grouping
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                  <div class="table-responsive">
                    <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                      <thead class="table-primary">
                        <tr>
                         <th scope="col">S.No</th>
                         <th scope="col">Name</th>
                         <th scope="col">Sorting</th>
                         <th scope="col">Status</th>
                         <th scope="col">Action</th>
                       </tr>
                      </thead>

                      <tbody>
                        {% for each_service_grouping in serviceGroupingList %}
                        <tr>
                          <td>{{each_service_grouping.snoCount}}</td>
                          <td>{{each_service_grouping.name}}</td>
                          <td>{{each_service_grouping.sorting}}</td>

                          <td>
                              {% if each_service_grouping.actionText == "Active" %}
                                  <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_service_grouping_status', serviceGroupingId=each_service_grouping.id) }}">{{ each_service_grouping.actionText }}</a>
                              {% else %}
                                  <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_service_grouping_status', serviceGroupingId=each_service_grouping.id) }}">{{ each_service_grouping.actionText }}</a>
                              {% endif %}
                          </td>

                          <td>
                              <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateTask{{ loop.index }}">
                                  <i class="ri-edit-line"></i>
                              </a>

                              <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_service_grouping', serviceGroupingId=each_service_grouping.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                              </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if servicegroupingPagination %}
                                  <div class="pagination">
                                      {{ servicegroupingPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'Category' %}show active{% endif %}" id="nav-category" role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addCategoryTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Category
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                       <th scope="col">S.No</th>
                       <th scope="col">Category Name</th>
                       <th scope="col">Is TPIN</th>
                       <th scope="col">Service Grouping</th>
                       <th scope="col">Sorting</th>
                       <th scope="col">Display In Dashboard</th>
                       <th scope="col">Image</th>
                       <th scope="col">Status</th>
                       <th scope="col">Action</th>
                     </tr>
                    </thead>

                    <tbody>
                       {% for each_category in categoriesList %}
                      <tr>
                        <td>{{each_category.snoCount}}</td>
                        <td>{{each_category.categoryName}}</td>
                        <td>
                          {% if each_category.isTpin == True %}
                              &#10004; <!-- Checkmark symbol for True -->
                          {% else %}
                              &#10007; <!-- Cross mark symbol for False -->
                          {% endif %}
                        </td>
                        <td>{{each_category.serviceGroupingName}}</td>
                        <td>{{each_category.sorting}}</td>
                        <td>{{each_category.displayInDashboard}}</td>
                        {%if each_category.image %}
                        <td><img src="{{each_category.image}}" alt="" border=3 height="45px" width="30px"></img></td>
                        {% else %}
                        <td><img src="{{ url_for('static', filename='images/Dummy.png') }}" alt="" border=3 height="35px" width="30px"></img></td>
                        {% endif %}

                        <td>
                            {% if each_category.actionText == "Active" %}
                                <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_category_status', categoryId=each_category.id) }}">{{ each_category.actionText }}</a>
                            {% else %}
                                <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_category_status', categoryId=each_category.id) }}">{{ each_category.actionText }}</a>
                            {% endif %}
                        </td>

                        <td>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateCategoryTask{{ loop.index }}">
                                <i class="ri-edit-line"></i>
                            </a>

                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_category', categoryId=each_category.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                            </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if categoryPagination %}
                                  <div class="pagination">
                                      {{ categoryPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>

              </div>

              <div class="tab-pane fade {% if redirectval == 'Service' %}show active{% endif %}" id="nav-service" role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addServiceTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Service
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                        <th scope="col">S.No</th>
                        <th scope="col">Service Name</th>
                        <th scope="col">Category Name</th>
                        <th scope="col">Service Grouping</th>
                        <th scope="col">Code</th>
                        <th scope="col">Is Service</th>
                        <th scope="col">Is bbps</th>
                        <th scope="col">Is Operator Wise</th>
                        <th scope="col">File</th>
                        <th scope="col">Sorting</th>
                        <th scope="col">Display In Dashboard</th>
                        <th scope="col">Wallet</th>
                        <th scope="col">Status</th>
                        <th scope="col">Action</th>
                     </tr>
                    </thead>

                    <tbody>
                       {% for each_service in servicesList %}
                      <tr>
                        <td>{{each_service.snoCount}}</td>
                        <td>{{each_service.serviceName}}</td>
                        <td>{{each_service.categoryName}}</td>
                        <td>{{each_service.serviceGroupingName}}</td>
                        <!-- <td>{{each_service.transactionAPIName}}</td> -->
                        <td>{{each_service.code}}</td>
                        <td>
                        {% if each_service.isService == True %}
                          &#10003; <!-- Checkmark symbol -->
                        {% else %}
                          &#10007; <!-- Cross mark symbol -->
                        {% endif %}
                        </td>
                        <td>
                        {% if each_service.isbbps == True %}
                          &#10003; <!-- Checkmark symbol -->
                        {% else %}
                          &#10007; <!-- Cross mark symbol -->
                        {% endif %}
                        </td>
                        <td>
                        {% if each_service.isOperatorWise == True %}
                          &#10003; <!-- Checkmark symbol -->
                        {% else %}
                          &#10007; <!-- Cross mark symbol -->
                        {% endif %}
                        </td>
                        {%if each_service.file %}
                        <td><img src="{{each_service.file}}" alt="" border=3 height="45px" width="30px"></img></td>
                        {% else %}
                        <td><img src="{{ url_for('static', filename='images/Dummy.png') }}" alt="" border=3 height="35px" width="30px"></img></td>
                        {% endif %}
                        <td>{{each_service.sorting}}</td>
                        <td>{{each_service.displayInDashboard}}</td>
                        <td>{{each_service.walletName}}</td>

                        <td>
                            {% if each_service.actionText == "Active" %}
                                <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_service_status',serviceId=each_service.id) }}">{{ each_service.actionText }}</a>
                            {% else %}
                                <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_service_status',serviceId=each_service.id) }}">{{ each_service.actionText }}</a>
                            {% endif %}
                        </td>

                        <td>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateServiceTask{{ loop.index }}">
                                <i class="ri-edit-line"></i>
                            </a>

                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_service',serviceId=each_service.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                            </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if servicePagination %}
                                  <div class="pagination">
                                      {{ servicePagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>

              </div>
                        
              <div class="tab-pane fade {% if redirectval == 'Operator' %}show active{% endif %}" id="nav-operator" role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addOperatorTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Operator
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                          <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                            <thead class="table-primary">
                              <tr>
                                <th scope="col">S.No</th>
                                <th scope="col">Operator Name</th>
                                <th scope="col">Service Name</th>
                                <th scope="col">Allow Type</th>
                                <th scope="col">Amount Plans</th>
                                <th scope="col">Api Name</th>
                                <th scope="col">Api Code</th>
                                <th scope="col">Api Type</th>
                                <th scope="col">File</th>
                                <th scope="col">Tax Type</th>
                                <th scope="col">Service Grouping</th>
                                <th scope="col">Rejected Amount</th>
                                <th scope="col">Min length</th>
                                <th scope="col">Max length</th>
                                <th scope="col">Sorting</th>
                                <th scope="col">Display In Dashboard</th>
                                <th scope="col">Pay Without Fetch Allowed</th>
                                <th scope="col">State</th>
                                <th scope="col">Status</th>
                               <th scope="col">Action</th>
                             </tr>
                            </thead>

                            <tbody>
                               {% for each_operator in operatorsList %} 
                              <tr>
                                <td>{{each_operator.operatorSnoCount}}</td>
                                <td>{{each_operator.operatorName}}</td>
                                <td>{{each_operator.serviceName}}</td>
                                <td>{{each_operator.allowType}}</td>
                                <td>{{each_operator.amountPlans}}</td>
                                <td>{{each_operator.transactionAPIName}}</td>
                                <td>{{each_operator.apiCode}}</td>
                                <td>{{each_operator.apiType}}</td>

                                </td>
                                {%if each_operator.image %}
                                <td><img src="{{each_operator.image}}" alt="" border=3 height="45px" width="30px"></img></td>
                                {% else %}
                                <td><img src="{{ url_for('static', filename='images/Dummy.png') }}" alt="" border=3 height="35px" width="30px"></img></td>
                                {% endif %}

                                <td>{{each_operator.taxTypeName}}</td>
                                <td>{{each_operator.serviceGroupingName}}</td>
                                <td>{{each_operator.rejectedAmount}}</td>
                                <td>{{each_operator.minLength}}</td>
                                <td>{{each_operator.maxLength}}</td>
                                <td>{{each_operator.sorting}}</td>
                                <td>{{each_operator.displayInDashboard}}</td>
                                <td>{{each_operator.payWithoutFetchAllowed}}</td>
                                <td>{{each_operator.stateName}}</td>

                                <td>
                                    {% if each_operator.actionText == "Active" %}
                                        <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_operator_status', operatorId=each_operator.id) }}">{{ each_operator.actionText }}</a>
                                    {% else %}
                                        <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_operator_status', operatorId=each_operator.id) }}">{{ each_operator.actionText }}</a>
                                    {% endif %}
                                </td>

                                <td>
                                    <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateOperatorTask{{ loop.index }}">
                                        <i class="ri-edit-line"></i>
                                    </a>

                                    <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_operator', operatorId=each_operator.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                                    </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if operatorPagination %}
                                  <div class="pagination">
                                      {{ operatorPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'OperatorUpdate' %}show active{% endif %}" id="nav-operator-update" role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addOperatorUpdateTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Operator Update
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                        <th scope="col">S.No</th>
                        <th scope="col">Operator Name</th>
                        <th scope="col">ApiOperator Code1</th>
                        <th scope="col">ApiOperator Code2</th>
                        <th scope="col">ApiOperator Code3</th>
                        <th scope="col">ApiOperator Code4</th>
                        <th scope="col">ApiOperator Code5</th>
                        <th scope="col">ApiOperator Code6</th>
                        <th scope="col">Edit</th>
                     </tr>
                    </thead>

                    <tbody>
                       {% for each_operator_update in operatorUpdateList %} 
                      <tr>
                        
                        <td>{{each_operator_update.snoCount}}</td>
                        <td>{{each_operator_update.operatorName}}</td>
                        <td>{{each_operator_update.apiOperatorCode1}}</td>
                        <td>{{each_operator_update.apiOperatorCode2}}</td>
                        <td>{{each_operator_update.apiOperatorCode3}}</td>
                        <td>{{each_operator_update.apiOperatorCode4}}</td>
                        <td>{{each_operator_update.apiOperatorCode5}}</td>
                        <td>{{each_operator_update.apiOperatorCode6}}</td>

                        <td>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateOperatorUpdateTask{{ loop.index }}">
                                <i class="ri-edit-line"></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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if operatorupdatePagination %}
                                  <div class="pagination">
                                      {{ operatorupdatePagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'OperatorParameter' %}show active{% endif %}" id="nav-operator-parameter" role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addOperatorParameterTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Operator Parameter
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                <div class="table-responsive">
                  <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                    <thead class="table-primary">
                      <tr>
                        <tr>
                          <th scope="col">S.No</th>
                          <th scope="col">Display Name</th>
                          <th scope="col">Parameter Name</th>
                          <th scope="col">Operator Name</th>
                          <th scope="col">Api Name</th>
                          <th scope="col">Api Code</th>
                          <th scope="col">Sort</th>
                          <th scope="col">Field Type</th>
                          <th scope="col">Min length</th>
                          <th scope="col">Max length</th>
                          <th scope="col">Pattern</th>
                          <th scope="col">Is Active</th>
                          <th scope="col">Is Mandatory</th>
                          <th scope="col">Has Grouping</th>
                          <th scope="col">Has Api Call</th>
                          <th scope="col">Has Include Api Call</th>
                          <th scope="col">Is Reference Key</th>
                          <th scope="col">Is Sub Parameters</th>
                          <th scope="col">Action</th>
                        </tr>
                     </tr>
                    </thead>

                    <tbody>
                       {% for each_operator_parameter in operatorParametersList %} 
                      <tr>
                        <td>{{each_operator_parameter.snoCount}}</td>
                        <td>{{each_operator_parameter.displayName}}</td>
                        <td>{{each_operator_parameter.parameterName}}</td>
                        <td>{{each_operator_parameter.operatorName}}</td>
                        <td>{{each_operator_parameter.transactionAPIName}}</td>
                        <td>{{each_operator_parameter.apiCode}}</td>
                        <td>{{each_operator_parameter.sort}}</td>
                        <td>{{each_operator_parameter.fieldType}}</td>
                        <td>{{each_operator_parameter.minLength}}</td>
                        <td>{{each_operator_parameter.maxLength}}</td>
                        <td>{{each_operator_parameter.pattern}}</td>
                        <td>
                            {% if each_operator_parameter.isActive == True %}
                                &#10004; <!-- Checkmark symbol for True -->
                            {% else %}
                                &#10007; <!-- Cross mark symbol for False -->
                            {% endif %}
                        </td>

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

                        <td>
                            {% if each_operator_parameter.hasGrouping == True %}
                                &#10004; <!-- Checkmark symbol for True -->
                            {% else %}
                                &#10007; <!-- Cross mark symbol for False -->
                            {% endif %}
                        </td>

                        <td>
                            {% if each_operator_parameter.hasApiCall == True %}
                                &#10004; <!-- Checkmark symbol for True -->
                            {% else %}
                                &#10007; <!-- Cross mark symbol for False -->
                            {% endif %}
                        </td>

                        <td>
                            {% if each_operator_parameter.hasIncludeApiCall == True %}
                                &#10004; <!-- Checkmark symbol for True -->
                            {% else %}
                                &#10007; <!-- Cross mark symbol for False -->
                            {% endif %}
                        </td>
                        <td>
                          {% if each_operator_parameter.isReferenceKey == True %}
                              &#10004; <!-- Checkmark symbol for True -->
                          {% else %}
                              &#10007; <!-- Cross mark symbol for False -->
                          {% endif %}
                        </td>

                        <td>
                            {% if each_operator_parameter.hasSubParameters == True %}
                                &#10004; <!-- Checkmark symbol for True -->
                            {% else %}
                                &#10007; <!-- Cross mark symbol for False -->
                            {% endif %}
                        </td>

                        <td>
                            <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateOperatorParameterTask{{ loop.index }}">
                                <i class="ri-edit-line"></i>
                            </a>

                            <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_operator_parameter', operatorParameterId=each_operator_parameter.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                            </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if operatorparameterPagination %}
                                  <div class="pagination">
                                      {{ operatorparameterPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'OperatorGrouping' %}show active{% endif %}" id="nav-operator-grouping" role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addOperatorGroupingTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Operator Grouping
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                  <div class="table-responsive">
                    <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                      <thead class="table-primary">
                        <tr>
                          <th scope="col">S.No</th>
                          <th scope="col">Group Name</th>
                          <th scope="col">Operator Name</th>
                          <th scope="col">Parameter Name</th>
                          <th scope="col">Value</th>
                          <th scope="col">Status</th>
                          <th scope="col">Action</th>
                       </tr>
                      </thead>

                      <tbody>
                        {% for each_operator_grouping in operatorGroupingList %}
                        <tr>
                          <td>{{each_operator_grouping.snoCount}}</td>
                          <td>{{each_operator_grouping.groupName}}</td>
                          <td>{{each_operator_grouping.operatorName}}</td>
                          <td>{{each_operator_grouping.parameterName}}</td>
                          <td>{{each_operator_grouping.value}}</td>

                          <td>
                              {% if each_operator_grouping.actionText == "Active" %}
                                  <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_operator_grouping_status', operatorGroupingId=each_operator_grouping.id) }}">{{ each_operator_grouping.actionText }}</a>
                              {% else %}
                                  <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_operator_grouping_status', operatorGroupingId=each_operator_grouping.id) }}">{{ each_operator_grouping.actionText }}</a>
                              {% endif %}
                          </td>

                          <td>
                              <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateOperatorGroupingTask{{ loop.index }}">
                                  <i class="ri-edit-line"></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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if operatorgroupingPagination %}
                                  <div class="pagination">
                                      {{ operatorgroupingPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'SubParameter' %}show active{% endif %}" id="nav-sub-parameter" role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addSubParameterTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Sub Parameter
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                  <div class="table-responsive">
                    <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                      <thead class="table-primary">
                        <tr>
                          <th scope="col">S.No</th>
                          <th scope="col">Display Name</th>
                          <th scope="col">Parameter Name</th>
                          <th scope="col">Parent Parameter Name</th>
                          <th scope="col">Grouping Name</th>
                          <th scope="col">Operator Name</th>
                          <th scope="col">Api Name</th>
                          <th scope="col">Api Code</th>
                          <th scope="col">Sort</th>
                          <th scope="col">Field Type</th>
                          <th scope="col">Min length</th>
                          <th scope="col">Max length</th>
                          <th scope="col">Pattern</th>
                          <th scope="col">Is Active</th>
                          <th scope="col">Is Mandatory</th>
                          <th scope="col">Has Grouping</th>
                          <th scope="col">Has Api Call</th>
                          <th scope="col">Has Include Api Call</th>
                          <th scope="col">Is Reference Key</th>
                          <th scope="col">Action</th>
                       </tr>
                      </thead>

                      <tbody>
                        {% for each_sub_parameter in subParametersList %}
                        <tr>
                          <td>{{each_sub_parameter.snoCount}}</td>
                          <td>{{each_sub_parameter.displayName}}</td>
                          <td>{{each_sub_parameter.parameterName}}</td>
                          <td>{{each_sub_parameter.parentParameterName}}</td>
                          <td>{{each_sub_parameter.groupingName}}</td>
                          <td>{{each_sub_parameter.operatorName}}</td>
                          <td>{{each_sub_parameter.transactionAPIName}}</td>
                          <td>{{each_sub_parameter.apiCode}}</td>
                          <td>{{each_sub_parameter.sort}}</td>
                          <td>{{each_sub_parameter.fieldType}}</td>
                          <td>{{each_sub_parameter.minLength}}</td>
                          <td>{{each_sub_parameter.maxLength}}</td>
                          <td>{{each_sub_parameter.pattern}}</td>
                          <td>
                              {% if each_sub_parameter.isActive == True %}
                                  &#10004; <!-- Checkmark symbol for True -->
                              {% else %}
                                  &#10007; <!-- Cross mark symbol for False -->
                              {% endif %}
                          </td>

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

                          <td>
                              {% if each_sub_parameter.hasGrouping == True %}
                                  &#10004; <!-- Checkmark symbol for True -->
                              {% else %}
                                  &#10007; <!-- Cross mark symbol for False -->
                              {% endif %}
                          </td>

                          <td>
                              {% if each_sub_parameter.hasApiCall == True %}
                                  &#10004; <!-- Checkmark symbol for True -->
                              {% else %}
                                  &#10007; <!-- Cross mark symbol for False -->
                              {% endif %}
                          </td>

                          <td>
                              {% if each_sub_parameter.hasIncludeApiCall == True %}
                                  &#10004; <!-- Checkmark symbol for True -->
                              {% else %}
                                  &#10007; <!-- Cross mark symbol for False -->
                              {% endif %}
                          </td>
                          <td>
                              {% if each_sub_parameter.isReferenceKey == True %}
                                  &#10004; <!-- Checkmark symbol for True -->
                              {% else %}
                                  &#10007; <!-- Cross mark symbol for False -->
                              {% endif %}
                          </td>

                          <td>
                              <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateSubParameterTask{{ loop.index }}">
                                  <i class="ri-edit-line"></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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if subparameterPagination %}
                                  <div class="pagination">
                                      {{ subparameterPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>

              <div class="tab-pane fade {% if redirectval == 'SubParameterGrouping' %}show active{% endif %}" id="nav-sub-parameter-grouping" role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                      <div class="d-flex justify-content-between align-items-center mb-4">
                          <form method="GET" action="{{ url_for('service_configurations.service_configurations_list')}}" class="row gy-2 gx-3 align-items-center">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                              <div class="col-auto">
                                  <input type="text" class="form-control" value="{{search_element}}" name="search_element" id="search_element"
                                      placeholder="search element">
                              </div>
                              <div class="col-auto">
                                  <button type="submit" class="btn btn-primary">Search</button>
                              </div>
                          </form>
                          
                          <div class="prism-toggle">
                              <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal" data-bs-target="#addSubParameterGroupingTask">
                                  <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Sub Parameter Grouping
                              </button>
                          </div>
                      </div>
                  </div>
                </div>


                <div class="mt-3"></div>
                  <div class="table-responsive">
                    <table id="datatable-basic" class="table text-nowrap"  style="padding-bottom: 200px;">
                      <thead class="table-primary">
                        <tr>
                          <th scope="col">S.No</th>
                          <th scope="col">Group Name</th>
                          <th scope="col">Sub Parameter Name</th>
                          <th scope="col">Operator Name</th>
                          <th scope="col">Value</th>
                          <th scope="col">Status</th>
                          <th scope="col">Action</th>
                       </tr>
                      </thead>

                      <tbody>
                        {% for each_sub_parameter_grouping in subParameterGroupingsList %}
                        <tr>
                          <td>{{each_sub_parameter_grouping.snoCount}}</td>
                          <td>{{each_sub_parameter_grouping.groupName}}</td>
                          <td>{{each_sub_parameter_grouping.subParameterName}}</td>
                          <td>{{each_sub_parameter_grouping.operatorName}}</td>
                          <td>{{each_sub_parameter_grouping.value}}</td>
                          
                          <td>
                              {% if each_sub_parameter_grouping.actionText == "Active" %}
                                  <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_sub_parameter_grouping_status', subParameterGroupingId=each_sub_parameter_grouping.id) }}">{{ each_sub_parameter_grouping.actionText }}</a>
                              {% else %}
                                  <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_sub_parameter_grouping_status', subParameterGroupingId=each_sub_parameter_grouping.id) }}">{{ each_sub_parameter_grouping.actionText }}</a>
                              {% endif %}
                          </td>

                          <td>
                              <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-info-transparent rounded-pill" data-bs-toggle="modal" data-bs-target="#updateSubParameterGroupingTask{{ loop.index }}">
                                  <i class="ri-edit-line"></i>
                              </a>

                              <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_sub_parameter_grouping', subParameterGroupingId=each_sub_parameter_grouping.id) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
                              </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 class="col-sm-12 col-md-12 mt-3">
                      <nav aria-label="Page navigation" class="pagination-style-1">
                        <ul class="pagination mb-0">
                            {% if subparametergroupingPagination %}
                                  <div class="pagination">
                                      {{ subparametergroupingPagination.links }}
                                  </div>
                              {% endif %}
                        </ul>
                    </nav>
                  </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>



<!-- Create New Bank Modal -->
<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Service Grouping</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_service_grouping')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="name">Name*</label>
                      <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="sorting">Sorting*</label>
                      <input type="text" class="form-control" id="sorting" name="sorting" placeholder="Enter sorting" required>
                    </div>
                  </div>

                </div>
              </div>

              <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
              </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

{% for each_service_grouping in serviceGroupingList %}
<div class="modal fade" id="updateTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Service Grouping</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_service_grouping', serviceGroupingId=each_service_grouping.id) }}" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                        <label for="name{{ loop.index }}">Name*</label>
                        <input type="text" class="form-control" id="name{{ loop.index }}" name="name" value="{{ each_service_grouping.name }}" required>
                    </div>
                    <div class="form-group">
                        <label for="sorting{{ loop.index }}">Sorting*</label>
                        <input type="text" class="form-control" id="sorting{{ loop.index }}" name="sorting" value="{{ each_service_grouping.sorting }}" required>
                    </div>
                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addCategoryTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Category</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_category')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="categoryName">Category Name*</label>
                      <input type="text" class="form-control" id="categoryName" name="categoryName" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Role Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  placeholder="Enter Category Name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Is TPIN</label>
                      <input type="checkbox" value="True" name="isTpin"  checked>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceGroupingId">Service Grouping</label>
                      <select class="form-control" id="serviceGroupingId" name="serviceGroupingId">
                        <option value="" disabled selected hidden>Select service grouping</option>
                        {% for each_service_grouping in serviceGroupingDropdownList %} 
                        <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="sorting">Sorting</label>
                        <input type="text" class="form-control" id="sorting" name="sorting" pattern="^\d+(\.\d+)?$" title="sorting must contain only numeric characters" placeholder="Enter sorting">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Display In Dashboard</label>
                      <input type="checkbox" value="True" name="displayInDashboard" checked>  
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="image">Image</label>
                        <input type="file" class="form-control" id="image" name="image" accept=".jpg,.jpeg,.png" title="Only JPG, JPEG, and PNG formats are allowed.">
                    </div>
                  </div>

                </div>
              </div>

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

{% for each_category in categoriesList %}
<div class="modal fade" id="updateCategoryTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_category', categoryId=each_category.id) }}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                        <label for="categoryName{{ loop.index }}">Category Name*</label>
                        <input type="text" class="form-control" id="categoryName{{ loop.index }}" name="categoryName" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Role Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  value="{{ each_category.categoryName }}" required>
                    </div>
                    <div class="form-group">
                        <label for="sorting{{ loop.index }}">Sorting*</label>
                        <input type="text" class="form-control" id="sorting{{ loop.index }}" name="sorting" name="sorting" pattern="^\d+(\.\d+)?$" title="sorting must contain only numeric characters" value="{{ each_category.sorting }}" required>
                    </div>

                    <div class="form-group">
                        {% if each_category.isTpin %}
                          <input type="checkbox" name="isTpin" id="isTpin{{ loop.index }}" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isTpin" id="isTpin{{ loop.index }}" value="True">
                        {% endif %}
                        <label for="isTpin{{ loop.index }}">Is TPIN</label>
                    </div>

                    <div class="form-group">
                      <label for="serviceGroupingId{{ loop.index }}">Service Grouping*</label>
                      <select class="form-control" id="serviceGroupingId{{ loop.index }}" name="serviceGroupingId">
                       {% for each_service_grouping in serviceGroupingDropdownList %}
                        {% if each_service_grouping.id == each_category.serviceGroupingId %}
                         <option selected value="{{ each_service_grouping.id }}">{{ each_service_grouping.name }}</option>
                        {% else %}
                         <option value="{{ each_service_grouping.id }}">{{ each_service_grouping.name }}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                        <label for="sorting{{ loop.index }}">Sorting</label>
                        <input type="text" class="form-control" id="sorting{{ loop.index }}" name="sorting" pattern="^\d+(\.\d+)?$" title="sorting must contain only numeric characters" value="{{ each_category.sorting }}">
                    </div>

                    <div class="form-group">
                        {% if each_category.displayInDashboard %}
                          <input type="checkbox" name="displayInDashboard" id="displayInDashboard{{ loop.index }}" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="displayInDashboard" id="displayInDashboard{{ loop.index }}" value="True">
                        {% endif %}
                        <label for="displayInDashboard{{ loop.index }}">Display In Dashboard</label>
                    </div>

                    <div class="form-group">
                      <label for="image{{ loop.index }}">Update Image</label>
                      {% if each_category.image %}
                          <img src="{{ each_category.image }}" alt="Category Image" class="img-thumbnail" height="150" width="150">
                      {% else %}
                        <input type="file" class="form-control" id="image{{ loop.index }}" name="image" accept=".jpg,.jpeg,.png" title="Only JPG, JPEG, and PNG formats are allowed.">
                      {% endif %}
                    </div>

                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addServiceTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Service</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_service')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceName">Service Name*</label>
                      <input type="text" class="form-control" id="serviceName" name="serviceName" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="service Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  placeholder="Enter Service Name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceType">Service Type*</label>
                      <select class="form-control" id="serviceType" name="serviceType">
                        <option value="" disabled selected hidden>Select Service Type</option>
                        <option value="credit">Credit</option>
                        <option value="debit">Debit</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="wallet">Wallet*</label>
                      <select class="form-control" name="walletId" id="wallet" required>
                         <option value="" disabled selected>Select wallet</option>
                        {% for each_wallet in walletsList %} 
                        <option value="{{each_wallet.id}}">{{each_wallet.walletName}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceGroupingId">Service Grouping</label>
                      <select class="form-control" id="serviceGroupingId" name="serviceGroupingId">
                        <option value="" disabled selected hidden>Select service grouping</option>
                        {% for each_service_grouping in serviceGroupingDropdownList %} 
                        <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="code">Code*</label>
                      <input type="text" class="form-control" id="code" name="code" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  placeholder="Enter Code" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="displayInDashboard">
                        <label>Display In Dashboard</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isService">
                        <label>Is Service</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isbbps">
                        <label>Is bbps</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isOperatorWise">
                        <label>Is Operator Wise</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="file">File</label>
                        <input type="file" class="form-control" id="file" name="file" accept=".jpg,.jpeg,.png" title="Only JPG, JPEG, and PNG formats are allowed."> 
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="category">Category*</label>
                        <select class="form-control" name="categoryId" id="category" required>
                          <option value="" disabled selected>Select category</option>
                          {% for each_category in categoriesList %} 
                          <option value="{{each_category.id}}">{{each_category.categoryName}}</option> 
                          {% endfor %}
                        </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="sorting">Sorting</label>
                      <input type="text" class="form-control" id="sorting" name="sorting"  pattern="^\d+(\.\d+)?$" title="Sorting must contain only numeric characters" placeholder="Enter sorting">
                    </div>
                  </div>

                </div>
              </div>

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


{% for each_service in servicesList %}
<div class="modal fade" id="updateServiceTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Service</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{url_for('service_configurations.update_service',serviceId=each_service.id)}}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                      <label for="serviceName{{ loop.index }}">Service Name*</label>
                      <input type="text" class="form-control"id="serviceName{{ loop.index }}"name="serviceName" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Service Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{each_service.serviceName}}" required>
                    </div>

                    <div class="form-group">
                        <label for="serviceType{{ loop.index }}">Service Type*</label>
                        <select class="form-control" id="serviceType{{ loop.index }}" name="serviceType"  required>
                          {% if each_service.serviceType == "Debit" %}
                          <option value="Debit" selected>Debit</option>
                          {% else %}
                          <option value="Debit">Debit</option>
                          {% endif %}

                          {% if each_service.serviceType == "Credit" %}
                          <option value="Credit" selected>Credit</option>
                          {% else %}
                          <option value="Credit">Credit</option>
                          {% endif %}
                        </select>
                    </div>

                    <div class="form-group">
                      <label for="wallet{{ loop.index }}">Wallet*</label>
                      <select class="form-control" id="wallet{{ loop.index }}" name="walletId">
                       {% for each_wallet in walletsList %}
                        {% if each_wallet.id == each_service.walletId %}
                         <option selected value="{{each_wallet.id}}">{{each_wallet.walletName}}</option>
                          {% else %}
                          <option value="{{each_wallet.id}}">{{each_wallet.walletName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="serviceGroupingId{{ loop.index }}">Service Grouping*</label>
                      <select class="form-control" id="serviceGroupingId{{ loop.index }}" name="serviceGroupingId">
                       {% for each_service_grouping in serviceGroupingDropdownList %}
                        {% if each_service_grouping.id == each_service.serviceGroupingId %}
                         <option selected value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
                          {% else %}
                          <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                        <label for="code{{ loop.index }}">Code*</label>
                        <input type="text" class="form-control"id="code{{ loop.index }}"name="code"  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/" value="{{each_service.code}}" required>
                    </div>

                    <div class="form-group">
                        {% if each_service.displayInDashboard == True %}
                          <input type="checkbox" name="displayInDashboard" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="displayInDashboard" value="True">
                        {% endif %}
                        <label for="displayInDashboard{{ loop.index }}">Display In Dashboard</label>
                    </div>

                    <div class="form-group">
                        {% if each_service.isService == True %}
                          <input type="checkbox" name="isService" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isService" value="True">
                        {% endif %}
                        <label for="isService{{ loop.index }}">Is Service</label>
                    </div>

                    <div class="form-group">
                        {% if each_service.isbbps == True %}
                          <input type="checkbox" name="isbbps" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isbbps" value="True">
                        {% endif %}
                        <label for="isbbps{{ loop.index }}">Is bbps</label>
                    </div>

                    <div class="form-group">
                        {% if each_service.isOperatorWise == True %}
                          <input type="checkbox" name="isOperatorWise" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isOperatorWise" value="True">
                        {% endif %}
                        <label for="isOperatorWise{{ loop.index }}">Is Operator Wise</label>
                    </div>

                    <div class="form-group">
                      {%if each_service.file%}
                        <label>Update File</label>
                        <img src="{{each_service.file}}" alt="" border=3 height="150px" width="150px"></img>
                        <input type="file" class="form-control" id="file{{ loop.index }}" name="file" accept=".jpg,.jpeg,.png" title="Only JPG, JPEG, and PNG formats are allowed.">
                      {%else%}
                        <input type="file" class="form-control" id="file{{ loop.index }}" name="file">
                      {%endif%}
                    </div>

                    <div class="form-group">
                      <label for="categoryId{{ loop.index }}">Category*</label>
                      <select class="form-control" id="categoryId{{ loop.index }}" name="categoryId">
                       {% for each_category in categoriesList %}
                        {% if each_category.id == each_service.categoryId %}
                         <option selected value="{{each_category.id}}">{{each_category.categoryName}}</option>
                          {% else %}
                          <option value="{{each_category.id}}">{{each_category.categoryName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                        <label for="sorting{{ loop.index }}">Sorting</label>
                        <input type="text" class="form-control"id="sorting{{ loop.index }}"name="sorting" pattern="^\d+(\.\d+)?$" title="Sorting must contain only numeric characters" value="{{each_service.sorting}}">
                    </div>

                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addOperatorTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Operator</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_operator')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="operatorName">Name*</label>
                        <input type="text" class="form-control" id="operatorName" name="operatorName" placeholder="Enter Name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="allowType">Allow Type</label>
                        <input type="text" class="form-control" id="allowType" name="allowType" placeholder="Enter Allow Type">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="transactionAPIId">Transaction API*</label>
                      <select class="form-control" name="transactionAPIId" id="transactionAPIId" required> //onChange="getServices(this.value,'add','')"
                        <option value="" selected>Select transaction api name</option>
                        {% for each_transaction_api in transactionAPIsList %}
                        <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="service">Service*</label>
                        <select class="form-control" name="serviceId" id="serviceIdadd" required> 
                          <option value="">Select Service</option> 
                         {% for each_service in servicesDropdownList %}
                          <option value="{{each_service.id}}">{{each_service.serviceName}}</option> 
                          {% endfor %}
                        </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="taxType">Tax Type*</label>
                        <select class="form-control" name="taxTypeId" id="taxType" required> 
                          {% for each_tax_type in taxTypesList %}
                          <option value="" disabled selected hidden>Select Tax Type</option>  
                          <option value="{{each_tax_type.id}}">{{each_tax_type.taxTypeName}}</option> 
                          {% endfor %} 
                        </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceGroupingId">Service Grouping</label>
                      <select class="form-control" id="serviceGroupingId" name="serviceGroupingId">
                        <option value="" disabled selected hidden>Select service grouping</option>
                        {% for each_service_grouping in serviceGroupingDropdownList %} 
                        <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="amountPlans">Amount Plans</label>
                        <input type="text" class="form-control" id="amountPlans" name="amountPlans" placeholder="Enter Amount Plans">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="rejectedAmount">Rejected Amount</label>
                        <input type="text" class="form-control" id="rejectedAmount" name="rejectedAmount" placeholder="Enter Rejected Amount">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="minLength">Min Length</label>
                        <input type="text" class="form-control" id="minLength" name="minLength" placeholder="Enter Min Length">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="maxLength">Max Length</label>
                        <input type="text" class="form-control" id="maxLength" name="maxLength" placeholder="Enter Max Length">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="minAmount">Min Amount</label>
                        <input type="text" class="form-control" id="minAmount" name="minAmount" placeholder="Enter Min Amount">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="maxAmount">Max Amount</label>
                        <input type="text" class="form-control" id="maxAmount" name="maxAmount" placeholder="Enter Max Amount">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="apiCode">Api Code</label>
                        <input type="text" class="form-control" id="apiCode" name="apiCode" placeholder="Enter Api Code">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiType">Api Type*</label>
                      <select name="apiType" class="form-control" id="apiType" required>
                        <option value="" disabled selected hidden>Select api type</option>
                        <option value="Aadhar-Pay">Aadhar-Pay</option>
                        <option value="AEPS">AEPS</option>
                        <option value="Bbps">BBPS</option>
                        <option value="CMS">CMS</option>
                        <option value="DTH">DTH</option>
                        <option value="DMT-Offline">DMT-Offline</option>
                        <option value="DMT-Online">DMT-Online</option>
                        <option value="Electricity">Electricity</option>
                        <option value="Gas">Gas</option>
                        <option value="Lic">Lic</option>
                        <option value="MATM">MATM</option>
                        <option value="Mobile-Postpaid">Mobile-Postpaid</option>
                        <option value="Mobile-Prepaid">Mobile-Prepaid</option>
                        <option value="Payout">Payout</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="state">State</label>
                      <select class="form-control" name="stateId" id="state"> 
                        {% for each_state in statesList %}
                        <option value="" disabled selected hidden>Select State</option>  
                        <option value="{{each_state.id}}">{{each_state.stateName}}</option> 
                        {% endfor %} 
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="sorting">Sorting</label>
                        <input type="text" class="form-control" id="sorting" name="sorting" placeholder="Enter sorting">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="image">Image</label>
                        <input type="file" class="form-control" id="image" name="image">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="displayInDashboard" checked>
                        <label>Display In Dashboard</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="payWithoutFetchAllowed">
                        <label>Pay Without Fetch Allowed</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isBbps">
                        <label>Is BBPS</label>
                        <input type="checkbox" value="True" name="isValidate">
                        <label>Is Validate</label>
                        <input type="checkbox" value="True" name="isPortial">
                        <label>Is Partial</label>
                        <input type="checkbox" value="True" name="isRandom">
                        <label>Is Random</label>
                    </div>
                  </div>

                </div>
              </div>

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


{% for each_operator in operatorsList %}
<div class="modal fade" id="updateOperatorTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Operator</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{url_for('service_configurations.update_operator',operatorId=each_operator.id)}}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <div class="form-group">
                      <label for="operatorName{{ loop.index }}">Name*</label>
                      <input type="text" class="form-control" id="operatorName{{ loop.index }}" name="operatorName" value="{{each_operator.operatorName}}" required>
                  </div>

                  <div class="form-group">
                      <label for="allowType{{ loop.index }}">Allow Type</label>
                      <input type="text" class="form-control" id="allowType{{ loop.index }}" name="allowType" value="{{each_operator.allowType}}" required>
                  </div>

                    <div class="form-group">
                        <label for="transactionAPIId{{ loop.index }}">TransactionAPI*</label>
                        <select class="form-control" id="transactionAPIId{{ loop.index }}" name="transactionAPIId">  //onchange="getServices(this.value,{{loop.index}},'')"
                         {% for each_transaction_api in transactionAPIsList %}
                          {% if each_transaction_api.id == each_operator.transactionAPIId %}
                           <option selected value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                            {% else %}
                            <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                          {% endif %}
                         {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                      <label for="serviceId{{ loop.index }}">Service*</label>
                      <select class="form-control" id="serviceId{{loop.index}}" name="serviceId">
                       {% for each_service in servicesDropdownList %}
                        {% if each_service.id == each_operator.serviceId %}
                         <option selected value="{{each_service.id}}">{{each_service.serviceName}}</option>
                          {% else %}
                          <option value="{{each_service.id}}">{{each_service.serviceName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="taxTypeId{{ loop.index }}">Tax Type*</label>
                      <select class="form-control" id="taxTypeId{{ loop.index }}" name="taxTypeId">
                       {% for each_tax_type in taxTypesList %}
                        {% if each_tax_type.id == each_operator.taxTypeId %}
                         <option selected value="{{each_tax_type.id}}">{{each_tax_type.taxTypeName}}</option>
                          {% else %}
                          <option value="{{each_tax_type.id}}">{{each_tax_type.taxTypeName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>
                      <div class="form-group">
                        <label for="serviceGroupingId{{ loop.index }}">Service Grouping*</label>
                        <select class="form-control" id="serviceGroupingId{{ loop.index }}" name="serviceGroupingId">
                         {% for each_service_grouping in serviceGroupingDropdownList %}
                          {% if each_service_grouping.id == each_operator.serviceGroupingId %}
                           <option selected value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
                            {% else %}
                            <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
                          {% endif %}
                         {% endfor %}
                        </select>
                      </div>



                    <div class="form-group">
                        <label for="amountPlans{{ loop.index }}">Amount Plans</label>
                        <input type="text" class="form-control"id="amountPlans{{ loop.index }}"name="amountPlans" value="{{each_operator.amountPlans}}" required>
                    </div>

                    <div class="form-group">
                        <label for="rejectedAmount{{ loop.index }}">Rejected Amount</label>
                        <input type="text" class="form-control"id="rejectedAmount{{ loop.index }}"name="rejectedAmount" value="{{each_operator.rejectedAmount}}" required>
                    </div>

                    <div class="form-group">
                        <label for="minLength{{ loop.index }}">Min Length</label>
                        <input type="text" class="form-control"id="minLength{{ loop.index }}" name="minLength" value="{{each_operator.minLength}}" required>
                    </div>

                    <div class="form-group">
                        <label for="maxLength{{ loop.index }}">Max Length</label>
                        <input type="text" class="form-control"id="maxLength{{ loop.index }}"name="maxLength" value="{{each_operator.maxLength}}" required>
                    </div>

                    <div class="form-group">
                        <label for="minAmount{{ loop.index }}">Min Amount</label>
                        <input type="text" class="form-control"id="minAmount{{ loop.index }}" name="minAmount" value="{{each_operator.minAmount}}" required>
                    </div>

                    <div class="form-group">
                        <label for="maxAmount{{ loop.index }}">Max Amount</label>
                        <input type="text" class="form-control"id="maxAmount{{ loop.index }}" name="maxAmount" value="{{each_operator.maxAmount}}" required>
                    </div>



                    <div class="form-group">
                        <label for="apiCode{{ loop.index }}">Api Code</label>
                        <input type="text" class="form-control" id="apiCode{{ loop.index }}" name="apiCode" value="{{each_operator.apiCode}}">
                    </div>


                    <div class="form-group">
                        <label for="apiType{{ loop.index }}">Type*</label>
                        <select class="form-control" id="apiType{{ loop.index }}" name="apiType">
                          {% if each_operator.apiType == "Aadhar-Pay"%}
                          <option select value="Aadhar-Pay">Aadhar-Pay</option>
                          {% else %}
                          <option value="Aadhar-Pay">Aadhar-Pay</option>
                          {% endif %}

                          {% if each_operator.apiType == "AEPS"%}
                          <option selected value="AEPS">AEPS</option>
                          {% else %}
                          <option value="AEPS">AEPS</option>
                          {% endif %}

                          {% if each_operator.apiType == "Bbps"%}
                          <option selected value="Bbps">BBPS</option>
                          {% else %}
                          <option value="Bbps">BBPS</option>
                          {% endif %}

                          {% if each_operator.apiType == "CMS"%}
                          <option selected value="CMS">CMS</option>
                          {% else %}
                          <option value="CMS">CMS</option>
                          {% endif %}

                          {% if each_operator.apiType == "DTH"%}
                          <option selected value="DTH">DTH</option>
                          {% else %}
                          <option value="DTH">DTH</option>
                          {% endif %}

                          {% if each_operator.apiType == "DMT-Offline"%}
                          <option selected value="DMT-Offline">DMT-Offline</option>
                          {% else %}
                          <option value="DMT-Offline">DMT-Offline</option>
                          {% endif %}

                          {% if each_operator.apiType == "DMTOnline"%}
                          <option selected value="DMT-Online">DMT-Online</option>
                          {% else %}
                          <option value="DMT-Online">DMT-Online</option>
                          {% endif %}

                          {% if each_operator.apiType == "Electricity"%}
                          <option selected value="Electricity">Electricity</option>
                          {% else %}
                          <option value="Electricity">Electricity</option>
                          {% endif %}

                          {% if each_operator.apiType == "Gas"%}
                          <option selected value="Gas">Gas</option>
                          {% else %}
                          <option value="Gas">Gas</option>
                          {% endif %}

                          {% if each_operator.apiType == "MATM"%}
                          <option selected value="MATM">MATM</option>
                          {% else %}
                          <option value="MATM">MATM</option>
                          {% endif %}

                          {% if each_operator.apiType == "Mobile-Postpaid"%}
                          <option selected value="Mobile-Postpaid">Mobile-Postpaid</option>
                          {% else %}
                          <option value="Mobile-Postpaid">Mobile-Postpaid</option>
                          {% endif %}

                          {% if each_operator.apiType == "Mobile-Prepaid"%}
                          <option selected value="Mobile-Prepaid">Mobile-Prepaid</option>
                          {% else %}
                          <option value="Mobile-Prepaid">Mobile-Prepaid</option>
                          {% endif %}

                          {% if each_operator.apiType == "Payout"%}
                          <option selected value="Payout">Payout</option>
                          {% else %}
                          <option value="Payout">Payout</option>
                          {% endif %}

                        </select>
                      </div>


                    <div class="form-group">
                        <label for="sorting{{ loop.index }}">Sorting</label>
                        <input type="text" class="form-control"id="sorting{{ loop.index }}" name="sorting" value="{{each_operator.sorting}}">
                    </div>

                    <div class="form-group">
                      <label for="stateId{{ loop.index }}">State</label>
                      <select class="form-control" id="stateId{{ loop.index }}" name="stateId">
                       {% for each_state in statesList %}
                        {% if each_state.id == each_operator.stateId %}
                         <option selected value="{{each_state.id}}">{{each_state.stateName}}</option>
                          {% else %}
                          <option value="{{each_state.id}}">{{each_state.stateName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                    <div class="form-group">
                      <label for="image{{ loop.index }}">Update Image</label>
                      {%if each_operator.image%}
                      <img src="{{each_operator.image}}" alt="" border=3 height="150px" width="150px"></img>
                      <input type="file" class="form-control" id="image{{ loop.index }}" name="image">
                      {%else%}
                      <input type="file" class="form-control" id="image{{ loop.index }}" name="image">
                      {%endif%}
                    </div>

                    <div class="form-group">
                        {% if each_operator.displayInDashboard == True %}
                          <input type="checkbox" name="displayInDashboard" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="displayInDashboard" value="True">
                        {% endif %}
                        <label for="displayInDashboard{{ loop.index }}">Display In Dashboard</label>
                    </div>


                    <div class="form-group">
                        {% if each_operator.payWithoutFetchAllowed == True %}
                          <input type="checkbox" name="payWithoutFetchAllowed" value="True">
                        {% else %}
                          <input type="checkbox" name="payWithoutFetchAllowed" value="True">
                        {% endif %}
                        <label for="payWithoutFetchAllowed{{ loop.index }}">Pay Without Fetch Allowed</label>
                    </div>

                    <div class="form-group">
                      {% if each_operator.isBbps == True %}
                        <input type="checkbox" name="isBbps" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isBbps" value="True">
                      {% endif %}
                      <label for="isBbps{{ loop.index }}">Is BBPS</label>

                      {% if each_operator.isValidate == True %}
                        <input type="checkbox" name="isValidate" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isValidate" value="True">
                      {% endif %}
                      <label for="isValidate{{ loop.index }}">Is Validate</label>

                      {% if each_operator.isPortial == True %}
                        <input type="checkbox" name="isPortial" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isPortial" value="True">
                      {% endif %}
                      <label for="isPortial{{ loop.index }}">Is Partial</label>

                      {% if each_operator.isRandom == True %}
                        <input type="checkbox" name="isRandom" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isRandom" value="True">
                      {% endif %}
                      <label for="isRandom{{ loop.index }}">Is Random</label>
                    </div>

                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addOperatorUpdateTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Operator Update</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_operator_update')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="operator">Operator*</label>
                      <select class="form-control" name="operatorId" id="operator" required>
                        <option value="">Select Operator</option>
                        {% for each_operator in operatorsDropdownList %}
                        <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode1">ApiOperator Code1*</label>
                      <input type="text" class="form-control" id="apiOperatorCode1" name="apiOperatorCode1" placeholder="Enter ApiOperator Code1" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode2">ApiOperator Code2*</label>
                      <input type="text" class="form-control" id="apiOperatorCode2" name="apiOperatorCode2" placeholder="Enter ApiOperator Code2" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode3">ApiOperator Code1*</label>
                      <input type="text" class="form-control" id="apiOperatorCode3" name="apiOperatorCode3" placeholder="Enter ApiOperator Code3" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode4">ApiOperator Code4*</label>
                      <input type="text" class="form-control" id="apiOperatorCode4" name="apiOperatorCode4" placeholder="Enter ApiOperator Code4" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode5">ApiOperator Code5*</label>
                      <input type="text" class="form-control" id="apiOperatorCode5" name="apiOperatorCode5" placeholder="Enter ApiOperator Code5" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiOperatorCode6">ApiOperator Code6*</label>
                      <input type="text" class="form-control" id="apiOperatorCode6" name="apiOperatorCode6" placeholder="Enter ApiOperator Code6" required>
                    </div>
                  </div>

                </div>
              </div>

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


{% for each_operator_update in operatorUpdateList %}
<div class="modal fade" id="updateOperatorUpdateTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Edit Operator Update</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_operator_update', operatorUpdateId=each_operator_update.id) }}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                      <label for="operatorId{{ loop.index }}">Operator*</label>
                      <select class="form-control" id="operatorId{{ loop.index }}" name="operatorId">
                       {% for each_operator in operatorsDropdownList %}
                        {% if each_operator.id == each_operator_update.operatorId %}
                         <option selected value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                          {% else %}
                          <option value="">Select Operator</option>
                          <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                  <div class="form-group">
                      <label for="apiOperatorCode1{{ loop.index }}">Api OperatorCode1*</label>
                      <input type="text" class="form-control"id="apiOperatorCode1{{ loop.index }}"name="apiOperatorCode1" value="{{each_operator_update.apiOperatorCode1}}" required>
                  </div>

                  <div class="form-group">
                      <label for="apiOperatorCode2{{ loop.index }}">Api OperatorCode2</label>
                      <input type="text" class="form-control"id="apiOperatorCode2{{ loop.index }}"name="apiOperatorCode2" value="{{each_operator_update.apiOperatorCode2}}">
                  </div>

                  <div class="form-group">
                      <label for="apiOperatorCode3{{ loop.index }}">Api OperatorCode3</label>
                      <input type="text" class="form-control"id="apiOperatorCode3{{ loop.index }}"name="apiOperatorCode3" value="{{each_operator_update.apiOperatorCode3}}">
                  </div>

                  <div class="form-group">
                      <label for="apiOperatorCode4{{ loop.index }}">Api OperatorCode4</label>
                      <input type="text" class="form-control"id="apiOperatorCode4{{ loop.index }}"name="apiOperatorCode4" value="{{each_operator_update.apiOperatorCode4}}">
                  </div>

                  <div class="form-group">
                      <label for="apiOperatorCode5{{ loop.index }}">Api OperatorCode5</label>
                      <input type="text" class="form-control"id="apiOperatorCode5{{ loop.index }}"name="apiOperatorCode5" value="{{each_operator_update.apiOperatorCode5}}">
                  </div>

                  <div class="form-group">
                      <label for="apiOperatorCode6{{ loop.index }}">Api OperatorCode6</label>
                      <input type="text" class="form-control"id="apiOperatorCode6{{ loop.index }}"name="apiOperatorCode6" value="{{each_operator_update.apiOperatorCode6}}">
                  </div>

                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addOperatorParameterTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Operator Parameter</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_operator_parameter')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="parameterName">Display Name*</label>
                      <input type="text" class="form-control" id="displayName" name="displayName" placeholder="Enter Display name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="parameterName">Parameter Name*</label>
                      <input type="text" class="form-control" id="parameterName" name="parameterName" placeholder="Enter parameter name" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="operator">Operator*</label>
                      <select class="form-control" name="operatorId" id="operator" required>
                        {% for each_operator in operatorsDropdownList %}
                        <option value="" disabled selected hidden>Select a Operator</option>
                        <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="minLength">Min Length*</label>
                      <input type="text" class="form-control" id="minLength" name="minLength" placeholder="Enter min length" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="maxLength">Max Length*</label>
                      <input type="text" class="form-control" id="maxLength" name="maxLength" placeholder="Enter max length" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="sort">Sort*</label>
                      <input type="text" class="form-control" id="sort" name="sort" placeholder="Enter sort" required>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="fieldType">Field Type*</label>
                      <select  class="form-control" id="fieldType" name="fieldType" required>
                        <option value="" disabled selected hidden>Select a field type</option>
                        <option value="Input">Input</option>
                        <option value="Number">Number</option>
                        <option value="DropDown">Drop Down</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="pattern">Pattern</label>
                      <input type="text" class="form-control" id="pattern" name="pattern" placeholder="Enter pattern">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="apiCode">Api Code</label>
                      <input type="text" class="form-control" id="apiCode" name="apiCode" placeholder="Enter api code">
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="transactionAPIId">TransactionAPI*</label>
                      <select class="form-control" name="transactionAPIId" id="transactionAPIId" required>
                        {% for each_transaction_api in transactionAPIsList %}
                        <option value="" disabled selected hidden>Select a api name</option>
                        <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option> 
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isActive">
                        <label>Is Active</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="isMandatory">
                        <label>Is Mandatory</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="hasGrouping">
                        <label>Has Grouping</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                     <div class="form-group">
                        <input type="checkbox" value="True" checked name="hasIncludeApiCall">
                        <label>Has Include Api Call</label>
                    </div>
                  </div>
                  
                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" checked name="isReferenceKey">
                        <label>Is Reference Key</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="hasApiCall">
                        <label>Has Api Call</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <input type="checkbox" value="True" name="hasSubParameters">
                        <label>Has Sub Parameters</label>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="form-group">
                        <label for="apiCall">Api Call</label>
                        <select class="form-control" name="apiCall" id="apiCall">
                          <option value="" selected>Select api call</option>
                          <option value="operator">Operator</option>
                          <option value="plans">Plans</option>
                        </select>
                    </div>
                  </div>

                </div>
              </div>

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


{% for each_operator_parameter in operatorParametersList %}
<div class="modal fade" id="updateOperatorParameterTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Operator Parameter</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_operator_parameter',operatorParameterId=each_operator_parameter.id) }}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <div class="form-group">
                    <label for="displayName{{ loop.index }}">Display Name*</label>
                    <input type="text" class="form-control"id="displayName{{ loop.index }}"name="displayName" value="{{each_operator_parameter.displayName}}" required>
                  </div>

                  <div class="form-group">
                    <label for="parameterName{{ loop.index }}">Parameter Name*</label>
                    <input type="text" class="form-control"id="parameterName{{ loop.index }}" name="parameterName" value="{{each_operator_parameter.parameterName}}" required>
                  </div>

                  <div class="form-group">
                    <label for="operatorId{{ loop.index }}">Operator*</label>
                    <select class="form-control" id="operatorId{{ loop.index }}" name="operatorId">
                     {% for each_operator in operatorsDropdownList %}
                      {% if each_operator.id == each_operator_parameter.operatorId %}
                       <option selected value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                        {% else %}
                        <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                      {% endif %}
                     {% endfor %}
                    </select>
                  </div>

                  <div class="form-group">
                    <label for="minLength{{ loop.index }}">Min Length*</label>
                    <input type="text" class="form-control"id="minLength{{ loop.index }}" name="minLength" value="{{each_operator_parameter.minLength}}" required>
                  </div>

                  <div class="form-group">
                    <label for="maxLength{{ loop.index }}">Max Length*</label>
                    <input type="text" class="form-control"id="maxLength{{ loop.index }}" name="maxLength" value="{{each_operator_parameter.maxLength}}" required>
                  </div>


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

                      {% if each_operator_parameter.fieldType == "Number" %}
                      <option value="Number" selected>Number</option>
                      {% else %}
                      <option value="Number">Number</option>
                      {% endif %}

                      {% if each_operator_parameter.fieldType == "DropDown" %}
                      <option value="DropDown" selected>Drop Down</option>
                      {% else %}
                      <option value="DropDown">Drop Down</option>
                      {% endif %}
                    </select>
                  </div>

                  <div class="form-group">
                      <label for="sort{{ loop.index }}">Sort*</label>
                      <input type="text" class="form-control"id="sort{{ loop.index }}"name="sort" value="{{each_operator_parameter.sort}}" required>
                  </div>

                  <div class="form-group">
                      <label for="pattern{{ loop.index }}">Pattern</label>
                      <input type="text" class="form-control"id="pattern{{ loop.index }}"name="pattern" value="{{each_operator_parameter.pattern}}">
                  </div>

                  <div class="form-group">
                      <label for="apiCode{{ loop.index }}">API Code</label>
                      <input type="text" class="form-control"id="apiCode{{ loop.index }}"name="apiCode" value="{{each_operator_parameter.apiCode}}">
                  </div>

                  <div class="form-group">
                      <label for="transactionAPIId{{ loop.index }}">TransactionAPI*</label>
                      <select class="form-control" id="transactionAPIId{{ loop.index }}" name="transactionAPIId">
                       {% for each_transaction_api in transactionAPIsList %}
                        {% if each_transaction_api.id == each_operator_parameter.transactionAPIId %}
                         <option selected value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                          {% else %}
                          <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                  </div>


                  <div class="form-group">
                      {% if each_operator_parameter.isActive == True %}
                        <input type="checkbox" name="isActive" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isActive" value="True">
                      {% endif %}
                      <label for="isActive{{ loop.index }}">Is Active</label>
                  </div>

                  <div class="form-group">
                      {% if each_operator_parameter.isMandatory == True %}
                        <input type="checkbox" name="isMandatory" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isMandatory" value="True">
                      {% endif %}
                      <label for="isMandatory{{ loop.index }}">Is Mandatory</label>
                  </div>

                  <div class="form-group">
                      {% if each_operator_parameter.hasGrouping == True %}
                        <input type="checkbox" name="hasGrouping" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="hasGrouping" value="True">
                      {% endif %}
                      <label for="hasGrouping{{ loop.index }}">Has Grouping</label>
                  </div>


                  <div class="form-group">
                      {% if each_operator_parameter.hasIncludeApiCall == True %}
                        <input type="checkbox" name="hasIncludeApiCall" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="hasIncludeApiCall" value="True">
                      {% endif %}
                      <label for="hasIncludeApiCall{{ loop.index }}">Has Include Api Call</label>
                  </div>

                  <div class="form-group">
                      {% if each_operator_parameter.isReferenceKey == True %}
                        <input type="checkbox" name="isReferenceKey" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="isReferenceKey" value="True">
                      {% endif %}
                      <label for="isReferenceKey{{ loop.index }}">Is Reference Key</label>
                  </div>

                  <div class="form-group">
                      {% if each_operator_parameter.hasSubParameters == True %}
                        <input type="checkbox" name="hasSubParameters" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="hasSubParameters" value="True">
                      {% endif %}
                      <label for="hasSubParameters{{ loop.index }}">Has Sub Parameters</label>
                  </div>

                  <div class="form-group">
                      {% if each_operator_parameter.hasApiCall == True %}
                        <input type="checkbox" name="hasApiCall" value="True" checked>
                      {% else %}
                        <input type="checkbox" name="hasApiCall" value="True">
                      {% endif %}
                      <label for="hasApiCall{{ loop.index }}">Has Api Call</label>
                  </div>

                  <div class="form-group">
                        <label for="apiCall{{ loop.index }}">API Call</label>
                        <select class="form-control" id="apiCall{{ loop.index }}" name="apiCall">

                          {% if each_operator_parameter.apiCall=="" %}
                          <option value="" selected>Select</option>
                          {% else %}
                          <option value="">Select</option>
                          {% endif %}
                          {% if each_operator_parameter.apiCall == "operator" %}
                          <option value="operator" selected>Operator</option>
                          {% else %}
                          <option value="operator">Operator</option>
                          {% endif %}

                          {% if each_operator_parameter.apiCall == "plans" %}
                          <option value="plans" selected>Plans</option>
                          {% else %}
                          <option value="plans">Plans</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-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addOperatorGroupingTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Operator Grouping</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_operator_grouping')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="form-group">
                    <label for="groupName">Group Name*</label>
                    <input type="text" class="form-control" id="groupName" name="groupName" placeholder="Enter group name" required>
                  </div>

                  <div class="form-group">
                    <label for="operatorId">Operator*</label>
                    <select class="form-control" name="operatorId" id="operatorId" onChange="getOperators(this.value,'add','')" required>
                      <option value="" selected>Select operator name</option>
                      {% for each_operator in operatorsDropdownList %}
                      <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option> 
                      {% endfor %}
                    </select>
                  </div>

                  <div class="form-group">
                      <label for="operatorParameterId">Operator Parameter*</label>
                      <select class="form-control" name="operatorParameterId" id="operatorParameterIdadd" required> 
                        <option value="">Select operator parameter</option>
                      </select>
                  </div>

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

                </div>
              </div>

              <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
              </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

{% for each_operator_grouping in operatorGroupingList %}
<div class="modal fade" id="updateOperatorGroupingTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Operator Grouping</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_operator_grouping',operatorGroupingId=each_operator_grouping.id) }}" enctype="multipart/form-data">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <div class="form-group">
                      <label for="groupName">Group Name*</label>
                      <input type="text" class="form-control"id="groupName"name="groupName" value="{{each_operator_grouping.groupName}}" required>
                  </div>

                  <div class="form-group">
                      <label for="operator">Operator*</label>
                      <select class="form-control" id="operator" name="operatorId"  onChange="getOperators(this.value,{{loop.index}},'')">
                       {% for each_operator in operatorsDropdownList %}
                        {% if each_operator.id == each_operator_grouping.operatorId %}
                         <option selected value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                          {% else %}
                          <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                  </div>

                  <div class="form-group">
                      <label for="operatorParameterId">Operator Parameter*</label>
                      <select class="form-control" id="operatorParameterId{{loop.index}}" name="operatorParameterId" >
                       {% for each_operator_parameter in activeOperatorParametersList %}
                        {% if each_operator_parameter.id == each_operator_grouping.operatorParameterId %}
                         <option selected value="{{each_operator_parameter.id}}">{{each_operator_parameter.parameterName}}</option>
                          {% else %}
                          <option value="{{each_operator_parameter.id}}">{{each_operator_parameter.parameterName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                  </div>

                  <script>
                    $( document ).ready(function() {
                      getOperators("{{each_operator_grouping.operatorId}}","{{loop.index}}","{{each_operator_grouping.operatorParameterId}}")
                  });
                  </script>

                  <div class="form-group">
                      <label for="value">Value*</label>
                      <input type="text" class="form-control"id="value"name="value" value="{{each_operator_grouping.value}}" required>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addSubParameterTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Sub Parameter</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_sub_parameter')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="form-group">
                    <label for="operatorParameterId">Parent Parameter*</label>
                    <select class="form-control" name="operatorParameterId" id="operatorParameterId" onChange="getOperatorGrouping(this.value,'add','')" required>
                      <option value="">Select operator parameter</option> 
                     {% for each_operator_parameter in hasSubOperatorParametersList %}
                      <option value="{{each_operator_parameter.id}}">{{each_operator_parameter.displayName}}</option> 
                      {% endfor %}
                    </select>
                  </div>

                  <div class="form-group">
                      <label for="operatorGroupingId">Operator Grouping*</label>
                      <select class="form-control" name="operatorGroupingId" id="operatorGroupingIdadd" required> 
                        <option value="">Select operator grouping</option>
                      </select>
                  </div>


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

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

                <div class="form-group">
                    <label for="operator">Operator*</label>
                    <select class="form-control" name="operatorId" id="operator" required>
                      <option value="">Select a Operator</option>
                      {% for each_operator in operatorsDropdownList %}
                      <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option> 
                      {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                  <label for="minLength">Min Length*</label>
                  <input type="text" class="form-control" id="minLength" name="minLength" placeholder="Enter min length" required>
                </div>

                <div class="form-group">
                  <label for="maxLength">Max Length*</label>
                  <input type="text" class="form-control" id="maxLength" name="maxLength" placeholder="Enter max length" required>
                </div>

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

                <div class="form-group">
                  <label for="fieldType">Field Type*</label>
                  <select  class="form-control" id="fieldType" name="fieldType" required>
                    <option value=""selected>Select a field type</option>
                    <option value="Input">Input</option>
                    <option value="Number">Number</option>
                    <option value="DropDown">Drop Down</option>
                  </select>
                </div>

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

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

                <div class="form-group">
                    <label for="transactionAPIId">TransactionAPI*</label>
                    <select class="form-control" name="transactionAPIId" id="transactionAPIId" required>
                      <option value="">Select a api name</option>
                      {% for each_transaction_api in transactionAPIsList %}
                      <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option> 
                      {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <input type="checkbox" value="True" name="isActive">
                    <label>Is Active</label>
                </div>

                <div class="form-group">
                    <input type="checkbox" value="True" name="isMandatory">
                    <label>Is Mandatory</label>
                </div>

                <div class="form-group">
                    <input type="checkbox" value="True" name="hasGrouping">
                    <label>Has Grouping</label>
                </div>

                 <div class="form-group">
                    <input type="checkbox" value="True" checked name="hasIncludeApiCall">
                    <label>Has Include Api Call</label>
                </div>
                
                <div class="form-group">
                    <input type="checkbox" value="True" checked name="isReferenceKey">
                    <label>Is Reference Key</label>
                </div>

                <div class="form-group">
                    <input type="checkbox" value="True" name="hasApiCall">
                    <label>Has Api Call</label>
                </div>

                <div class="form-group">
                    <label for="apiCall">Api Call</label>
                    <select class="form-control" name="apiCall" id="apiCall">
                      <option value="" selected>Select api call</option>
                      <option value="operator">Operator</option>
                      <option value="plans">Plans</option>
                    </select>
                </div>

                </div>
              </div>

              <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary" id="form_submit">Submit</button>
              </div>
            </form>
        </div>
    </div>
</div>
<!-- End Create New Bank Modal -->

{% for each_sub_parameter in subParametersList %}
<div class="modal fade" id="updateSubParameterTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Sub Parameter</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_sub_parameter',subParameterId=each_sub_parameter.id) }}" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                      <label for="operatorParameterId{{ loop.index }}">Parent Parameter*</label>
                      <select class="form-control" id="operatorParameterId{{ loop.index }}" name="operatorParameterId"  onChange="getOperatorGrouping(this.value,'{{loop.index}}','')">
                       {% for each_operator_parameter in hasSubOperatorParametersList %}
                        {% if each_operator_parameter.id == each_sub_parameter.operatorParameterId %}
                         <option selected value="{{each_operator_parameter.id}}">{{each_operator_parameter.displayName}}</option>
                          {% else %}
                          <option value="{{each_operator_parameter.id}}">{{each_operator_parameter.displayName}}</option>
                        {% endif %}
                       {% endfor %}
                      </select>
                    </div>

                      <div class="form-group">
                        <label for="operatorGroupingId{{ loop.index }}">Operator Grouping*</label>
                        <select class="form-control" id="operatorGroupingId{{loop.index}}" name="operatorGroupingId">
                        <!-- {% for each_operator_grouping in operatorGroupingList %}
                          {% if each_operator_grouping.id == each_sub_parameter.operatorGroupingId %}
                           <option selected value="{{each_operator_grouping.id}}">{{each_operator_grouping.groupingName}}</option>
                            {% else %}
                            <option value="{{each_operator_grouping.id}}">{{each_operator_grouping.groupingName}}</option>
                          {% endif %}
                         {% endfor %}-->
                        </select>
                        <script>
                        $( document ).ready(function() {
                          getOperatorGrouping("{{each_sub_parameter.operatorParameterId}}","{{loop.index}}","{{each_sub_parameter.operatorGroupingId}}")
                      });
                      </script>

                      </div>

                     <div class="form-group">
                        <label for="displayName">Display Name*</label>
                        <input type="text" class="form-control"id="displayName{{ loop.index }}"name="displayName" value="{{each_sub_parameter.displayName}}" required>
                    </div>


                    <div class="form-group">
                        <label for="parameterName">Parameter Name*</label>
                        <input type="text" class="form-control"id="parameterName{{ loop.index }}"name="parameterName" value="{{each_sub_parameter.parameterName}}" required>
                    </div>

                   

                    <div class="form-group">
                        <label for="operator">Operator*</label>
                        <select class="form-control" id="operatorId{{ loop.index }}" name="operatorId">
                         {% for each_operator in operatorsDropdownList %}
                          {% if each_operator.id == each_sub_parameter.operatorId %}
                           <option selected value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                            {% else %}
                            <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                          {% endif %}
                         {% endfor %}
                        </select>
                      </div>

                    <div class="form-group">
                        <label for="minLength">Min Length*</label>
                        <input type="text" class="form-control"id="minLength{{ loop.index }}"name="minLength" value="{{each_sub_parameter.minLength}}" required>
                    </div>

                    <div class="form-group">
                        <label for="maxLength">Max Length*</label>
                        <input type="text" class="form-control"id="maxLength{{ loop.index }}"name="maxLength" value="{{each_sub_parameter.maxLength}}" required>
                    </div>

                    <!-- <div class="form-group">
                        <label for="fieldType">Field Type*</label>
                        <input type="text" class="form-control"id="fieldType"name="fieldType" value="{{each_sub_parameter.fieldType}}" required>
                    </div> -->


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

                          {% if each_sub_parameter.fieldType == "Number" %}
                          <option value="Number" selected>Number</option>
                          {% else %}
                          <option value="Number">Number</option>
                          {% endif %}

                          {% if each_sub_parameter.fieldType == "DropDown" %}
                          <option value="DropDown" selected>Drop Down</option>
                          {% else %}
                          <option value="DropDown">Drop Down</option>
                          {% endif %}
                        </select>
                      </div>



                    <div class="form-group">
                        <label for="sort">Sort*</label>
                        <input type="text" class="form-control"id="sort{{ loop.index }}"name="sort" value="{{each_sub_parameter.sort}}" required>
                    </div>

                    <!-- <div class="form-group">
                        <label for="manualSort">Manual Sort*</label>
                        <input type="text" class="form-control"id="manualSort"name="manualSort" value="{{each_sub_parameter.manualSort}}" required>
                    </div> -->

                    <div class="form-group">
                        <label for="pattern">Pattern</label>
                        <input type="text" class="form-control"id="pattern{{ loop.index }}"name="pattern" value="{{each_sub_parameter.pattern}}">
                    </div>

                    <div class="form-group">
                        <label for="apiCode">API Code</label>
                        <input type="text" class="form-control"id="apiCode{{ loop.index }}"name="apiCode" value="{{each_sub_parameter.apiCode}}">
                    </div>

                    <div class="form-group">
                        <label for="transactionAPIId">TransactionAPI*</label>
                        <select class="form-control" id="transactionAPIId{{ loop.index }}" name="transactionAPIId">
                         {% for each_transaction_api in transactionAPIsList %}
                          {% if each_transaction_api.id == each_sub_parameter.transactionAPIId %}
                           <option selected value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                            {% else %}
                            <option value="{{each_transaction_api.id}}">{{each_transaction_api.apiName}}</option>
                          {% endif %}
                         {% endfor %}
                        </select>
                    </div>


                    <div class="form-group">
                        {% if each_sub_parameter.isActive == True %}
                          <input type="checkbox" name="isActive" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isActive" value="True">
                        {% endif %}
                        <label for="isActive{{ loop.index }}">Is Active</label>
                    </div>

                    <div class="form-group">
                        {% if each_sub_parameter.isMandatory == True %}
                          <input type="checkbox" name="isMandatory" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isMandatory" value="True">
                        {% endif %}
                        <label for="isMandatory{{ loop.index }}">Is Mandatory</label>
                    </div>

                    <div class="form-group">
                        {% if each_sub_parameter.hasGrouping == True %}
                          <input type="checkbox" name="hasGrouping" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="hasGrouping" value="True">
                        {% endif %}
                        <label for="hasGrouping{{ loop.index }}">Has Grouping</label>
                    </div>


                    <div class="form-group">
                        {% if each_sub_parameter.hasIncludeApiCall == True %}
                          <input type="checkbox" name="hasIncludeApiCall" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="hasIncludeApiCall" value="True">
                        {% endif %}
                        <label for="hasIncludeApiCall{{ loop.index }}">Has Include Api Call</label>
                    </div>

                    <div class="form-group">
                        {% if each_sub_parameter.isReferenceKey == True %}
                          <input type="checkbox" name="isReferenceKey" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="isReferenceKey" value="True">
                        {% endif %}
                        <label for="isReferenceKey{{ loop.index }}">Is Reference Key</label>
                    </div>

                    <div class="form-group">
                        {% if each_sub_parameter.hasApiCall == True %}
                          <input type="checkbox" name="hasApiCall" value="True" checked>
                        {% else %}
                          <input type="checkbox" name="hasApiCall" value="True">
                        {% endif %}
                        <label for="hasApiCall{{ loop.index }}">Has Api Call</label>
                    </div>

                    <div class="form-group">
                          <label for="apiCall{{ loop.index }}">API Call</label>
                          <select class="form-control" id="apiCall{{ loop.index }}" name="apiCall">

                            {% if each_sub_parameter.apiCall=="" %}
                            <option value="" selected>Select</option>
                            {% else %}
                            <option value="">Select</option>
                            {% endif %}
                            {% if each_sub_parameter.apiCall == "operator" %}
                            <option value="operator" selected>Operator</option>
                            {% else %}
                            <option value="operator">Operator</option>
                            {% endif %}

                            {% if each_sub_parameter.apiCall == "plans" %}
                            <option value="plans" selected>Plans</option>
                            {% else %}
                            <option value="plans">Plans</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-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


<div class="modal fade" id="addSubParameterGroupingTask" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="mail-ComposeLabel">Create New Sub Parameter Grouping</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{url_for('service_configurations.add_sub_parameter_grouping')}}" enctype="multipart/form-data">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="modal-body px-4">
                <div class="row">
                  <div class="form-group">
                    <label for="groupName">Group Name*</label>
                    <input type="text" class="form-control" id="groupName" name="groupName" placeholder="Enter group name" required>
                  </div>

                  <div class="form-group">
                    <label for="operatorId">Operator*</label>
                    <select class="form-control" name="operatorId" id="operatorId" onChange="getsubOperators(this.value,'add','')" required>
                      <option value="" selected>Select operator name</option>
                      {% for each_operator in operatorsDropdownList %}
                      <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option> 
                      {% endfor %}
                    </select>
                  </div>

                  <div class="form-group">
                      <label for="subParameterId">Operator Sub Parameter*</label>
                      <select class="form-control" name="subParameterId" id="operatorsubParameterIdadd" required> 
                        <option value="">Select sub parameter</option>
                      </select>
                  </div>

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

                </div>
              </div>

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

{% for each_sub_parameter_grouping in subParameterGroupingsList %}
<div class="modal fade" id="updateSubParameterGroupingTask{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel{{ loop.index }}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateTaskLabel{{ loop.index }}">Update Sub Parameter Grouping</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ url_for('service_configurations.update_service_grouping', serviceGroupingId=each_service_grouping.id) }}" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="form-group">
                        <label for="groupName">Group Name*</label>
                        <input type="text" class="form-control"id="groupName"name="groupName" value="{{each_sub_parameter_grouping.groupName}}" required>
                    </div>

                    <div class="form-group">
                        <label for="operator">Operator*</label>
                        <select class="form-control" id="operator" name="operatorId"  onChange="getsubOperators(this.value,{{loop.index}},'')">
                         {% for each_operator in operatorsDropdownList %}
                          {% if each_operator.id == each_sub_parameter_grouping.operatorId %}
                           <option selected value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                            {% else %}
                            <option value="{{each_operator.id}}">{{each_operator.operatorName}}</option>
                          {% endif %}
                         {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                      <label for="subParameterId">Operator Sub Parameter*</label>
                      <select class="form-control" id="operatorsubParameterId{{loop.index}}" name="subParameterId">
                      </select>
                      <script>
                      $( document ).ready(function() {
                        getsubOperators("{{each_sub_parameter_grouping.operatorId}}","{{loop.index}}","{{each_sub_parameter_grouping.subParameterId}}")
                    });
                    </script>

                    </div>

                    <div class="form-group">
                        <label for="value">Value*</label>
                        <input type="text" class="form-control"id="value"name="value" value="{{each_sub_parameter_grouping.value}}" required>
                    </div>
                    <!-- Add more edit form fields as needed -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}


</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>
  
{%endblock%}