let currentPage = 'search';
let searchTimeout;
let currentVehicle = null; // متغير عام لتخزين بيانات المركبة الحالية

// المتغيرات العالمية
let currentOfficer = {
    name: 'غير معروف',
    badge: '0000'
};

// إضافة متغير عام لتخزين آخر عنصر إدخال نشط
let activeOfficerInput = null;

let currentTypeFilter = 'all';
let currentStatusFilter = 'all';
let allCases = []; // لتخزين جميع القضايا

// إضافة متغير عام لتخزين العساكر المحددين
let selectedOfficers = [];

window.addEventListener('message', function(event) {
    console.log('Received message:', event.data);
    
    if (event.data.type === "open") {
        document.body.style.display = 'block';
        showPage('search');
        if (event.data.officer) {
            currentOfficer = event.data.officer;
            document.getElementById('officer-name').textContent = currentOfficer.name;
            document.getElementById('officer-badge').textContent = `رقم الشارة: #${currentOfficer.badge}`;
        }
    } else if (event.data.type === "close") {
        document.body.style.display = 'none';
    } else if (event.data.type === "openVehicleActions" && currentVehicle) {
        openVehicleActionsModal(currentVehicle.plate, currentVehicle.owner);
    } else if (event.data.type === 'officersSearchResult' && activeOfficerInput) {
        console.log('Received officers data:', event.data);
        
        const suggestionsDiv = activeOfficerInput.parentElement.querySelector('.suggestions-list');
        
        if (event.data.success && event.data.officers && event.data.officers.length > 0) {
            console.log('Found officers:', event.data.officers);
            suggestionsDiv.innerHTML = event.data.officers.map(officer => `
                <div class="suggestion-item" onclick="selectOfficer('${officer.name} (${officer.citizenid})', this)">
                    <i class="fas fa-user-shield"></i>
                    <span class="officer-name">${officer.name} (${officer.citizenid})</span>
                    <span class="officer-rank">${officer.rank}</span>
                </div>
            `).join('');
        } else {
            console.log('No officers found');
            suggestionsDiv.innerHTML = '<div class="no-suggestions">لا توجد نتائج</div>';
        }
        suggestionsDiv.style.display = 'block';
        ensureSuggestionsVisible(suggestionsDiv);
    }
});

// تأكد من أن body مخفي عند بداية التشغيل
document.addEventListener('DOMContentLoaded', function() {
    document.body.style.display = 'none';
});

// Handle ESC key
document.addEventListener('keydown', function(event) {
    if (event.keyCode === 27) { // ESC
        fetch(`https://${GetParentResourceName()}/close`, {
            method: 'POST'
        });
    }
    if (event.key === 'Escape') {
        // إخفاء الـ MDT
        document.body.style.display = 'none';
        
        fetch(`https://${GetParentResourceName()}/closeMDT`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        });
    }
});

// تحديث دالة showPage
function showPage(pageName) {
    // إخفاء جميع الصفحات
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
    });
    
    // إظهار الصفحة المطلوبة
    document.getElementById(pageName + '-page').classList.add('active');
    
    // تحديث الزر النشط في القائمة
    document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active');
    });
    document.querySelector(`.menu-item[data-page="${pageName}"]`).classList.add('active');
    
    // إذا كانت صفح القضايا، قم بتحديث القائمة
    if (pageName === 'cases') {
        loadAllCases();
    }
}

// تحديث دالة loadAllCases لتظهر حالة التحميل
function loadAllCases() {
    const casesList = document.querySelector('.cases-list');
    // إظهار حالة التحميل
    casesList.innerHTML = `
        <div class="loading-cases">
            <i class="fas fa-spinner fa-spin"></i>
            جاري تحميل القضايا...
        </div>
    `;

    fetch(`https://${GetParentResourceName()}/getAllCases`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            allCases = data.cases.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            updateCasesDisplay();
        } else {
            casesList.innerHTML = `
                <div class="no-cases">
                    <i class="fas fa-exclamation-circle"></i>
                    حدث خطأ في تحميل القضايا
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error loading cases:', error);
        casesList.innerHTML = `
            <div class="no-cases">
                <i class="fas fa-exclamation-circle"></i>
                حدث خطأ في تحميل القضايا
            </div>
        `;
    });
}

document.querySelector('.search-box input').addEventListener('input', function(e) {
    clearTimeout(searchTimeout);
    const searchText = e.target.value;
    
    if (searchText.length >= 2) {
        document.getElementById('search-results').innerHTML = '<div class="loading">جاري البحث...</div>';
        
        searchTimeout = setTimeout(() => {
            console.log('Searching for:', searchText); // للتأكد من إرسال البحث
            
            fetch(`https://${GetParentResourceName()}/searchPerson`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ search: searchText })
            })
            .then(resp => resp.json())
            .then(data => {
                console.log('Search results:', data); // للتأكد من استلام النتائج
                updateSearchResults(data);
            })
            .catch(error => {
                console.error('Search error:', error);
                document.getElementById('search-results').innerHTML = '<div class="error">حدث ��طأ في البحث</div>';
            });
        }, 500);
    }
});

function updateSearchResults(results) {
    const container = document.getElementById('search-results');
    container.innerHTML = '';
    
    if (!results || results.length === 0) {
        container.innerHTML = '<div class="no-results">لم يتم العثور على نتائج</div>';
        return;
    }
    
    results.forEach(result => {
        const div = document.createElement('div');
        div.className = 'search-result';
        div.innerHTML = `
            <h3>
                ${result.name}
                ${result.is_wanted ? `
                    <span class="wanted-badge">
                        <i class="fas fa-exclamation-triangle"></i>
                        مطلوب
                    </span>
                ` : ''}
            </h3>
            <div class="result-details">
                <p><i class="fas fa-id-card"></i> الهوية: ${result.citizenid}</p>
                <p><i class="fas fa-phone"></i> الهاتف: ${result.phone}</p>
                <p><i class="fas fa-calendar"></i> تاريخ الميلاد: ${result.dob}</p>
                <p><i class="fas fa-venus-mars"></i> الجنس: ${result.gender}</p>
                <p><i class="fas fa-fingerprint"></i> البصمة: ${result.fingerprint || 'غير مسجل'}</p>
            </div>
            <button class="person-action-btn" onclick="handlePersonAction('${result.citizenid}', '${result.name}')">
                <i class="fas fa-cog"></i>
                إجراءات
            </button>
        `;
        container.appendChild(div);
    });
}

function viewDetails(citizenid) {
    fetch(`https://${GetParentResourceName()}/getCitizenDetails`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            citizenid: citizenid
        })
    })
    .then(resp => resp.json())
    .then(data => {
        // هنا يمكنك إضافة منطق لعرض التفاصيل الكاملة للمواطن
        showCitizenDetails(data);
    });
}

// تحديث الوقت
function updateTime() {
    const now = new Date();
    const time = now.toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' });
    document.getElementById('current-time').textContent = time;
}

// تحديث الوقت كل دقيقة
setInterval(updateTime, 60000);
updateTime();

// إدارة الصفحات
document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('click', function() {
        // إزالة الفئة النشطة من جميع الأزرار
        document.querySelectorAll('.menu-item').forEach(btn => btn.classList.remove('active'));
        // إضافة افئة النشطة للزر المضغوط
        this.classList.add('active');
        
        // إظهار ا��صفحة المناسبة
        const pageId = this.dataset.page;
        showPage(pageId);
    });
});

// عرض السجل الجنائي
function viewCriminalRecord(citizenid) {
    fetch(`https://${GetParentResourceName()}/getCriminalRecord`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ citizenid })
    })
    .then(resp => resp.json())
    .then(data => {
        showCriminalRecordModal(data);
    });
}

// عرض المركبات
function viewVehicles(citizenid) {
    fetch(`https://${GetParentResourceName()}/getVehicles`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ citizenid })
    })
    .then(resp => resp.json())
    .then(data => {
        showVehiclesModal(data);
    });
}

// إضافة للمطلوبين
function addToWanted(citizenid) {
    const reason = prompt('سبب الإضافة للمطلوبين:');
    if (reason) {
        fetch(`https://${GetParentResourceName()}/addToWanted`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                citizenid,
                reason
            })
        })
        .then(resp => resp.json())
        .then(data => {
            if (data.success) {
                showNotification('تمت الإضافة للمطلوبين بنجاح', 'success');
            } else {
                showNotification('حدث خطأ أثناء الإضافة', 'error');
            }
        });
    }
}

// إدارة الأدلة
function handleEvidence() {
    const evidenceGrid = document.querySelector('.evidence-grid');
    evidenceGrid.innerHTML = `
        <div class="evidence-upload">
            <input type="file" id="evidence-file" accept="image/*" hidden>
            <button onclick="document.getElementById('evidence-file').click()">
                <i class="fas fa-upload"></i>
                رفع دليل جديد
            </button>
        </div>
    `;
}

// إدارة التقارير
function handleReports() {
    const reportsList = document.querySelector('.reports-list');
    fetch(`https://${GetParentResourceName()}/getReports`)
    .then(resp => resp.json())
    .then(data => {
        updateReportsList(data);
    });
}

// إظهار الإشعارات
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        ${message}
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 3000);
}

// إضافة أنماط CSS ديناميكية للإشعارات
const style = document.createElement('style');
style.textContent = `
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 25px;
        background: var(--surface-color);
        border-radius: var(--border-radius);
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 10px;
        animation: slideIn 0.3s ease;
        z-index: 1000;
    }
    
    .notification.success {
        background: var(--success-color);
    }
    
    .notification.error {
        background: var(--danger-color);
    }
    
    @keyframes slideIn {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    
    .action-btn {
        padding: 8px 15px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        background: var(--primary-color);
        color: var(--text-color);
        cursor: pointer;
        transition: var(--transition);
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
    }
    
    .action-btn.warning {
        background: var(--warning-color);
        color: #000;
    }
    
    .actions {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .loading-cases {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary);
    }
    
    .loading-cases i {
        font-size: 24px;
        margin-bottom: 10px;
        color: var(--primary-color);
    }
    
    .no-cases {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary);
    }
    
    .no-cases i {
        font-size: 24px;
        margin-bottom: 10px;
        color: var(--danger-color);
    }
`;

document.head.appendChild(style);

// تحديث معلومات الضابط
function updateOfficerInfo(data) {
    document.querySelector('.officer-info h3').textContent = data.name;
    document.querySelector('.officer-info span').textContent = data.rank;
}

// استقبال بيانات الضابط من اللعبة
window.addEventListener('message', function(event) {
    const data = event.data;
    
    if (data.type === "open") {
        document.body.style.display = 'block';
        if (data.officer) {
            updateOfficerInfo({
                name: data.officer.name,
                rank: data.officer.rank
            });
        }
    }
    // ... باقي الكود
});

