{% extends 'super_admin_templates/base.html' %}
{% set path = "regions" %}
{% set subpath = "regions_list" %}
{% block content %}
<style>


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

<!------------------ For Regions Data ----------------->
<!-- Content Wrapper. Contains page content -->
<script>
  function resetAddPincodeForm() {
    htmldata = "<option value='' disabled selected hidden>Select</option>";
    $('#countryId').html(htmldata);
    $('#countryIdEdit').html(htmldata);
    $('#editCountryId').html(htmldata);
    $('#countryId_pincode').html(htmldata);
    $('#stateId').html(htmldata);
    $('#stateIdEdit').html(htmldata);
    $('#cityIdEdit').html(htmldata);
    $('#cityId_pincode').html(htmldata);
    $('#blockPoIdEdit').html(htmldata);
    $('#blockPoId_pincode').html(htmldata);
    $('#stateId_pincode').html(htmldata);
    $('#stateId').trigger('chosen:updated');
    $('#stateIdEdit').trigger('chosen:updated');
    $('#cityIdEdit').trigger('chosen:updated');
    $('#cityId_pincode').trigger('chosen:updated');
    $('#blockPoIdEdit').trigger('chosen:updated');
    $('#blockPoId_pincode').trigger('chosen:updated');
    $('#stateId_pincode').trigger('chosen:updated');

  }
  function getRegions(regionId = "") {
    var csrfToken = $('input[name="csrf_token"]').val()
    var htmldata = "<option value='' disabled selected hidden>Select Region</option>";
    $.ajax({
      url: "{{url_for('regions.get_regions_list')}}",//{{ url_for('admin.dashboard') }}
      data: { "csrf_token": csrfToken },
      dataType: "json",
      type: "post",
      success: function (resultdata) {
        if (resultdata.responseStatus == 1) {
          $.each(resultdata.result, function (key, value) {
            if (regionId == value.id) {
              htmldata = htmldata + "<option selected value='" + value.id + "'>" + value.regionName + "</option>";
            }
            else {
              htmldata = htmldata + "<option value='" + value.id + "'>" + value.regionName + "</option>";
            }
          });
          $('#regionId').html(htmldata);
          $('#editregionId').html(htmldata);
          $('#regionIdEdit').html(htmldata);
          $('#regionId_pincode').html(htmldata);
          $('#regionId').trigger('chosen:updated');
          $('#editregionId').trigger('chosen:updated');
          $('#regionIdEdit').trigger('chosen:updated');
          $('#regionId_pincode').trigger('chosen:updated');

        } else {
          $('#regionId').html(htmldata);
          $('#editregionId').html(htmldata);
          $('#regionIdEdit').html(htmldata);
          $('#regionId_pincode').html(htmldata);
          $('#regionId').trigger('chosen:updated');
          $('#editregionId').trigger('chosen:updated');
          $('#regionIdEdit').trigger('chosen:updated');
          $('#regionId_pincode').trigger('chosen:updated');

        }

      }
    });
  }
