<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
  <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>
    <!-- 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">
       @include('include.translation')

            <div class="notfication">
              <div class="head">
                <div class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="nav_item">
              <div class="head">
                <img
                  class="img_profile"
                  src="images/user-1.jpg"
                  alt="user-1"
                  loading="lazy"
                />
              </div>
              @include('include.profile')

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

        <div class="home_section">
          <div class="main_boxs">
            <div class="row">
              <div class="col-12 col-md-6">
                <div class="box">
                  <div class="text">
                    <div class="icon">
                      <i class="fa-solid fa-calendar-day"></i>
                    </div>
                    <h4 class="title">الايام المتبقية</h4>
                    <p class="desc">نسبة ما تبقى من ايام</p>
                    <span>اكثر افضل</span>
                  </div>
                  <div class="progress_container text-center">
                    <circle-progress value="70" max="100"></circle-progress>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="box">
                  <div class="text">
                    <div class="icon">
                      <i class="fa-solid fa-chart-simple"></i>
                    </div>
                    <h4 class="title">استهلاك النقاط اليومى</h4>
                    <p class="desc">نسبة ما تم استهلاكه من نقاط اليوم</p>
                    <span>اقل افضل</span>
                  </div>
                  <div class="progress_container text-center">
                    <circle-progress value="50" max="1500"></circle-progress>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="boxs">
            <div class="box">
              <div class="text">
                <h5 class="title">العملاء</h5>
                <h3 class="num">{{$customers}}</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-user-group"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">المجموعات</h5>
                <h3 class="num">{{$groups}}</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-users"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">الرسائل</h5>
                <h3 class="num">{{$messages}}</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-envelope-open-text"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">رسائل اليوم</h5>
                <h3 class="num">2</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-comment-sms"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">حالة الجلسة</h5>
                <h3 class="num">غير متصله</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-mobile"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">رسائل الشهر الحالى</h5>
                <h3 class="num">0</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-envelope"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">الهواتف</h5>
                <h3 class="num">0</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-mobile-screen"></i>
              </div>
            </div>
            <div class="box">
              <div class="text">
                <h5 class="title">الرصيد</h5>
                <h3 class="num">0</h3>
              </div>
              <div class="icon">
                <i class="fa-solid fa-credit-card"></i>
              </div>
            </div>
          </div>
          <div class="bottom_boxs">
            <div class="box_analysis">
              <div class="head">
                <form action="">
                  <div class="btns_select">
                    <button class="btn_select">شهري</button>
                    <button class="btn_select">يومي</button>
                  </div>
                  <select class="select_month">
                    <option value="1">يناير</option>
                    <option value="2">فبراير</option>
                    <option value="3">مارس</option>
                    <option value="4">أبريل</option>
                    <option value="5">مايو</option>
                    <option value="6">يونيو</option>
                    <option value="7">يوليو</option>
                    <option value="8">أغسطس</option>
                    <option value="9">سبتمبر</option>
                    <option value="10">أكتوبر</option>
                    <option value="11">نوفمبر</option>
                    <option value="12">ديسمبر</option>
                  </select>
                  <select class="select_year">
                    <option value="1">2023</option>
                    <option value="1">2022</option>
                    <option value="1">2021</option>
                    <option value="1">2020</option>
                    <option value="1">2019</option>
                    <option value="1">2018</option>
                  </select>
                </form>
              </div>
              <div id="container-chart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/js-circle-progress/dist/circle-progress.min.js"
      type="module"
    ></script>
    <script>
      new CircleProgress(".progress", {
        max: 100,
        value: 60,
        textFormat: "percent",
      });
    </script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
      https: Highcharts.chart("container-chart", {
        chart: {
          type: "line",
        },
        title: {
          text: "Traffic Report",
        },
        subtitle: {
          text:
            "Source: " +
            '<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
            'target="_blank">Wikipedia.com</a>',
        },
        xAxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
          ],
        },
        yAxis: {
          title: {
            text: "Temperature (°C)",
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: true,
            },
            enableMouseTracking: false,
          },
        },
        series: [
          {
            name: "Reggane",
            data: [
              16.0, 18.2, 23.1, 27.9, 32.2, 36.4, 39.8, 38.4, 35.5, 29.2, 22.0,
              17.8,
            ],
          },
        ],
      });
    </script>
  </body>
