<!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 = 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 with id "aview" not found');
}

checkSessionStatus();
      $(document).ready(function () {
        $("#table").DataTable({
          pagingType: "full_numbers",
          scrollX: true,
        });
      });
    </script>
  </body>
</html make it when deleting it shows a deletion modal