<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <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>
    
  
        

      <!-- 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">
            <div class="nav_item">
              <div class="head">
                <img
                  class="lang"
                  src="images/Flag-United-States-of-America.webp"
                  alt="Flag-United-States-of-America"
                  loading="lazy"
                />
              </div>
              <div class="list list1">
                <div class="item">
                  <img
                    src="images/Flag-United-States-of-America.webp"
                    alt="Flag-United-States-of-America"
                    loading="lazy"
                  />
                  <span>English (UK)</span>
                </div>
                <div class="item">
                  <img src="images/ar.png" alt="ar-img" loading="lazy" />
                  <span>Arabic (ar)</span>
                </div>
              </div>
            </div>
            <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="content_profile_subscriber">
          <div class="path">
            <span>الرئيسيه</span> /
            <span>العملاء</span>
          </div>

          <div class="nav_container">
            <div class="nav_profile">
              <div class="item active" data-num="1">
                <i class="fa-regular fa-user"></i>
                <span>جهه الاتصال</span>
              </div>
              <div class="item" data-num="2">
                <i class="fa-regular fa-pen-to-square"></i>
                <span>ارسل رساله</span>
              </div>
            </div>
          </div>

          <div class="section_profile sending_destination active" data-num="1">
            <div class="line">
              <div class="left">
                <div class="accordion" id="accordionExample">
                  <div
                    class="accordion-item"
                    data-aos="fade-right"
                    data-aos-delay="1000"
                    data-aos-duration="300"
                  >
                    <h2 class="accordion-header" id="headingOne">
                      <button
                        class="accordion-button"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseOne"
                        aria-expanded="true"
                        aria-controls="collapseOne"
                      >
                        <h5>رقم الهاتف</h5>
                        <span> اختر رقم هاتف محدد لارسال الرسالة</span>
                      </button>
                    </h2>
                    <div
                      id="collapseOne"
                      class="accordion-collapse collapse show"
                      aria-labelledby="headingOne"
                      data-bs-parent="#accordionExample"
                    >
                      <div class="accordion-body">
                        <form action="">
                          <div class="input_item">
                            <label for="">رقم الهاتف</label>
                            <input type="number" id="phoneNum"/>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <div
                    class="accordion-item"
                    data-aos="fade-right"
                    data-aos-delay="1000"
                    data-aos-duration="500"
                  >
                    <h2 class="accordion-header" id="headingTwo">
                      <button
                        class="accordion-button collapsed"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo"
                        aria-expanded="false"
                        aria-controls="collapseTwo"
                      >
                      <div class="sessions">
                      <h5>ادخل الجلسه</h5>
                      <span> اختر جلسه محددة لارسال الرسائل منها</span>
                      </div>
                      
                      </button>
                    </h2>
                    
                    <div
                      id="collapseTwo"
                      class="accordion-collapse collapse"
                      aria-labelledby="headingTwo"
                      data-bs-parent="#accordionExample"
                    >
                 
                      <div class="input_item">
                        <div id="container">
                        <label for="">الجلسات</label>
                          <select name="" id="customersId" >
                             @foreach($sessions as $session ) 
                            <option value="">{{$session->name}}</option>
                            @endforeach
                          </select>
                        </div>
                       
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="accordion" id="accordionExample2">
                  <div
                    class="accordion-item"
                    data-aos="fade-left"
                    data-aos-delay="1000"
                    data-aos-duration="300"
                  >
                    <h2 class="accordion-header" id="headingSix">
                      <button
                        class="accordion-button"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapseSix"
                        aria-expanded="true"
                        aria-controls="collapseSix"
                      >
                        <h5>المجموعة</h5>
                        <span> اختر مجموعة ليتم استخدامها كجهة ارسال</span>
                      </button>
                    </h2>
                    <div
                      id="collapseSix"
                      class="accordion-collapse collapse show"
                      aria-labelledby="headingSix"
                      data-bs-parent="#accordionExample"
                    >
                      <div class="accordion-body">
                        <div class="alert alert-primary" role="alert">
                          الهاتف الاساسى فقط
                        </div>
                        <div class="input_item">
                          <label for="">المجموعه</label>
                          <select name="" id="">
                             @foreach($datas as $data ) 
                            <option value="">{{$data->name}}</option>
                            @endforeach

                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="section_profile send_message" data-num="2">
    <form onsubmit="return false;">
        <div class="input_item">
            <label for="">ادخل الرسالة المراد استخدامها</label>
            <textarea name="" id="ae"></textarea>
        </div>
        <div class="input_file">
            <label for="file-image">
                <span>ارفاق صوره</span>
            </label>
            <input type="file" id="file-image" class="d-none" />
        </div>
        <div class="btns_add">
            <button id="submitBtn" class="btn_add" type="submit" data-model="1">موافق</button>
            <button class="btn_close" type="button">الغاء</button>
        </div>
    </form>
