<!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 -->
    <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>
      <!-- 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"
                />
              </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" />
                    </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" />
                    </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" />
                    </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 model 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="">{{ __('select_group') }}</label>
            <select name="" id="">
              <option value=""></option>
              <option value="">{{ __('all_clients') }}</option>
            </select>
          </div>

          <button class="btn_submit">{{ __('confirm') }}</button>
        </form>
      </div>
    </div>
    <!-- end model add group -->

    <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 = true;
            const phone = checkbox.closest('tr').cells[1].textContent.trim();
            selectedPhones.add(phone);
        });
        
        setTimeout(() => {
            this.checked = false;
        }, 0);

    });

    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);
                const accountName = row.cells[1].textContent.trim();
                const customertype = row.cells[2].textContent.trim();
                const created_at = row.cells[4].textContent.trim();
                const data = {
                    name: accountName,
                    customertype: customertype,
                    created_at: created_at
                };
                fetch('api/data/profile-client-groups', {
                    method: 'post',        
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify(data)
                })
                console.log('Added:', phone, data);
            } else {
                selectedPhones.delete(phone);
                console.log('Removed:', phone);
            }
           
        });
    });

    deleteBtn.addEventListener('click', function() {
        if (selectedPhones.size > 0) {
            deleteSelectedRows();
        }
    });

}

function deleteSelectedRows() {
    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_rows_deleted_successfully") }}');
        } else {
            alert('{{ __("error_deleting_rows") }} ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('{{ __("an_error_occurred_while_deleting_rows") }}');
    });
}
console.log(pdata);

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_aview_not_found") }}');
}

checkSessionStatus();
      $(document).ready(function () {
        $("#table").DataTable({
          pagingType: "full_numbers",
          scrollX: true,
        });
      });
    </script>
  </body>
</html> make it when switch to arabic and english change direction and explain how