// البحث عن المركبات
document.querySelector('.vehicles-search input').addEventListener('input', function(e) {
    const plate = e.target.value.trim();
    
    if (plate.length >= 2) {
        document.querySelector('.vehicles-list').innerHTML = '<div class="loading"></div>';
        
        fetch(`https://${GetParentResourceName()}/searchVehicle`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ plate: plate })
        })
        .then(resp => resp.json())
        .then(data => {
            console.log('Vehicle search results:', data);
            updateVehicleResults(data);
        })
        .catch(error => {
            console.error('Error searching for vehicle:', error);
            document.querySelector('.vehicles-list').innerHTML = '<div class="error">حدث خطأ في البحث</div>';
        });
    }
});

// تحديث نتا��ج البحث عن المركبات
function updateVehicleResults(vehicles) {
    const container = document.querySelector('.vehicles-list');
    container.innerHTML = '';
    
    if (!vehicles || vehicles.length === 0) {
        container.innerHTML = '<div class="no-results">لم يتم العثور على المركبة</div>';
        return;
    }
    
    vehicles.forEach(vehicle => {
        const div = document.createElement('div');
        div.className = 'vehicle-card';
        div.innerHTML = `
            <div class="vehicle-header">
                <div class="plate-info">
                    <i class="fas fa-car"></i>
                    <span class="vehicle-plate">${vehicle.plate}</span>
                </div>
                <span class="vehicle-model">${vehicle.model}</span>
            </div>
            <div class="vehicle-details">
                <div class="owner-info">
                    <h3><i class="fas fa-user"></i> معلومات المالك</h3>
                    <p><strong>الاسم:</strong> ${vehicle.owner.name}</p>
                    <p><strong>رقم الهوية:</strong> ${vehicle.owner.citizenid}</p>
                </div>
            </div>
            <button class="vehicle-action-btn" onclick="handleVehicleActions('${vehicle.plate}', '${vehicle.owner.name}', '${vehicle.owner.citizenid}')">
                <i class="fas fa-cog"></i>
                إجراءات
            </button>
        `;
        container.appendChild(div);
    });
}

// حديث دالة معالجة إجراءات المر��بة
function handleVehicleActions(plate, owner, citizenid) {
    openVehicleActionsModal(plate, owner, citizenid);
}

// تحديث دالة فتح نافذة اجراءات
function openVehicleActionsModal(plate, owner, citizenid) {
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-car"></i> إجراءات المركبة</h2>
                <button class="modal-close" onclick="this.closest('.modal').remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="vehicle-info">
                <p><strong>رقم اللوحة:</strong> ${plate}</p>
                <p><strong>المالك:</strong> ${owner}</p>
            </div>
            <div class="actions-grid">
                <button onclick="showPersonDetails('${citizenid}')" class="action-btn secondary full-width">
                    <div class="btn-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="btn-content">
                        <span class="btn-title">معلومات المالك</span>
                        <span class="btn-subtitle">عرض تفاصيل المالك</span>
                    </div>
                </button>
            </div>
        </div>
    `;
    document.body.appendChild(modal);

    modal.addEventListener('click', function(e) {
        if (e.target === this) this.remove();
    });
}

// إضافة دالة لعرض تفاصيل المالك
function showPersonDetails(citizenid) {
    // إغلاق النافذة المنبثقة
    document.querySelector('.modal').remove();
    
    // تنفيذ البحث ن المواطن وعرض تفاصيله
    fetch(`https://${GetParentResourceName()}/getPersonDetails`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ citizenid: citizenid })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.error) {
            console.error('Error:', data.message);
            return;
        }
        showPersonDetailsPage(data);
    })
    .catch(error => {
        console.error('Error fetching person details:', error);
    });
}

// معالجة الإجراءات المحددة
function handleVehicleAction(plate, action) {
    switch(action) {
        case 'flag':
            fetch(`https://${GetParentResourceName()}/flagVehicle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ plate })
            })
            .then(resp => resp.json())
            .then(data => {
                if (data.success) {
                    showNotification('تم تعميم المركبة بنجاح', 'success');
                    document.querySelector('.modal').remove();
                } else {
                    showNotification('حدث خطأ أثناء تعميم المركبة', 'error');
                }
            });
            break;
            
        case 'impound':
            fetch(`https://${GetParentResourceName()}/impoundVehicle`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ plate })
            })
            .then(resp => resp.json())
            .then(data => {
                if (data.success) {
                    showNotification('تم حجز المركبة بنجاح', 'success');
                    document.querySelector('.modal').remove();
                } else {
                    showNotification('حدث خطأ أثناء حجز المركبة', 'error');
                }
            });
            break;
    }
}

// عرض تفاصيل المركبة
function showVehicleDetails(plate) {
    fetch(`https://${GetParentResourceName()}/getVehicleDetails`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ plate })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.vehicle) {
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.innerHTML = `
                <div class="modal-content vehicle-details-modal">
                    <h2><i class="fas fa-car"></i> فاصيل المركبة</h2>
                    <div class="vehicle-full-details">
                        <div class="detail-group">
                            <h3>معلومات أساسية</h3>
                            <p><strong>المديل:</strong> ${data.vehicle.model}</p>
                            <p><strong>اللوحة:</strong> ${data.vehicle.plate}</p>
                            <p><strong>اللك:</strong> ${data.vehicle.owner}</p>
                            <p><strong>اللون:</strong> ${data.vehicle.color}</p>
                        </div>
                        <div class="detail-group">
                            <h3>السجل</h3>
                            <div class="history-list">
                                ${data.vehicle.history ? data.vehicle.history.map(h => `
                                    <div class="history-item">
                                        <span class="date">${h.date}</span>
                                        <span class="event">${h.event}</span>
                                    </div>
                                `).join('') : '<p>لا يوجد سجل</p>'}
                            </div>
                        </div>
                    </div>
                    <div class="modal-actions">
                        <button onclick="this.closest('.modal').remove()">إغلاق</button>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
            
            // إغلاق النافذة عند النقر خارها
            modal.addEventListener('click', function(e) {
                if (e.target === this) this.remove();
            });
        }
    });
}

// تحديث دالة البحث عن القضايا
function searchCases(query) {
    if (!query || query.trim() === '') {
        // إذا كان حقل البحث فارغاً، قم بتحميل جميع القضايا
        loadAllCases();
        return;
    }

    fetch(`https://${GetParentResourceName()}/searchCases`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query: query })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            allCases = data.cases.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            updateCasesDisplay();
        }
    })
    .catch(error => {
        console.error('Error searching cases:', error);
        showNotification('حدث خطأ أثناء البحث عن القضايا', 'error');
    });
}

// دالة لتحميل جميع القضايا
function loadAllCases() {
    fetch(`https://${GetParentResourceName()}/getAllCases`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({}) // إرسال object فارغ
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            allCases = data.cases.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            updateCasesDisplay();
        } else {
            console.error('Failed to load cases:', data.error);
            showNotification(data.error || 'حدث خطأ أثناء تحميل القضايا', 'error');
        }
    })
    .catch(error => {
        console.error('Error loading cases:', error);
        showNotification('حدث خطأ أثناء تحميل القضايا', 'error');
    });
}

// تحميل القضايا عند فتح الصفحة
document.addEventListener('DOMContentLoaded', function() {
    loadAllCases();
});

// تحديث عرض القضايا مع الفلترة
function updateCasesDisplay() {
    const filteredCases = allCases.filter(caseItem => {
        const matchesType = currentTypeFilter === 'all' || caseItem.type === currentTypeFilter;
        const matchesStatus = currentStatusFilter === 'all' || 
            (currentStatusFilter === 'executed' && caseItem.is_executed) ||
            (currentStatusFilter === 'pending' && !caseItem.is_executed);
        return matchesType && matchesStatus;
    });

    const casesList = document.querySelector('.cases-list');
    if (!filteredCases || filteredCases.length === 0) {
        casesList.innerHTML = '<div class="no-results">لم يتم العثور على قضايا</div>';
        return;
    }

    casesList.innerHTML = filteredCases.map(caseItem => displayCase(caseItem)).join('');
}

// تحديث مستمع الأحداث لحقل البحث
document.getElementById('case-search').addEventListener('input', function(e) {
    if (searchTimeout) {
        clearTimeout(searchTimeout);
    }
    searchTimeout = setTimeout(() => {
        searchCases(e.target.value);
    }, 500);
});

// دالة لإنشاء رقم بصمة فريد
function generateFingerprint(citizenid) {
    // إنشاء رقم بصمة باستدام الـ citizenid كأساس
    const base = citizenid.replace(/[^0-9]/g, ''); // استخراج الأرقام فقط
    const timestamp = Date.now().toString().slice(-4); // آخر 4 أرقام من الطابع الزمني
    return `FP-${base.slice(0,4)}-${timestamp}`;
}

// دالة للعودة للصفحة المحددة
function showPage(pageName) {
    document.querySelectorAll('.page').forEach(page => page.style.display = 'none');
    document.getElementById(pageName + '-page').style.display = 'block';
}

// تحديث معالج إجراءات العسكري
function handlePersonAction(citizenid, name) {
    // جلب تفاصيل الشخص من السيرفر
    fetch(`https://${GetParentResourceName()}/getPersonDetails`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            citizenid: citizenid
        })
    })
    .then(resp => resp.json())
    .then(details => {
        if (details) {
            showPersonDetailsPage(details);
        } else {
            showNotification('لم يتم العثور على معلومات المواطن', 'error');
        }
    })
    .catch(error => {
        console.error('Error fetching person details:', error);
        showNotification('حدث خطأ أثناء جلب المعلومات', 'error');
    });
}

// تحديث دالة البحث عن العساكر
function searchOfficers(input) {
    clearTimeout(searchTimeout);
    const searchText = input.value.trim();
    
    if (searchText.length >= 2) {
        activeOfficerInput = input;
        searchTimeout = setTimeout(() => {
            fetch(`https://${GetParentResourceName()}/searchOfficers`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ search: searchText })
            });
        }, 300);
    } else {
        const suggestionsDiv = input.parentElement.querySelector('.suggestions-list');
        suggestionsDiv.style.display = 'none';
    }
}

// إضافة وظيفة للتمرير التلقائي
function ensureSuggestionsVisible(suggestionsDiv) {
    if (!suggestionsDiv) return;
    
    const rect = suggestionsDiv.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    const bottomSpace = windowHeight - rect.bottom;
    
    // إذا كانت المسافة في الأسفل أقل من 100 بكسل
    if (bottomSpace < 100) {
        // حساب المسافة المطلوبة للتمرير
        const scrollAmount = 100 - bottomSpace;
        const mainContent = document.querySelector('.main-content');
        if (mainContent) {
            const currentScroll = mainContent.scrollTop;
            mainContent.scrollTo({
                top: currentScroll + scrollAmount,
                behavior: 'smooth'
            });
        }
    }
}

// تعديل معالج استجابة البحث عن الضباط
window.addEventListener('message', function(event) {
    if (event.data.type === 'officersSearchResult' && activeOfficerInput) {
        const suggestionsDiv = activeOfficerInput.parentElement.querySelector('.suggestions-list');
        
        if (event.data.success && event.data.officers && event.data.officers.length > 0) {
            suggestionsDiv.innerHTML = event.data.officers.map(officer => `
                <div class="suggestion-item" onclick="selectOfficer('${officer.name} (${officer.citizenid})', this)">
                    <i class="fas fa-user-shield"></i>
                    <span class="officer-name">${officer.name} (${officer.citizenid})</span>
                    <span class="officer-rank">${officer.rank}</span>
                </div>
            `).join('');
        } else {
            suggestionsDiv.innerHTML = '<div class="no-suggestions">لا توجد نتائج</div>';
        }
        
        suggestionsDiv.style.display = 'block';
        // استدعاء وظيفة التمرير التلقائي
        ensureSuggestionsVisible(suggestionsDiv);
    }
});

// تحديث دالة اختيار العسكري
function selectOfficer(nameWithId, element) {
    const input = element.closest('.autocomplete-wrapper').querySelector('input');
    input.value = nameWithId; // سيتم عرض الاسم مع الهوية في نفس الحقل
    element.closest('.suggestions-list').style.display = 'none';
}

function viewCaseDetails(caseId) {
    if (!caseId) {
        showNotification('معرف القضية غير صالح', 'error');
        return;
    }

    fetch(`https://${GetParentResourceName()}/getCaseDetails`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ caseId: caseId })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.success) {
            displayCaseDetails(data.case);
        } else {
            showNotification(data.error || 'حدث خطأ أثناء جلب تفاصيل القضية', 'error');
        }
    })
    .catch(error => {
        console.error('Error fetching case details:', error);
        showNotification('حدث خطأ أثناء جلب تفاصيل القضية', 'error');
    });
}

function displayCaseDetails(caseData) {
    // أولاً، تحقق من وجود صفح�� ا��تف��ص��ل
    let detailsPage = document.querySelector('.case-details-page');
    if (!detailsPage) {
        detailsPage = document.createElement('div');
        detailsPage.className = 'page case-details-page';
        document.querySelector('.main-content').appendChild(detailsPage);
    }
    
    // تحديث محتوى الصفحة
    detailsPage.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('cases')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2><i class="fas fa-folder-open"></i> تفاصيل القضية ${caseData.case_number}</h2>
        </div>

        <div class="case-details-grid">
            <div class="case-details-section">
                <h3><i class="fas fa-info-circle"></i> المعلومات الأساسية</h3>
                <p><strong>نوع القضية:</strong> ${translateCaseType(caseData.type)}</p>
                <p><strong>المتهم:</strong> ${caseData.suspect_name || 'غير محدد'}</p>
                <p><strong>مدة السجن:</strong> ${caseData.jail_time} شهر</p>
                <p><strong>الغرامة:</strong> ${caseData.total_fines}$</p>
                <p><strong>الحالة:</strong> 
                    <span class="${caseData.is_executed ? 'executed' : 'pending'}">
                        ${caseData.is_executed ? 'منفذة' : 'قيد الانتظار'}
                    </span>
                </p>
                <p><strong>تاريخ التسجيل:</strong> ${caseData.created_at}</p>
                <p class="case-creator">
                    <strong>منشئ القضية:</strong> 
                    <span class="creator-name">
                        <i class="fas fa-user-shield"></i>
                        ${caseData.creator_name || 'غير معروف'}
                    </span>
                </p>
            </div>

            <div class="case-details-section">
                <h3><i class="fas fa-gavel"></i> التهم</h3>
                <ul class="charges-list">
                    ${Array.isArray(caseData.charges) ? caseData.charges.map(charge => `
                        <li><i class="fas fa-chevron-left"></i> ${charge}</li>
                    `).join('') : '<li>لا توجد تهم مسجلة</li>'}
                </ul>
            </div>

            <div class="case-details-section">
                <h3><i class="fas fa-user-shield"></i> العساكر المشاركين</h3>
                <div class="officers-list">
                    ${Array.isArray(caseData.involved_officers) ? caseData.involved_officers.map(officer => `
                        <span class="officer-tag">
                            <i class="fas fa-user"></i>
                            ${officer}
                        </span>
                    `).join('') : '<span>لا يوجد عساكر مسجلين</span>'}
                </div>
            </div>

            ${caseData.crime_scene_photos && Array.isArray(caseData.crime_scene_photos) && caseData.crime_scene_photos.length > 0 ? `
                <div class="case-details-section">
                    <h3><i class="fas fa-camera"></i> صور مسرح الجريمة</h3>
                    <div class="case-images">
                        ${caseData.crime_scene_photos.map(photo => `
                            <img src="${photo}" class="case-image" onclick="showImagePreview('${photo}')" alt="صورة مسرح الجريمة">
                        `).join('')}
                    </div>
                </div>
            ` : ''}

            ${caseData.notes ? `
                <div class="case-details-section">
                    <h3><i class="fas fa-sticky-note"></i> ملاحظات ا��عسكري</h3>
                    <p>${caseData.notes}</p>
                </div>
            ` : ''}
        </div>
    `;

    // إخفاء جميع الصفحات الأخرى وعرض صفحة التفاصيل
    document.querySelectorAll('.page').forEach(page => page.style.display = 'none');
    detailsPage.style.display = 'block';
}

// دالة لعرض معاينة الصور
function showImagePreview(imageUrl) {
    const modal = document.createElement('div');
    modal.className = 'modal image-preview-modal';
    modal.innerHTML = `
        <div class="modal-content">
            <button class="modal-close" onclick="this.closest('.modal').remove()">
                <i class="fas fa-times"></i>
            </button>
            <img src="${imageUrl}" alt="معاينة الصورة">
        </div>
    `;
    document.body.appendChild(modal);
}

// إضافة دالة showPersonDetailsPage المفقودة
function showPersonDetailsPage(personData) {
    document.querySelectorAll('.page').forEach(page => page.style.display = 'none');
    
    let detailsPage = document.getElementById('person-details-page');
    if (!detailsPage) {
        detailsPage = document.createElement('div');
        detailsPage.id = 'person-details-page';
        detailsPage.className = 'page';
        document.querySelector('.main-content').appendChild(detailsPage);
    }

    detailsPage.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('search')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2><i class="fas fa-user"></i> معلومات المواطن</h2>
        </div>

        <div class="person-info-grid">
            <div class="info-section">
                <h3><i class="fas fa-id-card"></i> المعلومات الأساسية</h3>
                <p><strong>الاسم:</strong> ${personData.firstname} ${personData.lastname}</p>
                <p><strong>رقم الهوية:</strong> ${personData.citizenid}</p>
                <p><strong>الهاتف:</strong> ${personData.phone}</p>
                <p><strong>تاريخ الميلاد:</strong> ${personData.birthdate}</p>
                <p><strong>الجنس:</strong> ${personData.gender === 'male' ? 'ذكر' : 'أنثى'}</p>
                <p><strong><i class="fas fa-fingerprint"></i> البصمة:</strong> ${personData.fingerprint || 'غير مسجل'}</p>
            </div>
            
            <div class="info-section">
                <h3><i class="fas fa-address-card"></i> معلومات إضافية</h3>
                <p><strong>الوظيفة:</strong> ${personData.job}</p>
                <p><strong>الحساب البنكي:</strong> ${personData.accountnumber}</p>
                <p><strong>الرخص:</strong></p>
                <div class="licenses">
                    <span class="${personData.licenses.driver ? 'active' : 'inactive'}">
                        <i class="fas fa-car"></i> قيادة
                    </span>
                    <span class="${personData.licenses.weapon ? 'active' : 'inactive'}">
                        <i class="fas fa-shield-alt"></i> سلاح
                    </span>
                </div>
            </div>
        </div>

        <div class="person-actions">
            <button onclick="createAddCasePage('${personData.citizenid}', '${personData.firstname} ${personData.lastname}')" class="action-btn primary">
                <div class="btn-icon">
                    <i class="fas fa-gavel"></i>
                </div>
                <div class="btn-content">
                    <span class="btn-title">إضافة قضية</span>
                    <span class="btn-subtitle">تسجيل قضية جديدة</span>
                </div>
            </button>
            
            <!-- إضافة زر عرض السجل -->
            <button onclick="showPersonHistory('${personData.citizenid}', '${personData.firstname} ${personData.lastname}')" class="action-btn secondary">
                <div class="btn-icon">
                    <i class="fas fa-history"></i>
                </div>
                <div class="btn-content">
                    <span class="btn-title">عرض السجل</span>
                    <span class="btn-subtitle">سجل القضايا السابقة</span>
                </div>
            </button>
        </div>
    `;
    
    detailsPage.style.display = 'block';
}

function createAddCasePage(citizenid) {
    const page = document.createElement('div');
    page.id = 'add-case-page';
    page.className = 'page';
    page.innerHTML = `
        <style>
            .officers-section {
                display: none; /* إخفاء ��لقسم كاملاً بشكل افتراضي */
            }

            .officers-selection {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .selected-officers-count {
                color: var(--text-color);
                font-size: 14px;
                opacity: 0.8;
            }
        </style>

        <div class="add-case-container">
            <div class="page-header">
                <h2>
                    <i class="fas fa-folder-plus"></i>
                    إضافة قضية جديدة
                </h2>
            </div>

            <div class="form-content">
                <div class="form-group">
                    <label><i class="fas fa-tag"></i> نوع القضية</label>
                    <select id="case-type" onchange="toggleJailField()" required>
                        <option value="">اختر نوع القضية</option>
                        <option value="traffic">قضية مرورية</option>
                        <option value="criminal">قضية جنائية</option>
                    </select>
                </div>

                <div class="form-group jail-field" style="display: none;">
                    <label><i class="fas fa-clock"></i> مدة السجن (الشهور)</label>
                    <input type="number" id="jail-months" placeholder="عدد الشهور" min="0">
                </div>

                <div class="form-group">
                    <label><i class="fas fa-money-bill"></i> إجمالي المخالفات</label>
                    <input type="number" id="total-fine" placeholder="القيمة الإجمالية" min="0" required>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-gavel"></i> التهم</label>
                    <div id="charges-container">
                        <div class="charge-entry">
                            <input type="text" placeholder="أدخل التهمة" class="charge-input" required>
                            <button type="button" class="add-charge" onclick="addChargeField()">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>
                        <i class="fas fa-camera"></i>
                        روابط صور مسرح الجريمة (اختياري)
                    </label>
                    <div id="image-links-container">
                        <div class="image-link-entry">
                            <input type="url" placeholder="أدخل رابط لصورة" class="image-url">
                            <button type="button" class="add-image-link" onclick="addImageLinkField()">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label>
                        <i class="fas fa-comment"></i>
                        ملاحظات العسكري (اختياري)
                    </label>
                    <textarea id="officer-notes" rows="4" placeholder="أدخل ملحظاتك هنا"></textarea>
                </div>

                <div class="form-group checkbox-group">
                    <label class="checkbox-container">
                        <input type="checkbox" id="case-executed" onchange="toggleOfficersSection()">
                        <span class="checkmark"></span>
                        <span class="checkbox-label">
                            <i class="fas fa-check-circle"></i>
                            تم تنفيذ القضية
                        </span>
                    </label>
                </div>

                <div class="form-group officers-section">
                    <label>العساكر المشاركين</label>
                    <div class="officers-selection">
                        <button class="add-officers-btn" onclick="handleOfficerSelection()">
                            <i class="fas fa-users"></i>
                            إضافة عساكر مشاركين
                        </button>
                        <span class="selected-officers-count"></span>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button class="submit-btn" onclick="submitCase('${citizenid}')">
                    <i class="fas fa-save"></i>
                    حفظ القضية
                </button>
                <button class="cancel-btn" onclick="showPage('search')">
                    <i class="fas fa-times"></i>
                    إلغاء
                </button>
            </div>
        </div>
    `;

    document.querySelector('.main-content').appendChild(page);
    showPage('add-case');
}

