<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
  <head>
  <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sas Radius Pro Dashboard</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- boostrap -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/bootstrap.js"></script>
    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
  </head>
  <body>
    <main>
      <div class="overflow_sidebar"></div>
      <!-- start sidebar -->
      <div class="sidebar">
@include('include.sidebar')
          </div>
       
        </div>
      </div>
      <!-- end sidebar -->

      <div class="content_page">
        <div class="header">
          <div class="left">
            <div class="icon_menu">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                />
              </svg>
            </div>
            <div class="logo_header">
              <img src="images/logo.png" alt="logo" loading="lazy" />
            </div>
            <div class="input_search">
              <input type="text" placeholder="Search..." />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                />
              </svg>
            </div>
          </div>
          <div class="right">
@include('include.translation')
            <div class="notfication">
              <div class="head">
                <div class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="nav_item">
              <div class="head">
                <img
                  class="img_profile"
                  src="images/user-1.jpg"
                  alt="user-1"
                  loading="lazy"
                />
              </div>
              <div class="list list2">
                <h4 class="title">Profile</h4>
                <div class="profile">
                  <img src="images/user-1.jpg" alt="user-1" loading="lazy" />
                  <div class="text">
                    <div class="name">Mathew Anderson</div>
                    <div class="position">Designer</div>
                    <div class="email">
                      <i class="fa-regular fa-envelope"></i>
                      <span>Info@example.com</span>
                    </div>
                  </div>
                </div>
                <a href="login.html" class="btn_logout">Logout</a>
              </div>
            </div>
          </div>
        </div>

        <div class="main_content_tables">
          <div class="conetnt_table">
            <div class="path">
              <span>{{__('Home / System Logs')}}</span>
            </div>

            <div class="head_table">
              <div class="info">
                <p class="text_details">
                  <i class="fa-solid fa-people-group"></i>
{{__("Menu System Log | Found :count", ['count' => count($logs)])}}
                </p>
              </div>

              <div class="input_search">
                <input type="text" placeholder="Search..." />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-6 h-6"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                  ></path>
                </svg>
              </div>

              <div class="utils">
                <div class="actions_box">
                  <button class="btn_actions">
                    <i class="fa-solid fa-wrench"></i>
                    {{ __('operations') }}
                  </button>

                  <div class="box box_utils">
                   
                    <div class="item">
                      <i class="fa-solid fa-trash"></i>
                      <button id="deletebtn">
                        <span> {{ __('delete') }}</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="reload">
                  <button class="btn_utils">
                    <i class="fa-solid fa-repeat"></i>
                  </button>
                </div>
                <div class="filter">
                  <button class="btn_utils">
                    <i class="fa-solid fa-filter"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="container_table">
              <table id="table" class="display" style="width: 100%">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox"  id="selectAll" />
                    </th>
                    <th>{{__("Operation")}}</th>
                    <th>{{__("Details")}}</th>
                    <th>{{__("Creation Date")}}</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($logs as $log)
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>{{$log->operation}}</td>
                    <td>{{$log->operation}} added with id {{$log->id}}</td>
                    <td>{{$log->created_at}}</td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script src="js/model.js"></script>
    <script src="js/tableUtils.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
      const selectAllCheckbox = document.getElementById('selectAll')
      const deletebtn = document.getElementById('deletebtn')
      const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');

      const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      const selectedlogs = new Set();
      function sendDeletionRequest(){
  fetch('/delete-system-logs', {

    method:'post',
    headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                  },
                  body:JSON.stringify({'logs': Array.from(selectedlogs)})
  })
}

 deletebtn.addEventListener('click',function(){
console.log('hey')
sendDeletionRequest()
setTimeout(()=>{
  window.location.reload()
},1200)
 })

