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

document.addEventListener('DOMContentLoaded', function() {
    // تفعيل البحث الفوري عند الكتابة
    const searchNameInput = document.getElementById('search-name');
    const searchIdInput = document.getElementById('search-id');

    if (searchNameInput) {
        searchNameInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);

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

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

    if (searchIdInput) {
        searchIdInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);

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

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

// دالة تنفيذ البحث المتقدم
function performAdvancedSearch(page = 1) {
    const searchName = document.getElementById('search-name') ? document.getElementById('search-name').value.trim() : '';
    const searchId = document.getElementById('search-id') ? document.getElementById('search-id').value.trim() : '';

    // دمج قيم البحث في نص بحث واحد
    let searchTerm = '';
    if (searchName && searchId) {
        searchTerm = searchName + ' ' + searchId;
    } else if (searchName) {
        searchTerm = searchName;
    } else if (searchId) {
        searchTerm = searchId;
    }

    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="clearAdvancedSearch()">
                                    <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;

    // تحديث حقول البحث
    if (document.getElementById('search-name')) {
        document.getElementById('search-name').value = searchTerm;
    }
    if (document.getElementById('search-id')) {
        document.getElementById('search-id').value = searchTerm;
    }

    performAdvancedSearch(page);

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

// دالة مسح البحث
function clearAdvancedSearch() {
    if (document.getElementById('search-name')) {
        document.getElementById('search-name').value = '';
    }
    if (document.getElementById('search-id')) {
        document.getElementById('search-id').value = '';
    }
    currentPage = 1;
    performAdvancedSearch(1);
}
