<head>  <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sas Radius Pro Dashboard</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- boostrap -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/bootstrap.js"></script>
    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
<script>

    </script>
  </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(view: '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="main_content_tables">
          <div class="conetnt_table">
            <div class="path">
              <span>الرئيسيه</span> /
              <span>الرسائل</span>
            </div>

            <div class="head_table">
              <div class="info">
                <p class="text_details">
                  <i class="fa-solid fa-people-group"></i>
                  قائمة الرسائل | عثر على 4 قيد
                </p>
              </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"
                  ></path>
                </svg>
              </div>

              <div class="utils">
                <div class="actions_box">
                  <button class="btn_actions">
                    <i class="fa-solid fa-wrench"></i>
                    العمليات
                  </button>

                  <div class="box box_utils">
                    <a href={{route('msgadd')}} class="item">
                      <i class="fa-solid fa-plus"></i>
                      <span>اضافه</span>
                    </a>
                  
                    <button class="item"  id="deletebtn">
                      <i class="fa-solid fa-trash"></i>
                      <span> حذف</span>
                    </button>
                    
                    <div class="item">
                      <i class="fa-solid fa-envelope"></i>
                      <span>تغير الاسم</span>
                    </div>
                  </div>

                </div>
                <div class="reload">
                  <button class="btn_utils">
                    <i class="fa-solid fa-repeat"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="container_table">
              <table id="table" class="display" style="width: 100%">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" />
                    </th>
                    <th>الرساله</th>
                    <th>من</th>
                    <th>الي</th>
                    <th>تاريخ الانشاء</th>
                  </tr>
                </thead>
                <tbody>
                @foreach ($alldta as $dta)

                  <tr>
                  <td><input type="checkbox"></td>
                  <td>{{$dta->message}}</td>
                  <td>defaultPhone</td>
                  <td>{{$dta->phone}}</td>
                  <td>{{$dta->created_at}}</td>
                </tr>
@endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- start model add group -->
    <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="">
          <div class="input_item">
            <label for=""> اختر مجموعه</label>
            <select name="" id="">
              <option value=""></option>
              <option value="">كل العملاء</option>
            </select>
          </div>

          <button class="btn_submit">موافق</button>
        </form>
      </div>
    </div>
    <div id="deleteConfirmationModal" class="custom-modal">
  <div class="custom-modal-content">
    <span class="close">&times;</span>
    <h5>تأكيد الحذف</h5> 
    <p>هل أنت متأكد من حذف هذه الرسائل؟</p>
    <button class="btn btn-primary" id="confirmDelete">موافق</button> <!-- "Confirm" -->
    <button class="btn btn-close" id="cancelDelete">الغاء</button> <!-- "Cancel" -->
  </div>
</div> <head>  <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sas Radius Pro Dashboard</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- boostrap -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/bootstrap.js"></script>
    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
<style>
  #deleteConfirmationModal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001; /* Higher than other modals if any */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}

#deleteConfirmationModal .custom-modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 8px;
  position: relative;
}

#deleteConfirmationModal .close {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

#deleteConfirmationModal .close:hover,
#deleteConfirmationModal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#deleteConfirmationModal button {
  margin: 10px 5px 0 0;
}
</style>
<script>

    </script>
  </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(view: '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="main_content_tables">
          <div class="conetnt_table">
            <div class="path">
              <span>الرئيسيه</span> /
              <span>الرسائل</span>
            </div>

            <div class="head_table">
              <div class="info">
                <p class="text_details">
                  <i class="fa-solid fa-people-group"></i>
                  قائمة الرسائل | عثر على 4 قيد
                </p>
              </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"
                  ></path>
                </svg>
              </div>

              <div class="utils">
                <div class="actions_box">
                  <button class="btn_actions">
                    <i class="fa-solid fa-wrench"></i>
                    العمليات
                  </button>

                  <div class="box box_utils">
                    <a href={{route('msgadd')}} class="item">
                      <i class="fa-solid fa-plus"></i>
                      <span>اضافه</span>
                    </a>
                  
                    <button class="item"  id="deletebtn">
                      <i class="fa-solid fa-trash"></i>
                      <span> حذف</span>
                    </button>
                    
                    <div class="item">
                      <i class="fa-solid fa-envelope"></i>
                      <span>تغير الاسم</span>
                    </div>
                  </div>

                </div>
                <div class="reload">
                  <button class="btn_utils">
                    <i class="fa-solid fa-repeat"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="container_table">
              <table id="table" class="display" style="width: 100%">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" />
                    </th>
                    <th>الرساله</th>
                    <th>من</th>
                    <th>الي</th>
                    <th>تاريخ الانشاء</th>
                  </tr>
                </thead>
                <tbody>
                @foreach ($alldta as $dta)

                  <tr>
                  <td><input type="checkbox"></td>
                  <td>{{$dta->message}}</td>
                  <td>defaultPhone</td>
                  <td>{{$dta->phone}}</td>
                  <td>{{$dta->created_at}}</td>
                </tr>
@endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- start model add group -->
    <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="">
          <div class="input_item">
            <label for=""> اختر مجموعه</label>
            <select name="" id="">
              <option value=""></option>
              <option value="">كل العملاء</option>
            </select>
          </div>

          <button class="btn_submit">موافق</button>
        </form>
      </div>
    </div>
    <div id="deleteConfirmationModal" class="custom-modal">
  <div class="custom-modal-content">
    <span class="close">&times;</span>
    <h5>تأكيد الحذف</h5> 
    <p>هل أنت متأكد من حذف هذه الرسائل؟</p>
    <button class="btn btn-primary" id="confirmDelete">موافق</button> <!-- "Confirm" -->
    <button class="btn btn-close" id="cancelDelete">الغاء</button> <!-- "Cancel" -->
  </div>
</div> <head>  <meta name="csrf-token" content="{{ csrf_token() }}">

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sas Radius Pro Dashboard</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- boostrap -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/bootstrap.js"></script>
    <!-- font awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
<style>
  #deleteConfirmationModal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1001; /* Higher than other modals if any */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}

#deleteConfirmationModal .custom-modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 8px;
  position: relative;
}

