@extends('layouts.app')

@section('content')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.css">
<style>
  * {
    font-family: "Montserrat", sans-serif;
  }

  body {
    overflow-x: hidden;
  }

  .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;
  }

  .inventory-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: 100px !important;
    font-family: "Montserrat";
  }

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

  table.dataTable tbody td:first-child {
    width: 131px !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: 15.5px;
    width: 15.5px;
    position: absolute;
    top: 19px;
  }

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

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

  #NS-inventory-table_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_filter input[type="search"] {
    padding: 8px 40px 8px 20px !important;
    width: 100%;
  }

  .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;
  }

  .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;
  }

  .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;
  }

  #inventory-form,
  #add-inventory-form {
    padding: 0 5%;
  }

  #view-inventory-data,
  #add-inventory-data {
    display: none;
  }

  .main-div-1,
  .main-div-2,
  .main-div-3,
  .main-div-4,
  .main-div-5 {
    height: 240px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #e0dada;
    border-radius: 5px;
    margin-bottom: 3%;
  }

  .main-div-4 {
    height: 345px;
  }

  .heading {
    text-align: left;
    color: #34548A;
    font-size: 16px !important;
    font-weight: 600;
  }

  .first-div,
  .second-div,
  .third-div,
  .fourth-div,
  .fifth-div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    text-align: left;
    row-gap: 17%;
  }

  .second-div,
  .first-div {
    row-gap: 25%;
  }

  .fourth-div {
    grid-template-rows: 1fr 1fr 1fr;
  }

  .edit-inventory-label,
  .add-inventory-label,
  .testing-label {
    color: #898989;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0.2rem !important;
  }

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

  #inventory-form input[type="text"],
  #add-inventory-form input[type="text"] {
    padding: 6px 20px 6px 6px !important;
    font-size: 14px !important;
    color: #4e4e4e;
    width: 90%;
    font-family: "Montserrat", sans-serif;
  }

  .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;
  }

  #addNewTestingResult input[type="text"] {
    padding: 7px !important;
    font-size: 15px !important;
    width: 100%;
    color: #4e4e4e;
  }

  #addNewTestingResult {
    width: 30%;
    display: none;
  }

  #addNewTetsingResultForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .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: #4e4e4e;
    width: 90%;
    /* font-family: "Montserrat", sans-serif; */
    border-radius: 4px;
    height: 31px;
    outline: none !important;
  }

  #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;
  }

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

  .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: -25px;
    left: 0;
  }

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

  .input-container {
    position: relative;
  }

  .inventory-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: 9px 40px 9px 20px !important;
    letter-spacing: normal;
    border: 1px solid rgba(0, 0, 0, 0.2) !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;
  }

  .view-testing-result:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  #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;
  }

  .testing-close {
    margin-top: 25px;
    font-size: 14.5px;
  }

  .testing-submit-btn {
    font-size: 14.5px;
    width: 35%;
    margin-left: 51%;
    margin-top: 10px;
  }

  .testing-add {
    position: absolute;
    top: 44px;
    right: 39px;
    font-size: 14.5px;
  }

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

  .testing-result-table {
    width: 100%;
  }

  input.cname-input[type=text],
  input.screenshot-input[type=text] {
    width: 85% !important;
    padding: 5px !important;
    font-size: 0.9rem !important;
  }

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

  .testing-result-table {
    font-family: "Montserrat";
  }

  .testing-result-btn-div {
    position: relative;
  }

  .testing-input-div {
    display: flex;
    align-items: baseline;
    flex-direction: column;
    margin: 0px auto;
    width: 75%;
    position: relative;
  }

  .testing-result-div {
    max-height: 500px;
    overflow-y: auto;
  }

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

  .testing-result-div::-webkit-scrollbar-track,
  .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 */
  .inventory-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #34548A;
    border-right: 2px solid white !important;
  }

  .inventory-table tbody tr:nth-child(odd) td:first-child,
  .inventory-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;
  }

  .inventory-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;
  }