</html>
 now   do the  same translation for this as this   page <!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
  <head>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ __('Sas Radius Pro Dashboard') }}</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
    <script src="{{ asset('js/bootstrap.js') }}"></script>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
    <style>
      /* Your 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 (Duplicate Link Removed) -->
  </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="{{ asset('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">
            @include('include.translation')
            <div class="notfication">
              <div class="head">
                <div class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="nav_item">
              <div class="head">
                <img
                  class="img_profile"
                  src="{{ asset('images/user-1.jpg') }}"
                  alt="{{ __('user_profile') }}"
                  loading="lazy"
                />
              </div>
              @include('include.profile')
            </div>
          </div>
        </div>

        <div class="message_settings">
          <div class="head">
            <h4>{{ __('Message Settings') }}</h4>
          </div>
          <div class="content">
            <div class="input_select">
              <label for="country_code">{{ __('Country Code') }}</label>
              <select name="country_code" id="country_code">
                <option value="egypt">{{ __('Egypt') }}</option>
                <option value="libya">{{ __('Libya') }}</option>
                <option value="iraq">{{ __('Iraq') }}</option>
                <option value="uae">{{ __('UAE') }}</option>
                <option value="saudi_arabia">{{ __('Saudi Arabia') }}</option>
              </select>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service">{{ __('Messaging Service') }}</label>
                <input
                  id="message-services"
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  data-num="1"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="1">
              <h4 class="alert alert-info text-center">
                <strong>{{ __('Additional keys you can use') }}</strong>
              </h4>
              <div class="row justify-content-center px-3">
                <div class="col-sm-6 col-lg-3 border border-info py-2">
                  {{ __('Profile') }} = {srv}
                </div>
                <div class="col-sm-6 col-lg-3 border border-info py-2">
                  {{ __('Expiration Date') }} = {exp}
                </div>
                <div class="col-sm-6 col-lg-3 border border-info py-2">
                  {{ __('Username') }} = {username}
                </div>
                <div class="col-sm-6 col-lg-3 border border-info py-2">
                  {{ __('First Name') }} = {firstname}
                </div>
              </div>
              <div class="card alert alert-info mt-3">
                <h5>{{ __('Usage Example') }}</h5>
                <p>
                  {{ __('Hello') }} {firstname}, {{ __('the') }} {srv} {{ __('monthly package has been activated and will expire on') }} {exp}
                </p>
                <h6>{{ __('The client will receive it like this') }}</h6>
                <p>
                  {{ __('Hello Yasser, the 50GB monthly package has been activated and will expire on') }} 2022-12-01 12:00:00
                </p>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service2">{{ __('About to Expire Subscription') }}</label>
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service2"
                  data-num="2"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="2">
              <div class="input_item">
                <label for="activation_message">{{ __('Activation Message') }}</label>
                <textarea name="activation_message" id="activation_message"></textarea>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service3">{{ __('Upon Subscription Expiry') }}</label>
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service3"
                  data-num="3"
                />
              </div>
            </div>
            <div class="message_settings_section" data-num="3">
              <div class="input_select">
                <label for="warning_before">{{ __('Warning Before') }}</label>
                <select name="warning_before" id="warning_before">
                  <option value="1">{{ __('1 day') }}</option>
                  <option value="2">{{ __('2 days') }}</option>
                  <option value="3">{{ __('3 days') }}</option>
                  <option value="4">{{ __('4 days') }}</option>
                  <option value="5">{{ __('5 days') }}</option>
                </select>
              </div>
              <div class="input_item">
                <label for="expiry_message">{{ __('Expiry Message') }}</label>
                <textarea name="expiry_message" id="expiry_message"></textarea>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service4">{{ __('Aggressive Messaging') }}</label>
                <input
                  class="form-check-input"
                  type="checkbox"
                  role="switch"
                  id="messaging-service4"
                  data-num="4"
                />
              </div>
            </div>
            <div class="alert alert-info mt-3">
              <strong>
                {{ __('Aggressive messaging is a type of messaging that allows you to send messages instantly at the moment an operation occurs. It allows you to use many options and provide more data for sending, in addition to the ability to select a phone of your choice to receive real-time operation data.') }}
              </strong>
            </div>
            <div class="alert alert-warning">
              <strong>
                {{ __('Please note that this feature uses the SAS webhook. Therefore, if you activate it, it will replace the old settings. For example, monitoring functionality in SAS Pro or any application will send system operations data directly to WhatsApp instead.') }}
              </strong>
            </div>
            <div class="message_settings_section" data-num="4">
              <div class="top">
                <div class="input_item" style="max-width: 300px; width: 100%">
                  <label for="personal_phone">{{ __('Personal Phone') }}</label>
                  <input type="number" id="personal_phone" />
                </div>

                <div class="container_input">
                  <div class="switch_section">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="messaging-service4">{{ __('Messaging Service') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="messaging-service4"
                      />
                    </div>
                  </div>
                  <small>
                    {{ __('When this option is activated, the connected personal phone will be used.') }}
                  </small>
                </div>
              </div>
              <div class="switchs row">
                <div class="col-12 col-md-6">
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch1">{{ __('Upon Subscription Activation') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch1"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch2">{{ __('Upon Package Renewal') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch2"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch3">{{ __('Upon Package Change') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch3"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch4">{{ __('Upon Client Deposit') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch4"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch5">{{ __('Upon Withdrawal from Client Balance') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch5"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch6">{{ __('Upon Editing Client Data') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch6"
                      />
                    </div>
                  </div>
                </div>

                <div class="col-12 col-md-6">
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch7">{{ __('Upon Adding or Removing Consumption Capacities (GB) for Client') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch7"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch8">{{ __('Upon Client Deletion') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch8"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch9">{{ __('Upon Manager Login') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch9"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch10">{{ __('Upon Manager Deposit') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch10"
                      />
                    </div>
                  </div>
                  <div class="switch_item">
                    <div class="form-check form-switch">
                      <label class="form-check-label" for="switch11">{{ __('Upon Withdrawal from Manager Balance') }}</label>
                      <input
                        class="form-check-input"
                        type="checkbox"
                        role="switch"
                        id="switch11"
                      />
                    </div>
                  </div>
                </div>
              </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>{{ __('Additional keys you can use') }}</strong>
                </h6>
                <div class="row justify-content-center px-3">
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Operation Number') }} = {number}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Account Symbol') }} = f{id}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('First Name') }} = {firstname}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Last Name') }} = {lastname}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Username') }} = {username}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Package') }} = {package}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Expiration Date') }} = {exp}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Balance') }} = {balance}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Last Online Date') }} = {last_online}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Account Status') }} = {acc_status}
                  </div>
                </div>
              </div>
              <div class="input_item">
                <label for="messagemenu">{{ __('Menu Message') }}</label>
                <input type="text" placeholder="" id="messagemenu"/>
              </div>
              <div class="input_item">
                <label for="accountinformationdata">{{ __('Account Information Message') }}</label>
                <textarea name="account_information" id="accountinformationdata"></textarea>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service">{{ __('Enable Account Balance Display') }}</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="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="messagemenu4">{{ __('Menu Message') }}</label>
                    <input type="text" placeholder="" id="messagemenu4" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="msgactvcardsucess">{{ __('Successful Card Activation Message') }}</label>
                    <textarea name="successful_card_activation_message" id="msgactvcardsucess"></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="msgnotenghbalancetoactvplan">{{ __('Insufficient Balance for Package Activation Message') }}</label>
                    <input type="text" placeholder="" id="msgnotenghbalancetoactvplan"/>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="msgactvdataplan">{{ __('Package Activation Data Message') }}</label>
                    <textarea name="package_activation_data_message" id="msgactvdataplan"></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="msgcheckacvplan">{{ __('Package Activation Confirmation Message') }}</label>
                    <textarea name="package_activation_confirmation_message" id="msgcheckacvplan"></textarea>
                  </div>
                </div>
              </div>
            </div>
            <div class="switch_section">
              <div class="form-check form-switch">
                <label class="form-check-label" for="messaging-service7">{{ __('Enable Card Charging') }}</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">
                <h4 class="alert alert-info text-center">
                  <strong>{{ __('Additional keys you can use') }}</strong>
                </h4>
                <div class="row justify-content-center px-3">
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Operation Number') }} = {number}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Return to Menu') }} = {number2}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Package Name') }} = {package_name}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Package Price') }} = {package_price}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Client Balance') }} = {balance}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Successful Card Activation') }} = {number}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Failed Card Number') }} = {card_number}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Used Card Message') }} = {used_card_msg}
                  </div>
                  <div class="col-sm-6 col-lg-3 border border-info py-2">
                    {{ __('Stopped Card Message') }} = {stopped_card_msg}
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="messagemenu5">{{ __('Menu Message') }}</label>
                    <input type="text" placeholder="" id="messagemenu5" />
                  </div>
                </div>
                <div class="col-12 col-md-6">
                  <div class="input_item">
                    <label for="msgactvcardsucess">{{ __('Card Activation Confirmation Message') }}</label>
                    <textarea name="card_activation_confirmation_message" id="msgactvcardsucess"></textarea>
                  </div>
                </div>
                <div class="col-12">
                  <div class="input_item">
                    <label for="fillreqcardmsg">{{ __('Card Entry Request Message') }}</label>
                    <textarea name="card_entry_request_message" id="fillreqcardmsg"></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div id="confirmationModal" class="custom-modal">
      <div class="custom-modal-content">
        <span class="close">&times;</span>
        <h5>{{ __('Operation Confirmation') }}</h5>
        <p>{{ __('Settings have been saved successfully!') }}</p>
        <button class="btn btn-primary close-modal">{{ __('Confirm') }}</button>
      </div>
    </div>

    <div class="overflow"></div>
    <div class="model_poup" data-model="1">
      <div class="content">
        <div class="head">
          <h5 class="title_model">{{ __('Groups') }}</h5>
          <div class="close_model">
            <i class="fa-solid fa-xmark"></i>
          </div>
        </div>
        <form action="" id="formGroup" onsubmit="return false;">
          <div class="input_item">
            <label for="group_select">{{ __('Choose Group') }}</label>
            <select name="group" id="group_select">
              <option value="default"></option>
              <option value="allclients">{{ __('All Clients') }}</option>
            </select>
          </div>
          <button class="btn_submit">{{ __('Confirm') }}</button>
        </form>
      </div>
    </div>
    <!-- End Modal Add Group -->

    <script src="{{ asset('js/boxs-header.js') }}"></script>
    <script src="{{ asset('js/sidebar.js') }}"></script>
    <script src="{{ asset('js/nav-profile.js') }}"></script>
    <script>
      function collectFormData() {
        const formData = {};
    
        const addToFormData = (key, value) => {
          if (formData[key]) {
            if (!Array.isArray(formData[key])) {
              formData[key] = [formData[key]];
            }
            formData[key].push(value);
          } else {
            formData[key] = value;
          }
        };
    
        document.querySelectorAll('input, select, textarea').forEach(element => {
          const key = element.id || element.name;
          
          if (!key) return; 
    
          switch(element.type) {
            case 'checkbox':
            case 'radio':
              if (element.checked) {
                addToFormData(key, element.value || 'on');
              }
              break;
            case 'select-one':
              addToFormData(key, element.value);
              break;
            case 'select-multiple':
              Array.from(element.selectedOptions).forEach(option => {
                addToFormData(key, option.value);
              });
              break;
           
            case 'textarea':
              addToFormData(key, element.value);
              break;
            default: 
              addToFormData(key, element.value);
          }
        });
    
        return formData;
      }
    
      function sendFormData(url) {
        const formData = collectFormData();
        fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify(formData),
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            showModal(confirmationModal);
            // Optionally, reset inputs or perform other actions
          } else {
            alert(`{{ __('An error occurred:') }} ${data.message}`);
          }
        })
        .catch((error) => {
          console.error('{{ __("Error:") }}', error);
          alert('{{ __("An unexpected error occurred.") }}');
        });
      }
    
      function debounce(func, delay) {
        let timeoutId;
        return function (...args) {
          clearTimeout(timeoutId);
          timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
      }
    
      const debouncedSendFormData = debounce(() => sendFormData('/api/data-sas'), 300);
    
      document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('input, select, textarea').forEach(element => {
          element.addEventListener('change', () => {
            console.log(collectFormData());
            debouncedSendFormData();
          });
          if (element.type !== 'checkbox' && element.type !== 'radio' && element.type !== 'file') {
            element.addEventListener('input', () => {
              console.log(collectFormData());
              debouncedSendFormData();
            });
          }
        });
    
        const switchesSections = document.querySelectorAll(".switch_section input[type='checkbox']");
        const messageSettingsSections = document.querySelectorAll(".message_settings_section");
    
        switchesSections.forEach((input, index) => {
          input.addEventListener("change", () => {
            const dataNum = input.getAttribute("data-num");
            const messageSection = document.querySelector(`.message_settings_section[data-num="${dataNum}"]`);
            if (messageSection) {
              messageSection.classList.toggle("active", input.checked);
            }
            console.log(collectFormData());
            debouncedSendFormData();
          });
        });
    
        const submitButton = document.getElementById('btnadd');
        const cancelButton = document.querySelector('.btn_close');
    
        // Modal Functionality
        const confirmationModal = document.getElementById('confirmationModal');
        const closeModalElements = confirmationModal.querySelectorAll('.close, .close-modal');
    
        function showModal(modal) {
          modal.style.display = 'block';
          document.body.classList.add('modal-open');
        }
    
        function hideModal(modal) {
          modal.style.display = 'none';
          document.body.classList.remove('modal-open');
        }
    
        closeModalElements.forEach(element => {
          element.addEventListener('click', () => {
            hideModal(confirmationModal);
          });
        });
    
        window.addEventListener('click', function(event) {
          if (event.target == confirmationModal) {
            hideModal(confirmationModal);
          }
        });
    
        // Handle form submission
        submitButton.addEventListener('click', function(event) {
          event.preventDefault(); // Prevent default button behavior
    
          // Collect data from inputs
          const dataToSend = collectFormData();
    
          // 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 => response.json())
          .then(data => {
            if (data.success) {
              showModal(confirmationModal);
              // Optionally, reset inputs
              // document.getElementById('yourFormId').reset();
            } else {
              alert(`{{ __('An error occurred:') }} ${data.message}`);
            }
          })
          .catch(error => {
            console.error('{{ __("Error:") }}', error);
            alert('{{ __("An unexpected error occurred.") }}');
          });
        });
    
        cancelButton.addEventListener('click', function(event) {
          hideModal(confirmationModal);
        });
      });
    
      document.addEventListener('DOMContentLoaded', function() {
        const table = document.querySelector('table');
        const selectAllCheckbox = document.getElementById('selectAllcheckbox');
        const checkboxes = document.querySelectorAll('input[type="checkbox"].row-checkbox');
        const deleteButton = document.getElementById('deletebtn');

        const deleteConfirmationModal = document.getElementById('deleteConfirmationModal');
        const closeDeleteModalElements = deleteConfirmationModal
          ? deleteConfirmationModal.querySelectorAll('.close, #cancelDelete')
          : [];
        const confirmDeleteButton = document.getElementById('confirmDelete');

        // Translated Strings
        const alertSelectClients = "{{ __('Please select at least one client to delete.') }}";
        const alertDeleteSuccess = "{{ __('Selected clients have been successfully deleted.') }}";
        const alertDeleteError = "{{ __('Error deleting clients: ') }}";
        const alertUnknownError = "{{ __('An error occurred while deleting clients.') }}";

        let selectedPhones = new Set();

        function showModal(modal) {
          if (modal) {
            modal.style.display = 'block';
            document.body.classList.add('modal-open');
          } else {
            console.error('{{ __("Modal element not provided.") }}');
          }
        }

        function hideModal(modal) {
          if (modal) {
            modal.style.display = 'none';
            document.body.classList.remove('modal-open');
          } else {
            console.error('{{ __("Modal element not provided.") }}');
          }
        }

        function setupDeleteModal() {
          if (!deleteConfirmationModal) {
            console.error('{{ __("Element with ID \"deleteConfirmationModal\" not found.") }}');
            return;
          }

          closeDeleteModalElements.forEach(element => {
            element.addEventListener('click', () => hideModal(deleteConfirmationModal));
          });

          if (confirmDeleteButton) {
            confirmDeleteButton.addEventListener('click', () => {
              hideModal(deleteConfirmationModal);
              deleteSelectedRows();
            });
          } else {
            console.error('{{ __("Element with ID \"confirmDelete\" not found.") }}');
          }

          if (deleteButton) {
            deleteButton.addEventListener('click', function(event) {
              event.preventDefault();
              if (selectedPhones.size > 0) {
                showModal(deleteConfirmationModal);
              } else {
                alert(alertSelectClients);
              }
            });
          } else {
            console.error('{{ __("Element with ID \"deletebtn\" not found.") }}');
          }
        }

        function deleteSelectedRows() {
          console.log('Phones to delete:', Array.from(selectedPhones));
          fetch('/deletecustomers', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ phones: Array.from(selectedPhones) })
          })
          .then(response => response.json())
          .then(data => {
              if (data.success) {
                  selectedPhones.forEach(phone => {
                      const rows = document.querySelectorAll('tbody tr');
                      for (let row of rows) {
                          if (row.cells[1] && row.cells[1].textContent.trim() === phone) {
                              row.remove();
                              break;
                          }
                      }
                  });
                  selectedPhones.clear();
                  if (deleteButton) deleteButton.disabled = true;
                  checkboxes.forEach(checkbox => {
                      checkbox.checked = false;
                  });
                  alert(alertDeleteSuccess);
              } else {
                  alert(alertDeleteError + data.message);
              }
          })
          .catch(error => {
              console.error('Error:', error);
              alert(alertUnknownError);
              window.location.href = '/user-clients';
          });
        }

        function setupCheckboxes() {
          if (!selectAllCheckbox) {
            console.error('{{ __("Element with ID \"selectAllcheckbox\" not found.") }}');
            return;
          }

          if (!checkboxes.length) {
            console.error('{{ __("No checkboxes found.") }}');
            return;
          }

          selectAllCheckbox.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
              checkbox.checked = this.checked;
              const row = checkbox.closest('tr');
              const phone = row.cells[3].textContent.trim(); // Phone is in cell index 3
              if (this.checked) {
                selectedPhones.add(phone);
              } else {
                selectedPhones.delete(phone);
              }
            });
            if (deleteButton) deleteButton.disabled = selectedPhones.size === 0;
          });

          checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
              const row = this.closest('tr');
              const phone = row.cells[3].textContent.trim(); // Phone is in cell index 3
              
              if (this.checked) {
                selectedPhones.add(phone);
              } else {
                selectedPhones.delete(phone);
              }
              deleteButton.disabled = selectedPhones.size === 0;
            });
          });
        }

        setupCheckboxes();
        setupDeleteModal();
        console.log(pdata);

        function sendreqprofile(){
            fetch('/handleprofilegroupdata', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(pdata)
            })
            .then(response => response.json())
            .then(data => {
                console.log('{{ __("Profile data sent successfully:") }}', data);
            })
            .catch(error => {
                console.error('{{ __("Error sending profile data:") }}', error);
            });
        }

        const viewIdBtn = document.getElementById('aview');
        console.log('viewIdBtn:', viewIdBtn); 
        if (viewIdBtn) {
            viewIdBtn.addEventListener('click', function() {
                console.log('Button clicked!');
                console.log(pdata);
                sendreqprofile();
            });
        } else {
            console.error('{{ __("Button with id \"aview\" not found.") }}');
        }

        function che(){
            const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function(){
                    const row = this.closest('tr');
                    const namee = row.cells[1].textContent.trim();
                    const option = row.cells[2].textContent.trim();
                    const phonenum = row.cells[3].textContent.trim();
                    console.log(phonenum);
                    const data = {
                        'name': namee,
                        'option': option,
                        'phone': phonenum,
                    };
                    console.log(data);
                    fetch('/viewclient', {
                        method: 'POST',        
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify(data)
                    });
                });
            });
        }

        che();
      });

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

      let data = {
          choice: '{{ __("default") }}'
      };

      function sendDataToServer(choice) {
          fetch('/change-group', {
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
              },
              body: JSON.stringify({ choice: choice })
          })
          .then(response => response.json())
          .then(result => {
              console.log('{{ __("Success:") }}', result);
          })
          .catch(error => {
              console.error('{{ __("Error:") }}', error);
          });
      }

      document.getElementById('formGroup').addEventListener('submit', function(event) {
          event.preventDefault();
      });

      document.getElementById('group_select').addEventListener('change', function() {
          const selectedValue = this.value;
         
          switch(selectedValue) {
              case 'default':
                  data.choice = '{{ __("No Group") }}';
                  console.log("{{ __('Default selected') }}");
                  break;
              case 'allclients':
                  data.choice = '{{ __("All Clients") }}';
                  break;
              default:
                  data.choice = '{{ __("default") }}';
                  console.log("{{ __('Unexpected value, setting to default') }}");
          }
          sendDataToServer(data.choice);
      });
    </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) => {
          // Load saved state
          const savedState = localStorage.getItem(input.id);
          if (savedState === 'true') {
            input.checked = true;
            messageSettingsSections[index].style.display = 'block';
          } else {
            input.checked = false;
            messageSettingsSections[index].style.display = 'none';
          }

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

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

        // 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
        const submitButton = document.getElementById('btnadd');
        const cancelButton = document.querySelector('.btn_close');

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

          // Collect data from inputs
          const dataToSend = collectFormData();

          // Send data via fetch
          sendFormData('/api/data-sas'); // The function already collects data internally
        });

        cancelButton.addEventListener('click', function(event) {
          hideModal(confirmationModal);
        });
      });
    </script>
  </body>
</html> and  send me the updated en.json and  ar.json {
    "Sas Radius Pro Dashboard": "Sas Radius Pro Dashboard",
    "logo": "Logo",
    "user_profile": "User Profile",
    "Home": "Home",
    "Messages": "Messages",
    "Client List | Found :count entries": "Client List | Found :count entries",
    "Template List | Found :count entries": "Template List | Found :count entries",
    "Message Settings": "Message Settings",
    "Country Code": "Country Code",
    "Egypt": "Egypt",
    "Libya": "Libya",
    "Iraq": "Iraq",
    "UAE": "UAE",
    "Saudi Arabia": "Saudi Arabia",
    "Messaging Service": "Messaging Service",
    "Additional keys you can use": "Additional keys you can use",
    "Profile": "Profile",
    "Expiration Date": "Expiration Date",
    "Username": "Username",
    "First Name": "First Name",
    "Usage Example": "Usage Example",
    "Hello": "Hello",
    "the": "the",
    "monthly package has been activated and will expire on": "the monthly package has been activated and will expire on",
    "The client will receive it like this": "The client will receive it like this",
    "Activation Message": "Activation Message",
    "Expiry Message": "Expiry Message",
    "About to Expire Subscription": "About to Expire Subscription",
    "Upon Subscription Activation": "Upon Subscription Activation",
    "Upon Package Renewal": "Upon Package Renewal",
    "Upon Package Change": "Upon Package Change",
    "Upon Client Deposit": "Upon Client Deposit",
    "Upon Withdrawal from Client Balance": "Upon Withdrawal from Client Balance",
    "Upon Editing Client Data": "Upon Editing Client Data",
    "Upon Adding or Removing Consumption Capacities (GB) for Client": "Upon Adding or Removing Consumption Capacities (GB) for Client",
    "Upon Client Deletion": "Upon Client Deletion",
    "Upon Manager Login": "Upon Manager Login",
    "Upon Manager Deposit": "Upon Manager Deposit",
    "Upon Withdrawal from Manager Balance": "Upon Withdrawal from Manager Balance",
    "Aggressive Messaging": "Aggressive Messaging",
    "Operation Number": "Operation Number",
    "Account Symbol": "Account Symbol",
    "Last Name": "Last Name",
    "Package": "Package",
    "Balance": "Balance",
    "Return to Menu": "Return to Menu",
    "Card Activation Confirmation Message": "Card Activation Confirmation Message",
    "Insufficient Balance for Package Activation Message": "Insufficient Balance for Package Activation Message",
    "Package Activation Data Message": "Package Activation Data Message",
    "Package Activation Confirmation Message": "Package Activation Confirmation Message",
    "Enable Card Charging": "Enable Card Charging",
    "Menu Message": "Menu Message",
    "Successful Card Activation Message": "Successful Card Activation Message",
    "Card Entry Request Message": "Card Entry Request Message",
    "Bot Preferences": "Bot Preferences",
    "Message Sent Successfully!": "Message Sent Successfully!",
    "Operations": "Operations",
    "Add": "Add",
    "View": "View",
    "Send Message": "Send Message",
    "Change Group": "Change Group",
    "Reload": "Reload",
    "Filter": "Filter",
    "Template": "Template",
    "Message": "Message",
    "Creation Date": "Creation Date",
    "Name": "Name",
    "Group": "Group",
    "Phone": "Phone",
    "Phones": "Phones",
    "Notes": "Notes",
    "Delete": "Delete",
    "Delete Confirmation": "Delete Confirmation",
    "Are you sure you want to delete the selected groups?": "Are you sure you want to delete the selected groups?",
    "Confirm": "Confirm",
    "Cancel": "Cancel",
    "Profile data sent successfully:": "Profile data sent successfully:",
    "Error sending profile data:": "Error sending profile data:",
    "Button with id \"aview\" not found.": "Button with id \"aview\" not found.",
    "Modal element not provided.": "Modal element not provided.",
    "Element with ID \"deleteConfirmationModal\" not found.": "Element with ID \"deleteConfirmationModal\" not found.",
    "Element with ID \"confirmDelete\" not found.": "Element with ID \"confirmDelete\" not found.",
    "Element with ID \"deletebtn\" not found.": "Element with ID \"deletebtn\" not found.",
    "Element with ID \"selectAllcheckbox\" not found.": "Element with ID \"selectAllcheckbox\" not found.",
    "No checkboxes found.": "No checkboxes found.",
    "Please select at least one client to delete.": "Please select at least one client to delete.",
    "Selected clients have been successfully deleted.": "Selected clients have been successfully deleted.",
    "Error deleting clients: ": "Error deleting clients: ",
    "An error occurred while deleting clients.": "An error occurred while deleting clients.",
    "No Group": "No Group",
    "Default selected": "Default selected",
    "Unexpected value, setting to default": "Unexpected value, setting to default",
    "Enable Account Balance Display": "Enable Account Balance Display",
    "Card Charging": "Card Charging",
    "Profile Data Sent Successfully:": "Profile Data Sent Successfully:",
    "Error Sending Profile Data:": "Error Sending Profile Data:"
  }{
    "Sas Radius Pro Dashboard": "Sas Radius Pro Dashboard",
    "Home": "الرئيسيه",
    "Messages": "الرسائل",
    "Message List | Found :count entries": "قائمة الرسائل | عثر على :count قيد",
    "Group List | Found :count entries": "قائمة المجموعات | عثر على :count قيد",
    "Template List | Found :count entries": "قائمة القوالب | عثر على :count قيد",
    "Client List | Found :count entries": "قائمة العملاء | عثر على :count قيد",
    "Add": "اضافه",
    "Sessions": "الجلسات",
    "Clients": "العملاء",
    
    "Delete": "حذف",
    "Change Name": "تغير الاسم",
    "Groups": "المجموعات",
    "Choose Group": "اختر مجموعه",
    "All Clients": "كل العملاء",
    "Confirm": "موافق",
    "Delete Confirmation": "تأكيد الحذف",
    "Are you sure you want to delete these messages?": "هل أنت متأكد من حذف هذه الرسائل؟",
    "Are you sure you want to delete the selected groups?": "هل أنت متأكد من حذف المجموعات المحددة؟",
    "Cancel": "إلغاء",
    "Search...": "بحث...",
    "defaultPhone": "defaultPhone",
    "Please select messages to delete.": "الرجاء تحديد عميل واحد على الأقل للحذف.",
    "Selected messages have been successfully deleted.": "تم حذف الرسائل المحددة بنجاح.",
    "Operation completed successfully.": "تمت العمليه بنجاح.",
    "Please select at least one group to delete.": "الرجاء تحديد مجموعة واحدة على الأقل للحذف.",
    "Selected groups have been successfully deleted.": "تم حذف المجموعات المحددة بنجاح.",
    "Error deleting groups: ": "خطأ في حذف المجموعات: ",
    "An error occurred while deleting groups.": "حدث خطأ أثناء حذف المجموعات.",
    "logo": "شعار",
    "user_profile": "ملف المستخدم",
    "View": "عرض",
    "Send Message": "ارسال رساله",
    "Change Group": "تغير المجموعة",
    "Reload": "إعادة تحميل",
    "Filter": "تصفية",
    "Template": "القالب",
    "Message": "الرساله",
    "Creation Date": "تاريخ الإنشاء",
    "Name": "الاسم",
    "Group": "المجموعة",
    "Phone": "الهاتف",
    "Phones": "الهواتف",
    "Notes": "ملاحظات",
    "Profile data sent successfully:": "تم إرسال بيانات الملف الشخصي بنجاح:",
    "Error sending profile data:": "خطأ في إرسال بيانات الملف الشخصي:",
    "Button with id \"aview\" not found.": "لم يتم العثور على الزر بمعرف \"aview\".",
    "Modal element not provided.": "لم يتم توفير عنصر المودال.",
    "Element with ID \"deleteConfirmationModal\" not found.": "لم يتم العثور على العنصر بمعرف \"deleteConfirmationModal\".",
    "Element with ID \"confirmDelete\" not found.": "لم يتم العثور على العنصر بمعرف \"confirmDelete\".",
    "Element with ID \"deletebtn\" not found.": "لم يتم العثور على العنصر بمعرف \"deletebtn\".",
    "Element with ID \"selectAllcheckbox\" not found.": "لم يتم العثور على العنصر بمعرف \"selectAllcheckbox\".",
    "No checkboxes found.": "لم يتم العثور على مربعات اختيار.",
    "Please select at least one client to delete.": "الرجاء تحديد عميل واحد على الأقل للحذف.",
    "Selected clients have been successfully deleted.": "تم حذف العملاء المحددين بنجاح.",
    "Error deleting clients: ": "خطأ في حذف العملاء: ",
    "An error occurred while deleting clients.": "حدث خطأ أثناء حذف العملاء.",
    "No Group": "لا توجد مجموعة",
    "Default selected": "تم تحديد الافتراضي",
    "Unexpected value, setting to default": "قيمة غير متوقعة، سيتم التعيين على الافتراضي",
    "Message Settings": "اعدادات الرسائل",
    "Country Code": "كود الدولة",
    "Egypt": "مصر",
    "Libya": "ليبيا",
    "Iraq": "العراق",
    "UAE": "الامارات",
    "Saudi Arabia": "السعوديه",
    "Messaging Service": "خدمة الرسائل",
    "Additional keys you can use": "مفاتيح اضافية يمكنك استخدامها",
    "Profile": "البروفايل",
    "Expiration Date": "تاريخ الانتهاء",
    "Username": "اسم المستخدم",
    "First Name": "الاسم الاول",
    "Usage Example": "مثال للاستخدام",
    "Hello": "مرحبا",
    "the": "ال",
    "monthly package has been activated and will expire on": "باقة :srv الشهرية تم تفعيلها وسوف تنتهي بتاريخ :exp",
    "The client will receive it like this": "سوف يصل الى العميل بهذا الشكل",
    "Hello Yasser, the 50GB monthly package has been activated and will expire on": "مرحبا ياسر, باقة 50 جيجا الشهرية تم تفعيلها وسوف تنتهي بتاريخ 2022-12-01 12:00:00",
    "Profile Settings": "اعدادات الملف الشخصي",
    "Personal Phone": "الهاتف الشخصى",
    "When this option is activated, the connected personal phone will be used.": "عند تنشيط هذا الخيار، سيتم استخدام الهاتف الشخصي المتصل بجلستك.",
    "Upon Subscription Activation": "عند تفعيل الاشتراك",
    "Upon Package Renewal": "عند تمديد الباقة",
    "Upon Package Change": "عند تغيير الباقة",
    "Upon Client Deposit": "عند ايداع العميل",
    "Upon Withdrawal from Client Balance": "عند السحب من رصيد العميل",
    "Upon Editing Client Data": "عند تعديل بيانات العميل",
    "Upon Adding or Removing Consumption Capacities (GB) for Client": "عند اضافة او حذف سعات استهلاك (جيجات) للعميل",
    "Upon Client Deletion": "عند حذف العميل",
    "Upon Manager Login": "عند تسجيل دخول المدير",
    "Upon Manager Deposit": "عند ايداع المدير",
    "Upon Withdrawal from Manager Balance": "عند السحب من رصيد المدير"
  }