#deleteConfirmationModal .close {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

#deleteConfirmationModal .close:hover,
#deleteConfirmationModal .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#deleteConfirmationModal button {
  margin: 10px 5px 0 0;
}
</style>
<script>

    </script>
  </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(view: '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="main_content_tables">
          <div class="conetnt_table">
            <div class="path">
              <span>الرئيسيه</span> /
              <span>الرسائل</span>
            </div>

            <div class="head_table">
              <div class="info">
                <p class="text_details">
                  <i class="fa-solid fa-people-group"></i>
                  قائمة الرسائل | عثر على 4 قيد
                </p>
              </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"
                  ></path>
                </svg>
              </div>

              <div class="utils">
                <div class="actions_box">
                  <button class="btn_actions">
                    <i class="fa-solid fa-wrench"></i>
                    العمليات
                  </button>

                  <div class="box box_utils">
                    <a href={{route('msgadd')}} class="item">
                      <i class="fa-solid fa-plus"></i>
                      <span>اضافه</span>
                    </a>
                  
                    <button class="item"  id="deletebtn">
                      <i class="fa-solid fa-trash"></i>
                      <span> حذف</span>
                    </button>
                    
                    <div class="item">
                      <i class="fa-solid fa-envelope"></i>
                      <span>تغير الاسم</span>
                    </div>
                  </div>

                </div>
                <div class="reload">
                  <button class="btn_utils">
                    <i class="fa-solid fa-repeat"></i>
                  </button>
                </div>
              </div>
            </div>

            <div class="container_table">
              <table id="table" class="display" style="width: 100%">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" />
                    </th>
                    <th>الرساله</th>
                    <th>من</th>
                    <th>الي</th>
                    <th>تاريخ الانشاء</th>
                  </tr>
                </thead>
                <tbody>
                @foreach ($alldta as $dta)

                  <tr>
                  <td><input type="checkbox"></td>
                  <td>{{$dta->message}}</td>
                  <td>defaultPhone</td>
                  <td>{{$dta->phone}}</td>
                  <td>{{$dta->created_at}}</td>
                </tr>
@endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- start model add group -->
    <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="">
          <div class="input_item">
            <label for=""> اختر مجموعه</label>
            <select name="" id="">
              <option value=""></option>
              <option value="">كل العملاء</option>
            </select>
          </div>

          <button class="btn_submit">موافق</button>
        </form>
      </div>
    </div>
    <div id="deleteConfirmationModal" class="custom-modal">
  <div class="custom-modal-content">
    <span class="close">&times;</span>
    <h5>تأكيد الحذف</h5> 
    <p>هل أنت متأكد من حذف هذه الرسائل؟</p>
    <button class="btn btn-primary" id="confirmDelete">موافق</button> <!-- "Confirm" -->
    <button class="btn btn-close" id="cancelDelete">الغاء</button> <!-- "Cancel" -->
  </div>
</div>  replace all the hardcoded strings with translations and send me the ar.json file and en.json file for it ar.json example structure:     "Operations": "العمليات", en json file example structure   "Client List": "Client List",