function toggleOfficersSection() {
    const isExecuted = document.getElementById('case-executed').checked;
    const officersSection = document.querySelector('.officers-section');
    
    if (isExecuted) {
        officersSection.style.display = 'block';
    } else {
        officersSection.style.display = 'none';
        // إعادة تعيين الاختيارات عند إلغاء التفعيل
        const countDisplay = document.querySelector('.selected-officers-count');
        countDisplay.textContent = '';
        const addOfficersBtn = document.querySelector('.add-officers-btn');
        addOfficersBtn.dataset.selectedOfficers = '[]';
    }
}

function getSelectedCharges() {
    const charges = [];
    const chargeInputs = document.querySelectorAll('.charge-input');
    
    chargeInputs.forEach(input => {
        const charge = input.value.trim();
        if (charge) {
            charges.push(charge);
        }
    });
    
    return charges;
}

function getUploadedImages() {
    const images = [];
    const imageInputs = document.querySelectorAll('.image-url');
    
    imageInputs.forEach(input => {
        const url = input.value.trim();
        if (url) {
            images.push(url);
        }
    });
    
    return images;
}

function submitCase(citizenid) {
    // التحقق من الحقول المطلوبة
    const type = document.getElementById('case-type').value;
    const jailMonths = document.getElementById('jail-months')?.value || '0';
    const totalFine = document.getElementById('total-fine').value;
    const charges = getSelectedCharges();
    const notes = document.getElementById('officer-notes')?.value || '';
    const executed = document.getElementById('case-executed').checked;
    
    // الحصول على الع��اكر المختارين وتحويلهم إلى التنسيق المطلوب
    const addOfficersBtn = document.querySelector('.add-officers-btn');
    const selectedOfficersRaw = addOfficersBtn.dataset.selectedOfficers ? 
        JSON.parse(addOfficersBtn.dataset.selectedOfficers) : [];
    
    // تحويل صيغة العساكر إلى التنسيق المطلوب
    const selectedOfficers = selectedOfficersRaw.map(officer => 
        `${officer.name} (${officer.citizenid})`
    );

    // التحقق من البيانات المطلوبة
    if (!type) {
        showNotification('يجب اختيار نوع القضية', 'error');
        return;
    }

    if (!charges || charges.length === 0) {
        showNotification('يجب إضافة تهمة واحدة على الأقل', 'error');
        return;
    }

    // التحق�� من العساكر المشاركين إذا كانت القضية منفذة
    if (executed && (!selectedOfficers || selectedOfficers.length === 0)) {
        showNotification('يجب إضافة عسكري واحد على الأقل للقضايا المنفذة', 'error');
        return;
    }

    // تجهيز بيانات القضية
    const caseData = {
        type: type,
        citizenid: citizenid,
        jailMonths: jailMonths,
        totalFine: totalFine,
        charges: charges,
        notes: notes,
        executed: executed,
        officers: selectedOfficers, // الآن بالتنسيق الجديد
        imageLinks: getUploadedImages()
    };

    // إرسال البيانات إلى ��لسيرفر
    fetch(`https://${GetParentResourceName()}/addCase`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(caseData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('تم إضافة القضية بنجاح', 'success');
            showPage('search');
        } else {
            showNotification(data.error || 'حدث خطأ أثناء إضافة القضية', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('حدث خطأ أثناء إضافة القضية', 'error');
    });
}

function addChargeField() {
    const container = document.getElementById('charges-container');
    const newEntry = document.createElement('div');
    newEntry.className = 'charge-entry';
    newEntry.innerHTML = `
        <input type="text" placeholder="أدخل التهمة" class="charge-input" required>
        <button type="button" class="remove-charge" onclick="removeChargeField(this)">
            <i class="fas fa-times"></i>
        </button>
    `;
    container.appendChild(newEntry);
}

function addImageLinkField() {
    const container = document.getElementById('image-links-container');
    const newEntry = document.createElement('div');
    newEntry.className = 'image-link-entry';
    newEntry.innerHTML = `
        <input type="url" placeholder="أدخل رابط لصورة" class="image-url">
        <button type="button" class="remove-image-link" onclick="removeImageField(this)">
            <i class="fas fa-times"></i>
        </button>
    `;
    container.appendChild(newEntry);
}

function removeChargeField(button) {
    const container = document.getElementById('charges-container');
    if (container.children.length > 1) {
        button.parentElement.remove();
    }
}

function removeImageField(button) {
    const container = document.getElementById('image-links-container');
    if (container.children.length > 1) {
        button.parentElement.remove();
    }
}

function translateCaseType(type) {
    const types = {
        'criminal': 'جنائي',
        'traffic': 'مرورية'
    };
    return types[type] || type;
}

// تعديل طريقة عرض القضايا
function displayCase(caseItem) {
    const formattedDate = formatDate(caseItem.created_at);
    return `
        <div class="case-card">
            <div class="case-header">
                <div class="case-title">
                    <h3>
                        <i class="fas fa-folder"></i>
                        قضية رقم: ${caseItem.case_number}
                    </h3>
                    <span class="case-type ${caseItem.type}">
                        ${translateCaseType(caseItem.type)}
                    </span>
                </div>
                <div class="case-date">
                    <i class="fas fa-clock"></i>
                    ${formattedDate}
                </div>
            </div>
            <div class="case-content">
                <div class="case-info">
                    <div class="case-info-item">
                        <i class="fas fa-user"></i>
                        <span>المتهم: ${caseItem.suspect_name || 'غير محدد'}</span>
                    </div>
                    <div class="case-info-item">
                        <i class="fas fa-gavel"></i>
                        <span>مدة السجن: ${caseItem.jail_time} شهر</span>
                    </div>
                    <div class="case-info-item">
                        <i class="fas fa-money-bill"></i>
                        <span>الغرامة: ${caseItem.total_fines}$</span>
                    </div>
                </div>
                ${caseItem.charges ? `
                    <div class="charges-list">
                        <h4 class="charges-title">
                            <i class="fas fa-list"></i>
                            التهم:
                        </h4>
                        ${caseItem.charges.map(charge => `
                            <span class="charge-tag">${charge}</span>
                        `).join('')}
                    </div>
                ` : ''}
            </div>
            <div class="case-footer">
                <span class="case-status ${caseItem.is_executed ? 'executed' : 'pending'}">
                    <i class="fas ${caseItem.is_executed ? 'fa-check-circle' : 'fa-clock'}"></i>
                    ${caseItem.is_executed ? 'منفذة' : 'قيد الانتظار'}
                </span>
                <div class="case-actions">
                    ${!caseItem.is_executed ? `
                        <button class="execute-btn" onclick="executeCase('${caseItem.case_number}')">
                            <i class="fas fa-check"></i>
                            تنفيذ القضية
                        </button>
                    ` : ''}
                    <button class="details-btn" onclick="viewCaseDetails(${caseItem.id})">
                        <i class="fas fa-eye"></i>
                        عرض التفاصيل
                    </button>
                </div>
            </div>
        </div>
    `;
}

// تحديث عرض القضايا مع الفلترة
function updateCasesDisplay() {
    const filteredCases = allCases.filter(caseItem => {
        const matchesType = currentTypeFilter === 'all' || caseItem.type === currentTypeFilter;
        const matchesStatus = currentStatusFilter === 'all' || 
            (currentStatusFilter === 'executed' && caseItem.is_executed) ||
            (currentStatusFilter === 'pending' && !caseItem.is_executed);
        return matchesType && matchesStatus;
    });

    const casesList = document.querySelector('.cases-list');
    casesList.innerHTML = filteredCases.map(caseItem => displayCase(caseItem)).join('');
}

// إضافة مستمعي الأحداث لأزرار الفلترة
document.querySelectorAll('.filter-btn[data-type]').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-btn[data-type]').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        currentTypeFilter = this.dataset.type;
        updateCasesDisplay();
    });
});

document.querySelectorAll('.filter-btn[data-status]').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-btn[data-status]').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        currentStatusFilter = this.dataset.status;
        updateCasesDisplay();
    });
});

// تحديث وظيفة تحميل القضايا
function loadCases() {
    fetch(`https://${GetParentResourceName()}/searchCases`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query: '' })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            allCases = data.cases.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            updateCasesDisplay();
        }
    });
}

// دالة لتنسيق التاريخ والوقت
function formatDate(dateString) {
    try {
        const date = new Date(dateString);
        
        // التحقق من صحة التاريخ
        if (isNaN(date.getTime())) {
            return dateString;
        }

        // الحصول على الساعة بنظام 12 ساعة
        let hours = date.getHours();
        const ampm = hours >= 12 ? 'م' : 'ص';
        hours = hours % 12;
        hours = hours ? hours : 12; // تحويل الساعة 0 إلى 12

        // إضافة أصفار للدقائق إذا كانت أقل من 10
        const minutes = date.getMinutes().toString().padStart(2, '0');

        // تنسيق التاريخ والوقت
        const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        const formattedTime = `${hours}:${minutes} ${ampm}`;

        return `${formattedDate} ${formattedTime}`;
    } catch (e) {
        console.error('Error formatting date:', e);
        return dateString;
    }
}