</style>
<div>
  <div>
    <h2 class="main-heading">Telephone Number Inventory</h2>
  </div>

  <div class="margin-top-bottom pagetextlabel">
    <div class="numbertype-submenu" id="numbertype">
      <ul class="navbar-nav ml-auto role-permission-list">
        <li class="nav-item dropdown menu-item-selected">
          <a class="menu-item" href="active">
            <span>Active Numbers</span>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="menu-item " href="history">
            <span>History</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="manage-NS-inventory-page">
    <div class="filter_data outbound-numbers-select-action">
      <div class="action_on_numbers">
        <select name="do_action" id="bulk-action-select" autocomplete="off" class="action-on-number">
          <option value="action" selected>Bulk Actions</option>
          <option value="export-selected-numbers">
            Export Selected Number(s) Detail
          </option>
          <option value="release">
            Release Selected Number(s)
          </option>
          <option value="disconnect">
            Disconnect Selected Number(s)
          </option>
          <!-- <option value="delete-selected-Numbers">
            Delete Selected Numbers
          </option> -->
        </select>
        <div class="bulk-action-apply-button">
          <button id="go-bulk-apply-button" class="go-bulk-apply-button" disabled>
            Apply
          </button>
        </div>
        <!-- Detail Icon (Initially hidden) -->
        <span id="detail-icon" class="description-icon" title="View Details">
          <i class="fas fa-info-circle"></i>
        </span>
      </div>
      <div class="inventory-button">
        <button class="filter-icon filter"> Filter <i class="far fa-filter"></i></button>
        <button class="export-icon export-inventory-data export-all-btn"><span>Export All<i class="far fa-file-export" style="margin-left: 7%;"></i></span></button>
        <div class="dropdown">
          <button class="addnew-icon actions">Actions <i class="fas fa-chevron-down"></i></button>
          <div class="dropdown-content">
            <a href="#" class="dropdown-item" data-action="add-number">Add Number</a>
            <a href="#" class="dropdown-item" data-action="bulk-add-number">Bulk Add Number(s)</a>
            <a href="#" class="dropdown-item" data-action="bulk-edit-number">Bulk Edit Number(s)</a>
          </div>
        </div>
      </div>
    </div>
    <div id="NS-inventory-table_filter" class="dataTables_filter icon-addon" style="position: relative;">
      <label class="contact-no-detail-label">
        <form autocomplete="off">
          <span class="search-input">
            <input type="search" class="ns_inverntry_search" id="ns_inverntry_search" placeholder="Search" aria-controls="NS-inventory-table" autocomplete="off" />
            <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search"></i>
            <i class="fas spin-icon fa-spinner fa-pulse"></i>
          </span>
        </form>
      </label>
    </div>
  </div>
  <div class="inventory-table-div">
    <div id="NS-inventory-table_processing" class="dataTables_processing" style="display: none;">Loading...</div>
    <div class="container NS-inventory-table-container dataTables_scrollBody">
      <table id="NS-inventory-table" class="inventory-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">Telephone Number</span>
                    <span id="display-numbers-count"></span>
                  </div>
                </label>
              </div>
            </th>
            <th>Inventory Status</th>
            <th>Account Number</th>
            <th>Customer Name</th>
            <th>Billing Status</th>
            <th>Inventory Type</th>
            <th>Provider</th>
            <th>City</th>
            <th>State</th>
            <th>LATA</th>
            <th>Rate Center</th>
            <th>Trunk Group</th>
            <th>Carrier Requested CNAME</th>
            <th>Description</th>
            <th>Testing Result</th>
            <th id='action_column'>Action</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>
  <div class="view-data" id="view-inventory-data">
    <div class="main-div-btns">
      <div class="heading-div">
        <p class="heading-para"><i class="fa fa-arrow-left" aria-hidden="true"></i> View Inventory</p>
      </div>
      <div class="btns-sub-div">
        <!-- <span><i class="fa fa-trash delete-data delete-action delete-icon" aria-hidden="true"></i></span> -->
        <button class="export-btn"><span>Export <i class="far fa-file-export" style="margin-left: 7%;"></i></span></button>
        <button class="edit-btn"><span>Edit <i class="fas fa-edit edit-icon"></i></span></button>
      </div>
      <button class="edit-save-btn"><span>Save</i></span></button>
      <div class="add-save-bulk-btn">
        <!-- <button class="add-bulk-btn"><span>Add Numbers In Bulk</i></span></button> -->
        <button class="add-save-btn"><span>Save</i></span></button>
      </div>
    </div>
    <!-- Form starts here -->
    <form action="" id="inventory-form">
      <!-------------Basic Information Section-------------->
      <div class="main-div-1">
        <div class="heading">
          <p>Basic Information</p>
        </div>
        <div class="first-div">
          <div class="input-container">
            <div>
              <label for="telephone-number" class="edit-inventory-label required-label">Telephone Number</label><br>
              <input type="text" id="telephone_number" name="telephoneNumber" class="edit-mode edit-telephone-number" maxlength="10" value="" placeholder="Enter Telephone Number" required readonly="readonly">
              <span class="display-value display-telephone-number"></span>
              <span id="tel-error-message" style="color: red; display: none;">Please enter at least 10 digits.</span>
            </div>
          </div>
          <div>
            <label for="customer_name" class="edit-inventory-label">Customer Name</label><br>
            <input type="text" id="customer_name" name="customer" class="edit-mode edit-customer" value="" placeholder="Enter Customer Name">
            <div id="customer-suggestions" class="suggestions-container"></div>
            <span class="display-value display-customer"></span>
          </div>
          <div>
            <label for="account-number" class="edit-inventory-label">Account Number</label><br>
            <input type="text" id="account-number" name="accountNumber" class="edit-mode edit-account-number" value="" placeholder="Enter Account Number">
            <div id="account-number-suggestions" class="suggestions-container"></div>
            <span class="display-value display-account-number"></span>
          </div>
          <div>
            <label for="order-id" class="edit-inventory-label">Order ID</label><br>
            <input type="text" id="order-id" name="orderDetailsId" class="edit-mode edit-order-id" value="" placeholder="Enter Order ID">
            <span class="display-value display-order-id"></span>
          </div>
          <div>
            <label for="revio-id" class="edit-inventory-label">Revio ID</label><br>
            <input type="text" id="revio-id" name="revioId" class="edit-mode edit-revio-id" value="" placeholder="Enter Revio ID">
            <span class="display-value display-revio-id"></span>
          </div>
          <div>
            <label for="memberpress-id" class="edit-inventory-label">Memberpress ID</label><br>
            <input type="text" id="memberpress-id" name="memberPressID" class="edit-mode edit-memberpress-id" value="" placeholder="Enter Memberpress ID">
            <span class="display-value display-memberpress-id"></span>
          </div>
          <div>
            <label for="zoho-id" class="edit-inventory-label">Zoho ID</label><br>
            <input type="text" id="zoho-id" name="zohoId" class="edit-mode edit-zoho-id" value="" placeholder="Enter Zoho ID">
            <span class="display-value display-zoho-id"></span>
          </div>
          <div>
            <label for="zoho-order-no" class="edit-inventory-label">Zoho Order Number</label><br>
            <input type="text" id="zoho-order-no" name="zohoOrderNumber" class="edit-mode edit-zoho-order-no" value="" placeholder="Enter Zoho Order Number">
            <div id="zohoOrderNumber-suggestions" class="suggestions-container"></div>
            <span class="display-value display-zoho-order-no"></span>
          </div>
        </div>
      </div>
      <!-- Billing & Carrier Section -->
      <div class="main-div-2">
        <div class="heading">
          <p>Billing And Carrier</p>
        </div>
        <div class="second-div">
          <div>
            <label for="bill-profile-id" class="edit-inventory-label">Bill Profile ID</label><br>
            <input type="text" id="bill-profile-id" name="billProfileId" class="edit-mode edit-bill-profile-id" value="" placeholder="Enter Bill Profile ID">
            <span class="display-value display-bill-profile-id"></span>
          </div>
          <div class="input-container">
            <label for="billing-status" class="edit-inventory-label required-label">Billing Status</label><br>
            <select id="billing-status" name="billingStatus" class="edit-mode edit-billing-status" required>
              <option value="" selected>Select</option>
              <option value="ASSIGNED">ASSIGNED</option>
              <option value="UNAVAILABLE">UNAVAILABLE</option>
              <option value="AVAILABLE">AVAILABLE</option>
            </select>
            <span class="display-value display-billing-status"></span>
          </div>
          <div>
            <label for="carrier-reference-number" class="edit-inventory-label">Carrier Reference Number</label><br>
            <input type="text" id="carrier-reference-number" name="carrierReferenceNumber" class="edit-mode edit-carrier-reference-number" placeholder="Enter Carrier Reference Number" value="">
            <span class="display-value display-carrier-reference-number"></span>
          </div>
          <div class="input-container">
            <div>
              <label for="provider" class="edit-inventory-label required-label">Provider</label><br>
              <select id="provider_name" name="" class="edit-mode edit-provider" required>
                <option value="" selected>Select</option>
                <option value="PEERLESS">PEERLESS</option>
                <option value="SINCH">SINCH</option>
              </select>
              <span class="display-value display-provider"></span>
            </div>
          </div>
          <div class="input-container">
            <div>
              <label for="inventory-type" class="edit-inventory-label required-label">Inventory Type</label><br>
              <select id="inventory_type" name="inventoryType" class="edit-mode edit-inventory-type" required>
                <option value="" selected>Select</option>
                <option value="DID">DID</option>
                <option value="TFN">TFN</option>
              </select>
              <span class="display-value display-inventory-type"></span>
            </div>
          </div>
          <div class="input-container">
            <div>
              <label for="inventory-status" class="edit-inventory-label required-label">Inventory Status</label><br>
              <select id="inventory_status" name="telephoneInventoryStatus" class="edit-mode edit-inventory-status" required>
                <option value="" selected>Select</option>
                <option value="ASSIGNED">ASSIGNED</option>
                <option value="RESERVED">RESERVED</option>
                <option value="RETURNED">RETURNED</option>
                <option value="ALLOCATED">ALLOCATED</option>
                <option value="PROVISIONED">PROVISIONED</option>
                <option value="NOT_AVAILABLE">NOT AVAILABLE</option>
                <option value="AVAILABLE">AVAILABLE</option>
              </select>
              <span class="display-value display-inventory-status"></span>
            </div>
          </div>
          <div>
            <label for="allocation-start-date" class="edit-inventory-label">Allocation Start Date</label><br>
            <input type="text" id="allocation-start-date" name="allocationStartDate" class="datepicker edit-mode edit-allocation-start-date datepickerStart" value="" placeholder="Select Date">
            <span class="display-value display-allocation-start-date"></span>
          </div>
          <div>
            <label for="allocation-end-date" class="edit-inventory-label">Allocation End Date</label><br>
            <input type="text" id="allocation-end-date" name="allocationEndDate" class="datepicker edit-mode edit-allocation-end-date datepickerEnd" value="" placeholder="Select Date">
            <span class="display-value display-allocation-end-date"></span>
          </div>
        </div>

      </div>
      <!-- Location Details -->
      <div class="main-div-3">
        <div class="heading">
          <p>Location Details</p>
        </div>
        <div class="third-div">
          <div class="input-container">
            <div>
              <label for="city" class="edit-inventory-label">City</label><br>
              <input type="text" id="city" name="city" class="edit-mode edit-city" value="" placeholder="Enter City">
              <span class="display-value display-city"></span>
            </div>
          </div>
          <div class="input-container">
            <div>
              <label for="state" class="edit-inventory-label">State/Province</label><br>
              <select id="state_name" name="state" class="edit-mode edit-state">
                <option value="">Please select state</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
              </select>
              <span class="display-value display-state"></span>
            </div>
          </div>
          <div>
            <label for="lata" class="edit-inventory-label">LATA (Local Access And Transport Area)</label><br>
            <input type="text" id="lata_name" name="lata" class="edit-mode edit-lata" value="" placeholder="Enter LATA">
            <div id="lata-suggestions" class="suggestions-container"></div>
            <span class="display-value display-lata"></span>
          </div>
          <div>
            <label for="rate-center" class="edit-inventory-label">Rate Center</label><br>
            <input type="text" id="rate-center" name="rateCenter" class="edit-mode edit-rate-center" value="" placeholder="Enter Rate Center">
            <div id="rate-center-suggestions" class="suggestions-container"></div>
            <span class="display-value display-rate-center"></span>
          </div>
        </div>

      </div>
      <!-- Telecom Services -->
      <div class="main-div-4">
        <div class="heading">
          <p>Telecom Services</p>
        </div>
        <div class="fourth-div">
          <div>
            <label for="routing-option" class="edit-inventory-label">Routing Option</label><br>
            <input type="text" id="routing-option" name="routingOption" class="edit-mode edit-routing-option" value="" placeholder="Enter Routing Option">
            <span class="display-value display-routing-option"></span>
          </div>
          <div>
            <label for="trunk-group" class="edit-inventory-label">Trunk Group</label><br>
            <input type="text" id="trunk-group" name="trunkGroup" class="edit-mode edit-trunk-group" value="" placeholder="Enter Trunk Group">
            <span class="display-value display-trunk-group"></span>
          </div>
          <div>
            <label for="toll-free-dins" class="edit-inventory-label">Toll Free DNIS</label><br>
            <input type="text" id="toll-free-dins" name="tollFreeDnis" class="edit-mode edit-toll-free-dnis" value="" placeholder="Enter Toll Free DNIS">
            <span class="display-value display-toll-free-dnis"></span>
          </div>
          <div>
            <label for="toll-free-resp-org-cic" class="edit-inventory-label">Toll Free Resp Org CIC</label><br>
            <input type="text" id="toll-free-resp-org-cic" name="tollFreeRespOrgCic" class="edit-mode edit-toll-free-resp-org-cic" value="" placeholder="Enter Toll Free Resp Org CIC">
            <span class="display-value display-toll-free-resp-org-cic"></span>
          </div>
          <div>
            <label for="resp-org-prefix" class="edit-inventory-label">Resp Org Prefix</label><br>
            <input type="text" id="resp-org-prefix" name="respOrgPrefix" class="edit-mode edit-resp-org-prefix" value="" placeholder="Enter Resp Org Prefix">
            <span class="display-value display-resp-org-prefix"></span>
          </div>
          <div class="input-container">
            <label for="cname_dip" class="edit-inventory-label required-label">CNAME Dip</label><br>
            <select id="cname_dip" name="cnameDip" class="edit-mode edit-cname-dip" required>
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-cname-dip"></span>
          </div>
          <div>
            <label for="resp-org-name" class="edit-inventory-label">Resp Org Name</label><br>
            <input type="text" id="resp-org-name" name="respOrgName" class="edit-mode edit-resp-org-name" placeholder="Enter Resp Org Name" value="">
            <span class="display-value display-resp-org-name"></span>
          </div>
          <div>
            <label for="cname-allowed" class="edit-inventory-label">CNAME Allowed</label><br>
            <select id="cname-allowed" name="cnamAllowed" class="edit-mode edit-cname-allowed">
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-cname-allowed"></span>
          </div>
          <div>
            <label for="e911-allowed" class="edit-inventory-label">E911 Allowed</label><br>
            <select id="e911-allowed" name="e911Allowed" class="edit-mode edit-e911-allowed">
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-e911-allowed"></span>
          </div>
          <div class="input-container">
            <label for="carrier_requested_cname" class="edit-inventory-label">Carrier Requested CNAME</label><br>
            <input type="text" id="carrier_requested_cname" name="carrierRequestedCname" class="edit-mode edit-carrier-requested-cname" placeholder="Enter Carrier Requested CNAME" value="">
            <span class="display-value display-carrier-requested-cname"></span>
          </div>
        </div>
      </div>
      <!-- Additional Information -->
      <div class="main-div-5">
        <div class="heading">
          <p>Additional Information</p>
        </div>
        <div class="fifth-div">
          <div>
            <label for="unavailable-reason" class="edit-inventory-label">Unavailable Reason</label><br>
            <input type="text" id="unavailable-reason" name="unavailableReason" class="edit-mode edit-unavailable-reason" value="" placeholder="Enter Unavailable Reason">
            <span class="display-value display-unavailable-reason"></span>
          </div>
          <div>
            <label for="port-out-pin-supported" class="edit-inventory-label">Port Out Pin Supported</label><br>
            <select id="port-out-pin-supported" name="portOutPinSupported" class="edit-mode edit-port-out-pin-supported">
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-port-out-pin-supported"></span>
          </div>
          <div>
            <label for="port-out-notification" class="edit-inventory-label">Port Out Notification</label><br>
            <select id="port-out-notification" name="portoutNotification" class="edit-mode edit-port-out-notification">
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-port-out-notification"></span>
          </div>
          <div>
            <label for="reserved" class="edit-inventory-label">Reserved</label><br>
            <select id="reserved" name="reserved" class="edit-mode edit-reserved">
              <option value="" selected>Select</option>
              <option value="1">True</option>
              <option value="0">False</option>
            </select>
            <span class="display-value display-reserved"></span>
          </div>
          <div>
            <label for="port-out-notification-supported" class="edit-inventory-label">Port Out Notification Supported</label><br>
            <select id="port-out-notification-supported" name="portOutNotificationSupported" class="edit-mode edit-port-out-notification-supported">
              <option value="" selected>Select</option>
              <option value="Y">Yes</option>
              <option value="N">No</option>
            </select>
            <span class="display-value display-port-out-notification-supported"></span>
          </div>
          <div>
            <label for="is-ported" class="edit-inventory-label">Is Ported</label><br>
            <select id="is-ported" name="isPorted" class="edit-mode edit-is-ported">
              <option value="" selected>Select</option>
              <option value="1">True</option>
              <option value="0">False</option>
            </select>
            <span class="display-value display-is-ported"></span>
          </div>
          <div>
            <label for="is-hot-number" class="edit-inventory-label">Is Hot Number</label><br>
            <select id="is-hot-number" name="isHotNumber" class="edit-mode edit-is-hot-number">
              <option value="" selected>Select</option>
              <option value="1">True</option>
              <option value="0">False</option>
            </select>
            <span class="display-value display-is-hot-number"></span>
          </div>
          <div>
            <label for="description" class="edit-inventory-label">Description</label><br>
            <textarea id="description" name="description" class="edit-mode edit-description" placeholder="Enter your description here..."></textarea>
            <span class="display-value display-description"></span>
          </div>
        </div>
      </div>
    </form>
    <!-- Form End Here -->
  </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="inventoryDropdown" 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="telephone_inventory_status"> Inventory Status</label>
          <div class="filter-row hidden-container " id="telephone_inventory_status">
            <div class="filter-row-subdiv">
              <select id="inventoryDropdown" class="filterDropdown ">
                <option value="" selected>Select</option>
                <option value="ASSIGNED">ASSIGNED</option>
                <option value="RESERVED">RESERVED</option>
                <option value="RETURNED">RETURNED</option>
                <option value="ALLOCATED">ALLOCATED</option>
                <option value="PROVISIONED">PROVISIONED</option>
                <option value="NOT_AVAILABLE">NOT AVAILABLE</option>
                <option value="AVAILABLE">AVAILABLE</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="billing_status"> Billing Status</label>
          <div class="filter-row hidden-container" id="billing_status">
            <div class="filter-row-subdiv">
              <select id="statusDropdown" class="filterDropdown">
                <option value="" selected>Select</option>
                <option value="ASSIGNED">ASSIGNED</option>
                <option value="UNAVAILABLE">UNAVAILABLE</option>
                <option value="AVAILABLE">AVAILABLE</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="provider"> Provider</label>
          <div class="filter-row hidden-container" id="provider">
            <div class="filter-row-subdiv">
              <select id="statusDropdown" class="filterDropdown">
                <option value="">Select Value</option>
                <option value="PEERLESS">PEERLESS</option>
                <option value="SINCH">SINCH</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="is_ported"> Is Ported</label>
          <div class="filter-row hidden-container" id="is_ported">
            <div class="filter-row-subdiv">
              <select id="statusDropdown" class="filterDropdown">
                <option value="">Select Value</option>
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="is_hot_number"> Is Hot Number</label>
          <div class="filter-row hidden-container" id="is_hot_number">
            <div class="filter-row-subdiv">
              <select id="statusDropdown" class="filterDropdown">
                <option value="">Select Value</option>
                <option value="true">True</option>
                <option value="false">False</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="state"> State</label>
          <div class="filter-row hidden-container" id="state">
            <div class="filter-row-subdiv">
              <select id="statusDropdown" class="filterDropdown">
                <option value="">Please select state</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="lata"> LATA</label>
          <div class="filter-row hidden-container" id="lata">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="lata-search" class="filterDropdown filter-search" placeholder="Search LATA">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search lata-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse lata-spin-icon"></i>
              <div id="lata-search-results" class="search-results-container"></div>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="npaNxx"> NPA/NPA-NXX</label>
          <div class="filter-row hidden-container" id="npaNxx">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="npaNxx-search" maxlength="6" class="filterDropdown filter-search" placeholder="Search NPA/NPA-NXX">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search npaNxx-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse npaNxx-spin-icon"></i>
              <div id="npaNxx-search-results" class="search-results-container"></div>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="rate_center"> Rate Center</label>
          <div class="filter-row hidden-container" id="rate_center">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="rateCenter-search" class="filterDropdown filter-search" placeholder="Search Rate Center">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search rateCenter-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse rateCenter-spin-icon"></i>
              <div id="rateCenter-search-results" class="search-results-container"></div>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="customer"> Customer</label>
          <div class="filter-row hidden-container" id="customer">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="customer-search" class="filterDropdown filter-search" placeholder="Search Customer Name">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search customer-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse customer-spin-icon"></i>
              <div id="customer-search-results" class="search-results-container"></div>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="account_number"> Account Number</label>
          <div class="filter-row hidden-container" id="account_number">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="accountNumber-search" class="filterDropdown filter-search" placeholder="Search Account Number">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search accountNumber-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse accountNumber-spin-icon"></i>
              <div id="accountNumber-search-results" class="search-results-container"></div>
            </div>
          </div>
        </div>
        <div class="label-filter-value-div">
          <label><input type="checkbox" class="filter-label" name="filter" value="zoho_order_number"> Zoho Order Number</label>
          <div class="filter-row hidden-container" id="zoho_order_number">
            <div class="filter-row-subdiv filter-div">
              <input type="search" id="zohoOrderNumber-search" class="filterDropdown filter-search" placeholder="Search Zoho Order Number">
              <i for="search-number" class="lyphicon search-icon glyphicon-search fa fa-search zohoOrderNumber-search-icon"></i>
              <i class="fas spin-icon fa-spinner fa-pulse zohoOrderNumber-spin-icon"></i>
              <div id="zohoOrderNumber-search-results" class="search-results-container"></div>
            </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>

  <!-- Success Modal -->
  <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>

  <!-- Release Detail Modal -->
  <div class="custom-modal-wrapper simple-release-modal common-modal">
    <i class="fa fa-times simple-release-modal-close" aria-hidden="true"></i>
    <div class="">
      <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Release Number Detail</p>
      <p class="msg-text release-text">Performing this action will release the telephone numbers which have inventory status as "Reserved".</p>
      <div class="close-button" id="close-button">
        <button type="button" class="close-btn" id="closeSimpleReleaseModal">OK</button>
      </div>
    </div>
  </div>

  <!-- Disconnect Detail Modal -->
  <div class="custom-modal-wrapper simple-disconnect-modal common-modal">
    <i class="fa fa-times simple-disconnect-modal-close" aria-hidden="true"></i>
    <div class="">
      <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Disconnect Number Detail</p>
      <p class="msg-text disconnect-text">Performing this action may trigger- disconnect order on the numbers, deprovisioning from switch, release from customer portal, release from billing platform (rev.io).</p>
      <div class="close-button" id="close-button">
        <button type="button" class="close-btn" id="closeSimpleDisconnectModal">OK</button>
      </div>
    </div>
  </div>

  <!-- bulk upload template -->
  <div id="bulk_upload" class="bulk-upload-modal common-modal">
    <p class="bulk-upload-para">You can use the given template to upload the numbers in bulk</p>
    <span class="file-upload">
      <label style="margin-bottom: 0px;" for="numbers-file-upload">UPLOAD FILE IN .XLSX FORMAT</label>
      <input type="file" name="file" class="file-input-field" autocomplete="off" id="numbers-file-upload" accept=".xlsx">
    </span>
    <div id="file-info" style="margin-top: 10px;">
      <span id="file-name"></span> <!-- Area to show file name -->
      <i id="clear-file" class="cancel-file fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="upload-file-template text-center">
      <a href="../upload/AddInventoryNumbers/add-inventory-number.xlsx?{{ time() }}" download="" class="download-add-template">Click to download the template</a>
      <a href="../upload/AddInventoryNumbers/add-inventory-number.xlsx?{{ time() }}" download="" class="download-add-template">
        &nbsp;<img src="../images/download-template-icon-blue.png" alt="download-template-icon">
      </a>
    </div>
    <div class="row">
      <div class="margin-top-bottom col">
        <input type="button" class="cancelAddBTN" id="cancelAddBTN" name="cancelAddBTN" value="Cancel">
      </div>
      <div class="margin-top-bottom col">
        <input type="button" id="submitAddbtn" name="submitAddbtn" value="Submit">
      </div>
    </div>
  </div>

  <!-- bulk edit template -->
  <div id="bulk_upload" class="bulk-edit-modal common-modal">
    <p class="bulk-upload-para">Export numbers to edit, then upload the updated file.</p>
    <span class="file-upload">
      <label style="margin-bottom: 0px;" for="numbers-file-edit">UPLOAD FILE IN .CSV FORMAT</label>
      <input type="file" name="file" class="file-input-field" autocomplete="off" id="numbers-file-edit" accept=".csv">
    </span>
    <div id="file-info" style="margin-top: 10px;">
      <span id="file-name-edit"></span> <!-- Area to show file name -->
      <i id="clear-file-edit" class="cancel-file fa fa-times" aria-hidden="true"></i>
    </div>
    <div>
      <p class="update-note"><strong>Note:</strong> Please select the numbers you wish to export for editing. After editing,<br> use the upload section above to submit your updated file.</p>
    </div>
    <div class="row">
      <div class="margin-top-bottom col">
        <input type="button" class="cancelEditBTN" id="cancelEditBTN" name="cancelAddBTN" value="Cancel">
      </div>
      <div class="margin-top-bottom col">
        <input type="button" id="submitEditbtn" name="submitEditbtn" value="Submit">
      </div>
    </div>
  </div>

  <!-- Error Modal -->
  <div class="custom-modal-wrapper simple-error-modal common-modal">
    <i class="fa fa-times simple-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>&nbsp;Error</p>
      <p class="msg-text simple-error-modal-msg-text"></p>
      <div class="close-button" id="close-button">
        <button type="button" class="close-btn" id="closeSimpleErrorModal">OK</button>
      </div>
    </div>
  </div>

  <!-- Error Modal tabular for bulk number adding-->
  <div class="custom-modal-wrapper table-error-modal common-modal">
    <i class="fa fa-times table-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>&nbsp;Error</p>
      <p style="font-size: 14px;" class="msg-text table-error-modal-msg-text"></p>
      <div class="close-button" id="table-error-close-button">
        <button type="button" class="close-btn" id="closeTableErrorModal">OK</button>
      </div>
    </div>
  </div>

  <!-- Delete Modal -->
  <div class="custom-modal-wrapper simple-delete-modal common-modal">
    <input type="hidden" id="testingStatusId">
    <p class="msg-text simple-error-modal-msg-text">Are you sure you want to delete?</p>
    <div class="delete-btns" id="close-button">
      <button type="button" class="cancel-delete-btn" id="cancel_btn">Cancel</button>
      <button type="button" class="delete-btn" id="delete_btn">Delete</button>
    </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 id="tableContainer" class="common-modal testing-result-modal">

  </div>

  <div id="addNewTestingResult" class="common-modal">
    <div class="testing-result-modal-content">
      <span class="close close-testing-popup">&times;</span>
      <p class="pop-up-heading">Add New Testing Result</p>
      <form id="addNewTetsingResultForm">
        <input type="hidden" id="telephoneInventoryId" name="telephoneInventoryId">
        <div class="testing-input-div">
          <label for="carrierName" class="testing-label">Carrier Name</label>
          <input type="text" id="carrierName" name="carrierName" placeholder="Enter Carrier Name">
          <div class="error-message" id="carrierNameError" style="display: none;">Please enter Carrier Name.</div>
        </div>
        <div class="testing-input-div">
          <label for="cname" class="testing-label">CNAME</label>
          <input type="text" id="cname" name="cname" placeholder="Enter CNAME">
          <div class="error-message" id="cnameError" style="display: none;">Please enter CNAME.</div>
        </div>
        <div class="testing-input-div">
          <label for="cname" class="testing-label">Screenshot URL</label>
          <input type="text" id="screenshot_url" name="screenshotGoogleVisionUrl" placeholder="Enter Screenshot URL">
        </div>
        <button type="button" class="testing-submit-btn">Submit</button>
      </form>
    </div>
  </div>
