{% extends 'super_admin_templates/base.html' %}

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

  #image {
    color: #000;
  }

  #edit_image {
    color: #000;
  }

  .centered {
    text-align: center;
  }
</style>

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

    // Populate the form fields
    document.getElementById('edit_serviceName').value = service.serviceName || '';
    document.getElementById('edit_serviceType').value = service.serviceType || '';
    $('#edit_serviceType').trigger('chosen:updated');
    document.getElementById('edit_code').value = service.code || '';
    document.getElementById('edit_sorting').value = service.sorting || '';
    document.getElementById('edit_displayInDashboard').checked = service.displayInDashboard === true;
    document.getElementById('edit_isService').checked = service.isService === true;
    document.getElementById('edit_isbbps').checked = service.isbbps === true;
    document.getElementById('edit_isOperatorWise').checked = service.isOperatorWise === true;


    const selectElement = document.getElementById('edit_categoryIdsList');
    const options = selectElement.options;
    // console.log("options:",  options);

    const categoryIdsList = service.categoryIdsList || [];

    for (let option of options) {
      if (categoryIdsList.includes(option.value)) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }


    const serviceGroupingIdsList =  service.serviceGroupingIdsList || []
    const ServiceGroupingselectElement = document.getElementById('edit_serviceGroupingIdsList');
    const ServiceGroupingoptions = ServiceGroupingselectElement.options;

    for (let option of ServiceGroupingoptions) {
      
        if (serviceGroupingIdsList.includes(option.value)) {
          option.selected = true;
        } else {
          option.selected = false;
        }

    }

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

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


    $(ServiceGroupingselectElement).trigger('chosen:updated');
    $(selectElement).trigger('chosen:updated');

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('updateServiceTask'));
    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">Sub Services</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">
              Sub Services List
            </div>
            <div class="prism-toggle">
              {% if 'add' in session.get('subservicesPermissions', []) %}
              <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal"
                data-bs-target="#addServiceTask" onClick="resetFormDataNew('add_service')">
                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Sub Service
              </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.services_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="search_element" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" minlength="3" maxlength="75"
                      placeholder="Search sub service name">
                  </div>
                  <div class="col-auto">
                    <select class="form-select" id="serviceType" name="serviceType">
                    <option value="" selected>Select Service Type</option>
                    <option value="bbps" {% if serviceType=="bbps" %} selected {% endif %}>bbps</option>
                    <option value="digital-gold"  {% if serviceType=="digital-gold" %} selected {% endif %}>digital-gold</option>
                    <option value="bus-ticket"  {% if serviceType=="bus-ticket" %} selected {% endif %}>bus-ticket</option>
                    <option value="movie-ticket"  {% if serviceType=="movie-ticket" %} selected {% endif %}>movie-ticket</option>
                    <option value="flight-ticket"  {% if serviceType=="flight-ticket" %} selected {% endif %}>flight-ticket</option>
                    <option value="mobile-prepaid"  {% if serviceType=="mobile-prepaid" %} selected {% endif %}>mobile-prepaid</option>
                    <option value="train-ticket"  {% if serviceType=="train-ticket" %} selected {% endif %}>train-ticket</option>
                    <option value="metro-ticket"  {% if serviceType=="metro-ticket" %} selected {% endif %}>metro-ticket</option>
                </select>
              </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.services_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 %}
                  {% for error in form.serviceType.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"> Sub Service Name</th>
                    <th scope="col">Service Name</th>
                    <th scope="col">Service Type</th>
                    <th scope="col">Category Name</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>
                    {% if 'edit' in session.get('subservicesPermissions', []) %}
                        <th scope="col">Status</th>
                    {% endif %}
                    {% if 'edit' in session.get('subservicesPermissions', []) %}
                        <th scope="col">Actions</th>
                    {% elif 'delete' in session.get('subservicesPermissions', []) %}
                        <th scope="col">Actions</th>
                    {% endif %}
                  </tr>
                </thead>
                <tbody>
                  {% for each_service in servicesList %}
                  <tr>
                    <td>{{snoCount + loop.index}}</td>

                    {% if each_service.serviceName %}
                    <td>{{each_service.serviceName}}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    {% if each_service.categoryId %}
                    {% if each_service.categoryId.categoryName %}
                    <td>{{each_service.categoryId.categoryName}}</td>
                    {% else %}
                    <td>{{ each_service.categoryId.categoryName | join(",") }}</td>
                    {% endif %}
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    

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

                    {% if each_service.serviceGroupingIdsList %}
                      <td> 
                        {{ each_service.serviceGroupingIdsList | map(attribute='name') | join(', ') }}
                      </td>
                      {% else %}
                      <td class="centered">-</td>
                    {% endif %}
                    

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

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


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

                    <td>{{each_service.sorting}}</td>
                    <td>{{each_service.displayInDashboard}}</td>

                    {% if 'edit' in session.get('subservicesPermissions', []) %}
                    <td>
                      {% if each_service.status == 1 %}
                      <a class="btn btn-sm btn-success"
                        href="{{ url_for('service_configurations.update_service_status',serviceId=each_service.id, SubServicePage=SubServicePage,search_element=search_element) }}" data-requires-location>Active</a>
                      {% else %}
                      <a class="btn btn-sm btn-warning"
                        href="{{ url_for('service_configurations.update_service_status',serviceId=each_service.id, SubServicePage=SubServicePage,search_element=search_element) }}" data-requires-location>Inactive</a>
                      {% endif %}
                    </td>
                    {% endif %}

                    <td>
                      {% if 'edit' in session.get('subservicesPermissions', []) %}
                      <a href="javascript:void(0);" onclick='openUpdateModal({
                        "id": "{{ each_service.id }}",
                        "serviceName": {{ each_service.serviceName | tojson }},
                        "serviceType": {{ each_service.serviceType | tojson }},
                        "serviceGroupingIdsList":[
                                {% for item in each_service.serviceGroupingIdsList %}
                                  "{{ item.id }}"{% if not loop.last %}, {% endif %}
                                {% endfor %}
                              ],
                        "code": {{ each_service.code | tojson }},
                        "displayInDashboard": {{ each_service.displayInDashboard | tojson }},
                        "isService": {{ each_service.isService | tojson }},
                        "isbbps": {{ each_service.isbbps | tojson }},
                        "isOperatorWise": {{ each_service.isOperatorWise | tojson }},
                        "sorting": {{ each_service.sorting | tojson }},
                        "image": {{ each_service.file | tojson }},
                        "categoryIdsList": [
                                {% for each in each_service.categoryIdsList %}
                                  "{{ each.id }}" {% if not loop.last %}, {% endif %}
                                {% endfor %}
                        ],
                    })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                        <i class="ri-edit-line"></i>
                      </a>
                      {% endif %}
                      {% if 'delete' in session.get('subservicesPermissions', []) %}
                      <a href="javascript:void(0);"
                        onclick="confirmDelete('{{ url_for('service_configurations.delete_service',serviceId=each_service.id, SubServicePage=SubServicePage,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 %}

                </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>
              {% if not servicesList %}
              <h5 class="mt-2" style="text-align: center; font-size: medium;">No Data Found</h5>
              {% endif %}
            </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>
      </div>
    </div>
  </div>
  <!--End::row-1 -->

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