// Add a change event listener to the selectAllCheckbox
selectAllCheckbox.addEventListener('change', function() {
  // Iterate over each checkbox
  checkboxes.forEach(checkbox => {
    // Set the checked state of each checkbox to match the selectAllCheckbox
    checkbox.checked = this.checked;
    
    // Find the closest <tr> element relative to the current checkbox
    const row = checkbox.closest('tr');
    console.log(row);
    
    // Safely access the creation date from the 4th cell (index 3)
    const creationdate = row.cells[3].textContent.trim();
    
    if (checkbox.checked) {
      // Add the creation date to the Set if the checkbox is checked
      selectedlogs.add(creationdate);
      console.log(creationdate);
      console.log(selectedlogs);
    } else {
      // Remove the creation date from the Set if the checkbox is unchecked
      selectedlogs.delete(creationdate);
    }
  });
});

      checkboxes.forEach((checkbox)=>{
        checkbox.addEventListener('change',function(){
 if (checkbox.checked){

  const row = this.closest('tr');

  const creationdate = row.cells[3].textContent.trim();
  console.log(creationdate)


  selectedlogs.add(creationdate)
  console.log(selectedlogs)
 }
 else{
  selectedlogs.delete(creationdate)
 }


        })
       
      })

        
 


      $(document).ready(function () {
        $("#table").DataTable({
          pagingType: "full_numbers",
          scrollX: true,
        });
      });
    </script>
  </body>