</div>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>

<script>
  var numberType = 'active';
  //vsrisble to store the result for suggestions
  var suggestionList = {
    customer: [],
    lata: [],
    rateCenter: [],
    accountNumber: [],
    zohoOrderNumber: []
  };
  var baseURL = "{{ URL::to('/') }}" + "/";

  function attachInputHandler(inputSelector, suggestions, suggestionContainerId) {
    $(inputSelector).on('input', function() {
      displaySuggestions(this, suggestions, suggestionContainerId);
    });
  }

  /*AKASH 30-aug-2024
    function to show the suggestion list */
  function displaySuggestions(input, suggestions, suggestionContainerId) {
    const searchValue = $(input).val().toLowerCase();
    const filteredSuggestions = suggestions.filter(item =>
      item.toLowerCase().includes(searchValue)
    );

    const suggestionsContainer = $(suggestionContainerId);
    suggestionsContainer.empty();

    if (filteredSuggestions.length > 0) {
      filteredSuggestions.forEach(suggestion => {
        $('<div class="suggestion-item"></div>')
          .text(suggestion)
          .on('click', function() {
            $(input).val(suggestion);
            suggestionsContainer.empty().hide();
          })
          .appendTo(suggestionsContainer);
      });
      suggestionsContainer.show();
    } else {
      suggestionsContainer.html('<div class="suggestion-item">No suggestions available</div>').show();
    }
  }

  $(document).ready(function() {
    $("#loaderModal").show();
    GetAllInventoryData();
    //calling function to get all the data and store it in suggestion list
    getSuggestionsList();
    $date_input = getCurrentDate();

    // Hide suggestions container when clicking outside
    $(document).on('click', function(event) {
      if (!$(event.target).closest('.edit-mode').length) {
        $('.suggestions-container').hide();
      }
    });

    $('.addnew-icon').on('click', function(event) {
      event.stopPropagation(); // Prevent the event from bubbling up to the window
      $('.dropdown-content').toggle(); // Toggle the dropdown
    });

    // Close the dropdown if the user clicks outside of it
    $(window).on('click', function(event) {
      if (!$(event.target).closest('.dropdown').length) {
        $('.dropdown-content').hide(); // Hide the dropdown
      }
    });

    // Handle dropdown item selection
    $('.dropdown-item').on('click', function(event) {
      event.preventDefault(); // Prevent the default anchor behavior

      var action = $(this).data('action'); // Get the action from the data attribute

      // Perform different actions based on the selected option
      switch (action) {
        case 'add-number':
          $(".manage-NS-inventory-page").hide();
          $(".inventory-table-div").hide();
          $("#view-inventory-data").show();
          $(".display-value").hide();
          $(".edit-mode").show();
          $('.btns-sub-div').hide();
          $('.error-message').hide();
          $('.add-save-bulk-btn').show();
          $('.edit-save-btn').hide();
          $('.numbertype-submenu').hide();
          $("img.ui-datepicker-trigger").show();
          $('#provider_name').attr('name', 'provider');
          $(".main-div-2, .main-div-1, .main-div-5").css("height", "240px");
          $(".main-div-3").css("height", "160px");
          $(".main-div-4").css("height", "340px");
          resetformvalues();
          break;
        case 'bulk-add-number':
          $('.bulk-upload-modal').show();
          break;
        case 'bulk-edit-number':
          $('.bulk-edit-modal').show();
          break;
        default:
          console.log('No action selected');
      }

      // Close the dropdown after selection
      $('.dropdown-content').hide();
    });
    /*AKASH july 2024
    on click of changing tab from 
    active to history or vice versa */
    jQuery('.nav-item .menu-item').on('click', function(e) {
      var currentAttrValue = jQuery(this).attr('href');
      jQuery(currentAttrValue).addClass('active').siblings().removeClass('active');
      jQuery(this).parent('li').addClass('menu-item-selected').siblings().removeClass('menu-item-selected');
      numberType = currentAttrValue;
      var table = $('#NS-inventory-table').DataTable();
      if (numberType == 'history') {
        $('.actions').hide();
        $('.edit-btn').hide();
        $('#bulk-action-select option[value="release"]').remove();
        $('#bulk-action-select option[value="disconnect"]').remove();
        table.column(14).visible(false);

      } else {
        $('.actions').show();
        $('.edit-btn').show();
        $('#bulk-action-select').append('<option value="release">Release Selected Number(s) </option>');
        $('#bulk-action-select').append('<option value="disconnect">Disconnect Selected Number(s) </option>');
        table.column(14).visible(true);
      }
      var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
      NSInventoryTableObj.ajax.reload();
      e.preventDefault();
    });

    //on select the file in bulk action 
    $('#numbers-file-upload').on('change', function() {
      var fileInput = $(this);
      var fileNameDisplay = $('#file-name');
      var clearButton = $('#clear-file');
      var file = fileInput[0].files[0];

      // Check if a file is selected
      if (file) {
        fileNameDisplay.text(file.name); // Show the file name
        clearButton.show(); // Show the clear button
      } else {
        fileNameDisplay.text(''); // Clear the file name display
        clearButton.hide(); // Hide the clear button
      }
    });

    //on select the file in bulk action
    $('#numbers-file-edit').on('change', function() {
      var fileInput = $(this);
      var fileNameDisplay = $('#file-name-edit');
      var clearButton = $('#clear-file-edit');
      var file = fileInput[0].files[0];

      // Check if a file is selected
      if (file) {
        fileNameDisplay.text(file.name); // Show the file name
        clearButton.show(); // Show the clear button
      } else {
        fileNameDisplay.text(''); // Clear the file name display
        clearButton.hide(); // Hide the clear button
      }
    });

    // Handle clear button click of bulk action
    $('#clear-file').on('click', function() {
      $('#numbers-file-upload').val(''); // Clear the file input
      $('#file-name').text(''); // Clear the file name display
      $(this).hide(); // Hide the clear button
    });

    // Handle clear button click of bulk action
    $('#clear-file-edit').on('click', function() {
      $('#numbers-file-edit').val(''); // Clear the file input
      $('#file-name-edit').text(''); // Clear the file name display
      $(this).hide(); // Hide the clear button
    });

    //on click of submit btn of add numbers in bulk 
    $('#submitAddbtn').on('click', function() {
      var fileInput = $('#numbers-file-upload');
      // Get the selected file
      var file = fileInput[0].files[0];

      // Check if a file is selected
      if (file) {
        // Check file type
        if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          $('.simple-error-modal-msg-text').text('Please upload a valid .xlsx file.');
          $('.simple-error-modal').show();
        } else {
          $('.bulk-upload-modal').hide();
          addNumbersInBulk(file);
          $('#numbers-file-upload').val(''); // Clear the file input
          $('#file-name').text(''); // Clear the file name display
          $('#clear-file').hide(''); // hide the clear btn
        }
      } else {
        $('.simple-error-modal-msg-text').text('Please upload a valid .xlsx file.');
        $('.simple-error-modal').show();
      }
    });

    //on click of submit btn of update numbers in bulk
    $('#submitEditbtn').on('click', function() {
      var fileInput = $('#numbers-file-edit');
      // Get the selected file
      var file = fileInput[0].files[0];

      // Check if a file is selected
      if (file) {
        // Check file type
        if (
          file.type !== 'text/csv' &&
          !file.name.endsWith('.csv')) {
          $('.simple-error-modal-msg-text').text('Please upload a valid .csv file.');
          $('.simple-error-modal').show();
        } else {
          $('.bulk-edit-modal').hide();
          editNumbersInBulk(file);
          $('#numbers-file-edit').val(''); // Clear the file input
          $('#file-name-edit').text(''); // Clear the file name display
          $('#clear-file-edit').hide(''); // hide the clear btn
        }
      } else {
        $('.simple-error-modal-msg-text').text('Please upload a valid .xlsx file.');
        $('.simple-error-modal').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 to show or hide filter rows based on selected filters
    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();
    });

    $('#apply_filter').click(function() {
      $('.filter-main-container').hide();
      var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
      NSInventoryTableObj.ajax.reload();
    });

    /*AKASH 14-Aug-2024
    common function to show the related search results in filters*/
    function setupSearchInput(selector, filterName) {
      var searchTimer;
      $(selector).on('input', function() {
        $('.search-results-container').css("display", "none");
        if (searchTimer) {
          clearTimeout(searchTimer);
        }
        var currSearch = $(this);
        var searchValue = currSearch.val();

        var searchIconSelector = '.' + filterName + '-search-icon';
        var spinIconSelector = '.' + filterName + '-spin-icon';

        if (searchValue.length) {
          searchTimer = setTimeout(function() {
            $(searchIconSelector).css('display', 'none');
            $(spinIconSelector).css('display', 'inline-block');
            currSearch.prop("disabled", true);
            searchFilterValue(searchValue, filterName);
          }, 1000);
        } else {
          $('#apply_filter').prop('disabled', true);
        }
      });
    }

    // Set up search input handlers for different fields
    setupSearchInput('#customer-search', 'customer');
    setupSearchInput('#accountNumber-search', 'accountNumber');
    setupSearchInput('#zohoOrderNumber-search', 'zohoOrderNumber');
    setupSearchInput('#lata-search', 'lata');
    setupSearchInput('#rateCenter-search', 'rateCenter');
    // setupSearchInput('#npa-search', 'npa');
    setupSearchInput('#npaNxx-search', 'npaNxx');

    $(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', '.close-testing-result', function() {
      $("#tableContainer").css("display", "none");
    });

    $(document).on('click', '.close-testing-popup', function() {
      $('#carrierName, #cname').val('');
      $("#addNewTestingResult").css("display", "none");
      $('#cnameError').css('display', 'none');
      $('#carrierNameError').css('display', 'none');
    });

    // Validate and submit form data
    $(document).on('click', '.testing-submit-btn', function() {
      validateAndSubmitForm();
    });

    $('#cname').on('input', function() {
      $('#cnameError').css('display', 'none');
    });

    $('#carrierName').on('input', function() {
      $('#carrierNameError').css('display', 'none');
    });

    // Event handler for closing the popup (reset form fields and errors)
    $('#closePopupBtn').click(function() {
      resetForm();
    });

    //on click of telephone number showing the detailed view
    $(document).on('click', '.telephone-number', function() {
      var data = $(this).attr('data-value');
      var dataValue = JSON.parse(data);
      showDetailOfTelephoneNumber(dataValue);
      $(".edit-mode").hide();
      $(".display-value").show();
      $('.btns-sub-div').show();
      $("img.ui-datepicker-trigger").hide();
      $(".manage-NS-inventory-page").hide();
      $(".add-save-bulk-btn").hide();
      $(".edit-save-btn").hide();
      $(".error-message").hide();
      $('.numbertype-submenu').hide();
      $(".inventory-table-div").hide();
      $("#view-inventory-data").show();
      $(".main-div-2, .main-div-5, .main-div-1").css("height", "200px");
      $(".main-div-3").css("height", "140px");
      $(".main-div-4").css("height", "285px");
    });

    //on click of back btn 
    $(".heading-para").on('click', function() {
      $(".manage-NS-inventory-page").show();
      $(".inventory-table-div").show();
      $("#view-inventory-data").hide();
      $("#add-inventory-data").hide();
      $(".edit-mode").hide();
      $('.edit-save-btn').hide();
      $('.add-save-bulk-btn').hide();
      $('.numbertype-submenu').show();
      $('.btns-sub-div').show();
      $(".display-value").show();
    })

    //on click of edit btn inside view detail
    $(".edit-btn").on('click', function() {
      $(".edit-mode").show();
      $(".display-value").hide();
      $('.error-message').hide();
      $('.edit-save-btn').show();
      $('.btns-sub-div').hide();
      $('.add-save-bulk-btn').hide();
      $('#provider_name').attr('name', 'provider');
      $("img.ui-datepicker-trigger").show();
      $(".main-div-2, .main-div-5, .main-div-1").css("height", "240px");
      $(".main-div-3").css("height", "160px");
      $(".main-div-4").css("height", "340px");
    })

    //on click edit btn
    $(document).on('click', '.action-edit', function() {
      var dataValue = $(this).closest('tr').find('.telephone-number').data('value');
      //fill the input box with corresponding values
      showDetailOfTelephoneNumber(dataValue);
      $(".manage-NS-inventory-page").hide();
      $(".inventory-table-div").hide();
      $("#view-inventory-data").show();
      $(".edit-mode").show();
      $(".display-value").hide();
      $('.error-message').hide();
      $(".add-save-bulk-btn").hide();
      $('.edit-save-btn').show();
      $('.numbertype-submenu').hide();
      $('.btns-sub-div').hide();
      $('#provider_name').attr('name', 'provider');
      $("img.ui-datepicker-trigger").show();
      $(".main-div-2, .main-div-1, .main-div-5").css("height", "240px");
      $(".main-div-3").css("height", "160px");
      $(".main-div-4").css("height", "340px");
    })

    //on click add new inventory
    // $(".add-new-inventory").on('click', function() {
    //   $(".manage-NS-inventory-page").hide();
    //   $(".inventory-table-div").hide();
    //   $("#view-inventory-data").show();
    //   $(".display-value").hide();
    //   $(".edit-mode").show();
    //   $('.btns-sub-div').hide();
    //   $('.error-message').hide();
    //   $('.add-save-bulk-btn').show();
    //   $('.edit-save-btn').hide();
    //   $('.numbertype-submenu').hide();
    //   $("img.ui-datepicker-trigger").show();
    //   $('#provider_name').attr('name', 'provider');
    //   $(".main-div-2, .main-div-1, .main-div-5").css("height", "240px");
    //   $(".main-div-3").css("height", "160px");
    //   $(".main-div-4").css("height", "340px");
    //   //empty all the fields
    //   resetformvalues();
    // })

    //on click of add save inventory btn
    $(document).on('click', '.add-save-btn', function() {
      var type = "add";
      formValidation(type);
    });

    //on click of edit save inventory btn
    $(document).on('click', '.edit-save-btn', function() {
      var type = "edit";
      formValidation(type);
    });

    //when user start typing remove the error message
    $("#inventory-form input, #inventory-form select").on('input change', function() {
      $(this).next(".error-message").remove();
    });

    //closing the success modal (no need automatically closed after 1 sec)
    $('#closeSimpleSuccessModal, .simple-success-modal-close').click(function() {
      $('.simple-success-modal').css("display", "none");
    });
    //closing the release details modal
    $('#closeSimpleReleaseModal, .simple-release-modal-close').click(function() {
      $('.simple-release-modal').css("display", "none");
    });
    //closing the disconnect details modal
    $('#closeSimpleDisconnectModal, .simple-disconnect-modal-close').click(function() {
      $('.simple-disconnect-modal').css("display", "none");
    });

    //closing the error modal
    $('#closeSimpleErrorModal, .simple-error-modal-close').click(function() {
      $('.simple-error-modal').css("display", "none");
    });

    //closing the tabular error modal
    $('#closeTableErrorModal, .table-error-modal-close').click(function() {
      $('.table-error-modal').css("display", "none");
    });

    // var telephoneNumber;
    // $(document).on('click', '.delete-action', function() {
    //   var str = $(this).attr('id');
    //   var telephone_number = str.split('-')[1];
    //   telephoneNumber = telephone_number;
    //   $('.simple-delete-modal').show();
    // });

    //on click of view btn call the get testing result api 
    $(document).on('click', '.view-testing-result', function() {
      var str = $(this).attr('id');
      var id = str.split('-')[1];
      getTestingResults(id);
    });

    //on click of export btn which is on detail page
    $(document).on('click', '.export-btn', function() {
      var data = $(this).attr('data-detail');
      var dataValue = JSON.parse(data);
      var dataArray = [dataValue];
      downloadTelephoneDetailFile(dataArray);
    });

    //export all btn click functionality 
    $(document).on('click', '.export-all-btn', function() {
      exportAllData();
    });

    $('.cancel-delete-btn').click(function() {
      $('.simple-delete-modal').hide();
    });

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

    // $('.add-bulk-btn').click(function() {
    //   $('.bulk-upload-modal').show();
    // });

    $('.cancelAddBTN').click(function() {
      $('#numbers-file-edit').val(''); // Clear the file input
      $('#file-name-edit').text(''); // Clear the file name display
      $('#clear-file-edit').hide(''); // hide the clear btn
      $('.bulk-upload-modal').hide();
    });

    $('.cancelEditBTN').click(function() {
      $('#numbers-file-edit').val(''); // Clear the file input
      $('#file-name-edit').text(''); // Clear the file name display
      $('#clear-file-edit').hide(''); // hide the clear btn
      $('.bulk-edit-modal').hide();
    });

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

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

    $('.delete-btn').click(function() {
      jQuery("#loaderModal").show();
      deleteTestingResult();
      $('.simple-delete-modal').hide();
    });

    $('#bulk-action-select').change(function() {
      var selectedValue = $(this).val();
      if (selectedValue !== 'action') {
        $('#go-bulk-apply-button').prop('disabled', false);
      } else {
        $('#go-bulk-apply-button').prop('disabled', true);
      }
      if (selectedValue == 'release' || selectedValue == 'disconnect') {
        $('#detail-icon').show();
      } else {
        $('#detail-icon').hide();
      }
    });

    $('#detail-icon').on('click', function() {
      var selectedValue = $('#bulk-action-select').val();
      // Show the appropriate popup based on the selected value
      if (selectedValue === 'release') {
        $('.simple-release-modal').show();
      } else if (selectedValue === 'disconnect') {
        $('.simple-disconnect-modal').show();
      }
    });

    $('.go-bulk-apply-button').click(function() {
      if ($('#bulk-action-select').val() == 'export-selected-numbers') {
        var checkedIDsExport = [];
        jQuery('.inventory-table tbody input[type=checkbox]').each(function() {
          if (jQuery(this).is(":checked")) {
            var dataValue = $(this).closest('tr').find('.telephone-number').data('value');
            checkedIDsExport.push(dataValue);
          }
        });
        if (checkedIDsExport.length > 0) {
          //export the selected telephone number details
          downloadTelephoneDetailFile(checkedIDsExport);
        } else {
          $('.simple-error-modal-msg-text').text('Please select atleast one telephone number to export the detail');
          $('.simple-error-modal').show();
        }
      }
      if ($('#bulk-action-select').val() == 'release') {
        var transformedData = collectAndTransformData();
        if (transformedData) {
          releaseNumbers(transformedData);
        }
      }
      if ($('#bulk-action-select').val() == 'disconnect') {
        var transformedData = collectAndTransformData();
        if (transformedData) {
          disconnectNumbers(transformedData);
        }
      }
    });

    $(".datepickerStart").datepicker({
      dateFormat: 'yy-mm-dd',
      maxDate: 0,
      minDate: '-3M',
      showOn: "button",
      buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
      buttonImageOnly: true
    });
    $(".datepickerStart").val($date_input);

    $(".datepickerEnd").datepicker({
      dateFormat: 'yy-mm-dd',
      maxDate: '+3M',
      minDate: '0',
      showOn: "button",
      buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
      buttonImageOnly: true
    });
    $(".datepickerEnd").val($date_input);

    //preparing the data to send in release and disconnect
    function collectAndTransformData() {
      var checkedIDs = [];
      // Collect the checked telephone numbers
      jQuery('.inventory-table tbody input[type=checkbox]').each(function() {
        if (jQuery(this).is(":checked")) {
          var dataValue = $(this).closest('tr').find('.telephone-number').data('value');
          checkedIDs.push(dataValue);
        }
      });

      if (checkedIDs.length > 0) {
        // Transform the array into the desired format
        return {
          tnItem: checkedIDs.map(function(tn) {
            return {
              tn: tn.telephoneNumber
            };
          })
        };
      } else {
        $('.simple-error-modal-msg-text').text('Please select atleast one telephone number');
        $('.simple-error-modal').show();
      }
    }

    var NSInventoryTimer;
    jQuery("#NS-inventory-table_filter input[type='search']").on('search', function(evt) {
      var currSearchText = jQuery(this).val();
      if (currSearchText == "" || currSearchText == null) {
        var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
        NSInventoryTableObj.ajax.reload();
      }
    });

    jQuery("#NS-inventory-table_filter input[type='search']").on("keyup keypress", function(e) {
      if (NSInventoryTimer) {
        clearTimeout(NSInventoryTimer);
      }
      var keyCode = e.keyCode || e.which;
      if (keyCode === 13) {
        e.preventDefault();
        var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
        NSInventoryTableObj.ajax.reload();
        jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display', 'none');
        jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
        return false;
      }
      var currSearchText = jQuery(this).val();
      var currSearchEle = jQuery(this);
      if (currSearchText != "") {
        NSInventoryTimer = setTimeout(function() {
          jQuery(".dataTables_filter .glyphicon-search.fa.fa-search").css('display', 'none');
          jQuery(".dataTables_filter .fa-spinner").css('display', 'inline-block');
          currSearchEle.prop("disabled", true);
          // currSearchEle.prop("disabled", true);
          var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
          NSInventoryTableObj.ajax.reload();
        }, 1000);
      }
      if (keyCode === 8) {
        if (currSearchText == "" || currSearchText == null) {
          var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
          NSInventoryTableObj.ajax.reload();
        }
      }
    });

  });

  //validation for telephone number 10 digits
  function validateFormData() {
    const input = document.getElementById('telephone_number');
    const errorMessage = document.getElementById('tel-error-message');
    const value = input.value;
    if (/^\d{10,}$/.test(value)) {
      errorMessage.style.display = 'none';
      input.setCustomValidity('');
      return true; // Valid input
    } else {
      if (value != '' && value != null) {
        errorMessage.style.display = 'block';
        input.setCustomValidity('Please enter at least 10 digits.');
        return false;
      }
    }
    return false;
  }

  function formatDate(dateString) {
    if (!dateString) return '';
    var date = new Date(dateString);
    var day = String(date.getDate()).padStart(2, '0');
    var month = String(date.getMonth() + 1).padStart(2, '0');
    var year = date.getFullYear();
    return `${year}-${month}-${day}`;
  }


  function showDetailOfTelephoneNumber(data) {
    //dyamically adding id so that we can delete that telephone number
    $('.delete-data').attr('id', `delete-${data.telephoneNumber}`);
    $('.export-btn').attr('data-detail', JSON.stringify(data));
    //showing detailed data on click of number
    $('.display-order-id').text(data.orderDetailsId ? data.orderDetailsId : '-');
    $('.display-revio-id').text(data.revioId ? data.revioId : '-');
    $('.display-memberpress-id').text(data.memberPressID ? data.memberPressID : '-');
    $('.display-zoho-id').text(data.zohoId ? data.zohoId : '-');
    $('.display-zoho-order-no').text(data.zohoOrderNumber ? data.zohoOrderNumber : '-');
    $('.display-telephone-number').text(data.telephoneNumber ? data.telephoneNumber : '-');
    $('.display-billing-status').text(data.billingStatus ? data.billingStatus : '-');
    $('.display-date-created').text(data.createdAt ? data.createdAt : '-');
    $('.display-created-by').text(data.createdBy ? data.createdBy : '-');
    $('.display-routing-option').text(data.routingOption ? data.routingOption : '-');
    $('.display-trunk-group').text(data.trunkGroup ? data.trunkGroup : '-');
    $('.display-carrier-reference-number').text(data.carrierReferenceNumber ? data.carrierReferenceNumber : '-');
    $('.display-inventory-type').text(data.inventoryType ? data.inventoryType : '-');
    $('.display-unavailable-reason').text(data.unavailableReason ? data.unavailableReason : '-');
    $('.display-customer').text(data.customer ? data.customer : '-');
    $('.display-bill-profile-id').text(data.billProfileId ? data.billProfileId : '-');
    $('.display-account-number').text(data.accountNumber ? data.accountNumber : '-');
    $('.display-inventory-status').text(data.telephoneInventoryStatus ? data.telephoneInventoryStatus : '-');
    $('.display-carrier-requested-cname').text(data.carrierRequestedCname ? data.carrierRequestedCname : '-');
    $('.display-cname-dip').text(data.cnameDip ? data.cnameDip : '-');
    $('.display-city').text(data.city ? data.city : '-');
    $('.display-state').text(data.state ? data.state : '-');
    $('.display-lata').text(data.lata ? data.lata : '-');
    $('.display-rate-center').text(data.rateCenter ? data.rateCenter : '-');
    // $('.display-rate-center-name').text(data.rateCenterName ? data.rateCenterName : '-');
    $('.display-resp-org-name').text(data.respOrgName ? data.respOrgName : '-');
    $('.display-provider').text(data.provider ? data.provider : '-');
    $('.display-toll-free-dnis').text(data.tollFreeDnis ? data.tollFreeDnis : '-');
    $('.display-toll-free-resp-org-cic').text(data.tollFreeRespOrgCic ? data.tollFreeRespOrgCic : '-');
    $('.display-resp-org-prefix').text(data.respOrgPrefix ? data.respOrgPrefix : '-');
    $('.display-cname-allowed').text(data.cnamAllowed ? data.cnamAllowed : '-');
    $('.display-e911-allowed').text(data.e911Allowed ? data.e911Allowed : '-');
    $('.display-port-out-pin-supported').text(data.portOutPinSupported ? data.portOutPinSupported : '-');
    $('.display-port-out-notification').text(data.portoutNotification ? data.portoutNotification : '-');
    $('.display-reserved').text(data.reserved !== null ? data.reserved : '-');
    $('.display-port-out-notification-supported').text(data.portOutNotificationSupported ? data.portOutNotificationSupported : '-');
    $('.display-is-ported').text(data.isPorted !== null ? data.isPorted : '-');
    $('.display-is-hot-number').text(data.isHotNumber !== null ? data.isHotNumber : '-');
    $('.display-order-details-id').text(data.orderDetailsId ? data.orderDetailsId : '-');
    $('.display-allocation-start-date').text(data.allocationStartDate ? formatDate(data.allocationStartDate) : '-');
    $('.display-allocation-end-date').text(data.allocationEndDate ? formatDate(data.allocationEndDate) : '-');
    var descriptionText = data.description ? data.description : '-';
    $('.display-description').attr('title', descriptionText);
    if (descriptionText.length > 30) {
      descriptionText = descriptionText.slice(0, 30) + '...';
    }
    $('.display-description').text(descriptionText);

    var customerText = data.customer ? data.customer : '-';
    $('.display-customer').attr('title', customerText);
    if (customerText.length > 30) {
      customerText = customerText.slice(0, 30) + '...';
    }
    $('.display-customer').text(customerText);

    //prepopulate the input fields
    $('.edit-order-id').val(data.orderDetailsId || '');
    $('.edit-revio-id').val(data.revioId || '');
    $('.edit-memberpress-id').val(data.memberPressID || '');
    $('.edit-zoho-id').val(data.zohoId || '');
    $('.edit-zoho-order-no').val(data.zohoOrderNumber || '');
    $('.edit-telephone-number').prop('readonly', true).val(data.telephoneNumber || '');
    $('.edit-billing-status').val(data.billingStatus || '');
    $('.edit-trunk-group').val(data.trunkGroup || '');
    $('.edit-date-created').prop('readonly', true).val(data.createdAt || '');
    $('.edit-created-by').prop('readonly', true).val(data.createdBy || '');
    $('.edit-carrier-reference-number').val(data.carrierReferenceNumber || '');
    $('.edit-inventory-type').val(data.inventoryType || '');
    $('.edit-unavailable-reason').val(data.unavailableReason || '');
    $('.edit-customer').val(data.customer || '');
    $('.edit-bill-profile-id').val(data.billProfileId || '');
    $('.edit-account-number').val(data.accountNumber || '');
    $('.edit-inventory-status').val(data.telephoneInventoryStatus || '');
    $('.edit-carrier-requested-cname').val(data.carrierRequestedCname || '');
    $('.edit-cname-dip').val(data.cnameDip || '');
    $('.edit-city').val(data.city || '');
    $('.edit-state').val(data.state || '');
    $('.edit-lata').val(data.lata || '');
    $('.edit-rate-center').val(data.rateCenter || '');
    // $('.edit-rate-center-name').val(data.rateCenterName || '');
    $('.edit-resp-org-name').val(data.respOrgName || '');
    $('.edit-provider').val(data.provider || '');
    $('.edit-toll-free-dnis').val(data.tollFreeDnis || '');
    $('.edit-toll-free-resp-org-cic').val(data.tollFreeRespOrgCic || '');
    $('.edit-resp-org-prefix').val(data.respOrgPrefix || '');
    $('.edit-cnam-allowed').val(data.cnamAllowed || '');
    $('.edit-e911-allowed').val(data.e911Allowed || '');
    $('.edit-port-out-pin-supported').val(data.portOutPinSupported || '');
    $('.edit-port-out-notification').val(data.portoutNotification || '');
    $('.edit-reserved').val(data.reserved !== null ? (data.reserved ? '1' : '0') : '-');
    $('.edit-port-out-notification-supported').val(data.portOutNotificationSupported || '');
    $('.edit-is-ported').val(data.isPorted !== null ? (data.isPorted ? '1' : '0') : '0');
    $('.edit-is-hot-number').val(data.isHotNumber !== null ? (data.isHotNumber ? '1' : '0') : '0');
    $('.edit-order-details-id').val(data.orderDetailsId || '');
    $('.edit-allocation-start-date').val(formatDate(data.allocationStartDate) || '');
    $('.edit-allocation-end-date').val(formatDate(data.allocationEndDate) || '');
    $('.edit-description').val(data.description || '');

  }

  //reset the form values to empty
  function resetformvalues() {
    $('.edit-order-id').val('');
    $('.edit-revio-id').val('');
    $('.edit-memberpress-id').val('');
    $('.edit-zoho-id').val('');
    $('.edit-zoho-order-no').val('');
    $('.edit-telephone-number').prop('readonly', false).val('');
    $('.edit-billing-status').val('');
    $('.edit-routing-option').val('');
    $('.edit-trunk-group').val('');
    $('.edit-date-created').prop('readonly', false).val('');
    $('.edit-created-by').prop('readonly', false).val('');
    $('.edit-carrier-reference-number').val('');
    $('.edit-inventory-type').val('');
    $('.edit-unavailable-reason').val('');
    $('.edit-customer').val('');
    $('.edit-bill-profile-id').val('');
    $('.edit-account-number').val('');
    $('.edit-inventory-status').val('');
    $('.edit-carrier-requested-cname').val('');
    $('.edit-cname-dip').val('');
    $('.edit-city').val('');
    $('.edit-state').val('');
    $('.edit-lata').val('');
    $('.edit-rate-center').val('');
    // $('.edit-rate-center-name').val('');
    $('.edit-resp-org-name').val('');
    $('.edit-provider').val('');
    $('.edit-toll-free-dnis').val('');
    $('.edit-toll-free-resp-org-cic').val('');
    $('.edit-resp-org-prefix').val('');
    $('.edit-cnam-allowed').val('');
    $('.edit-e911-allowed').val('');
    $('.edit-port-out-pin-supported').val('');
    $('.edit-port-out-notification').val('');
    $('.edit-reserved').val('');
    $('.edit-port-out-notification-supported').val('');
    $('.edit-is-ported').val('');
    $('.edit-is-hot-number').val('');
    $('.edit-order-details-id').val('');
    $('.edit-allocation-start-date').val('');
    $('.edit-allocation-end-date').val('');
    $('.edit-description').val('');

  }

  //function to add inventory validations
  function formValidation(type) {
    var requiredFields = [{
        id: "#telephone_number",
        message: "Telephone Number is required."
      },
      {
        id: "#provider_name",
        message: "Provider is required."
      },
      {
        id: "#inventory_type",
        message: "Inventory Type is required."
      },
      {
        id: "#inventory_status",
        message: "Inventory Status is required."
      },
      {
        id: "#cname_dip",
        message: "CNAME Dip is required."
      },
      {
        id: "#billing-status",
        message: "Billing Status is required."
      }
    ];

    var isValid = true;
    $(".error-message").remove();

    for (var i = 0; i < requiredFields.length; i++) {
      var field = requiredFields[i];
      var $field = $(field.id);
      if ($field.val() == "") {
        $field.after('<span class="error-message">' + field.message + '</span>');
        $field.focus();
        isValid = false;
      }
    }

    if (isValid) {
      isValid = validateFormData();
    }
    if (isValid) {
      var data = $("#inventory-form").serializeArray();
      var formattedData = {};
      data.forEach(function(item) {
        formattedData[item.name] = item.value;
      });
      if (type == "add") {
        addInventory(formattedData);
      } else {
        editInventory(formattedData);
      }
    }
  }

  /**AKASH 29-08-2024
  Add Telephone Number in bulk function **/
  function addNumbersInBulk(file) {
    jQuery("#loaderModal").show();
    var formData = new FormData();
    formData.append('file', file);
    $.ajax({
      url: baseURL + "addNumbersInBulk",
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false, // Prevent jQuery from setting the content type
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          getFileUploadStatus(response.data.jobId);
          toastr.info(response.data.message);
        } else {
          $('.simple-error-modal-msg-text').text('Something went wrong! Please try again.');
          $('.simple-error-modal').show();
        }
      },
      error: function(xhr, status, error) {
        jQuery("#loaderModal").hide();
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
      }
    });
  }

  /*AKASH July 2024
  check bulk upload file response*/
  function getFileUploadStatus(id) {
    $.ajax({
      url: baseURL + "getFileUploadStatus",
      data: {
        bulkUploadFileStatusId: id
      },
      type: 'GET',
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          if (response.data.message == "PENDING") {
            toastr.info('We are processing your file Please wait...');
            setTimeout(function() {
              getFileUploadStatus(id);
            }, 10000);
          } else if (response.data.message == "success") {
            toastr.success('File Uploaded Successfully');
            setTimeout(function() {
              var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
              NSInventoryTableObj.ajax.reload();
            }, 1000);
          } else {

          }
        } else if (response.code == 406) {
          if (response.data.error) {
            toastr.error(response.data.error);
          } else {
            // Convert the response data object into an array of errors
            var errors = [];
            for (var key in response.data) {
              if (response.data.hasOwnProperty(key)) {
                var error = {
                  row_column: key,
                  message: response.data[key]
                };
                errors.push(error);
              }
            }
            showErrorModal(errors);
          }
        } else {
          $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  function showErrorModal(errors) {
    var errorMessage = '<div class="table-error-modal-div"><table style="width:100%; border-collapse: collapse;">';

    // Table header with columns Row, Column_Name (conditionally), and Error Message
    errorMessage += '<tr class="error-table"><th>Row</th>';

    // Check if any error contains a column name, if yes, add Column Name to the header
    var columnHeader = false;
    errors.forEach(function(error) {
      if (error.row_column && error.row_column.includes('Column name')) {
        columnHeader = true; // If any error contains "Column name", we will add this column
      }
    });

    // If column names are found, add the "Column Name" header
    if (columnHeader) {
      errorMessage += '<th>Column Name</th>';
    }
    errorMessage += '<th>Error Message</th></tr>';

    // Iterate over all errors to populate the table
    errors.forEach(function(error) {
      var rowNumber = 'N/A';
      var columnName = ''; // Empty column name if not found
      var errorMsg = 'No message available';

      // Ensure row_column and message are defined before using
      if (error.row_column) {
        var keyParts = error.row_column.split(', ');

        // If only the row number is provided (e.g., "Row number : 2")
        if (keyParts.length === 1) {
          rowNumber = keyParts[0].split(': ')[1] || 'N/A';
          columnName = ''; // No column name
        }
        // If both row and column name are present (e.g., "Row number : 2, Column name : telephoneNumber")
        else if (keyParts.length > 1) {
          rowNumber = keyParts[0].split(': ')[1] || 'N/A';
          columnName = keyParts[1].split(': ')[1] || ''; // Leave empty if no column name
        }
      }

      if (error.message) {
        errorMsg = error.message;
      }

      // Add a row to the table for each validation error
      errorMessage += '<tr>';
      errorMessage += '<td>' + rowNumber + '</td>'; // Always show Row

      // Conditionally show the column name if it's available
      if (columnName) {
        errorMessage += '<td>' + columnName + '</td>'; // Only show Column Name if available
      }

      errorMessage += '<td>' + errorMsg + '</td>'; // Error message
      errorMessage += '</tr>';
    });

    // Close the table and div tags
    errorMessage += '</table></div>';

    // Display the formatted error message in a modal
    $('.table-error-modal-msg-text').html(errorMessage); // Assuming you have this class in the modal content
    $('.table-error-modal').show(); // Show the modal
  }

  /**AKASH 29-08-2024
  edit Telephone Number in bulk function **/
  function editNumbersInBulk(file) {
    jQuery("#loaderModal").show();
    // Check if the file is a CSV
    if (file.type === 'text/csv' || file.name.endsWith('.csv')) {
      var reader = new FileReader();

      reader.onload = function(e) {
        var csvData = e.target.result;

        // Parse CSV data
        var workbook = XLSX.read(csvData, {
          type: 'string'
        });
        var xlsxFile = XLSX.write(workbook, {
          bookType: 'xlsx',
          type: 'binary'
        });

        // Create a Blob from the binary string
        var blob = new Blob([s2ab(xlsxFile)], {
          type: 'application/octet-stream'
        });

        // Prepare FormData
        var formData = new FormData();
        formData.append('file', blob, 'converted.xlsx');

        // Send the AJAX request
        $.ajax({
          url: baseURL + "editNumbersInBulk",
          type: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(response) {
            jQuery("#loaderModal").hide();
            if (response.code == 200) {
              getFileUploadStatus(response.data.jobId);
              toastr.info(response.data.message);
            } else {
              $('.simple-error-modal-msg-text').text('Something went wrong! Please try again.');
              $('.simple-error-modal').show();
            }
          },
          error: function() {
            jQuery("#loaderModal").hide();
            $('.simple-error-modal-msg-text').text('Error in updating numbers. Please try again.');
            $('.simple-error-modal').show();
          }
        });
      };

      // Read the file as text
      reader.readAsText(file);
    }
  }

  // Helper function to convert a string to an ArrayBuffer
  function s2ab(s) {
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i < s.length; i++) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }

  /** Add Telephone Number function **/
  function addInventory(formData) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "addInventory",
      type: 'POST',
      data: formData,
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 201) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          setTimeout(function() {
            $('.simple-success-modal').hide();
            var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
            NSInventoryTableObj.ajax.reload();
            $("#view-inventory-data").hide();
            $('.numbertype-submenu').show();
            $(".manage-NS-inventory-page").show();
            $(".inventory-table-div").show();
            //calling suggestion list function to add the new added entity also 
            getSuggestionsList();
          }, 1000);
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /** Edit Telephone Detail function **/
  function editInventory(formData) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "editInventory",
      type: 'POST',
      data: formData,
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          setTimeout(function() {
            $('.simple-success-modal').hide();
            var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
            NSInventoryTableObj.ajax.reload();
            $("#view-inventory-data").hide();
            $('.numbertype-submenu').show();
            $(".manage-NS-inventory-page").show();
            $(".inventory-table-div").show();
            //calling suggestion list function to add the new added entity also 
            getSuggestionsList();
          }, 1000);
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(xhr, status, error) {
        jQuery("#loaderModal").hide();
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
      }
    });
  }

  // function deleteInventory(telephoneNumber) {
  //   jQuery("#loaderModal").show();
  //   $.ajax({
  //     url: baseURL + "deleteInventory",
  //     type: 'POST',
  //     data: {
  //       telephoneNumber: telephoneNumber
  //     },
  //     success: function(response) {
  //       jQuery("#loaderModal").hide();
  //       if (response.code == 200) {
  //         $('.simple-success-modal-msg-text').text(response.message);
  //         $('.simple-success-modal').show();
  //       } else {
  //         $('.simple-error-modal-msg-text').text(response.message);
  //         $('.simple-error-modal').show();
  //       }
  //       jQuery("#loaderModal").hide();
  //     },
  //     error: function(error) {
  //       $('.simple-error-modal-msg-text').text(response.message);
  //       $('.simple-error-modal').show();
  //       jQuery("#loaderModal").hide();
  //     }
  //   });
  // }

  // function deleteMultipePhoneNumber(numberArray) {
  //   jQuery("#loaderModal").show();
  //   $.ajax({
  //     url: baseURL + "deleteMultipePhoneNumber",
  //     type: 'POST',
  //     data: {
  //       telephoneNumber: numberArray
  //     },
  //     success: function(response) {
  //       jQuery("#loaderModal").hide();
  //       if (response.code == 200) {
  //         $('.simple-success-modal-msg-text').text(response.message);
  //         $('.simple-success-modal').show();
  //       } else {
  //         $('.simple-error-modal-msg-text').text(response.message);
  //         $('.simple-error-modal').show();
  //       }
  //       jQuery("#loaderModal").hide();
  //     },
  //     error: function(error) {
  //       $('.simple-error-modal-msg-text').text(response.message);
  //       $('.simple-error-modal').show();
  //       jQuery("#loaderModal").hide();
  //     }
  //   });
  // }

  /** Download the Excel sheet for telephone numbers accordingly **/
  function downloadTelephoneDetailFile(data) {
    jQuery("#loaderModal").show();
    var xhr = $.ajax({
      url: baseURL + "downloadTelephoneDetailFile",
      type: 'POST',
      data: {
        TelephoneDetails: JSON.stringify(data)
      },
      success: function(res) {
        jQuery("#loaderModal").hide();
        var blob = new Blob([res], {
          type: 'text/csv'
        });
        var filename = "";
        if (xhr.getAllResponseHeaders().indexOf("Content-Disposition") >= 0) {
          console.log("header:", xhr.getResponseHeader('Content-Disposition'));
        }
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
          var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
          var matches = filenameRegex.exec(disposition);
          if (matches != null && matches[1]) {
            filename = matches[1].replace(/['"]/g, '');
          }
        }
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text(res.message);
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  function getCurrentDate() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0
    var yyyy = today.getFullYear();
    return yyyy + '-' + mm + '-' + dd;
  }

  /** main function to get the data and load the datatable **/
  function GetAllInventoryData() {
    var datatable = jQuery('#NS-inventory-table').DataTable({
      "buttons": ['colvis'],
      "bPaginate": true,
      'pageLength': 15,
      "pagingType": "full_numbers",
      "serverSide": true,
      // "scrollY": "440px",
      "scrollX": true,
      "sScrollXInner": "100%",
      "scrollCollapse": true,
      "processing": false,
      "searching": false,
      "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, 14, 15]
      }, {
        "bSearchable": false,
        "aTargets": [0, 14, 15]
      }],
      "responsive": {
        "breakpoints": [{
            name: 'desktop',
            width: Infinity
          },
          {
            name: 'tablet',
            width: 1024
          },
          {
            name: 'fablet',
            width: 768
          },
          {
            name: 'phone',
            width: 480
          }
        ]
      },
      'ajax': function(data, callback, settings) {
        jQuery("#NS-inventory-table_processing").show();
        var nsInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
        var params = nsInventoryTableObj ? nsInventoryTableObj.ajax.params() : '';
        var column_name = '';
        var sort_order = '';
        if (params.order[0].column == 1) {
          column_name = 'telephone_inventory_status';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 2) {
          column_name = 'account_number';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 3) {
          column_name = 'customer';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 4) {
          column_name = 'billing_status';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 5) {
          column_name = 'inventory_Type';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 6) {
          column_name = 'provider';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 7) {
          column_name = 'city';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 8) {
          column_name = 'state';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 9) {
          column_name = 'lata';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 10) {
          column_name = 'rate_center';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 11) {
          column_name = 'trunk_group';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 12) {
          column_name = 'carrier_Requested_CNAME';
          sort_order = params.order[0].dir;
        } else if (params.order[0].column == 13) {
          column_name = 'description';
          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
        };

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

        var postData = {
          pageSize: 15,
          pageNumber: (nsInventoryTableObj.page.info().page + 1),
          searchKeyword: (jQuery('.dataTables_filter input').val()),
          sortField: column_name,
          sortDirection: sort_order,
          filters: filterObject,
          numberType: numType
        };

        jQuery.ajax({
          url: baseURL + "getInventory",
          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("#NS-inventory-table_filter input[type='search']").prop("disabled", false);
            jQuery("#NS-inventory-table_processing").hide();
            $("#loaderModal").hide();
            var tempDataTableArr = [];
            var objResult = response;
            var totalRecords = objResult.content;
            var output = "";
            if (totalRecords && totalRecords.length > 0) {
              for (var i = 0; i < totalRecords.length; i++) {
                var output = '';
                output += '<div class="telcheck-div">';
                output += '<input type="checkbox" id="number-check-' + i + '" value="' + (totalRecords[i].telephoneNumber || '-') + '" class="row-checkbox checkbox-' + (totalRecords[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-' + (totalRecords[i].id || '-') + '" data-value=\'' + JSON.stringify(totalRecords[i]) + '\' title="' + (totalRecords[i].telephoneNumber || '-') + '">' + (totalRecords[i].telephoneNumber || '-') + '</div>';
                output += '</div>';

                var toDisplayFromDate = '';
                var toDisplayEndDate = '';

                if (totalRecords[i].allocationStartDate != '' && totalRecords[i].allocationStartDate != null) {
                  var frmtDT = new Date(totalRecords[i].allocationStartDate);
                  var fromDate = new Date(frmtDT);
                  // Get the year, month, and day components
                  var fromYear = fromDate.getFullYear();
                  var fromMonth = (fromDate.getMonth() + 1).toString().padStart(2, '0');
                  var fromDay = fromDate.getDate().toString().padStart(2, '0');

                  toDisplayFromDate = fromYear + "-" + fromMonth + "-" + fromDay;
                }

                if (totalRecords[i].allocationEndDate != '' && totalRecords[i].allocationEndDate != null) {
                  var toDT = new Date(totalRecords[i].allocationEndDate);
                  var toDate = new Date(toDT);

                  var toYear = toDate.getFullYear();
                  var toMonth = (toDate.getMonth() + 1).toString().padStart(2, '0');
                  var toDay = toDate.getDate().toString().padStart(2, '0');

                  toDisplayEndDate = toYear + "-" + toMonth + "-" + toDay;
                }

                var tempDataTableObj = {
                  telephoneNumber: output,
                  telephoneInventoryStatus: '<div class="label-text" title="' + (totalRecords[i].telephoneInventoryStatus !== null ? totalRecords[i].telephoneInventoryStatus : '-') + '">' + (totalRecords[i].telephoneInventoryStatus !== null ? totalRecords[i].telephoneInventoryStatus : '-') + '</div>',
                  accountNumber: '<div class="label-text" title="' + (totalRecords[i].accountNumber !== null ? totalRecords[i].accountNumber : '-') + '">' + (totalRecords[i].accountNumber !== null ? totalRecords[i].accountNumber : '-') + '</div>',
                  customer: '<div class="label-text customer-text" title="' + (totalRecords[i].customer || '-') + '">' +
                    (totalRecords[i].customer && totalRecords[i].customer.length > 30 ?
                      totalRecords[i].customer.substring(0, 50) + '...' :
                      (totalRecords[i].customer || '-')) +
                    '</div>',
                  billingStatus: '<div class="label-text" title="' + (totalRecords[i].billingStatus !== null ? totalRecords[i].billingStatus : '-') + '">' + (totalRecords[i].billingStatus !== null ? totalRecords[i].billingStatus : '-') + '</div>',
                  inventoryType: '<div class="label-text" title="' + (totalRecords[i].inventoryType !== null ? totalRecords[i].inventoryType : '-') + '">' + (totalRecords[i].inventoryType !== null ? totalRecords[i].inventoryType : '-') + '</div>',
                  provider: '<div class="label-text" title="' + (totalRecords[i].provider !== null ? totalRecords[i].provider : '-') + '">' + (totalRecords[i].provider !== null ? totalRecords[i].provider : '-') + '</div>',
                  city: '<div class="label-text" title="' + (totalRecords[i].city !== null ? totalRecords[i].city : '-') + '">' + (totalRecords[i].city !== null ? totalRecords[i].city : '-') + '</div>',
                  state: '<div class="label-text" title="' + (totalRecords[i].state !== null ? totalRecords[i].state : '-') + '">' + (totalRecords[i].state !== null ? totalRecords[i].state : '-') + '</div>',
                  lata: '<div class="label-text" title="' + (totalRecords[i].lata ?? '-') + '">' + (totalRecords[i].lata ?? '-') + '</div>',
                  rateCenter: '<div class="label-text" title="' + (totalRecords[i].rateCenter !== null ? totalRecords[i].rateCenter : '-') + '">' + (totalRecords[i].rateCenter !== null ? totalRecords[i].rateCenter : '-') + '</div>',
                  trunkGroup: '<div class="label-text" title="' + (totalRecords[i].trunkGroup !== null ? totalRecords[i].trunkGroup : '-') + '">' + (totalRecords[i].trunkGroup !== null ? totalRecords[i].trunkGroup : '-') + '</div>',
                  carrierRequestedCname: '<div class="label-text" title="' + (totalRecords[i].carrierRequestedCname !== null ? totalRecords[i].carrierRequestedCname : '-') + '">' + (totalRecords[i].carrierRequestedCname !== null ? totalRecords[i].carrierRequestedCname : '-') + '</div>',
                  description: '<div class="label-text description-text" title="' + (totalRecords[i].description || '-') + '">' +
                    (totalRecords[i].description && totalRecords[i].description.length > 100 ?
                      totalRecords[i].description.substring(0, 50) + '...' :
                      (totalRecords[i].description || '-')) +
                    '</div>',
                  testingResult: '<div class="label-text view-testing-result" id="view_id-' + (totalRecords[i].id) + '">' + 'View' + '</div>',
                  actions: '<td class="edit-and-delete"><i class="fas fa-edit action-edit icon" style="margin-right:5px;"></i></td>'
                  // <i class="fa fa-trash delete-action" id="action_delete-' + (totalRecords[i].telephoneNumber || '-') + '" icon" aria-hidden="true"></i>
                }
                tempDataTableArr.push(tempDataTableObj);
              }
              callback({
                data: tempDataTableArr,
                recordsTotal: response.totalElements,
                recordsFiltered: response.totalElements
              });
              jQuery('.dataTables_paginate').show();
              jQuery('#NS-inventory-table_info').show();
            } else {
              jQuery("#NS-inventory-table tbody").html("<tr><td></td><td></td><td></td><td>No Records Found.</td><td></td><td></td><td></td><td></td></tr>");
              jQuery('.dataTables_paginate').hide();
              jQuery('#NS-inventory-table_info').hide();
              jQuery('.total-added-number').html('0');
              jQuery("#NS-inventory-table_processing").hide();
            }
            jQuery(".payment_overlay").hide();
            jQuery("#NS-inventory-table_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: 'telephoneNumber'
        },
        {
          data: 'telephoneInventoryStatus'
        },
        {
          data: 'accountNumber'
        },
        {
          data: 'customer'
        },
        {
          data: 'billingStatus'
        },
        {
          data: 'inventoryType'
        },
        {
          data: 'provider'
        },
        {
          data: 'city'
        },
        {
          data: 'state'
        },
        {
          data: 'lata'
        },
        {
          data: 'rateCenter'
        },
        {
          data: 'trunkGroup'
        },
        {
          data: 'carrierRequestedCname'
        },
        {
          data: 'description'
        },
        {
          data: 'testingResult'
        },
        {
          data: 'actions'
        }
      ],
      "drawCallback": function(settings) {
        var nsInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
        jQuery("#NS-inventory-table_processing").hide();

      }
    });
  }


  /*AKASH July 2024
  Release the selected telephone numbers*/
  function releaseNumbers(transformedData) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "releaseNumbers",
      type: 'POST',
      data: transformedData,
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          setTimeout(function() {
            $('.simple-success-modal').hide();
            var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
            NSInventoryTableObj.ajax.reload();
          }, 1000);
          //calling suggestion list function to remove the entity
          getSuggestionsList();
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024
  Disconnect the selected telephone numbers*/
  function disconnectNumbers(transformedData) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "disconnectNumbers",
      type: 'POST',
      data: transformedData,
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          checkDisconnectResponse(response.data.disconnectId);
          $('.simple-success-modal-msg-text').text(response.data.message);
          $('.simple-success-modal').show();
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024
  check Disconnect the selected telephone numbers response*/
  function checkDisconnectResponse(id) {
    $.ajax({
      url: baseURL + "disconnectStatus",
      data: {
        disconnectStatusId: id
      },
      type: 'GET',
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          if (response.data.status.toLowerCase() == "pending") {
            setTimeout(function() {
              checkDisconnectResponse(id);
            }, 15000);
          } else if (response.data.status.toLowerCase() == "success") {
            $('.simple-success-modal-msg-text').text(response.message);
            $('.simple-success-modal').show();
            setTimeout(function() {
              var NSInventoryTableObj = jQuery('#NS-inventory-table').DataTable();
              NSInventoryTableObj.ajax.reload();
            }, 1000);
          } else {
            let originalMessage = response.data.message;

            // Match the phone numbers using a regex pattern to extract digits like "5734171123", "5734171124", etc.
            let phoneNumbers = originalMessage.match(/\d{10}/g); // This will find all occurrences of 10-digit numbers

            // Extract the part after the numbers, which is the remaining message
            let remainingMessage = originalMessage.split(': ')[1]; // Split based on the colon and space, assuming the message format

            // If phone numbers exist, join them with a comma
            if (phoneNumbers && phoneNumbers.length > 0) {
              // Bold the phone numbers and join them with a comma
              let formattedPhoneNumbers = phoneNumbers.map(function(num) {
                return '<strong>' + num + '</strong>'; // Wrap each phone number in <strong> for bolding
              }).join(', '); // Join phone numbers with comma

              // Combine bolded phone numbers with the remaining message
              let finalMessage = `${formattedPhoneNumbers} ${remainingMessage}`;

              // Update the modal text with the formatted message
              $('.simple-error-modal-msg-text').html(finalMessage); // Use .html() to allow HTML content (bold)
              $('.simple-error-modal').show();
            } else {
              $('.simple-error-modal-msg-text').text(response.data.message);
              $('.simple-error-modal').show();
            }
          }
        } else {
          $('.simple-error-modal-msg-text').text(response.data.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text(error.responseJSON.message);
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024
  Add the testing results corresponding to telephone number*/
  function addTestingResult(data) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "addTestingResult",
      type: 'POST',
      data: data,
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          var result = response.data;
          //add the result after getting success instantly in popup
          var newRowHtml = '<tr>';
          newRowHtml += '<td>' + result.carrierName + '</td>';
          newRowHtml += '<td class="cname" data-id="' + result.testingStatusId + '" data-original-value="' + result.cname + '">' +
            '<input type="text" class="cname-input" data-id="' + result.testingStatusId + '" value="' + result.cname + '" style="display: none;" />' +
            '<span class="cname-value">' + result.cname + '</span>' +
            '</td>';
          newRowHtml += '<td class="screenshot" data-id="' + result.testingStatusId + '" data-original-value="' + (result.screenshotGoogleVisionUrl !== null ? result.screenshotGoogleVisionUrl : '-') + '">' +
            '<input type="text" class="screenshot-input" data-id="' + result.testingStatusId + '" value="' + (result.screenshotGoogleVisionUrl !== null ? result.screenshotGoogleVisionUrl : '') + '" style="display: none;" />' +
            '<a class="screenshot-value" href="' + (result.screenshotGoogleVisionUrl !== null ? result.screenshotGoogleVisionUrl : '#') + '" target="_blank">' + (result.screenshotGoogleVisionUrl !== null ? result.screenshotGoogleVisionUrl : '-') + '</a>' +
            '</td>';
          newRowHtml += '<td>' +
            '<i class="fas fa-edit edit-icon edit-cname" data-id="' + result.testingStatusId + '"></i>' +
            '<i class="fa fa-trash delete-icon delete-testing-res" aria-hidden="true" data-id="' + result.testingStatusId + '"></i>' +
            '<i class="edit-icon fa fa-times cancel-cname" aria-hidden="true" style="display:none;"></i>' +
            '</td>';
          newRowHtml += '</tr>';

          // Check if "Testing result not found" message row exists
          var messageRow = $('.testing-result-table tbody tr').filter(function() {
            return $(this).find('td').text().trim() === 'Testing result not found';
          });

          if (messageRow.length > 0) {
            messageRow.remove(); // Remove the message row
          }

          // Append the new row
          $('.testing-result-table tbody').append(newRowHtml);

          // Hide the success modal after a timeout
          setTimeout(function() {
            $('.simple-success-modal').hide();
          }, 1000);
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024
  add testing result form validations*/
  function validateAndSubmitForm() {
    var carrierName = $('#carrierName').val();
    var cname = $('#cname').val();
    var isValid = true;
    if (!carrierName) {
      $('#carrierNameError').css('display', 'block');
      isValid = false;
    }

    if (!cname) {
      $('#cnameError').css('display', 'block');
      isValid = false;
    }
    // If any field is empty, return without submitting
    if (isValid) {
      var data = $("#addNewTetsingResultForm").serializeArray();
      var formattedData = {};
      data.forEach(function(item) {
        formattedData[item.name] = item.value.trim();
      });
      $('#carrierName, #cname').val('');
      $('#addNewTestingResult').hide();
      addTestingResult(formattedData);
    }
  };

  /*AKASH July 2024 
  function to update the cname instantly visible in table*/
  function updateCnameInUITable(updatedData) {
    if (updatedData && updatedData.length > 0) {
      updatedData.forEach(function(item) {
        var row = $('td.cname[data-id="' + item.testingStatusId + '"]').closest('tr');
        var cnameCell = row.find('td.cname[data-id="' + item.testingStatusId + '"]');
        var screenshotCell = row.find('td.screenshot[data-id="' + item.testingStatusId + '"]');
        // Update the span value and the input's value
        cnameCell.find('.cname-value').text(item.cname);
        cnameCell.find('input.cname-input').val(item.cname);
        screenshotCell.find('.screenshot-value').text(item.screenshotGoogleVisionUrl !== null ? item.screenshotGoogleVisionUrl : '-');
        screenshotCell.find('input.screenshot-input').val(item.screenshotGoogleVisionUrl !== null ? item.screenshotGoogleVisionUrl : '');

        // Update action cell
        var actionCell = row.find('td:last-child');
        actionCell.empty();
        actionCell.append('<i class="fas fa-edit edit-icon edit-cname" data-id="' + item.testingStatusId + '"></i>');
        actionCell.append('<i class="fa fa-trash delete-icon delete-testing-res" aria-hidden="true" data-id="' + item.testingStatusId + '"></i>');
        actionCell.append('<i class="edit-icon fa fa-times cancel-cname" aria-hidden="true" style="display:none;"></i>');
      });

      // Update original values for editing
      $('td.cname').each(function() {
        var originalValue = $(this).find('.cname-value').text();
        $(this).attr('data-original-value', originalValue);
      });
      $('td.screenshot').each(function() {
        var originalScreenshot = $(this).find('.screenshot-value').text();
        $(this).attr('data-original-value', originalScreenshot);
      });
    }
  }

  /*AKASH July 2024 
  function to edit the cname in testing result popup*/
  function editTestingResult(data) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "editTestingResult",
      type: 'POST',
      data: JSON.stringify(data),
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          updateCnameInUITable(response.data);
          setTimeout(function() {
            $('.simple-success-modal').hide();
          }, 1000);
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024 
  function to Delete the cname from testing result popup*/
  function deleteTestingResult(id) {
    jQuery("#loaderModal").show();
    var id = $('#testingStatusId').val();
    $.ajax({
      url: baseURL + "deleteTestingResult",
      type: 'POST',
      data: {
        testingStatusId: id
      },
      success: function(response) {
        jQuery("#loaderModal").hide();
        if (response.code == 200) {
          $('.simple-success-modal-msg-text').text(response.message);
          $('.simple-success-modal').show();
          // Remove the deleted row from the table
          var row = $('td.cname[data-id="' + id + '"]').closest('tr');
          row.remove();

          // Check if the table is empty and add a message if it is
          if ($('.testing-result-table tbody tr').length === 1) {
            $('.testing-result-table tbody').append('<tr><td colspan="4">Testing result not found</td></tr>');
          }

          setTimeout(function() {
            $('.simple-success-modal').hide();
          }, 1000);
        } else {
          $('.simple-error-modal-msg-text').text(response.message);
          $('.simple-error-modal').show();
        }
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text("Something went wrong! Please try again.");
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }


  /*AKASH July 2024 
  function to get testing result and 
  open the popup of testing result */
  function getTestingResults(id) {
    jQuery("#loaderModal").show();
    $.ajax({
      url: baseURL + "getTestingResult",
      type: 'GET',
      data: {
        telephone_id: id
      },
      success: function(response) {
        jQuery("#loaderModal").hide();
        var htmlContent = '<p class="pop-up-heading">Testing Result</p><div class="testing-result-div"><table class="testing-result-table">';
        htmlContent += '<tr class="testing-result-main-tr"><th style="width:25%;">Carrier Name</th><th style="width:25%;">CNAME</th><th>Screenshot URL</th><th class="action-column">Actions</th></tr>';

        if (response.code == 200 && response.data && response.data.length > 0) {
          var data = response.data;
          for (var i = 0; i < data.length; i++) {
            htmlContent += '<tr>';
            htmlContent += '<td>' + data[i].carrierName + '</td>';
            htmlContent += '<td class="cname" data-id="' + data[i].testingStatusId + '" data-original-value="' + data[i].cname + '">' +
              '<input type="text" class="cname-input" data-id="' + data[i].testingStatusId + '" value="' + data[i].cname + '" style="display: none;" />' +
              '<span class="cname-value">' + data[i].cname + '</span>' +
              '</td>';
            htmlContent += '<td class="screenshot" data-id="' + data[i].testingStatusId + '" data-original-value="' + (data[i].screenshotGoogleVisionUrl !== null ? data[i].screenshotGoogleVisionUrl : '-') + '">' +
              '<input type="text" class="screenshot-input" data-id="' + data[i].testingStatusId + '" value="' + (data[i].screenshotGoogleVisionUrl !== null ? data[i].screenshotGoogleVisionUrl : '') + '" style="display: none;" />' +
              '<a class="screenshot-value" href="' + (data[i].screenshotGoogleVisionUrl !== null ? data[i].screenshotGoogleVisionUrl : '#') + '" target="_blank">' + (data[i].screenshotGoogleVisionUrl !== null ? data[i].screenshotGoogleVisionUrl : '-') + '</a>' +
              '</td>';
            htmlContent += '<td class="action-column">' +
              '<i class="fas fa-edit edit-icon edit-cname" data-id="' + data[i].testingStatusId + '"></i>' +
              '<i class="fa fa-trash delete-icon delete-testing-res" aria-hidden="true" data-id="' + data[i].testingStatusId + '"></i>' +
              '<i class="edit-icon fa fa-times cancel-cname" aria-hidden="true" style="display:none;"></i>' +
              '</td>';
            htmlContent += '</tr>';
          }
        } else {
          htmlContent += '<tr><td colspan="4">Testing result not found</td></tr>';
        }

        htmlContent += '<button class="add-testing-result testing-add">Add New<i class="fa fa-plus" aria-hidden="true"></i></button>';
        htmlContent += '</table></div><div class="testing-result-btn-div"><button class="close-testing-result testing-close">Close</button>';
        htmlContent += '<button class="save-cname" style="display: none;">Save Changes</button></div>';
        $("#tableContainer").html(htmlContent);
        $("#tableContainer").css("display", "block");

        //Hide and show the column and btn according to the number type 
        if (numberType == 'history') {
          $('.action-column').hide();
          $('.add-testing-result').hide();
        } else {
          $('.edit-btn').show();
          $('.action-column').show();
        }

        // Edit icon click handler
        $(document).on('click', '#tableContainer .edit-cname', function() {
          var id = $(this).data('id');
          var row = $(this).closest('tr');
          var cnameCell = row.find('td.cname[data-id="' + id + '"]');
          cnameCell.find('input.cname-input').show();
          cnameCell.find('.cname-value').hide();
          var screenshotCell = row.find('td.screenshot[data-id="' + id + '"]');
          screenshotCell.find('input.screenshot-input').show();
          screenshotCell.find('.screenshot-value').hide();
          $(this).hide();
          row.find('.delete-testing-res').hide();
          row.find('.cancel-cname').show();
          cnameCell.addClass('editing');
          screenshotCell.addClass('editing');
          $('.save-cname').show();
        });

        // Cancel icon click handler
        $(document).on('click', '#tableContainer .cancel-cname', function() {
          var id = $(this).siblings('.edit-cname').data('id');
          var row = $(this).closest('tr');
          var cnameCell = row.find('td.cname[data-id="' + id + '"]');
          var originalValue = cnameCell.attr('data-original-value');
          cnameCell.find('input.cname-input').hide();
          cnameCell.find('.cname-value').text(originalValue).show();
          var screenshotCell = row.find('td.screenshot[data-id="' + id + '"]');
          var originalValuescreenshot = screenshotCell.attr('data-original-value');
          screenshotCell.find('input.screenshot-input').hide();
          screenshotCell.find('.screenshot-value').text(originalValuescreenshot).show();
          cnameCell.removeClass('editing');
          screenshotCell.removeClass('editing');
          $(this).hide();
          row.find('.delete-testing-res').show();
          row.find('.edit-cname').show();
          if ($('td.cname.editing').length === 0) {
            $('.save-cname').hide();
          }
        });

        // Add new icon click handler
        $(document).on('click', '#tableContainer .testing-add', function() {
          $('#addNewTestingResult').show();
          $('#telephoneInventoryId').val(id);
        });

        // Delete icon click handler
        $(document).on('click', '#tableContainer .delete-testing-res', function() {
          var id = $(this).data('id');
          $('#testingStatusId').val(id);
          $('.simple-delete-modal').show();
        });

        // Save button click handler
        $(document).on('click', '#tableContainer .save-cname', function() {
          var editedData = [];
          $('tr').each(function() {
            var cnameTd = $(this).find('td.cname.editing');
            if (cnameTd.length) {
              var id = cnameTd.data('id');
              var editedValue = cnameTd.find('input.cname-input').val().trim();

              // Select the screenshot input from the corresponding td.screenshot element
              var screenshotTd = $(this).find('td.screenshot');
              var editedScreenshot = screenshotTd.find('input.screenshot-input').val();
              editedData.push({
                testingStatusId: id,
                cname: editedValue,
                screenshotGoogleVisionUrl: editedScreenshot
              });
              $(this).removeClass('editing');
              $(this).find('input.cname-input').hide();
              $(this).find('.cname-value').show();
              $(this).find('input.screenshot-input').hide();
              $(this).find('.screenshot-value').show();
              $(this).closest('tr').find('.edit-cname').show();
              $(this).closest('tr').find('.cancel-cname').hide();
            }
          });
          editTestingResult(editedData);
          $('.save-cname').hide();
        });
      },
      error: function(error) {
        $('.simple-error-modal-msg-text').text(error.responseJSON.message);
        $('.simple-error-modal').show();
        jQuery("#loaderModal").hide();
      }
    });
  }

  /*AKASH July 2024
  function to export whole data without pagination*/
  function exportAllData() {
    jQuery("#loaderModal").show();
    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
    };

    var numType;
    if (numberType == 'history') {
      numType = 'history';
    } else {
      numType = 'active';
    }
    var postData = {
      paginationEnabled: false,
      filters: filterObject,
      searchKeyword: (jQuery('.dataTables_filter input').val()),
      numberType: numType
    };
    $.ajax({
      url: baseURL + "getInventory",
      type: 'GET',
      data: postData,
      success: function(res) {
        if (res.content.length) {
          downloadTelephoneDetailFile(res.content);
        } else {
          jQuery("#loaderModal").hide();
          $('.simple-error-modal-msg-text').text('No data to Export');
          $('.simple-error-modal').show();
        }
      },
      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();
      }
    });
  }

  /*AKASH July 2024
  function to display suggestions in searched result in filter*/
  function displaySearchResults(data, filterName) {
    var filterMap = {
      'customer': '#customer-search-results',
      'accountNumber': '#accountNumber-search-results',
      'zohoOrderNumber': '#zohoOrderNumber-search-results',
      'lata': '#lata-search-results',
      'rateCenter': '#rateCenter-search-results',
      // 'npa': '#npa-search-results',
      'npaNxx': '#npaNxx-search-results',
    };

    var resultsContainer = $(filterMap[filterName]);
    if (!resultsContainer.length) {
      return; // Exit if the filterName doesn't match any key in filterMap
    }

    // Clear previous results
    resultsContainer.empty();

    if (data.length > 0) {
      var uniqueValues = new Set();

      data.forEach(function(item) {
        var displayText = '';
        // if (filterName == 'npaNxx') {
        //   displayText = item['telephoneNumber'].substring(0, 6);
        // } else {
        displayText = item[filterName] || '';
        // }

        // Check if the value is already in the set
        if (!uniqueValues.has(displayText) && displayText !== '') {
          uniqueValues.add(displayText);

          var resultElement = $('<div class="search-result"></div>')
            .text(displayText)
            .data('item', item); // Associate the entire item with the element

          resultElement.on('click', function() {
            var selectedItem = $(this).data('item'); // Get the associated item
            // Clear results after selection
            resultsContainer.empty();
            // Set the input value based on filterName
            var inputValue = selectedItem[filterName] || '';
            var inputField = $(`#${filterName}-search`);
            inputField.val(inputValue);
            // Hide the results container
            resultsContainer.css("display", "none");
          });

          resultsContainer.append(resultElement);
        }
      });
    } else {
      resultsContainer.html('<div class="search-result">No results found</div>');
    }
  }


  /*AKASH July 2024
  function to search the filter value*/
  function searchFilterValue(value, filtername) {
    var originalFilterName = filtername;
    var filters = {};
    //doing this because we have to send the key like the below
    //this is only for search filter fields
    if (filtername == 'accountNumber') {
      filtername = 'account_number';
    } else if (filtername == 'zohoOrderNumber') {
      filtername = 'zoho_order_number';
    } else if (filtername == 'rateCenter') {
      filtername = 'rate_center';
    }
    filters[filtername] = value;

    var filterObject = {
      filters: filters
    };

    var postData = {
      paginationEnabled: false,
      filters: filterObject
    };
    $.ajax({
      url: baseURL + "getInventory",
      type: 'GET',
      data: postData,
      success: function(res) {
        filtername = originalFilterName;
        var resultcontainer = '#' + filtername + '-search-results';
        if (filtername == 'npaNxx') {
          var npanxxResults = res.content.map(function(item) {
            return {
              npaNxx: value.length <= 3 ? item.telephoneNumber.substring(0, 3) : item.telephoneNumber.substring(0, 6)
            };
          });

          // Replace the original response content with npanxx trimmed data
          res.content = npanxxResults;
        }

        $(resultcontainer).css("display", "inline-block");
        jQuery(".filter-div .glyphicon-search.fa.fa-search").css('display', 'inline-block');
        jQuery(".filter-div .fa-spinner").css('display', 'none');
        jQuery(".filter-div input[type='search']").prop("disabled", false);

        displaySearchResults(res.content, filtername);
      },
      error: function(jqXhr, textStatus, errorThrown) {}
    });
  }

  /*AKASH aug 2024
  function to get all the data and put it in suggestionList*/
  function getSuggestionsList() {
    var postData = {
      paginationEnabled: false,
      numberType: 'active'
    };

    $.ajax({
      url: baseURL + "getInventory",
      type: 'GET',
      data: postData,
      success: function(res) {
        //clear all the previous data to avoid duplication
        suggestionList.customer = [];
        suggestionList.lata = [];
        suggestionList.rateCenter = [];
        suggestionList.accountNumber = [];
        suggestionList.zohoOrderNumber = [];
        // Initialize or clear suggestionList with Sets for uniqueness
        var uniqueCustomers = new Set();
        var uniqueLatas = new Set();
        var uniqueRateCenters = new Set();
        var uniqueAccountNumbers = new Set();
        var uniqueZohoOrderNumbers = new Set();

        // Process response and populate suggestionList
        if (res.content && res.content.length) {
          res.content.forEach(function(item) {
            if (item.customer && !uniqueCustomers.has(item.customer)) {
              uniqueCustomers.add(item.customer);
              suggestionList.customer.push(item.customer);
            }

            if (item.lata && item.lata !== 'null' && !uniqueLatas.has(item.lata)) {
              uniqueLatas.add(item.lata);
              suggestionList.lata.push(item.lata);
            }

            if (item.rateCenter && item.rateCenter !== 'null' && !uniqueRateCenters.has(item.rateCenter)) {
              uniqueRateCenters.add(item.rateCenter);
              suggestionList.rateCenter.push(item.rateCenter);
            }

            if (item.accountNumber && !uniqueAccountNumbers.has(String(item.accountNumber))) {
              uniqueAccountNumbers.add(String(item.accountNumber));
              suggestionList.accountNumber.push(String(item.accountNumber));
            }

            if (item.zohoOrderNumber && !uniqueZohoOrderNumbers.has(item.zohoOrderNumber)) {
              uniqueZohoOrderNumbers.add(item.zohoOrderNumber);
              suggestionList.zohoOrderNumber.push(item.zohoOrderNumber);
            }
          });

          attachInputHandler('#customer_name', suggestionList.customer, '#customer-suggestions');
          attachInputHandler('#account-number', suggestionList.accountNumber, '#account-number-suggestions');
          attachInputHandler('#lata_name', suggestionList.lata, '#lata-suggestions');
          attachInputHandler('#rate-center', suggestionList.rateCenter, '#rate-center-suggestions');
          attachInputHandler('#zoho-order-no', suggestionList.zohoOrderNumber, '#zohoOrderNumber-suggestions');
        } else {
          console.log('No data available');
        }
      },
      error: function(jqXhr, textStatus, errorThrown) {
        console.error('Error fetching suggestions:', textStatus);
      }
    });
  }
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection