<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>واجهة إدخال بيانات</title>
    <link href="assets/ramzi-logo.png" rel="icon">
    <style>
          @font-face {
            font-family: 'DroidArabicKufiRegular';
            src: url('assets/DroidArabicKufiRegular.woff') format('woff'),
                 url('assets/DroidArabicKufiRegular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        body {
            font-family: 'DroidArabicKufiRegular'; 
            /* font-weight: bold;  */
            /* font-size: 18px; */
        }
        body {
/*            font-family: Arial, sans-serif;*/
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1000px;
            margin: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ccc;
        }
        th, td {
            text-align: center;
            padding: 10px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        .total-row {
            /* background-color: #e8f5e9; */
            background-color: #f5e8e8;
            font-weight: bold;
        }
        .form-container, .date-container, .actions-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            font-family: 'DroidArabicKufiRegular'; 
             font-weight: bold;
        }
        select, input, button {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
             font-family: 'DroidArabicKufiRegular'; 
             font-weight: bold;
        }
        button:hover {
            background-color: #45a049;
        }
        .delete-all {
            background-color: #f44336;
        }
        .delete-all:hover {
            background-color: #d32f2f;
        }
        #category{
            font-family: 'DroidArabicKufiRegular'; 
             font-weight: bold;
        }
      
    .actions-container {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-top: 20px;
    }

    button {
        padding: 10px 10px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-family: 'DroidArabicKufiRegular';
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
    }

    /* زر حذف جميع البيانات */
    .delete-all {
        background-color: #ff4d4d;
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .delete-all:hover {
        background-color: #ff1a1a;
        transform: scale(1.05);
    }

    /* زر إظهار/إخفاء الصفوف */
    .toggle-visibility {
        background-color: #4caf50;
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .toggle-visibility:hover {
        background-color: #45a049;
        transform: scale(1.05);
    }

    /* زر نسخ قيم الإجمالي */
    .copy-totals {
        background-color: #007bff;
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .copy-totals:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }
    .form-container {
        display: flex;
        /* flex-direction: column; */
        gap: 15px; /* مسافة بين العناصر */
        max-width: 420px; /* تحديد عرض النموذج */
        margin: 0 auto; /* توسيط النموذج */
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* إضافة ظل */
        margin-bottom: 10px;
    }
  /* استجابة الشاشات */
   /* استجابة الشاشات */
@media (max-width: 768px) {
    .form-container, .date-container, .actions-container {
        flex-direction: column;
        align-items: stretch;
    }

    .form-container select, .form-container input, .form-container button {
        max-width: 100%;
        font-size: 14px; /* تصغير حجم الخط */
        padding: 8px; /* تصغير الحشوة */
    }

    button {
        font-size: 14px; /* تصغير حجم الخط للأزرار */
        padding: 8px; /* تصغير الحشوة للأزرار */
    }

    table {
        font-size: 12px; /* تصغير حجم الخط للجدول */
    }

    h2 {
        font-size: 20px; /* تصغير حجم العنوان الرئيسي */
    }

    th, td {
        padding: 8px; /* تصغير الحشوة للخلايا */
    }
       .dataTables_wrapper {
        overflow-x: auto; /* تفعيل شريط التمرير الأفقي إذا لزم الأمر */
    }
}

@media (max-width: 480px) {
    .form-container select, .form-container input, .form-container button {
        font-size: 12px; /* تصغير حجم الخط أكثر للشاشات الصغيرة */
        padding: 6px; /* تصغير الحشوة أكثر */
    }

    button {
        font-size: 12px; /* تصغير حجم الخط للأزرار أكثر */
        padding: 6px; /* تصغير الحشوة للأزرار أكثر */
    }

    table {
        font-size: 9px; /* تصغير حجم الخط للجدول أكثر */
    }

    h2 {
        font-size: 18px; /* تصغير حجم العنوان الرئيسي أكثر */
    }

    th, td {
        padding: 2px; /* تصغير الحشوة للخلايا أكثر */
    }

    .actions-container button {
        font-size: 12px; /* تصغير حجم الخط لأزرار الإجراءات */
        padding: 6px; /* تصغير الحشوة لأزرار الإجراءات */
    }
       .dataTables_wrapper {
        overflow-x: auto; /* تفعيل شريط التمرير الأفقي إذا لزم الأمر */
    }
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<style>
    /* تطبيق التنسيق على الترويسة */
    #data-table th {
        white-space: nowrap; /* منع النص من الانكسار */
        text-align: center;  /* توسيط النص */
        vertical-align: middle; /* توسيط النص عموديًا */
    }
      /* حاوية الجدول لجعلها قابلة للتمرير */
 

</style>

    <!-- </style> -->
</head>
<body>
    <div class="container">
        <br>
        <h2 style="text-align: center;">إدخال بيانات جديدة</h2>

        <!-- اختيار التاريخ مرة واحدة -->
        <div class="date-container">
            <label for="date">التاريخ:</label>
            <input type="date" id="date">
            <button onclick="setDate()">تأكيد التاريخ</button>
            
            <!-- إضافة مسافة هنا -->
            <div style="margin: 20px ;"></div>
            
            <button class="delete-all" onclick="deleteAllRows()">حذف جميع البيانات</button>
            <button class="toggle-visibility" onclick="toggleTableVisibility()">إظهار/إخفاء الصفوف</button>
            <button class="copy-totals" onclick="copyTotals()">نسخ قيم الإجمالي</button>
            <button class="export-excel" onclick="exportToExcel()">تصدير إلى Excel</button>

        </div>

        <!-- نموذج الإدخال -->
        <div class="form-container">
            <select id="category">
                <option value="مبيعات نقدية">مبيعات نقدية</option>
                <option value="اسناد قبض">اسناد قبض</option>
                <option value="مشتريات نقدية">مشتريات نقدية</option>
                <option value="مسحوبات">مسحوبات</option>
                <option value="اسناد صرف">اسناد صرف</option>
                <option value="حوالات صادرة">حوالات صادرة</option>
                <option value="حوالات وارده">حوالات وارده</option>
            </select>
            <input type="number" id="amount" placeholder="أدخل المبلغ">
            <button onclick="addRow()">إدخال</button>
        </div>

        <!-- أزرار إضافية -->
        <div class="table-responsive">
        <!-- الجدول لعرض البيانات -->
        <table id="data-table">
            <thead>
                <tr>
                    <th>التاريخ</th>
                    <th>اليوم</th>
                    <th>مبيعات نقدية</th>
                    <th>اسناد قبض</th>
                    <th>مشتريات نقدية</th>
                    <th>مسحوبات</th>
                    <th>اسناد صرف</th>
                    <th>حوالات صادرة</th>
                    <th>حوالات وارده</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
            <tbody style="display: none;">
                <!-- البيانات المدخلة ستظهر هنا -->
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <td colspan="2">الإجمالي</td>
                    <td id="total-sales">0</td>
                    <td id="total-receipts">0</td>
                    <td id="total-purchases">0</td>
                    <td id="total-withdrawals">0</td>
                    <td id="total-disbursements">0</td>
                    <td id="total-transfers">0</td>
                    <td id="total-pay">0</td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>  </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
//         function exportToExcel() {
//     // الحصول على الجدول
//     const table = document.getElementById('data-table');
//     const rows = Array.from(table.rows);
//     const data = [];

//     // تحويل الصفوف إلى مصفوفات
//     rows.forEach((row) => {
//         const rowData = Array.from(row.cells).map(cell => cell.textContent);
//         data.push(rowData);
//     });

//     // إنشاء ورقة عمل من البيانات
//     const worksheet = XLSX.utils.aoa_to_sheet(data);

//     // إنشاء مصنف (Workbook)
//     const workbook = XLSX.utils.book_new();
//     XLSX.utils.book_append_sheet(workbook, worksheet, "البيانات");

//     // كتابة الملف بصيغة XLSX
//     XLSX.writeFile(workbook, "data.xlsx");
// }


// function exportToExcel() {
//     // التحقق من التاريخ المحدد
//     const dateInput = document.getElementById('date').value;
//     if (!dateInput) {
//         alert('يرجى اختيار التاريخ أولاً!');
//         return;
//     }

//     // الحصول على الجدول
//     const table = document.getElementById('data-table');
//     const rows = Array.from(table.rows);
//     const data = [];

//     // تحويل الصفوف إلى مصفوفات مع استثناء عمود "الإجراءات"
//     rows.forEach((row, rowIndex) => {
//         const rowData = Array.from(row.cells)
//             .slice(0, -1) // استثناء آخر عمود (الإجراءات)
//             .map(cell => cell.textContent);

//         // تعديل صف الإجمالي لإضافة خليتين بجانب "الإجمالي"
//         if (rowIndex === rows.length - 1) {
//             rowData.splice(1, 0, ""); // إضافة خلية فارغة بجانب "الإجمالي"
//         }

//         data.push(rowData);
//     });

//     // إنشاء ورقة عمل من البيانات
//     const worksheet = XLSX.utils.aoa_to_sheet(data);

//     // إنشاء مصنف (Workbook)
//     const workbook = XLSX.utils.book_new();
//     XLSX.utils.book_append_sheet(workbook, worksheet, "البيانات");

//     // كتابة الملف بصيغة XLSX مع استخدام التاريخ كاسم للملف
//     const fileName = `data_${dateInput}.xlsx`;
//     XLSX.writeFile(workbook, fileName);
// }
// مع استبدال جميع القيم الفارغة بصفر
function exportToExcel() {
    // التحقق من التاريخ المحدد
    const dateInput = document.getElementById('date').value;
    if (!dateInput) {
        // عرض رسالة باستخدام SweetAlert
        Swal.fire({
            icon: 'warning',
            title: 'تنبيه',
            text: 'يرجى اختيار التاريخ أولاً!',
            confirmButtonText: 'حسنًا'
        });
        return;
    }

    // الحصول على الجدول
    const table = document.getElementById('data-table');
    const rows = Array.from(table.rows);
    const data = [];

    // تحويل الصفوف إلى مصفوفات مع استثناء عمود "الإجراءات"
    rows.forEach((row, rowIndex) => {
        const rowData = Array.from(row.cells)
            .slice(0, -1) // استثناء آخر عمود (الإجراءات)
            .map((cell, cellIndex) => {
                // استبدال القيم الفارغة بـ 0 وتحديد القيم الرقمية
                if (cell.textContent.trim() === "") {
                    return 0; // القيمة الفارغة تصبح 0
                }
                const value = cell.textContent.trim();
                return isNaN(value) ? value : Number(value); // تحويل النصوص الرقمية إلى أرقام
            });

        // تعديل صف الإجمالي لإضافة خلية فارغة بجانب "الإجمالي"
        if (rowIndex === rows.length - 1) {
            rowData.splice(1, 0, ""); // إضافة خلية فارغة بجانب "الإجمالي"
        }

        data.push(rowData);
    });

    // إنشاء ورقة عمل من البيانات
    const worksheet = XLSX.utils.aoa_to_sheet(data);

    // ضبط تنسيق الأعمدة لتكون أرقامًا
    Object.keys(worksheet).forEach(cellAddress => {
        if (worksheet[cellAddress].v && !isNaN(worksheet[cellAddress].v)) {
            worksheet[cellAddress].t = 'n'; // تعيين النوع كرقم
        }
    });

    // إنشاء مصنف (Workbook)
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "البيانات");

    // كتابة الملف بصيغة XLSX مع استخدام التاريخ كاسم للملف
    const fileName = `data_${dateInput}.xlsx`;
    XLSX.writeFile(workbook, fileName);
}

        // التعامل مع الأسهم للتبديل في القائمة المنسدلة
        document.querySelector('.form-container').addEventListener('keydown', function (e) {
            const select = document.getElementById('category');
    
            // إذا تم الضغط على السهم للأسفل
            if (e.key === 'ArrowDown') {
                e.preventDefault(); // منع التمرير الافتراضي للصفحة
                if (select.selectedIndex < select.options.length - 1) {
                    select.selectedIndex++; // الانتقال إلى الخيار التالي
                }
            }
    
            // إذا تم الضغط على السهم للأعلى
            if (e.key === 'ArrowUp') {
                e.preventDefault(); // منع التمرير الافتراضي للصفحة
                if (select.selectedIndex > 0) {
                    select.selectedIndex--; // الانتقال إلى الخيار السابق
                }
            }
        });
    </script>
    
    <script>
        let selectedDate = '';

        // استعادة البيانات عند تحميل الصفحة
        window.onload = function () {
            loadTableFromStorage();
        };

        // تحديد التاريخ لمرة واحدة
        // function setDate() {
        //     const dateInput = document.getElementById('date').value;
        //     if (!dateInput) {
        //         alert('يرجى اختيار التاريخ');
        //         return;
        //     }
        //     selectedDate = dateInput;

        //     // الحصول على اليوم من التاريخ
        //     const dateObj = new Date(dateInput);
        //     const days = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
        //     const day = days[dateObj.getDay()];

        //     document.getElementById('date').dataset.day = day;
        //     alert('تم تحديد التاريخ: ' + selectedDate + ' (' + day + ')');
        // }
        function setDate() {
    const dateInput = document.getElementById('date').value;
    if (!dateInput) {
        // عرض رسالة تنبيه باستخدام SweetAlert
        Swal.fire({
            icon: 'warning',
            title: 'تنبيه',
            text: 'يرجى اختيار التاريخ أولاً!',
            confirmButtonText: 'حسنًا'
        });
        return;
    }
    selectedDate = dateInput;

    // الحصول على اليوم من التاريخ
    const dateObj = new Date(dateInput);
    const days = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
    const day = days[dateObj.getDay()];

    document.getElementById('date').dataset.day = day;

    // عرض رسالة تأكيد باستخدام SweetAlert
    Swal.fire({
        icon: 'success',
        title: 'تم تحديد التاريخ',
        text: `التاريخ المحدد: ${selectedDate} (${day})`,
        confirmButtonText: 'رائع'
    });
}

        // إضافة صف جديد إلى الجدول
       // إضافة صف جديد إلى الجدول
function addRow() {
    if (!selectedDate) {
        // عرض رسالة باستخدام SweetAlert
        Swal.fire({
            icon: 'warning',
            title: 'تنبيه',
            text: 'يرجى اختيار التاريخ أولاً!',
            confirmButtonText: 'حسنًا'
        });
        return;
    }

    const category = document.getElementById('category').value;
    const amount = parseFloat(document.getElementById('amount').value);

    if (!amount || amount <= 0) {
        alert('يرجى إدخال مبلغ صحيح');
        return;
    }

    const day = document.getElementById('date').dataset.day;
    const table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
    const newRow = table.insertRow(0); // إدخال الصف في الأعلى

    const dateCell = newRow.insertCell(0);
    const dayCell = newRow.insertCell(1);
    const salesCell = newRow.insertCell(2);
    const receiptCell = newRow.insertCell(3);
    const purchaseCell = newRow.insertCell(4);
    const withdrawalCell = newRow.insertCell(5);
    const disbursementCell = newRow.insertCell(6);
    const transferCell = newRow.insertCell(7);
    const payCell = newRow.insertCell(8);
    const actionsCell = newRow.insertCell(9);

    dateCell.textContent = selectedDate;
    dayCell.textContent = day;

    // تهيئة باقي الخلايا بالقيم الفارغة
    salesCell.textContent = category === 'مبيعات نقدية' ? amount : '';
    receiptCell.textContent = category === 'اسناد قبض' ? amount : '';
    purchaseCell.textContent = category === 'مشتريات نقدية' ? amount : '';
    withdrawalCell.textContent = category === 'مسحوبات' ? amount : '';
    disbursementCell.textContent = category === 'اسناد صرف' ? amount : '';
    transferCell.textContent = category === 'حوالات صادرة' ? amount : '';
    payCell.textContent = category === 'حوالات وارده' ? amount : '';

    // إنشاء زر الحذف
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'حذف';
    deleteButton.style.backgroundColor = '#f44336';
    deleteButton.style.color = 'white';
    deleteButton.style.border = 'none';
    deleteButton.style.padding = '5px 10px';
    deleteButton.style.cursor = 'pointer';

    // إضافة وظيفة الحذف
    deleteButton.onclick = function () {
        const row = this.parentNode.parentNode; // الحصول على الصف الأب للزر
        row.remove(); // حذف الصف مباشرة
        updateTotals();
        saveTableToStorage();
    };

    actionsCell.appendChild(deleteButton);

    // تحديث الإجماليات
    updateTotals();

    // حفظ البيانات
    saveTableToStorage();

    // إعادة التركيز على حقل إدخال المبلغ
    document.getElementById('amount').value = '';
    document.getElementById('amount').focus();
}

        // تحديث الإجماليات
        function updateTotals() {
            let totalSales = 0;
            let totalReceipts = 0;
            let totalPurchases = 0;
            let totalWithdrawals = 0;
            let totalDisbursements = 0;
            let totalTransfers = 0;
            let totalpay  = 0;

            const rows = document.getElementById('data-table').getElementsByTagName('tbody')[0].rows;

            for (let row of rows) {
                totalSales += parseFloat(row.cells[2].textContent) || 0;
                totalReceipts += parseFloat(row.cells[3].textContent) || 0;
                totalPurchases += parseFloat(row.cells[4].textContent) || 0;
                totalWithdrawals += parseFloat(row.cells[5].textContent) || 0;
                totalDisbursements += parseFloat(row.cells[6].textContent) || 0;
                totalTransfers += parseFloat(row.cells[7].textContent) || 0;
                totalpay += parseFloat(row.cells[8].textContent) || 0;
            }

            document.getElementById('total-sales').textContent = totalSales;
            document.getElementById('total-receipts').textContent = totalReceipts;
            document.getElementById('total-purchases').textContent = totalPurchases;
            document.getElementById('total-withdrawals').textContent = totalWithdrawals;
            document.getElementById('total-disbursements').textContent = totalDisbursements;
            document.getElementById('total-transfers').textContent = totalTransfers;
            document.getElementById('total-pay').textContent = totalpay;
        }

        // حفظ الجدول إلى Local Storage
        function saveTableToStorage() {
            const rows = Array.from(document.getElementById('data-table').getElementsByTagName('tbody')[0].rows);
            const data = rows.map(row => {
                return Array.from(row.cells).slice(0, 9).map(cell => cell.textContent);
            });
            localStorage.setItem('tableData', JSON.stringify(data));
        }

        // تحميل الجدول من Local Storage
        function loadTableFromStorage() {
            const data = JSON.parse(localStorage.getItem('tableData')) || [];
            const table = document.getElementById('data-table').getElementsByTagName('tbody')[0];

            data.forEach(rowData => {
                const newRow = table.insertRow();
                rowData.forEach((cellData, index) => {
                    const cell = newRow.insertCell(index);
                    cell.textContent = cellData;
                });

                const actionsCell = newRow.insertCell(9);
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'حذف';
                deleteButton.style.backgroundColor = '#f44336';
                deleteButton.style.color = 'white';
                deleteButton.style.border = 'none';
                deleteButton.style.padding = '5px 10px';
                deleteButton.style.cursor = 'pointer';
                deleteButton.onclick = function () {
                    table.deleteRow(newRow.rowIndex);
                    updateTotals();
                    saveTableToStorage();
                };
                actionsCell.appendChild(deleteButton);
            });

            updateTotals();
        }

        // حذف جميع البيانات
        // function deleteAllRows() {
        //     const table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
        //     table.innerHTML = '';
        //     updateTotals();
        //     localStorage.removeItem('tableData');
        // }
        function deleteAllRows() {
    // عرض نافذة تأكيد باستخدام SweetAlert
    Swal.fire({
        title: 'هل أنت متأكد؟',
        text: 'سيتم حذف جميع البيانات ولن تتمكن من استعادتها!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'نعم، احذفها!',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.isConfirmed) {
            // إذا تم التأكيد، حذف جميع البيانات
            const table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            updateTotals();
            localStorage.removeItem('tableData');

            // رسالة نجاح بعد الحذف
            Swal.fire(
                'تم الحذف!',
                'تم حذف جميع البيانات بنجاح.',
                'success'
            );
        }
    });
}

        // تشغيل الإدخال بزر Enter
        document.getElementById('amount').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                addRow();
            }
        });

         // إظهار أو إخفاء الصفوف
        function toggleTableVisibility() {
            const tbody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
            tbody.style.display = tbody.style.display === 'none' ? '' : 'none';
        }