</script>
<script>
  function openUpdateModal(region) {
    // Set the form action URL using the ID
    const updateRegionTypeBaseURL = "{{ url_for('regions.update_region', regionId='__ID__') }}";
    const formAction = updateRegionTypeBaseURL.replace('__ID__', region.id);
    document.getElementById('updateregionForm').action = formAction;
    resetFormDataNew('updateregionForm');

    // Populate the form fields
    document.getElementById('editRegionName').value = region.regionName || '';
    document.getElementById('editregionType').value = region.regionType || '';


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

</script>

<!------------------ For country Data ----------------->
<script>
  function getCountries(countryId = "", regionId = "") {
    var csrfToken = $('input[name="csrf_token"]').val()
    var htmldata = "<option value='' disabled selected hidden>Select Country</option>";
    $.ajax({
      url: "{{url_for('regions.get_countries_list')}}",//{{ url_for('admin.dashboard') }}
      data: { "csrf_token": csrfToken, regionId: regionId },
      dataType: "json",
      type: "post",
      success: function (resultdata) {
        if (resultdata.responseStatus == 1) {
          $.each(resultdata.result, function (key, value) {
            if (countryId == value.id) {
              htmldata = htmldata + "<option selected value='" + value.id + "'>" + value.countryName + "</option>";
            }
            else {
              htmldata = htmldata + "<option value='" + value.id + "'>" + value.countryName + "</option>";
            }
          });
          $('#countryId').html(htmldata);
          $('#editCountryId').html(htmldata);
          $('#countryIdEdit').html(htmldata)
          $('#countryId_pincode').html(htmldata)
          $('#countryId').trigger('chosen:updated');
          $('#editCountryId').trigger('chosen:updated');
          $('#countryIdEdit').trigger('chosen:updated');
          $('#countryId_pincode').trigger('chosen:updated');

        } else {
          $('#countryId').html(htmldata);
          $('#editCountryId').html(htmldata);
          $('#countryIdEdit').html(htmldata);
          $('#countryId_pincode').html(htmldata);
          $('#countryId').trigger('chosen:updated');
          $('#editCountryId').trigger('chosen:updated');
          $('#countryIdEdit').trigger('chosen:updated');
          $('#countryId_pincode').trigger('chosen:updated');

        }

      }
    });

    htmldata = "<option value='' disabled selected hidden>Select</option>";
    $('#stateId').html(htmldata);
    $('#stateIdEdit').html(htmldata);
    $('#cityIdEdit').html(htmldata);
    $('#cityId_pincode').html(htmldata);
    $('#blockPoIdEdit').html(htmldata);
    $('#blockPoId_pincode').html(htmldata);
    $('#stateId_pincode').html(htmldata);
    $('#stateId').trigger('chosen:updated');
    $('#stateIdEdit').trigger('chosen:updated');
    $('#cityIdEdit').trigger('chosen:updated');
    $('#cityId_pincode').trigger('chosen:updated');
    $('#blockPoIdEdit').trigger('chosen:updated');
    $('#blockPoId_pincode').trigger('chosen:updated');
    $('#stateId_pincode').trigger('chosen:updated');
  }
</script>
<script>
  function openCountryUpdateModal(country) {
    console.log('countryFlag:', country.countryFlag);
    // Set the form action URL using the ID
    const updateCountryBaseURL = "{{ url_for('regions.update_country', countryId='__ID__') }}";
    const formAction = updateCountryBaseURL.replace('__ID__', country.id);
    document.getElementById('updatecountryForm').action = formAction;
    resetFormDataNew('updatecountryForm');


    // Populate the form fields
    document.getElementById('editCountryName').value = country.countryName || '';
    document.getElementById('editCountryCode').value = country.countryCode || '';
    document.getElementById('editRegex').value = country.regex || '';

    // document.getElementById('editRegionName').value = country.regionName || '';
    const selectElement = document.getElementById('editregionId');
    const options = selectElement.options;
    console.log("options:", options);

    for (let option of options) {
      if (regionId == option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }
    $(selectElement).trigger('chosen:updated');

    document.getElementById('editregionId').value = country.regionId || '';
    $('#editregionId').trigger('chosen:updated');
    document.getElementById('countryFlagPreview').style.display = "block";
    const countryFlagPreview = document.getElementById('countryFlagPreview');

    if (country.countryFlag) {
      // If it's already a full URL, use it directly. If not, prefix with `/`
      if (country.countryFlag.startsWith('http') || country.countryFlag.startsWith('/static')) {
        countryFlagPreview.src = country.countryFlag;
      } else {
        countryFlagPreview.src = '/' + country
          .countryFlag.replace(/^\/+/, '');
      }
      countryFlagPreview.style.display = 'block';
    } else {
      countryFlagPreview.src = '';
      countryFlagPreview.style.display = 'none';
    }

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

</script>

<!------------------ For State Data ----------------->
<script>
  function getStates(stateId = "", countryId = "") {
    console.log("get states")
    var htmldata = "<option value='' disabled selected hidden>Select State</option>";
    var csrfToken = $('input[name="csrf_token"]').val()
    $.ajax({
      url: "{{url_for('regions.get_states_list')}}",//{{ url_for('admin.dashboard') }}
      data: { "csrf_token": csrfToken, "countryId": countryId },
      dataType: "json",
      type: "post",
      success: function (resultdata) {
        if (resultdata.responseStatus == 1) {
          $.each(resultdata.result, function (key, value) {
            if (stateId == value.id) {
              htmldata = htmldata + "<option selected value='" + value.id + "'>" + value.stateName + "</option>";
            }
            else {
              htmldata = htmldata + "<option value='" + value.id + "'>" + value.stateName + "</option>";
            }
          });
          $('#stateId').html(htmldata);
          $('#editStateId').html(htmldata);
          $('#stateIdEdit').html(htmldata);
          $('#stateId_pincode').html(htmldata);
          $('#stateId').trigger('chosen:updated');
          $('#editStateId').trigger('chosen:updated');
          $('#stateIdEdit').trigger('chosen:updated');
          $('#stateId_pincode').trigger('chosen:updated');


        } else {
          $('#stateId').html(htmldata);
          $('#editStateId').html(htmldata);
          $('#stateIdEdit').html(htmldata);
          $('#stateId_pincode').html(htmldata);
          $('#stateId').trigger('chosen:updated');
          $('#editStateId').trigger('chosen:updated');
          $('#stateIdEdit').trigger('chosen:updated');
          $('#stateId_pincode').trigger('chosen:updated');
        }

      }
    });
    htmldata = "<option value='' disabled selected hidden>Select</option>";
    $('#cityIdEdit').html(htmldata);
    $('#cityId_pincode').html(htmldata);
    $('#blockPoIdEdit').html(htmldata);
    $('#blockPoId_pincode').html(htmldata);
    $('#cityIdEdit').trigger('chosen:updated');
    $('#cityId_pincode').trigger('chosen:updated');
    $('#blockPoIdEdit').trigger('chosen:updated');
    $('#blockPoId_pincode').trigger('chosen:updated');
  }
</script>
<script>
  function openStateUpdateModal(state) {
    // Set the form action URL using the ID
    const updateRegionTypeBaseURL = "{{ url_for('regions.update_state', stateId='__ID__') }}";
    const formAction = updateRegionTypeBaseURL.replace('__ID__', state.id);
    document.getElementById('updateStateForm').action = formAction;
    resetFormDataNew('updateStateForm');
    console.log('(((((((((((((((((((state)))))))))))))))))))', state)
    // Populate the form fields
    document.getElementById('editStateName').value = state.stateName || '';
    document.getElementById('editStateCode').value = state.stateCode || '';
    // document.getElementById('editCountryId').value = state.countryId || '';


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

</script>

<!------------------ For City Data ----------------->
<script>
  function getCities(cityId = "", stateId = "") {
    var htmldata = "<option value='' disabled selected hidden>Select City</option>";
    var csrfToken = $('input[name="csrf_token"]').val()
    $.ajax({
      url: "{{url_for('regions.get_cities_list')}}",//{{ url_for('admin.dashboard') }}
      data: { "csrf_token": csrfToken, "stateId": stateId },
      dataType: "json",
      type: "post",
      success: function (resultdata) {
        if (resultdata.responseStatus == 1) {
          $.each(resultdata.result, function (key, value) {
            if (cityId == value.id) {
              htmldata = htmldata + "<option selected value='" + value.id + "'>" + value.cityName + "</option>";
            }
            else {
              htmldata = htmldata + "<option value='" + value.id + "'>" + value.cityName + "</option>";
            }
          });
          $('#cityId').html(htmldata);
          $('#editCityId').html(htmldata);
          $('#cityIdEdit').html(htmldata);
          $('#cityId_pincode').html(htmldata);
          $('#cityId').trigger('chosen:updated');
          $('#editCityId').trigger('chosen:updated');
          $('#cityIdEdit').trigger('chosen:updated');
          $('#cityId_pincode').trigger('chosen:updated');

        }

      }
    });

    htmldata = "<option value='' disabled selected hidden>Select</option>";
    $('#blockPoIdEdit').html(htmldata);
    $('#blockPoId_pincode').html(htmldata);
    $('#blockPoIdEdit').trigger('chosen:updated');
    $('#blockPoId_pincode').trigger('chosen:updated');
  }
</script>

<script>
  function openCityUpdateModal(city) {
    // Set the form action URL using the ID
    const updateRegionTypeBaseURL = "{{ url_for('regions.update_city', cityId='__ID__') }}";
    const formAction = updateRegionTypeBaseURL.replace('__ID__', city.id);
    document.getElementById('UpdateCityForm').action = formAction;
    resetFormDataNew('UpdateCityForm');

    // Populate the form fields
    document.getElementById('editCityName').value = city.cityName || '';

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

</script>

<!------------------ For Block/PO Data ----------------->
<script>
  function getBlockPo(blockPoId = "", cityId = "") {
    var htmldata = "<option value='' disabled selected hidden>Select Block/PO </option>";
    var csrfToken = $('input[name="csrf_token"]').val()
    $.ajax({
      url: "{{url_for('regions.get_blocks_list')}}",//{{ url_for('admin.dashboard') }}
      data: { "csrf_token": csrfToken, "cityId": cityId },
      dataType: "json",
      type: "post",
      success: function (resultdata) {
        if (resultdata.responseStatus == 1) {
          $.each(resultdata.result, function (key, value) {
            if (blockPoId == value.id) {
              htmldata = htmldata + "<option selected value='" + value.id + "'>" + value.name + "</option>";
            }
            else {
              htmldata = htmldata + "<option value='" + value.id + "'>" + value.name + "</option>";
            }
          });
          $('#blockPoId').html(htmldata);
          $('#blockPoIdEdit').html(htmldata);
          $('#blockPoId_pincode').html(htmldata);
          $('#blockPoId').trigger('chosen:updated');
          $('#blockPoIdEdit').trigger('chosen:updated');
          $('#blockPoId_pincode').trigger('chosen:updated');

        }

      }
    });
  }
</script>

<script>
  function openBlockUpdateModal(block) {
    // Set the form action URL using the ID
    const updateRegionTypeBaseURL = "{{ url_for('regions.update_block', blockId='__ID__') }}";
    const formAction = updateRegionTypeBaseURL.replace('__ID__', block.id);
    document.getElementById('UpdateBlockForm').action = formAction;
    resetFormDataNew('UpdateBlockForm');

    // Populate the form fields
    document.getElementById('editName').value = block.name || '';

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


</script>

<!------------------ For pincode Data ----------------->

<script>
  function openPincodeUpdateModal(pincode) {
    console.log("******data*", pincode);
    // Set the form action URL using the ID
    const updateRegionTypeBaseURL = "{{ url_for('regions.update_pincode', pincodeId='__ID__') }}";
    const formAction = updateRegionTypeBaseURL.replace('__ID__', pincode.id);
    document.getElementById('UpdatePincodeForm').action = formAction;
    resetFormDataNew('UpdatePincodeForm');

    // Populate the form fields
    document.getElementById('editPincode').value = pincode.code || '';
    document.getElementById('editlat').value = pincode.lat || '';
    document.getElementById('editlong').value = pincode.long || '';
    const regionId = pincode.regionId || '';
    const countryId = pincode.countryId || '';
    const stateId = pincode.stateId || '';
    const cityId = pincode.cityId || '';
    const blockPoId = pincode.blockId || '';
    // getRegions(regionId);
    const selectElement = document.getElementById('regionIdEdit');
    const options = selectElement.options;
    console.log("options:", options);

    for (let option of options) {
      if (regionId == option.value) {
        option.selected = true;
      } else {
        option.selected = false;
      }
    }
    $(selectElement).trigger('chosen:updated');
    getCountries(countryId, regionId);
    getStates(stateId, countryId);
    getCities(cityId, stateId);
    getBlockPo(blockPoId, cityId);

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

</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">Master Configuration</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Locations</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->
    <!-- Start::row-1 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-header">
            <div class="card-title">
              Locations List
            </div>
          </div>

          <div class="card-body">
            <nav class="nav nav-style-6 nav-pills mb-3 nav-justified d-sm-flex d-block" role="tablist">
              <a class="nav-link {% if redirectval == 'Region' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                aria-current="page" href="#nav-region" aria-selected="true">Region</a>
              <a class="nav-link {% if redirectval == 'Country' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-country" aria-selected="false">Country</a>
              <a class="nav-link {% if redirectval == 'State' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-state" aria-selected="false">State</a>
              <a class="nav-link {% if redirectval == 'City' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-cities" aria-selected="false">Cities</a>
              <a class="nav-link {% if redirectval == 'Block' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-block" aria-selected="false">Block/PO</a>
              <a class="nav-link {% if redirectval == 'Pincode' %}active{% endif %}" data-bs-toggle="tab" role="tab"
                href="#nav-pincode" aria-selected="false">Pincode</a>

            </nav>

            <center>
              {% if error %}
              <h2><b>
                  <center style="color:RED">{{ error }}</center>
                </b></h2>
              {% endif %}
            </center>
            <!------------------ For Regions Data ----------------->
            <div class="tab-content">
              <div class="tab-pane fade {% if redirectval == 'Region' %}show active{% endif %}" id="nav-region"
                role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list')}}"
                        class="row gy-2 gx-3 align-items-center mb-4">
                        <input type="hidden" name="regionpage" value="{{ request.args.get('regionpage', 1) }}">
                        <input type="hidden" name="redirectto" value="Region">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{regions_search_element}}"
                            name="regions_search_element" id="autoSizingInput" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$"
                            minlength="3" maxlength="75" placeholder="Search region name">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formRegion.regions_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}

                      </form>


                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addRegionModal" onClick="resetFormDataNew('add_region_form')">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Region
                        </button>
                      </div>

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


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

                    <tbody>
                      {% if regionsList %}
                      {% for each_region in regionsList %}
                      <tr>
                        <td>{{RegionSnoCount+loop.index }}</td>

                        {% if each_region.regionName %}
                        <td>{{each_region.regionName}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        
                        {% if each_region.regionType %}
                        <td>{{each_region.regionType}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        
                        <td>
                          {% if each_region.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_region_type_status', regionId=each_region.id, regionpage=regionpage,regions_search_element=regions_search_element) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_region_type_status', regionId=each_region.id,  regionpage=regionpage,regions_search_element=regions_search_element) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>

                        <td>
                          <a href="javascript:void(0);" onclick='openUpdateModal({
                              "id": "{{ each_region.id }}",
                              "regionName": {{ each_region.regionName | tojson }},
                              "regionType": {{ each_region.regionType | tojson }}
                              
                            })' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>
                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_region', regionId=each_region.id,  regionpage=regionpage,regions_search_element=regions_search_element) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>
                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>

                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Regionsuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Regiondanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>

                  </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 pagination %}
                      <div class="pagination">
                        {{ pagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>
              <!------------------ For Country Data ----------------->
              <div class="tab-pane fade {% if redirectval == 'Country' %}show active{% endif %}" id="nav-country"
                role="tabpanel">
                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list',redirectto='Country')}}"
                        class="row gy-2 gx-3 align-items-center mb-4">
                        <input type="hidden" name="countryPage" value="{{ request.args.get('countryPage', 1) }}">
                        <input type="hidden" name="redirectto" value="Country">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{countries_search_element}}"
                            name="countries_search_element" id="autoSizingInput" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$"
                            minlength="3" maxlength="75" placeholder="Search country name">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list',redirectto='Country')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formCountries.countries_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addCountryModal" onClick="resetFormDataNew('add_country_form');">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Country
                        </button>
                      </div>
                    </div>
                  </div>
                </div>


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

                    <tbody>
                      {% if countriesList %}
                      {% for each_country in countriesList %}
                      <tr>
                        <td>{{CountriesSnoCount+loop.index }}</td>

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

                        {% if each_country.regionId.regionName %}
                        <td>{{ each_country.regionId.regionName }}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        

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

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

                        <td>
                          {% if each_country.countryFlag %}
                          <div>
                            <img src="{{ domain+each_country.countryFlag }}" alt="Country Flag"
                              class="img-fluid rounded-circle" style="max-width: 45px; max-height: 45px;">
                          </div>
                          {% else %}
                          <div>
                            <img src="{{ url_for('static', filename='dummy_profile.png') }}" alt="Dummy Image"
                              class="img-fluid rounded-circle" style="max-width: 45px; max-height: 45px;">
                          </div>
                          {% endif %}


                        </td>


                        <td>
                          {% if each_country.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_country_type_status', countryId=each_country.id, countryPage=countryPage,countries_search_element=countries_search_element ) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_country_type_status', countryId=each_country.id, countryPage=countryPage,countries_search_element=countries_search_element) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>

                        <td>
                          <a href="javascript:void(0);" onclick='openCountryUpdateModal({
                            "id": "{{ each_country.id }}",
                            "countryName": {{ each_country.countryName | tojson }},
                            "countryCode": {{ each_country.countryCode | tojson }},
                            "regex": {{ each_country.regex | tojson }},
                            "regionId": "{{ each_country.regionId.id}}",
                            "countryFlag": {{ each_country.countryFlag | tojson}},
                          });' class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>

                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_country', countryId=each_country.id, countryPage=countryPage,countries_search_element=countries_search_element) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Countrysuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Countrydanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 countryPagination %}
                      <div class="pagination">
                        {{ countryPagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>

              </div>
              <!------------------ For State Data ----------------->
              <div class="tab-pane fade {% if redirectval == 'State' %}show active{% endif %}" id="nav-state"
                role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list',redirectto='State')}}"
                        class="row gy-2 gx-3 align-items-center">
                        <input type="hidden" name="statePage" value="{{ request.args.get('statePage', 1) }}">
                        <input type="hidden" name="redirectto" value="State">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{states_search_element}}"
                            name="states_search_element" id="states_search_element" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$"
                            minlength="3" maxlength="75" placeholder="Search state name">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list',redirectto='State')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formStates.states_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addStateModal" onClick="resetFormDataNew('add_state_form'); getCountries();">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add State
                        </button>
                      </div>
                    </div>
                  </div>
                </div>


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

                    <tbody>
                      {% if statesList %}
                      {% for each_state in statesList %}
                      <tr>
                        <td>{{StateSnoCount+loop.index }}</td>

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

                        <td>{{each_state.stateCode}}</td>

                        {% if each_state.countryId.countryName %}
                        <td>{{each_state.countryId.countryName}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        


                        <td>
                          {% if each_state.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_state_status', stateId=each_state.id, statePage=statePage,states_search_element=states_search_element ) }}"  data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_state_status', stateId=each_state.id, statePage=statePage,states_search_element=states_search_element ) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>

                        <td>
                          <a href="javascript:void(0);" onclick='openStateUpdateModal({ 
                            "id": "{{ each_state.id }}",
                            "stateName": "{{each_state.stateName}}",
                            "stateCode":"{{each_state.stateCode}}"


                          }); ; getCountries("{{ each_state.countryId.id }}");'
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>

                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_state', stateId=each_state.id, statePage=statePage,states_search_element=states_search_element ) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Statesuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Statedanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 statePagination %}
                      <div class="pagination">
                        {{ statePagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>

              </div>
              <!------------------ For City Data ----------------->
              <div class="tab-pane fade {% if redirectval == 'City' %}show active{% endif %}" id="nav-cities"
                role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list',redirectto='City')}}"
                        class="row gy-2 gx-3 align-items-center">
                        <input type="hidden" name="cityPage" value="{{ request.args.get('cityPage', 1) }}">
                        <input type="hidden" name="redirectto" value="City">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{cities_search_element}}"
                            name="cities_search_element" id="cities_search_element" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$"
                            minlength="3" maxlength="75" placeholder="Search city name">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list', redirectto='City')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formCities.cities_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addCityModal" onClick="resetFormDataNew('add_city_form'); getStates();">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Cities
                        </button>
                      </div>
                    </div>
                  </div>
                </div>


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

                    <tbody>
                      {% if citiesList %}
                      {% for each_city in citiesList %}
                      <tr>
                        <td>{{citySnoCount+loop.index}}</td>

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

                        {% if each_city.stateId.stateName %}
                        <td>{{each_city.stateId.stateName}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        


                        <td>
                          {% if each_city.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_city_status', cityId=each_city.id, cityPage=cityPage, cities_search_element= cities_search_element) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_city_status', cityId=each_city.id, cityPage=cityPage, cities_search_element= cities_search_element) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>
                        <td>
                          <a href="javascript:void(0);" onclick='openCityUpdateModal({ 
                            "id": "{{ each_city.id }}",
                            "cityName": "{{each_city.cityName}}"


                          }); getStates("{{each_city.stateId.id}}")'
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>

                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_city', cityId=each_city.id, cityPage=cityPage, cities_search_element= cities_search_element) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Citysuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Citydanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 cityPagination %}
                      <div class="pagination">
                        {{ cityPagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>
              <!------------------ For Block Data ----------------->
              <div class="tab-pane fade {% if redirectval == 'Block' %}show active{% endif %}" id="nav-block"
                role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list',redirectto='Block')}}"
                        class="row gy-2 gx-3 align-items-center">
                        <input type="hidden" name="blockPage" value="{{ request.args.get('blockPage', 1) }}">
                        <input type="hidden" name="redirectto" value="Block">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{blocks_search_element}}"
                            name="blocks_search_element" id="blocks_search_element" pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$"
                            minlength="3" maxlength="75" placeholder="Search block name">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list',redirectto='Block')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formBlocks.blocks_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addBlockModal" onClick="resetFormDataNew('add_block_form'); getCities();">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Block
                        </button>
                      </div>
                    </div>
                  </div>
                </div>


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

                    <tbody>
                      {% if blocksList %}
                      {% for each_block in blocksList %}
                      <tr>
                        <td>{{blockSnoCount+ loop.index}}</td>

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

                        {% if each_block.cityId.cityName %}
                        <td>{{each_block.cityId.cityName}}</td>
                        {% else %}
                        <td class="centered">-</td>
                        {% endif %}
                        

                        <td>
                          {% if each_block.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_block_status', blockId=each_block.id,  blockPage=blockPage, blocks_search_element=blocks_search_element) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_block_status', blockId=each_block.id,  blockPage=blockPage, blocks_search_element=blocks_search_element) }}" data-requires-location>Deactive</a>
                          {% endif %}
                        </td>

                        <td>
                          <a href="javascript:void(0);" onclick='openBlockUpdateModal({ 
                            "id": "{{ each_block.id }}",
                            "name": "{{each_block.name}}"


                          }); getCities("{{each_block.cityId.id}}");'
                            class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
                            <i class="ri-edit-line"></i>
                          </a>

                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_block', blockId=each_block.id, blockPage=blockPage, blocks_search_element=blocks_search_element) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Blocksuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Blockdanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 blockPagination %}
                      <div class="pagination">
                        {{ blockPagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>
              <!------------------ For Pincode Data ----------------->
              <div class="tab-pane fade {% if redirectval == 'Pincode' %}show active{% endif %}" id="nav-pincode"
                role="tabpanel">

                <div class="row">
                  <div class="col-xl-12">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                      <form method="GET" action="{{ url_for('regions.regions_list',redirectto='Pincode')}}"
                        class="row gy-2 gx-3 align-items-center">
                        <input type="hidden" name="pincodePage" value="{{ request.args.get('pincodePage', 1) }}">
                        <input type="hidden" name="redirectto" value="Pincode">
                        <div class="col-auto">
                          <input type="text" class="form-control" value="{{pincodes_search_element}}"
                            name="pincodes_search_element" id="pincodes_search_element" pattern="^\d+$"
                            title="Pincode search accepts only numeric values." minlength="6" maxlength="6"
                            placeholder="Search pincodes">
                        </div>
                        <div class="col-auto">
                          <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                        <div class="col-auto">
                          <a href="{{ url_for('regions.regions_list', redirectto='Pincode')}}">
                            <button type="button" class="btn btn-warning">Reset</button>
                          </a>
                        </div>
                        {% for error in formPincodes.pincodes_search_element.errors %}
                        <span class="text-danger" class="error">{{ error }}</span>
                        {% endfor %}
                      </form>

                      <div class="prism-toggle">
                        <button type="button" class="btn btn-primary-light rounded-pill btn-wave" data-bs-toggle="modal"
                          data-bs-target="#addPincodeModal"
                          onClick="resetFormDataNew('add_pincode_form'); resetAddPincodeForm();">
                          <i class="ri-add-circle-line fs-16 align-middle me-1"></i>Add Pincode
                        </button>
                      </div>
                    </div>
                  </div>
                </div>


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

                    <tbody>
                      {% if pincodesList %}
                      {% for each_pincode in pincodesList %}
                      <tr>
                        <td>{{pincodesSnoCount+ loop.index}}</td>

                        {% if each_pincode.pincode %}
                        <td>{{each_pincode.pincode}}</td>
                        {% else %}
                        <td>-</td>
                        {% endif %}
                        

                        {% if each_pincode.blockPoId.name %}
                        <td>{{each_pincode.blockPoId.name}}</td>
                        {% else %}
                        <td>-</td>
                        {% endif %}
                        

                        {% if each_pincode.latitude %}
                        <td>{{each_pincode.latitude}}</td>
                        {% else %}
                        <td>-</td>
                        {% endif %}
                        

                        {% if each_pincode.longitude %}
                        <td>{{each_pincode.longitude}}</td>
                        {% else %}
                        <td>-</td>
                        {% endif %}
                        
                        <td>
                          {% if each_pincode.status == 1 %}
                          <a class="btn btn-sm btn-success"
                            href="{{ url_for('regions.update_pincode_status', pincodeId=each_pincode.id,  pincodePage=pincodePage, pincodes_search_element=pincodes_search_element) }}" data-requires-location>Active</a>
                          {% else %}
                          <a class="btn btn-sm btn-warning"
                            href="{{ url_for('regions.update_pincode_status', pincodeId=each_pincode.id,  pincodePage=pincodePage, pincodes_search_element=pincodes_search_element) }}" data-requires-location>Deactivate</a>
                          {% endif %}
                        </td>

                        <td>
                          <a href="javascript:void(0);" onclick='openPincodeUpdateModal({ 
                            "id": "{{ each_pincode.id }}",
                            "code": "{{each_pincode.pincode}}",
                            "latitude": "{{each_pincode.latitude}}",
                            "longitude": "{{each_pincode.longitude}}",
                            "blockId": "{{ each_pincode.blockPoId.id }}",
                            {% if each_pincode.blockPoId and each_pincode.blockPoId.cityId %}
                            "cityId": "{{ each_pincode.blockPoId.cityId.id }}",
                            {% else %}
                            "cityId": null,
                            {% endif %}
                            {% if each_pincode.blockPoId and each_pincode.blockPoId.cityId and each_pincode.blockPoId.cityId.stateId %}
                            "stateId": "{{ each_pincode.blockPoId.cityId.stateId.id }}",
                            {% else %}
                            "stateId": null,
                            {% endif %}
                            {% if each_pincode.blockPoId and each_pincode.blockPoId.cityId and each_pincode.blockPoId.cityId.stateId and each_pincode.blockPoId.cityId.stateId.countryId %}
                            "countryId": "{{ each_pincode.blockPoId.cityId.stateId.countryId.id }}",
                            {% else %}
                            "countryId": null,
                            {% endif %}
                            {% if each_pincode.blockPoId and each_pincode.blockPoId.cityId and each_pincode.blockPoId.cityId.stateId and each_pincode.blockPoId.cityId.stateId.countryId and each_pincode.blockPoId.cityId.stateId.countryId.regionId %}
                            "regionId": "{{ each_pincode.blockPoId.cityId.stateId.countryId.regionId.id }}"
                            {% else %}
                            "regionId": null
                            {% endif %}


                          });' class="btn btn-icon btn-sm btn-info-transparent rounded-pill" >
                            <i class="ri-edit-line"></i>
                          </a>

                          <a href="javascript:void(0);"
                            onclick="confirmDelete('{{ url_for('regions.delete_pincode', pincodeId=each_pincode.id, pincodePage=pincodePage, pincodes_search_element=pincodes_search_element) }}')"><span
                              class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                class="ri-delete-bin-line"></i></span></a>
                          </a>
                        </td>

                        {% endfor %}
                        {% else %}
                      <tr>
                        <td colspan="7" style="text-align: center;">No Data Found</td>
                      </tr>
                      {% endif %}
                    </tbody>
                    <div class="flashes">
                      {% with messages = get_flashed_messages(with_categories=true) %}
                      {% if messages %}
                      {% for category, message in messages %}
                      {% if category == "Pincodesuccess" %}
                      <h2><b>
                          <center style="color:green">{{ message }}</center>
                        </b></h2>
                      {% elif category == "Pincodedanger" %}
                      <h2><b>
                          <center style="color:red">{{ message }}</center>
                        </b></h2>
                      {% endif %}
                      {% endfor %}
                      {% endif %}
                      {% endwith %}
                    </div>
                  </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 pincodePagination %}
                      <div class="pagination">
                        {{ pincodePagination.links }}
                      </div>
                      {% endif %}
                    </ul>
                  </nav>
                </div>
              </div>


            </div>

          </div>

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