</div>
</div>
</div>
</main>
<!-- start model add phone -->
<div class="overflow"></div>
<div class="model_poup" data-model="1">
     <div class="content">
        <div class="head">
            <h5 class="title_model">اضافه هاتف</h5>
            <div class="close_model">
                <i class="fa-solid fa-xmark"></i>
            </div>
        </div>
        <form onsubmit="return false;">
            <div class="input_item">
                <label for="">رقم الهاتف</label>
                <input type="number" value="" id="phonenum"/>
            </div>
            <button  id="submitBtn" class="btn_submit" type="button">موافق</button>
        </form>
   </div>
</div>
<div class="overflow"></div>
    <div class="model_poup" data-model="1">
      <div class="content">
        <div class="head">
          <h5 class="title_model">المجموعات</h5>
          <div class="close_model">
            <i class="fa-solid fa-xmark"></i>
          </div>
        </div>
        <form action="" id="formGroup" onsubmit="return false;">
          <div class="input_item">
            <label for=""> اختر مجموعه</label>
            <select name=""  id="group_select">
              <option value="default"></option>
              <option value="allclients">كل العملاء</option>
            </select>
          </div>
    <!-- end model add phone -->

    <script src="js/model.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/nav-profile.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>
   
   document.addEventListener('DOMContentLoaded', function() {
    var selectedPhone = '';

            var data = {'PhoneFrom': selectedPhone};

            var phonenum = document.getElementById('phoneNum');
            var ae = document.getElementById('ae');
            var submitBtn = document.getElementById('submitBtn');
            submitBtn.addEventListener('click', function(){
  sendmsg = {
  'toPhone': data['phonenum'],
  'phone':selectedPhone,
  'msg': data['msg'],
}
fetch('send-message-group', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body: JSON.stringify(sendmsg)
})
.then(response => response.json())
.then(() => {
    return fetch("/post-data-message-grp", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(data)
    });
})
.then(response => response.json())
.then(responseData => {
    console.log('Success:', responseData);
})
.catch(error => {
    console.error('Error:', error);
});

   
})

            phonenum.addEventListener('input', function(event) {
                data['phonenum'] = event.target.value;
                fetch('/')
                console.log('Phone number:', event.target.value);
                console.log('Data object:', data);
            });

            ae.addEventListener('input', function(event) {
                data['msg'] = event.target.value;
                console.log('Message:', event.target.value);
                console.log('Data object:', data);
            });
            phonenum.addEventListener('blur', function(event){
              if (event.target !== document.activeElement) {
        console.log('User is no longer focused on the input.');
    }
            })
            if (document.activeElement !== phonenum ) {
    console.log('Input is not in focus.');
}
const select = document.getElementById('customersId');
console.log(select.textContent.trim());
select.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  selectedPhone =selectedOption.textContent;
  console.log(selectedPhone)


});
phonenum.addEventListener('input', function(event) {
    data['phonenum'] = event.target.value;
    console.log('Phone number:', event.target.value);
    console.log('Data object:', data);
});

ae.addEventListener('input', function(event) {
    data['msg'] = event.target.value;
    console.log('Message:', event.target.value);
    console.log('Data object:', data);
});

