<!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>
    <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>
              <div class="list list2">
                <h4 class="title">Profile</h4>
                <div class="profile">
                  <img src="images/user-1.jpg" alt="user-1" loading="lazy" />
                  <div class="text">
                    <div class="name">Mathew Anderson</div>
                    <div class="position">Designer</div>
                    <div class="email">
                      <i class="fa-regular fa-envelope"></i>
                      <span>Info@example.com</span>
                    </div>
                  </div>
                </div>
                <a href={{route(name: 'logout')}} class="btn_logout">Logout</a>
              </div>
            </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">رمز الحساب = {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" onclick=oncl()>موافق</button>
                        <button class="btn_close">الغاء</button>
                    </div>
                </div>
            </div>
      </div>


    </main>

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

let textInputs = document.querySelectorAll('input[type="text"], textarea');
let inputs = {};

textInputs.forEach(input => {
    const idInput = input.getAttribute('id');
    
    const savedValue = localStorage.getItem(idInput);
    if (savedValue) {
        input.value = savedValue;
        inputs[idInput] = savedValue;
    }

    input.addEventListener('input', function(event) {
        const value = event.target.value;
        console.log(`"${idInput}" changed its value to: ${value}`);
        inputs[idInput] = value;
        
        localStorage.setItem(idInput, value);

        if (value === "") {
            delete inputs[idInput];
            localStorage.removeItem(idInput);
        }

        console.log(inputs);
    });
});

const switchsSections = document.querySelectorAll(".switch_section input");
const messageSettingsSection = document.querySelectorAll(".message_settings_section");

switchsSections.forEach((input, index) => {
    const idInput = input.getAttribute('id');
    
    const savedState = localStorage.getItem(idInput);
    if (savedState === 'true') {
        input.checked = true;
        messageSettingsSection[index].classList.add("active");
    }

    input.addEventListener("click", () => {
        const parentElement = input.parentElement;
        const childParentText = parentElement.children[0];
        
        if (input.getAttribute("data-num") === messageSettingsSection[index].getAttribute("data-num") && input.checked) {
            console.log(childParentText);
            messageSettingsSection[index].classList.add("active");
            input.checked = true;
        } else {
            messageSettingsSection[index].classList.remove("active");
            input.checked = false;
        }
        
        localStorage.setItem(idInput, input.checked);
    });
});

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

document.addEventListener('DOMContentLoaded', function() {
    const boxsHeader = document.querySelectorAll(".nav_item .head");
    const listHeader = document.querySelectorAll(".nav_item .list");

    boxsHeader.forEach((box, index) => {
        box.addEventListener("click", () => {
            listHeader.forEach((list, listIndex) => {
                if (index === listIndex) {
                    list.classList.toggle("active");
                } else {
                    list.classList.remove("active");
                }
            });
        });
    });

    document.addEventListener("click", (e) => {
        if (!e.target.closest(".nav_item")) {
            listHeader.forEach((list) => {
                list.classList.remove("active");
            });
        }
    });

    const iconMenu = document.querySelector(".icon_menu");
    const sidebar = document.querySelector(".sidebar");
    const overflowSidebar = document.querySelector(".overflow_sidebar");

    iconMenu.addEventListener("click", () => {
        sidebar.classList.add("active");
        overflowSidebar.classList.add("active");
    });

    overflowSidebar.addEventListener("click", () => {
        sidebar.classList.remove("active");
        overflowSidebar.classList.remove("active");
    });
});
      function oncl(){
          fetch('/bot-preferences',
          {
           method: 'post',
           headers:  { 'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body:    JSON.stringify(inputs)
        }
          )
          }
    </script>
  </body>
</html>

 ,make it when the confirm a pop up message will be shown saying the operation commited successfully