<!----------------------- Create New Region Modal  ---------------------------->
<div class="modal fade" id="addRegionModal" 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">Add Region</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_region')}}" enctype="multipart/form-data"
        name="add_region_form" id="add_region_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 px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="regionName">Region Name*</label>
                <input type="text" class="form-control" id="regionName" name="regionName"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                  title="Region Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter region name" required>
              </div>
              <span id="regionName_error" class="error"></span>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="regionType">RegionType*</label>
                <input type="text" class="form-control" id="regionType" name="regionType"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                  title="Region Type must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter region type" required>
              </div>
              <span id="regionType_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>
<!-- End -->

<!----------------------- Update  Region Modal  ---------------------------->
<div class="modal fade" id="updateRegionModal" tabindex="-1" role="dialog" aria-labelledby="updateRegionLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateRegionLabel">Update Region</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="" id="updateregionForm" 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="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="editRegionName">Region Name*</label>
                <input type="text" class="form-control" id="editRegionName" name="regionName"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                  title="Region Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  value="" required>
                <span id="regionName_edit_error" class="error"></span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="editregionType">RegionType*</label>
                <input type="text" class="form-control" id="editregionType" name="regionType"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                  title="Region Type must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  value="" required>
                <span id="regionType_edit_error" class="error"></span>
              </div>
            </div>
          </div>

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




