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

{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
  }

  .pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
  }
</style>
<style>
  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 openUpdateMultipleAppSitesModal(site) {
    console.log('Editing Site:', site);

    const updateSiteBaseURL = "{{ url_for('multiple_app_sites.update_mutiple_app_sites', site_id='__ID__') }}";
    const formAction = updateSiteBaseURL.replace('__ID__', site.id);
    document.getElementById('updateMultipleAppSitesForm').action = formAction;
    resetFormDataNew('updateMultipleAppSitesForm');

    document.getElementById('editSiteTitle').value = site.siteTitle || '';
    document.getElementById('editSiteCode').value = site.siteCode || '';
    document.getElementById('editSiteUrl').value = site.siteUrl || '';

    const enableMerchant = site.enableMerchantSettlement == 'True' || site.enableMerchantSettlement === true;
    document.getElementById('editEnableMerchantSettlement').checked = enableMerchant;
    document.getElementById('editInstantSettlementType').checked = site.instantSettlementType == 'True' || site.instantSettlementType === true;
    document.getElementById('editPaylaterSettlementType').checked = site.paylaterSettlementType == 'True' || site.paylaterSettlementType === true;

    document.getElementById('editDefaultSelect').value = site.defaultSelect || '';
    document.getElementById('editDefaultSettlement').value = site.defaultSettlement || '';

    // Toggle visibility based on checkbox
    handleToggleSettlementUI();

    const modal = new bootstrap.Modal(document.getElementById('updateTask'));
    modal.show();
  }

  function handleToggleSettlementUI() {
    const enable = document.getElementById('editEnableMerchantSettlement').checked;
    document.getElementById('editSettlementOptions').style.display = enable ? 'block' : 'none';
    document.getElementById('editDefaultSettlementContainer').style.display = enable ? 'none' : 'block';
  }