// تحديث دالة عرض القضية
function displayCase(caseItem) {
    const formattedDate = formatDate(caseItem.created_at);
    return `
        <div class="case-card">
            <div class="case-header">
                <div class="case-title">
                    <h3>
                        <i class="fas fa-folder"></i>
                        قضية رقم: ${caseItem.case_number}
                    </h3>
                    <span class="case-type ${caseItem.type}">
                        ${translateCaseType(caseItem.type)}
                    </span>
                </div>
                <div class="case-date">
                    <i class="fas fa-clock"></i>
                    ${formattedDate}
                </div>
            </div>
            <div class="case-content">
                <div class="case-info">
                    <div class="case-info-item">
                        <i class="fas fa-user"></i>
                        <span>المتهم: ${caseItem.suspect_name || 'غير محدد'}</span>
                    </div>
                    <div class="case-info-item">
                        <i class="fas fa-gavel"></i>
                        <span>مدة السجن: ${caseItem.jail_time} شهر</span>
                    </div>
                    <div class="case-info-item">
                        <i class="fas fa-money-bill"></i>
                        <span>الغرامة: ${caseItem.total_fines}$</span>
                    </div>
                </div>
                ${caseItem.charges ? `
                    <div class="charges-list">
                        <h4 class="charges-title">
                            <i class="fas fa-list"></i>
                            التهم:
                        </h4>
                        ${caseItem.charges.map(charge => `
                            <span class="charge-tag">${charge}</span>
                        `).join('')}
                    </div>
                ` : ''}
            </div>
            <div class="case-footer">
                <span class="case-status ${caseItem.is_executed ? 'executed' : 'pending'}">
                    <i class="fas ${caseItem.is_executed ? 'fa-check-circle' : 'fa-clock'}"></i>
                    ${caseItem.is_executed ? 'منفذة' : 'قيد الانتظار'}
                </span>
                <div class="case-actions">
                    ${!caseItem.is_executed ? `
                        <button class="execute-btn" onclick="executeCase('${caseItem.case_number}')">
                            <i class="fas fa-check"></i>
                            تنفيذ القضية
                        </button>
                    ` : ''}
                    <button class="details-btn" onclick="viewCaseDetails(${caseItem.id})">
                        <i class="fas fa-eye"></i>
                        عرض التفاصيل
                    </button>
                </div>
            </div>
        </div>
    `;
}

function executeCase(caseNumber) {
    showConfirmPopup({
        title: 'تأكيد تنفيذ القضية',
        message: `هل أنت متأكد من تنفيذ القضية رقم ${caseNumber}؟`,
        icon: 'fa-check-circle',
        confirmText: 'تنفيذ',
        cancelText: 'إلغاء',
        onConfirm: () => {
            fetch(`https://${GetParentResourceName()}/executeCase`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    caseNumber: caseNumber
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification('تم تنفيذ القضية بنجاح', 'success');
                    // تحديث عرض القضايا
                    loadCases();
                } else {
                    showNotification(data.error || 'حدث خطأ أثناء تنفيذ القضية', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('حدث خطأ أثناء تنفيذ القضية', 'error');
            });
        }
    });
}

function showConfirmPopup({ title, message, icon, confirmText, cancelText, onConfirm }) {
    // إزالة أي نافذة تأكيد سابقة
    const existingPopup = document.querySelector('.confirm-popup-overlay');
    if (existingPopup) {
        existingPopup.remove();
    }

    // إنشاء نافذة التأكيد
    const overlay = document.createElement('div');
    overlay.className = 'confirm-popup-overlay';
    
    overlay.innerHTML = `
        <div class="confirm-popup">
            <div class="confirm-popup-title">
                <i class="fas ${icon}"></i>
                ${title}
            </div>
            <div class="confirm-popup-content">
                ${message}
            </div>
            <div class="confirm-popup-buttons">
                <button class="confirm-btn confirm">
                    <i class="fas ${icon}"></i>
                    ${confirmText}
                </button>
                <button class="confirm-btn cancel">
                    <i class="fas fa-times"></i>
                    ${cancelText}
                </button>
            </div>
        </div>
    `;

    document.body.appendChild(overlay);

    // إضافة مستمعي الأحداث للأزرار
    const confirmBtn = overlay.querySelector('.confirm-btn.confirm');
    const cancelBtn = overlay.querySelector('.confirm-btn.cancel');

    confirmBtn.addEventListener('click', () => {
        onConfirm();
        overlay.remove();
    });

    cancelBtn.addEventListener('click', () => {
        overlay.remove();
    });

    // إغلاق النافذة عند النقر خارجها
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
            overlay.remove();
        }
    });
}

function showPersonHistory(citizenid, fullName) {
    // إخفاء جميع الصفحات
    document.querySelectorAll('.page').forEach(page => page.style.display = 'none');
    
    // إنشاء أو تحديث صفحة السجل
    let historyPage = document.getElementById('person-history-page');
    if (!historyPage) {
        historyPage = document.createElement('div');
        historyPage.id = 'person-history-page';
        historyPage.className = 'page';
        document.querySelector('.main-content').appendChild(historyPage);
    }

    // عرض شاشة التحميل
    historyPage.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('person-details')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2>
                <i class="fas fa-history"></i>
                سجل ${fullName}
            </h2>
        </div>
        <div class="loading-spinner">جاري التحميل...</div>
    `;
    historyPage.style.display = 'block';

    // طلب السجلات من السيرفر
    fetch(`https://${GetParentResourceName()}/getPersonHistory`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ citizenid: citizenid })
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.success) {
            displayPersonHistory(historyPage, data.cases, fullName);
        } else {
            historyPage.innerHTML = `
                <div class="page-header">
                    <button class="back-btn" onclick="showPage('person-details')">
                        <i class="fas fa-arrow-left"></i>
                        رجوع
                    </button>
                    <h2>
                        <i class="fas fa-history"></i>
                        سجل ${fullName}
                    </h2>
                </div>
                <div class="no-results">لا توجد سجلات</div>
            `;
        }
    });
}