</html>
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
  <head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ __('sas_radius_pro_dashboard') }}</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- bootstrap -->
    @if (app()->getLocale() == 'ar')
        <!-- Bootstrap RTL -->
        <link rel="stylesheet" href="css/bootstrap-rtl.css" />
    @else
        <!-- Bootstrap LTR -->
        <link rel="stylesheet" href="css/bootstrap.css" />
    @endif
    <script src="js/bootstrap.js"></script>
    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
    <style>
      /* Your existing Custom CSS for Modals */
      .custom-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.5);
      }

      .custom-modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
        border-radius: 8px;
        position: relative;
        animation-name: animatetop;
        animation-duration: 0.4s;
      }

      @keyframes animatetop {
        from {opacity: 0; transform: translateY(-50px);}
        to {opacity: 1; transform: translateY(0);}
      }

      .custom-modal .close {
        color: #aaa;
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }

      .custom-modal .close:hover,
      .custom-modal .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }

      .btn {
        padding: 10px 20px;
        margin: 5px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .btn-primary {
        background-color: #e74c3c;
        color: white;
      }

      .btn-close {
        background-color: #95a5a6;
        color: white;
      }

      /* Delete Confirmation Modal Specific Styles */
      #deleteConfirmationModal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index: 1001; /* Above other modals if any */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
      }

      #deleteConfirmationModal .custom-modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 400px; /* Max width */
        border-radius: 8px;
        position: relative;
        animation-name: animatetop;
        animation-duration: 0.4s;
      }

      #deleteConfirmationModal .confirm-delete {
        background-color: #e74c3c;
        color: white;
      }

      #deleteConfirmationModal .cancel-delete {
        background-color: #95a5a6;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="overflow_sidebar"></div>
      
      <!-- Start Sidebar -->
      <div class="sidebar">
        @include('include.sidebar')
      </div>
      <!-- End Sidebar -->

      <div class="content_page">
        <div class="header">
          <div class="left">
            <div class="icon_menu">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 
                  5.25h16.5"
                />
              </svg>
            </div>
            <div class="logo_header">
              <img src="images/logo.png" alt="logo" loading="lazy" />
            </div>
            <div class="input_search">
              <input type="text" placeholder="{{ __('search_placeholder') }}" />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 
                  7.5 0 105.196 5.196a7.5 7.5 0 0010.607 
                  10.607z"
                ></path>
              </svg>
            </div>
          </div>
          <div class="right">
          @include('include.translation')

            <div class="notfication">
              <div class="head">
                <div class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M14.857 
                      17.082a23.848 23.848 0 005.454-1.31A8.967 
                      8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 
                      8.967 0 01-2.312 6.022c1.733.64 3.56 
                      1.085 5.455 
                      1.31m5.714 0a24.255 24.255 
                      0 01-5.714 0m5.714 
                      0a3 3 0 11-5.714 0M3.124 
                      7.5A8.969 8.969 0 015.292 3m13.416 
                      0a8.969 8.969 0 012.168 4.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="nav_item">
              <div class="head">
                <img
                  class="img_profile"
                  src="images/user-1.jpg"
                  alt="user-1"
                  loading="lazy"
                />
              </div>
              @include('include.profile')
            </div>
          </div>
        </div>

        <div class="main_content_tables">
          <div class="conetnt_table">
            <div class="path">
              <span>{{ __('home') }}</span> /
              <span>{{ __('groups') }}</span>
            </div>

            <div class="head_table">
              <div class="info">
                <p class="text_details">
                  <i class="fa-solid fa-people-group"></i>
                  {{ __('Group List | Found :count Entries', ['count' => count($allData)]) }}
                </p>
              </div>

              <div class="input_search">
                <input type="text" placeholder="{{ __('search_placeholder') }}" />
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-6 h-6"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M21 
                    21l-5.197-5.197m0 0A7.5 
                    7.5 0 105.196 5.196a7.5 
                    7.5 0 0010.607 
                    10.607z"
                  ></path>
                </svg>
              </div>

              <div class="utils">
                <div class="actions_box">
                  <button class="btn_actions">
                    <i class="fa-solid fa-wrench"></i>
                    {{ __('operations') }}
                  </button>

                  <div class="box box_utils">
                    <a href={{ route('addmgrp') }} class="item">
                      <i class="fa-solid fa-plus"></i>
                      <span>{{ __('add') }}</span>
                    </a>
                    <a id='aview' href={{ route('prfgrp') }} class="item">
                      <i class="fa-solid fa-eye"></i>
                      <span>{{ __('view') }}</span>
                    </a>
                    <a href={{ route('addgrop') }} class="item">
                      <i class="fa-solid fa-envelope"></i>
                      <span>{{ __('send_message') }}</span>
                    </a>
                    <div class="item btn_open_model" data-model="1">
                      <i class="fa-solid fa-right-left"></i>
                      <span> {{ __('move_clients') }}</span>
                    </div>
                    <div class="item">
                      <i class="fa-solid fa-users-slash"></i>
                      <span>{{ __('delete_clients') }}</span>
                    </div>
                    <div class="item">
                      <i class="fa-solid fa-trash"></i>
                      <button id="deletebtn">
                        <span> {{ __('delete') }}</span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="reload">
                  <button class="btn_utils">
                    <i class="fa-solid fa-repeat"></i>
                  </button>
                </div>
                <div class="filter">
                  <button class="btn_utils">
                    <i class="fa-solid fa-filter"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="container_table">
              <table id="table" class="display" style="width: 100%">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" id="selectAll"/>
                    </th>
                    <th>{{ __('name') }}</th>
                    <th>{{ __('clients') }}</th>
                    <th>{{ __('notes') }}</th>
                    <th>{{ __('creation_date') }}</th>
                  </tr>
                </thead>
                <tbody>
                  @if($allData)
                  @foreach($allData as $data)
                  <tr>
                    <td>
                      <input type="checkbox" class="row-checkbox"/>
                    </td>
                    <td>
                      <a href="profile-group.html">{{ $data->name }}</a>
                    </td>
                    <td>{{ __('all_clients') }}</td>
                    <td>{{ $data->comment }}</td>
                    <td>2023-05-04 13:09:32</td>
                  </tr>
                  @endforeach
                  @endif
                  <tr>
                    <td>
                      <input type="checkbox" class="row-checkbox"/>
                    </td>
                    <td>
                      <a href={{ route('addmgrp') }}>{{ __('all_clients') }}</a>
                    </td>
                    <td>136</td>
                    <td></td>
                    <td>2023-05-04 13:09:32</td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" class="row-checkbox"/>
                    </td>
                    <td>
                      <a href="profile-group.html">{{ __('all_clients') }}</a>
                    </td>
                    <td>136</td>
                    <td></td>
                    <td>2023-05-04 13:09:32</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Start Modal Add Group -->
    <div class="overflow"></div>
    <div class="model_poup" data-model="1">
      <div class="content">
        <div class="head">
          <h5 class="title_model">{{ __('groups') }}</h5>
          <div class="close_model">
            <i class="fa-solid fa-xmark"></i>
          </div>
        </div>
        <form action="">
          <div class="input_item">
            <label for="group_select">{{ __('select_group') }}</label>
            <select name="group" id="group_select">
              <option value=""></option>
              <option value="allclients">{{ __('all_clients') }}</option>
            </select>
          </div>

          <button class="btn_submit">{{ __('confirm') }}</button>
        </form>
      </div>
    </div>
    <!-- End Modal Add Group -->

    <!-- Delete Confirmation Modal -->
    <div id="deleteConfirmationModal" class="custom-modal">
      <div class="custom-modal-content">
        <span class="close">&times;</span>
        <h5>{{ __('Delete Confirmation') }}</h5>
        <p>{{ __('Are you sure you want to delete the selected groups? This action cannot be undone.') }}</p>
        <button class="btn btn-primary confirm-delete">{{ __('Confirm') }}</button>
        <button class="btn btn-close cancel-delete">{{ __('Cancel') }}</button>
      </div>
    </div>

    <script src="js/model.js"></script>
    <script src="js/tableUtils.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
  pdata = {};

  const selectedPhones = new Set();

  function checkSessionStatus() {
    const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
    const deleteBtn = document.getElementById('deletebtn');
    const selectAllCheckbox = document.getElementById('selectAll');

    selectAllCheckbox.addEventListener('change', function() {
      checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
        const phone = checkbox.closest('tr').cells[1].textContent.trim();
        if (this.checked) {
          selectedPhones.add(phone);
          // Optionally, you can collect more data here if needed
        } else {
          selectedPhones.delete(phone);
        }
      });
    });

    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', function() {
        const row = this.closest('tr');
        const phone = row.cells[1].textContent.trim();

        if (this.checked) {
          selectedPhones.add(phone);
          // Collect additional data if necessary
        } else {
          selectedPhones.delete(phone);
        }
      });
    });

    deleteBtn.addEventListener('click', function() {
      if (selectedPhones.size > 0) {
        showDeleteConfirmationModal();
      } else {
        alert('No groups selected for deletion.');
      }
    });
  }

  function showDeleteConfirmationModal() {
    const modal = document.getElementById('deleteConfirmationModal');
    modal.style.display = 'block';

    // Get modal elements
    const closeModal = modal.querySelector('.close');
    const confirmDeleteBtn = modal.querySelector('.confirm-delete');
    const cancelDeleteBtn = modal.querySelector('.cancel-delete');

    // When the user clicks on <span> (x), close the modal
    closeModal.onclick = function() {
      modal.style.display = 'none';
    };

    // When the user clicks on "Cancel", close the modal
    cancelDeleteBtn.onclick = function() {
      modal.style.display = 'none';
    };

    // When the user clicks on "Confirm", proceed to delete
    confirmDeleteBtn.onclick = function() {
      deleteSelectedRows();
      modal.style.display = 'none';
    };

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = 'none';
      }
    };
  }

  function deleteSelectedRows() {
    if (selectedPhones.size === 0) {
      alert('No groups selected for deletion.');
      return;
    }

    console.log('Phones to delete:', Array.from(selectedPhones)); // Debug log
    fetch('/delete-rows-groups', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      body: JSON.stringify({ phones: Array.from(selectedPhones) })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        selectedPhones.forEach(phone => {
          const rows = document.querySelectorAll('tbody tr');
          for (let row of rows) {
            if (row.cells[1] && row.cells[1].textContent.trim() === phone) {
              row.remove();
              break;
            }
          }
        });
        selectedPhones.clear();
        alert('Selected groups deleted successfully.');
      } else {
        alert('Error deleting groups: ' + data.message);
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('An error occurred while deleting groups.');
    });
  }

  function sendreqprofile(){
    fetch('/handleprofilegroupdata', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      body: JSON.stringify(pdata)
    })
    .then(response => response.json())
    .then(data => {
      console.log('Profile data sent successfully:', data);
    })
    .catch(error => {
      console.error('Error sending profile data:', error);
    });
  }

  const viewIdBtn = document.getElementById('aview');
  console.log('viewIdBtn:', viewIdBtn); 
  if (viewIdBtn) {
    viewIdBtn.addEventListener('click', function() {
      console.log('Button clicked!');
      console.log(pdata);
      sendreqprofile();
    });
  } else {
    console.error('Button with id "aview" not found');
  }

  checkSessionStatus();

  $(document).ready(function () {
    $("#table").DataTable({
      pagingType: "full_numbers",
      scrollX: true,
    });
  });
</script>
  </body>
</html> add the deletion modal from the user groups html and add it to the system lgos html and send me the full modified html