<!DOCTYPE html>
<html lang="en">
  <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 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="">الاسم</label>
                    <input type="text" id="name" />
                  </div>

                  <div class="input_item">
                    <label for=""> المجموعه</label>
                    <select name="" id="selectOption">
                      <option value="add">اختر المجموعه</option>
                      <option value="min">كل العملاء</option>
                    </select>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">الهاتف</label>
                    <input type="text" id="phone"/>
                  </div>
                  <div class="input_item">
                    <label for="">ملاحظات</label>
                    <input type="text" id="comments"/>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <div class="btns_add">
            <button id="btnadd" class="btn_add">موافق</button>
            <button class="btn_close">الغاء</button>
          </div>
        </div>
      </div>
    </main>

    <script src="js/tableUtils.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script>
   
  
// variable declaration
let selectElement = document.getElementById("selectOption");
let inputName= document.getElementById('name');
let phone= document.getElementById('phone');
let comments= document.getElementById('comments');
var selectionGRP = ""
let btnaadd =document.getElementById('btnadd')
data = {
  'operation': 'add-client/created',
  'id': 'id: 1',
  'phone': phone.value
}
inputName.addEventListener('input', function(event){
  data['name'] = event.target.value

})
phone.addEventListener('input', function(event){
  data['phone'] = event.target.value

})
comments.addEventListener('input', function(event){
  data['comments'] = event.target.value

})

function logSelectedOption() {

  if (selectElement.value !== "") {
    if (selectElement.value == "min"){
      selection = "All Customer"
    }
    if (selectElement.value == "add"){
      selection = "No Group"
    }
    console.log("An option is selected");
    console.log("Selected value:", selectElement.value);
    console.log("Selected index:", selectElement.selectedIndex);
  } else {
    console.log("No option selected");
  }
  data['option'] = selection;
  console.log(data)
}

function sendrequest() {
  fetch('/send-customer-data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body: JSON.stringify(data),
  })
  .then(response=>{
      fetch('data-logged', {
        method: 'post',
        headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body : JSON.stringify(data)
  })
  })
    
  .then(responseData => {
    console.log("Response data:", responseData);
    logdata()
  })
  .catch(error => {
    console.error("Error:", error);
  });

  function logdata(){
    fetch('/data-logged', {method:'post',headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
   
    }, body: JSON.stringify(data)})
  }
}


logSelectedOption();

selectElement.addEventListener("change", logSelectedOption);
btnaadd.addEventListener("click", function(){
  sendrequest()
  setTimeout(()=>{
    document.location.href = "/user-clients";

  },1000)

});
   
    </script>
  </body>