function displayPersonHistory(page, cases, fullName) {
    window.currentPersonCases = cases;

    page.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('person-details')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2>
                <i class="fas fa-history"></i>
                سجل ${fullName}
            </h2>
        </div>

        <div class="history-controls">
            <!-- قسم البحث -->
            <div class="search-section">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" 
                           id="history-search" 
                           placeholder="ابحث برقم القضية أو التهم..." 
                           onkeyup="filterPersonHistory()">
                </div>
            </div>

            <!-- قسم الفلاتر -->
            <div class="filters-section">
                <!-- إحصائيات سريعة -->
                <div class="quick-stats">
                    <div class="stat-item">
                        <i class="fas fa-folder"></i>
                        <span>إجمالي القضايا: ${cases.length}</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-check-circle"></i>
                        <span>القضايا المنفذة: ${cases.filter(c => c.is_executed).length}</span>
                    </div>
                    <div class="stat-item">
                        <i class="fas fa-clock"></i>
                        <span>قيد الانتظار: ${cases.filter(c => !c.is_executed).length}</span>
                    </div>
                    <button class="summary-btn" onclick='showCasesSummary("${fullName}", ${JSON.stringify(cases)})'>
                        <i class="fas fa-chart-pie"></i>
                        احصاء القضايا الغير منفذة
                    </button>
                </div>

                <!-- مجموعات الفلاتر -->
                <div class="filter-groups">
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-tag"></i>
                            نوع القضية
                        </label>
                        <div class="filter-buttons">
                            <button class="filter-btn active" data-type="all" onclick="filterPersonHistory('type', 'all')">
                                <i class="fas fa-border-all"></i>
                                الكل
                            </button>
                            <button class="filter-btn" data-type="criminal" onclick="filterPersonHistory('type', 'criminal')">
                                <i class="fas fa-gavel"></i>
                                جنائية
                            </button>
                            <button class="filter-btn" data-type="traffic" onclick="filterPersonHistory('type', 'traffic')">
                                <i class="fas fa-car"></i>
                                مرورية
                            </button>
                        </div>
                    </div>
                    
                    <div class="filter-group">
                        <label class="filter-label">
                            <i class="fas fa-tasks"></i>
                            حالة القضية
                        </label>
                        <div class="filter-buttons">
                            <button class="filter-btn active" data-status="all" onclick="filterPersonHistory('status', 'all')">
                                <i class="fas fa-border-all"></i>
                                الكل
                            </button>
                            <button class="filter-btn" data-status="executed" onclick="filterPersonHistory('status', 'executed')">
                                <i class="fas fa-check-circle"></i>
                                منفذة
                            </button>
                            <button class="filter-btn" data-status="pending" onclick="filterPersonHistory('status', 'pending')">
                                <i class="fas fa-clock"></i>
                                قيد الانتظار
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- قائمة القضايا -->
        <div class="cases-list" id="filtered-cases">
            ${generateCasesList(cases)}
        </div>
    `;

    // إضافة أنماط CSS مخصصة
    const style = document.createElement('style');
    style.textContent = `
        .history-controls {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--box-shadow);
        }

        .search-section {
            margin-bottom: 20px;
        }

        .search-box {
            background: rgba(0, 0, 0, 0.2);
            border-radius: var(--border-radius);
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition);
        }

        .search-box:focus-within {
            background: rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }

        .search-box input {
            background: transparent;
            border: none;
            color: var(--text-color);
            font-size: 1em;
            width: 100%;
            outline: none;
        }

        .quick-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 0.9em;
        }

        .filter-groups {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 300px;
        }

        .filter-label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-size: 0.9em;
        }

        .filter-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: rgba(0, 0, 0, 0.2);
            border: none;
            padding: 8px 15px;
            border-radius: var(--border-radius);
            color: var(--text-color);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        .filter-btn.active {
            background: var(--primary-color);
            color: white;
        }

        .filter-btn i {
            font-size: 0.9em;
        }

        .cases-list {
            display: grid;
            gap: 20px;
            padding-bottom: 100px;
        }

        .summary-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
        }

        .summary-btn:hover {
            background: var(--primary-color-dark);
            transform: translateY(-2px);
        }
    `;
    document.head.appendChild(style);
}

// دالة لتوليد قائمة القضايا
function generateCasesList(cases) {
    if (!cases || cases.length === 0) {
        return '<div class="no-results">لا توجد قضايا</div>';
    }

    return cases.map(caseItem => `
        <div class="case-card">
            <div class="case-header">
                <div class="case-title">
                    <h3>
                        <i class="fas fa-folder"></i>
                        قضية رقم: ${caseItem.case_number}
                    </h3>
                    <span class="case-type ${caseItem.type}">
                        ${translateCaseType(caseItem.type)}
                    </span>
                </div>
                <div class="case-date">
                    <i class="fas fa-clock"></i>
                    ${formatDate(caseItem.created_at)}
                </div>
            </div>
            <div class="case-content">
                <div class="case-info">
                    <div class="case-info-item">
                        <i class="fas fa-gavel"></i>
                        <span>مدة السجن: ${caseItem.jail_time} شهر</span>
                    </div>
                    <div class="case-info-item">
                        <i class="fas fa-money-bill"></i>
                        <span>الغرامة: ${caseItem.total_fines}$</span>
                    </div>
                </div>
                ${caseItem.charges ? `
                    <div class="charges-list">
                        <h4 class="charges-title">
                            <i class="fas fa-list"></i>
                            التهم:
                        </h4>
                        ${caseItem.charges.map(charge => `
                            <span class="charge-tag">${charge}</span>
                        `).join('')}
                    </div>
                ` : ''}
            </div>
            <div class="case-footer">
                <span class="case-status ${caseItem.is_executed ? 'executed' : 'pending'}">
                    <i class="fas ${caseItem.is_executed ? 'fa-check-circle' : 'fa-clock'}"></i>
                    ${caseItem.is_executed ? 'منفذة' : 'قيد الانتظار'}
                </span>
                <button class="details-btn" onclick="viewCaseDetails(${caseItem.id})">
                    <i class="fas fa-eye"></i>
                    عرض التفاصيل
                </button>
            </div>
        </div>
    `).join('');
}

// متغيرات عامة لحفظ حالة الفلاتر
let currentSearchText = '';

// دالة الفلترة
function filterPersonHistory(filterType, value) {
    if (filterType === 'type') {
        currentTypeFilter = value;
        // تحديث حالة الأزرار
        document.querySelectorAll('.filter-btn[data-type]').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.type === value);
        });
    } else if (filterType === 'status') {
        currentStatusFilter = value;
        // تحديث حالة الأزرار
        document.querySelectorAll('.filter-btn[data-status]').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.status === value);
        });
    } else {
        // إذا تم استدعاء الدالة من البحث النصي
        currentSearchText = document.getElementById('history-search').value.toLowerCase();
    }

    // تطبيق الفلاتر
    let filteredCases = window.currentPersonCases;

    // فلتر النوع
    if (currentTypeFilter !== 'all') {
        filteredCases = filteredCases.filter(c => c.type === currentTypeFilter);
    }

    // فلتر الحالة
    if (currentStatusFilter !== 'all') {
        filteredCases = filteredCases.filter(c => 
            currentStatusFilter === 'executed' ? c.is_executed : !c.is_executed
        );
    }

    // فلتر البحث النصي
    if (currentSearchText) {
        filteredCases = filteredCases.filter(c => 
            c.case_number.toLowerCase().includes(currentSearchText) ||
            (c.charges && c.charges.some(charge => 
                charge.toLowerCase().includes(currentSearchText)
            ))
        );
    }

    // تحديث العرض
    document.getElementById('filtered-cases').innerHTML = generateCasesList(filteredCases);
}

function handleOfficerSelection() {
    // حفظ العساكر المحددين مؤقتاً
    selectedOfficers = Array.from(document.querySelectorAll('#selected-officers .selected-officer'))
        .map(officer => ({
            name: officer.dataset.name,
            citizenid: officer.dataset.citizenid,
            rank: officer.dataset.rank
        }));

    const page = document.createElement('div');
    page.id = 'select-officers-page';
    page.className = 'page';
    
    page.innerHTML = `
        <style>
            .officers-page-content {
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .officers-grid-container {
                flex: 1;
                overflow-y: auto;
                padding-bottom: 80px; /* مساحة للزر الثابت */
            }

            .confirmation-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 15px 25px;
                background: rgba(var(--surface-color), 0.95);
                backdrop-filter: blur(10px);
                border-top: 1px solid rgba(255,255,255,0.1);
                display: flex;
                justify-content: flex-end;
                gap: 15px;
                z-index: 100;
            }

            .confirmation-footer button {
                padding: 12px 25px;
                border-radius: var(--border-radius);
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .cancel-selection {
                background: rgba(255,255,255,0.1);
                color: var(--text-color);
            }

            .cancel-selection:hover {
                background: rgba(255,255,255,0.15);
            }

            .confirm-selection {
                background: var(--primary-color);
                color: white;
            }

            .confirm-selection:hover {
                background: var(--primary-color-dark);
                transform: translateY(-2px);
            }

            .selected-count {
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--text-secondary);
                margin-right: auto;
            }
        </style>

        <div class="officers-page-content">
            <div class="page-header">
                <button class="back-btn" onclick="showPage('add-case')">
                    <i class="fas fa-arrow-left"></i>
                    رجوع
                </button>
                <h2>
                    <i class="fas fa-users"></i>
                    اختيار العساكر المشاركين
                </h2>
            </div>

            <div class="search-container">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="officers-search" placeholder="ابحث عن عسكري...">
                </div>
            </div>

            <div class="officers-grid-container">
                <div class="officers-grid">
                    <!-- سيتم تعبئة ه��ا القسم بالعساكر -->
                </div>
            </div>

            <div class="confirmation-footer">
                <div class="selected-count">
                    <i class="fas fa-check-circle"></i>
                    <span id="officers-selected-count">0 عساكر محددين</span>
                </div>
                <button class="cancel-selection" onclick="showPage('add-case')">
                    <i class="fas fa-times"></i>
                    إلغاء
                </button>
                <button class="confirm-selection" onclick="confirmOfficerSelection()">
                    <i class="fas fa-check"></i>
                    تأكيد الاختيار
                </button>
            </div>
        </div>
    `;

    document.querySelector('.main-content').appendChild(page);
    showPage('select-officers');
    loadOfficers();

    document.getElementById('officers-search').addEventListener('input', function(e) {
        filterOfficers(e.target.value);
    });
}

// تحديث عداد العساكر المحددين
function toggleOfficerSelection(element) {
    element.classList.toggle('selected');
    
    const officerData = {
        name: element.dataset.name,
        citizenid: element.dataset.citizenid,
        rank: element.dataset.rank
    };

    if (element.classList.contains('selected')) {
        // إضافة العسكري إلى القائمة إذا لم يكن موجوداً
        if (!selectedOfficers.some(officer => officer.name === officerData.name)) {
            selectedOfficers.push(officerData);
        }
    } else {
        // إزالة العسكري من القائمة
        selectedOfficers = selectedOfficers.filter(officer => officer.name !== officerData.name);
    }

    updateSelectedCount();
}

function updateSelectedCount() {
    const countElement = document.getElementById('officers-selected-count');
    if (countElement) {
        const count = selectedOfficers.length;
        if (count === 0) {
            countElement.textContent = 'لم يتم اختيار أي عسكري';
        } else if (count === 1) {
            countElement.textContent = 'عسكري واحد محدد';
        } else {
            countElement.textContent = `${count} عساكر محددين`;
        }
    }
}

function loadOfficers() {
    const officersGrid = document.querySelector('.officers-grid');
    officersGrid.innerHTML = '<div class="loading">جاري تحميل قائمة العساكر...</div>';

    fetch(`https://${GetParentResourceName()}/getAllOfficers`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.officers) {
            officersGrid.innerHTML = `
                <style>
                    .officers-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                        gap: 20px;
                        padding: 20px;
                    }

                    .officer-card {
                        background: rgba(31, 41, 55, 0.7);
                        border: 2px solid rgba(255, 255, 255, 0.1);
                        border-radius: 15px;
                        padding: 20px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        display: flex;
                        align-items: center;
                        gap: 15px;
                        position: relative;
                        overflow: hidden;
                    }

                    .officer-name {
                        display: block;
                        margin-bottom: 4px;
                    }

                    .officer-citizenid {
                        color: rgba(255, 255, 255, 0.6);
                        font-size: 14px;
                        font-weight: normal;
                    }


                    .officer-card:hover {
                        transform: translateY(-5px);
                        background: rgba(31, 41, 55, 0.9);
                        border-color: rgba(var(--primary-color-rgb), 0.5);
                    }

                    .officer-card.selected {
                        background: rgba(var(--primary-color-rgb), 0.15);
                        border-color: var(--primary-color);
                    }

                    .officer-avatar {
                        width: 65px;
                        height: 65px;
                        background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
                        border-radius: 15px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                    }

                    .officer-avatar i {
                        font-size: 28px;
                        color: white;
                    }

                    .officer-info {
                        flex: 1;
                    }

                    .officer-info h3 {
                        color: white;
                        font-size: 18px;
                        margin-bottom: 8px;
                        font-weight: 600;
                    }

                    .officer-rank {
                        display: inline-block;
                        padding: 6px 12px;
                        background: rgba(var(--primary-color-rgb), 0.2);
                        color: var(--primary-color);
                        border-radius: 8px;
                        font-size: 14px;
                        font-weight: 500;
                    }

                    .selection-indicator {
                        position: absolute;
                        top: 20px;
                        left: 20px;
                        width: 22px;
                        height: 22px;
                        border: 2px solid var(--primary-color);
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: all 0.3s ease;
                    }

                    .officer-card.selected .selection-indicator {
                        background: var(--primary-color);
                    }

                    .selection-indicator i {
                        color: transparent;
                        font-size: 12px;
                        transition: all 0.3s ease;
                    }

                    .officer-card.selected .selection-indicator i {
                        color: white;
                    }
                </style>
            ` + data.officers.map(officer => ` 
                <div class="officer-card" 
                     data-name="${officer.name}" 
                     data-citizenid="${officer.citizenid}" 
                     data-rank="${officer.rank}"
                     onclick="toggleOfficerSelection(this)">
                    <div class="selection-indicator">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="officer-avatar">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <div class="officer-info">
                        <h3>
                            <span class="officer-name">${officer.name}</span>
                            <span class="officer-citizenid">(${officer.citizenid})</span>
                        </h3>
                        <span class="officer-rank">${officer.rank}</span>
                    </div>
                </div>
            `).join('');
        } else {
            officersGrid.innerHTML = '<div class="no-results">لم يتم العثور على عساكر</div>';
        }
    })
    .catch(error => {
        console.error('Error loading officers:', error);
        officersGrid.innerHTML = '<div class="error">حدث خطأ أثناء تحميل قائمة العساكر</div>';
    });
}

function filterOfficers(search) {
    const cards = document.querySelectorAll('.officer-card');
    const searchTerm = search.toLowerCase();
    
    cards.forEach(card => {
        const name = card.dataset.name.toLowerCase();
        const shouldShow = name.includes(searchTerm);
        card.style.display = shouldShow ? 'flex' : 'none';
    });
}

function confirmOfficerSelection() {
    const selectedCount = document.querySelectorAll('.officer-card.selected').length;
    const selectedOfficers = Array.from(document.querySelectorAll('.officer-card.selected')).map(card => ({
        name: card.dataset.name,
        citizenid: card.dataset.citizenid,
        rank: card.dataset.rank
    }));
    
    // تحديث عدد العساكر المختارين في الفورم
    const countDisplay = document.querySelector('.selected-officers-count');
    if (selectedCount > 0) {
        countDisplay.textContent = `تم اختيار ${selectedCount} ${selectedCount === 1 ? 'عسكري' : 'عساكر'}`;
        countDisplay.style.display = 'inline-block';
    } else {
        countDisplay.style.display = 'none';
    }
    
    // تخزين العساكر المختارين في data attribute
    const addOfficersBtn = document.querySelector('.add-officers-btn');
    addOfficersBtn.dataset.selectedOfficers = JSON.stringify(selectedOfficers);
    
    showPage('add-case');
}

function removeSelectedOfficer(button) {
    button.closest('.selected-officer').remove();
}

function displayCasesPage() {
    const casesPage = document.getElementById('cases-page');
    casesPage.innerHTML = `
        <div class="page-header">
            <h2><i class="fas fa-folder"></i> القضايا</h2>
            <button class="add-btn" onclick="showPlayersPage()">
                <i class="fas fa-plus"></i>
                إضافة قضية جديدة
            </button>
        </div>
        <!-- باقي محتوى صفحة القضايا -->
    `;
}