// نسخ قيم صف الإجمالي
function copyTotals() {
    // جمع القيم من صف الإجمالي
    const totalSales = document.getElementById('total-sales').textContent;
    const totalReceipts = document.getElementById('total-receipts').textContent;
    const totalPurchases = document.getElementById('total-purchases').textContent;
    const totalWithdrawals = document.getElementById('total-withdrawals').textContent;
    const totalDisbursements = document.getElementById('total-disbursements').textContent;
    const totalTransfers = document.getElementById('total-transfers').textContent;
    const totalPay = document.getElementById('total-pay').textContent;

    // إنشاء نص منسق باستخدام علامات الجدولة
    const totalsText = `${totalSales}\t${totalReceipts}\t${totalPurchases}\t${totalWithdrawals}\t${totalDisbursements}\t${totalTransfers}\t${totalPay}`;

    // نسخ النص إلى الحافظة
    // navigator.clipboard.writeText(totalsText)
    //     .then(() => {
    //         alert('تم نسخ قيم الإجمالي إلى الحافظة!');
    //     })
    //     .catch(err => {
    //         alert('حدث خطأ أثناء النسخ: ' + err);
    //     });
    navigator.clipboard.writeText(totalsText)
    .then(() => {
        // رسالة نجاح باستخدام SweetAlert
        Swal.fire({
            icon: 'success',
            title: 'تم النسخ',
            text: 'تم نسخ قيم الإجمالي إلى الحافظة!',
            confirmButtonText: 'حسنًا'
        });
    })
    .catch(err => {
        // رسالة خطأ باستخدام SweetAlert
        Swal.fire({
            icon: 'error',
            title: 'خطأ',
            text: 'حدث خطأ أثناء النسخ: ' + err,
            confirmButtonText: 'حسنًا'
        });
    });

}


    </script>
    <script>
    // $(document).ready(function () {
    //     $('#data-table').DataTable({
    //         paging: true,         // تمكين الترقيم
    //         searching: true,      // تمكين البحث
            
    //         ordering: true,       // تمكين الترتيب
    //         responsive: true,     // تمكين الاستجابة
    //         language: {
    //             url: "//cdn.datatables.net/plug-ins/1.13.5/i18n/ar.json" // ترجمة إلى العربية
    //         }
    //     });
    // });
</script>
<style>
    /* تصميم الحاوية لجعل الجدول قابل للتمرير */
    .table-responsive {
        width: 100%;
        overflow-x: auto; /* إضافة شريط تمرير أفقي */
        -webkit-overflow-scrolling: touch; /* تحسين التمرير على الأجهزة التي تعمل باللمس */
    }

    /* تحسين تصميم الجدول */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        text-align: center;
        padding: 10px;
        border: 1px solid #ccc;
        white-space: nowrap; /* منع النصوص من الانكسار */
    }

    th {
        background-color: #4CAF50;
        color: white;
    }

    .total-row {
        background-color: #f5e8e8;
        font-weight: bold;
    }

    /* تحسين التوافق مع الشاشات الصغيرة */
    @media (max-width: 768px) {
        th, td {
            font-size: 12px; /* تصغير حجم النصوص */
            padding: 5px; /* تقليل الحشو */
        }
    }

    @media (max-width: 480px) {
        th, td {
            font-size: 10px; /* حجم أصغر للنصوص */
            padding: 3px; /* تصغير الحشو أكثر */
        }
    }
</style>

</body>
</html>