<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"
        id="add_service">
        <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="serviceName">Sub Service Name*</label>
                <input type="text" class="form-control" id="serviceName" name="serviceName" minlength="3" maxlength="75"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="Sub Service Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter sub service name" required>
                <span id="serviceName_error" class="error"></span>
              </div>
            </div>

            <!-- <div class="col-md-6">
                    <div class="form-group">
                      <label for="serviceType">Service Name*</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="serviceType">Service Type*</label>
                <select class="form-control chosen-select" id="serviceType" name="serviceType" required>
                  <option value="" disabled selected hidden>Select Service Type</option>
                  <option value="bbps">bbps</option>
                  <option value="digital-gold">digital-gold</option>
                  <option value="bus-ticket">bus-ticket</option>
                  <option value="movie-ticket">movie-ticket</option>
                  <option value="flight-ticket">flight-ticket</option>
                  <option value="mobile-prepaid">mobile-prepaid</option>
                  <option value="train-ticket">train-ticket</option>
                  <option value="metro-ticket">metro-ticket</option>
                </select>
                <span id="serviceType_error" class="error"></span>
              </div>
            </div>


            <div class="col-md-6">
              <div class="form-group">
                <label for="serviceGroupingIdsList">Category Name*</label>
                <select class="form-control chosen-select" id="serviceGroupingIdsList" name="serviceGroupingIdsList" placeholder="Select category name" multiple required>
                  <!-- <option value="" disabled selected hidden>Select category name</option> -->
                  {% for each_service_grouping in serviceGroupingDropdownList %}
                  <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
                  {% endfor %}
                </select>
                <span id="serviceGroupingIdsList_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="code">Sub Code*</label>
                <input type="text" class="form-control" id="code" name="code" minlength="1" maxlength="15"
                  pattern="^[a-zA-Z0-9\s]+$"
                  title="Code must contains only alphanumeric characters (letters, digits) and spaces."
                  placeholder="Enter sub code" required>
              </div>
              <span id="code_error" class="error"></span>
            </div>

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

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

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

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

            <div class="col-md-6">
              <div class="form-group">
                <label for="file">File</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">
                <label for="category">Category*</label>
                <select class="form-control chosen-select" name="categoryIdsList" id="categoryIdsList" required
                  multiple>
                  <option value="" disabled>Select category</option>
                  {% for each_category in categoriesList %}
                  <option value="{{each_category.id}}">{{each_category.categoryName}}</option>
                  {% endfor %}
                </select>
                <span id="categoryIdsList_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="sorting">Sorting</label>
                <input type="number" class="form-control" id="sorting" name="sorting" minlength="1" maxlength="10"
                  title="sorting must contain only numeric characters" placeholder="Enter sorting">
                <span id="sorting_error" class="error"></span>
              </div>
            </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="updateServiceTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateTaskLabel">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" enctype="multipart/form-data" id="update_service">
          <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="serviceName">Sub Service Name*</label>
            <input type="text" class="form-control" id="edit_serviceName" name="serviceName" minlength="3"
              maxlength="75" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Sub Service Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
              placeholder="Enter sub service name" required>
            <span id="serviceName_edit_error" class="error"></span>
          </div>


          <div class="form-group">
            <label for="serviceType">Service Type*</label>
            <select class="form-control chosen-select" id="edit_serviceType" name="serviceType" required>
              <option value="" disabled selected hidden>Select service type</option>
              <option value="bbps">bbps</option>
              <option value="digital-gold">digital-gold</option>
              <option value="bus-ticket">bus-ticket</option>
              <option value="movie-ticket">movie-ticket</option>
              <option value="flight-ticket">flight-ticket</option>
              <option value="mobile-prepaid">mobile-prepaid</option>
              <option value="train-ticket">train-ticket</option>
              <option value="metro-ticket">metro-ticket</option>
            </select>
            <span id="serviceType_edit_error" class="error"></span>
          </div>




          <div class="form-group">
            <label for="serviceGroupingIdsList">Category Name*</label>
            <select class="form-control chosen-select" id="edit_serviceGroupingIdsList" name="serviceGroupingIdsList" placeholder="Select category name" multiple required required>
              <!-- <option value="" disabled selected hidden>Select category name</option> -->
              {% for each_service_grouping in serviceGroupingDropdownList %}
              <option value="{{each_service_grouping.id}}">{{each_service_grouping.name}}</option>
              {% endfor %}
            </select>
            <span id="serviceGroupingIdsList_edit_error" class="error"></span>
          </div>

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

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

          <div class="form-group">
            <input type="checkbox" name="isService" id="edit_isService" value="True">
            <label for="isService">Is Service</label>
            <span id="isService_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <input type="checkbox" name="isbbps" id="edit_isbbps" value="True">
            <label for="isbbps">Is bbps</label>
            <span id="isbbps_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <input type="checkbox" name="isOperatorWise" id="edit_isOperatorWise" value="True">
            <label for="isOperatorWise">Is Operator Wise</label>
            <span id="isOperatorWise_edit_error" class="error"></span>
          </div>

          <div class="form-group">
            <label for="image">Update File</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">
            <label for="categoryId">Category*</label>
            <select class="form-control chosen-select" name="categoryIdsList" id="edit_categoryIdsList" required
              multiple>

              <option value="" disabled>Select category</option>
              {% for each_category in categoriesList %}
              <option value="{{each_category.id}}">{{each_category.categoryName}}</option>
              {% endfor %}

            </select>
            <span id="categoryIdsList_edit_error" class="error"></span>

          </div>


          <div class="form-group">
            <label for="sorting">Sorting</label>
            <input type="number" class="form-control" id="edit_sorting" name="sorting" minlength="1" maxlength="10"
              title="sorting must contain only numeric characters" placeholder="Enter sorting">
            <span id="sorting_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 () {

    $.validator.addMethod("file_size", function (value, element, param) {
      if (element.files && element.files[0]) {
        var fileSize = element.files[0].size;  // Get the file size in bytes
        var maxSize = param * 1024 * 1024;  // Convert MB to bytes
        return this.optional(element) || fileSize <= maxSize; // Check if file size is less than or equal to max size
      }
      return true;  // No file selected, valid by default
    }, "Image size must be less than {0}MB.");

    $('#add_service').validate({
      rules: {
        serviceName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        serviceType: {
          required: true,
        },
        serviceGroupingIdsList: {
          required: true,
        },
        code: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        sorting: {
          minlength: 1,
          maxlength: 10,
        },
        categoryIdsList: {
          required: true,
        },
        image: {
          extension: "png|jpg|jpeg",
          file_size: 1,

        },
      },
      messages: {
        serviceName: {
          required: 'Sub Service Name is required',
          minlength: 'Sub Service Name must be between 3 and 75 characters.',
          maxlength: 'Sub Service Name must be between 3 and 75 characters.',
        },
        serviceType: {
          required: 'Service Type is requried',
        },
        serviceGroupingIdsList: {
          required: 'Category Name is requried',
        },
        code: {
          required: 'Code Name is required',
          minlength: 'Sub Code must be between 1 and 15 characters',
          maxlength: 'Sub Code must be 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',
        },
        categoryIdsList: {
          required: 'Category is requried',
        },
        image: {
          extension: "invalid format select png or jpg or jpeg file",
          file_size: "File size must be less than 1MB.",

        },

      },
      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 () {

    $.validator.addMethod("file_size", function (value, element, param) {
      if (element.files && element.files[0]) {
        var fileSize = element.files[0].size;  // Get the file size in bytes
        var maxSize = param * 1024 * 1024;  // Convert MB to bytes
        return this.optional(element) || fileSize <= maxSize; // Check if file size is less than or equal to max size
      }
      return true;  // No file selected, valid by default
    }, "Image size must be less than {0}MB.");

    $('#update_service').validate({
      rules: {
        serviceName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        serviceType: {
          required: true,
        },
        serviceGroupingIdsList: {
          required: true,
        },
        code: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        sorting: {
          minlength: 1,
          maxlength: 10,
        },
        categoryIdsList: {
          required: true,
        },
        image: {
          extension: "png|jpg|jpeg",
          file_size: 1,

        },
      },
      messages: {
        serviceName: {
          required: 'Sub Service Name is required',
          minlength: 'Sub Service Name must be between 3 and 75 characters.',
          maxlength: 'Sub Service Name must be between 3 and 75 characters.',
        },
        serviceType: {
          required: 'Service Type is requried',
        },
        serviceGroupingIdsList: {
          required: 'Category Name is requried',
        },
        code: {
          required: 'Code Name is required',
          minlength: 'Sub Code must be between 1 and 15 characters',
          maxlength: 'Sub Code must be 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',
        },
        categoryIdsList: {
          required: 'Category is requried',
        },
        image: {
          extension: "invalid format select png or jpg or jpeg file",
          file_size: "File size must be less than 1MB.",

        },

      },
      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();
                      window.location.reload(true);

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