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


<script>
  function confirmDelete(url) {
    if (confirm("Are you sure want to delete?")) {
      window.location.href = url;
    }
  }
</script>

<style>
  select option:first-child {
    color: #000;
    /* grey for placeholders */
  }

  select:invalid {
    color: #000;
    /* force placeholder to stay grey on load */
  }

  select:valid {
    color: #000;
    /* normal black once a real value is chosen */
  }

  select option {
    color: #000;
    /* fallback color for all other options */
  }
  .centered {
        text-align: center;
  }
</style>

<script>
  function openUpdateModal(operator) {
    // Set the form action URL using the ID
    const updateOperator = "{{ url_for('service_configurations.update_operator',operatorId='__ID__') }}";
    const formAction = updateOperator.replace('__ID__', operator.id);
    document.getElementById('update_operator').action = formAction;
    resetFormDataNew('update_operator');

    // Populate the form fields
    document.getElementById('edit_operatorName').value = operator.operatorName || '';
    document.getElementById('edit_allowType').value = operator.allowType || '';
    document.getElementById('edit_apiCode').value = operator.apiCode || '';
    document.getElementById('edit_apiType').value = operator.apiType || '';
     $('#edit_apiType').trigger('chosen:updated');
    document.getElementById('edit_sorting').value = operator.sorting || '';
    document.getElementById('edit_displayInDashboard').checked = operator.displayInDashboard === true;
    document.getElementById('edit_payWithoutFetchAllowed').checked = operator.payWithoutFetchAllowed === true;
    document.getElementById('edit_isBbps').checked = operator.isBbps === true;
    document.getElementById('edit_isValidate').checked = operator.isValidate === true;

    

    const TransactionselectElement = document.getElementById('edit_transactionAPIId');
    const Transactionoptions = TransactionselectElement.options;
    // console.log("options:", options);


    for (let option of Transactionoptions) {
      if (operator.transactionAPIId === option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }


    const ServiceselectElement = document.getElementById('edit_serviceId');
    const Serviceoptions = ServiceselectElement.options;
    // console.log("options:", options);


    for (let option of Serviceoptions) {
      if (operator.serviceId === option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }

    const TaxSelectElement = document.getElementById('edit_taxTypeId');
    const Taxoptions = TaxSelectElement.options;
    // console.log("options:", options);


    for (let option of Taxoptions) {
      if (operator.taxTypeId === option.value) {

        option.selected = true;
      } else {
        option.selected = false;
      }
    }

    const ServiceGoupingSelectElement = document.getElementById('edit_serviceGroupingId');
    const ServiceGoupingoptions = ServiceGoupingSelectElement.options;
    // console.log("options:", options);


    for (let option of ServiceGoupingoptions) {
      if (operator.serviceGroupingId === option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }

    const StateSelectElement = document.getElementById('edit_stateId');
    const Stateoptions = StateSelectElement.options;
    // console.log("options:", options);


    for (let option of Stateoptions) {
      if (operator.stateId === option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }

    const imagePreview = document.getElementById('imagePreview');

    if (operator.image) {
      // If it's already a full URL, use it directly. If not, prefix with `/`
      if (operator.image.startsWith('http') || operator.image.startsWith('/static')) {
        imagePreview.src = operator.image;
        console.log("((Image src)))",operator.image, imagePreview.src)
      } else {
        imagePreview.src = '/' + operator.image.replace(/^\/+/, '');
      }
      imagePreview.style.display = 'block';
    } else {
      imagePreview.src = '';
      imagePreview.style.display = 'none';
    }


    $(TransactionselectElement).trigger('chosen:updated');
    $(ServiceselectElement).trigger('chosen:updated');
    $(TaxSelectElement).trigger('chosen:updated');
    $(ServiceGoupingSelectElement).trigger('chosen:updated');
    $(StateSelectElement).trigger('chosen:updated')

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('updateOperatorTask'));
    modal.show();
  }

</script>



<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">Utility Master</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">Operators</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 justify-content-between">
            <div class="card-title">
              Operators List
            </div>
            <div class="prism-toggle">
              {% if 'add' in session.get('operatorPermissions', []) %}
              <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal"
                data-bs-target="#addOperatorTask" onClick="resetFormDataNew('add_operator')">
                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Operator
              </button>
              {% endif %}
            </div>
          </div>
          <div class="card-body">
            <center>
              {% if error %}
              <h2><b>
                  <center style="color:RED">{{ error }}</center>
                </b></h2>
              {% endif %}
            </center>

            <div class="row">
              <div class="col-xl-12">
                <form method="GET" action="{{ url_for('service_configurations.operators_configurations_list')}}"
                  class="row gy-2 gx-3 align-items-center mb-4">

                  <div class="col-auto">
                    <input type="text" class="form-control" value="{{search_element}}" name="search_element"
                      id="autoSizingInput" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" minlength="3" maxlength="75"
                      placeholder="Search operator name">
                  </div>

                  <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Search</button>
                  </div>
                    <div class="col-auto">
                            <a href="{{url_for('service_configurations.operators_configurations_list')}}"><button type="button"
                                    class="btn btn-warning">Reset</button></a>
                        </div>
                  {% for error in form.search_element.errors %}
                  <span class="text-danger" class="error">{{ error }}</span>
                  {% endfor %}
                </form>
              </div>
            </div>

            <!-- Add some space -->
            <div class="mt-3"></div>
            <!-- End space -->
            <div class="table-responsive">
              <table id="datatable-basic" class="table text-nowrap">
                <thead class="table-primary">
                  <tr>
                    <th scope="col">S.No</th>
                    <th scope="col">Operator Name</th>
                    <th scope="col">Sub 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">Category Name</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>
                    {% if 'edit' in session.get('operatorPermissions', []) %}
                        <th scope="col">Status</th>
                    {% endif %}
                    {% if 'edit' in session.get('operatorPermissions', []) %}
                        <th scope="col">Action</th>
                    {% elif 'delete' in session.get('operatorPermissions', []) %}
                        <th scope="col">Action</th>
                    {% endif %}
                </thead>
                <tbody>
                   {% if operatorsList %}
                  {% for each_operator in operatorsList %}
                  <tr>
                    <td>{{snoCount + loop.index}}</td>

                    {% if each_operator.operatorName %}
                    <td>{{each_operator.operatorName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    {% if each_operator.serviceId.serviceName %}
                    <td>{{each_operator.serviceId.serviceName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    

                    {% if each_operator.allowType %}
                    <td>{{each_operator.allowType}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    <!-- <td>{{each_operator.amountPlans}}</td> -->

                    {% if each_operator.transactionAPIId.apiName %}
                    <td>{{each_operator.transactionAPIId.apiName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    

                    {% if each_operator.apiCode %}
                    <td>{{each_operator.apiCode}}</td>
                    {% else %}
                    <td>-</td>
                    {% endif %}
                    

                    {% if each_operator.apiType %}
                    <td>{{each_operator.apiType}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    

                    </td>
                    {%if each_operator.image %}
                    <td><img src="{{domain+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 %}
                    
                    {% if each_operator.taxTypeId.taxTypeName %}
                    <td>{{each_operator.taxTypeId.taxTypeName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    
                    {% if each_operator.serviceGroupingId.name %}
                    <td>{{each_operator.serviceGroupingId.name}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    <!-- <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.stateId.stateName}}</td>

                    {% if 'edit' in session.get('operatorPermissions', []) %}
                    <td>
                      {% if each_operator.status == 1 %}
                      <a class="btn btn-sm btn-success"
                        href="{{ url_for('service_configurations.update_operator_status', operatorId=each_operator.id, operatorPage=operatorPage,search_element=search_element) }}" data-requires-location>Active</a>
                      {% else %}
                      <a class="btn btn-sm btn-warning"
                        href="{{ url_for('service_configurations.update_operator_status', operatorId=each_operator.id, operatorPage=operatorPage,search_element=search_element) }}" data-requires-location>Inactive</a>
                      {% endif %}
                    </td>
                    {% endif %}
                    <td>
                      {% if 'edit' in session.get('operatorPermissions', []) %}
                      <a href="javascript:void(0);" onclick='openUpdateModal({
                                              "id": "{{ each_operator.id }}",
                                              "operatorName": {{ each_operator.operatorName | tojson }},
                                              "allowType": {{ each_operator.allowType | tojson }},
                                              "transactionAPIId": "{{ each_operator.transactionAPIId.id }}",
                                              "serviceId": "{{ each_operator.serviceId.id }}",
                                              "taxTypeId": "{{ each_operator.taxTypeId.id }}",
                                              "serviceGroupingId": "{{ each_operator.serviceGroupingId.id }}",
                                              "apiCode": {{ each_operator.apiCode | tojson }},
                                              "apiType": {{ each_operator.apiType | tojson }},
                                              "sorting": {{ each_operator.sorting | tojson }},
                                              "stateId": "{{ each_operator.stateId.id }}",
                                              "image": {{ each_operator.image | tojson }},
                                              "displayInDashboard": {{ each_operator.displayInDashboard | tojson }},
                                              "payWithoutFetchAllowed": {{ each_operator.payWithoutFetchAllowed | tojson }},
                                              "isBbps": {{ each_operator.isBbps | tojson }},
                                              "isValidate": {{ each_operator.isValidate | tojson }},
                                          })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                        <i class="ri-edit-line"></i>
                      </a>
                      {% endif %}
                      {% if 'delete' in session.get('operatorPermissions', []) %}
                      <a href="javascript:void(0);"
                        onclick="confirmDelete('{{ url_for('service_configurations.delete_operator', operatorId=each_operator.id,operatorPage=operatorPage, search_element = search_element) }}')"><span
                          class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                            class="ri-delete-bin-line"></i></span></a>
                      </a>
                      {% endif %}
                    </td>

                    {% endfor %}
                    {% else %}
                    <tr ><td colspan="18" style="text-align: center;">No Data Found</td> </tr>
                    {% endif %}

                </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>
      </div>
    </div>
  </div>
  <!--End::row-1 -->

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


<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"
        id="add_operator">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_add" name="latitude">
        <input type="hidden" id="longitude_add" name="longitude">
        <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" minlength="3"
                  maxlength="75" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="Operator Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter name" required>
                <span id="operatorName_error" class="error"></span>
              </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" minlength="1" maxlength="15"
                  pattern="^[a-zA-Z0-9\s]+$"
                  title="Allow Type must contain only alphanumeric characters (letters, digits) and spaces."
                  placeholder="Enter allow type" required>
                <span id="allowType_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="transactionAPIId">Transaction API*</label>
                <select class="form-control chosen-select" name="transactionAPIId" id="transactionAPIId" required>
                  <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>
                <span id="transactionAPIId_error" class="error"></span>
              </div>
            </div>

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

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

            <div class="col-md-6">
              <div class="form-group">
                <label for="serviceGroupingId">Categories</label>
                <select class="form-control chosen-select" id="serviceGroupingId" name="serviceGroupingId" required>
                  <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>
                <span id="serviceGroupingId_error" class="error"></span>
              </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" minlength="1" maxlength="15"
                  pattern="^[a-zA-Z0-9\s]+$"
                  title="api code must contain only alphanumeric characters (letters, digits) and spaces."
                  placeholder="Enter api code">
                <span id="apiCode_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="apiType">Api Type*</label>
                <select name="apiType" class="form-control chosen-select" id="apiType">
                  <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>
                <span id="apiType_error" class="error"></span>
              </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" minlength="1" maxlength="10"
                  pattern="^\d+(\.\d+)?$" title="sorting must contain only numeric characters"
                  placeholder="Enter sorting">
                <span id="sorting_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="state">State</label>
                <select class="form-control chosen-select" name="stateId" id="stateId" required>
                  <option value="" disabled selected hidden>Select state</option>
                  {% for each_state in statesList %}
                  <option value="{{each_state.id}}">{{each_state.stateName}}</option>
                  {% endfor %}
                </select>
                <span id="stateId_error" class="error"></span>
              </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">
                <span id="image_error" class="error"></span>
              </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>
              <span id="displayInDashboard_error" class="error"></span>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <input type="checkbox" value="True" name="payWithoutFetchAllowed">
                <label>Pay Without Fetch Allowed</label>
              </div>
              <span id="payWithoutFetchAllowed_error" class="error"></span>
            </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>
              <span id="isBbps_error" class="error"></span>
              <span id="isValidate_error" class="error"></span>
            </div>

          </div>
        </div>

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


<div class="modal fade" id="updateOperatorTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateTaskLabel">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"
          enctype="multipart/form-data" id="update_operator">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_update" name="latitude">
          <input type="hidden" id="longitude_update" name="longitude">
          <div class="form-group">
            <label for="operatorName">Name*</label>
            <input type="text" class="form-control" id="edit_operatorName" name="operatorName" minlength="3"
              maxlength="75" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Operator Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
              placeholder="Enter name" required>
            <span id="operatorName_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="allowType">Allow Type</label>
            <input type="text" class="form-control" id="edit_allowType" name="allowType" minlength="1" maxlength="15"
              pattern="^[a-zA-Z0-9\s]+$"
              title="Allow Type must contain only alphanumeric characters (letters, digits) and spaces."
              placeholder="Enter allow type" required>
            <span id="allowType_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="transactionAPIId">TransactionAPI*</label>
            <select class="form-control chosen-select" id="edit_transactionAPIId" name="transactionAPIId">
              <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>
            <span id="transactionAPIId_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="serviceId">Sub Service Name*</label>
            <select class="form-control chosen-select" id="edit_serviceId" name="serviceId" required>
              <option value="">Select sub service</option>
              {% for each_service in servicesDropdownList %}
              <option value="{{each_service.id}}">{{each_service.serviceName}}</option>
              {% endfor %}
            </select>
            <span id="serviceId_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="taxTypeId">Tax Type*</label>
            <select class="form-control chosen-select" id="edit_taxTypeId" name="taxTypeId">
              <option value="" disabled selected hidden>Select tax type</option>
              {% for each_tax_type in taxTypesList %}
              <option value="{{each_tax_type.id}}">{{each_tax_type.taxTypeName}}</option>
              {% endfor %}
            </select>
            <span id="taxTypeId_edit_error" class="error"></span>
          </div>
          <div class="form-group">
            <label for="serviceGroupingId">Categories*</label>
            <select class="form-control chosen-select" id="edit_serviceGroupingId" name="serviceGroupingId" required>
              <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>
            <span id="serviceGroupingId_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="apiCode">Api Code</label>
            <input type="text" class="form-control" id="edit_apiCode" minlength="1" maxlength="15"
              pattern="^[a-zA-Z0-9\s]+$"
              title="api code must contain only alphanumeric characters (letters, digits) and spaces." name="apiCode"
              placeholder="Enter api code">
            <span id="apiCode_edit_error" class="error"></span>
          </div>


          <div class="form-group">
            <label for="apiType">Type*</label>
            <select class="form-control chosen-select" id="edit_apiType" name="apiType">
              <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>
            <span id="apiType_edit_error" class="error"></span>
          </div>


          <div class="form-group">
            <label for="sorting">Sorting</label>
            <input type="text" class="form-control" id="edit_sorting" name="sorting" minlength="1" maxlength="10"
              pattern="^\d+(\.\d+)?$" title="sorting must contain only numeric characters" placeholder="Enter sorting">
            <span id="sorting_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="stateId">State</label>
            <select class="form-control chosen-select" id="edit_stateId" name="stateId" required>
              <option value="" disabled selected hidden>Select state</option>
              {% for each_state in statesList %}
              <option value="{{each_state.id}}">{{each_state.stateName}}</option>
              {% endfor %}
            </select>
            <span id="stateId_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="image">Update Image</label>
            <input type="file" class="form-control" id="edit_image" name="image">
            <span id="image_edit_error" class="error"></span>
            <img id="imagePreview" src="" alt="Current Image" height="150" width="150" style="display: none;">
          </div>

          <div class="form-group">
            <input type="checkbox" name="displayInDashboard" id="edit_displayInDashboard" value="True">
            <label for="displayInDashboard">Display In Dashboard</label>
          </div>
          <span id="displayInDashboard_edit_error" class="error"></span>


          <div class="form-group">
            <input type="checkbox" name="payWithoutFetchAllowed" id="edit_payWithoutFetchAllowed" value="True">
            <label for="payWithoutFetchAllowed">Pay Without Fetch Allowed</label>
          </div>
          <span id="payWithoutFetchAllowed_edit_error" class="error"></span>

          <div class="form-group">
            <input type="checkbox" name="isBbps" id="edit_isBbps" value="True">
            <label for="isBbps">Is BBPS</label>

            <input type="checkbox" name="isValidate" id="edit_isValidate" value="True">
            <label for="isValidate">Is Validate</label>
            <span id="isBbps_edit_error" class="error"></span>
            <span id="isValidate_edit_error" class="error"></span>
          </div>

          <!-- Add more edit form fields as needed -->
          <div class="modal-footer justify-content-between">
            <span id="edit_errorMessage" class="error"></span>
            <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary form_submit">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">

  $(document).ready(function () {

    $('#add_operator').validate({
      rules: {
        operatorName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        allowType: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        transactionAPIId: {
          required: true,
        },
        serviceId: {
          required: true,
        },
        taxTypeId: {
          required: true,
        },
        serviceGroupingId: {
          required: true,
        },
        apiCode: {
          minlength: 1,
          maxlength: 15,
        },
        sorting: {
          minlength: 1,
          maxlength: 10,
        },
        stateId: {
          required: true,
        },
        image: {
          extension: "png|jpg|jpeg"

        },
      },
      messages: {
        operatorName: {
          required: 'Name is required',
          minlength: 'Name must contains between 3 and 75 characters',
          maxlength: 'Name must contains between 3 and 75 characters',
        },
        allowType: {
          required: 'Allow Type Name is required',
          minlength: 'Allow Type must contains between 1 and 15 characters',
          maxlength: 'Allow Type must contains between 1 and 15 characters',
        },
        transactionAPIId: {
          required: 'Transaction API is required',
        },
        serviceId: {
          required: 'Sub Service Name is required',
        },
        taxTypeId: {
          required: 'Tax Type Name is required',
        },
        serviceGroupingId: {
          required: 'Categories is required',
        },
        apiCode: {
          minlength: 'Api Code must contains between 1 and 15 characters',
          maxlength: 'Api Code must contains between 1 and 15 characters',
        },
        sorting: {
          minlength: 'Sorting must contains between 1 and 10 numeric characters',
          maxlength: 'Sorting must contains between 1 and 10 numeric characters',
        },
        stateId: {
          required: 'State Name is required',
        },
        image: {
          extension: "invalid format select png or jpg or jpeg file"

        },

      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
        event.preventDefault();
        getLocationAndProceed(
              function (lat, lng) {
                 
                  $(form).find('input[name="latitude"]').val(lat);
                  $(form).find('input[name="longitude"]').val(lng);
                    let formData = new FormData(form);

                    $.ajax({
                      url: form.action,
                      type: form.method,
                      data: formData,
                      processData: false,  // Don't process the data as a query string
                      contentType: false,
                      xhrFields: {
                                            withCredentials: true   // THIS ensures cookies/session are sent
                                        },
                      success: function (response) {
                        console.log("in submit hndler", response)
                        if (response.responseStatus == 1 || response.responseStatus == 4) {
                          form.reset();
                          location.reload();

                        } else if (response.responseStatus == 0) {
                          $('.form_submit').prop('disabled', false);
            				      $('#newLoadingModel').hide();
                          console.log(response)
                          $.each(response.result, function (key, value) {
                            $('#' + key + "_error").text(value)
                          });
                          return false;
                        } else if (response.responseStatus == 2) {
                          $('.form_submit').prop('disabled', false);
            				      $('#newLoadingModel').hide();
                          $('#errorMessage').text(response.result);
                          return false;
                        } else {
                          location.reload();
                        }

                      },
                        error: function (xhr) {
                            // You can also reload page after error (e.g. CSRF token mismatch)
                            location.reload();
                        }
                    });
                  },
                  function () {
                              $('.form_submit').prop('disabled', false);
                              $('#newLoadingModel').hide();
                                  alert("Location access is required to proceed. Please enable it in your browser.");
                          }
                      );
                  }
                });
              });


  $(document).ready(function () {

    $('#update_operator').validate({
      rules: {
        operatorName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        allowType: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        transactionAPIId: {
          required: true,
        },
        serviceId: {
          required: true,
        },
        taxTypeId: {
          required: true,
        },
        serviceGroupingId: {
          required: true,
        },
        apiCode: {
          minlength: 1,
          maxlength: 15,
        },
        sorting: {
          minlength: 1,
          maxlength: 10,
        },
        stateId: {
          required: true,
        },
        image: {
          extension: "png|jpg|jpeg"

        },
      },
      messages: {
        operatorName: {
          required: 'Name is required',
          minlength: 'Name must contains between 3 and 75 characters',
          maxlength: 'Name must contains between 3 and 75 characters',
        },
        allowType: {
          required: 'Allow Type Name is required',
          minlength: 'Allow Type must contains between 1 and 15 characters',
          maxlength: 'Allow Type must contains between 1 and 15 characters',
        },
        transactionAPIId: {
          required: 'Transaction API is required',
        },
        serviceId: {
          required: 'Sub Service Name is required',
        },
        taxTypeId: {
          required: 'Tax Type Name is required',
        },
        serviceGroupingId: {
          required: 'Categories is required',
        },
        apiCode: {
          minlength: 'Api Code must contains between 1 and 15 characters',
          maxlength: 'Api Code must contains between 1 and 15 characters',
        },
        sorting: {
          minlength: 'Sorting must contains between 1 and 10 numeric characters',
          maxlength: 'Sorting must contains between 1 and 10 numeric characters',
        },
        stateId: {
          required: 'State Name is required',
        },
        image: {
          extension: "invalid format select png or jpg or jpeg file"

        },

      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
        event.preventDefault();
         getLocationAndProceed(
          function (lat, lng) {
             
              $(form).find('input[name="latitude"]').val(lat);
              $(form).find('input[name="longitude"]').val(lng);
                let formData = new FormData(form);

                $.ajax({
                  url: form.action,
                  type: form.method,
                  data: formData,
                  processData: false,  // Don't process the data as a query string
                  contentType: false,
                  xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                  success: function (response) {
                    console.log("in submit hndler", response)
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();

                    } else if (response.responseStatus == 0) {
                      $('.form_submit').prop('disabled', false);
        				      $('#newLoadingModel').hide();
                      console.log(response)
                      $.each(response.result, function (key, value) {
                        $('#' + key + "_edit_error").text(value)
                      });
                      return false;
                    } else if (response.responseStatus == 2) {
                      $('.form_submit').prop('disabled', false);
        				      $('#newLoadingModel').hide();
                      $('#edit_errorMessage').text(response.result);
                      return false;
                    } else {
                      location.reload();
                    }

                  },
                  error: function(xhr, status, error) {
                    console.log("Error uploading image: " + error);
                    $('#errorMessage').text("Error uploading image.");
                }
                });
              },
              function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
            });
          });


</script>



{% endblock %}