</html> make the confirm button the effect of popup same as this code <!DOCTYPE html>
<html lang="en">
  <head>
    <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>
    <style>
    /* Your Custom CSS for Modals (Refer to the styles mentioned above) */
    .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: #007bff;
      color: white;
    }

    .btn-close {
      background-color: #6c757d;
      color: white;
    }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- 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"
    />
  </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="sas_bot_section">
          <div class="head">
            <h4>بوت الساس</h4>
          </div>

          <div class="content">
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service"
                  >تفعيل بوت الساس</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="1"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="1">
              <div class="inputs row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رابط الساس</label>
                    <input
                      type="text"
                      placeholder="الرابط الخارجى مثل sas4.net"
                    id="saaslink "/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">اسم المستخدم</label>
                    <input type="text" id="saasbusername" placeholder="اسم المستخدم مثل (Admin)" /></div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">كلمة المرور</label>
                    <input
                      type="text"
                      placeholder="الرابط الخارجى مثل sas4.net"
                      id="externallinksaas"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <div class="head_section">
                <i class="fa-solid fa-gear"></i>
                <h4>تحديد مقدار الرسائل</h4>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for=""
                      >الحد الاقصى من الرسائل خلال دقيقة لكل عميل</label
                    >
                    <input type="text" placeholder="" id="maxNumMessages" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">الحد الاقصى للرسائل يوميا لكل عميل</label>
                    <input type="text" placeholder="" id="MaxNumMsgsDaily"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for=""
                      >الرسالة المرسلة عند تعدى الحد الاقصى للرسائل خلال
                      دقيقة</label
                    >
                    <input type="text" placeholder="" id="MsgMaxPerMin"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for=""
                      >الرسالة المرسلة عند تعدى الحد الاقصى من الرسائل المسموحة
                      خلال اليوم لكل عميل</label
                    >
                    <input type="text" placeholder="" id="maxMsgsAllowedDaily" />
                  </div>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <div class="head_section">
                <i class="fa-solid fa-message"></i>
                <h4>اعدادات الرسائل</h4>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for=""
                      >الوقت المنتظر لعرض القائمة الرئيسية بعد كل عملية
                      (ثانية)</label
                    >
                    <input type="text" placeholder="" id="waitTimeShowMainMenuafallop" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة اختيار الحساب</label>
                    <input type="text" placeholder="" id="msgselacc"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">تسجيل دخول باستخدام حساب اخر</label>
                    <input type="text" placeholder="" id="lginboacc"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة طلب انتظار المستخدم</label>
                    <input type="text" placeholder="" id="msgwaitrequser"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">طريقة عرض حسابات الساس</label>
                    <input type="text" placeholder="" id="showmethaccssaas"/>
                  </div>
                </div>
              </div>
              <div class="switch_item">
                <div class="form-check form-switch">
                  <label class="form-check-label" for="switch-item"
                    >السماح للمشتركين بايقاف و اعادة تشغيل البوت</label
                  >
                  <input
                    class="form-check-input"
                    type="checkbox"
                    role="switch"
                    id="switch-item"
                    data-num="1"
                  />
                </div>
              </div>
              <div class="col-md-12 text-center my-2">
                <h6 class="alert alert-info text-center">
                  <strong>مفاتيح اضافية يمكنك استخدامها</strong>
                </h6>
                <div class="row justify-content-center px-3">
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رقم العملية = {number}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    اسم المستخدم = {username}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الاسم = {name}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رمز الحساب = {id}
                  </div>
                  <!---->
                </div>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service"
                  >تفعيل عرض بيانات الحساب</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="2"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="2">
              <div class="col-md-12 text-center my-2">
                <h6 class="alert alert-info text-center">
                  <strong>مفاتيح اضافية يمكنك استخدامها</strong>
                </h6>
                <div class="row justify-content-center px-3">
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رقم العملية = {number}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رمز الحساب = {id}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الاسم الاول = {firstname}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الاسم الثانى = {lastname}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    اسم المستخدم = {username}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الباقة = {package}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    تاريخ الانتهاء = {exp}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الرصيد = {balance}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    اخر تاريخ اونلاين = {last_online}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    حالة الحساب = {acc_status}
                  </div>
                  <!---->
                </div>
              </div>
              <div class="input_item">
                <label for="">رسالة القائمة</label>
                <input type="text" placeholder="" id="messagemenu"/>
              </div>
              <div class="input_item">
                <label for="">رسالة بيانات الحساب</label>
                <textarea name="" id="accountinformationdata"></textarea>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service"></label>
                  تفعيل تجديد الاشتراك من رصيد المشترك</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="3"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="3">
              <div class="col-md-12 text-center my-2">
                <h6 class="alert alert-info text-center">
                  <strong>مفاتيح اضافية يمكنك استخدامها</strong>
                </h6>
                <div class="row justify-content-center px-3">
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رقم العملية = {number}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    التحميل المتبقى = {download}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    الرفع المتبقى = {upload}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    المتبقى الكلى من الباقة = {traffic}
                  </div>
                  <!---->
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة القائمة</label>
                    <input type="text" placeholder="" id="menumessage2" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة التحميل المتبقى</label>
                    <input type="text" placeholder="" id="messageleftdown"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة الرفع المتبقى</label>
                    <input type="text" placeholder="" id="messageleftup" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة الباقة الكلية المتبقية</label>
                    <input type="text" placeholder="" id="lefttotalplanmsg" />
                  </div>
                </div>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service">
                  تفعيل عرض رصيد الحساب</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="4"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="4">
              <div class="col-md-12 text-center my-2">
                <h6 class="alert alert-info text-center">
                  <strong>مفاتيح اضافية يمكنك استخدامها</strong>
                </h6>
                <div class="row justify-content-center px-3">
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رقم العملية = {number}
                  </div>
                  <div
                    class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted"
                  >
                    رصيد المشترك = {balance}
                  </div>
                  <!---->
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة القائمة</label>
                    <input type="text" placeholder="" id="menumessage3"/>
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة رصيد الحساب</label>
                    <input type="text" placeholder="" id="messagebalacc3" />
                  </div>
                </div>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service">
                   تفعيل تجديد الاشتراك من رصيد المشترك</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="5"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="5">
              <div  class="col-md-12 text-center my-2"><h6  class="alert alert-info text-center"><strong >مفاتيح اضافية يمكنك استخدامها</strong></h6><div  class="row justify-content-center px-3"><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">رقم العملية = {number}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">العودة للقائمة = {number2}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">اسم الباقة = {package_name}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">سعر الباقة = {package_price}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">رصيد المشترك = {balance}</div><!----></div></div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة القائمة</label>
                    <input type="text" placeholder="" id="messagemenu4" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="">رسالة تفعيل الحساب الناجحة</label>
                    <input type="text" placeholder="" id="msgactvsucessaccount" />
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="">رسالة عدم وجود رصيد كافى لتفعيل الباقة</label>
                    <input type="text" placeholder="" id="msgnotenghbalancetoactvplan"/>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="">رسالة بيانات تفعيل الباقة</label>
                    <textarea name="" id="msgactvdataplan"></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="">رسالة تأكيد تفعيل الباقة</label>
                    <textarea name="" id="msgcheckacvplan"></textarea>
                  </div>
                </div>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service">
                    تفعيل شحن الكارت</label
                >
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service"
                  data-num="6"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="6">
                <div  class="col-md-12 text-center my-2"><h4  class="alert alert-info text-center"><strong >مفاتيح اضافية يمكنك استخدامها</strong></h4><div  class="row justify-content-center px-3"><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">رقم العملية = {number}</div><!----></div></div>                <div class="row">
                
                    <div class="col-12 col-md-6">
                    <div class="input_item">
                        <label for="">رسالة القائمة</label>
                        <input type="text" placeholder="" id="messagemenu5" />
                    </div>
                    </div>
                    <div class="col-12 col-md-6">
                    <div class="input_item">
                        <label for="">رسالة رقم الكارت خطأ</label>
                        <input type="text" placeholder="" id="wrngcardnummsg"/>
                    </div>
                    </div>
                    <div class="col-12">
                    <div class="input_item">
                        <label for="">رسالة الكارت المستخدم</label>
                        <input type="text" placeholder="" id="usedcardmsg" />
                    </div>
                    </div>
                    <div class="col-12">
                    <div class="input_item">
                        <label for="">رسالة الكارت الموقوف</label>
                        <input type="text" id="stoppedcardmsg">
                    </div>
                    </div>
                    <div class="col-12">
                    <div class="input_item">
                        <label for="">رسالة تفعيل الكارت الناجحة</label>
                        <textarea name="" id="msgactvcardsucess"></textarea>
                    </div>
                    </div>
                    <div class="col-12">
                    <div class="input_item">
                        <label for="">رسالة طلب ادخال الكارت</label>
                        <textarea name="" id="fillreqcardmsg"></textarea>
                    </div>
                    </div>
                </div>
            </div>

                    <div class="switch_section">
                        <div class="form-check form-switch">
                            <label class="form-check-label" for="messaging-service">
                                تفعيل شحن الكارت</label
                            >
                            <input
                            class="form-check-input"
                            type="checkbox"
                            role="switch"
                            id="messaging-service"
                            data-num="7"
                            />
                        </div>
                    </div> 
                    <div class="message_settings_section" data-num="7">
                        <div  class="col-md-12 text-center my-2"><h4  class="alert alert-info text-center"><strong >مفاتيح اضافية يمكنك استخدامها</strong></h4><div  class="row justify-content-center px-3"><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">رقم العملية = {number}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">رمز الحساب = f{id}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">الاسم الاول = {firstname}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">الاسم الثانى = {lastname}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">اسم المستخدم = {username}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">الباقة = {package}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">تاريخ الانتهاء = {exp}</div><div  class="col-sm-6 col-lg-3 border border-info py-2 ng-star-inserted">الرصيد = {balance}</div><!----></div></div>
                    </div>

                    <div class="btns_add">
                        <button class="btn_add" id="btnadd"  data-model="1">موافق</button>
                        <button class="btn_close">الغاء</button>
                    </div>
                </div>
            </div>
      </div>




    </main>
    <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 close-modal">موافق</button>
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/nav-profile.js"></script>
    <script>

