<?php
ob_start();
// ini_set('display_errors', 1);

// ini_set('display_startup_errors', 1);

// error_reporting(E_ALL);
//  include '../auth/guard.php'; 
include __DIR__ . '/../auth/guard.php';

// تضمين الكلاس وملف إعدادات الاتصال
include '../inc/SecureIdHandler.php';
include 'db.php';





// -----------------------------------------------------------------
// 1. معلمات البحث والترقيم
// -----------------------------------------------------------------
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
if ($page < 1) $page = 1;
$perPage = 5; // عدد العقود في كل صفحة
$offset = ($page - 1) * $perPage;

// -----------------------------------------------------------------
// 2. بناء استعلام البحث
// -----------------------------------------------------------------
$whereConditions = [];
$params = [];

if (!empty($search)) {
    $searchTerm = "%$search%";
    // البحث في جميع الحقول المهمة
    $whereConditions[] = "(worker_name LIKE ? OR 
                          worker_job LIKE ? OR 
                          worker_id LIKE ? OR 
                          worker_nationality LIKE ? OR
                          provider_name LIKE ? OR
                          receiver_name LIKE ?)";
    $params = [$searchTerm, $searchTerm, $searchTerm, $searchTerm, $searchTerm, $searchTerm];
}

$whereSQL = !empty($whereConditions) ? 'WHERE ' . implode(' AND ', $whereConditions) : '';

// -----------------------------------------------------------------
// 3. الاتصال بقاعدة البيانات وجلب البيانات
// -----------------------------------------------------------------
try {
    // إنشاء اتصال PDO
    $pdo = new PDO($dsn, $user, $pass, $options);
    
    // جلب إجمالي عدد السجلات
    $countSql = "SELECT COUNT(*) as total FROM contracts $whereSQL";
    $countStmt = $pdo->prepare($countSql);
    $countStmt->execute($params);
    $totalRecords = $countStmt->fetch(PDO::FETCH_ASSOC)['total'];
    $totalPages = ceil($totalRecords / $perPage);
    
    if ($page > $totalPages && $totalPages > 0) {
        $page = $totalPages;
        $offset = ($page - 1) * $perPage;
    }
    
    // استعلام لجلب البيانات مع الترقيم
    $sql = "SELECT 
                worker_name, worker_job, worker_id, worker_nationality, 
                provider_name, receiver_name, contract_summary, 
                permit_start, permit_end, work_location, 
                qr_code_path, barcode_path, id
            FROM contracts 
            $whereSQL
            ORDER BY created_at DESC
            LIMIT $perPage OFFSET $offset";
            
    $stmt = $pdo->prepare($sql);
    $stmt->execute($params);
    $contracts = $stmt->fetchAll();

} catch (\PDOException $e) {
    $error_message = 'خطأ في جلب البيانات: ' . $e->getMessage();
    $contracts = [];
    $totalRecords = 0;
    $totalPages = 0;
}
ob_end_flush();
?>
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة العقود المسجلة</title>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
   <link rel="stylesheet" href="list.css">
</head>
<body>

    <div class="container">
        <!-- شريط التنقل العلوي -->
        <div class="navbar">
            <h1 class="page-title">📋 نظام إدارة العقود</h1>
            <div class="user-actions">
                <a href="admin_report.php" class="btn_all">
    جميع العقود
