<!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>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
    <!-- 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" />
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
    
    <!-- Scripts -->
    <script src="{{ asset('js/bootstrap.js') }}"></script>
    
    <!-- Custom CSS for Modals -->
    <style>
        .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>
</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...') }}" value="{{ old('search', $configData['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="notification">
                        <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>
            
            <!-- Message Settings -->
            <div class="message_settings">
                <div class="head">
                    <h4>{{ __('Message Settings') }}</h4>
                </div>
                <div class="content">
                    <!-- Country Code Selection -->
                    <div class="input_select">
                        <label for="country_code">{{ __('Country Code') }}</label>
                        <select name="country_code" id="country_code">
                            <option value="egypt" {{ (isset($configData['country_code']) && $configData['country_code'] == 'egypt') ? 'selected' : '' }}>
                                {{ __('Egypt') }}
                            </option>
                            <option value="libya" {{ (isset($configData['country_code']) && $configData['country_code'] == 'libya') ? 'selected' : '' }}>
                                {{ __('Libya') }}
                            </option>
                            <option value="iraq" {{ (isset($configData['country_code']) && $configData['country_code'] == 'iraq') ? 'selected' : '' }}>
                                {{ __('Iraq') }}
                            </option>
                            <option value="uae" {{ (isset($configData['country_code']) && $configData['country_code'] == 'uae') ? 'selected' : '' }}>
                                {{ __('UAE') }}
                            </option>
                            <option value="saudi_arabia" {{ (isset($configData['country_code']) && $configData['country_code'] == 'saudi_arabia') ? 'selected' : '' }}>
                                {{ __('Saudi Arabia') }}
                            </option>
                        </select>
                    </div>
                    
                    <!-- Messaging Service Toggle -->
                    <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"
                                   {{ (isset($configData['messaging_service']) && $configData['messaging_service']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Messaging Service Section 1 -->
                    <div class="message_settings_section" data-num="1" style="{{ (isset($configData['messaging_service']) && $configData['messaging_service']) ? 'display: block;' : 'display: none;' }}">
                        <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>
                    
                    <!-- About to Expire Subscription Toggle -->
                    <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"
                                   {{ (isset($configData['about_to_expire_subscription']) && $configData['about_to_expire_subscription']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Messaging Service Section 2 -->
                    <div class="message_settings_section" data-num="2" style="{{ (isset($configData['about_to_expire_subscription']) && $configData['about_to_expire_subscription']) ? 'display: block;' : 'display: none;' }}">
                        <div class="input_item">
                            <label for="activation_message">{{ __('Activation Message') }}</label>
                            <textarea name="activation_message" id="activation_message">{{ $configData['activation_message'] ?? '' }}</textarea>
                        </div>
                    </div>
                    
                    <!-- Upon Subscription Expiry Toggle -->
                    <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"
                                   {{ (isset($configData['upon_subscription_expiry']) && $configData['upon_subscription_expiry']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Messaging Service Section 3 -->
                    <div class="message_settings_section" data-num="3" style="{{ (isset($configData['upon_subscription_expiry']) && $configData['upon_subscription_expiry']) ? 'display: block;' : 'display: none;' }}">
                        <div class="input_select">
                            <label for="warning_before">{{ __('Warning Before') }}</label>
                            <select name="warning_before" id="warning_before">
                                <option value="1" {{ (isset($configData['warning_before']) && $configData['warning_before'] == '1') ? 'selected' : '' }}>
                                    {{ __('1 day') }}
                                </option>
                                <option value="2" {{ (isset($configData['warning_before']) && $configData['warning_before'] == '2') ? 'selected' : '' }}>
                                    {{ __('2 days') }}
                                </option>
                                <option value="3" {{ (isset($configData['warning_before']) && $configData['warning_before'] == '3') ? 'selected' : '' }}>
                                    {{ __('3 days') }}
                                </option>
                                <option value="4" {{ (isset($configData['warning_before']) && $configData['warning_before'] == '4') ? 'selected' : '' }}>
                                    {{ __('4 days') }}
                                </option>
                                <option value="5" {{ (isset($configData['warning_before']) && $configData['warning_before'] == '5') ? 'selected' : '' }}>
                                    {{ __('5 days') }}
                                </option>
                            </select>
                        </div>
                        <div class="input_item">
                            <label for="expiry_message">{{ __('Expiry Message') }}</label>
                            <textarea name="expiry_message" id="expiry_message">{{ $configData['expiry_message'] ?? '' }}</textarea>
                        </div>
                    </div>
                    
                    <!-- Aggressive Messaging Toggle -->
                    <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"
                                   {{ (isset($configData['aggressive_messaging']) && $configData['aggressive_messaging']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Aggressive Messaging Information -->
                    <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>
                    
                    <!-- Messaging Service Section 4 -->
                    <div class="message_settings_section" data-num="4" style="{{ (isset($configData['aggressive_messaging']) && $configData['aggressive_messaging']) ? 'display: block;' : 'display: none;' }}">
                        <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" value="{{ $configData['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-personal">{{ __('Messaging Service') }}</label>
                                        <input class="form-check-input" type="checkbox" role="switch" id="messaging-service4-personal"
                                               {{ (isset($configData['personal_messaging_service']) && $configData['personal_messaging_service']) ? 'checked' : '' }} />
                                    </div>
                                </div>
                                <small>{{ __('When this option is activated, the connected personal phone will be used.') }}</small>
                            </div>
                        </div>
                        
                        <!-- Additional Switches -->
                        <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"
                                               {{ (isset($configData['upon_subscription_activation']) && $configData['upon_subscription_activation']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_package_renewal']) && $configData['upon_package_renewal']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_package_change']) && $configData['upon_package_change']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_client_deposit']) && $configData['upon_client_deposit']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_withdrawal_client_balance']) && $configData['upon_withdrawal_client_balance']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_editing_client_data']) && $configData['upon_editing_client_data']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_consumption_capacity_change']) && $configData['upon_consumption_capacity_change']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_client_deletion']) && $configData['upon_client_deletion']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_manager_login']) && $configData['upon_manager_login']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_manager_deposit']) && $configData['upon_manager_deposit']) ? 'checked' : '' }} />
                                    </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"
                                               {{ (isset($configData['upon_withdrawal_manager_balance']) && $configData['upon_withdrawal_manager_balance']) ? 'checked' : '' }} />
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Additional Keys Info -->
                        <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>
                        
                        <!-- Menu Message and Account Information -->
                        <div class="input_item">
                            <label for="messagemenu">{{ __('Menu Message') }}</label>
                            <input type="text" placeholder="" id="messagemenu" value="{{ $configData['menu_message'] ?? '' }}" />
                        </div>
                        <div class="input_item">
                            <label for="accountinformationdata">{{ __('Account Information Message') }}</label>
                            <textarea name="account_information" id="accountinformationdata">{{ $configData['account_information_message'] ?? '' }}</textarea>
                        </div>
                    </div>
                    
                    <!-- Enable Account Balance Display Toggle -->
                    <div class="switch_section">
                        <div class="form-check form-switch">
                            <label class="form-check-label" for="enable-account-balance">{{ __('Enable Account Balance Display') }}</label>
                            <input class="form-check-input" type="checkbox" role="switch" id="enable-account-balance" data-num="4"
                                   {{ (isset($configData['enable_account_balance_display']) && $configData['enable_account_balance_display']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Messaging Service Section 4 (Account Balance) -->
                    <div class="message_settings_section" data-num="4" style="{{ (isset($configData['enable_account_balance_display']) && $configData['enable_account_balance_display']) ? 'display: block;' : 'display: none;' }}">
                        <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" value="{{ $configData['menu_message_balance'] ?? '' }}" />
                                </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">{{ $configData['successful_card_activation_message'] ?? '' }}</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" value="{{ $configData['insufficient_balance_message'] ?? '' }}" />
                                </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">{{ $configData['package_activation_data_message'] ?? '' }}</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">{{ $configData['package_activation_confirmation_message'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Enable Card Charging Toggle -->
                    <div class="switch_section">
                        <div class="form-check form-switch">
                            <label class="form-check-label" for="enable-card-charging">{{ __('Enable Card Charging') }}</label>
                            <input class="form-check-input" type="checkbox" role="switch" id="enable-card-charging" data-num="5"
                                   {{ (isset($configData['enable_card_charging']) && $configData['enable_card_charging']) ? 'checked' : '' }} />
                        </div>
                    </div>
                    
                    <!-- Messaging Service Section 5 (Card Charging) -->
                    <div class="message_settings_section" data-num="5" style="{{ (isset($configData['enable_card_charging']) && $configData['enable_card_charging']) ? 'display: block;' : 'display: none;' }}">
                        <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" value="{{ $configData['menu_message_card_charging'] ?? '' }}" />
                                </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">{{ $configData['card_activation_confirmation_message'] ?? '' }}</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">{{ $configData['card_entry_request_message'] ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Confirmation Modal -->
        <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>
        
        <!-- Add Group Modal -->
        <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" {{ (isset($configData['group']) && $configData['group'] == 'default') ? 'selected' : '' }}></option>
                            <option value="allclients" {{ (isset($configData['group']) && $configData['group'] == 'allclients') ? 'selected' : '' }}>
                                {{ __('All Clients') }}
                            </option>
                        </select>
                    </div>
                    <button class="btn_submit">{{ __('Confirm') }}</button>
                </form>
            </div>
        </div>
        <!-- End Modal Add Group -->
    </main>
    
    <!-- Additional Divs -->
    <div class="overflow"></div>
    
    <!-- Scripts -->
    <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 to collect form data
        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 to send form data
        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 {
                    // Handle failure
                    alert(data.message || '{{ __("An error occurred.") }}');
                }
            })
            .catch((error) => {
                console.error('{{ __("Error:") }}', error);
                alert('{{ __("An error occurred while saving the settings.") }}');
            });
        }

        // Debounce function to limit the rate of function calls
        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', () => {
            // Add event listeners to form elements
            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();
                    });
                }
            });

            // Handle switch sections
            const switchesSections = document.querySelectorAll(".switch_section input[type='checkbox']");
            const messageSettingsSections = document.querySelectorAll(".message_settings_section");
            switchesSections.forEach((input) => {
                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();
                });
            });

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

            if (submitButton) {
                submitButton.addEventListener('click', function(event) {
                    event.preventDefault(); // Prevent default button behavior
                    // Collect data and send
                    const dataToSend = collectFormData();
                    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 {
                            // Handle failure
                            alert(data.message || '{{ __("An error occurred.") }}');
                        }
                    })
                    .catch(error => {
                        console.error('{{ __("Error:") }}', error);
                        alert('{{ __("An error occurred while saving the settings.") }}');
                    });
                });
            }

            if (cancelButton) {
                cancelButton.addEventListener('click', function(event) {
                    hideModal(confirmationModal);
                });
            }

            // Delete Functionality
            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 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[3] && row.cells[3].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();

            // Profile Group Data Handling
            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.") }}');
            }

            // Handle client view checkboxes
            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();
        });

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

        // Change Group Functionality
        let dataGroup = { 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':
                    dataGroup.choice = '{{ __("No Group") }}';
                    console.log("{{ __('Default selected') }}");
                    break;
                case 'allclients':
                    dataGroup.choice = '{{ __("All Clients") }}';
                    break;
                default:
                    dataGroup.choice = '{{ __("default") }}';
                    console.log("{{ __('Unexpected value, setting to default') }}");
            }
            sendDataToServer(dataGroup.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');
            if (submitButton) {
                submitButton.addEventListener('click', function(event) {
                    event.preventDefault(); // Prevent default button behavior
                    // Collect data and send
                    const dataToSend = collectFormData();
                    sendFormData('/api/data-sas'); // The function already collects data internally
                });
            }
            if (cancelButton) {
                cancelButton.addEventListener('click', function(event) {
                    hideModal(confirmationModal);
                });
            }
        });
    </script>
</body>
</html> fix all syntax problems with this code