<!-------------------- Create New country Modal ------------------->
<div class="modal fade" id="addCountryModal" 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">Add Country</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_country')}}" enctype="multipart/form-data"
        name="add_country_form" id="add_country_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_addcountry" name="latitude">
        <input type="hidden" id="longitude_addcountry" name="longitude">
        <div class="modal-body px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="countryName">Country Name*</label>
                <input type="text" class="form-control" id="countryName" name="countryName"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                  title="Country Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter country name" required>
                <span id="countryName_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6 form-group">
              <label for="countryCode">Country Code*</label>
              <input type="text" class="form-control" id="countryCode" name="countryCode"
                pattern="^\+([1-9][0-9]{0,2})$"
                title="Enter a valid country code starting with '+' and 1 to 3 digits (e.g., +1, +91, +974)."
                placeholder="Enter country code" required>
              <span id="countryCode_error" class="error"></span>
            </div>

            <div class="col-md-6 form-group">
              <label for="regionId">Region*</label>
              <select class="form-control chosen-select" name="regionId" id="regionId" required>
                <option value="">Select region</option>
                {% for each_region in allRegionsList %}
                <option value='{{each_region.id}}'>{{each_region.regionName}}</option>
                {% endfor %}
              </select>
              <!-- <select class="form-control" name="regionId" id="regionId" required>
                  {% for each_region in countryregionsList %}
                  <option value="{{each_region.id}}">{{each_region.regionName}}</option>
                  {% endfor %}
                </select> -->
              <span id="regionId_error" class="error"></span>
            </div>

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

            <div class="col-md-6 form-group">
              <label>countryFlag</label>
              <input type="file" class="form-control" name="countryFlag">
              <span id="countryFlag_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>