</a>
                <a href="form.php" class="btn-add">
                    <i class="fas fa-plus-circle"></i> إضافة عقد جديد
                </a>
                <a href="../auth/logout.php" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> تسجيل الخروج
                </a>

                
            </div>
        </div>

        <!-- رسائل التنبيه -->
        <div id="alert-container">
            <?php if (isset($_GET['status']) && $_GET['status'] == 'success'): ?>
                <div class="alert alert-success">
                    <i class="fas fa-check-circle"></i> تم تنفيذ العملية بنجاح!
                </div>
            <?php elseif (isset($error_message)): ?>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> <?php echo $error_message; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- قسم البحث -->
        <div class="search-section">
            <form id="searchForm" method="GET" action="">
                <div class="search-container">
                    <input 
                        type="text" 
                        name="search" 
                        class="search-input" 
                        placeholder="ابحث باسم العامل أو المهنة أو رقم الهوية أو الجنسية..." 
                        value="<?php echo htmlspecialchars($search); ?>"
                        autocomplete="off"
                    >
                    <i class="fas fa-search search-icon"></i>
                </div>
                <div class="search-info">
                    ابحث بأي حرف أو كلمة في: اسم العامل، المهنة، رقم الهوية، الجنسية، المنشأة
                </div>
            </form>
        </div>

        <!-- عرض العقود -->
        <div id="contracts-container">
            <?php if (empty($contracts)): ?>
                <div class="no-contracts">
                    <i class="fas fa-file-contract"></i>
                    <h3>لا توجد عقود مسجلة</h3>
                    <p><?php echo !empty($search) ? 'لم يتم العثور على نتائج للبحث "' . htmlspecialchars($search) . '"' : 'ابدأ بإضافة عقد جديد.'; ?></p>
                    <?php if (!empty($search)): ?>
                        <a href="list.php" class="btn btn-primary" style="margin-top: 15px;">
                            <i class="fas fa-times"></i> مسح البحث وعرض الكل
                        </a>
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <div class="contracts-list">
                    <?php foreach ($contracts as $index => $contract): ?>
                        <?php 
                            $encrypted_id = SecureIdHandler::encryptId($contract['id']);
                            
                            // تحديد حالة العقد
                            $status_class = '';
                            $status_text = 'غير محددة';
                            $current_date = date('Y-m-d');
                            $permit_end = $contract['permit_end'];
                            
                            if (!empty($permit_end)) {
                                if ($permit_end >= $current_date) {
                                    $status_class = 'active';
                                    $status_text = 'ساري';
                                } else {
                                    $status_class = 'expired';
                                    $status_text = 'منتهي';
                                }
                            }
                        ?>
                        
                        <div class="contract-card" id="contract-item-<?php echo $contract['id']; ?>">
                            <div class="contract-header">
                                <div class="contract-id">
                                    <i class="fas fa-file-contract"></i> عقد #<?php echo $contract['id']; ?>
                                </div>
                                <div class="contract-status <?php echo $status_class; ?>">
                                    <?php echo $status_text; ?>
                                </div>
                            </div>
                            
                            <div class="contract-content">
                                <div class="contract-row">
                                    <span class="row-label">اسم العامل:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['worker_name']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">المهنة:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['worker_job']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">رقم الهوية:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['worker_id']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">الجنسية:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['worker_nationality']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">المنشأة المقدمة:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['provider_name']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">بداية التصريح:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['permit_start']); ?></span>
                                </div>
                                <div class="contract-row">
                                    <span class="row-label">نهاية التصريح:</span>
                                    <span class="row-value"><?php echo htmlspecialchars($contract['permit_end']); ?></span>
                                </div>
                            </div>
                            
                            <div class="contract-actions">
                                <a href="index.php?id=<?php echo urlencode($encrypted_id); ?>" class="btn btn-info" target="_blank">
                                    <i class="fas fa-eye"></i> تفاصيل
                                </a>
                              <a href="../agiar/index.php?id=<?php echo urlencode($encrypted_id); ?>" class="action-button">عرض web</a>
                                <a href="index_tow.php?id=<?php echo urlencode($encrypted_id); ?>" class="btn btn-info" target="_blank">
                                    <i class="fas fa-file-alt"></i> تفاصيل 2
                                </a>
                                <a href="forsentinternit.php?id=<?php echo urlencode($encrypted_id); ?>" class="btn btn-success" target="_blank">
                                    <i class="fas fa-globe"></i> عرض الموقع
                                </a>
                                 <a href="forinternet_color.php?id=<?php echo urlencode($encrypted_id); ?>" class="btn btn-success" target="_blank">
                                    <i class="fas fa-globe"></i>  forinternet_color الموقع
                                </a>
                                <a href="edit.php?id=<?php echo urlencode($encrypted_id); ?>" class="btn btn-warning">
                                    <i class="fas fa-edit"></i> تعديل
                                </a>
                                <button class="btn btn-danger" onclick="confirmDelete('<?php echo urlencode($encrypted_id); ?>', <?php echo $contract['id']; ?>)">
                                    <i class="fas fa-trash"></i> حذف
                                </button>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                
                <!-- الترقيم (Pagination) -->
                <?php if ($totalPages > 1): ?>
                    <div class="pagination-container">
                        <nav>
                            <ul class="pagination">
                                <!-- زر الصفحة السابقة -->
                                <li class="page-item <?php echo $page <= 1 ? 'disabled' : ''; ?>">
                                    <a class="page-link" href="?page=<?php echo $page - 1; ?>&search=<?php echo urlencode($search); ?>">
                                        <i class="fas fa-chevron-left"></i> السابق
                                    </a>
                                </li>
                                
                                <!-- أرقام الصفحات -->
                                <?php
                                $startPage = max(1, $page - 2);
                                $endPage = min($totalPages, $page + 2);
                                
                                if ($startPage > 1) {
                                    echo '<li class="page-item"><a class="page-link" href="?page=1&search=' . urlencode($search) . '">1</a></li>';
                                    if ($startPage > 2) {
                                        echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                    }
                                }
                                
                                for ($i = $startPage; $i <= $endPage; $i++) {
                                    $active = $i == $page ? 'active' : '';
                                    echo '<li class="page-item ' . $active . '">';
                                    echo '<a class="page-link" href="?page=' . $i . '&search=' . urlencode($search) . '">' . $i . '</a>';
                                    echo '</li>';
                                }
                                
                                if ($endPage < $totalPages) {
                                    if ($endPage < $totalPages - 1) {
                                        echo '<li class="page-item disabled"><span class="page-link">...</span></li>';
                                    }
                                    echo '<li class="page-item"><a class="page-link" href="?page=' . $totalPages . '&search=' . urlencode($search) . '">' . $totalPages . '</a></li>';
                                }
                                ?>
                                
                                <!-- زر الصفحة التالية -->
                                <li class="page-item <?php echo $page >= $totalPages ? 'disabled' : ''; ?>">
                                    <a class="page-link" href="?page=<?php echo $page + 1; ?>&search=<?php echo urlencode($search); ?>">
                                        التالي <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        
                        <!-- معلومات الترقيم -->
                        <div class="pagination-info">
                            عرض <?php echo count($contracts); ?> من <?php echo $totalRecords; ?> عقد | الصفحة <?php echo $page; ?> من <?php echo $totalPages; ?>
                            <?php if (!empty($search)): ?>
                                | نتائج البحث: "<?php echo htmlspecialchars($search); ?>"
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- مودال تأكيد الحذف -->
    <div id="deleteModal" class="modal">
        <div class="modal-content">
            <h3 class="modal-title"><i class="fas fa-exclamation-triangle"></i> تأكيد الحذف</h3>
            <p class="modal-text">هل أنت متأكد من حذف هذا العقد <strong>نهائياً</strong>؟<br>لا يمكن التراجع عن هذه العملية بعد تنفيذها.</p>
            <input type="hidden" id="encryptedDeleteId">
            <input type="hidden" id="numericDeleteId">
            <div class="modal-actions">
                <button id="confirmDeleteBtn" class="btn btn-danger">
                    <i class="fas fa-trash"></i> نعم، احذف العقد
                </button>
                <button id="cancelDeleteBtn" class="btn btn-primary">
                    <i class="fas fa-times"></i> إلغاء
                </button>
            </div>
        </div>
    </div>
















    <script>
        // البحث الفوري باستخدام AJAX
        let searchTimeout;
        let currentPage = 1;

        document.querySelector('.search-input').addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            const searchTerm = e.target.value.trim();

            // إضافة تأثير بسيط أثناء البحث
            const contractsContainer = document.getElementById('contracts-container');
            contractsContainer.style.opacity = '0.7';

            searchTimeout = setTimeout(() => {
                currentPage = 1; // إعادة تعيين الصفحة الحالية عند البحث
                performSearch(searchTerm, currentPage);
            }, 300); // تقليل التأخير لاستجابة أسرع
        });

        // دالة تنفيذ البحث باستخدام AJAX
        function performSearch(searchTerm, page = 1) {
            const contractsContainer = document.getElementById('contracts-container');
            const alertContainer = document.getElementById('alert-container');

            // إرسال طلب AJAX
            fetch(`search_ajax.php?search=${encodeURIComponent(searchTerm)}&page=${page}`)
                .then(response => response.json())
                .then(data => {
                    contractsContainer.style.opacity = '1';
                    alertContainer.innerHTML = '';

                    if (data.success) {
                        if (data.contracts.length === 0) {
                            contractsContainer.innerHTML = `
                                <div class="no-contracts">
                                    <i class="fas fa-file-contract"></i>
                                    <h3>لا توجد عقود مسجلة</h3>
                                    <p>${searchTerm ? 'لم يتم العثور على نتائج للبحث "' + searchTerm + '"' : 'ابدأ بإضافة عقد جديد.'}</p>
                                    ${searchTerm ? `
                                        <button class="btn btn-primary" style="margin-top: 15px;" onclick="clearSearch()">
                                            <i class="fas fa-times"></i> مسح البحث وعرض الكل
                                        </button>
                                    ` : ''}
                                </div>
                            `;
                        } else {
                            // عرض العقود
                            let contractsHTML = '<div class="contracts-list">';

                            data.contracts.forEach(contract => {
                                contractsHTML += `
                                    <div class="contract-card" id="contract-item-${contract.id}">
                                        <div class="contract-header">
                                            <div class="contract-id">
                                                <i class="fas fa-file-contract"></i> عقد #${contract.id}
                                            </div>
                                            <div class="contract-status ${contract.status_class}">
                                                ${contract.status_text}
                                            </div>
                                        </div>

                                        <div class="contract-content">
                                            <div class="contract-row">
                                                <span class="row-label">اسم العامل:</span>
                                                <span class="row-value">${contract.worker_name}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">المهنة:</span>
                                                <span class="row-value">${contract.worker_job}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">رقم الهوية:</span>
                                                <span class="row-value">${contract.worker_id}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">الجنسية:</span>
                                                <span class="row-value">${contract.worker_nationality}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">المنشأة المقدمة:</span>
                                                <span class="row-value">${contract.provider_name}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">بداية التصريح:</span>
                                                <span class="row-value">${contract.permit_start}</span>
                                            </div>
                                            <div class="contract-row">
                                                <span class="row-label">نهاية التصريح:</span>
                                                <span class="row-value">${contract.permit_end}</span>
                                            </div>
                                        </div>

                                        <div class="contract-actions">
                                            <a href="index.php?id=${encodeURIComponent(contract.encrypted_id)}" class="btn btn-info" target="_blank">
                                                <i class="fas fa-eye"></i> تفاصيل
                                            </a>
                                            <a href="index_tow.php?id=${encodeURIComponent(contract.encrypted_id)}" class="btn btn-info" target="_blank">
                                                <i class="fas fa-file-alt"></i> تفاصيل 2
                                            </a>
                                            <a href="forsentinternit.php?id=${encodeURIComponent(contract.encrypted_id)}" class="btn btn-success" target="_blank">
                                                <i class="fas fa-globe"></i> عرض الموقع
                                            </a>
                                             <a href="forinternet_color.php?id=${encodeURIComponent(contract.encrypted_id)}" class="btn btn-success" target="_blank">
                                                <i class="fas fa-globe"></i>  forinternet_color الموقع
                                            </a>
                                            <a href="edit.php?id=${encodeURIComponent(contract.encrypted_id)}" class="btn btn-warning">
                                                <i class="fas fa-edit"></i> تعديل
                                            </a>
                                            <button class="btn btn-danger" onclick="confirmDelete('${encodeURIComponent(contract.encrypted_id)}', ${contract.id})">
                                                <i class="fas fa-trash"></i> حذف
                                            </button>
                                        </div>
                                    </div>
                                `;
                            });

                            contractsHTML += '</div>';

                            // إضافة الترقيم إذا لزم الأمر
                            if (data.pagination.total_pages > 1) {
                                contractsHTML += generatePagination(data.pagination, searchTerm);
                            }

                            contractsContainer.innerHTML = contractsHTML;
                        }
                    } else {
                        alertContainer.innerHTML = `
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle"></i> ${data.message || 'حدث خطأ أثناء البحث.'}
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    contractsContainer.style.opacity = '1';
                    alertContainer.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> خطأ في الاتصال بالخادم. الرجاء المحاولة لاحقاً.
                        </div>
                    `;
                });
        }

        // دالة إنشاء أزرار الترقيم
        function generatePagination(pagination, searchTerm) {
            let html = `
                <div class="pagination-container">
                    <nav>
                        <ul class="pagination">
            `;

            // زر الصفحة السابقة
            html += `
                <li class="page-item ${pagination.current_page <= 1 ? 'disabled' : ''}">
                    <a class="page-link" onclick="changePage(${pagination.current_page - 1}, '${searchTerm}')">
                        <i class="fas fa-chevron-left"></i> السابق
                    </a>
                </li>
            `;

            // أرقام الصفحات
            const startPage = Math.max(1, pagination.current_page - 2);
            const endPage = Math.min(pagination.total_pages, pagination.current_page + 2);

            if (startPage > 1) {
                html += `<li class="page-item"><a class="page-link" onclick="changePage(1, '${searchTerm}')">1</a></li>`;
                if (startPage > 2) {
                    html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
            }

            for (let i = startPage; i <= endPage; i++) {
                const active = i === pagination.current_page ? 'active' : '';
                html += `
                    <li class="page-item ${active}">
                        <a class="page-link" onclick="changePage(${i}, '${searchTerm}')">${i}</a>
                    </li>
                `;
            }

            if (endPage < pagination.total_pages) {
                if (endPage < pagination.total_pages - 1) {
                    html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
                }
                html += `<li class="page-item"><a class="page-link" onclick="changePage(${pagination.total_pages}, '${searchTerm}')">${pagination.total_pages}</a></li>`;
            }

            // زر الصفحة التالية
            html += `
                <li class="page-item ${pagination.current_page >= pagination.total_pages ? 'disabled' : ''}">
                    <a class="page-link" onclick="changePage(${pagination.current_page + 1}, '${searchTerm}')">
                        التالي <i class="fas fa-chevron-right"></i>
                    </a>
                </li>
            `;

            html += `
                        </ul>
                    </nav>

                    <div class="pagination-info">
                        عرض ${Math.min(pagination.per_page, pagination.total_records - (pagination.current_page - 1) * pagination.per_page)} من ${pagination.total_records} عقد | الصفحة ${pagination.current_page} من ${pagination.total_pages}
                        ${searchTerm ? `| نتائج البحث: "${searchTerm}"` : ''}
                    </div>
                </div>
            `;

            return html;
        }

        // دالة تغيير الصفحة
        function changePage(page, searchTerm) {
            currentPage = page;
            const searchInput = document.querySelector('.search-input');
            searchInput.value = searchTerm;
            performSearch(searchTerm, page);

            // التمرير إلى أعلى الصفحة
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // دالة مسح البحث
        function clearSearch() {
            const searchInput = document.querySelector('.search-input');
            searchInput.value = '';
            currentPage = 1;
            performSearch('', 1);
        }

        // نافذة تأكيد الحذف
        function confirmDelete(encryptedId, numericId) {
            document.getElementById('encryptedDeleteId').value = encryptedId;
            document.getElementById('numericDeleteId').value = numericId;
            document.getElementById('deleteModal').style.display = 'block';
        }

        document.getElementById('cancelDeleteBtn').onclick = function() {
            document.getElementById('deleteModal').style.display = 'none';
        };

        document.getElementById('confirmDeleteBtn').onclick = function() {
            const encryptedId = document.getElementById('encryptedDeleteId').value;
            const numericId = document.getElementById('numericDeleteId').value;
            performDelete(encryptedId, numericId);
        };

        // إغلاق المودال عند الضغط خارج المحتوى
        window.onclick = function(event) {
            const modal = document.getElementById('deleteModal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        };

        /**
         * دالة تنفيذ الحذف باستخدام AJAX
         */
        function performDelete(encryptedId, numericId) {
            document.getElementById('deleteModal').style.display = 'none';
            const alertContainer = document.getElementById('alert-container');
            alertContainer.innerHTML = '';

            fetch('delete_contract.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'id=' + encodeURIComponent(encryptedId)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // عرض رسالة النجاح
                    alertContainer.innerHTML = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle"></i> تم حذف العقد رقم ${numericId} بنجاح!
                        </div>
                    `;

                    // إزالة العقد من العرض
                    const contractItem = document.getElementById('contract-item-' + numericId);
                    if (contractItem) {
                        contractItem.style.animation = 'slideIn 0.3s ease reverse';
                        setTimeout(() => {
                            contractItem.remove();
                        }, 300);
                    }

                    // التحقق مما إذا أصبحت القائمة فارغة
                    const contractsList = document.querySelector('.contracts-list');
                    if (!contractsList || contractsList.children.length === 0) {
                        const container = document.getElementById('contracts-container');
                        container.innerHTML = `
                            <div class="no-contracts">
                                <i class="fas fa-file-contract"></i>
                                <h3>لا توجد عقود مسجلة</h3>
                                <p>ابدأ بإضافة عقد جديد.</p>
                            </div>
                        `;
                    }

                    // إخفاء الرسالة بعد 3 ثوانٍ
                    setTimeout(() => {
                        if (alertContainer.firstChild) {
                            alertContainer.firstChild.style.opacity = '0';
                            alertContainer.firstChild.style.transition = 'opacity 0.5s ease';
                            setTimeout(() => {
                                alertContainer.innerHTML = '';
                            }, 500);
                        }
                    }, 3000);

                } else {
                    alertContainer.innerHTML = `
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle"></i> فشل الحذف: ${data.message || 'حدث خطأ غير معروف.'}
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertContainer.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle"></i> خطأ في الاتصال بالخادم. الرجاء المحاولة لاحقاً.
                    </div>
                `;
            });
        }

        // تحسين تجربة المستخدم على الجوال
        document.addEventListener('touchstart', function() {}, {passive: true});
    </script>
</body>
</html>