@extends('layouts.app')

@section('content')

<!-- CSS for sticky header -->
<style>
  * {
    font-family: "Montserrat", sans-serif;
  }

  body {
    overflow-x: hidden;
  }

  /* .select2.select2-container {
    width: 350px !important;
  } */

  .select2-container .select2-selection--single {
    height: 32px !important;
    width: 350px;
  }

  #select2-userSelect-results {
    width: 21.80rem;
    top: 35px;
  }

  .main-heading {
    margin-top: 2%;
    margin-bottom: 3%;
    font-size: 2.1rem;
  }

  #metaTable_filter input {
    border-radius: 35px !important;
    padding: 10px;
    outline: none;
    margin-top: -40px;
    margin-bottom: 11px;
    width: 100%;
  }

  .paginate_button {
    border: 2px solid #d7d7d7 !important;
    color: #ebe7e7 !important;
    font-weight: bold;
  }

  .paginate_button:hover {
    border: 2px solid #34548A !important;
    ;
    background: #34548A !important;
    border-color: #34548A !important;
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .paginate_button.disabled:hover {
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .dataTables_paginate a.current {
    color: #ebe7e7 !important;
    background: #34548A !important;
    border-color: #34548A !important;
  }

  .provisioning-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .dataTables_scroll {
    margin-bottom: 1.5%;
  }

  .dataTables_scrollBody tbody {
    display: block;
    /* max-height: 440px; */
    width: 100%;
  }

  .dataTables_scrollBody thead,
  .dataTables_scrollBody tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .dataTables_scrollBody {
    scrollbar-color: #34548A #fff !important;
  }

  #daily-calling-status-count-table_processing {
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin: 280px 0px 0px 0px;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ebe7e7 !important;
    font-weight: bold !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #ebe7e7 !important;
  }

  .dataTables_info {
    color: #34548A !important;
    font-size: 16px;
    font-weight: bold;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #34548A !important;
  }

  .label-text-tel {
    font-family: "Montserrat";
  }

  .tel-label {
    margin-bottom: 0px !important;
  }

  table.dataTable {
    border: none !important;
  }

  table.dataTable thead {
    background-color: #34548A !important;
    border: 0 !important;
    /* padding: 5px !important; */
    color: #ebe7e7 !important;
  }

  table.dataTable thead th {
    border: none !important;
    width: 210px !important;
    font-family: "Montserrat";
  }

  table.dataTable thead th:first-child {
    width: 115px !important;
  }

  table.dataTable tbody td:first-child {
    width: 131px !important;
  }

  table.dataTable thead th:nth-child(2) {
    width: 200px !important;
  }

  table.dataTable tbody td:nth-child(2) {
    width: 216px !important;
  }

  table.dataTable tbody td {
    border: none !important;
    overflow-wrap: break-word;
    font-family: "Montserrat";
  }

  .label-text {
    font-family: "Montserrat";
  }

  .description-text,
  .customer-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  table tbody tr:nth-child(odd) {
    background-color: #d7d7d7;
  }

  table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
  }

  table thead input[type="checkbox"] {
    accent-color: #ffffff !important;
  }

  .common-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e2e2;
    text-align: center;
    background-color: #f8f8f8;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  }

  .modal {
    z-index: 10 !important;
    /* padding-top: 250px; */
  }

  #listnumber-check {
    height: 17px;
    width: 17px;
    position: absolute;
    top: 4px;
    left: 1.3px;
  }

  .row-checkbox {
    height: 24px;
    width: 16.5px;
  }

  .row-checkbox {
    margin-left: 9px;
  }

  #numberProvisioningTable_length {
    display: none;
  }

  .icon {
    cursor: pointer;
    color: #34548A;
  }

  .filter_data {
    margin-bottom: 20px;
    width: 100%;
  }

  .outbound-numbers-select-action,
  .action_on_numbers {
    display: flex;
    position: relative;
  }

  .outbound-numbers-select-action {
    gap: 5%;
    margin-left: 5%;
    margin-bottom: -0.35%;
  }

  .dataTables_wrapper .dataTables_filter input {
    border-radius: 50px;
    width: 75% !important;
    height: 19px;
    position: relative;
    background: #fff;
    margin-bottom: 5%;
    z-index: 2;
  }

  .container {
    padding: 0 !important;
  }

  .dataTables_processing {
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.71);
    z-index: 99;
    transform: translate(-50%, -50%);
    color: #fff;
    padding: 10px 20px;
  }

  input,
  button {
    outline: none !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
  }

  button {
    font-size: 13.5px;
    min-height: 35px;
    text-transform: uppercase;
  }

  .go-bulk-apply-button {
    text-transform: uppercase;
    font-weight: 500;
    min-width: 100px;
  }

  tbody tr td {
    color: #34548a;
    font-family: "Montserrat";
  }

  /* .inventory-button {
    display: flex;
    gap: 25px;
  } */
  .np-filter-button {
    position: absolute;
    margin-top: 20px;
    margin-left: 72%;
  }

  .required-label::after {
    content: " *";
    color: red;
    font-weight: 600;
  }

  .actions,
  .export-inventory-data,
  .filter {
    /* margin-left: 85%; */
    text-transform: uppercase;
    padding: 0px 30px;
    font-weight: 500;
    cursor: pointer;
  }

  .filter {
    min-width: auto;
  }

  .export-inventory-data {
    min-width: 11rem;
  }

  .telephone-number {
    cursor: pointer;
    margin-left: 15px;

    &:hover {
      text-decoration: underline;
    }
  }

  .edit-mode {
    display: none;
  }

  input::placeholder {
    color: #b7b7b7;
    font-family: "Montserrat", sans-serif;
  }

  .display-value {
    color: #4e4e4e;
    font-weight: 500;
    font-size: 14px;
  }

  input[type="text"] {
    padding: 7px 14px !important;
    letter-spacing: normal;
    border: 1px solid #9d9d9d !important;
    background-color: #fff;
    font-size: 12px !important;
    color: #4e4e4e;
    font-family: "Montserrat";
    width: 90%;
    vertical-align: middle;
  }

  .edit-description {
    width: 90%;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    outline: none;
    font-size: 14px !important;
    color: #4e4e4e;
  }

  textarea::placeholder {
    color: #b7b7b7;
    font-family: "Montserrat", sans-serif;
  }

  .main-div-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5% 5%;
  }

  .heading-div {
    font-size: 20px;
    font-weight: 600;
    color: #34548a;
  }

  .btns-sub-div {
    display: flex;
    gap: 6%;
    align-items: center;
    justify-content: center;
    margin-right: 1.5%;
  }

  .export-btn,
  .edit-btn,
  .edit-save-btn,
  .add-save-btn {
    text-transform: uppercase;
    padding: 0px 30px;
    font-weight: 500;
  }

  .edit-save-btn {
    display: none;
  }

  .delete-icon {
    color: #34548a;
    cursor: pointer;
    margin-left: 8px;
  }

  .edit-icon,
  .fa-chevron-down {
    font-weight: 400;
    margin-left: 7%;
    cursor: pointer;
  }

  .edit-cname {
    font-weight: 900;
  }

  .fa-arrow-left {
    margin-right: 5%;
    cursor: pointer;
  }

  .heading-para {
    width: 175px;
    margin-bottom: 0;
    cursor: pointer;
  }

  .add-inventory-heading {
    width: 220px;
  }

  input[readonly] {
    background-color: gainsboro;
    color: #4e4e4e !important;
    opacity: 1 !important;
  }

  .ui-datepicker-trigger {
    width: 20px;
    left: -30px;
  }

  select {
    padding: 6px 20px 6px 6px !important;
    font-size: 14px !important;
    color: #34548a;
    width: 90%;
    /* font-family: "Montserrat", sans-serif; */
    border-radius: 4px;
    height: 31px;
    outline: none !important;
    margin-right: 0px !important;
    background-color:#ffffff
  }

  #bulk-action-select {
    height: 34px;
    border-radius: 25px;
    width: 16rem;
  }

  .simple-success-modal {
    width: 420px;
    display: none;
  }

  .simple-release-modal,
  .simple-disconnect-modal {
    width: 450px;
    display: none;
  }

  .simple-error-modal {
    width: 420px;
    /* font-family: 'Nunito', sans-serif; */
    display: none;
  }

  .table-error-modal {
    width: 50%;
    /* font-family: 'Nunito', sans-serif; */
    display: none;
  }

  .simple-delete-modal {
    width: 420px;
    display: none;
  }

  .simple-success-modal-close,
  .simple-error-modal-close,
  .table-error-modal-close,
  .simple-release-modal-close,
  .simple-disconnect-modal-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 25px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
    z-index: 2;
  }

  .table-error-modal-div {
    max-height: 25rem;
    overflow: auto;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .error-msg-header {
    color: red !important;
  }

  .success-msg-header {
    color: green !important;
  }

  .fa-check {
    border: 1px solid green;
    border-radius: 50%;
    padding: 1px 1px 1px 1px;
  }


  .msg-text {
    font-size: 16px;
  }

  .delete-btns,
  .filter-btns {
    display: flex;
    justify-content: space-between;
    margin-top: 4%;
    /* margin-bottom: 3%; */
    font-size: 15px;
    /* font-family: "Montserrat", sans-serif; */
    text-transform: uppercase;
  }

  .cancel-delete-btn,
  .delete-btn {
    min-width: 150px !important;
  }

  .close-icon {
    border: 1px solid #008000;
    border-radius: 50%;
    padding: 2px 4px 0px 4px;
  }

  .checkbox-buttons {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    font-size: 17px;
    /* font-family: "Montserrat", sans-serif; */
    color: #212529;
    gap: 20px;
  }

  .filters-value-div {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .filter-search {
    background: #f8f8f8;
  }

  .label-filter-value-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 35rem;
    height: 1.5rem;
  }

  .filter-container label {
    margin-bottom: 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .filter-label {
    width: 16px;
    height: 16px;
  }

  .hidden-container,
  .filter-main-container {
    display: none;
    top: 50%;
  }

  .filter-container {
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: center;
  }

  .filter-row-subdiv {
    display: flex;
    flex-direction: column;
    font-size: 17px;
    /* font-family: "Montserrat", sans-serif; */
    color: #212529;
  }

  .filterDropdown {
    font-size: 15px !important;
    color: #212529;
    height: 37px;
    width: 16rem;
  }

  .filter-para {
    font-size: 20px;
    /* font-family: "Montserrat", sans-serif; */
    text-align: left;
    font-weight: 600;
    color: #34548A;
  }

  .close-filter {
    position: absolute;
    top: 4%;
    right: 4%;
    font-size: 18px;
    cursor: pointer;
  }

  /* .error-message {
    color: red;
    position: absolute;
    bottom: -21px;
    left: 13px;
  } */

  #tel-error-message {
    color: red;
    position: absolute;
    bottom: -25px;
    left: 0;
  }

  .input-container {
    position: relative;
  }

  .provisioning-table-div {
    padding: 0 5%;
    position: relative;
  }

  .tel-check-div {
    position: relative;
  }

  .telcheck-div {
    display: flex;
    justify-content: start;
  }

  .search-input {
    position: absolute;
    top: -30px;
    right: 75px;
  }

  .dataTables_filter input[type="search"] {
    padding: 6px 40px 6px 20px !important;
    letter-spacing: normal;
    border: 1px solid #9d9d9d !important;
    background-color: #fff;
    font-size: 15px !important;
    color: #4e4e4e;
    font-family: "Montserrat";
    border-radius: 30px;
    width: 75%;
  }

  .search-icon,
  .spin-icon {
    position: absolute;
    z-index: 2;
    right: 20px !important;
    font-size: 16px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    opacity: 0.7;
    padding: 10px 0;
    top: 0px;
    color: #c2c2c2;
  }

  .spin-icon {
    display: none;
  }

  .filter-div {
    position: relative;
  }

  .filter-search {
    width: 14.65rem;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    font-size: 13px;
    color: #4e4e4e;
    height: 15px;
    margin-right: 15px
  }

  .search-results-container {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin-top: 5px;
    padding: 5px;
    display: none;
    position: absolute;
    width: 16rem;
    top: 32px;
    border-radius: 4px;
    background: #f8f8f8;
    z-index: 5;
  }

  .search-result {
    cursor: pointer;
    padding: 5px 0px;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
  }

  .search-result:last-child {
    border-bottom: none;
  }

  .search-result:hover {
    background-color: #34548A;
    color: #ffffff;
  }

  .search-results-container::-webkit-scrollbar,
  .suggestions-container::-webkit-scrollbar {
    width: 12px;
  }

  .search-results-container::-webkit-scrollbar-track,
  .suggestions-container::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .search-results-container::-webkit-scrollbar-thumb,
  .suggestions-container::-webkit-scrollbar-thumb {
    background-color: #34548A;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
  }

  .filter-search-icon,
  .customer-spin-icon {
    /* top: 35px; */
    right: 25px !important;
  }

  #tableContainer {
    display: none;
    width: 65%;
    margin: 1px auto;
    padding: 40px;
    background: #fefefe;
    border-radius: 5px;
    z-index: 5;
  }

  .close-testing-result {
    margin-top: -4.5rem;
  }

  .pop-up-heading {
    margin-bottom: 15px;
    font-size: 25px;
    font-weight: 600;
  }

  .fa-plus {
    font-weight: 400;
    margin-left: 5px;
  }

  .save-cname {
    display: none;
    font-size: 14.5px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .table-error-modal-div::-webkit-scrollbar {
    width: 15px;
  }

  .table-error-modal-div::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .testing-result-div::-webkit-scrollbar-thumb,
  .table-error-modal-div::-webkit-scrollbar-thumb {
    background-color: #34548A;
    border-radius: 5px;
    border: 3px solid #f1f1f1;
  }

  .cname-value,
  .screenshot-value,
  .testing-result-main-tr th {
    font-family: "Montserrat";
  }

  .screenshot-value {
    outline: none;
    color: #34548a;

    &:hover {
      text-decoration: underline;
      font-weight: 500;
    }
  }

  a:hover,
  a:active,
  a:focus {
    outline: 0;
  }

  .testing-result-main-tr,
  .error-table {
    background-color: #34548A !important;
    color: #fff;
  }

  .numbertype-submenu .role-permission-list {
    display: flex;
    width: 50%;
    flex-direction: row;
    margin: auto;
    margin-top: -25px;
    margin-bottom: 30px;
  }

  .numbertype-submenu .role-permission-list li {
    width: 50%;
    text-align: center;
    border-bottom: 3px solid #918c8c;
    background-color: #e3e3e3;
  }

  .role-permission-list li.menu-item-selected a {
    color: #F9A035;
  }

  .numbertype-submenu .role-permission-list li a {
    text-align: center;
    float: initial;
    margin: auto;
    white-space: nowrap;
    width: 100%;
    outline: none;
  }

  .role-permission-list li.menu-item-selected {
    border-bottom: 4px solid #F9A035;
    color: #F9A035;
  }



  /*AKASH CSS to make first column sticky */
  .provisioning-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #34548A;
    border-right: 2px solid white !important;
  }

  .provisioning-table tbody tr:nth-child(odd) td:first-child,
  .provisioning-table tbody tr:nth-child(even) td:first-child {
    background-color: #d7d7d7;
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 2px solid white !important;
    border-bottom: 2px solid white !important;
  }

  .provisioning-table tbody tr:last-child td:first-child {
    border-bottom: none !important;
  }

  .add-bulk-btn {
    min-width: 170px;
    font-size: 14px;
    margin-right: 30px;
  }

  /* Hide the file input field */
  .file-input-field {
    display: none;
  }

  .bulk-upload-para {
    color: #34548A !important;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
  }

  .update-note {
    font-size: 14px;
    color: #34548A !important;
    text-align: center;
  }

  .bulk-upload-modal,
  .bulk-edit-modal {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70rem;
    display: none;
  }

  /* Style the label to look like a button */
  .file-upload label {
    cursor: pointer;
    width: 100%;
    display: block;
    padding: 10px 10px;
    text-transform: uppercase;
  }

  .file-upload {
    display: block;
    text-align: center;
    border: solid 1px #34548A;
    color: #34548A;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    width: 55%;
    margin: 20px auto;
  }

  .upload-label:hover {
    background-color: #0056b3;
  }

  .cancel-file {
    display: none;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #34548A;
  }

  .suggestions-container {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 5px;
    display: none;
    position: absolute;
    width: 18.6rem;
    border-radius: 4px;
    background: #f8f8f8;
    z-index: 5;
  }

  .suggestion-item {
    cursor: pointer;
    padding: 5px 0px;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
  }

  .suggestion-item:last-child {
    border-bottom: none;
  }

  .suggestion-item:hover {
    background-color: #34548A;
    color: #ffffff;
  }

  .add-save-bulk-btn {
    display: none;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 150px;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    top: 40px;
    text-align: left;
  }

  .dropdown-content a {
    font-size: 14px !important;
    color: #4e4e4e;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #f1f1f1;
    /* color: #fff; */
    border-radius: 10px;
  }

  .description-icon {
    display: none;
    cursor: pointer;
    position: absolute;
    left: -30px;
    top: 3px;
    color: #34548A;
    font-size: 18px;
  }

  .user_find_replace_div {
    display: flex;
    gap: 5%;
    align-items: baseline;
    margin-bottom: -2.4%;
    z-index: 10;
    position: relative;
    width: 75%;
  }

  .user_select_div {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  label {
    margin-bottom: 0px !important;
  }

  .user_select_div {
    display: flex;
    gap: 10px;
    align-items: end;
  }

  .find_replace_tools {
    display: flex;
    gap: 10px;
    align-items: end;
  }

  .highlight {
    background-color: yellow;
    color: #000;
  }

  .user_select_subdiv,
  .column-div,
  .find-div,
  .replace-div {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }

  .btn {
    padding: 0.25rem .75rem !important;
    min-width: 100px !important;
    min-height: 32px !important;
  }

  .fetch-btn {
    min-width: 100px !important;
    min-height: 32px;
    border-radius: 5px;
  }

  .label-text[contenteditable="true"]:focus {
    outline: none;
    box-shadow: none;
  }

  .checkbox-extra {
    position: absolute;
    left: -8px;
    top: 8px;
  }

  .checkbox-wrapper {
    position: relative;
  }

  .view-numbers p {
    font-size: 14px !important;
  }

  /* Select2 container inside tables or dropdown cells */
  .select2 .select2-container .select2-container--default {
    width: 200px !important;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    height: 26px !important;
    overflow-y: scroll !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar {
    display: none;
  }

  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #aaa !important;
  }

  .select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    /* margin-top: 78px; */
    position: absolute;
    width: 14.05rem;
    background: white;
    border: 1px solid #9d9d9d !important;
  }

  .user_dropdown .select2-container--default .select2-results>.select2-results__options {
    width: 21.65rem !important;
  }

  .icon-div {
    display: flex;
    justify-content: space-around;
    flex-direction: column;

    &:hover {
      cursor: pointer;
    }
  }

  #replicateText {
    width: 70px;
  }

  .replicate-main-div {
    display: flex;
    gap: 34px;
  }

  .text-div {
    display: flex;
    justify-content: space-around;
    flex-direction: column-reverse;

    &:hover {
      cursor: pointer;
    }
  }

  .filter-status {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 20%;
  }

  #my-active-status {
    width: 100%;
  }

  .edit-delete {
    display: flex;
    gap: 5%;
    justify-content: end;
    margin-top: 8%;
  }

  .dataTables_scrollBody {
    max-height: 600px;
  }

  .error-modal {
    display: none;
    width: 420px;
  }

  .error-modal-close {
    cursor: pointer;
    font-size: 18px;
    line-height: 20px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
    z-index: 2;
  }

  .error-msg-header {
    color: red !important;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .msg-text {
    font-size: 16px;
    margin-top: 15px;
  }

  .close-btn {
    min-width: 100px !important;
    outline: none !important;
    margin-top: 20px;
  }

  .dataTables_scrollBody tbody tr:first-child {
    position: sticky;
    top: 0;
    background-color: #d7d7d7;
    z-index: 10;
  }

  .bulk-highcost {
    display: none;
  }

  .highcostpara {
    color: #34548a;
    margin-top: 4%;
    text-align: left !important;
  }

  .highcostContectCare {
    text-decoration: underline;
    text-decoration-color: #34548a;
  }

  .more-info-popup-highcost .active-button {
    margin: 20px 0px;
    position: relative;
    float: initial;
  }

  .more-info-popup-highcost .activate-button a {
    font-size: 17px;
    /* font-weight: 600; */
    color: #34548a;
    /* background: #34548A; */
    font-family: 'Montserrat';
    /* border-radius: 27px; */
    /* float: right; */
    margin-top: 10px;
    margin-bottom: 10px;
    /* -webkit-box-shadow: 0px 2px 8px #34548A;
      -moz-box-shadow: 0px 2px 8px #34548A;
      box-shadow: 0px 2px 8px #34548A;
      padding: 15px 40px; */
    min-width: 150px;
    text-align: center;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-top: 10px;
    width: 150px;
    position: relative;
    line-height: 50px;
    cursor: pointer;
  }

  .more-info-popup-highcost .mfp-close,
  .more-info-popup-highcost .mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
    color: #333;
    width: 44px;
    height: 44px;
    line-height: 26px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    padding: 10px 10px 10px 10px;
    font-style: normal;
    font-size: 28px;
    font-family: Montserrat;
    margin: 0;
    min-width: auto;
  }

  .highcost-acceptance-charge {
    font-size: 14px;
    color: #34548a;
    cursor: pointer;
    font-family: 'Montserrat';
  }

  .highcostspan {
    font-size: 14px;
    color: #34548a;
    font-family: 'Montserrat';
    margin-right: 157px;
  }

  .accept-cancel-div {
    display: flex;
    justify-content: space-evenly;
    margin: 30px 0px 10px 0px;
    gap: 60px;
  }

  #userSelect,
  #my-active-status {
    color: #212529 !important;
  }

  .entity-checkbox {
    left: -20px !important;
  }

  .select2-container {
    min-width: 226px;
    width: auto !important;
  }

  .select2-selection select2-selection--multiple {
    height: 35px;
  }

  .select2-selection__choice {
    font-size: 12px;
  }

  p {
    margin-bottom: 0px !important;
  }

  /* .select2-container .select2-search--inline .select2-search__field {
    margin-top: 8px !important;
  } */