</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">Multiple App Sites</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">Multiple App Sites</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"> Multiple Sites List</div>
            <div class="prism-toggle">
              {% if 'add' in session.get('multipleAppSitesPermissions', []) %}
              <button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal"
                data-bs-target="#addSiteModal" onClick="resetFormData1('add_multiple_appsites_form')">
                <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Site
              </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('multiple_app_sites.get_multiple_app_sites')}}"
                  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" placeholder="Site title" minlength="3" maxlength="75"
                      pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                      title="Site Title must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/.">
                  </div>

                  <div class="col-auto">
                    <button type="submit" class="btn btn-primary">Search</button>
                  </div>
                  <div class="col-auto">
                    <a href="{{url_for('multiple_app_sites.get_multiple_app_sites')}}"><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>

            <div class="mt-3"></div>
            <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">Site Title</th>
                    <th scope="col">site Code</th>
                    <th scope="col">siteUrl</th>
                    <th scope="col">Created On</th>
                    {% if 'edit' in session.get('multipleAppSitesPermissions', []) %}
                    <th scope="col">Status</th>
                     {% endif %}
                     {% if 'edit' in session.get('multipleAppSitesPermissions', []) %}
                        <th scope="col">Action</th>
                    {% elif 'delete' in session.get('multipleAppSitesPermissions', []) %}
                        <th scope="col">Action</th>
                    {% endif %}
                  
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% if mutipleAppSitesList %}
                  {% for each_site in mutipleAppSitesList %}
                  <tr>
                    <td>{{ loop.index }}</td>

                    {% if each_site.siteTitle %}
                    <td>{{ each_site.siteTitle }}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    
                    {% if each_site.siteCode %}
                    <td>{{ each_site.siteCode }}</td>
                    {% else %}
                    <td class="centered">-</td>
                    {% endif %}
                    

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


                    <td>{{ each_site.createdOn }}</td>
                    
                    {% if 'edit' in session.get('multipleAppSitesPermissions', []) %}
                    <td>
                      {% if each_site.status == 1 %}
                      <a class="btn btn-sm btn-success"
                        href="{{ url_for('multiple_app_sites.multiple_app_sites_status', site_id=each_site.id,page=page,search_element=search_element) }}" data-requires-location>Active</a>
                      {% else %}
                      <a class="btn btn-sm btn-warning"
                        href="{{ url_for('multiple_app_sites.multiple_app_sites_status', site_id=each_site.id,page=page,search_element=search_element) }}" data-requires-location>Deactivate</a>
                      {% endif %}
                    </td>
                    {% endif %}

                    <td>

                      {% if 'edit' in session.get('multipleAppSitesPermissions', []) %}
                      <!--  <a href="javascript:void(0);"
                        class="btn btn-icon btn-sm btn-info-transparent rounded-pill"
                        data-bs-toggle="modal"
                        data-bs-target="#updateTask{{ each_site.id }}">
                        <i class="ri-edit-line"></i>
                      </a> -->

                      <a href="javascript:void(0);" onclick='openUpdateMultipleAppSitesModal({
                               "id": "{{ each_site.id }}",
                               "siteTitle": "{{ each_site.siteTitle }}",
                               "siteCode": "{{ each_site.siteCode }}",
                               "siteUrl": "{{ each_site.siteUrl }}",
                               "enableMerchantSettlement": "{{ each_site.enableMerchantSettlement }}",
                               "instantSettlementType": "{{ each_site.instantSettlementType }}",
                               "paylaterSettlementType": "{{ each_site.paylaterSettlementType }}",
                               "defaultSelect": "{{ each_site.defaultSelect }}",
                               "defaultSettlement": "{{ each_site.defaultSettlement }}"
                           })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                        <i class="ri-edit-line"></i>
                      </a>


                      {% endif %}
                      {% if 'delete' in session.get('multipleAppSitesPermissions', []) %}
                      <a href="javascript:void(0);"
                        onclick="confirmDelete('{{ url_for('multiple_app_sites.delete_multiple_app_sites', site_id=each_site.id,page=page,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>

                    <td>
                      <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle rounded-pill" type="button"
                          id="actionDropdown{{ loop.index }}" data-bs-toggle="dropdown" aria-haspopup="true"
                          aria-expanded="false">
                          Actions
                        </button>
                        <div class="dropdown-menu" aria-labelledby="actionDropdown{{ loop.index }}">
                         
                          <a class="dropdown-item"
                            href="{{ url_for('multiple_app_sites.site_assign_payment_gateways',siteId=each_site.id) }}"><span
                              class="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                                class="ri-edit-line"></i></span>Assign PG</a>
                     

                          <a class="dropdown-item"
                            href="{{ url_for('patterns_configuarations.sites_available_timings',transactionType='paymentgateway',siteId=each_site.id) }}"><span
                              class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-eye-line"></i></span> Payin Available
                            Timings</a>
                          <a class="dropdown-item"
                            href="{{ url_for('patterns_configuarations.sites_available_timings',transactionType='payout',siteId=each_site.id) }}"><span
                              class="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                                class="ri-eye-line"></i></span> PayOut Available
                            Timings</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                  {% endfor %}
                  {% else %}
                  <tr>
                    <td colspan="12" 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 class="col-sm-12 col-md-12 mt-3">
                <nav aria-label="Page navigation" class="pagination-style-1">
                  <ul class="pagination mb-0">
                    {% if pagination %}
                    <div class="pagination">
                      {{ pagination.links }}
                    </div>
                    {% endif %}
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--End::row-1 -->

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