<!-- End -->

<!----------------------- Update Country  Modal  ---------------------------->

<div class="modal fade" id="updateCountryModal" tabindex="-1" role="dialog" aria-labelledby="updateCountryModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateCountryModalLabel">Update Country</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="" id="updatecountryForm" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_updatecountry" name="latitude">
          <input type="hidden" id="longitude_updatecountry" name="longitude">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="editCountryName">Country Name*</label>
              <input type="text" class="form-control" id="editCountryName" name="countryName"
                pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                title="Country Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                required>
              <span id="countryName_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="editCountryCode">Country Code*</label>
              <input type="text" class="form-control" id="editCountryCode" name="countryCode"
                pattern="^\+([1-9][0-9]{0,2})$"
                title="Country Code must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                required>
              <span id="countryCode_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="editregionId">Region*</label>
              <select class="form-control chosen-select" name="regionId" id="editregionId" required>
                <option value="">Select Region</option>
                {% for each_region in allRegionsList %}
                <option value='{{each_region.id}}'>{{each_region.regionName}}</option>
                {% endfor %}
              </select>
              <span id="regionId_edit_error" class="error"></span>

            </div>

            <div class="form-group col-md-6">
              <label for="editRegex">Regex*</label>
              <input type="text" class="form-control" id="editRegex" name="regex" pattern="^[a-zA-Z0-9\s@#$()+_\-/.]*$"
                title="Regex must contain only alphanumeric characters and specific special characters:@#$()+_-/."
                required>
              <span id="regex_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label>Update countryFlag</label>
              <input type="file" class="form-control" id="editcountryFlag" name="countryFlag">
              <br>
              <span id="countryFlag_edit_error" class="error"></span>
              <img id="countryFlagPreview" src="" alt="Current Image" height="150" width="150" style="display: none;">
            </div>
          </div>

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



<!---------------------- Create New State Modal -------------------------------->
<div class="modal fade" id="addStateModal" 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">Add State</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_state')}}" enctype="multipart/form-data" name="add_state_form"
        id="add_state_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <input type="hidden" id="latitude_addstate" name="latitude">
          <input type="hidden" id="longitude_addstate" name="longitude">
        <div class="modal-body px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="stateName">State Name*</label>
                <input type="text" class="form-control" id="stateName" name="stateName"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="State Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter state name" required>
                <span id="stateName_error" class="error"></span>
              </div>
            </div>
            <div class="form-group col-md-6">
              <label for="stateCode">State Code*</label>
              <input type="text" class="form-control" id="stateCode" name="stateCode"
                pattern="\b(0[1-9]|1[0-9]|2[0-9]|3[0-8])\b" minlength="2" maxlength="2"
                title="State Code must be a two-digit number from 01 to 38, as per GST state code format." required>
              <span id="stateCode_error" class="error"></span>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="countryId">Country*</label>
                <select class="form-control chosen-select" name="countryId" id="countryId" required>
                  <option value="">Select country</option>
                </select>
                <span id="countryId_error" class="error"></span>
                <!-- <select class="form-control" name="countryId" id="countryId" required>
                  {% for each_country in countriesList %}
                  <option value="{{each_country.id}}">{{each_country.countryName}}</option>
                  {% endfor %}
                </select> -->
              </div>
            </div>

          </div>
        </div>

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