function showPlayersPage() {
    // إنشاء صفحة المواطنين
    const page = document.createElement('div');
    page.id = 'players-page';
    page.className = 'page';
    page.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('cases')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2><i class="fas fa-users"></i> المواطنين</h2>
        </div>

        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input 
                    type="text" 
                    id="players-search" 
                    placeholder="ابحث بالاسم أو رقم الهوية..."
                    oninput="filterPlayers(this.value)"
                >
            </div>
        </div>

        <div class="players-grid"></div>

        <style>
            .search-container {
                padding: 20px 25px 0;
            }

            .search-box {
                position: relative;
                max-width: 600px;
                margin: 0 auto;
            }

            .search-box i {
                position: absolute;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: rgba(255, 255, 255, 0.5);
                font-size: 1.1em;
            }

            .search-box input {
                width: 100%;
                padding: 12px 45px;
                background: rgba(31, 41, 55, 0.7);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                color: white;
                font-size: 1em;
                transition: all 0.3s ease;
            }

            .search-box input:focus {
                background: rgba(31, 41, 55, 0.9);
                border-color: rgba(var(--primary-color-rgb), 0.5);
                outline: none;
                box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
            }

            .search-box input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            .no-results {
                text-align: center;
                padding: 40px;
                color: rgba(255, 255, 255, 0.7);
                font-size: 1.1em;
            }
        </style>
    `;
    
    document.querySelector('.main-content').appendChild(page);
    loadPlayers();
    showPage('players');
}

// تخزين البيانات الأصلية
let allPlayersData = [];

function loadPlayers() {
    const playersGrid = document.querySelector('.players-grid');
    playersGrid.innerHTML = '<div class="loading">جاري تحميل قائمة المواطنين...</div>';

    fetch(`https://${GetParentResourceName()}/getPlayers`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.success && data.players && data.players.length > 0) {
            // تخزين البيانات الأصلية
            allPlayersData = data.players;
            renderPlayers(data.players);
        } else {
            playersGrid.innerHTML = '<div class="no-results">لم يتم العثور على مواطنين</div>';
        }
    })
    .catch(error => {
        console.error('Error loading players:', error);
        playersGrid.innerHTML = '<div class="error">حدث خطأ أثناء تحميل ق��ئمة المواطنين</div>';
    });
}

function filterPlayers(searchTerm) {
    if (!allPlayersData.length) return;

    searchTerm = searchTerm.toLowerCase().trim();
    const filteredPlayers = searchTerm === '' ? allPlayersData : allPlayersData.filter(player => {
        const fullName = `${player.firstname} ${player.lastname}`.toLowerCase();
        const citizenId = player.citizenid.toLowerCase();
        const fingerprint = (player.fingerprint || '').toLowerCase();
        
        return fullName.includes(searchTerm) || 
               citizenId.includes(searchTerm) || 
               fingerprint.includes(searchTerm);
    });

    renderPlayers(filteredPlayers);
}

function renderPlayers(players) {
    const playersGrid = document.querySelector('.players-grid');
    
    if (!players || players.length === 0) {
        playersGrid.innerHTML = '<div class="no-results">لم يتم العثور على نتائج</div>';
        return;
    }

    playersGrid.innerHTML = `
        <style>
            .players-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
                gap: 25px;
                padding: 25px;
            }

            .player-card {
                background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                padding: 20px;
                transition: all 0.3s ease;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                position: relative;
                overflow: hidden;
            }

            .player-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--primary-color), transparent);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .player-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
                border-color: rgba(var(--primary-color-rgb), 0.3);
            }

            .player-card:hover::before {
                opacity: 1;
            }

            .player-info {
                margin-bottom: 20px;
            }

            .player-name {
                font-size: 1.25em;
                font-weight: 600;
                color: #fff;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .player-name i {
                color: var(--primary-color);
                font-size: 0.9em;
            }

            .player-id {
                color: rgba(255, 255, 255, 0.7);
                font-size: 0.95em;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .player-id i {
                color: rgba(var(--primary-color-rgb), 0.8);
                font-size: 0.9em;
            }

            .player-fingerprint {
                color: rgba(255, 255, 255, 0.7);
                font-size: 0.95em;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 8px;
            }

            .player-fingerprint i {
                color: rgba(var(--primary-color-rgb), 0.8);
                font-size: 0.9em;
            }

            .player-actions {
                display: flex;
                justify-content: flex-end;
                padding-top: 15px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }

            .add-case-btn {
                background: var(--primary-color);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 0.95em;
                font-weight: 500;
            }

            .add-case-btn i {
                font-size: 0.9em;
            }

            .add-case-btn:hover {
                background: var(--primary-color-dark);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .loading, .no-results, .error {
                text-align: center;
                padding: 40px;
                color: rgba(255, 255, 255, 0.7);
                font-size: 1.1em;
            }

            .error {
                color: #ef4444;
            }
        </style>
    ` + players.map(player => `
        <div class="player-card">
            <div class="player-info">
                <div class="player-name">
                    <i class="fas fa-user-circle"></i>
                    ${player.firstname} ${player.lastname}
                </div>
                <div class="player-id">
                    <i class="fas fa-id-badge"></i>
                    ${player.citizenid}
                </div>
                ${player.fingerprint ? `
                    <div class="player-fingerprint">
                        <i class="fas fa-fingerprint"></i>
                        ${player.fingerprint}
                    </div>
                ` : ''}
            </div>
            <div class="player-actions">
                <button class="add-case-btn" onclick="createAddCasePage('${player.citizenid}', '${player.firstname} ${player.lastname}')">
                    <i class="fas fa-folder-plus"></i>
                    إضافة قضية
                </button>
            </div>
        </div>
    `).join('');
}

// تحديث قائمة المطلوبين
function updateWantedList() {
    fetch(`https://${GetParentResourceName()}/getWantedList`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    })
    .then(resp => resp.json())
    .then(data => {
        if (data.success) {
            displayWantedList(data.wanted);
        }
    });
}

// عرض قائمة المطلوبين
function displayWantedList(wanted) {
    const wantedList = document.querySelector('.wanted-list');
    if (!wantedList) return;

    if (!wanted || wanted.length === 0) {
        wantedList.innerHTML = '<div class="no-results">لا يوجد مطلوبين حالياً</div>';
        return;
    }

    // تجميع القضايا حسب المتهم
    const groupedWanted = wanted.reduce((acc, person) => {
        if (!acc[person.citizenid]) {
            acc[person.citizenid] = {
                name: person.name,
                citizenid: person.citizenid,
                cases: [],
                total_fines: 0,
                total_jail_time: 0
            };
        }
        acc[person.citizenid].cases.push(person);
        acc[person.citizenid].total_fines += parseInt(person.total_fines);
        acc[person.citizenid].total_jail_time += parseInt(person.jail_time);
        return acc;
    }, {});

    wantedList.innerHTML = Object.values(groupedWanted).map(person => `
        <div class="wanted-card">
            <div class="wanted-header">
                <div class="wanted-name">
                    <i class="fas fa-user-circle"></i>
                    ${person.name}
                </div>
                <div class="wanted-total">
                    ${person.cases.length} قضية
                </div>
            </div>
            <div class="wanted-details">
                <div class="wanted-summary">
                    <div class="summary-item">
                        <span class="summary-label">إجمالي الغرامات</span>
                        <span class="summary-value">$${person.total_fines.toLocaleString()}</span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">إجمالي مدة السجن</span>
                        <span class="summary-value">${person.total_jail_time} شهر</span>
                    </div>
                </div>
                <div class="wanted-charges">
                    <div class="charges-title">
                        <i class="fas fa-exclamation-circle"></i>
                        التهم
                    </div>
                    ${person.cases.flatMap(c => c.charges).map(charge => `
                        <div class="wanted-charge">
                            <i class="fas fa-circle"></i>
                            ${charge}
                        </div>
                    `).join('')}
                </div>
            </div>
            <div class="wanted-footer">
                <div class="wanted-date">
                    <i class="fas fa-clock"></i>
                    آخر تحديث: ${person.cases[0].created_at}
                </div>
                <div class="wanted-actions">
                    <button class="wanted-btn" onclick="handlePersonAction('${person.citizenid}', '${person.name}')">
                        <i class="fas fa-user"></i>
                        عرض الملف
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

// تحديث القائمة عند فتح صفحة المطلوبين
document.querySelector('.menu-item[data-page="wanted"]').addEventListener('click', function() {
    updateWantedList();
});

// دالة عرض الملف الشخصي
function viewProfile(citizenid) {
    // حفظ citizenid في متغير مؤقت
    currentProfileCitizenId = citizenid;
    
    // إنشاء صفحة الملف الشخصي
    const page = document.createElement('div');
    page.id = 'profile-page';
    page.className = 'page';
    page.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="showPage('wanted')">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2><i class="fas fa-user-circle"></i> الملف الشخصي</h2>
        </div>
        <div class="profile-content">
            <div class="loading">جاري تحميل البيانات...</div>
        </div>
    `;
    
    // إضافة الصفحة للمحتوى الرئيسي
    document.querySelector('.main-content').appendChild(page);
    
    // تحميل بيانات الملف الشخصي
    fetch(`https://${GetParentResourceName()}/getPersonDetails`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            citizenid: citizenid
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            document.querySelector('.profile-content').innerHTML = `
                <div class="error-message">
                    <i class="fas fa-exclamation-circle"></i>
                    ${data.message || 'حدث خطأ أثناء تحميل البيانات'}
                </div>
            `;
            return;
        }
        
        // عرض البيانات
        displayProfile(data);
    })
    .catch(error => {
        console.error('Error loading profile:', error);
        document.querySelector('.profile-content').innerHTML = `
            <div class="error-message">
                <i class="fas fa-exclamation-circle"></i>
                حدث خطأ أثناء تحميل البيانات
            </div>
        `;
    });
    
    // الانتقال إلى صفحة الملف الشخصي
    showPage('profile');
}