<!-- Create New Site Modal -->
<div class="modal fade" id="addSiteModal" tabindex="-1" aria-labelledby="addSiteModalLabel" 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="addSiteModalLabel">Create New Site</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{ url_for('multiple_app_sites.add_multiple_app_sites') }}"
        enctype="multipart/form-data" name="add_multiple_appsites_form" id="add_multiple_appsites_form">
        <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">
          <div class="mb-3">
            <!-- Replaced form-group with mb-3 for better Bootstrap spacing -->
            <label for="siteTitle" class="form-label">Site Title*</label>
            <!-- Added form-label class -->
            <input type="text" class="form-control" id="siteTitle" name="siteTitle" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Site Title must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
              minlength="3" maxlength="75" placeholder="Enter site title" required>
          </div>
          <span id="siteTitle_error" class="error"></span>
          <div class="mb-3">
            <!-- Replaced form-group with mb-3 for better Bootstrap spacing -->
            <label for="siteCode" class="form-label">Site Code*</label>
            <!-- Added form-label class -->
            <input type="text" class="form-control" id="siteCode" name="siteCode" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Site Code must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
              minlength="1" maxlength="15" placeholder="Enter site code" required>
            <span id="siteCode_error" class="error"></span>
          </div>
          <div class="mb-3">
            <!-- Replaced form-group with mb-3 for better Bootstrap spacing -->
            <label for="siteUrl" class="form-label">Site URL</label>
            <!-- Added form-label class -->
            <input type="text" class="form-control" id="siteUrl" name="siteUrl"
              pattern="^(https?:\/\/)?([\da-zA-Z\.-]+)\.([a-zA-Z\.]{2,6})([\/\w\.-]*)*\/?$"
              title="Please enter a valid URL. Example: https://example.com or example.com"
              placeholder="Enter site url">
            <span id="siteUrl_error" class="error"></span>
          </div>

          <!-- Checkbox -->
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="enableMerchantSettlementadd"
              name="enableMerchantSettlement" onchange="toggleSettlementTypes('add')">
            <label class="form-check-label" for="enableMerchantSettlementadd">
              Enable Merchant Settlement
            </label>
            <span id="enableMerchantSettlementadd_error" class="error"></span>
          </div>

          <!-- This should show by default -->
          <div class="mb-3" id="defaultSettlementContainer-add">
            <label for="defaultSettlement-add" class="form-label">Default Settlement</label>
            <select class="form-select" name="defaultSettlement" id="defaultSettlement-add">
              <option value="">Select default</option>
              <option value="True">Instant</option>
              <option value="False">T+1</option>
            </select>
            <span id="defaultSettlement_error" class="error"></span>
          </div>

          <!-- This should hide by default and show when checkbox is checked -->
          <div id="settlementOptions-add" style="display: none;">
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="instantSettlementType" value="True"
                id="instantSettlementType-add">
              <label class="form-check-label" for="instantSettlementType-add">Instant Settlement Type Enable</label>
            </div>
            <span id="instantSettlementType_error" class="error"></span>

            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="paylaterSettlementType" value="True"
                id="paylaterSettlementType-add">
              <label class="form-check-label" for="paylaterSettlementType-add">Paylater Settlement Type Enable</label>
            </div>
            <span id="paylaterSettlementType_error" class="error"></span>

            <div class="mb-3">
              <label for="defaultSelect-add" class="form-label">Is Default</label>
              <select class="form-select" name="defaultSelect" id="defaultSelect-add">
                <option value="">Select Default</option>
                <option value="instant">Instant</option>
                <option value="paylater">T+1</option>
              </select>
            </div>
            <span id="defaultSelect_error" class="error"></span>
          </div>

        </div>
        <div class="modal-footer">
          <span id="errorMessage" class="error"></span>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <!-- Changed btn-default to btn-secondary -->
          <button type="submit" class="btn btn-primary form_submit" id="form_submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- update model -->