<!----------------------- Update State  Modal  ---------------------------->

<div class="modal fade" id="editStateModal" tabindex="-1" role="dialog" aria-labelledby="editStateModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editStateModalLabel">Update State</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="" enctype="multipart/form-data" name="updateStateForm" id="updateStateForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_updatestate" name="latitude">
          <input type="hidden" id="longitude_updatestate" name="longitude">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="editStateName">State Name*</label>
              <input type="text" class="form-control" id="editStateName" name="stateName"
                pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                title="State Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                value="" required>
              <span id="stateName_edit_error" class="error"></span>
            </div>
            <div class="form-group col-md-6">
              <label for="editStateCode">State Code*</label>
              <input type="text" class="form-control" id="editStateCode" name="stateCode" minlength="2" maxlength="2"
                pattern="\b(0[1-9]|1[0-9]|2[0-9]|3[0-8])\b"
                title="State Code must be a two-digit number from 01 to 38, as per GST state code format." required>
              <span id="stateCode_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="editCountryId">Country*</label>
              <select class="form-control chosen-select" name="countryId" id="editCountryId" required>
                <option value="">Select country</option>
              </select>
              <span id="countryId_edit_error" class="error"></span>
            </div>
          </div>

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





<!---------------------- Create New City Modal --------------------------->
<div class="modal fade" id="addCityModal" 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">Add City</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_city')}}" enctype="multipart/form-data" id="add_city_form" ,
        name="add_city_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_addcity" name="latitude">
        <input type="hidden" id="longitude_addcity" name="longitude">
        <div class="modal-body px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="cityName">City Name*</label>
                <input type="text" class="form-control" id="cityName" name="cityName"
                  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="City Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter city name" required>
                <span id="cityName_error" class="error"></span>
              </div>

            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="stateId">State Name*</label>
                <!-- <select class="form-control" name="stateId" id="stateId">
                  {% for each_state in statesList %}
                  <option value="{{each_state.id}}">{{each_state.stateName}}</option>
                  {% endfor %}
                </select> -->
                <select class="form-control chosen-select" name="stateId" onChange="getCities(this.value)" id="stateId"
                  required>
                  <option value="">Select State</option>
                </select>
                <span id="stateId_error" class="error"></span>
              </div>
            </div>

          </div>
        </div>

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

<!----------------------- Update city  Modal  ---------------------------->

<div class="modal fade" id="editCityModal" tabindex="-1" role="dialog" aria-labelledby="editCityModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editCityModalLabel">Update Cities</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="" enctype="multipart/form-data col-md-6" id="UpdateCityForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_updatecity" name="latitude">
          <input type="hidden" id="longitude_updatecity" name="longitude">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="editCityName">City Name*</label>
              <input type="text" class="form-control" id="editCityName" name="cityName"
                pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                title="City Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                value="" required>
              <span id="cityName_edit_error" class="error"></span>
            </div>
            <div class="form-group col-md-6">
              <label for="stateId">State Name*</label>
              <select class="form-control chosen-select" name="stateId" id="editStateId" required>
                <option value="">Select State</option>
              </select>
              <span id="stateId_edit_error" class="error"></span>
            </div>
          </div>


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






<!-------------------- Create New Block Modal --------------------------->
<div class="modal fade" id="addBlockModal" 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">Add Block</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_block')}}" enctype="multipart/form-data" id="add_block_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_addblock" name="latitude">
        <input type="hidden" id="longitude_addblock" name="longitude">
        <div class="modal-body px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Block/PO Name*</label>
                <input type="text" class="form-control" id="name" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                  title="Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                  placeholder="Enter name" required>
                <span id="name_error" class="error"></span>
              </div>

            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="cityId">City*</label>
                <select class="form-control chosen-select" name="cityId" id="cityId" required>
                  <option value="">Select City</option>
                </select>
                <span id="cityId_error" class="error"></span>
              </div>

            </div>

          </div>
        </div>

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

<!----------------------- Update Block  Modal  ---------------------------->
<div class="modal fade" id="editBlockModal" tabindex="-1" role="dialog" aria-labelledby="editBlockModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editBlockModalLabel">Update Block</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="" enctype="multipart/form-data" id="UpdateBlockForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          <input type="hidden" id="latitude_updateblock" name="latitude">
          <input type="hidden" id="longitude_updateblock" name="longitude">

          <div class="row">
            <div class="form-group col-md-6">
              <label for="editName">Block/PO Name*</label>
              <input type="text" class="form-control" id="editName" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                title="Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."
                value="" required>
              <span id="name_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="cityId">City Name*</label>
              <select class="form-control chosen-select" name="cityId" id="editCityId" required>
                <option value="">Select City</option>
              </select>
              <span id="cityId_edit_error" class="error"></span>

            </div>
          </div>

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




<!----------------------------- Create New Pincode Modal ---------------------------->
<div class="modal fade" id="addPincodeModal" 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">Add Pincode</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{url_for('regions.add_pincode')}}" enctype="multipart/form-data"
        id="add_pincode_form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <input type="hidden" id="latitude_addpincode" name="latitude">
        <input type="hidden" id="longitude_addpincode" name="longitude">
        <div class="modal-body px-4">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="pincode">Pincode*</label>
                <input type="number" class="form-control" id="pincode" pattern="^\d+(\.\d+)?$"
                  title="Pincode must contain only numeric characters" name="pincode" placeholder="Pincode" required>
                <span id="pincode_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="regionId">Region Name*</label>
                <select class="form-control chosen-select" name="regionId" id="regionId_pincode"
                  onchange="getCountries('', this.value)" required>
                  <option value="">Select region</option>
                  {% for each_region in allRegionsList %}
                  <option value='{{each_region.id}}'>{{each_region.regionName}}</option>
                  {% endfor %}
                </select>
                <span id="regionId_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="CountryId">Country Name*</label>
                <select class="form-control chosen-select" name="CountryId" id="countryId_pincode"
                  onchange="getStates('',this.value)" required>
                  <option value="">Select country</option>
                </select>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="stateId">State Name*</label>
                <select class="form-control chosen-select" name="stateId" id="stateId_pincode"
                  onchange="getCities('',this.value)" required>
                  <option value="">Select state</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="cityId">City Name*</label>
                <select class="form-control chosen-select" name="cityId" id="cityId_pincode"
                  onchange="getBlockPo('', this.value)" required>
                  <option value="">Select city</option>
                </select>
              </div>
            </div>

            <div class="col-md-6">

              <div class="form-group">
                <label for="">Block/PO*</label>
                <select class="form-control chosen-select" name="blockPoId" id="blockPoId_pincode" required>
                </select>
                <span id="blockPoId_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group">
                <label for="lat">Latitude</label>
                <input type="text" class="form-control" id="latitude" name="lat"
                  pattern="^-?(90(\.0{1,6})?|[0-8]?[0-9](\.[0-9]{1,6})?)$"
                  title="Invalid latitude! Must be between -90 and 90, with up to 6 decimal places."
                  placeholder="Latitude">
                <span id="lat_error" class="error"></span>
              </div>
            </div>

            <div class="col-md-6">

              <div class="form-group">
                <label for="long">Longitude</label>
                <input type="text" class="form-control" id="long" name="long"
                  pattern="^-?(180(\.0{1,6})?|1[0-7][0-9](\.[0-9]{1,6})?|[0-9]{1,2}(\.[0-9]{1,6})?)$"
                  title="Invalid longitude! Must be between -180 and 180, with up to 6 decimal places."
                  placeholder="Longitude">
                <span id="long_error" class="error"></span>
              </div>



            </div>

          </div>

        </div>
        <!--</div>-->

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

