{
  "sas_radius_pro_dashboard": "لوحة مراقبة Sas Radius Pro",
  "logo": "شعار",
  "user_profile": "ملف المستخدم",
  "search_placeholder": "بحث...",
  "Name": "اسم",
  "Username": "اسم المستخدم",
  "SaaS Link": "رابط الساس",
  "traffic_report": "تقرير المرور",
  "source": "المصدر:",
  "sas_accounts": "حسابات الساس",
  "import_clients": "استياراد العملاء",
  "message_list": "قائمه الرسائل",
  "templates": "القوالب",
  "clients": "العملاء",
  "client_list": "قائمة العملاء",
  "Messaging Service":"خدمه الارسال",

  "reports":"السجل",
  "session_list": "قائمه الجلسات",
  "group_list": "قائمة الجروب",
  "wikipedia_com": "ويكيبيديا.كوم",
  "jan": "يناير",
  "feb": "فبراير",
  "mar": "مارس",
  "apr": "أبريل",
  "may": "مايو",
  "jun": "يونيو",
  "jul": "يوليو",
  "aug": "أغسطس",
  "sep": "سبتمبر",
  "oct": "أكتوبر",
  "nov": "نوفمبر",
  "dec": "ديسمبر",
  "temperature_celsius": "درجة الحرارة (°م)",
  "reggane": "رجانة",
  "search": "بحث",
  "home": "الرئيسية",
  
  "client_list_found_count_entries": "قائمة العملاء | تم العثور على :count مدخلات",
  "template_list_found_count_entries": "قائمة القوالب | تم العثور على :count مدخلات",
  "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_activated": "باقة شهرية تم تفعيلها وسوف تنتهي في",
  "client_receive_like_this": "سوف يتلقى العميل ذلك بهذا الشكل",
  "hello_yasser_package_activated": "مرحبا ياسر، تم تفعيل باقة 50 جيجابايت الشهرية وسوف تنتهي في",
  "activation_message": "رسالة التفعيل",
  "expiry_message": "رسالة انتهاء الصلاحية",
  "about_to_expire_subscription": "اشتراك على وشك الانتهاء",
  "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": "عند السحب من رصيد المدير",
  "aggressive_messaging": "الرسائل العنيفة",
  "operation_number": "رقم العملية",
  "account_symbol": "رمز الحساب",
  "last_name": "الاسم الأخير",
  "package": "باقة",
  "Group List | Found :count Entries": "قائمة الجروبات | تم العثور :count مدخلات",
  "following_data_section.title": "استياراد عملاء",
  "placeholders.country_code": "كود الدوله",
  "balance": "الرصيد",
  "sessions": "الجلسات",
  "Group Name": "اسم الجروب",
  "Phone": "الهاتف",
  "Status": "الحاله",
  "Connect": "اتصال",
  "Disconnect": "الغاء الاتصال",
  "Send Message": "ارسال رساله",
  "Contact": "البيانات",
  "Main phone only": "رقم الرئيسي فقط",
  "Choose a group to be used as a sender": "اختيار جروب كجهه ارسال",
  "Group": "الجروب",
  "Phone Number": "رقم الهاتف",
  "Choose a specific phone number to send the message": "اختيار رقم مخصص لارسال الرساله",
  "Enter Session": "ادخال جلسه معينه",
  "Choose a specific session to send messages from": "اختيار جلسه معنيه للأرسال رسائل به",
  "Choose a phone number": "اختيار رقم",
  "Sessions": "الجلسات",
  "Enter the message to be used": "ادخل رسائل لاستخدام",
  "Enter your message here": "ادخل رسايلك هنا",

  "return_to_menu": "العودة إلى القائمة",
  "card_activation_confirmation_message": "رسالة تأكيد تفعيل البطاقة",
  "insufficient_balance_for_package_activation_message": "رصيد غير كافٍ لتفعيل الباقة",
  "package_activation_data_message": "رسالة بيانات تفعيل الباقة",
  "package_activation_confirmation_message": "رسالة تأكيد تفعيل الباقة",
  "enable_card_charging": "تمكين شحن البطاقة",
  "menu_message": "رسالة القائمة",
  "successful_card_activation_message": "رسالة تفعيل البطاقة الناجحة",
  "card_entry_request_message": "رسالة طلب إدخال البطاقة",
  "bot_preferences": "تفضيلات الروبوت",
  "message_sent_successfully": "تم إرسال الرسالة بنجاح!",
  "operations": "العمليات",
  "add": "إضافة",
  "view": "عرض",
  "send_message": "إرسال رسالة",
  "change_group": "تغيير المجموعة",
  "Sas Radius Pro Dashboard": "لوحة مراقبة Sas Radius Pro",
  "Logo": "شعار",
  "Search...": "بحث...",
  "User Profile": "ملف المستخدم",
  "Sas Radius": "ساس راديوس",
  "Home": "الرئيسية",
  "Messages": "الرسائل",
  "Sas Radius List | Found :count entries": "قائمه ساس راديوس | :count  ريكوردس", 
  "Message List | Found :count entries": "قائمة الرسائل | تم العثور على :count مدخلات",
  "Operations": "العمليات",
  "Add": "إضافة",
  "Delete": "حذف",
  "Change Name": "تغيير الاسم",
  "Reload": "إعادة تحميل",
  "Message": "الرسالة",
  "From": "من",
  "To": "إلى",
  "Creation Date": "تاريخ الإنشاء",
  "defaultPhone": "الهاتف الافتراضي",
  "Groups": "المجموعات",
  "Choose Group": "اختر المجموعة",
  "Select": "اختر",
  "All Clients": "كل العملاء",
  "Confirm": "تأكيد",
  "Delete Confirmation": "تأكيد الحذف",
  "Are you sure you want to delete these messages?": "هل أنت متأكد أنك تريد حذف هذه الرسائل؟",
  "Cancel": "إلغاء",


  "reload": "إعادة تحميل",
  "filter": "تصفية",
  "template": "القالب",
  "message": "الرسالة",
  "creation_date": "تاريخ الإنشاء",
  "name": "الاسم",
  "group": "المجموعة",
  "phone": "الهاتف",
  "phones": "الهواتف",
  "notes": "ملاحظات",
  "delete": "حذف",
  "delete_confirmation": "تأكيد الحذف",
  "are_you_sure_you_want_to_delete_the_selected_groups": "هل أنت متأكد من حذف المجموعات المحددة؟",
  "confirm": "موافق",
  "cancel": "إلغاء",
  "profile_data_sent_successfully": "تم إرسال بيانات الملف الشخصي بنجاح:",
  "error_sending_profile_data": "خطأ في إرسال بيانات الملف الشخصي:",
  "button_aview_not_found": "لم يتم العثور على الزر بمعرف \"aview\".",
  "modal_element_not_provided": "لم يتم توفير عنصر المودال.",
  "delete_confirmation_modal_not_found": "لم يتم العثور على العنصر بمعرف \"deleteConfirmationModal\".",
  "confirm_delete_not_found": "لم يتم العثور على العنصر بمعرف \"confirmDelete\".",
  "delete_button_not_found": "لم يتم العثور على العنصر بمعرف \"deletebtn\".",
  "select_all_checkbox_not_found": "لم يتم العثور على العنصر بمعرف \"selectAllcheckbox\".",
  "no_checkboxes_found": "لم يتم العثور على مربعات اختيار.",
  "please_select_at_least_one_client_to_delete": "يرجى تحديد عميل واحد على الأقل للحذف.",
  "selected_clients_deleted": "تم حذف العملاء المحددين بنجاح.",
  "error_deleting_clients": "خطأ في حذف العملاء: ",
  "error_deleting_clients_generic": "حدث خطأ أثناء حذف العملاء.",
  "no_group": "لا توجد مجموعة",
  "default_selected": "تم تحديد الافتراضي",
  "unexpected_value_setting_default": "قيمة غير متوقعة، سيتم التعيين على الافتراضي",
  "enable_account_balance_display": "تمكين عرض رصيد الحساب",
  "card_charging": "شحن البطاقة",
  "operation_confirmation": "تأكيد العملية",
  "settings_saved_successfully": "تم حفظ الإعدادات بنجاح!",
  "an_error_occurred": "حدث خطأ:",
  "unexpected_error_occurred": "حدث خطأ غير متوقع.",
  "operation_data_sent_successfully": "تم إرسال بيانات العملية بنجاح:",
  "error_sending_operation_data": "خطأ في إرسال بيانات العملية:",
  "name_input_not_in_focus": "حقل الاسم ليس في التركيز.",
  "submitting_data": "جارٍ إرسال البيانات:",
  "general": "عام",
  
  "add_client": "إضافة عميل",
  "delete_clients": "حذف العملاء",
  "add_phone": "إضافة هاتف",
  "phone_number": "رقم الهاتف",
  
  "attach_image": "إرفاق صورة",
  "enter_phone_number_here": "أدخل رقم الهاتف هنا",
  "enter_your_message_here": "أدخل رسالتك هنا",
  "choose_phone_number_to_send_message": "اختر رقم هاتف محدد لإرسال الرسالة",
  "enter_session": "أدخل الجلسة",
  "choose_session_to_send_messages_from": "اختر جلسة محددة لإرسال الرسائل منها",
  "choose_group_as_sender": "اختر مجموعة لاستخدامها كمرسل",
  "main_phone_only": "الهاتف الرئيسي فقط",
  "choose_phone_number": "اختر رقم هاتف",
  "choose_group": "اختر مجموعة",
  "enter_message_to_use": "أدخل الرسالة التي سيتم استخدامها",
  "confirm_send_message": "هل أنت متأكد من أنك تريد إرسال الرسالة؟",
  "template_deleted_successfully": "تم حذف القالب بنجاح.",
  "error_deleting_template": "حدث خطأ أثناء حذف القالب. يرجى المحاولة مرة أخرى.",
  "template_updated_successfully": "تم تعديل القالب بنجاح.",
  "error_editing_template": "حدث خطأ أثناء تعديل القالب. يرجى المحاولة مرة أخرى.",
  
  "add_template": "إضافة قالب",
  "description": "الوصف",
  "additions": "إضافات",
  "confirm_add_new_template": "هل أنت متأكد من إضافة القالب الجديد؟",
  "please_fill_all_required_fields": "يرجى ملء جميع الحقول المطلوبة.",
  
  "following_data_section_title": "إدخال البيانات التالية",
  "alerts_country_code_info": "كود الدولة يُستخدم فقط لتحديد أرقام الهواتف ضمن بيانات عملاء SAS.",
  "labels_save_by_group": "حفظ حسب المجموعة",
  "labels_country_code": "كود الدولة",
  "placeholders.save_by_group": "احفظ حسب المجموعة",
  "placeholders_country_code": "كود الدولة",
  "tables_sas_radius_list_found": "قائمة Sas Radius | تم العثور على :count مدخلات",
  "not_connected": "مش متصل",
  "View": "عرض",
  "tables_sas_link": "رابط Sas",
  
  "remaining_days": "الأيام المتبقية",
  "percentage_days_remaining": "نسبة ما تبقى من أيام",
  "the_better": "الأفضل",
  "daily_points_consumption": "استهلاك النقاط اليومية",
  "percentage_points_consumed_today": "نسبة ما تم استهلاكه من نقاط اليوم",
  "the_lower_better": "الأقل أفضل",
  "customers": "العملاء",
  "groups": "المجموعات",
  "messages": "الرسائل",
  "todays_messages": "رسائل اليوم",
  "session_status": "حالة الجلسة",
  "this_month_messages": "رسائل الشهر الحالي",

  "monthly": "شهري",
  "daily": "يومي",
  
  "change_name": "تغيير الاسم",
  "all_clients": "كل العملاء",
  
  "subscriber_added_successfully": "تم إضافة المشترك بنجاح:",
  "error_adding_subscriber": "خطأ في إضافة المشترك:",
  "template_added_successfully": "تم إضافة القالب بنجاح:",
  "error_adding_template": "خطأ في إضافة القالب:",
  "Please select at least one client to delete.": "يرجى تحديد عميل واحد على الأقل للحذف.",
  "Selected clients have been successfully deleted.": "تم حذف العملاء المحددين بنجاح.",
  "import_from_excel": "استياراد من اكسيل",
  "Client List | Found :count entries": "   :count ريكورد|قائمه العملاء",
  "labels.country_code": "رقم الدوله",
  "Clients": "العملاء",
  "Filter": "فيلتر",
  "labels.save_by_group": "حفظ باجروب",
  "Sessions List | Found :count records": "   :count ريكورد|قائمه الجلسات",
  "Template List | Found :count entries": "  :count ريكورد|قائمه القوالب",
  "sas_radius": "ساس راديوس",
  "sas_bot": "ساس بوت",
  "alerts.country_code_info":"معلموات رقم دوله",
  "Template": "القوالب",
  "An error occurred while deleting clients. Please try again.": "حدث خطأ أثناء حذف العملاء. يرجى المحاولة مرة أخرى.",
  "An unexpected error occurred. Please try again.": "حدث خطأ غير متوقع. يرجى المحاولة مرة أخرى."
  
} {
  "sas_radius_pro_dashboard": "Sas Radius Pro Dashboard",
  "logo": "Logo",
  "user_profile": "User Profile",
  "search_placeholder": "Search...",
  
  "traffic_report": "Traffic Report",
  "source": "Source:",
  "wikipedia_com": "Wikipedia.com",
  "jan": "Jan",
  "feb": "Feb",
  "mar": "Mar",
  "apr": "Apr",
  "may": "May",
  "jun": "Jun",
  "jul": "Jul",
  "aug": "Aug",
  "sep": "Sep",
  "oct": "Oct",
  "nov": "Nov",
  "dec": "Dec",
  "temperature_celsius": "Temperature (°C)",
  "reggane": "Reggane",
  "search": "Search",
  "home": "Home",

  "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_activated": "The monthly package has been activated and will expire on",
  "client_receive_like_this": "The client will receive it like this",
  "hello_yasser_package_activated": "Hello Yasser, the 50GB monthly package has been activated and will expire on",
  "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_aview_not_found": "Button with id \"aview\" not found.",
  "modal_element_not_provided": "Modal element not provided.",
  "delete_confirmation_modal_not_found": "Element with ID \"deleteConfirmationModal\" not found.",
  "confirm_delete_not_found": "Element with ID \"confirmDelete\" not found.",
  "delete_button_not_found": "Element with ID \"deletebtn\" not found.",
  "select_all_checkbox_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_deleted": "Selected clients have been successfully deleted.",
  "error_deleting_clients": "Error deleting clients: ",
  "error_deleting_clients_generic": "An error occurred while deleting clients.",
  "no_group": "No Group",
  "default_selected": "Default selected",
  "unexpected_value_setting_default": "Unexpected value, setting to default",
  "enable_account_balance_display": "Enable Account Balance Display",
  "card_charging": "Card Charging",
  "operation_confirmation": "Operation Confirmation",
  "settings_saved_successfully": "Settings have been saved successfully!",
  "an_error_occurred": "An error occurred:",
  "unexpected_error_occurred": "An unexpected error occurred.",
  "operation_data_sent_successfully": "Operation data sent successfully:",
  "error_sending_operation_data": "Error in sending operation data:",
  "name_input_not_in_focus": "Name input is not in focus.",
  "submitting_data": "Submitting data:",
  "general": "General",
  
  "add_client": "Add Client",
  "delete_clients": "Delete Clients",
  "add_phone": "Add Phone",
  "phone_number": "Phone Number",
  "Sessions List | Found  records": "Session List",
  "Group List | Found :count Entries": "Group List | Found :count Entries",

  "attach_image": "Attach Image",
  "enter_phone_number_here": "Enter phone number here",
  "enter_your_message_here": "Enter your message here",
  "choose_phone_number_to_send_message": "Choose a specific phone number to send the message",
  "not_connected": "not_connected",

  "enter_session": "Enter Session",
  "choose_session_to_send_messages_from": "Choose a specific session to send messages from",
  "choose_group_as_sender": "Choose a group to be used as a sender",
  "main_phone_only": "Main phone only",
  "choose_phone_number": "Choose a phone number",
  "choose_group": "Choose a group",
  "enter_message_to_use": "Enter the message to be used",
  "confirm_send_message": "Are you sure you want to send the message?",
  "template_deleted_successfully": "Template has been successfully deleted.",
  "error_deleting_template": "An error occurred while deleting the template. Please try again.",
  "template_updated_successfully": "Template has been successfully updated.",
  "error_editing_template": "An error occurred while editing the template. Please try again.",
  
  "add_template": "Add Template",
  "description": "Description",
  "additions": "Additions",
  "confirm_add_new_template": "Are you sure you want to add the new template?",
  "please_fill_all_required_fields": "Please fill all required fields.",
  
  "following_data_section_title": "Enter the following data",
  "alerts_country_code_info": "Country code is used only to identify phone numbers within SAS customers data.",
  "labels_save_by_group": "Save according to group",
  "labels_country_code": "Country Code",
  "placeholders_save_by_group": "Save according to group",
  "placeholders_country_code": "Country Code",
  "tables_sas_radius_list_found": "Client List | Found :count entries",
  "tables_sas_link": "Sas Link",
  
  "remaining_days": "Remaining Days",
  "percentage_days_remaining": "Percentage of Days Remaining",
  "the_better": "The Better",
  "daily_points_consumption": "Daily Points Consumption",
  "percentage_points_consumed_today": "Percentage of Points Consumed Today",
  "the_lower_better": "The Lower, The Better",
  "customers": "Customers",
  "groups": "Groups",
  "messages": "Messages",
  "todays_messages": "Today's Messages",
  "session_status": "Session Status",
  "this_month_messages": "This Month's Messages",
  "Sas Radius Pro Dashboard": "Sas Radius Pro Dashboard",
  "Logo": "Logo",
  "Search...": "Search...",
  "User Profile": "User Profile",
  "Home": "Home",
  "Messages": "Messages",
  "Message List | Found :count entries": "Message List | Found :count entries",
  "Operations": "Operations",
  "Add": "Add",
  "Delete": "Delete",
  "Change Name": "Change Name",
  "Reload": "Reload",
  "Message": "Message",
  "From": "From",
  "To": "To",
  "Creation Date": "Creation Date",
  "defaultPhone": "Default Phone",
  "Groups": "Groups",
  "Choose Group": "Choose Group",
  "Select": "Select",
  "All Clients": "All Clients",
  "Confirm": "Confirm",
  "Delete Confirmation": "Delete Confirmation",
  "Are you sure you want to delete these messages?": "Are you sure you want to delete these messages?",
  "Cancel": "Cancel",

  "monthly": "Monthly",
  "daily": "Daily",
  
  "change_name": "Change Name",
  "all_clients": "All Clients",
  
  "subscriber_added_successfully": "Subscriber added successfully:",
  "error_adding_subscriber": "Error adding subscriber:",
  "template_added_successfully": "Template added successfully:",
  "error_adding_template": "Error adding template:",
  
  "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.",
  "An error occurred while deleting clients. Please try again.": "An error occurred while deleting clients. Please try again.",
  "An unexpected error occurred. Please try again.": "An unexpected error occurred. Please try again."
} <!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 {
          
          }
        })
        .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 {
             
            }
          })
          .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> add the keys from the document and translate it fully and add to the en.json and ar.json using the same format