<!-- Single Reusable Modal -->
<div class="modal fade" id="updateTask" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered md-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Update Multiple Sites</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="updateMultipleAppSitesForm" method="POST" enctype="multipart/form-data">
        <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="modal-body">
          <div class="form-group">
            <label for="editSiteTitle">Site Title*</label>
            <input type="text" class="form-control" id="editSiteTitle" name="siteTitle"
              pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
              title="Site Title must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"
              minlength="3" maxlength="75" required>
          </div>
          <span id="siteTitle_edit_error" class="error"></span>

          <div class="form-group">
            <label for="editSiteCode">Site Code*</label>
            <input type="text" class="form-control" id="editSiteCode" name="siteCode" pattern="^[a-zA-Z0-9\s]+$"
              minlength="1" maxlength="15" title="Site Code must contain only alphanumeric characters, and spaces"
              required>
          </div>
          <span id="siteCode_edit_error" class="error"></span>

          <div class="form-group">
            <label for="editSiteUrl">Site URL*</label>
            <input type="text" class="form-control" id="editSiteUrl" name="siteUrl"
              pattern="^(https?:\/\/)?([\da-zA-Z\.-]+)\.([a-zA-Z\.]{2,6})([\/\w\.-]*)*\/?$"
              title="Please enter a valid URL">
          </div>
          <span id="siteUrl_edit_error" class="error"></span>

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="editEnableMerchantSettlement"
              name="enableMerchantSettlement" onchange="handleToggleSettlementUI()">
            <label class="form-check-label" for="editEnableMerchantSettlement">Enable Merchant Settlement</label>
          </div>
          <span id="enableMerchantSettlement_edit_error" class="error"></span>

          <div id="editSettlementOptions" style="display: none;">
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="instantSettlementType" value="True"
                id="editInstantSettlementType">
              <label class="form-check-label" for="editInstantSettlementType">Instant Settlement Type Enable</label>
            </div>
            <span id="instantSettlementType_edit_error" class="error"></span>

            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="paylaterSettlementType" value="True"
                id="editPaylaterSettlementType">
              <label class="form-check-label" for="editPaylaterSettlementType">Paylater Settlement Type Enable</label>
            </div>
            <span id="paylaterSettlementType_edit_error" class="error"></span>

            <div class="mb-3">
              <label for="editDefaultSelect" class="form-label">Is Default</label>
              <select class="form-select" name="defaultSelect" id="editDefaultSelect">
                <option value="">Select Default</option>
                <option value="instant">Instant</option>
                <option value="paylater">T+1</option>
              </select>
            </div>
          </div>
          <span id="defaultSelect_edit_error" class="error"></span>

          <div class="mb-3" id="editDefaultSettlementContainer">
            <label for="editDefaultSettlement" class="form-label">Default Settlement</label>
            <select class="form-select" name="defaultSettlement" id="editDefaultSettlement">
              <option value="">Select Default Settlement</option>
              <option value="True">Instant</option>
              <option value="False">T+1</option>
            </select>
          </div>
        </div>
        <span id="defaultSettlement_edit_error" class="error"></span>

        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary form_submit">Update Site</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">


document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("form[data-requires-location]").forEach(function (form) {
        form.addEventListener("submit", function (event) {
            const latInput = form.querySelector("input[name='latitude']");
            const lngInput = form.querySelector("input[name='longitude']");

            if (latInput?.value && lngInput?.value) {
                return;
            }

            event.preventDefault();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        latInput.value = position.coords.latitude;
                        lngInput.value = position.coords.longitude;
                        form.submit();
                    },
                    function () {
                        alert("Location access is required to proceed. Please enable location services.");
                    },
                    {
                        enableHighAccuracy: true,
                        timeout: 10000,
                        maximumAge: 0
                    }
                );
            } else {
                alert("Geolocation is not supported by this browser.");
            }
        });
    });
});
</script>
<script>
  function confirmDelete(url) {
    if (confirm("Are you sure want to delete?")) {
      window.location.href = url;
    }
  }

  function toggleSettlementTypes(source) {
    const siteId = source === 'add' ? 'add' : source;
    const enableMerchantSettlement = document.getElementById(`enableMerchantSettlement${siteId}`).checked;

    const defaultDropdown = document.getElementById(`defaultSettlementContainer-${siteId}`);
    const settlementOptionsDiv = document.getElementById(`settlementOptions-${siteId}`);

    if (enableMerchantSettlement) {
      defaultDropdown.style.display = 'none';
      settlementOptionsDiv.style.display = 'block';
    } else {
      defaultDropdown.style.display = 'block';
      settlementOptionsDiv.style.display = 'none';
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    {% for each_site in mutipleAppSitesList %}
    toggleSettlementTypes('{{each_site.id}}');
    {% endfor %}
    toggleSettlementTypes('add');
  });
</script>