<!----------------------- Update Pin  Modal  ---------------------------->
<div class="modal fade" id="editPincodeModal" tabindex="-1" role="dialog" aria-labelledby="editPincodeModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editPincodeModalLabel">Update Pincode</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>
      <div class="modal-body">
        <form method="POST" action="" enctype="multipart/form-data" id="UpdatePincodeForm">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" id="latitude_updatepincode" name="latitude">
          <input type="hidden" id="longitude_updatepincode" name="longitude">
          <div class="row">
            <div class="form-group col-md-6">
              <label for="editPincode">Pincode*</label>
              <input type="number" class="form-control" id="editPincode" name="pincode" pattern="^\d+(\.\d+)?$"
                title="Pincode must contain only numeric characters" value="" required placeholder="Pincode">
              <span id="pincode_edit_error" class="error"></span>

            </div>
            <div class="form-group col-md-6">
              <label for="regionId">Region Name*</label>
              <select class="form-control chosen-select" name="regionId" id="regionIdEdit"
                onchange="getCountries('', this.value)" required>
                <option value="">Select region</option>
                {% for each_region in allRegionsList %}
                <option value='{{each_region.id}}'>{{each_region.regionName}}</option>
                {% endfor %}
              </select>
            </div>

            <div class="form-group col-md-6">
              <label for="CountryId">Country Name*</label>
              <select class="form-control chosen-select" name="CountryId" id="countryIdEdit"
                onchange="getStates('',this.value)" required>
                <option value="">Select country</option>
              </select>
            </div>
            <div class="form-group col-md-6">
              <label for="stateId">State Name*</label>
              <select class="form-control chosen-select" name="stateId" id="stateIdEdit"
                onchange="getCities('',this.value)" required>
                <option value="">Select state</option>
              </select>
            </div>
            <div class="form-group col-md-6">
              <label for="cityId">City Name*</label>
              <select class="form-control chosen-select" name="cityId" id="cityIdEdit"
                onchange="getBlockPo('', this.value)" required>
                <option value="">Select city</option>
              </select>
            </div>

            <div class="form-group col-md-6">
              <label for="">Block/PO*</label>
              <select class="form-control chosen-select" name="blockPoId" id="blockPoIdEdit" required>
                <option value="">Select block/po</option>
              </select>
              <span id="blockPoId_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="lat">Latitude</label>
              <input type="text" class="form-control" id="editlat" name="lat" value=""
                pattern="^-?(90(\.0{1,6})?|[0-8]?[0-9](\.[0-9]{1,6})?)$"
                title="Invalid latitude! Must be between -90 and 90, with up to 6 decimal places."
                placeholder="Latitude">
              <span id="lat_edit_error" class="error"></span>
            </div>

            <div class="form-group col-md-6">
              <label for="long">Longitude</label>
              <input type="text" class="form-control" id="editlong" name="long" value=""
                pattern="^-?(180(\.0{1,6})?|1[0-7][0-9](\.[0-9]{1,6})?|[0-9]{1,2}(\.[0-9]{1,6})?)$"
                title="Invalid longitude! Must be between -180 and 180, with up to 6 decimal places."
                placeholder="Longitude">
              <span id="long_edit_error" class="error"></span>
            </div>
          </div>



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

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