document.addEventListener('DOMContentLoaded', function() {
      // Local Storage Management for Inputs
      let textInputs = document.querySelectorAll('input[type="text"], textarea');
      let inputs = {};

      textInputs.forEach(input => {
        const idInput = input.getAttribute('id');

        if (idInput) {
          const savedValue = localStorage.getItem(idInput);
          if (savedValue) {
            input.value = savedValue;
            inputs[idInput] = savedValue;
          }

          input.addEventListener('input', function(event) {
            const value = event.target.value.trim();
            if (value !== "") {
              inputs[idInput] = value;
              localStorage.setItem(idInput, value);
            } else {
              delete inputs[idInput];
              localStorage.removeItem(idInput);
            }
            console.log(inputs);
          });
        }
      });

      // Switch Sections Management
      const switchesSections = document.querySelectorAll(".switch_section input[type='checkbox']");
      const messageSettingsSections = document.querySelectorAll(".message_settings_section");

      switchesSections.forEach((input, index) => {
        const dataNum = input.getAttribute('data-num');
        const messageSection = document.querySelector(`.message_settings_section[data-num="${dataNum}"]`);

        // Load saved state
        const savedState = localStorage.getItem(input.id);
        if (savedState === 'true') {
          input.checked = true;
          messageSection.style.display = 'block';
        } else {
          input.checked = false;
          messageSection.style.display = 'none';
        }

        input.addEventListener("change", () => {
          if (input.checked) {
            messageSection.style.display = 'block';
          } else {
            messageSection.style.display = 'none';
          }
          localStorage.setItem(input.id, input.checked);
        });
      });

      // Modal Functionality
      const confirmationModal = document.getElementById('confirmationModal');
      const closeModalElements = confirmationModal.querySelectorAll('.close, .close-modal');
      const submitButton = document.getElementById('btnadd');
      const cancelButton = document.getElementById('btncancel');

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

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

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

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

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

      // Handle form submission
      submitButton.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default button behavior

        // Collect data from inputs
        const dataToSend = { ...inputs };

        // Add any additional data if needed (e.g., selected group)

        // Send data via fetch
        fetch('/bot-preferences', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify(dataToSend)
        })
        .then(response => {
          if (response.ok) {
            // Show confirmation modal on success
            showModal(confirmationModal);
            // Optionally, reset inputs
            // document.getElementById('yourFormId').reset();
          } else {
            return response.json().then(data => {
              throw new Error(data.message || 'خطأ في الخادم');
            });
          }
        })
        .catch(error => {
          console.error('Error:', error);
          alert(`حدث خطأ: ${error.message}`);
        });
      });

      cancelButton.addEventListener('click', function(event) {
        hideModal(confirmationModal); // If you have a modal to hide
      });
    });
        </script>

    <!-- Add this just before the closing </body> tag -->

  </body>
</html>