<script type="text/javascript">

  $(document).ready(function () {
    $('#add_multiple_appsites_form').validate({
      rules: {
        siteTitle: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        siteCode: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        siteUrl: {
          required: false,
        },
        enableMerchantSettlement: {
          required: false,
        },
        instantSettlementType: {
          required: false,
        },
        paylaterSettlementType: {
          required: false,
        },
        defaultSettlement: {
          required: false,
        },
        defaultSelect: {
          required: false,
        },

      },
      messages: {
        siteTitle: {
          required: 'SiteTitle is required',
          minlength: 'SiteTitle is must be greater than or equals to 3 charecters',
          maxlength: 'SiteTitle is must be less than or equals to 75 charecters',
        },
        siteCode: {
          required: 'SiteCode is required',
          minlength: 'SiteCode is must be greaterthan or equals to 1 characters',
          maxlength: 'SiteCode is must be lessthan or equals to 15 digits',
        },
      },
      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
        event.preventDefault();  // Prevent the default form submission
        getLocationAndProceed(
          function (lat, lng) {
             
              $(form).find('input[name="latitude"]').val(lat);
              $(form).find('input[name="longitude"]').val(lng);

              // Create a new FormData object and append the form data (including image files)
              let formData = new FormData(form);

              $.ajax({
                url: form.action, // Use the form's action URL
                type: form.method, // Use the form's method (GET/POST)
                data: formData,
                processData: false,  // Don't process the data as a query string
                contentType: false,  // Let jQuery set the content-type for multipart/form-data
                xhrFields: {
                                      withCredentials: true   // THIS ensures cookies/session are sent
                                  },
                success: function (response) {
                  if (response.responseStatus == 1 || response.responseStatus == 4) {
                    form.reset();  // Reset the form
                    location.reload();
                  } else if (response.responseStatus == 0) {
                    $('.form_submit').prop('disabled', false);
      				$('#newLoadingModel').hide();
                    $.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, 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.");
                    }
                );
            }

        });


    $('#updateMultipleAppSitesForm').validate({
      rules: {
        siteTitle: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        siteCode: {
          required: true,
          minlength: 1,
          maxlength: 15,
        },
        siteUrl: {
          required: false,
        },
        enableMerchantSettlement: {
          required: false,
        },
        instantSettlementType: {
          required: false,
        },
        paylaterSettlementType: {
          required: false,
        },
        defaultSettlement: {
          required: false,
        },
        defaultSelect: {
          required: false,
        },
      },
      messages: {
        siteTitle: {
          required: 'SiteTitle is required',
          minlength: 'SiteTitle is must be greater than or equals to 3 charecters',
          maxlength: 'SiteTitle is must be less than or equals to 75 charecters',
        },
        siteCode: {
          required: 'SiteCode is required',
          minlength: 'SiteCode is must be greaterthan or equals to 1 characters',
          maxlength: 'SiteCode is must be lessthan or equals to 15 digits',
        },
      },
      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,  // Let jQuery set the content-type for multipart/form-data
                  xhrFields: {
                                        withCredentials: true   // THIS ensures cookies/session are sent
                                    },
                  success: function (response) {
                    if (response.responseStatus == 1 || response.responseStatus == 4) {
                      form.reset();
                      location.reload();
                    } else if (response.responseStatus == 0) {
                      $('.form_submit').prop('disabled', false);
                      $('#newLoadingModel').hide();
                      $.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();
                      $('#EditErrorMessage').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.");
                    }
                );
            }
          });
        });
  
</script>
<script>
  function resetFormData1(formid) {
    const form = document.getElementById(formid); // Get the form element

    if (!form) return;

    form.reset(); // Reset standard input fields

    // Remove all jQuery Validation plugin error labels
    form.querySelectorAll('label.error').forEach(el => el.remove());

    // Clear all custom error spans
    form.querySelectorAll('span.error').forEach(el => el.innerText = '');

    // Update any chosen dropdowns if present
    $(form).find('.chosen-select').trigger('chosen:updated');
  }

</script>


{% endblock %}