<script type="text/javascript">

  $(document).ready(function () {
    $('#add_region_form').validate({
      rules: {
        regionName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        regionType: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
      },
      messages: {
        regionName: {
          required: 'Region Name is required',
          minlength: 'Region Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Region Name is must be lessthan or equals to 75 charecters',
        },
        regionType: {
          required: 'Region Type is required',
          minlength: 'Region Type is must be greaterthan or equals to 3 charecters',
          maxlength: 'Region Type is must be lessthan or equals to 75 charecters',
        },
      },
      submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if ( 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 + "_error").text(value);
                                    });
                                }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Region&regionpage=regionpage';
                              } else if (response.responseStatus == 2) {
                                 $('.form_submit').prop('disabled', false);
                                   $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } else {
                                    location.reload();
                                }
                            },
                            
                        });
                    },
                    function () {
                      $('.form_submit').prop('disabled', false);
                      $('#newLoadingModel').hide();
                          alert("Location access is required to proceed. Please enable it in your browser.");
                  }
                );
            }
        });


    $('#updateregionForm').validate({
      rules: {
        regionName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        regionType: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
      },
      messages: {
        regionName: {
          required: 'Region Name is required',
          minlength: 'Region Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Region Name is must be lessthan or equals to 75 charecters',
        },
        regionType: {
          required: 'Region Type is required',
          minlength: 'Region Type is must be greaterthan or equals to 3 charecters',
          maxlength: 'Region Type is must be lessthan or equals to 75 charecters',
        },

      },
      submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if ( 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);
                                    });
                                }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Region&regionpage={{regionpage}}';
                              } else if (response.responseStatus == 2) {
                                  $('.form_submit').prop('disabled', false);
                                  $('#newLoadingModel').hide();
                                    $('#EditErrorMessage').text(response.result);
                                } 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 type="text/javascript">

  $(document).ready(function () {
    $('#add_country_form').validate({
      rules: {
        countryName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        countryCode: {
          required: true,
          minlength: 2,
          maxlength: 4,
        },
        regex: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        regionId: {
          required: true,
        },
        regionName: {
          required: true,
          minlength: 1,
          maxlength: 715,
        },
        countryFlag: {
          required: false,
          extension: "png|jpg|jpeg"
        },
      },
      messages: {
        countryName: {
          required: 'Country Name is required',
          minlength: 'Country Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Country Name is must be lessthan or equals to 75 charecters',
        },
        countryCode: {
          required: 'Country Code is required',
          minlength: 'Country Code is must be greaterthan or equals to 2 charecters',
          maxlength: 'Country Code is must be lessthan or equals to 3 charecters',
        },
        regex: {
          required: 'Regex is required',
          minlength: 'Regex is must be greaterthan or equals to 3 charecters',
          maxlength: 'Regex is must be lessthan or equals to 75 charecters',
        },
        regionId: {
          required: 'Please select a Region name.',
        },
        regionName: {
          required: 'Region Name is required.',
          minlength: 'Region Name must be at least 3 character long.',
          maxlength: 'Region Name must be no longer than 75 characters.',
        },
        countryFlag: {
          extension: "Please upload a file in .png, .jpg, or .jpeg format."
        }
      },

      submitHandler: function (form, event) {
        $('.form_submit').prop('disabled', true);
        $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if (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 + "_error").text(value);
                                    });
                                }  else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Country&countryPage={{countryPage}}';
                              }else if (response.responseStatus == 2) {
                                  $('.form_submit').prop('disabled', false);
                                  $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } 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.");
                    }
                );
            }
        });


    $('#updatecountryForm').validate({
      rules: {
        countryName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        countryCode: {
          required: true,
          minlength: 2,
          maxlength: 4,
        },
        regex: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        regionId: {
          required: true,
        },
        regionName: {
          required: true,
          minlength: 1,
          maxlength: 715,
        },
        countryFlag: {
          required: false,
          extension: "png|jpg|jpeg"
        },
      },
      messages: {
        countryName: {
          required: 'Country Name is required',
          minlength: 'Country Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Country Name is must be lessthan or equals to 75 charecters',
        },
        countryCode: {
          required: 'Country Code is required',
          minlength: 'Country Code is must be greaterthan or equals to 2 charecters',
          maxlength: 'Country Code is must be lessthan or equals to 3 charecters',
        },
        regex: {
          required: 'Regex is required',
          minlength: 'Regex is must be greaterthan or equals to 3 charecters',
          maxlength: 'Regex is must be lessthan or equals to 75 charecters',
        },
        regionId: {
          required: 'Please select a Region name.',
        },
        regionName: {
          required: 'Region Name is required.',
          minlength: 'Region Name must be at least 3 character long.',
          maxlength: 'Region Name must be no longer than 75 characters.',
        },
        countryFlag: {
          extension: "Please upload a file in .png, .jpg, or .jpeg format."
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
            $('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Country&countryPage={{countryPage}}';
                              }
                             else if (response.responseStatus == 2) {
                              $('.form_submit').prop('disabled', false);
                              $('#newLoadingModel').hide();
                                $('#EditErrorMessage').text(response.result);
                            } 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 type="text/javascript">

  $(document).ready(function () {
    $('#add_state_form').validate({
      rules: {
        stateName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        stateCode: {
          required: true,
          minlength: 2,
          maxlength: 2,
          pattern: /\b(0[1-9]|1[0-9]|2[0-9]|3[0-8])\b/
        },
        countryId: {
          required: true,
        }
      },
      messages: {
        stateName: {
          required: 'State Name is required',
          minlength: 'State Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'State Name is must be lessthan or equals to 75 charecters',
        },
        stateCode: {
          required: "State Code is required.",
          minlength: "State Code must be exactly 2 digits.",
          maxlength: "State Code must be exactly 2 digits.",
          pattern: "Enter a valid State Code between 01 and 38."
        },
        countryId: {
          required: "Please select a country"
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
            $('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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 + "_error").text(value);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=State&statePage={{statePage}}';
                              } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
								                $('#newLoadingModel').hide();
                                $('#errorMessage').text(response.result);
                            } else {
                                location.reload();
                            }
                        },
                        
                    });
                },
                function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
            );
        }
    });

    $('#updateStateForm').validate({
      rules: {
        stateName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        },
        stateCode: {
          required: true,
          minlength: 2,
          maxlength: 2,
          pattern: /\b(0[1-9]|1[0-9]|2[0-9]|3[0-8])\b/
        },
        countryId: {
          required: true,
        }
      },
      messages: {
        stateName: {
          required: 'State Name is required',
          minlength: 'State Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'State Name is must be lessthan or equals to 75 charecters',
        },
        stateCode: {
          required: "State Code is required.",
          minlength: "State Code must be exactly 2 digits(between 01-38).",
          maxlength: "State Code must be exactly 2 digits(between 01-38).",
          pattern: "Enter a valid State Code between 01 and 38."
        },
        countryId: {
          required: "Please select a country"
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
										$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=State&statePage={{statePage}}';
                              } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
									              $('#newLoadingModel').hide();
                                $('#EditErrorMessage').text(response.result);
                            } 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 type="text/javascript">

  $(document).ready(function () {
    $('#add_city_form').validate({
      rules: {
        cityName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        }
      },
      messages: {
        cityName: {
          required: 'City Name is required',
          minlength: 'City Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'City Name is must be lessthan or equals to 75 charecters',
        }
      },
      submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
								$('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if ( 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 + "_error").text(value);
                                    });
                                }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=City&cityPage={{cityPage}}';
                              } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
								                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                } 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.");
                    }
                );
            }
        });

    $('#UpdateCityForm').validate({
      rules: {
        cityName: {
          required: true,
          minlength: 3,
          maxlength: 75,
        }
      },
      messages: {
        cityName: {
          required: 'City Name is required',
          minlength: 'City Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'City Name is must be lessthan or equals to 75 charecters',
        }

      },
      submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
								$('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if ( 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);
                                    });
                                }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=City&cityPage={{cityPage}}';
                              } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
								                    $('#newLoadingModel').hide();
                                    $('#EditErrorMessage').text(response.result);
                                } 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 type="text/javascript">

  $(document).ready(function () {
    $('#add_block_form').validate({
      rules: {
        name: {
          required: true,
          minlength: 3,
          maxlength: 75,
        }
      },
      messages: {
        name: {
          required: 'Block/PO Name is required',
          minlength: 'Block/PO Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Block/PO Name is must be lessthan or equals to 75 charecters',
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
						$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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 + "_error").text(value);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Block&blockPage={{blockPage}}';
                              } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
								                $('#newLoadingModel').hide();
                                $('#errorMessage').text(response.result);
                            } 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.");
                    }
            );
        }
    });

    $('#UpdateBlockForm').validate({
      rules: {
        name: {
          required: true,
          minlength: 3,
          maxlength: 75,
        }
      },
      messages: {
        name: {
          required: 'Block/PO Name is required',
          minlength: 'Block/PO Name is must be greaterthan or equals to 3 charecters',
          maxlength: 'Block/PO Name is must be lessthan or equals to 75 charecters',
        }

      },
      submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
								$('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    (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,
                            contentType: false,
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                if ( 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);
                                    });
                                }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Block&blockPage={{blockPage}}';
                              } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
								                    $('#newLoadingModel').hide();
                                    $('#EditErrorMessage').text(response.result);
                                } 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 type="text/javascript">

  $(document).ready(function () {
    $('#add_pincode_form').validate({
      rules: {
        pincode: {
          required: true,
          digits: true,
          range: [100000, 999999]
        },
        long: {
          required: false,
          minlength: 3,
          maxlength: 11,
          pattern: '^-?(180(\.0{1,6})?|1[0-7][0-9](\.[0-9]{1,6})?|[0-9]{1,2}(\.[0-9]{1,6})?)$'
        },
        lat: {
          required: false,
          pattern: '^-?(90(\.0{1,6})?|[0-8]?[0-9](\.[0-9]{1,6})?)$',
          minlength: 3,
          maxlength: 11,
        }
      },
      messages: {
        pincode: {
          required: 'pincode is required',
          digits: "Please enter only digits",
          range: "Pincode must be a 6-digit number"
        },
        long: {
          minlength: 'longitude is must be greaterthan or equals to 3 charecters',
          maxlength: 'longitude is must be lessthan or equals to 11 charecters',
          pattern: 'Invalid longitude! Must be between -180 and 180, with up to 6 decimal places.'
        },
        lat: {
          minlength: 'latitude is must be greaterthan or equals to 3 charecters',
          maxlength: 'latitude is must be lessthan or equals to 11 charecters',
          pattern: 'Invalid latitude! Must be between -90 and 90, with up to 6 decimal places.'
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
						$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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 + "_error").text(value);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Pincode&pincodePage={{pincodePage}}';
                              } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
								                $('#newLoadingModel').hide();
                                $('#errorMessage').text(response.result);
                            } 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.");
                    }
            );
        }
    });
    $('#UpdatePincodeForm').validate({
      rules: {
        pincode: {
          required: true,
          digits: true,
          range: [100000, 999999]
        },
        long: {
          required: false,
          minlength: 3,
          maxlength: 11,
        },
        lat: {
          required: false,
          minlength: 3,
          maxlength: 11,
        }
      },
      messages: {
        pincode: {
          required: 'Pincode is required',
          digits: "Please enter only digits",
          range: "Pincode must be a 6-digit number"
        },
        long: {
          minlength: 'longitude is must be greaterthan or equals to 3 charecters',
          maxlength: 'longitude is must be lessthan or equals to 11 charecters',
        },
        lat: {
          minlength: 'latitude is must be greaterthan or equals to 3 charecters',
          maxlength: 'latitude is must be lessthan or equals to 11 charecters',
        }
      },
      submitHandler: function (form, event) {
            $('.form_submit').prop('disabled', true);
						$('#newLoadingModel').show();
            event.preventDefault();
            getLocationAndProceed(
                (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,
                        contentType: false,
                        xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                        success: function (response) {
                            if ( 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) {
                                    $('.form_submit').prop('disabled', false);
								                    $('#newLoadingModel').hide();
                                    $('#' + key + "_edit_error").text(value);
                                });
                            }else if (response.responseStatus == 1) {
                                  form.reset();
                                  window.location.href = 'regions_list?redirectto=Pincode&pincodePage={{pincodePage}}';
                              } else if (response.responseStatus == 2) {
                                $('.form_submit').prop('disabled', false);
								                    $('#newLoadingModel').hide();
                                $('#EditErrorMessage').text(response.result);
                            } 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>


{%endblock%}