// دالة عرض بيانات الملف الشخصي
function displayProfile(data) {
    const profileContent = document.querySelector('.profile-content');
    
    profileContent.innerHTML = `
        <div class="profile-grid">
            <div class="profile-card personal-info">
                <div class="card-header">
                    <i class="fas fa-user"></i>
                    المعلومات الشخصية
                </div>
                <div class="card-content">
                    <div class="info-item">
                        <span class="label">الاسم</span>
                        <span class="value">${data.name}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">رقم الهوية</span>
                        <span class="value">${data.citizenid}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">رقم الهاتف</span>
                        <span class="value">${data.phone || 'غير متوفر'}</span>
                    </div>
                </div>
            </div>

            <div class="profile-card criminal-record">
                <div class="card-header">
                    <i class="fas fa-exclamation-circle"></i>
                    السجل الجنائي
                </div>
                <div class="card-content">
                    ${data.criminal_record && data.criminal_record.length > 0 ? `
                        <div class="cases-list">
                            ${data.criminal_record.map(record => `
                                <div class="case-item">
                                    <div class="case-header">
                                        <span class="case-title">${record.title}</span>
                                        <span class="case-date">${record.created_at}</span>
                                    </div>
                                    <div class="case-details">
                                        <div class="case-info">
                                            <span class="info-label">الغرامة:</span>
                                            <span class="info-value">$${record.fine.toLocaleString()}</span>
                                        </div>
                                        <div class="case-info">
                                            <span class="info-label">مدة السجن:</span>
                                            <span class="info-value">${record.jail_time} شهر</span>
                                        </div>
                                    </div>
                                    <div class="case-description">${record.description}</div>
                                </div>
                            `).join('')}
                        </div>
                    ` : '<div class="no-records">لا يوجد سجل جنائي</div>'}
                </div>
            </div>

            <div class="profile-card vehicles">
                <div class="card-header">
                    <i class="fas fa-car"></i>
                    المركبات المسجلة
                </div>
                <div class="card-content">
                    ${data.vehicles && data.vehicles.length > 0 ? `
                        <div class="vehicles-list">
                            ${data.vehicles.map(vehicle => `
                                <div class="vehicle-item">
                                    <div class="vehicle-info">
                                        <span class="vehicle-model">${vehicle.model}</span>
                                        <span class="vehicle-plate">${vehicle.plate}</span>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    ` : '<div class="no-vehicles">لا توجد مركبات مسجلة</div>'}
                </div>
            </div>
        </div>
    `;
}

// تأكد من أن هذه الدالة موجودة في نفس النطاق مع باقي الدوال
function showCasesSummary(fullName, casesData) {
    console.log("تم استدعاء showCasesSummary", { fullName, casesData }); // للتأكد من وصول البيانات

    const pendingCases = casesData.filter(c => !c.is_executed);
    const totalJailTime = pendingCases.reduce((sum, c) => sum + (parseInt(c.jail_time) || 0), 0);
    const totalFines = pendingCases.reduce((sum, c) => sum + (parseInt(c.total_fines) || 0), 0);
    
    // تجميع التهم
    const allCharges = {};
    pendingCases.forEach(c => {
        if (c.charges) {
            c.charges.forEach(charge => {
                allCharges[charge] = (allCharges[charge] || 0) + 1;
            });
        }
    });

    // إنشاء صفحة الملخص
    let summaryPage = document.getElementById('cases-summary-page');
    if (!summaryPage) {
        summaryPage = document.createElement('div');
        summaryPage.id = 'cases-summary-page';
        summaryPage.className = 'page';
    }

    summaryPage.innerHTML = `
        <div class="page-header">
            <button class="back-btn" onclick="backToHistory()">
                <i class="fas fa-arrow-left"></i>
                رجوع
            </button>
            <h2>
                <i class="fas fa-chart-pie"></i>
                ملخص قضايا الغير منفذه لدى ${fullName}
            </h2>
        </div>

        <div class="summary-container">
            <div class="summary-cards">
                <div class="summary-card">
                    <div class="card-icon">
                        <i class="fas fa-gavel"></i>
                    </div>
                    <div class="card-content">
                        <h3>إجمالي مدة السجن</h3>
                        <span class="card-value">${totalJailTime} شهر</span>
                    </div>
                </div>

                <div class="summary-card">
                    <div class="card-icon">
                        <i class="fas fa-money-bill"></i>
                    </div>
                    <div class="card-content">
                        <h3>إجمالي الغرامات</h3>
                        <span class="card-value">$${totalFines.toLocaleString()}</span>
                    </div>
                </div>

                <div class="summary-card">
                    <div class="card-icon">
                        <i class="fas fa-exclamation-circle"></i>
                    </div>
                    <div class="card-content">
                        <h3>القضايا غير المنفذة</h3>
                        <span class="card-value">${pendingCases.length}</span>
                    </div>
                </div>
            </div>

            <div class="charges-summary">
                <h3>
                    <i class="fas fa-list"></i>
                    ملخص التهم
                </h3>
                <div class="charges-grid">
                    ${Object.entries(allCharges).map(([charge, count]) => `
                        <div class="charge-item">
                            <span class="charge-name">${charge}</span>
                            <span class="charge-count">${count}</span>
                        </div>
                    `).join('')}
                </div>
            </div>

            ${pendingCases.length > 0 ? `
                <div class="execute-all-section">
                    <button class="execute-all-btn" onclick="executeAllCases('${fullName}', ${JSON.stringify(pendingCases.map(c => c.id))})">
                        <i class="fas fa-check-double"></i>
                        تنفيذ جميع القضايا
                    </button>
                    <span class="warning-text">
                        <i class="fas fa-exclamation-triangle"></i>
                        تحذير: هذا الإجراء لا يمكن التراجع عنه
                    </span>
                </div>
            ` : ''}
        </div>
    `;

    // إخفاء الصفحة السابقة
    document.querySelectorAll('.page').forEach(page => {
        page.style.display = 'none';
    });

    // إضافة الصفحة للـ DOM وإظهارها
    const mainContent = document.querySelector('.main-content');
    if (!document.getElementById('cases-summary-page')) {
        mainContent.appendChild(summaryPage);
    }
    summaryPage.style.display = 'block';

    // تحسين الأنماط
    const style = document.createElement('style');
    style.textContent = `
        #cases-summary-page {
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            padding-bottom: 100px;
        }

        .summary-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .summary-card {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 25px;
            display: flex;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .summary-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.2);
        }

        .card-icon {
            width: 70px;
            height: 70px;
            background: rgba(var(--primary-color-rgb), 0.15);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        .summary-card:hover .card-icon {
            transform: scale(1.1);
        }

        .card-icon i {
            font-size: 28px;
            color: var(--primary-color);
        }

        .card-content h3 {
            color: var(--text-secondary);
            font-size: 1em;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .card-value {
            font-size: 1.8em;
            font-weight: bold;
            color: var(--text-color);
            display: block;
        }

        .charges-summary {
            background: var(--surface-color);
            border-radius: var(--border-radius);
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .charges-summary h3 {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 25px;
            color: var(--text-color);
            font-size: 1.3em;
        }

        .charges-summary h3 i {
            color: var(--primary-color);
        }

        .charges-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .charge-item {
            background: rgba(0, 0, 0, 0.2);
            padding: 18px 20px;
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s ease, background-color 0.3s ease;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .charge-item:hover {
            transform: translateY(-3px);
            background: rgba(0, 0, 0, 0.3);
        }

        .charge-name {
            color: var(--text-color);
            font-size: 1em;
            flex: 1;
            margin-right: 15px;
        }

        .charge-count {
            background: var(--primary-color);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 500;
            min-width: 35px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.3);
        }

        .execute-all-section {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .execute-all-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: var(--border-radius);
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
            min-width: 180px;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .execute-all-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                45deg,
                rgba(255,255,255,0.1) 0%,
                rgba(255,255,255,0.2) 50%,
                rgba(255,255,255,0.1) 100%
            );
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .execute-all-btn:hover::before {
            transform: translateX(100%);
        }

        .execute-all-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.4);
        }

        .execute-all-btn:active {
            transform: translateY(0);
        }

        .execute-all-btn i {
            font-size: 1.1em;
        }

        .warning-text {
            color: #ffa726;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
            opacity: 0.9;
            padding: 8px 15px;
            border-radius: var(--border-radius);
        }

        .warning-text i {
            font-size: 1.1em;
            color: #ffa726;
        }

        @media (max-width: 768px) {
            .execute-all-section {
                flex-direction: column;
                padding: 15px;
                gap: 15px;
            }

            .execute-all-btn {
                width: 100%;
                padding: 15px;
            }

            .warning-text {
                width: 100%;
                justify-content: center;
                text-align: center;
                padding: 10px;
            }
        }
    `;

    // حذف أي نمط سابق لنفس الصفحة
    const oldStyle = document.getElementById('summary-page-style');
    if (oldStyle) {
        oldStyle.remove();
    }

    // إضافة معرف للنمط الجديد
    style.id = 'summary-page-style';
    document.head.appendChild(style);
}

// دالة الرجوع
function backToHistory() {
    document.getElementById('cases-summary-page').style.display = 'none';
    document.getElementById('person-history-page').style.display = 'block';
}

// دالة تنفيذ جميع القضايا
function executeAllCases(fullName, caseIds) {
    const overlay = document.createElement('div');
    overlay.className = 'confirm-overlay';
    
    const popup = document.createElement('div');
    popup.className = 'confirm-popup';
    popup.innerHTML = `
        <div class="confirm-popup-title">
            <i class="fas fa-exclamation-triangle"></i>
            تأكيد تنفيذ القضايا
        </div>
        <div class="confirm-popup-content">
            هل أنت متأكد من تنفيذ جميع القضايا لـ ${fullName}؟
            <br>
            <small style="color: var(--warning-color); display: block; margin-top: 10px;">
                <i class="fas fa-info-circle"></i>
                هذا الإجراء لا يمكن التراجع عنه
            </small>
        </div>
        <div class="confirm-popup-buttons">
            <button class="confirm-btn confirm" onclick="confirmExecuteAll('${fullName}', ${JSON.stringify(caseIds)})">
                <i class="fas fa-check"></i>
                تنفيذ
            </button>
            <button class="confirm-btn cancel" onclick="closeConfirmPopup()">
                <i class="fas fa-times"></i>
                إلغاء
            </button>
        </div>
    `;

    document.body.appendChild(overlay);
    document.body.appendChild(popup);
}

// دالة إغلاق النافذة المنبثقة
function closeConfirmPopup() {
    document.querySelector('.confirm-overlay')?.remove();
    document.querySelector('.confirm-popup')?.remove();
}

// دالة تأكيد التنفيذ
function confirmExecuteAll(fullName, caseIds) {
    fetch(`https://${GetParentResourceName()}/executeAllCases`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ caseIds: caseIds })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // تحديث الصفحة
            window.currentPersonCases = window.currentPersonCases.map(c => {
                if (caseIds.includes(c.id)) {
                    c.is_executed = true;
                }
                return c;
            });
            // إغلاق النافذة المنبثقة
            closeConfirmPopup();
            // العودة لصفحة السجل
            backToHistory();
        }
    });
}

// تحديث أنماط النافذة المنبثقة

// تحديث HTML النافذة المنبثقة
function executeAllCases(fullName, caseIds) {
    const overlay = document.createElement('div');
    overlay.className = 'confirm-overlay';
    
    const popup = document.createElement('div');
    popup.className = 'confirm-popup';
    popup.innerHTML = `
        <div class="confirm-popup-title">
            <i class="fas fa-exclamation-triangle"></i>
            تأكيد تنفيذ القضايا
        </div>
        <div class="confirm-popup-content">
            هل أنت متأكد من تنفيذ جميع القضايا لـ ${fullName}؟
            <br>
            <small style="color: var(--warning-color); display: block; margin-top: 10px;">
                <i class="fas fa-info-circle"></i>
                هذا الإجراء لا يمكن التراجع عنه
            </small>
        </div>
        <div class="confirm-popup-buttons">
            <button class="confirm-btn confirm" onclick="confirmExecuteAll('${fullName}', ${JSON.stringify(caseIds)})">
                <i class="fas fa-check"></i>
                تنفيذ
            </button>
            <button class="confirm-btn cancel" onclick="closeConfirmPopup()">
                <i class="fas fa-times"></i>
                إلغاء
            </button>
        </div>
    `;

    document.body.appendChild(overlay);
    document.body.appendChild(popup);
}