phonenum.addEventListener('blur', function(event) {
    if (event.target !== document.activeElement) {
        console.log('User is no longer focused on the input.');
    }
});

if (document.activeElement !== phonenum) {
    console.log('Input is not in focus.');
}
e = new Proxy(data, {
    set(target, property, value) {
        console.log(`Property "${property}" changed from "${target[property]}" to "${value}"`);
        target[property] = value;
        return true; 
    }
});

})


 const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            const row = this.closest('tr');
            
            phone = row.cells[2].textContent.trim(); // Adjust index as per your table's column
            
            console.log(phone);

        }
    });
 
})

            $(document).ready(function() {
                $("#table").DataTable({
                    pagingType: "full_numbers",
                    scrollX: true,
                    autoWidth: false,
                });
            });

     
  
        
    </script>
  </body>
</html>    make it have the same popup functionalit as this code@extends ('layout.main')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @section('title', 'Sas Accounts')
    <link rel="stylesheet" href="css/style.css" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/bootstrap.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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" />
    <!-- Custom Modal Styles -->
<style>
  /* Modal Overlay */
  .custom-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Sit on top */
    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 */
  }

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

  /* Animation for Modal */
  @keyframes animatetop {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
  }

  /* Close Button (×) */
  .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;
  }

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

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

  .btn-close-modal {
    background-color: #6c757d;
    color: white;
  }

  /* Prevent Background Scrolling When Modal is Open */
  body.modal-open {
    overflow: hidden;
  }
</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..." />
                        <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">
                    <div class="nav_item">
                        <div class="head">
                            <img class="lang" src="images/Flag-United-States-of-America.webp" alt="Flag-United-States-of-America" loading="lazy" />
                        </div>
                        <div class="list list1">
                            <div class="item">
                                <img src="images/Flag-United-States-of-America.webp" alt="Flag-United-States-of-America" loading="lazy" />
                                <span>English (UK)</span>
                            </div>
                            <div class="item">                                <img src="images/ar.png" alt="ar-img" loading="lazy" />
                                <span>Arabic (ar)</span>
                            </div>
                        </div>
                    </div>
                    <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="add_subscriber_section">
                <div class="general_information">
                    <div class="head">
                        <h4>اضافه حساب الساس</h4>
                    </div>
                    <form action="" >
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="input_item">
                                    <label for="name" class="form-label">اسم</label>
                                    <input type="text" id="name" name="name" />
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="input_item">
                                    <label for="adminName" class="form-label">اسم الادمن </label>
                                    <input type="text" id="adminName" name="adminName" />
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="input_item">
                                    <label for="password" class="form-label"> كلمه السر</label>
                                    <input type="password" id="spassword" name="password" />
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="input_item">
                                    <label for="linkSas" class="form-label">رابط الساس</label>
                                    <input type="text" id="linkSas" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="btns_add">
  <button id="submitBtn" class="btn_add btn btn-primary">موافق</button>
  <button class="btn_close btn btn-secondary" id="btncancel">الغاء</button>
</div>
            </div>
        </div>
    </main>
    <!-- Confirmation Modal -->
<!-- Confirmation Modal -->
<div id="confirmationModal" class="custom-modal">
  <div class="custom-modal-content">
    <span class="close">&times;</span>
    <h5>تأكيد العملية</h5>
    <p>هل أنت متأكد من إضافة حساب الساس الجديد؟</p>
    <button class="btn btn-primary" id="confirmAdd">موافق</button>
    <button class="btn btn-close-modal" id="cancelAdd">الغاء</button>
  </div>