</style>

<h2>Number Provisioning</h2>

<div class="container mt-5">
  <div class="provisioning-table-div">
    <div class="user_find_replace_div">
      <div class="user_select_div">
        <div class="user_select_subdiv">
          <label for="userSelect">Customer</label>
          <select style="width: 250px;" class="user_dropdown select2" id="userSelect">
            <option value="" selected>Select Customer</option>
          </select>
        </div>
        <button class="fetch-btn">Fetch</button>
      </div>
      <div class="selectParent fstatus filter-status fstatus">
        <label>Incoming Call Control</label>
        <select id="my-active-status" autocomplete="off">
          <option value="10" selected="">Loadshare</option>
          <option value="9">Weighted</option>
          <option value="4">Overflow</option>
        </select>
      </div>
      <div class="inventory-button np-button np-filter-button">
        <button class="filter-icon filter"> Filter <i class="far fa-filter"></i></button>
      </div>
      <!-- <div class="find_replace_tools">
        <div class="column-div">
          <label for="columnSelect">Column</label>
          <select id="columnSelect" style="width: 160px;">
            <option value="all">All</option>
          </select>
        </div>

        <div class="find-div">
          <label for="findInput">Find</label>
          <input type="text" id="findInput" placeholder="Find value">
        </div>

        <div class="replace-div">
          <label for="replaceInput">Replace</label>
          <input type="text" id="replaceInput" placeholder="Replace with">
        </div>

        <button class="btn btn-primary" id="replaceBtn">Replace</button>
        <button class="btn btn-primary" id="replaceAllBtn">Replace All</button>
      </div>
      <div>
        <button class="btn btn-success">Add New</button>
      </div> -->
    </div>
    <div id="numberProvisioningTable_processing" class="dataTables_processing" style="display: none;">Loading...</div>
    <div class="container numberProvisioningTable-container dataTables_scrollBody">
      <table id="numberProvisioningTable" class="provisioning-table">
        <thead>
          <tr>
            <th>
              <div class='tel-check-div'>
                <input id="listnumber-check" type="checkbox" value="" autocomplete="off" name="" />
                <label for="listnumber-check" class="tel-label">
                  <div class="label-text" style="margin-left: 15px;">
                    <span class="web-view label-text-tel">Number</span>
                    <span id="display-numbers-count"></span>
                  </div>
                </label>
              </div>
            </th>
            <th>Sales Order ID</th>
            <th style="width: 250px;">Entity</th>
            <th>Preferred Business Name</th>
            <th>Description</th>
            <th>Branded</th>
            <th>Brand Name</th>
            <th>Is Guarded</th>
            <th>Select Plan Name</th>
            <th>Guard Status</th>
            <th>Shield Status</th>

            <th>Primary Routing Type</th>
            <th>Primary Number Routing</th>
            <th class="primary_ip_port">IP Port</th>
            <th class="primary_max_callhr">Primary Max Call Per Hour</th>
            <th>Primary Incoming Caller Number Type</th>
            <th class="getwaygrp">Select Username Or IP For Primary Number</th>

            <th>Second Routing Type</th>
            <th>Second Number Routing</th>
            <th class="second_ip_port">IP Port</th>
            <th class="second_max_callhr">Second Max Call Per Hour</th>
            <th>Second Incoming Caller Number Type</th>
            <th class="getwaygrp">Select Username Or IP For Second Number</th>

            <th>Third Routing Type</th>
            <th>Third Number Routing</th>
            <th class="third_ip_port">IP Port</th>
            <th class="third_max_callhr">Third Max Call Per Hour</th>
            <th>Third Incoming Caller Number Type</th>
            <th class="getwaygrp">Select Username Or IP For Third Number</th>

            <th>Fourth Routing Type</th>
            <th>Fourth Number Routing</th>
            <th class="fourth_ip_port">IP Port</th>
            <th class="fourth_max_callhr">Fourth Max Call Per Hour</th>
            <th>Fourth Incoming Caller Number Type</th>
            <th class="getwaygrp">Select Username Or IP For Fourth Number</th>
          </tr>
        </thead>
      </table>
      <div class="jump-to-page-wrapper" style="display:none;">
        <label>Jump to page: </label>
        <input type="number" onkeyup="if(/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" name="jump_to_page" id="jump_to_page_num">
        <a href="javascript:void(0);" id="go_to_page">GO</a>
      </div>
    </div>
    <div class="edit-delete">
      <button class="bulk-cancel">CANCEL</button>
      <button class="bulk-edit">UPDATE</button>
    </div>
    <div class="error-modal common-modal">
      <i class="fa fa-times error-modal-close" aria-hidden="true"></i>
      <div class="">
        <p class="error-msg-header msg-header">
          <i class="fa fa-times close-icon" aria-hidden="true"></i>Error
        </p>
        <p class="msg-text"></p>
        <div style="margin-top: 20px;" id="close-button" class="close-button">
          <!-- <button id="closeSimpleErrorModal" class="close-btn close-error" type="button">proceed</button></div> -->
          <button
            id="closeSimpleErrorModal"
            class="close-btn close-error"
            type="button">
            Cancel
          </button>
        </div>
      </div>
    </div>
    <div
      class="more-info-popup-highcost bulk-highcost common-modal more-info-popup-more-info-popup-highcostinner-block">
      <p class="text more-info-popup-text highcostpara">
        The Incoming Call Route To Destination you entered is a high-cost<br />destination.
        Additional incoming call charges will apply for all calls<br />routed to
        this number.<br />You can accept these charges, or you can enter<br />another
        number or a Toll-Free number
      </p>
      <div id="" class="activate-button accept-cancel-div">
        <div class="label-text">
          <span class="web-view highcost-acceptance-charge">
            I ACCEPT <br />THIS CHARGES
          </span>
        </div>
        <p>
          <a
            class="dissmiss-button">
            CANCEL
          </a>
        </p>
      </div>
      <p>
        <span class="web-view highcostContectCare">
          <a
            target="_blank"
            rel="noopener">
            <button
              class="mfp-close highCostCancel"
              title="Close (Esc)"
              type="button">
              ×
            </button>
          </a>
        </span>
      </p>
    </div>
  </div>
</div>
<div id="loaderModal" class="modal">
  <img class="loader-img" src="../images/ajax-spinner.gif">
  <span class="loader-text">Please wait ...</span>
</div>
<div class="custom-modal-wrapper simple-success-modal common-modal">
  <i class="fa fa-times simple-success-modal-close" aria-hidden="true"></i>
  <div class="">
    <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Success</p>
    <p class="msg-text simple-success-modal-msg-text"></p>
    <div class="close-button" id="close-button">
      <button type="button" class="close-btn" id="closeSimpleSuccessModal">OK</button>
    </div>
  </div>
</div>

 <!--------------filter container --------------------->
 <div class="filter-main-container common-modal">
  <p class="filter-para">Filter</p>
  <i class="fa fa-times close-filter" aria-hidden="true"></i>
  <div class="filter-container">
    <div class="checkbox-buttons">
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="all" checked> All</label>
        <div class="filter-row hidden-container " id="all">
          <div class="filter-row-subdiv">
            <select id="npDropdownAll" class="filterDropdown ">
              <option value="all" selected>All</option>
            </select>
          </div>
        </div>
      </div>
      {{-- <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="np_user"> User</label>
        <div class="filter-row hidden-container " id="np_user">
          <div class="user_select_div">
            <div class="user_select_subdiv">
              <select style="width: 250px;" class="user_dropdown select2" id="userSelect">
                <option value="" selected>Select User</option>
              </select>
            </div>
            <button class="fetch-btn">Fetch</button>
          </div>
        </div>
      </div> --}}
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="number"> Number</label>
        <div class="filter-row hidden-container" id="number">
          <div class="filter-row-subdiv">
            <select id="npDropdownNumber" class="filterDropdown" multiple="multiple" style="width: 100%;">
              {{-- <option value="">Select Number</option> --}}
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="np_status"> Status</label>
        <div class="filter-row hidden-container " id="np_status">
          <div class="filter-row-subdiv">
            <select id="npDropdownStatus" class="filterDropdown ">
              <option value="" selected>Select</option>
              <option value="21">Assigned Routed</option>
              <option value="22">Assigned Standard</option>
              <option value="24">Pending</option>
              <option value="25">Ready Pool</option>
              <option value="28">Released</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="test_plan"> Test Plan</label>
        <div class="filter-row hidden-container" id="test_plan">
          <div class="filter-row-subdiv">
            <select id="npDropdownTestPlan" class="filterDropdown">
              <option value="" selected>Select</option>
              <option value="1">None</option>
              <option value="2">Guarded</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="entity"> Entity</label>
        <div class="filter-row hidden-container" id="entity">
          <div class="filter-row-subdiv">
            <select id="npDropdownEntity" class="filterDropdown">
              <option value="">Select Value</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="preferred_business_name"> Preferred Business Name</label>
        <div class="filter-row hidden-container" id="preferred_business_name">
          <div class="filter-row-subdiv">
            <select id="npDropdownPreferredBusinessName" class="filterDropdown">
              <option value="">Select Value</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="description"> Description</label>
        <div class="filter-row hidden-container" id="description">
          <div class="filter-row-subdiv">
            <select id="npDropdownDescription" class="filterDropdown">
              <option value="">Select Value</option>
            </select>
          </div>
        </div>
      </div>

      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="sales_order_id"> Sales Order Id</label>
        <div class="filter-row hidden-container" id="sales_order_id">
          <div class="filter-row-subdiv">
            <select id="npDropdownSalesOrderId" class="filterDropdown">
              <option value="">Select Value</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="is_branded"> Is Branded</label>
        <div class="filter-row hidden-container" id="is_branded">
          <div class="filter-row-subdiv">
            <select id="npDropdownIsBranded" class="filterDropdown">
              <option value="">Select Value</option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </div>
        </div>
      </div>
      <div class="label-filter-value-div">
        <label><input type="checkbox" class="filter-label" name="filter" value="brand_name"> Brand Name</label>
        <div class="filter-row hidden-container" id="brand_name">
          <div class="filter-row-subdiv">
            <select id="npDropdownBrandName" class="filterDropdown">
              <option value="">Select Value</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="filter-btns" id="close-button">
    <button type="button" class="cancel-filter-btn" id="cancel_filter_btn">Cancel</button>
    <button type="button" class="apply-filter-btn" id="apply_filter" disabled>Apply</button>
  </div>
</div>

<!-- Scripts -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>


