<!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>
      .model_poup {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
      }
      .model_poup .content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
      }
      .overflow {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 999;
      }
    </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"  data-model="1">موافق</button>
                        <button class="btn_close">الغاء</button>
                    </div>
                </div>
            </div>
      </div>




    </main>
    <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>
          <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>
        <div class="modal-body">
          <p>تم حفظ الإعدادات بنجاح!</p>
        </div>
        <button class="btn_submit">موافق</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>

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);
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
      const submitButton = document.querySelector('.btn_add');
      const modal = document.querySelector('.model_poup');
      const closeButton = modal.querySelector('.close_model');
      const confirmButton = modal.querySelector('.btn_submit');
      const overflow = document.querySelector('.overflow');

      function showModal() {
        modal.style.display = 'block';
        overflow.style.display = 'block';
      }

      function hideModal() {
        modal.style.display = 'none';
        overflow.style.display = 'none';
      }

      submitButton.addEventListener('click', function(event) {
        event.preventDefault();
        oncl();
      });

      closeButton.addEventListener('click', hideModal);
      confirmButton.addEventListener('click', hideModal);
      overflow.addEventListener('click', hideModal);
    });

    function oncl() {
        console.log('oncl function called');
        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)
        })
        .then(response => {
          if (response.ok) {
            console.log('Operation confirmed, showing modal');
            showModal();
          } else {
            console.error('Error confirming operation');
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
      }

        console.log('DOM fully loaded');
        const submitButton = document.querySelector('.btn_add');
        const modal = document.querySelector('.model_poup');
        const closeButton = modal.querySelector('.close_model');
        const confirmButton = modal.querySelector('.btn_submit');
        const overflow = document.querySelector('.overflow');

        console.log('Submit button:', submitButton);
        console.log('Modal:', modal);
        console.log('Close button:', closeButton);
        console.log('Confirm button:', confirmButton);
        console.log('Overflow:', overflow);

        function showModal() {
          console.log('Showing modal');
          modal.style.display = 'block';
          overflow.style.display = 'block';
        }

        function hideModal() {
          console.log('Hiding modal');
          modal.style.display = 'none';
          overflow.style.display = 'none';
        }

        submitButton.addEventListener('click', function(event) {
          console.log('Submit button clicked');
          event.preventDefault();
          oncl();
        });

        closeButton.addEventListener('click', hideModal);
        confirmButton.addEventListener('click', hideModal);
        overflow.addEventListener('click', hideModal);
    
        </script>

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

  </body>
</html>
why the popup not showing when i click confirm