<!DOCTYPE html>
<html lang="en">
  <head>
  <meta name="csrf-token" content="{{ csrf_token() }}">

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

      </div>
      <!-- end sidebar -->

      <div class="content_page">
        <div class="header">
          <div class="left">
            <div class="icon_menu">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                />
              </svg>
            </div>
            <div class="logo_header">
              <img src="images/logo.png" alt="logo" loading="lazy" />
            </div>
            <div class="input_search">
              <input type="text" placeholder="Search..." />
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                />
              </svg>
            </div>
          </div>
          <div class="right">
            <div class="nav_item">
              <div class="head">
                <img
                  class="lang"
                  src="images/Flag-United-States-of-America.webp"
                  alt="Flag-United-States-of-America"
                  loading="lazy"
                />
              </div>
              <div class="list list1">
                <div class="item">
                  <img
                    src="images/Flag-United-States-of-America.webp"
                    alt="Flag-United-States-of-America"
                    loading="lazy"
                  />
                  <span>English (UK)</span>
                </div>
                <div class="item">
                  <img src="images/ar.png" alt="ar-img" loading="lazy" />
                  <span>Arabic (ar)</span>
                </div>
              </div>
            </div>
            <div class="notfication">
              <div class="head">
                <div class="icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-6 h-6"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div class="nav_item">
              <div class="head">
                <img
                  class="img_profile"
                  src="images/user-1.jpg"
                  alt="user-1"
                  loading="lazy"
                />
              </div>
              @include('include.profile')

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

        <div class="content_profile_subscriber">
          <div class="path">
            <span>الرئيسيه</span> /
            <span>القوالب</span>
          </div>

          <div class="nav_container">
            <div class="nav_profile">
              <div class="item active" data-num="1">
                <i class="fa-regular fa-user"></i>
                <span>عام</span>
              </div>
              <div class="item" data-num="2">
                <i class="fa-regular fa-pen-to-square"></i>
                <span>تعديل</span>
              </div>
            </div>
          </div>

          <div class="section_profile general_information active" data-num="1">
            <div class="line">
              <div class="main_details">
                <div class="box_main_details">
                  <div class="image">
                    <img
                      src="./images/profile-img.jpeg"
                      alt=""
                      loading="lazy"
                    />
                  </div>
                  <!-- <h5 class="name">Rick James</h5>
                  <span class="position">Lead Designer / Developer</span> -->
                </div>
                <div class="box_btns_utils">
                  <div class="box">
                    <a  id='delbtn' class="item btn_remove_user">
                      <i class="fa-solid fa-trash"></i>
                      <span> حذف</span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="info_details">
                <div class="row">
                  <div class="col-12">
                    <div class="item">
                      <h6>القالب</h6>
                    <span id="ttname">{{$tname}}</span>
                    </div>
                    <div class="item">
                      <h6>الرساله</h6>
                      <span>{{$message}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="section_profile update_infomation" data-num="2">
            <div class="general_information">
              <div class="head">
                <h4>اضافه عميل</h4>
              </div>
              <form action="">
                <div class="row">
                  <div class="col-12">
                    <div class="input_item">
                      <label for="">القالب</label>
                      <input id='tempname' type="text" placeholder="اكتب اي اسم" />
                    </div>

                    <div class="input_item">
                      <label for=""> الرسالة</label>
                      <textarea name="" id="msg"></textarea>
                    </div>
                  </div>
                </div>
              </form>
            </div>

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

    <!-- start model add phone -->
    <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>
            <input type="number" value="" />
          </div>

          <button class="btn_submit">موافق</button>
        </form>
      </div>
    </div>
    <!-- end model add phone -->

    <script src="js/model.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="js/nav-profile.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
                     let data = {};
       const mtname = document.getElementById('ttname').textContent;
const btnsubmit =document.getElementById('add');
const delbtn =document.getElementById('delbtn')
const msgname = document.getElementById('tempname');
const tmsg = document.getElementById('msg');



  
  delbtn.addEventListener('click', function(){
    deld = {
      'name':mtname,

    }
    fetch('/del-temp-message', {method:'post', headers: { 'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }, body: JSON.stringify(deld)})
        setTimeout(() => {
        window.location.href = '/temp-messages'; 
      }, 1000);

  })

  data.name =mtname;
    msgname.addEventListener('input', function(event) {
        data['y'] = event.target.value;
        console.log(data);
    });

    tmsg.addEventListener('input', function(event) {
        data['s'] = event.target.value;
        console.log(data); 
    });


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

}

btnsubmit.addEventListener('click', function(){
  sendrequest();

  setTimeout(()=>{
    window.location.href="/temp-messages"
  },1000)
})
      $("#table").DataTable({
        pagingType: "full_numbers",
        scrollX: true,
        autoWidth: false,
      });
    </script>
  </body>
</html>
make it when editing deleting it shows a popup just as this code do <!DOCTYPE html>
<html lang="en">
  <head>  <meta name="csrf-token" content="{{ csrf_token() }}">

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

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

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

        <div class="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> <!-- "Confirm Deletion" -->
    <p>هل أنت متأكد من حذف هذه الرسائل؟</p> <!-- "Are you sure you want to delete these messages?" -->
    <button class="btn btn-primary" id="confirmDelete">موافق</button> <!-- "Confirm" -->
    <button class="btn btn-close" id="cancelDelete">الغاء</button> <!-- "Cancel" -->
  </div>
</div>
    <!-- end model add group -->

    <script src="js/model.js"></script>
    <script src="js/tableUtils.js"></script>
    <script src="js/boxs-header.js"></script>
    <script src="js/sidebar.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    
    <script>
  document.addEventListener('DOMContentLoaded', function() {
        // Data object to hold selected phones
        let selectedPhones = new Set();

        // Get references to elements
        const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
        const deleteBtn = document.getElementById('deletebtn');
        const selectAllCheckbox = document.querySelector('thead input[type="checkbox"]');

        // Delete Confirmation Modal Elements
        const deleteConfirmationModal = document.getElementById('deleteConfirmationModal');
        const closeDeleteModalElements = deleteConfirmationModal.querySelectorAll('.close, #cancelDelete');
        const confirmDeleteButton = document.getElementById('confirmDelete');

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

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

        // Attach event listeners to close buttons in the modal
        closeDeleteModalElements.forEach(element => {
          element.addEventListener('click', () => {
            hideDeleteConfirmationModal();
          });
        });

        // Event listener for "Confirm Delete" button in the modal
        confirmDeleteButton.addEventListener('click', () => {
          hideDeleteConfirmationModal();
          deleteSelectedRows(); // Proceed with deletion
        });

        // Handle "Select All" checkbox functionality
        selectAllCheckbox.addEventListener('change', function() {
          checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
            const row = checkbox.closest('tr');
            const phone = row.cells[1].textContent.trim(); // Assuming 'to' phone is in the fourth cell
            if (this.checked) {
              selectedPhones.add(phone);
            } else {
              selectedPhones.delete(phone);
            }
          });
          deleteBtn.disabled = selectedPhones.size === 0;
        });

        // Handle individual checkbox functionality
        checkboxes.forEach((checkbox) => {
          checkbox.addEventListener('change', function() {
            const row = this.closest('tr');
            const phone = row.cells[1].textContent.trim(); // Assuming 'to' phone is in the fourth cell

            if (this.checked) {
              selectedPhones.add(phone);
            } else {
              selectedPhones.delete(phone);
            }
            deleteBtn.disabled = selectedPhones.size === 0;
          });
        });

        // Handle "Delete" button click to show confirmation modal
        deleteBtn.addEventListener('click', function() {
          if (selectedPhones.size > 0) {
            showDeleteConfirmationModal();
          } else {
            alert('يرجى اختيار الرسائل لحذفها.'); // "Please select messages to delete."
          }
        });

        // Function to perform the deletion
        function deleteSelectedRows() {
          console.log('Selected Phones for Deletion:', Array.from(selectedPhones));

          fetch('/delete-rows-messages', {
            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) {
              // Remove rows from the table
              selectedPhones.forEach(phone => {
                const rows = document.querySelectorAll('tbody tr');
                rows.forEach(row => {
                  const toPhone = row.cells[3].textContent.trim(); // 'to' phone in the fourth cell
                  if (toPhone === phone) {
                    row.remove();
                  }
                });
              });
              // Clear the selectedPhones set
              selectedPhones.clear();
              deleteBtn.disabled = true;
              alert('تم حذف الرسائل المحددة بنجاح.'); // "Selected messages have been successfully deleted."
            } else {
              console.error('Deletion Error:', data.error);
              alert('تمت العمليه بنجاح.'); // "An error occurred while deleting messages. Please try again."
              window.location.reload();
            }
          })
          .catch(error => {
            console.error('Fetch Error:', error);
            alert('حدث خطأ أثناء حذف الرسائل. حاول مرة أخرى.'); // "An error occurred while deleting messages. Please try again."
          });
        }

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

      });

    </script>
  </body>
</html>