</div>

    <script src="js/tableUtils.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script>
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.add_subscriber_section form');
    const submitBtn = document.getElementById('submitBtn');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Modal elements
    const confirmationModal = document.getElementById('confirmationModal');
    const closeModalElements = confirmationModal.querySelectorAll('.close, #cancelAdd');
    const confirmAddButton = document.getElementById('confirmAdd');

    // Input elements
    const nameInput = document.getElementById('name');
    const adminNameInput = document.getElementById('adminName');
    const passwordInput = document.getElementById('spassword');
    const linkSasInput = document.getElementById('linkSas');

    let data = {};

    // Function to collect form data
    function collectFormData() {
      data['name'] = nameInput.value.trim();
      data['adminName'] = adminNameInput.value.trim();
      data['password'] = passwordInput.value.trim();
      data['sasLink'] = linkSasInput.value.trim();
    }

    // Event listeners to update data object
    nameInput.addEventListener('input', function(event) {
      data['name'] = event.target.value.trim();
      console.log('Name:', event.target.value);
      console.log('Data object:', data);
    });

    adminNameInput.addEventListener('input', function(event) {
      data['adminName'] = event.target.value.trim();
      console.log('Admin Name:', event.target.value);
      console.log('Data object:', data);
    });

    passwordInput.addEventListener('input', function(event) {
      data['password'] = event.target.value.trim();
      console.log('Password:', event.target.value);
      console.log('Data object:', data);
    });

    linkSasInput.addEventListener('input', function(event) {
      data['sasLink'] = event.target.value.trim();
      console.log('Sas Link:', event.target.value);
      console.log('Data object:', data);
    });

    // Function to send form data via AJAX
    function SASRequest() {
      console.log('Sending data:', data); // Debugging line

      $.ajax({
        url: '{{ route("send-sas-data") }}',
        type: 'POST',
        data: {
          _token: csrfToken, 
          name: data.name,
          adminName: data.adminName,
          password: data.password,
          sasLink: data.sasLink
        },
        success: function(response) {
          console.log('Response:', response); // Debugging line
          if(response.success) {
            alert(response.message);
            window.location.href = '/sas-accounts';
          } else {
            // Log data if response is not successful
            let log = {
              'operation': 'add-sas/created',
              'id': 'id: 1',
            };

            // Send log data
            fetch('/data-logged', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
              },
              body: JSON.stringify(log)
            })
            .then(response => response.json())
            .then(dataLog => {
              console.log('Log data response:', dataLog);
            })
            .catch(error => {
              console.error('Error logging data:', error);
            });

            window.location.href = '/sas-accounts';
          }
        },
        error: function(xhr, status, error) {
          console.error('AJAX Error:', error);
          alert('حدث خطأ أثناء إضافة حساب الساس. يرجى المحاولة مرة أخرى.');
        }
      });
    }

    // Function to show modal
    function showModal() {
      confirmationModal.style.display = 'block';
      document.body.classList.add('modal-open');
    }

    // Function to hide modal
    function hideModal() {
      confirmationModal.style.display = 'none';
      document.body.classList.remove('modal-open');
    }

    // Event listeners to close the modal
    closeModalElements.forEach(element => {
      element.addEventListener('click', () => {
        hideModal();
      });
    });

    // Close the modal when clicking outside of the modal content
    window.addEventListener('click', function(event) {
      if (event.target == confirmationModal) {
        hideModal();
      }
    });

    // Close modal on 'Esc' key press
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape' && confirmationModal.style.display === 'block') {
        hideModal();
      }
    });

    // Event listener for the "موافق" button to show the modal
    submitBtn.addEventListener("click", function(event){
      event.preventDefault(); // Prevent the default button behavior

      // Collect the latest form data
      collectFormData();

      // Basic form validation (optional)
      if (data.name === "" || data.adminName === "" || data.password === "" || data.sasLink === "") {
        alert("يرجى ملء جميع الحقول المطلوبة.");
        return;
      }

      showModal();
    });

    // Event listener for the modal's "Confirm Add" button to send the request
    confirmAddButton.addEventListener("click", function(){
      hideModal();
      SASRequest();
    });

    // Event listener for the standalone "الغاء" button to hide the modal
    const btnCancel = document.getElementById('btncancel');
    btnCancel.addEventListener("click", function(){
      hideModal();
    });
  });
</script>
</body>
</html>
 do not chane route urls or etc