<script>
  var baseURL = "{{ URL::to('/') }}" + "/";
  var currentUserId = null;
  let initialTableData = {};
  const NUMBER_STATUS = {
    0: 'Inactive',
    1: 'Active',
    2: 'Pending',
    3: 'Ready Pool',
    // 4: 'Warm Up',
    5: 'Cool Down',
    21: 'Assigned Routed',
    22: 'Assigned Standard',
    23: 'Reserved',
    24: 'Pending',
    25: 'Ready',
    // 26: 'Warm Up',
    27: 'Cool Down',
    28: 'Released'
  };
  var npaNxxData = {};
  var highCostNpaNxx = {};
  var changedNumbersData = {};
  var isHighCostNpaNXX = false;
  var isGuardAndTestPlan = false;
  const checkIncomingRegx =
    /^([+][0-9]{1,3}([ .-])?)?([(]{1}[0-9]{3}[)])?([0-9A-Z .-]{1,8})((x|ext|extension)?[0-9]{1,4}?)$/;
  // const sipPattern = /^sip:[\w\d\.\:]+$/i;
  const sipPattern = /^sip:[\w\d.]+$/i;
  const ipPattern =
    /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/;
  $(document).ready(function() {
    getNumbershieldUsers();
    fetchUserProvisioningData();
    getAllNpaNxx();
    $('.select2').select2();
    $(document).on('change', '#listnumber-check', function() {
      var checked = this.checked;
      $('.row-checkbox').prop('checked', checked);
    });

    $(document).on('change', '.row-checkbox', function() {
      var allChecked = $('.row-checkbox').length === $('.row-checkbox:checked').length;
      $('#listnumber-check').prop('checked', allChecked);
    });

    $(document).on('click', '.paginate_button', function() {
      $('#listnumber-check').prop('checked', false);
      $('.row-checkbox').prop('checked', false);
    })

    $(document).on('click', '.dissmiss-button , .highCostCancel', function() {
      $('.bulk-highcost').hide();
    })

    $('.bulk-cancel').on('click', function() {
      window.location.href = baseURL + 'nmpvQ8zf436aqGfB';
    });

    $('#closeSimpleSuccessModal, .simple-success-modal-close').click(function() {
      $('.simple-success-modal').css("display", "none");
    });

    $('.fetch-btn').click(function() {
      // Reset filters to default 'all'
      $('input[name="filter"]').prop('checked', false);   // uncheck all
      $('input[name="filter"][value="all"]').prop('checked', true); // check 'all'

      changedNumbersData = {};
      var userId = $('#userSelect').val();
      if (userId) {
        currentUserId = userId;
        var ProvisioningTableObj = jQuery('#numberProvisioningTable').DataTable();
        ProvisioningTableObj.ajax.reload(); // false to prevent resetting paging

        // $('.inventory-button').show();
      } else {
        alert('Please select a user.');
        // $('.inventory-button').hide();
      }

      // $('.inventory-button').show();
      getAllEntitiesAndBusinessNameOfDids(userId);
    });

    $(document).on('click', '#removeButton, #removeText', function() {
      changedNumbersData = {};
      var userId = $('#userSelect').val();
      if (userId) {
        currentUserId = userId;
        var ProvisioningTableObj = jQuery('#numberProvisioningTable').DataTable();
        ProvisioningTableObj.ajax.reload(); // false to prevent resetting paging
      }
    });

    // Live listener for changes on input, select, contenteditable
    jQuery('#numberProvisioningTable').on('change blur input', 'input, select, [contenteditable]', function() {
      const $row = jQuery(this).closest('tr');
      const index = $row.index();

      if (index === 0) return; // Ignore changes in first row

      if ($row.find('.telephone-number').length) {
        const number = $row.find('.telephone-number').text();
        const initialRow = window.initialTableData[number] || {};
        const currentRowData = getRowData($row);

        const fieldsToCompare = [
          'entities', 'preferred_business_name', 'number_description', 'branded', 'brand_name',
          'is_gaurded', 'select_plan_name', 'test_status', 'status', 'call_type',
          'primary_inc_call', 'ip_port', 'primary_max_call', 'primary_caller_type', 'primary_getwway_id',
          'second_incomming_call_type', 'second_inc_call', 'second_ip_port', 'second_max_call', 'second_caller_type',
          'second_getwway_id', 'third_incomming_call_type', 'third_inc_call', 'third_ip_port', 'third_max_call',
          'third_caller_type', 'third_getwway_id', 'fourth_incomming_call_type', 'fourth_inc_call', 'fourth_ip_port',
          'fourth_max_call', 'fourth_caller_type', 'fourth_getwway_id'
        ];

        const hasChanges = fieldsToCompare.some(field => {
          const currentVal = currentRowData[field] || '';
          const initialVal = initialRow[field] || '';
          return currentVal !== initialVal;
        });

        if (hasChanges) {
          changedNumbersData[number] = currentRowData;
        } else {
          delete changedNumbersData[number];
        }
      }
    });

    jQuery(document).on('click', '#replicateButton', function() {
      jQuery("#numberProvisioningTable_processing").show();
      setTimeout(() => {
        const firstRow = jQuery(
          '#numberProvisioningTable tbody tr:first-child'
        );
        var checkedCount = jQuery('#numberProvisioningTable tbody tr .row-checkbox:checked').length;
        // Replicate the first row data into all other rows
        jQuery('#numberProvisioningTable tbody tr').each(function(index) {
          var isChecked = jQuery(this).find('.row-checkbox').is(':checked');
          if (index > 0 && (checkedCount === 0 || isChecked)) {
            // Skip the first row
            firstRow.find('td').each(function(cellIndex) {
              // Skip the first column (cellIndex === 0)
              if (cellIndex > 0) {
                // document.getElementsByClassName('payment_overlay')[0].style.display = 'block';
                var targetCell = jQuery(this)
                  .closest('table')
                  .find('tbody tr')
                  .eq(index)
                  .find('td')
                  .eq(cellIndex);

                var currentCell = jQuery(this);
                var checkbox = currentCell.find('input[type="checkbox"]'); // Find the checkbox for the current cell

                // Only replicate if the checkbox is checked
                if (checkbox.length > 0 && checkbox.prop('checked')) {
                  // Replication logic for various field types

                  if (currentCell.find('.obn-entity-select').length > 0) {
                    var originalSelect = currentCell.find('.obn-entity-select');
                    var selectedOptions = originalSelect.val(); // Get selected values (array)

                    if (!selectedOptions || selectedOptions.length === 0) {
                      selectedOptions = ['-'];
                    }

                    var clonedSelect = originalSelect.clone();
                    clonedSelect.val(selectedOptions); // Set the cloned select to have the same selected options

                    targetCell.html(clonedSelect); // Insert cloned select into the target cell

                    targetCell.find('.obn-entity-select').select2({
                      placeholder: 'Select Entity',
                      allowClear: true,
                      multiple: true,
                      width: '100%'
                    });
                  } else if (jQuery(this).find('.label-text.getway-grp-id').length > 0) {
                    // Handle the getway-grp-id field where we have static content ("-")
                    var originalContent = jQuery(this)
                      .find('.label-text.getway-grp-id')
                      .text()
                      .trim();

                    // Clone the content and set it in the target cell
                    var clonedContent = jQuery(
                      '<div class="label-text getway-grp-id">'
                    ).text(originalContent || '-');
                    targetCell.html(clonedContent);
                  }

                  // Handle input fields (e.g., max-call-per-hour, other inputs)
                  else if (jQuery(this).find('input[type="text"]').length > 0) {
                    var inputField = jQuery(this).find('input[type="text"]');

                    var inputValue = inputField.val().trim();
                    // If the value is empty or null, set it to '-'
                    if (!inputValue) {
                      inputValue = '-';
                    }

                    if (jQuery(this).find('.label-text.prim-max-call-per-hour').length > 0) {
                      var divId = '';
                      divId = 'prim-max-call-per-hour';

                      // Build new inner div with input
                      var newDiv = jQuery('<div contenteditable="true" class="label-text max-call-per-hour">')
                        .attr('id', divId)
                        .text(inputValue);

                      // Replace only the nested inner div inside this cell
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.label-text.second-max-call-per-hour').length > 0) {
                      var divId = '';
                      divId = 'second-max-call-per-hour';

                      // Build new inner div with input
                      var newDiv = jQuery('<div contenteditable="true" class="label-text max-call-per-hour">')
                        .attr('id', divId)
                        .text(inputValue);

                      // Replace only the nested inner div inside this cell
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.label-text.third-max-call-per-hour').length > 0) {
                      var divId = '';
                      divId = 'third-max-call-per-hour';

                      // Build new inner div with input
                      var newDiv = jQuery('<div contenteditable="true" class="label-text max-call-per-hour">')
                        .attr('id', divId)
                        .text(inputValue);

                      // Replace only the nested inner div inside this cell
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.label-text.fourth-max-call-per-hour').length > 0) {
                      var divId = '';
                      divId = 'fourth-max-call-per-hour';

                      // Build new inner div with input
                      var newDiv = jQuery('<div contenteditable="true" class="label-text max-call-per-hour">')
                        .attr('id', divId)
                        .text(inputValue);

                      // Replace only the nested inner div inside this cell
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.business-name').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" class="label-text business-name">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.brand-name').length > 0) {
                      // ✅ Set to 'default' if only spaces
                      var brandValue =
                        inputField.val().trim() === '' ?
                        '-' :
                        inputField.val();
                      var newDiv = jQuery(
                        '<div contenteditable="true" class="label-text brand-name">'
                      ).text(brandValue);

                      targetCell.html(newDiv);
                    }

                    if (jQuery(this).find('.number-description').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" class="label-text number-description">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }

                    if (jQuery(this).find('.number-description').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" class="label-text number-description">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.prim-inc-call').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" id="prim-inc-call-' +
                        cellIndex +
                        '" class="label-text incomming-call-route prim-inc-call">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.second-inc-call').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" id="second-inc-call-' +
                        cellIndex +
                        '" class="label-text incomming-call-route second-inc-call">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.third-inc-call').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" id="third-inc-call-' +
                        cellIndex +
                        '" class="label-text incomming-call-route third-inc-call">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                    if (jQuery(this).find('.fourth-inc-call').length > 0) {
                      var newDiv = jQuery(
                        '<div contenteditable="true" id="fourth-inc-call-' +
                        cellIndex +
                        '" class="label-text incomming-call-route fourth-inc-call">'
                      ).text(inputValue);
                      targetCell.html(newDiv);
                    }
                  }
                  // Handle contenteditable divs with contenteditable="true"
                  else if (jQuery(this).find('[contenteditable]').length > 0) {
                    var editableDiv = jQuery(this).find('[contenteditable]');
                    var newText = editableDiv.text().trim();

                    // If the value is empty or null, set it to '-'
                    if (!newText) {
                      newText = '-';
                    }

                    // If contenteditable="false", just copy the div as is
                    if (editableDiv.attr('contenteditable') === 'false') {
                      targetCell.html(editableDiv.clone());
                    } else {
                      // Otherwise, create a new contenteditable div and insert the text
                      var newEditableDiv = jQuery('<div>')
                        .text(newText)
                        .attr('contenteditable', 'true');
                      targetCell.html(newEditableDiv);
                    }
                  }
                  // Handle for other cells
                  else {
                    var cellContent = jQuery(this).html().trim();
                    // If the content is empty or null, set it to '-'
                    if (!cellContent) {
                      cellContent = '-';
                    }

                    targetCell.html(cellContent);
                  }
                  if (jQuery(this).find('.label-text.did-branded').length > 0) {
                    var originalDropdown = jQuery(this).find(
                      '.label-text.did-branded'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }

                  if (
                    jQuery(this).find('.label-text.is-number-guard').length > 0
                  ) {
                    var originalDropdown = jQuery(this).find(
                      '.label-text.is-number-guard'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }
                  if (
                    jQuery(this).find('.label-text.is-number-guard-select')
                    .length > 0
                  ) {
                    var originalDropdown = jQuery(this).find(
                      '.label-text.is-number-guard-select'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }
                  if (jQuery(this).find('.call-control').length > 0) {
                    var originalDropdown = jQuery(this).find('.call-control');
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }
                  if (jQuery(this).find('.caller_number_type').length > 0) {
                    var originalDropdown = jQuery(this).find(
                      '.caller_number_type'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }
                  if (jQuery(this).find('.ip-port').length > 0) {
                    var originalDropdown = jQuery(this).find('.ip-port');
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }
                  if (jQuery(this).find('.call-type').length > 0) {
                    var originalDropdown = jQuery(this).find('.call-type');
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }

                  if (jQuery(this).find('.did-status').length > 0) {
                    var originalDropdown = jQuery(this).find('.did-status');
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }

                  if (jQuery(this).find('.test-plan-status-select').length > 0) {
                    // If '.test-plan-status-select' is found
                    var originalDropdown = jQuery(this).find(
                      '.test-plan-status-select'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  } else if (jQuery(this).find('.test-plan-status').length > 0) {
                    // If '.test-plan-status-select' is not found, fallback to '.test-plan-status'
                    var originalDropdown = jQuery(this).find('.test-plan-status');
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }

                  if (jQuery(this).find('.label-text.plan-selected').length > 0) {
                    var originalDropdown = jQuery(this).find(
                      '.label-text.plan-selected'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  } else if (
                    jQuery(this).find('.label-text.plan-select').length > 0
                  ) {
                    var originalDropdown = jQuery(this).find(
                      '.label-text.plan-select'
                    );
                    var selectedValue = originalDropdown.val(); // Get the selected option

                    // Clone the dropdown
                    var clonedDropdown = originalDropdown.clone();
                    clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                    targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                  }

                  if (jQuery(this).find('.get-way-grpid').length > 0) {
                    var originalElement = jQuery(this).find('.get-way-grpid');

                    // If it's a select dropdown, clone it as before
                    if (originalElement.is('select')) {
                      var selectedValue = originalElement.val(); // Get the selected option

                      // Clone the dropdown
                      var clonedDropdown = originalElement.clone();
                      clonedDropdown.val(selectedValue); // Set the cloned dropdown to have the same selected option

                      targetCell.html(clonedDropdown); // Insert cloned dropdown into the target cell
                    }
                    // If it's a checkbox, skip cloning (do nothing for checkboxes)
                    else if (originalElement.is('input[type="checkbox"]')) {
                      // Skip the checkbox cloning, do nothing here
                      // You can optionally log something or handle this case differently
                    }
                  }
                }
              }
            });
          }
          const $row = jQuery(this);
          if ($row.find('.telephone-number').length) {
            const number = $row.find('.telephone-number').text();

            const initialRow = window.initialTableData[number];
            const currentRowData = getRowData($row);

            // Fields we may skip conditionally
            const baseFieldsToCompare = [
              'entities', 'preferred_business_name', 'number_description', 'is_branded', 'brand_name',
              'is_number_guard', 'plan_id', 'test_plan_status', 'status', 'call_type',
              'incoming_call_route', 'ip_port', 'primary_max_call_hour', 'caller_number_type', 'getway_grp_id',
              'second_call_type', 'second_incoming_call_route', 'second_ip_port', 'second_max_call_hour', 'second_caller_number_type',
              'second_getway_grp_id', 'third_call_type', 'third_incoming_call_route', 'third_ip_port', 'third_max_call_hour',
              'third_caller_number_type', 'third_getway_grp_id', 'fourth_call_type', 'fourth_incoming_call_route', 'fourth_ip_port',
              'fourth_max_call_hour', 'fourth_caller_number_type', 'fourth_getway_grp_id'
            ];

            // Normalize is_number_guard to string for logic
            const initialNumberGuard = String(initialRow.is_number_guard ?? '0').trim();
            const currentNumberGuard = String(currentRowData.is_number_guard ?? '0').trim();

            // If either is '1', exclude plan_id and test_plan_status
            const fieldsToCompare = (initialNumberGuard === '1' || currentNumberGuard === '1') ?
              baseFieldsToCompare.filter(field => field !== 'plan_id' && field !== 'test_plan_status') :
              baseFieldsToCompare;

            // Track changed fields for logging
            const differences = [];

            const hasChanges = fieldsToCompare.some(field => {
              let currentVal = currentRowData[field];
              let initialVal = initialRow[field];

              // Normalize: null, undefined, empty, "-" all become ''
              if (currentVal == null || currentVal === '' || currentVal === '-' || (Array.isArray(currentVal) && currentVal.length === 0)) {
                currentVal = '';
              }
              if (initialVal == null || initialVal === '' || initialVal === '-' || (Array.isArray(initialVal) && initialVal.length === 0)) {
                initialVal = '';
              }

              if (field === 'is_number_guard') {
                if (initialVal === '' || initialVal === null || initialVal === undefined) initialVal = '0';
                if (currentVal === '' || currentVal === null || currentVal === undefined) currentVal = '0';
              }

              const callerTypeFields = [
                'caller_number_type',
                'second_caller_number_type',
                'third_caller_number_type',
                'fourth_caller_number_type'
              ];
              if (callerTypeFields.includes(field)) {
                if (initialVal === '') initialVal = 'A';
                if (currentVal === '') currentVal = 'A';
              }

              const gatewayFields = [
                'getway_grp_id',
                'second_getway_grp_id',
                'third_getway_grp_id',
                'fourth_getway_grp_id'
              ];
              if (gatewayFields.includes(field)) {
                if (initialVal === '') initialVal = '0';
                if (currentVal === '') currentVal = '0';
              }

              const callTypeFields = [
                'call_type',
                'second_call_type',
                'third_call_type',
                'fourth_call_type'
              ];
              if (callTypeFields.includes(field)) {
                if (initialVal === '') initialVal = 'sip';
                if (currentVal === '') currentVal = 'sip';
              }

              // Convert arrays to JSON for consistent comparison
              if (Array.isArray(currentVal)) currentVal = JSON.stringify(currentVal);
              if (Array.isArray(initialVal)) initialVal = JSON.stringify(initialVal);

              // Normalize all to strings
              currentVal = String(currentVal).trim();
              initialVal = String(initialVal).trim();

              if (currentVal !== initialVal) {
                differences.push({
                  field,
                  initialVal,
                  currentVal
                });
                return true;
              }
              return false;
            });

            if (hasChanges) {
              changedNumbersData[number] = currentRowData;
            } else {
              delete changedNumbersData[number];
            }
          }
        });

        // Initialize Select2 elements to avoid duplication issues
        jQuery('.obn-entity-select').each(function() {
          const $select = jQuery(this);

          if ($select.nextAll('.select2-container').length === 0) {
            $select.select2({
              placeholder: 'Select Entity',
              width: 'resolve',
              allowClear: true,
            });
          }
        });

        // loaderModal.style.display = 'none'; // Hide the loader modal
      }, 0); // Delay execution to allow UI rendering

      setTimeout(() => {
        jQuery("#numberProvisioningTable_processing").hide();

      }, 500);

    });

    jQuery(document).on('change', '.branded-checkbox', function() {
      // If 'Branded' is checked, check 'Preferred Business Name'
      if (jQuery(this).prop('checked')) {
        jQuery('.preferred-business-name-checkbox').prop('checked', true);
      } else {
        // If 'Branded' is unchecked, uncheck 'Preferred Business Name'
        jQuery('.preferred-business-name-checkbox').prop('checked', false);
      }
    });

    jQuery(document).on(
      'change',
      '.preferred-business-name-checkbox',
      function() {
        // If 'Preferred Business Name' is unchecked, uncheck 'Branded'
        if (!jQuery(this).prop('checked')) {
          jQuery('.branded-checkbox').prop('checked', false);
        }
      }
    );

    jQuery(document).on('input', '.brand-name, .business-name', function() {
      // Get the current value of the input field
      let value = jQuery(this).val();

      // Check if the length exceeds 15 characters
      if (value.length > 15) {
        // Trim the value to 15 characters if it exceeds the limit
        jQuery(this).val(value.substring(0, 15));
      }
    });

    jQuery(document).on(
      'keypress input',
      '.brand-name, .business-name input',
      function() {
        // Get the current value of the input field
        let value = jQuery(this).val();

        // Check if the length exceeds 15 characters
        if (value.length > 15) {
          // Trim the value to 15 characters if it exceeds the limit
          jQuery(this).val(value.substring(0, 15));
        }

        // Check which element triggered the event and set the checkbox accordingly
        if (jQuery(this).hasClass('brand-name')) {
          // If it's the brand-name input field
          if (value.length > 0) {
            jQuery('.brand-name-checkbox').prop('checked', true);
            jQuery('.preferred-business-name-checkbox').prop('checked', true);
          } else {
            jQuery('.brand-name-checkbox').prop('checked', false);
            jQuery('.preferred-business-name-checkbox').prop('checked', false);
          }
        } else if (jQuery(this).closest('.business-name').length) {
          // If it's an input field within the business-name container
          if (value.length > 0) {
            jQuery('.preferred-business-name-checkbox').prop('checked', true);
          } else {
            jQuery('.preferred-business-name-checkbox').prop('checked', false);
          }
        }
      }
    );

    jQuery(document).on(
      'keypress input',
      '.number-description input',
      function() {
        // Get the current value of the input field
        let value = jQuery(this).val();

        if (value.length > 0) {
          jQuery('.number-description-checkbox').prop('checked', true);
        } else {
          jQuery('.number-description-checkbox').prop('checked', false);
        }
      }
    );

    jQuery(document).on('change', '.obn-entity-select', function() {
      var $select = jQuery(this); // The select2 element
      var $checkbox = $select
        .closest('.checkbox-wrapper')
        .find('input[type="checkbox"]');

      // Check if any option is selected
      if ($select.val().length > 0) {
        // If there are selected values
        $checkbox.prop('checked', true); // Check the checkbox
      } else {
        $checkbox.prop('checked', false); // Uncheck the checkbox if no values are selected
      }
    });

    jQuery(document).on('change', 'select', function() {
      var $select = jQuery(this);
      var $checkbox = $select
        .closest('.checkbox-wrapper')
        .find('input[type="checkbox"]');

      // Check if the selected value is not the default (e.g., not empty or not the initial value)
      if ($select.val() !== '' && $select.val() !== undefined) {
        $checkbox.prop('checked', true); // Check the checkbox
      } else {
        $checkbox.prop('checked', false); // Uncheck the checkbox if no valid value is selected
      }
    });

    //check the checkbox for max calls per hour
    jQuery(document).on(
      'keyup keypress input',
      '.max-call-per-hour',
      function() {
        var value = jQuery(this).text().trim();
        var $row = jQuery(this).closest('tr');
        const isFirstRow = $row.is(':first-child');

        if (isFirstRow) {
          value = jQuery(this).find('input').val().trim();
        }

        if (value.length > 0) {
          if (jQuery(this).hasClass('prim-max-call-per-hour')) {
            jQuery('.primary-max-call-checkbox').prop('checked', true);
          }
          if (jQuery(this).hasClass('second-max-call-per-hour')) {
            jQuery('.second-max-call-checkbox').prop('checked', true);
          }
          if (jQuery(this).hasClass('third-max-call-per-hour')) {
            jQuery('.third-max-call-checkbox').prop('checked', true);
          }
          if (jQuery(this).hasClass('fourth-max-call-per-hour')) {
            jQuery('.fourth-max-call-checkbox').prop('checked', true);
          }
        } else {
          if (jQuery(this).hasClass('prim-max-call-per-hour')) {
            jQuery('.primary-max-call-checkbox').prop('checked', false);
          }
          if (jQuery(this).hasClass('second-max-call-per-hour')) {
            jQuery('.second-max-call-checkbox').prop('checked', false);
          }
          if (jQuery(this).hasClass('third-max-call-per-hour')) {
            jQuery('.third-max-call-checkbox').prop('checked', false);
          }
          if (jQuery(this).hasClass('fourth-max-call-per-hour')) {
            jQuery('.fourth-max-call-checkbox').prop('checked', false);
          }
        }
      }
    );

    jQuery(document).on('keyup keypress', '.brand-name', function() {
      // Get the value of the brand name after typing or keypress
      var brandNameValue = jQuery(this).text().trim(); // Get the text content
      var $row = jQuery(this).closest('tr'); // Find the closest row containing the current field
      const isFirstRow = $row.is(':first-child');
      if (isFirstRow) {
        brandNameValue = jQuery(this).val().trim();
      }
      // Check if the 'branded' value is 1 or 0 to determine editability
      const isBranded = $row.find('.did-branded').val() == 1; // Assuming 'branded' value is stored in an input/field

      // Update the preferred business name field based on the brand name value
      if (isBranded) {
        // If 'branded' is 1, update preferred_business_name and make it non-editable
        if (isFirstRow) {
          $row
            .find('.business-name input')
            .val(brandNameValue) // Set the text of the preferred business name field
            .attr('contenteditable', 'false'); // Make it non-editable
        } else {
          $row
            .find('.business-name')
            .text(brandNameValue) // Set the text of the preferred business name field
            .attr('contenteditable', 'false'); // Make it non-editable
        }
      } else {
        // If 'branded' is 0, keep it editable
        if (isFirstRow) {
          $row
            .find('.business-name input')
            .val(brandNameValue) // Set the text of the preferred business name field
            .attr('contenteditable', 'true'); // Make it editable
        } else {
          $row
            .find('.business-name')
            .text(brandNameValue) // Set the text of the preferred business name field
            .attr('contenteditable', 'true'); // Make it editable
        }
      }
    });

    jQuery(document).on(
      'keyup keypress input',
      '.prim-inc-call, .second-inc-call, .third-inc-call, .fourth-inc-call',
      function() {
        var $this = jQuery(this);
        var value = $this.text().trim();
        var $row = $this.closest('tr');
        const isFirstRow = $row.is(':first-child');
        const didStatus = $row.find('.did-status').val();
        var $errorMessage = $this.next('.error-message');
        $errorMessage.remove();
        jQuery('.bulk-edit').prop('disabled', false);
        $this.css({
          color: '#34548a'
        });

        if (isFirstRow) {
          value = $this.find('input').val().trim();

          if (value.length > 0) {
            if ($this.hasClass('prim-inc-call')) {
              jQuery('.primary-inc-call-checkbox').prop('checked', true);
            }
            if ($this.hasClass('second-inc-call')) {
              jQuery('.second-inc-call-checkbox').prop('checked', true);
            }
            if ($this.hasClass('third-inc-call')) {
              jQuery('.third-inc-call-checkbox').prop('checked', true);
            }
            if ($this.hasClass('fourth-inc-call')) {
              jQuery('.fourth-inc-call-checkbox').prop('checked', true);
            }
          } else {
            if ($this.hasClass('prim-inc-call')) {
              jQuery('.primary-inc-call-checkbox').prop('checked', false);
            }
            if ($this.hasClass('second-inc-call')) {
              jQuery('.second-inc-call-checkbox').prop('checked', false);
            }
            if ($this.hasClass('third-inc-call')) {
              jQuery('.third-inc-call-checkbox').prop('checked', false);
            }
            if ($this.hasClass('fourth-inc-call')) {
              jQuery('.fourth-inc-call-checkbox').prop('checked', false);
            }
          }
        }

        // get the call type value
        var callTypeValue;
        if ($this.hasClass('prim-inc-call')) {
          callTypeValue = $row.find('#primary-incoming-call-type').val();
        } else if ($this.hasClass('second-inc-call')) {
          callTypeValue = $row.find('#second-incoming-call-type').val();
        } else if ($this.hasClass('third-inc-call')) {
          callTypeValue = $row.find('#third-incoming-call-type').val();
        } else if ($this.hasClass('fourth-inc-call')) {
          callTypeValue = $row.find('#fourth-incoming-call-type').val();
        }

        // validations
        if (value.length == 10 && callTypeValue === 'number') {
          $errorMessage.remove();
          validateField(this, value);
        } else if (value.length < 10) {
          $errorMessage.remove();
          jQuery('.bulk-edit').prop('disabled', false);
          $this.css({
            color: '#34548a'
          });

          if (isFirstRow) {
            jQuery('#replicateButton').removeClass('disabled');
          }
        } else if (value.length > 10 && didStatus === '21') {
          var searchsip =
            value && value.includes('sip') ? value.indexOf('sip') : -1;

          if (
            searchsip == -1 &&
            callTypeValue !== 'IP' &&
            callTypeValue !== 'sip'
          ) {
            $errorMessage.remove();
            jQuery('.bulk-edit').prop('disabled', true);
            $this.css({
              color: 'red'
            });

            if (isFirstRow) {
              jQuery('#replicateButton').addClass('disabled');
            }

            if ($this.next('.error-message').length === 0) {
              $this.after(
                '<div class="error-message" style="color:red;">Invalid Number!</div>'
              );
            }
          } else if (callTypeValue === 'sip') {
            if (!value.match(sipPattern) || value === 'sip:127.255.255.2') {
              $errorMessage.remove();
              jQuery('.bulk-edit').prop('disabled', true);
              $this.css({
                color: 'red'
              });

              if (isFirstRow) {
                jQuery('#replicateButton').addClass('disabled');
              }

              if ($this.next('.error-message').length === 0) {
                $this.after(
                  '<div class="error-message" style="color:red;">Invalid sip value!</div>'
                );
              }
            }
          } else {
            if (!value.match(ipPattern)) {
              $errorMessage.remove();
              jQuery('.bulk-edit').prop('disabled', true);
              jQuery(this).css({
                color: 'red'
              });
              if (isFirstRow) {
                jQuery('#replicateButton').addClass('disabled');
              }
              if (jQuery(this).next('.error-message').length === 0) {
                jQuery(this).after(
                  '<div class="error-message" style="color:red;">Invalid IP Address!</div>'
                );
              }
            }
          }
        } else if (value.length > 4 && didStatus === '22') {
          if (!value.match(sipPattern)) {
            $errorMessage.remove();
            jQuery('.bulk-edit').prop('disabled', true);
            $this.css({
              color: 'red'
            });

            if (isFirstRow) {
              jQuery('#replicateButton').addClass('disabled');
            }

            if ($this.next('.error-message').length === 0) {
              $this.after(
                '<div class="error-message" style="color:red;">Invalid Number!</div>'
              );
            }
          }
        }
      }
    );

    jQuery(document).on('keypress', '.max-call-per-hour', function(e) {
      // Check if the current content already has 3 digits
      let currentValue = jQuery(this).text();
      if (currentValue.length >= 3 || !/^\d$/.test(e.key)) {
        e.preventDefault(); // Prevent further input if 3 digits are reached or a non-digit is typed
      }
    });

    jQuery(document).on(
      'keyup keypress input',
      '.first-max-call-hardcode, .second-max-call-hardcode, .third-max-call-hardcode, .fourth-max-call-hardcode',
      function() {
        let value = jQuery(this).val();

        // Allow only numeric characters and limit to 3 digits
        if (!/^\d*$/.test(value) || value.length > 3) {
          jQuery(this).val(value.slice(0, 3).replace(/\D/g, '')); // Trim to 3 digits and remove non-numeric characters
        }
      }
    );

    jQuery('.bulk-edit').on('click', function() {
      jQuery("#loaderModal").show();
      var highCost = 0;
      bulkEditData(highCost);
    });

    jQuery('.highcost-acceptance-charge').on('click', function() {
      var highCost = 1;
      isHighCostNpaNXX = false;
      jQuery('.bulk-highcost').hide();
      bulkEditData(highCost);
    });

    jQuery(document).on('click', '.label-text', function() {
      if (
        jQuery(this).attr('contenteditable') === 'true' &&
        jQuery(this).text() === '-'
      ) {
        jQuery(this).text('');
      }
    });

    function bulkEditData(highCost) {
      jQuery('#loaderModal').show();
      let isValid = true;
      let isIncomingCallNull = false;
      let isGatewayIdMissing = false;
      let invalidCall = '';
      let isMaxCallHrMissing = false;
      let isOptionIcnCallRequired = false;
      let isBrandNameYesValid = true;
      let isBrandNameNoValid = true;
      let isValidWeight = true;
      let isHighCostNpaNXX = false;

      const callFields = [{
          call: 'primary',
          class: '.prim-inc-call'
        },
        {
          call: 'second',
          class: '.second-inc-call'
        },
        {
          call: 'third',
          class: '.third-inc-call'
        },
        {
          call: 'fourth',
          class: '.fourth-inc-call'
        }
      ];

      function showErrorModal(message) {
        jQuery('#loaderModal').hide();
        jQuery('.error-modal').show();
        jQuery('.error-modal .msg-text').html(message);
        jQuery('body').off('click', '.error-modal-close, #closeSimpleErrorModal')
          .on('click', '.error-modal-close, #closeSimpleErrorModal', () => {
            jQuery('.error-modal').hide();
          });
      }

      // Convert changedNumbersData object to array
      const cleanVal = (val, fallback = null) => {
        return (val === '-' || val === undefined || val === null) ? fallback : val;
      };

      const dataArray = Object.keys(changedNumbersData).map(number => ({
        number,
        entity: cleanVal(changedNumbersData[number].entities),
        businessName: cleanVal(changedNumbersData[number].preferred_business_name),
        description: cleanVal(changedNumbersData[number].number_description),
        branded: cleanVal(changedNumbersData[number].is_branded, '0'),
        brandName: cleanVal(changedNumbersData[number].brand_name),
        callLabel: cleanVal(changedNumbersData[number].callLabel, 0),
        is_gaurded: cleanVal(changedNumbersData[number].is_number_guard, 0),
        incoming_call_control: cleanVal(changedNumbersData[number].incoming_call_control, jQuery('#my-active-status').val() || null),
        plan_name: cleanVal(changedNumbersData[number].plan_id, 10988),
        test_status: cleanVal(changedNumbersData[number].test_plan_status, 1),
        status: cleanVal(changedNumbersData[number].status),
        user_id: currentUserId,

        // Primary Incoming Call
        call_type: cleanVal(changedNumbersData[number].call_type),
        primary_incomming_call: cleanVal(changedNumbersData[number].incoming_call_route),
        ip_port: cleanVal(changedNumbersData[number].ip_port),
        primary_max_call: cleanVal(changedNumbersData[number].primary_max_call_hour),
        primary_incoming_caller_type: cleanVal(changedNumbersData[number].caller_number_type, ''),
        primary_gateway_id: cleanVal(changedNumbersData[number].getway_grp_id),

        // Second Incoming Call
        second_call_type: cleanVal(changedNumbersData[number].second_call_type),
        second_incomming_call: cleanVal(changedNumbersData[number].second_incoming_call_route),
        second_ip_port: cleanVal(changedNumbersData[number].second_ip_port),
        second_max_call: cleanVal(changedNumbersData[number].second_max_call_hour),
        second_incoming_caller_type: cleanVal(changedNumbersData[number].second_caller_number_type, ''),
        second_gateway_id: cleanVal(changedNumbersData[number].second_getway_grp_id),

        // Third Incoming Call
        third_call_type: cleanVal(changedNumbersData[number].third_call_type),
        third_incomming_call: cleanVal(changedNumbersData[number].third_incoming_call_route),
        third_ip_port: cleanVal(changedNumbersData[number].third_ip_port),
        third_max_call: cleanVal(changedNumbersData[number].third_max_call_hour),
        third_incoming_caller_type: cleanVal(changedNumbersData[number].third_caller_number_type, ''),
        third_gateway_id: cleanVal(changedNumbersData[number].third_getway_grp_id),

        // Fourth Incoming Call
        fourth_call_type: cleanVal(changedNumbersData[number].fourth_call_type),
        fourth_incomming_call: cleanVal(changedNumbersData[number].fourth_incoming_call_route),
        fourth_ip_port: cleanVal(changedNumbersData[number].fourth_ip_port),
        fourth_max_call: cleanVal(changedNumbersData[number].fourth_max_call_hour),
        fourth_incoming_caller_type: cleanVal(changedNumbersData[number].fourth_caller_number_type, ''),
        fourth_gateway_id: cleanVal(changedNumbersData[number].fourth_getway_grp_id),

        highCost: highCost,
        incomming_call_control: 10
      }));

      // Check if dataArray is empty
      if (!dataArray.length) {
        jQuery('#loaderModal').hide();
        showErrorModal('Action cannot proceed — please update the necessary data first.');
        return;
      }

      // Validate each row in dataArray
      dataArray.forEach((rowData, rowIndex) => {
        if (rowData.status == 21) {
          callFields.forEach((field) => {
            // Loop for call numbers 1-4 per row
            for (let i = 1; i <= 4; i++) {
              const $selector = jQuery(`#${field.class.replace('.', '')}-${i}`);

              $selector.css({
                color: '#34548a'
              });

              const callValue = rowData[`${field.call}_incomming_call`];
              let callType;
              if (i == 1) {
                callType = rowData[`call_type`];
              } else {
                callType = rowData[`${field.call}_call_type`];
              }

              if (!callValue || callValue === '-') continue;

              if (callType === 'number') {
                const firstThree = callValue.substring(0, 3);
                const firstSix = callValue.substring(0, 6);
                if (
                  callValue.length !== 10 ||
                  !callValue.match(checkIncomingRegx) ||
                  (npaNxxData['NPA_381']?.includes(firstThree)) ||
                  parseInt(firstThree) < 200 ||
                  npaNxxData['NPA_NXX_7885']?.some(v => v.replace(/-/g, '') === firstSix)
                ) {
                  isValid = false;
                  invalidCall = callValue;
                  $selector.css({
                    color: 'red'
                  });
                }
              } else if (callType === 'sip' && (!callValue.match(sipPattern) || callValue === 'sip:127.255.255.2')) {
                isValid = false;
                invalidCall = callValue;
                $selector.css({
                  color: 'red'
                });
              } else if (callType === 'IP' && !callValue.match(ipPattern)) {
                isValid = false;
                invalidCall = callValue;
                $selector.css({
                  color: 'red'
                });
              }
            }
          });
        }

        // status 22 validation
        if (rowData.status == 22) {
          if (!rowData.primary_gateway_id) isGatewayIdMissing = true;
          callFields.forEach(field => {
            for (let i = 1; i <= 4; i++) {
              const $selector = jQuery(`${field.class}-${i}-${rowIndex + 1}`);
              $selector.css({
                color: '#34548a'
              });

              const callValue = rowData[`${field.call}_incoming_call`];
              if (callValue && callValue !== '-' && !callValue.match(sipPattern)) {
                isValid = false;
                invalidCall = callValue;
                $selector.css({
                  color: 'red'
                });
              }
            }
          });
        }

        // if (
        //   (rowData.status == 21 || rowData.status == 22) &&
        //   (rowData.primary_incomming_call == null ||
        //     rowData.primary_incomming_call == '' ||
        //     rowData.primary_incomming_call == '-')
        // ) {
        //   is_incomming_call_null = true;
        // }
        if (!isHighCostNpaNXX && highCostNpaNxx && isValid && highCost != 1) {
          if (
            rowData.primary_incomming_call &&
            highCostNpaNxx.includes(rowData.primary_incomming_call.slice(0, 6))
          ) {
            isHighCostNpaNXX = true;
          } else if (
            rowData.second_incomming_call &&
            highCostNpaNxx.includes(rowData.second_incomming_call.slice(0, 6))
          ) {
            isHighCostNpaNXX = true;
          } else if (
            rowData.third_incomming_call &&
            highCostNpaNxx.includes(rowData.third_incomming_call.slice(0, 6))
          ) {
            isHighCostNpaNXX = true;
          } else if (
            rowData.fourth_incomming_call &&
            highCostNpaNxx.includes(rowData.fourth_incomming_call.slice(0, 6))
          ) {
            isHighCostNpaNXX = true;
          }
        }

        // other validations (no need to change — those are per rowData)
        if ((rowData.status == 21 || rowData.status == 22) && !rowData.primary_incomming_call) {
          isIncomingCallNull = true;
        }

        if (!isHighCostNpaNXX && highCostNpaNxx && isValid && highCost != 1) {
          isHighCostNpaNXX = callFields.some(field => {
            const call = rowData[`${field.call}_incoming_call`];
            return call && highCostNpaNxx.includes(call.slice(0, 6));
          });
        }

        if (rowData.branded == 1) {
          if (!rowData.brandName || rowData.brandName.trim() === '' || rowData.brandName.trim() === '-') {
            isBrandNameYesValid = false;
          }
        } else {
          if (rowData.brandName && rowData.brandName.trim() !== '' && rowData.brandName.trim() !== '-') {
            isBrandNameNoValid = false;
          }
        }

        if (rowData.incoming_call_control == 9) {
          const totalWeight = callFields.reduce((sum, field) => {
            return sum + (parseFloat(rowData[`${field.call}_max_call`]) || 0);
          }, 0);
          if (totalWeight !== 100) isValidWeight = false;
        }

        if ([4, 9].includes(rowData.incoming_call_control)) {
          const hasPrimary = !!rowData.primary_incoming_call;
          const hasSecond = !!rowData.second_incoming_call;
          if (hasPrimary && !hasSecond) isOptionIcnCallRequired = true;

          isMaxCallHrMissing = callFields.some(field => {
            const call = rowData[`${field.call}_incoming_call`];
            const max = rowData[`${field.call}_max_call`];
            return call && !max;
          });
        }
      });


      // Validation checks
      if (!isValid) return showErrorModal(`Failed! Invalid incoming call: ${invalidCall}`);
      if (isIncomingCallNull) return showErrorModal('Failed! Valid incoming call is required.');
      if (isMaxCallHrMissing) return showErrorModal('Max Call Per Hour is required for all incoming calls.');
      if (!isBrandNameYesValid) return showErrorModal('Brand Name required when Branded is Yes.');
      if (!isBrandNameNoValid) return showErrorModal('Brand Name not allowed when Branded is No.');
      if (isOptionIcnCallRequired) return showErrorModal('At least two incoming calls required for Overflow/Weighted algorithms.');
      if (isGatewayIdMissing) return showErrorModal('Gateway Group ID required for Assigned Standard status.');
      if (!isValidWeight) return showErrorModal('Total weight percentage must be 100% for weighted call control.');
      if (isHighCostNpaNXX) {
        jQuery('#loaderModal').hide();
        jQuery('.bulk-highcost').show();
        return;
      }

      jQuery.ajax({
        url: baseURL + 'UpdateUserDIDDetailsInBulkweb',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
          numbersData: dataArray,
          user_id: currentUserId
        }),
        success: (response) => {
          jQuery('#loaderModal').hide();
          if (response.status_code == 200) {
            jQuery('.simple-success-modal').show();
            jQuery('.simple-success-modal .msg-text').html(response.message);
            checkForBulkDIDUpdateResponse(response.ID);
          } else {
            showErrorModal(response.status_code == 401 ?
              `${response.conflicting_routes} — These Incoming Call Routes are already present in another user's account. Please Connect with Care team?` :
              'Something went wrong!');
          }
        },
        error: (error) => {
          console.error('AJAX error', error);
          jQuery('#loaderModal').hide();
          showErrorModal('Something went wrong!');
        }
      });
    }

    jQuery('#my-active-status').change(function() {
      const selectedOption = parseInt(jQuery(this).val()); // Parse the selected value to an integer
      const table = jQuery('#numberProvisioningTable').DataTable(); // Replace with your DataTable's actual ID
      const firstRow = jQuery(table.row(0).node());
      // Check if the row is the first row
      const isFirstRow = firstRow.is(':first-child');
      // Hide/Show columns based on selected dropdown value
      if (selectedOption === 10) {
        // Hide specific columns
        table.column('.primary_max_callhr').visible(false);
        table.column('.second_max_callhr').visible(false);
        table.column('.third_max_callhr').visible(false);
        table.column('.fourth_max_callhr').visible(false);
        jQuery('#numberProvisioningTable')
          .find('.max-call-per-hour')
          .html('-')
          .attr('contenteditable', 'false');
      } else if (selectedOption === 9 || selectedOption === 4) {
        // Show specific columns
        table.column('.primary_max_callhr').visible(true);
        table.column('.second_max_callhr').visible(true);
        table.column('.third_max_callhr').visible(true);
        table.column('.fourth_max_callhr').visible(true);

        jQuery('#manageNumbersShieldTable')
          .find('.max-call-per-hour')
          .html('-')
          .attr('contenteditable', 'true');

        // if (isFirstRow) {
        //   // Set contenteditable and add input for all '.max-call-per-hour' cells in the first row only
        //   firstRow
        //     .find('.max-call-per-hour')
        //     .html(
        //       '<div contenteditable="true" class="label-text max-call-per-hour"><input class="gray-input-field" type="text" value=""></div>'
        //     );
        // }
        if (isFirstRow) {
          // Find all '.max-call-per-hour' cells in the first row and update their content directly
          firstRow.find('.max-call-per-hour').each(function() {
            // Replace the inner HTML of the existing div without adding another wrapping div
            jQuery(this)
              .html('<input class="gray-input-field" type="text" value="" />')
              .attr('contenteditable', 'true'); // Ensure the parent div remains editable if needed
          });
        }
      }
    });

    //NP filter
    //showing filter popup 
    $('.filter').click(function() {
      $('.filter-main-container').show();
    });

    // Function to check and apply button state
    function updateApplyButton() {
      var allCheckedFilters = $('input[name="filter"]:checked').map(function() {
        return $(this).val();
      }).get();

      var allValid = true;

      // Iterate through all checked filters
      allCheckedFilters.forEach(function(filter) {
        var selectedValue = $('#' + filter + ' .filterDropdown').val();
        if (!selectedValue) {
          allValid = false;
        }
      });

      // Enable Apply button only if all checked filters have a selected value
      if (allValid) {
        $('#apply_filter').prop('disabled', false); // Show the Apply button
      } else {
        $('#apply_filter').prop('disabled', true); // Hide the Apply button
      }
    }

    function updateFilterDisplay() {
      var checkedFilters = $('input[name="filter"]:checked').map(function() {
        return $(this).val();
      }).get();

      if (checkedFilters.includes('all')) {
        $('.filter-row').hide(); // Hide all filters
        $('#' + checkedFilters[0]).show(); // Show only 'All' filter
      } else {
        $('.filter-row').hide(); // Hide all filters
        checkedFilters.forEach(function(filter) {
          $('#' + filter).show(); // Show only checked filters
        });
      }

      // Hide search results when filter changes
      $('.search-results-container').hide();
      updateApplyButton(); // Check if the Apply button should be visible
    }

    // Initially check the 'All' filter and hide all other filters
    $('input[name="filter"][value="all"]').prop('checked', true);
    updateFilterDisplay(); // Update display based on the initial checked state

    // Event handler for filter checkbox changes
    $('input[name="filter"]').change(function() {
      var checkedValue = $(this).val();

      // If 'All' is checked, uncheck all other filters
      if (checkedValue === 'all' && $(this).is(':checked')) {
        $('input[name="filter"]').not(this).prop('checked', false);
      } else if (checkedValue !== 'all' && $(this).is(':checked')) {
        // If any other filter is checked, uncheck 'All'
        $('input[name="filter"][value="all"]').prop('checked', false);
      }
      updateFilterDisplay();
    });

    // Event handler for dropdown changes
    $('.filterDropdown').change(function() {
      updateApplyButton();
    });

    $('#cancel_filter_btn').click(function() {
      $('.filter-main-container').hide();
    });

    $('.close-filter').click(function() {
      $('.filter-main-container').hide();
    });

    $('#apply_filter').click(function() {
      if(!jQuery('#userSelect').val()) {
        alert('Please select a user first.');
        return;
      }
      $('.filter-main-container').hide();
      var NPTableObj = jQuery('#numberProvisioningTable').DataTable();
      NPTableObj.ajax.reload();
    });

  });

  function getAllEntitiesAndBusinessNameOfDids() {
    var userId = $('#userSelect').val();
    const postData = {
          userId: userId,
        };

    jQuery.ajax({
      url: baseURL + 'getAllEntitiesAndBusinessNameOfDidsAdmin',
      type: 'POST',
      // dataType: 'json',
      // headers: {
      //   'Accept-WP-Cookie': wp_cookie,
      // },
      data: {userId:userId},
      success: function (response, textStatus, jQxhr) {
        if (response.success && response.code == 200) {
          if (response.success && response.code == 200) {
            
            var businessNameDropdown = jQuery('#npDropdownPreferredBusinessName');
            var descriptionDropdown = jQuery('#npDropdownDescription'); //@swati 28Oct2025
            var entityDropdown = jQuery('#npDropdownEntity');
            var brandNameDropDown = jQuery('#npDropdownBrandName');
            var SalesIdDropDown = jQuery('#npDropdownSalesOrderId');
            var NumberDropDown = jQuery('#npDropdownNumber');
            
            if (response.entity && Object.keys(response.entity).length > 0) {
          // Clear previous options if necessary
          entityDropdown.empty();
        
          // Add default option
          //entityDropdown.append('<option value=""></option>');
          
              Object.values(response.entity).forEach(function (entity) {
                entityDropdown.append(
                  '<option value="' + entity + '">' + entity + '</option>'
                );
              });
            }

            if (
              response.business_name &&
              Object.keys(response.business_name).length > 0
            ) {
              Object.values(response.business_name).forEach(function (
                businessName
              ) {
                businessNameDropdown.append(
                  '<option value="' +
                    businessName +
                    '">' +
                    businessName +
                    '</option>'
                );
              });
            }
            /*@swati 28Oct2025 */
            if (
              response.number_description &&
              Object.keys(response.number_description).length > 0
            ) {
              Object.values(response.number_description).forEach(function (
                numberDescription
              ) {
                descriptionDropdown.append(
                  '<option value="' +
                    numberDescription +
                    '">' +
                    numberDescription +
                    '</option>'
                );
              });
            }
            /*@swati 28Oct2025 */
            if (
              response.numbers &&
              Object.keys(response.numbers).length > 0
            ) {
              Object.values(response.numbers).forEach(function (
                number
              ) {
                NumberDropDown.append(
                  '<option value="' +
                    number +
                    '">' +
                    number +
                    '</option>'
                );
              });

              // Initialize Select2 AFTER appending options
              NumberDropDown.select2({
                placeholder: "Select Number(s)",
                allowClear: true,
                width: "100%"
              });
            }

            if (
              response.brand_name &&
              Object.keys(response.brand_name).length > 0
            ) {
              Object.values(response.brand_name).forEach(function (
                brandName
              ) {
                brandNameDropDown.append(
                  '<option value="' +
                    brandName +
                    '">' +
                    brandName +
                    '</option>'
                );
              });
            }

            if (
              response.sales_order_id &&
              Object.keys(response.sales_order_id).length > 0
            ) {
              Object.values(response.sales_order_id).forEach(function (
                SalesId
              ) {
                SalesIdDropDown.append(
                  '<option value="' +
                    SalesId +
                    '">' +
                    SalesId +
                    '</option>'
                );
              });
            }
          }
        } else {
          console.log(
            '@AKASH getAllEntitiesAndBusinessNameOfDids Failed',
            response
          );
        }
      },
      error: function (jqXhr, textStatus, errorThrown) {
        console.error(
          'Error occurred during the AJAX request:',
          textStatus,
          errorThrown
        );
      },
    });
  }

  function fetchUserProvisioningData() {
    var datatable = jQuery('#numberProvisioningTable').DataTable({
      "buttons": ['colvis'],
      "pagingType": "full_numbers",
      "serverSide": true,
      "pageLength": 100,
      "scrollY": '500px',
      "scrollX": true,
      "scrollCollapse": true,
      "processing": false,
      "searching": true,
      "order": [
        [0, 'asc']
      ],
      "oLanguage": {
        "sEmptyTable": '<div id="list-number-note"><span><a href="/add-number/"><em><strong>ADD NEW</strong></em></a> numbers to get started</span></div>',
        'sSearch': '',
        'sSearchPlaceholder': "Search"
      },
      "aoColumnDefs": [{
        "bSortable": false,
        // "aTargets": [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34]
        "aTargets": [0, 2, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34]
      }, {
        "bSearchable": false,
        "aTargets": [0, 2]
      }],
      "responsive": {
        "breakpoints": [{
            name: 'desktop',
            width: Infinity
          },
          {
            name: 'tablet',
            width: 1024
          },
          {
            name: 'fablet',
            width: 768
          },
          {
            name: 'phone',
            width: 480
          }
        ]
      },
      'ajax': function(data, callback, settings) {
        jQuery("#numberProvisioningTable_processing").show();
        var numberProvisioningTable = jQuery('#numberProvisioningTable').DataTable();
        var params = numberProvisioningTable ? numberProvisioningTable.ajax.params() : '';
        var column_name = '';
        var sort_order = '';
        if (params.order[0].column == 1) {
          column_name = 'sales_order_id';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 3) {
          column_name = 'preferred_business_name';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 6) {
          column_name = 'brand_name';
          sort_order = params.order[0].dir;
        } 
        // else if (params.order[0].column == 3) {
        //   column_name = 'is_branded';
        //   sort_order = params.order[0].dir;
        // } else if (params.order[0].column == 4) {
        //   column_name = 'brand_name';
        //   sort_order = params.order[0].dir;
        // } else if (params.order[0].column == 5) {
        //   column_name = 'is_number_guard';
        //   sort_order = params.order[0].dir;
        // } else if (params.order[0].column == 6) {
        //   column_name = 'plan_name';
        //   sort_order = params.order[0].dir;
        // } else if (params.order[0].column == 7) {
        //   column_name = 'test_plan_status';
        //   sort_order = params.order[0].dir;
        // } else if (params.order[0].column == 8) {
        //   column_name = 'status';
        //   sort_order = params.order[0].dir;
        // }
        var filterField = jQuery('input[name="filter"]:checked').val();
        var filterValue = jQuery('#' + filterField + ' .filterDropdown').val();
        if (filterValue == "all") {
          filterField = "";
          filterValue = "";
        }

        var filters = {};
        // Iterate over all checked filters
        $('input[name="filter"]:checked').each(function() {
          var filterId = $(this).val();
          var selectedValue = $('#' + filterId + ' .filterDropdown').val();

          if (selectedValue == 'all') {
            filters = {};
          } else {
            filters[filterId] = selectedValue;
          }
        });

        var filterObject = {
          filters: filters
        };

        //@swati 10feb
        var numType;
        // if (numberType == 'history') {
        //   numType = 'history';
        // } else {
        numType = 'active';
        // }

        // var numType;
        // if (numberType == 'history') {
        //   numType = 'history';
        // } else {
        //   numType = 'active';
        // }

          var ClickedStatusValue = 'all';
					var ClickedPlanValue = '3';  // Default value for plan if not selected
					var ClickedEntityValue = 'all';
					var ClickedBusinessNameValue = 'all';
					var ClickedBrandNameValue = 'all';
					var SalesOrderID = 'all';
					var isBranded = 'all';
					var descriptionText = ''; //@swati 28Oct2025
					var numberText = ''; //@swati 28Oct2025

					jQuery('input[name="filter"]:checked').each(function() {
						var filterId = jQuery(this).val();
						console.log('@AKASH checked filter value',filterId);
						var selectedValue = jQuery('#' + filterId + ' .filterDropdown').val();
						if (filterId === 'entity') {
							// Ensure selectedValue is an array
							var selectedEntityValue = Array.isArray(selectedValue) ? selectedValue : [selectedValue];
							// Join into a single comma-separated string and wrap in an array
							var entity = [selectedEntityValue.join(', ')];

							// Example: assign to an object
							var selectedEntityValueTest = entity;
						}
						if (selectedValue == 'all') {
							ClickedStatusValue = 'all';
							ClickedPlanValue = '3';
							ClickedEntityValue = 'all';
							ClickedBusinessNameValue = 'all';
							ClickedBrandNameValue = 'all';
							SalesOrderID = 'all';
							isBranded = 'all';
							descriptionText = 'all'; //@swati 28Oct2025
							numberText = 'all'; //@swati 28Oct2025
						} else {
								// Update the filter values
								if (filterId == 'np_status') {
										ClickedStatusValue = selectedValue;
								} else if (filterId == 'test_plan') {
										ClickedPlanValue = selectedValue;
								} else if (filterId == 'entity') {
										//ClickedEntityValue = selectedValue;
										ClickedEntityValue = selectedEntityValue;
								} else if (filterId == 'preferred_business_name') {
										ClickedBusinessNameValue = selectedValue;
								}
								else if (filterId == 'brand_name') {
										ClickedBrandNameValue = selectedValue;
								}
								else if (filterId == 'sales_order_id') {
										SalesOrderID = selectedValue;
								}else if (filterId == 'is_branded') {
										isBranded = selectedValue;
								}
								//@swati 28Oct2025
								else if (filterId == 'description') {
										descriptionText = selectedValue;
								}
								else if (filterId == 'number') {
                  numberText = selectedValue;
								}
						}
					});
					if( jQuery(".contact-number-list #listnumber-check").is(":checked") ){
						selectAll = true;
					}else{
						selectAll = false;
					}
        // @swati 10feb
        

        const postData = {
          userId: currentUserId,
          pageSize: 100,
          pageNumber: (numberProvisioningTable.page.info().page + 1),
          searchKeyword: (jQuery('.dataTables_filter input').val()),
          sortField: column_name,
          sortDirection: sort_order,
          status: ClickedStatusValue,
          // numberShield : 1,
          plan_value: ClickedPlanValue,
          entity: ClickedEntityValue,
          preferred_business_name: ClickedBusinessNameValue,
          description: descriptionText, //@swati 28Oct2025
          number: numberText, //@swati 28Oct2025
          brand_name : ClickedBrandNameValue,
          SalesOrderID : SalesOrderID,
          isBranded :isBranded,
          selectAll: selectAll,
        };

        jQuery.ajax({
          url: baseURL + "fetchUserProvisioningData",
          type: 'GET',
          data: postData,
          success: function(response, textStatus, jQxhr) {
            jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display', 'inline-block');
            jQuery(".dataTables_filter .fa-spinner").css('display', 'none');
            jQuery("#numberProvisioningTable_filter input[type='search']").prop("disabled", false);
            jQuery("#numberProvisioningTable_processing").hide();
            window.initialTableData = {};
            // $("#loaderModal").hide();
            var tempDataTableArr = [];
            var objResult = response.data;
            var gatewayResponse = response.getgrid;
            var planName = response.plan_names;
            var userEntity = response.userEntity;

            objResult.forEach(item => {
              window.initialTableData[item.number] = item;
            });


            objResult = objResult.map(item => {
              const number = item.number;
              if (changedNumbersData.hasOwnProperty(number)) {
                return {
                  number: number,
                  ...changedNumbersData[number]
                };
              }
              return item;
            });


            var allentityOptionsStr = userEntity.map(function(entity) {
              // No need to check for selected entities, just return the option
              return '<option value="' + entity.id + '">' + entity.entity + '</option>';
            }).join('');
            var allentityDropdown = `
											<div class="s2-example">
													<p>
															<select class="obn-entity-select form-control"
																			multiple="multiple"
																			placeholder="Select Entity2"
                                      name="entities[]"
																		>
																	${allentityOptionsStr}
															</select>
													</p>
											</div>`;
            let controlValue = 10;
            if (response && typeof response.majorityIncomingCallControl !== 'undefined') {
              controlValue = response.majorityIncomingCallControl;
            } else {
              console.warn("🚫 response.majorityIncomingCallControl is undefined");
            }

            var hardcodedRow = {
              number: `<div class="replicate-main-div"><div class="label-text icon-div" id="replicateButton">
																	<span title="Copy details to all rows below"><i class="fa fa-clone" aria-hidden="true"></i></span>
                                  <span id="replicateText" title="Copy details to all rows below">Copy to all</span>
                        </div>
                        <div class="label-text text-div" style="margin-left:-17px;margin-top: 3px;">
                                  <span id="removeText" title="Reset">Reset</span>
																	<span id="removeButton" title="Reset"><i class="fa fa-undo" aria-hidden="true"></i></span>
                        </div></div>`,
              sales_order_id: `<div contenteditable="false">
																	-
															</div>`,
              entity: `<div class="checkbox-wrapper">
																	${allentityDropdown}
																	<input type="checkbox" class="checkbox-extra entity-checkbox">
															</div>`,
              preferred_business_name: `<div class="checkbox-wrapper">
																	<div contenteditable="false" class="label-text business-name" title="-">
																			<input class="gray-input-field business-name" type="text" value="" readonly>
																	</div>
																	<input type="checkbox" class="checkbox-extra preferred-business-name-checkbox">
															</div>`,
              number_description: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text number-description" title="-">
																			<input class="gray-input-field" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra number-description-checkbox">
															</div>`,
              branded: `<div class="checkbox-wrapper">
																	<select class="label-text did-branded selected-color" style="min-width:155px;background-color: white;">
																			<option value="1" selected>Yes</option>
																			<option value="0">No</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra branded-checkbox">
															</div>`,
              brand_name: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text brandname">
																			<input class="gray-input-field brand-name" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra brand-name-checkbox">
															</div>`,
              is_gaurded: `<div class="checkbox-wrapper">
																	<div class="label-text is-number-guard">
																			<select contenteditable="true" class="label-text is-number-guard-select selected-color" style="min-width:155px;background-color: white;">
																					<option value="1">Yes</option>
																					<option value="0" selected>No</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra is-gaurded-checkbox">
															</div>`,
              select_plan_name: `<div class="checkbox-wrapper">
																	<div class="label-text plan-select">
																			<select contenteditable="true" class="label-text plan-selected selected-color one" style="min-width:155px;background-color: white;">
																					${Object.keys(planName).map(function(planId) {
																							return `<option value="${planId}">${planName[planId]}</option>`;
																					}).join('')}
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra select-plan-name-checkbox">
															</div>`,
              test_status: `<div class="checkbox-wrapper">
																	<div class="label-text test-plan-status">
																			<select contenteditable="true" class="label-text test-plan-status-select selected-color" style="min-width:155px;background-color: white;">
																					<option value="1">Active</option>
																					<option value="0">Inactive</option>
																					<option value="2">Pending</option>
																					<option value="3">Ready Pool</option>
																					<option value="5">Cool Down</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra test-status-checkbox">
															</div>`,
              status: `<div class="checkbox-wrapper">
																	<select contenteditable="true" class="label-text did-status selected-color" style="min-width:175px;background-color: white;">
																			<option value="21">Assigned Routed</option>
																			<option value="22">Assigned Standard</option>
																			<option value="23">Reserved</option>
																			<option value="24">Pending</option>
																			<option value="25">Ready</option>
																			<option value="28">Released</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra status-checkbox">
															</div>`,
              primary_incomming_call_type: `<div class="checkbox-wrapper">
																	<select id="primary-incoming-call-type"  class="call-type" style="min-width: 175px; background-color: white;">
																			<option value="number">Route Number</option>
																			<option value="IP">IP Address</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra primary-inc-call-type-checkbox">
															</div>`,
              primary_inc_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text incomming-call-route prim-inc-call incomming-call-route-1">
																			<input class="gray-input-field" type="text">
																	</div>
																	<input type="checkbox" class="checkbox-extra primary-inc-call-checkbox">
															</div>`,
              primary_ip_port: `<div class="checkbox-wrapper primary-ip-port">
																<div class="prim-ip-port">
																	<select id="primary-ip-port" class="ip-port" style="min-width: 175px; background-color: white;">
																			<option value="5060" selected>5060</option>
																			<option value="5061">5061</option>
																			<option value="5062">5062</option>
																	</select>
																</div>
																<input type="checkbox" class="checkbox-extra primary-ip-port-checkbox">
															</div>`,
              primary_max_call: `<div class="checkbox-wrapper">
																	<div class="label-text max-call-per-hour prim-max-call-per-hour">
																			<input class="gray-input-field first-max-call-hardcode" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra primary-max-call-checkbox">
															</div>`,
              primary_caller_type: `<div class="checkbox-wrapper">
																	<div class="label-text caller-type selected-color">
																			<select id="prim_caller_number_type" class="caller_number_type" style="background-color: white;">
																					<option value="A">ANIS</option>
																					<option value="D">DNIS</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra primary-caller-type-checkbox">
															</div>`,
              primary_getwway_id: `<div class="checkbox-wrapper">
																	<div class="label-text getway-grp-id">-</div>
																	<input type="checkbox" class="checkbox-extra primary-getwway-id-checkbox">
															</div>`,
              second_incomming_call_type: `<div class="checkbox-wrapper">
																	<select id="second-incoming-call-type" class="call-type" style="min-width: 175px; background-color: white;">
																			<option value="number">Route Number</option>
																			<option value="IP">IP Address</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra second-inc-call-type-checkbox">
															</div>`,
              second_inc_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text incomming-call-route second-inc-call incomming-call-route-2">
																			<input class="gray-input-field" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra second-inc-call-checkbox">
															</div>`,
              second_ip_port: `<div class="checkbox-wrapper second-ip-port">
																<div class="sec-ip-port">
																	<select id="second-ip-port" class="ip-port" style="min-width: 175px; background-color: white;">
																		<option value="5060" selected>5060</option>
																		<option value="5061">5061</option>
																		<option value="5062">5062</option>
																	</select>
																</div>
																<input type="checkbox" class="checkbox-extra second-ip-port-checkbox">
															</div>`,
              second_max_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text max-call-per-hour second-max-call-per-hour">
																			<input class="gray-input-field second-max-call-hardcode" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra second-max-call-checkbox">
															</div>`,
              second_caller_type: `<div class="checkbox-wrapper">
																	<div class="label-text caller-type">
																			<select id="sec_caller_number_type" class="caller_number_type selected-color" style="background-color: white;">
																					<option value="A">ANIS</option>
																					<option value="D">DNIS</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra second-caller-type-checkbox">
															</div>`,
              second_getwway_id: `<div class="checkbox-wrapper">
																	<div class="label-text getway-grp-id">-</div>
																	<input type="checkbox" class="checkbox-extra second-getwway-id-checkbox">
															</div>`,
              third_incomming_call_type: `<div class="checkbox-wrapper">
																	<select id="third-incoming-call-type" class="call-type" style="min-width: 175px; background-color: white;">
																			<option value="number">Route Number</option>
																			<option value="IP">IP Address</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra third-inc-call-type-checkbox">
															</div>`,
              third_inc_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text incomming-call-route third-inc-call incomming-call-route-3">
																			<input class="gray-input-field" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra third-inc-call-checkbox">
															</div>`,
              third_ip_port: `<div class="checkbox-wrapper third-ip-port">
																<div class="thir-ip-port">
																	<select id="third-ip-port" class="ip-port" style="min-width: 175px; background-color: white;">
																		<option value="5060" selected>5060</option>
																		<option value="5061">5061</option>
																		<option value="5062">5062</option>
																	</select>
																</div>
																<input type="checkbox" class="checkbox-extra third-ip-port-checkbox">
															</div>`,
              third_max_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text max-call-per-hour third-max-call-per-hour">
																			<input class="gray-input-field third-max-call-hardcode" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra third-max-call-checkbox">
															</div>`,
              third_caller_type: `<div class="checkbox-wrapper">
																	<div class="label-text caller-type">
																			<select id="third_caller_number_type" class="caller_number_type selected-color" style="background-color: white;">
																					<option value="A">ANIS</option>
																					<option value="D">DNIS</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra third-caller-type-checkbox">
															</div>`,
              third_getwway_id: `<div class="checkbox-wrapper">
																	<div class="label-text getway-grp-id">-</div>
																	<input type="checkbox" class="checkbox-extra third-getwway-id-checkbox">
															</div>`,
              fourth_incomming_call_type: `<div class="checkbox-wrapper">
																	<select id="fourth-incoming-call-type" class="call-type" style="min-width: 175px; background-color: white;">
																			<option value="number">Route Number</option>
																			<option value="IP">IP Address</option>
																	</select>
																	<input type="checkbox" class="checkbox-extra fourth-inc-call-type-checkbox">
															</div>`,
              fourth_inc_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text incomming-call-route fourth-inc-call incomming-call-route-4">
																			<input class="gray-input-field" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra fourth-inc-call-checkbox">
															</div>`,
              fourth_ip_port: `<div class="checkbox-wrapper fourth-ip-port">
																<div class="four-ip-port">
																	<select id="fourth-ip-port" class="ip-port" style="min-width: 175px; background-color: white;">
																		<option value="5060" selected>5060</option>
																		<option value="5061">5061</option>
																		<option value="5062">5062</option>
																	</select>
																</div>
																<input type="checkbox" class="checkbox-extra fourth-ip-port-checkbox">
															</div>`,
              fourth_max_call: `<div class="checkbox-wrapper">
																	<div contenteditable="true" class="label-text max-call-per-hour fourth-max-call-per-hour">
																			<input class="gray-input-field fourth-max-call-hardcode" type="text" value="">
																	</div>
																	<input type="checkbox" class="checkbox-extra fourth-max-call-checkbox">
															</div>`,
              fourth_caller_type: `<div class="checkbox-wrapper">
																	<div class="label-text caller-type">
																			<select id="fourth_caller_number_type" class="caller_number_type selected-color" style="background-color: white;">
																					<option value="A">ANIS</option>
																					<option value="D">DNIS</option>
																			</select>
																	</div>
																	<input type="checkbox" class="checkbox-extra fourth-caller-type-checkbox">
															</div>`,
              fourth_getwway_id: `<div class="checkbox-wrapper">
																	<div class="label-text getway-grp-id">-</div>
																	<input type="checkbox" class="checkbox-extra fourth-getwway-id-checkbox">
															</div>`
            };

            // Insert hardcoded row at the beginning of the array
            tempDataTableArr.unshift(hardcodedRow);

            var output = "";
            if (objResult && objResult.length > 0) {
              for (var i = 0; i < objResult.length; i++) {
                const statuses = [23, 24, 25, 26, 27, 28];
                // entityTempArray = objResult[i].entities;
                entityTempArray = objResult[i].entity;
                var teststatusOptions = `<div class="label-text test-plan-status"><select  contenteditable="true" class="label-text test-plan-status-select" style="min-width:155px;background-color: white;">
																<option value="1" ${objResult[i].test_plan_status == 1 ? 'selected' : ''}>Active</option>
																<option value="0" ${objResult[i].test_plan_status == 0 ? 'selected' : ''}>Inactive</option>
																<option value="2" ${objResult[i].test_plan_status == 2 ? 'selected' : ''}>Pending</option>
																<option value="3" ${objResult[i].test_plan_status == 3 ? 'selected' : ''}>Ready Pool</option>
																<option value="5" ${objResult[i].test_plan_status == 5 ? 'selected' : ''}>Cool Down</option>
															</select> </div>`;
                var statusOptions = `<select  contenteditable="true" class="label-text did-status" style="min-width:175px;">
											<option value="21" ${objResult[i].status == 21 ? 'selected' : ''}>Assigned Routed</option>
											<option value="22" ${objResult[i].status == 22 ? 'selected' : ''}>Assigned Standard</option>
											<option value="23" ${objResult[i].status == 23 ? 'selected' : ''}>Reserved</option>
											<option value="24" ${objResult[i].status == 24 ? 'selected' : ''}>Pending</option>
											<option value="25" ${objResult[i].status == 25 ? 'selected' : ''}>Ready</option>
											<option value="27" ${objResult[i].status == 27 ? 'selected' : ''}>Cooldown</option>
											<option value="28" ${objResult[i].status == 28 ? 'selected' : ''}>Released</option>
										</select>`;
                if (objResult[i].majority_incoming_call_control == 0) {
                  var incomming_control_filter = 10;
                  numberProvisioningTable.column('.primary_max_callhr').visible(false);
                  numberProvisioningTable.column('.second_max_callhr').visible(false);
                  numberProvisioningTable.column('.third_max_callhr').visible(false);
                  numberProvisioningTable.column('.fourth_max_callhr').visible(false);
                  var show_max_call_hr = 1;
                } else {
                  var incomming_control_filter = objResult[i].majority_incoming_call_control;
                  var show_max_call_hr = 0;
                }
                var incommingFilter = jQuery('#my-active-status').val(incomming_control_filter);
                if (objResult[i].incoming_call_control != 0) {
                  var loadshare = `<div class="loadshare label-text" style="min-width:175px;">
											<select class="call-control">
											<option value="10" ${objResult[i].incoming_call_control == 10 ? 'selected' : ''}>Loadshare</option>
											<option value="9" ${objResult[i].incoming_call_control == 9 ? 'selected' : ''}>Weighted</option>
											<option value="4" ${objResult[i].incoming_call_control == 4 ? 'selected' : ''}>Overflow</option>
										</select></div>`;
                } else {
                  var loadshare = '<div class="loadshare label-text" style="min-width:175px;">-</div>';
                }
                if (objResult[i].status == 22) {
                  if (gatewayResponse.length > 0) {
                    var getwayDropdowns = ['first', 'second', 'third', 'fourth'].map((num, idx) => {
                      return `<div class="label-text getway-grp-id getway-grp-id-select" style="min-width:250px;"><select>
													${gatewayResponse.map(gateway => {
														var displayText = gateway.first_username ? gateway.first_username : gateway.first_dailer_ip;
														var isSelected = gateway.gwid == objResult[i][`${num}_getway_grp_id`] ? 'selected' : '';
														return `<option value="${gateway.gwid}" ${isSelected}>${displayText ? displayText : '-'}</option>`;
													}).join('')}
												</select></div>`;
                    });
                    var [first_getway_id, second_getway_id, third_getway_id, fourth_getway_id] = getwayDropdowns;
                  } else {
                    var first_getway_id = `<div class="getway-grp-id">-</div>`;
                    var second_getway_id = `<div class="getway-grp-id">-</div>`;
                    var third_getway_id = `<div class="getway-grp-id">-</div>`;
                    var fourth_getway_id = `<div class="getway-grp-id">-</div>`;
                  }

                } else {
                  var first_getway_id = `<div class="getway-grp-id">-</div>`;
                  var second_getway_id = `<div class="getway-grp-id">-</div>`;
                  var third_getway_id = `<div class="getway-grp-id">-</div>`;
                  var fourth_getway_id = `<div class="getway-grp-id">-</div>`;
                }
                var entity = objResult[i].entities;

                // Ensure entities is a valid string of comma-separated IDs
                var entities = Array.isArray(entity) ? entity.join(', ') : "";

                // Convert to trimmed array
                var selectedEntities = entities.split(',').map(function(item) {
                  return item.trim();
                });
                // Generate dropdown options
                var entityOptionsStr = userEntity.map(function(entity) {
                  // Match IDs as strings
                  var isSelected = selectedEntities.includes(entity.id.toString()) ? 'selected' : '';
                  return '<option value="' + entity.id + '" ' + isSelected + '>' + entity.entity + '</option>';
                }).join('');

                // Render dropdown
                var entityDropdown = `
                			<div class="s2-example">
                				<p>
                					<select class="obn-entity-select form-control" 
                							multiple="multiple"
                							autocomplete="off"
                							placeholder="Select Entity11"
                							>
                						${entityOptionsStr}
                					</select>
                				</p>
                			</div>`;
                jQuery('#numberProvisioningTable').on('change', '.did-status', function() {
                  var currentRow = jQuery(this).closest('tr');
                  var valueInStatus = jQuery(this).val();
                  var algorithmVAlue = jQuery('#my-active-status').val();

                  const isFirstRow = currentRow.is(':first-child');
                  if (valueInStatus == 22) {
                    if (gatewayResponse.length > 0) {
                      var gatewayDropdown = `
																		<select class="get-way-grpid">
																				${gatewayResponse.map((gateway, index) => {
																						var displayText = gateway.first_username ? gateway.first_username : gateway.first_dailer_ip;
																						return `<option value="${gateway.gwid}" ${index === 0 ? 'selected' : ''}>
																								${displayText ? displayText : '-'}
																						</option>`;
																				}).join('')}
																		</select>`;
                      currentRow.find('.getway-grp-id').html(gatewayDropdown);
                    } else {
                      currentRow.find('.getway-grp-id').html('-').attr('contenteditable', 'false');
                    }

                    currentRow.find('.caller-type').each(function() {
                      var $div = $(this);
                      var id = $div.attr('id'); // get id from div

                      // Create select element with same id
                      var $select = $('<select>', {
                        id: id,
                        html: '<option value="A" selected>ANIS</option>' +
                          '<option value="D">DNIS</option>'
                      });

                      // Replace the div with the select
                      $div.replaceWith($select);
                    });
                    //09feb @swati
                    /* currentRow.find('.call-type').each(function() {
                      var $div = $(this);
                      var id = $div.attr('id'); // get id from div

                      // Create select element with same id
                      var $select = $('<select>', {
                        id: id,
                        class: 'call-type',
                        html: '<option value="sip">SIP URI...</option>' +
                          '<option value="number">Route Number....</option>' +
                          '<option value="IP">IP Address</option>'
                      });

                      // Replace the div with the select
                      $div.replaceWith($select);
                    }); */
                    currentRow.find('.call-type').html('-').attr('contenteditable', 'false');
                    //09feb @swati

                    if (isFirstRow) {
                      /* currentRow.find('.call-type').each(function() {
                        var $div = $(this);
                        var id = $div.attr('id'); // get id from div

                        // Create select element with same id
                        var $select = $('<select>', {
                          id: id,
                          class: 'call-type',
                          html: '<option value="sip">SIP URI</option>' +
                            '<option value="number">Route Number</option>' +
                            '<option value="IP">IP Address</option>'
                        });

                        // Replace the div with the select
                        $div.replaceWith($select);
                      }); */
                      currentRow.find('.call-type').html('-').attr('contenteditable', 'false');

                      currentRow.find('.incomming-call-route-1')
                        .html('<input class="gray-input-field incomming-call-route" type="text">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-2')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value="">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-3')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value="">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-4')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value=""></div>')
                        .attr('contenteditable', 'true');
                      // currentRow.find('.call-type')
                      //   .html('<input class="gray-input-field call-type" type="text" value=""></div>')
                      //   .attr('contenteditable', 'true');
                      if (algorithmVAlue != 10) {
                        currentRow.find('.max-call-per-hour')
                          .html('<div contenteditable="true" class="label-text max-call-per-hour"><input class="gray-input-field" type="text" value=""></div>')
                          .attr('contenteditable', 'true');
                      } else {
                        currentRow.find('.max-call-per-hour')
                          .html('<div class="label-text max-call-per-hour">-</div>')
                          .attr('contenteditable', 'false');
                      }
                    } else {
                      currentRow.find('.incomming-call-route')
                        .html((currentRow.find('.incomming-call-route').attr('title') !== '-' ? currentRow.find('.incomming-call-route').attr('title') : '-'))
                        .attr('contenteditable', 'true');
                      if (algorithmVAlue != 10) {
                        currentRow.find('.max-call-per-hour')
                          .html((currentRow.find('.max-call-per-hour').attr('title') !== '-' ? currentRow.find('.max-call-per-hour').attr('title') : '-'))
                          .attr('contenteditable', 'true');
                      } else {
                        currentRow.find('.max-call-per-hour')
                          .html('<div class="label-text max-call-per-hour">-</div>')
                          .attr('contenteditable', 'false');
                      }

                    }

                    var loadshare = `
																	<select class="loadshare-selectcall-control call-control">
																			<option value="10" selected>Loadshare</option>
																			<option value="9">Weighted</option>
																			<option value="4">Overflow</option>
																	</select>`;
                    currentRow.find('.loadshare').html(loadshare);
                  } else if (valueInStatus == 23 || valueInStatus == 24 || valueInStatus == 25 || valueInStatus == 26 || valueInStatus == 27 || valueInStatus == 28) {
                    currentRow.find('.getway-grp-id').html('-').attr('contenteditable', 'false');
                    currentRow.find('.caller-type').html('-').attr('contenteditable', 'false');
                    currentRow.find('.max-call-per-hour').html('-').attr('contenteditable', 'false');
                    currentRow.find('.incomming-call-route').html('-').attr('contenteditable', 'false');
                    currentRow.find('.loadshare').html('-').attr('contenteditable', 'false');
                    // var $select = currentRow.find('.call-type');
                    // var selectId = $select.attr('id') || ''; // safely get id or empty string

                    // $select.replaceWith('<div class="call-type" id="' + selectId + '" contenteditable="false">-</div>');
                    currentRow.find('.call-type').html('-').attr('contenteditable', 'false');

                  } else {
                    // currentRow.find('.caller-type').html(
                    //   '<div contenteditable="true" class="label-text caller-type">' + // Moved contenteditable inside the div
                    //   '<select class="caller_number_type">' +
                    //   '<option value="A" selected>ANIS</option>' +
                    //   '<option value="D">DNIS</option>' +
                    //   '</select>' +
                    //   '</div>'
                    // );

                    currentRow.find('.caller-type').each(function() {
                      var $div = $(this);
                      var id = $div.attr('id'); // get id from div

                      // Create select element with same id
                      var $select = $('<select>', {
                        id: id,
                        html: '<option value="A" selected>ANIS</option>' +
                          '<option value="D">DNIS</option>'
                      });

                      // Replace the div with the select
                      $div.replaceWith($select);
                    });

                    currentRow.find('.call-type').each(function() {
                      var $div = $(this);
                      var id = $div.attr('id'); // get id from div

                      // Create select element with same id
                      var $select = $('<select>', {
                        id: id,
                        class: 'call-type',
                        html: '<option value="number">Route Number</option>' +
                          '<option value="IP">IP Address</option>'
                      });

                      // Replace the div with the select
                      $div.replaceWith($select);
                    });

                    var loadshare = `
																	<select class="loadshare-select call-control">
																			<option value="10" selected>Loadshare</option>
																			<option value="9">Weighted</option>
																			<option value="4">Overflow</option>
																	</select>`;
                    currentRow.find('.loadshare').html(loadshare);
                    currentRow.find('.getway-grp-id').html('-').attr('contenteditable', 'false');
                    if (isFirstRow) {
                      currentRow.find('.incomming-call-route-1')
                        .html('<input class="gray-input-field incomming-call-route" type="text">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-2')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value="">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-3')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value="">')
                        .attr('contenteditable', 'true');
                      currentRow.find('.incomming-call-route-4')
                        .html('<input class="gray-input-field incomming-call-route" type="text" value=""></div>')
                        .attr('contenteditable', 'true');

                      if (algorithmVAlue != 10) {
                        currentRow.find('.max-call-per-hour')
                          .html('<div contenteditable="true" class="label-text max-call-per-hour"><input class="gray-input-field" type="text" value=""></div>')
                          .attr('contenteditable', 'true');
                      } else {
                        currentRow.find('.max-call-per-hour')
                          .html('<div class="label-text max-call-per-hour">-</div>')
                          .attr('contenteditable', 'false');
                      }
                    } else {

                      currentRow.find('.incomming-call-route')
                        .html((currentRow.find('.incomming-call-route').attr('title') !== '-' ? currentRow.find('.incomming-call-route').attr('title') : '-'))
                        .attr('contenteditable', 'true');
                    }
                    if (algorithmVAlue != 10) {
                      currentRow.find('.max-call-per-hour')
                        .html((currentRow.find('.max-call-per-hour').attr('title') !== '-' ? currentRow.find('.max-call-per-hour').attr('title') : '-'))
                        .attr('contenteditable', 'true');
                    } else {
                      currentRow.find('.max-call-per-hour')
                        .html('<div class="label-text max-call-per-hour">-</div>')
                        .attr('contenteditable', 'false');
                    }
                  }
                });

                jQuery('#numberProvisioningTable').on('change', '.did-branded', function() {
                  var currentRow = jQuery(this).closest('tr');
                  var valueInBrandLabel = jQuery(this).val();
                  const isFirstRow = currentRow.is(':first-child');
                  if (valueInBrandLabel == 0) {
                    if (isFirstRow) {
                      currentRow.find('.brandname').html('-').attr('contenteditable', 'false');
                      currentRow.find('.business-name input').attr('readonly', false);
                    } else {
                      currentRow.find('.brand-name').html('-').attr('contenteditable', 'false');
                      currentRow.find('.business-name')
                        .html((currentRow.find('.business-name').attr('title') !== '-' ? currentRow.find('.business-name').attr('title') : '-'))
                        .attr('contenteditable', 'true');
                    }
                  } else {
                    if (isFirstRow) {
                      currentRow.find('.brandname').html('<input class="gray-input-field brand-name" type="text" value="">');
                      currentRow.find('.business-name input').val('');
                      currentRow.find('.business-name input').attr('readonly', true);
                    } else {
                      currentRow.find('.business-name')
                        .html(currentRow.find('.brand-name').html())
                        .attr('contenteditable', 'false')
                        .attr('title', currentRow.find('.brand-name').attr('title'));
                      currentRow.find('.brand-name')
                        .html((currentRow.find('.brand-name').attr('title') !== '-' ? currentRow.find('.brand-name').attr('title') : '-'))
                        .attr('contenteditable', 'true');
                    }
                  }
                });

                var isBrandDropdown = `<select contenteditable="true" class="label-text did-branded" style="min-width:155px;">
																		<option value="1" ${objResult[i].is_branded == 1 ? 'selected' : ''}>Yes</option>
																		<option value="0" ${objResult[i].is_branded != 1 ? 'selected' : ''}>No</option>
																	</select>
																`;

                var is_number_guard = `<div class="label-text is-number-guard"><select contenteditable="true" class="label-text is-number-guard-select" style="min-width:155px;">
													<option value="1" ${objResult[i].is_number_guard == 1 ? 'selected' : ''}>Yes</option>
													<option value="0" ${objResult[i].is_number_guard != 1 ? 'selected' : ''}>No</option>
												</select></div>
											`;

                jQuery('#numberProvisioningTable').on('change', '.is-number-guard-select', function() {
                  var currentRow = jQuery(this).closest('tr');
                  var valueInCallLabel = jQuery(this).val();
                  if (valueInCallLabel == 1) {
                    /* currentRow.find('.test-plan-status').html('-').attr('contenteditable', 'false');
                    // currentRow.find('.is-number-guard').html('-').attr('contenteditable', 'false');
                    currentRow.find('.plan-select').html('-').attr('contenteditable', 'false'); */
                    currentRow.find('.plan-select').html('<select contenteditable="true" class="label-text plan-selected two" style="min-width:155px;background-color: white;">' +
                      Object.keys(planName).map(function(planId) {
                        return '<option value="' + planId + '">' + planName[planId] + '</option>';
                      }).join('') +
                      '</select>');

                    currentRow.find('.test-plan-status').html(`<select  contenteditable="true" class="label-text test-plan-status-select" style="min-width:155px;background-color: white;">
																	<option value="1">Active</option>
																	<option value="0">Inactive</option>
																	<option value="2" >Pending</option>
																	<option value="3">Ready Pool</option>
																	<option value="4">Warm Up</option>
																	<option value="5">Cool Down</option>
																</select>`);
                  } else {
                    currentRow.find('.plan-select').html('<select contenteditable="true" class="label-text plan-selected three" style="min-width:155px;background-color: white;">' +
                      Object.keys(planName).map(function(planId) {
                        return '<option value="' + planId + '">' + planName[planId] + '</option>';
                      }).join('') +
                      '</select>');

                    currentRow.find('.test-plan-status').html(`<select  contenteditable="true" class="label-text test-plan-status-select" style="min-width:155px;background-color: white;">
																	<option value="1">Active</option>
																	<option value="0">Inactive</option>
																	<option value="2" >Pending</option>
																	<option value="3">Ready Pool</option>
																	<option value="4">Warm Up</option>
																	<option value="5">Cool Down</option>
																</select>`);

                  }
                });

                jQuery('#numberProvisioningTable').on('change', '#primary-incoming-call-type, #second-incoming-call-type, #third-incoming-call-type, #fourth-incoming-call-type', function() {
                  var currentRow = jQuery(this).closest('tr');
                  var selectedValue = jQuery(this).val();
                  var elementId = jQuery(this).attr('id');
                  const isFirstRow = currentRow.is(':first-child');

                  var targetCell;
                  var ipPortSelectHtml = '';
                  var inputField; // For placeholder handling

                  if (elementId === 'primary-incoming-call-type') {
                    targetCell = isFirstRow ? currentRow.find('.prim-ip-port') : currentRow.find('.primary-ip-port');
                    ipPortSelectHtml = '<select class="ip-port" id="primary-ip-port">' +
                      '<option value="5060">5060</option>' +
                      '<option value="5061">5061</option>' +
                      '<option value="5062">5062</option>' +
                      '</select>';

                      inputField = currentRow.find('.prim-inc-call .gray-input-field');
                  } else if (elementId === 'second-incoming-call-type') {
                    targetCell = isFirstRow ? currentRow.find('.sec-ip-port') : currentRow.find('.second-ip-port');
                    ipPortSelectHtml = '<select class="ip-port" id="second-ip-port">' +
                      '<option value="5060">5060</option>' +
                      '<option value="5061">5061</option>' +
                      '<option value="5062">5062</option>' +
                      '</select>';

                      inputField = currentRow.find('.second-inc-call .gray-input-field');
                  } else if (elementId === 'third-incoming-call-type') {
                    targetCell = isFirstRow ? currentRow.find('.thir-ip-port') : currentRow.find('.third-ip-port');
                    ipPortSelectHtml = '<select class="ip-port" id="third-ip-port">' +
                      '<option value="5060">5060</option>' +
                      '<option value="5061">5061</option>' +
                      '<option value="5062">5062</option>' +
                      '</select>';

                    inputField = currentRow.find('.third-inc-call .gray-input-field');
                  } else if (elementId === 'fourth-incoming-call-type') {
                    targetCell = isFirstRow ? currentRow.find('.four-ip-port') : currentRow.find('.fourth-ip-port');
                    ipPortSelectHtml = '<select class="ip-port" id="fourth-ip-port">' +
                      '<option value="5060">5060</option>' +
                      '<option value="5061">5061</option>' +
                      '<option value="5062">5062</option>' +
                      '</select>';

                    inputField = currentRow.find('.fourth-inc-call .gray-input-field');
                  }

                  /* if (selectedValue === 'IP') {
                    targetCell.html(ipPortSelectHtml);
                  } else {
                    targetCell.html('-').attr('contenteditable', 'false');
                  } */
                  if (selectedValue === 'number') {
                      targetCell.html('-').attr('contenteditable', 'false');
                  } else {
                      targetCell.html(ipPortSelectHtml);
                  }

                  // Placeholder handling for all dropdowns
                  if (selectedValue === 'sip') {
                    inputField.attr('placeholder', 'sip:1.1.1.1');
                  } else {
                    inputField.attr('placeholder', ''); // Clear pslaceholder for other types
                  }
                });

                function generateIncomingCallTypeDropdown(value, disabled, fieldClass) {
                  if (disabled) {
                    return '<div id="' + fieldClass + '" class="label-text call-type">-</div>';
                  }

                  return '<div class="label-text call-type">' +
                    '<select id="' + fieldClass + '">' +
                    '<option value="number" ' + (value === 'number' ? 'selected' : '') + '>Route Number</option>' +
                    '<option value="IP" ' + (value === 'IP' ? 'selected' : '') + '>IP Address</option>' +
                    '</select>' +
                    '</div>';
                }

                function generateIpPortDropdown(value, disabled, fieldClass) {
                  if (disabled || value === null || value === '' || typeof value === 'undefined') {
                    return '<div contenteditable="false" class="label-text ip-port ' + fieldClass + '">-</div>';
                  }

                  return '<div class="label-text ' + fieldClass + '">' +
                    '<select class="ip-port" id="' + fieldClass + '">' +
                    '<option value="5060" ' + (value == '5060' ? 'selected' : '') + '>5060</option>' +
                    '<option value="5061" ' + (value == '5061' ? 'selected' : '') + '>5061</option>' +
                    '<option value="5062" ' + (value == '5062' ? 'selected' : '') + '>5062</option>' +
                    '</select>' +
                    '</div>';
                }

                var output = '';
                output += '<div class="telcheck-div">';
                output += '<input type="checkbox" id="number-check-' + i + '" value="' + (objResult[i].number || '-') + '" class="row-checkbox checkbox-' + (objResult[i].ID || '-') + '">';
                output += '<label for="number-check-' + i + '" class="tel-label">';
                output += '<div class="icon-box"></div>';
                output += '</label>';
                output += '<div class="label-text telephone-number" id="telephone_number-' + (objResult[i].ID || '-') + '" data-value=\'' + JSON.stringify(objResult[i]) + '\' title="' + (objResult[i].number || '-') + '">' + (objResult[i].number || '-') + '</div>';
                output += '</div>';

                var tempDataTableObj = {
                  number: output,
                  sales_order_id: '<div contenteditable="false" class="label-text">' +
                    (objResult[i].sales_order_id ? objResult[i].sales_order_id : '-') +
                    '</div>',
                  entity: entityDropdown,
                  preferred_business_name: (objResult[i].is_branded == 1) ?
                    '<div contenteditable="false" class="label-text business-name" title="' + (objResult[i].preferred_business_name ? objResult[i].preferred_business_name : "-") + '">' + (objResult[i].preferred_business_name ? objResult[i].preferred_business_name : "-") + '</div>' : '<div contenteditable="true" class="label-text business-name" title="' + (objResult[i].preferred_business_name ? objResult[i].preferred_business_name : "-") + '">' + (objResult[i].preferred_business_name ? objResult[i].preferred_business_name : "-") + '</div>',
                  number_description: '<div contenteditable="true" class="label-text number-description" id="" title="' + (objResult[i].number_description ? objResult[i].number_description : "-") + '">' + (objResult[i].number_description ? objResult[i].number_description : "-") + '</div>',
                  branded: isBrandDropdown,
                  brand_name: (objResult[i].is_branded == 0 || objResult[i].is_branded == null) ? '<div contenteditable="false" class="label-text brand-name">-</div>' : '<div contenteditable="true" class="label-text brand-name" id="" title="' + (objResult[i].brand_name ? objResult[i].brand_name : "-") + '">' + (objResult[i].brand_name ? objResult[i].brand_name : "-") + '</div>',
                  name: '<div contenteditable="true" class="label-text" title="' + (objResult[i].plan_name ? objResult[i].plan_name : "-") + '">' + (objResult[i].plan_name ? objResult[i].plan_name : "-") + '</div>',
                  is_gaurded: is_number_guard,
                  select_plan_name: (objResult[i].is_number_guard == 0 || objResult[i].is_number_guard == null) ? '<div class="label-text plan-select"><select contenteditable="true" class="label-text plan-selected four" style="min-width:155px;background-color: white;">' +
                    Object.keys(planName).map(function(planId) {
                      var isSelected = planId == objResult[i].plan_id ? 'selected' : ''; // Select if matches plan_id
                      return '<option value="' + planId + '" ' + isSelected + '>' + planName[planId] + '</option>';
                    }).join('') +
                    '</select></div>' : '<div class="label-text plan-select">-</div>',
                  test_status: (objResult[i].is_number_guard == 0 || objResult[i].is_number_guard == null) ? teststatusOptions : '<div class="label-text test-plan-status">-</div>',
                  status: statusOptions,
                  primary_incomming_call_type: generateIncomingCallTypeDropdown(objResult[i].call_type, statuses.includes(objResult[i].status), 'primary-incoming-call-type'),
                  primary_inc_call: statuses.includes(objResult[i].status) ? '<div id="prim-inc-call-' + (i + 1) + '" class="label-text incomming-call-route prim-inc-call">-</div>' : '<div contenteditable="true" id="prim-inc-call-' + (i + 1) + '" class="label-text incomming-call-route prim-inc-call" title="' + (objResult[i].incoming_call_route ? objResult[i].incoming_call_route : "-") + '">' + (objResult[i].incoming_call_route ? objResult[i].incoming_call_route : "-") + '</div>',
                  primary_ip_port: generateIpPortDropdown(objResult[i].ip_port, statuses.includes(objResult[i].status), 'primary-ip-port'),
                  primary_max_call: (statuses.includes(objResult[i].status) || objResult[i].majority_incoming_call_control == 10) ?
                    '<div id="prim-max-call-per-hour" class="label-text max-call-per-hour">-</div>' : '<div contenteditable="true" id="prim-max-call-per-hour" class="prim-max-call-per-hour max-call-per-hour label-text" title="' + (objResult[i].primary_max_call_hour ? objResult[i].primary_max_call_hour : "-") + '">' + (objResult[i].primary_max_call_hour ? objResult[i].primary_max_call_hour : "-") + '</div>',
                  primary_caller_type: statuses.includes(objResult[i].status) ?
                    '<div id="prim_caller_number_type" class="label-text caller-type">-</div>' : '<select id="prim_caller_number_type" class="caller_number_type">' + // Corrected the class attribute with closing quote
                    '<option value="A" ' + (objResult[i].caller_number_type == 'A' ? 'selected' : '') + '>ANIS</option>' +
                    '<option value="D" ' + (objResult[i].caller_number_type == 'D' ? 'selected' : '') + '>DNIS</option>' +
                    '</select>',

                  primary_getwway_id: statuses.includes(objResult[i].status) ? '<div class="label-text getway-grp-id">-</div>' : first_getway_id,
                  second_incomming_call_type: generateIncomingCallTypeDropdown(objResult[i].second_call_type, statuses.includes(objResult[i].status), 'second-incoming-call-type'),
                  second_inc_call: statuses.includes(objResult[i].status) ? '<div id="second-inc-call-' + (i + 1) + '" class="label-text incomming-call-route second-inc-call">-</div>' : '<div contenteditable="true" id="second-inc-call-' + (i + 1) + '" class="label-text incomming-call-route second-inc-call" title="' + (objResult[i].second_incoming_call_route ? objResult[i].second_incoming_call_route : "-") + '">' + (objResult[i].second_incoming_call_route ? objResult[i].second_incoming_call_route : "-") + '</div>',
                  second_ip_port: generateIpPortDropdown(objResult[i].second_ip_port, statuses.includes(objResult[i].status), 'second-ip-port'),
                  second_max_call: (statuses.includes(objResult[i].status) || objResult[i].majority_incoming_call_control == 10) ? '<div id="second-max-call-per-hour" class="label-text max-call-per-hour">-</div>' : '<div contenteditable="true" id="second-max-call-per-hour" class="label-text second-max-call-per-hour max-call-per-hour" title="' + (objResult[i].second_max_call_hour ? objResult[i].second_max_call_hour : "-") + '">' + (objResult[i].second_max_call_hour ? objResult[i].second_max_call_hour : "-") + '</div>',

                  second_caller_type: statuses.includes(objResult[i].status) ?
                    '<div id="sec_caller_number_type" class="label-text caller-type">-</div>' : '<select id="sec_caller_number_type" class="caller_number_type">' + // Corrected the class attribute with closing quote
                    '<option value="A" ' + (objResult[i].second_caller_number_type == 'A' ? 'selected' : '') + '>ANIS</option>' +
                    '<option value="D" ' + (objResult[i].second_caller_number_type == 'D' ? 'selected' : '') + '>DNIS</option>' +
                    '</select>',
                  second_getwway_id: statuses.includes(objResult[i].status) ? '<div class="label-text getway-grp-id">-</div>' : second_getway_id,
                  third_incomming_call_type: generateIncomingCallTypeDropdown(objResult[i].third_call_type, statuses.includes(objResult[i].status), 'third-incoming-call-type'),
                  third_inc_call: statuses.includes(objResult[i].status) ? '<div id="third-inc-call-' + (i + 1) + '" class="label-text incomming-call-route third-inc-call">-</div>' : '<div contenteditable="true" id="third-inc-call-' + (i + 1) + '" class="label-text incomming-call-route third-inc-call" title="' + (objResult[i].third_incoming_call_route ? objResult[i].third_incoming_call_route : "-") + '">' + (objResult[i].third_incoming_call_route ? objResult[i].third_incoming_call_route : "-") + '</div>',
                  third_ip_port: generateIpPortDropdown(objResult[i].third_ip_port, statuses.includes(objResult[i].status), 'third-ip-port'),
                  third_max_call: (statuses.includes(objResult[i].status) || objResult[i].majority_incoming_call_control == 10) ? '<div id="third-max-call-per-hour" class="label-text max-call-per-hour">-</div>' : '<div id="third-max-call-per-hour" contenteditable="true" class="label-text third-max-call-per-hour max-call-per-hour" title="' + (objResult[i].third_max_call_hour ? objResult[i].third_max_call_hour : "-") + '">' + (objResult[i].third_max_call_hour ? objResult[i].third_max_call_hour : "-") + '</div>',

                  third_caller_type: statuses.includes(objResult[i].status) ?
                    '<div id="third_caller_number_type" class="label-text caller-type">-</div>' : '<select id="third_caller_number_type" class="caller_number_type">' + // Corrected the class attribute with closing quote
                    '<option value="A" ' + (objResult[i].third_caller_number_type == 'A' ? 'selected' : '') + '>ANIS</option>' +
                    '<option value="D" ' + (objResult[i].third_caller_number_type == 'D' ? 'selected' : '') + '>DNIS</option>' +
                    '</select>',
                  third_getwway_id: statuses.includes(objResult[i].status) ? '<div class="label-text getway-grp-id">-</div>' : third_getway_id,
                  fourth_incomming_call_type: generateIncomingCallTypeDropdown(objResult[i].fourth_call_type, statuses.includes(objResult[i].status), 'fourth-incoming-call-type'),
                  fourth_inc_call: statuses.includes(objResult[i].status) ? '<div id="fourth-inc-call-' + (i + 1) + '" class="label-text incomming-call-route fourth-inc-call">-</div>' : '<div contenteditable="true" id="fourth-inc-call-' + (i + 1) + '" class="label-text incomming-call-route fourth-inc-call" title="' + (objResult[i].fourth_incoming_call_route ? objResult[i].fourth_incoming_call_route : "-") + '">' + (objResult[i].fourth_incoming_call_route ? objResult[i].fourth_incoming_call_route : "-") + '</div>',
                  fourth_ip_port: generateIpPortDropdown(objResult[i].fourth_ip_port, statuses.includes(objResult[i].status), 'fourth-ip-port'),
                  fourth_max_call: (statuses.includes(objResult[i].status) || objResult[i].majority_incoming_call_control == 10) ? '<div id="fourth-max-call-per-hour" class="label-text max-call-per-hour">-</div>' : '<div contenteditable="true" id="fourth-max-call-per-hour" class="label-text fourth-max-call-per-hour max-call-per-hour" title="' + (objResult[i].fourth_max_call_hour ? objResult[i].fourth_max_call_hour : "-") + '">' + (objResult[i].fourth_max_call_hour ? objResult[i].fourth_max_call_hour : "-") + '</div>',

                  fourth_caller_type: statuses.includes(objResult[i].status) ?
                    '<div id="fourth_caller_number_type" class="label-text caller-type">-</div>' : '<select id="fourth_caller_number_type" class="caller_number_type">' + // Corrected the class attribute with closing quote
                    '<option value="A" ' + (objResult[i].fourth_caller_number_type == 'A' ? 'selected' : '') + '>ANIS</option>' +
                    '<option value="D" ' + (objResult[i].fourth_caller_number_type == 'D' ? 'selected' : '') + '>DNIS</option>' +
                    '</select>',
                  fourth_getwway_id: statuses.includes(objResult[i].status) ? '<div class="label-text getway-grp-id">-</div>' : fourth_getway_id,
                };
                tempDataTableArr.push(tempDataTableObj);
              }
              callback({
                data: tempDataTableArr,
                recordsTotal: response.totalElements,
                recordsFiltered: response.totalElements
              });
              jQuery('.dataTables_paginate').show();
              jQuery('#numberProvisioningTable_info').show();
              jQuery('.obn-entity-select').select2({
                placeholder: "Select Entity",
                allowClear: true,
                multiple: true,
              });
            } else {
              jQuery("#numberProvisioningTable tbody").html("<tr><td></td><td>No Records Found.</td><td></td></tr>");
              jQuery('.dataTables_paginate').hide();
              jQuery('#numberProvisioningTable_info').hide();
              jQuery('.total-added-number').html('0');
              jQuery("#numberProvisioningTable_processing").hide();
            }
            jQuery('#my-active-status').val(controlValue);
            jQuery("#loaderModal").hide();
            jQuery("#numberProvisioningTable_processing").hide();
          },
          error: function(jqXhr, textStatus, errorThrown) {
            // jQuery("#loaderModal").hide();

            var errorMessage = 'An error occurred while fetching data: ' + (errorThrown || textStatus);
            $('.simple-error-modal-msg-text').text(errorMessage);

            $('.simple-error-modal').show();
          }
        });
      },
      'columns': [{
          data: 'number'
        },
        {
          data: 'sales_order_id'
        },
        {
          data: 'entity'
        },
        {
          data: 'preferred_business_name'
        },
        {
          data: 'number_description'
        },
        {
          data: 'branded'
        },
        {
          data: 'brand_name'
        },
        // { data: 'call_labeling' },
        {
          data: 'is_gaurded'
        },
        {
          data: 'select_plan_name'
        },
        {
          data: 'test_status'
        },
        {
          data: 'status'
        },
        {
          data: 'primary_incomming_call_type'
        },
        {
          data: 'primary_inc_call'
        },
        {
          data: 'primary_ip_port'
        },
        {
          data: 'primary_max_call'
        },
        {
          data: 'primary_caller_type'
        },
        {
          data: 'primary_getwway_id'
        },
        {
          data: 'second_incomming_call_type'
        },
        {
          data: 'second_inc_call'
        },
        {
          data: 'second_ip_port'
        },
        {
          data: 'second_max_call'
        },
        {
          data: 'second_caller_type'
        },
        {
          data: 'second_getwway_id'
        },
        {
          data: 'third_incomming_call_type'
        },
        {
          data: 'third_inc_call'
        },
        {
          data: 'third_ip_port'
        },
        {
          data: 'third_max_call'
        },
        {
          data: 'third_caller_type'
        },
        {
          data: 'third_getwway_id'
        },
        {
          data: 'fourth_incomming_call_type'
        },
        {
          data: 'fourth_inc_call'
        },
        {
          data: 'fourth_ip_port'
        },
        {
          data: 'fourth_max_call'
        },
        {
          data: 'fourth_caller_type'
        },
        {
          data: 'fourth_getwway_id'
        }
        // { data: 'inc_call_cntrl' }
      ],
      "drawCallback": function(settings) {
        var numberProvisioningTable = jQuery('#numberProvisioningTable').DataTable();
        jQuery("#numberProvisioningTable_processing").hide();

      }
    });
  }

  function validateField(element, value) {
    const $element = jQuery(element);
    const $row = $element.closest('tr');
    const isFirstRow = $row.is(':first-child');
    const didStatus = $row.find('.did-status').val();
    var $errorMessage = jQuery(element).next('.error-message');
    jQuery(element).css({
      color: '#34548a'
    });
    jQuery('.bulk-edit').prop('disabled', false);
    $errorMessage.remove();

    const firstThreeDigits = value.substring(0, 3);
    const firstSixDigits = value.substring(0, 6);

    if (didStatus === '21') {
      // Validate first 3 digits (NPA)
      if (
        (npaNxxData['NPA_381'] &&
          npaNxxData['NPA_381'].includes(firstThreeDigits)) ||
        firstThreeDigits < 200
      ) {
        jQuery('.bulk-edit').prop('disabled', true);
        $element.css({
          color: 'red'
        });

        if (isFirstRow) {
          jQuery('#replicateButton').addClass('disabled');
        }

        if (jQuery(element).next('.error-message').length === 0) {
          $element.after(
            '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
          );
        }
      } else {
        jQuery('.bulk-edit').prop('disabled', false);
        $element.css({
          color: '#34548a'
        });

        if (isFirstRow) {
          jQuery('#replicateButton').removeClass('disabled');
        }
      }

      // Validate first 6 digits (NPA-NXX)
      const npaNxxArray = npaNxxData['NPA_NXX_7885'];
      let errorFound = false;

      for (let i = 0; i < npaNxxArray.length; i++) {
        const storedValue = npaNxxArray[i].replace(/-/g, ''); // Remove any dashes
        if (firstSixDigits === storedValue) {
          jQuery('.bulk-edit').prop('disabled', true);
          $element.css({
            color: 'red'
          });

          if (isFirstRow) {
            jQuery('#replicateButton').addClass('disabled');
          }

          if (jQuery(element).next('.error-message').length === 0) {
            $element.after(
              '<div class="error-message" style="color:red;">NPA-NXX is invalid!</div>'
            );
          }
          errorFound = true;
          break;
        }
      }

      // If no error found in NPA-NXX, check for High Cost NPA-NXX
      if (!errorFound) {
        if (highCostNpaNxx && highCostNpaNxx.includes(firstSixDigits)) {
          $element.css({
            color: '#1700ff'
          });

          if (jQuery(element).next('.error-message').length === 0) {
            $element.after(
              '<div class="error-message" style="color:blue;">High Cost NPA-NXX!</div>'
            );
          }
        } else {
          console.log('Number passed high cost check too');
        }
      }
    } else {
      // Reset button and element styles
      if (isFirstRow) {
        jQuery('#replicateButton').removeClass('disabled');
      }
      $element.css({
        color: '#34548a'
      });
      jQuery('.bulk-edit').prop('disabled', false);

      // Remove any existing error message
      jQuery(element).next('.error-message').remove();
    }
  }

  function getNumbershieldUsers() {
    $.ajax({
      url: baseURL + "getNumbershieldUsers",
      type: 'GET',
      success: function(response) {
        // Clear existing options
        $('#userSelect').empty();

        // Add default option
        $('#userSelect').append(
          '<option value="" selected>Select Customer</option>'
        );

        // Populate options from response
        $.each(response.data, function(index, user) {
          $('#userSelect').append(
            '<option value="' + user.user_id + '">' +
            user.businessName + ' - ' + user.user_login + ' (' + user.user_email + ')' +
            '</option>'
          );
        });
      },
      error: function(xhr, status, error) {
        console.error('Error fetching users:', error);
      }
    });
  }

  function getAllNpaNxx() {
    jQuery.ajax({
      url: baseURL + 'getAllNpaNxxadmin',
      type: 'POST',
      success: function(response, textStatus, jQxhr) {
        if (response.success && response.code === 200) {
          npaNxxData = response.data;
          highCostNpaNxx = response.highCostNpaNxx;
        } else {
          jQuery('.simple-error-modal-msg-text').text(response.msg);
          jQuery('.error-modal').show();
        }
      },
      error: function(jqXhr, textStatus, errorThrown) {
        // console.error('AJAX Error:', textStatus, errorThrown);
        console.log('Response Text:', jqXhr.responseText);
      },
    });
  }

  function getRowData($row) {
    const getVal = (selector) => $row.find(selector).length ? $row.find(selector).val() : null;
    const getText = (selector) => $row.find(selector).length ? $row.find(selector).text().trim() : null;

    return {
      entities: getVal('.obn-entity-select'),
      preferred_business_name: getText('.business-name'),
      number_description: getText('.number-description'),
      is_branded: getVal('.did-branded'),
      brand_name: getText('.brand-name'),
      is_number_guard: getVal('.is-number-guard-select'),
      plan_id: getVal('.plan-selected'),
      test_plan_status: getVal('.test-plan-status-select') || getVal('.test-plan-status'),
      status: getVal('.did-status'),

      // Primary Incoming Call
      call_type: getVal('#primary-incoming-call-type'),
      incoming_call_route: getText('.prim-inc-call'),
      ip_port: getVal('#primary-ip-port'),
      primary_max_call_hour: getText('#prim-max-call-per-hour'),
      caller_number_type: getVal('#prim_caller_number_type'),
      getway_grp_id: getVal('.primary-getway-id'),

      // Second Incoming Call
      second_call_type: getVal('#second-incoming-call-type'),
      second_incoming_call_route: getText('.second-inc-call'),
      second_ip_port: getVal('#second-ip-port'),
      second_max_call_hour: getText('#second-max-call-per-hour'),
      second_caller_number_type: getVal('#sec_caller_number_type'),
      second_getway_grp_id: getVal('.second-getway-id'),

      // Third Incoming Call
      third_call_type: getVal('#third-incoming-call-type'),
      third_incoming_call_route: getText('.third-inc-call'),
      third_ip_port: getVal('#third-ip-port'),
      third_max_call_hour: getText('#third-max-call-per-hour'),
      third_caller_number_type: getVal('#third_caller_number_type'),
      third_getway_grp_id: getVal('.third-getway-id'),

      // Fourth Incoming Call
      fourth_call_type: getVal('#fourth-incoming-call-type'),
      fourth_incoming_call_route: getText('.fourth-inc-call'),
      fourth_ip_port: getVal('#fourth-ip-port'),
      fourth_max_call_hour: getText('#fourth-max-call-per-hour'),
      fourth_caller_number_type: getVal('#fourth_caller_number_type'),
      fourth_getway_grp_id: getVal('.fourth-getway-id')
    };
  }

  function checkForBulkDIDUpdateResponse(id) {
    jQuery.ajax({
      url: baseURL + 'checkForBulkDIDUpdateResponseWeb',
      type: 'GET',
      dataType: 'json',
      data: {
        id: id
      },
      success: function(response, textStatus, jQxhr) {

        if (response.status_code != null && response.cname_response_code != null) {
          if (
            response.status_code == 200 &&
            response.switch_code == 200 &&
            response.cname_response_code != 207
          ) {
            var msg = response.message;
            jQuery('#loaderModal1').hide();
            jQuery('.simple-success-modal').show();
            jQuery('.simple-success-modal .msg-text').html(msg);
            changedNumbersData = {};
            jQuery('.simple-success-modal-close, .close-btn').addClass('new-close-trigger');
            jQuery(document).on('click', '.new-close-trigger', function() {
              jQuery('.simple-success-modal').hide();
              jQuery('.simple-success-modal-close, .close-btn').removeClass('new-close-trigger');
              var userId = $('#userSelect').val();
              if (userId) {
                currentUserId = userId;
                var ProvisioningTableObj = jQuery('#numberProvisioningTable').DataTable();
                ProvisioningTableObj.ajax.reload(); // false to prevent resetting paging
              } else {
                alert('Please select a user.');
              }
            });
            jQuery('.icon_close.simple-success-modal-close').css(
              'display',
              'block'
            );
          } else if (response.cname_response_code == 207) {
            jQuery('#loaderModal1').hide();
            var msg =
              response.failedNumber +
              ' This Numbers are Failed to update cname, Check with care team';
            jQuery('#loaderModal1').css('display', 'none');
            jQuery('.error-modal').show();
            jQuery('.error-modal .msg-text').html(msg);
            jQuery('body').on(
              'click',
              '.error-modal-close, #closeSimpleErrorModal',
              function() {
                //	jQuery('#snackbar').css('display','none');
                //jQuery("#loaderModal1").show();
                jQuery('.error-modal').hide();
                //	jQuery("#loaderModal1").hide_columns_arr();
              }
            );
          } else if (response.status_code == 200 && response.switch_code != 200) {
            var msg =
              'We have encountered an Error while updating the DID(s) on the Switch. Please connect with the Number Sentry Care Team.';
            jQuery('#loaderModal1').hide();
            jQuery('.error-modal').show();
            jQuery('.error-modal .msg-text').html(msg);
            jQuery('body').on(
              'click',
              '.error-modal-close, #closeSimpleErrorModal',
              function() {
                //	jQuery('#snackbar').css('display','none');
                //jQuery("#loaderModal1").show();
                jQuery('.error-modal').hide();
                //	jQuery("#loaderModal1").hide_columns_arr();
              }
            );
          } else if (response.status_code == 500) {
            jQuery('#loaderModal1').hide();
            jQuery('.error-modal').show();
            jQuery('.error-modal .msg-text').html(
              'something went wrong! Connect With Dev Team.'
            );
            jQuery('body').on(
              'click',
              '.error-modal-close, #closeSimpleErrorModal',
              function() {
                //	jQuery('#snackbar').css('display','none');
                //jQuery("#loaderModal1").show();
                jQuery('.error-modal').hide();
                //	jQuery("#loaderModal1").hide_columns_arr();
              }
            );
          }
        } else {
          // Only proceed if id is not null, undefined, 0, or empty
          setTimeout(() => {
            checkForBulkDIDUpdateResponse(id);
          }, 10000);
        }
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.error(
          'Error occurred during the AJAX request:',
          textStatus,
          errorThrown
        );
      },
    });
  }
</script>
@endsection