<!DOCTYPE html>
<html dir="rtl" lang="ar">

<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#ff0000">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>غرفة العمليات | لوحة التحكم</title>
    <link rel="shortcut icon" href="https://www.raed.net/img?id=1153063" type="image/x-icon">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>
        :root {
            --primary-color: #ff0000;
            --secondary-color: #000000;
            --text-color: #ffffff;
            --card-bg: #000000;
            --hover-color: #cc0000;
            --border-color: #3d3d3d;
            --success-color: #4CAF50;
            --warning-color: #FFC107;
            --danger-color: #dc3545;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
        }

        body {
            background-color: var(--secondary-color);
            color: var(--text-color);
            min-height: 100vh;
        }

        .dashboard-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 280px;
            background-color: var(--card-bg);
            padding: 2rem;
            position: fixed;
            height: 100vh;
            right: 0;
            border-left: 1px solid var(--border-color);
        }

        .main-content {
            flex: 1;
            margin-right: 280px;
            padding: 2rem;
        }

        .logo-container {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color);
        }

        .stat-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            color: #888;
            font-size: 0.9rem;
        }

        .charts-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .chart-card {
            background: var(--card-bg);
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .chart-card:hover {
            border: 1px solid var(--primary-color);
            transform: translateY(-5px);
        }

        .menu-list {
            list-style: none;
        }

        .menu-item {
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
        }

        .menu-item:hover {
            color: var(--primary-color);
            transform: translateY(-5px);
        }

        .menu-item.active {
            background: var(--primary-color);
        }

        .menu-item.active:hover {
            color: var(--text-color);
        }

        .menu-item i {
            font-size: 1.2rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-color);
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

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

        .btn-primary:hover {
            background: var(--hover-color);
        }

        /* جزء الجداول */
        .table-container {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 1rem;
            text-align: right;
            border-bottom: 1px solid var(--border-color);
        }

        th {
            font-weight: 600;
            color: var(--primary-color);
        }

        tr:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        /* تأثيرات التحميل */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--card-bg);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="dashboard-container">
        <!-- القائمة الجانبية -->
        <aside class="sidebar">
            <div class="logo-container">
                <div class="logo">غرفة العمليات</div>
            </div>
            <ul class="menu-list">
                <li class="menu-item active" data-section="dashboard">
                    <i class="fas fa-home"></i>
                    <span>الرئيسية</span>
                </li>
                <li class="menu-item" data-section="users">
                    <i class="fas fa-users"></i>
                    <span>المستخدمين</span>
                </li>
                <li class="menu-item" data-section="team">
                    <i class="fas fa-user-shield"></i>
                    <span>الفريق</span>
                </li>
                <li class="menu-item" data-section="blacklist">
                    <i class="fas fa-ban"></i>
                    <span>القائمة السوداء</span>
                </li>
                <li class="menu-item" data-section="products">
                    <i class="fas fa-shopping-cart"></i>
                    <span>المنتجات</span>
                </li>
                <li class="menu-item" data-section="purchases">
                    <i class="fas fa-receipt"></i>
                    <span>المشتريات</span>
                </li>
                <li class="menu-item" data-section="/key-management" onclick="window.location.href='/key-management'">
                    <i class="fa-solid fa-key"></i>
                    <span>إدارة التراخيص</span>
                </li>                
            </ul>
        </aside>

        <!-- المحتوى الرئيسي -->
        <main class="main-content">
            <!-- قسم الإحصائيات -->
            <div class="stats-grid">
                <div class="stat-card">
                    <i class="fas fa-users stat-icon"></i>
                    <div class="stat-value">1,234</div>
                    <div class="stat-label">إجمالي المستخدمين</div>
                </div>

                <div class="stat-card">
                    <i class="fas fa-user-shield stat-icon"></i>
                    <div class="stat-value">45</div>
                    <div class="stat-label">أعضاء الفريق</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-ban stat-icon"></i>
                    <div class="stat-value">23</div>
                    <div class="stat-label">القائمة السوداء</div>
                </div>
                <div class="stat-card">
                    <i class="fas fa-shopping-cart stat-icon"></i>
                    <div class="stat-value">789</div>
                    <div class="stat-label">إجمالي المبيعات</div>
                </div>
            </div>

            <!-- قسم الرسوم البيانية -->
            <div class="charts-container">
                <div class="chart-card">
                    <h3>إحصائيات المستخدمين</h3>
                    <canvas id="usersChart"></canvas>
                </div>
                <div class="chart-card">
                    <h3>المبيعات الشهرية</h3>
                    <canvas id="salesChart"></canvas>
                </div>
            </div>

            <!-- الأقسام المختلفة -->
            <div id="dashboard-section" class="section active">
                <!-- محتوى لوحة التحكم الرئيسية -->
            </div>

            <div id="users-section" class="section">
                <div class="section-header">
                    <h2 class="section-title">إدارة المستخدمين</h2>
                    <div class="action-buttons">
                        <button class="btn btn-primary" onclick="openModal('addUserModal')">
                            <i class="fas fa-plus"></i>
                            إضافة مستخدم
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table id="usersTable">
                        <thead>
                            <tr>
                                <th>الصورة</th>
                                <th>اسم المستخدم</th>
                                <th>نوع الحساب</th>
                                <th>تاريخ الانضمام</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- سيتم ملؤها بواسطة JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- باقي الأقسام بنفس النمط -->
        </main>
    </div>

    <!-- النوافذ المنبثقة -->
    <div id="addUserModal" class="modal">
        <div class="modal-content">
            <h2>إضافة مستخدم جديد</h2>
            <form id="addUserForm">
                <div class="form-group">
                    <label>اسم المستخدم</label>
                    <input type="text" name="username" class="form-input" required>
                </div>
                <div class="form-group">
                    <label>نوع الحساب</label>
                    <select name="accountType" class="form-input" required>
                        <option value="user">مستخدم عادي</option>
                        <option value="admin">مدير</option>
                        <option value="moderator">مشرف</option>
                    </select>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">إضافة</button>
                    <button type="button" class="btn btn-secondary" onclick="closeModal('addUserModal')">إلغاء</button>
                </div>
            </form>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // إعداد الرسوم البيانية
        const setupCharts = () => {
            // رسم بياني للمستخدمين
            const usersCtx = document.getElementById('usersChart').getContext('2d');
            new Chart(usersCtx, {
                type: 'line',
                data: {
                    labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
                    datasets: [{
                        label: 'المستخدمين الجدد',
                        data: [65, 59, 80, 81, 56, 100],
                        borderColor: '#ff0000',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });

            // رسم بياني للمبيعات
            const salesCtx = document.getElementById('salesChart').getContext('2d');
            new Chart(salesCtx, {
                type: 'bar',
                data: {
                    labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
                    datasets: [{
                        label: 'المبيعات',
                        data: [12, 19, 3, 5, 2, 10],
                        backgroundColor: '#ff0000'
                    }]
                },
                options: {
                    responsive: true
                }
            });
        };

        // تهيئة الصفحة
        document.addEventListener('DOMContentLoaded', () => {
            setupCharts();
            loadData();
        });


        // إدارة القائمة
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', () => {
                // إزالة الفئة النشطة من جميع العناصر
                document.querySelectorAll('.menu-item').forEach(i => i.classList.remove('active'));
                // إضافة الفئة النشطة للعنصر المحدد
                item.classList.add('active');

                // إخفاء جميع الأقسام
                document.querySelectorAll('.section').forEach(section => {
                    section.style.display = 'none';
                });

                // إظهار القسم المحدد
                const sectionId = item.dataset.section;
                document.getElementById(`${sectionId}-section`).style.display = 'block';
            });
        });

        // وظائف النوافذ المنبثقة
        function openModal(modalId) {
            document.getElementById(modalId).style.display = 'flex';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // معالجة النماذج
        const handleFormSubmit = async (event, endpoint, method = 'POST') => {
            event.preventDefault();
            const form = event.target;
            const submitButton = form.querySelector('button[type="submit"]');

            try {
                submitButton.disabled = true;
                const formData = new FormData(form);
                const response = await fetch(endpoint, {
                    method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(Object.fromEntries(formData))
                });

                const data = await response.json();
                if (response.ok) {
                    alert('تمت العملية بنجاح');
                    form.reset();
                    closeModal(form.closest('.modal').id);
                    loadData();
                } else {
                    throw new Error(data.message);
                }
            } catch (error) {
                alert(`حدث خطأ: ${error.message}`);
            } finally {
                submitButton.disabled = false;
            }
        };

        // تحميل البيانات
        async function loadData() {
            try {
                const response = await fetch('/api/data');
                const data = await response.json();
                updateTables(data);
                updateStats(data);
            } catch (error) {
                console.error('Error loading data:', error);
            }
        }

        // تحديث الإحصائيات
        function updateStats(data) {
            // تحديث أرقام الإحصائيات
            document.querySelectorAll('.stat-value').forEach(stat => {
                const key = stat.dataset.stat;
                if (data[key]) {
                    stat.textContent = data[key].toLocaleString('ar-SA');
                }
            });
        }

        // تحديث الجداول
        function updateTables(data) {
            // تحديث جدول المستخدمين
            const usersTable = document.querySelector('#usersTable tbody');
            if (data.users) {
                usersTable.innerHTML = data.users.map(user => `
            <tr>
                <td><img src="${user.avatar}" alt="${user.username}" class="user-avatar"></td>
                <td>${user.username}</td>
                <td>${user.accountType}</td>
                <td>${new Date(user.joinDate).toLocaleDateString('ar-SA')}</td>
                <td>
                    <button onclick="editUser('${user.id}')" class="btn-icon">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button onclick="deleteUser('${user.id}')" class="btn-icon">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `).join('');
            }
        }
    </script>



</body>

</html>