<?php
ob_start(); 
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لوحة التحكم | سجل تدقيق العمليات</title>
    <!-- Google Fonts: Cairo -->
    <link rel="stylesheet" href="css/cairo.css">
    <!-- Font Awesome for premium icons -->
    <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
    <!-- Styling -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Auth redirect & RBAC check -->
    <script src="js/auth.js"></script>
    <style>
        .custom-dropdown-item {
            padding: 9px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        .custom-dropdown-item:hover {
            background: var(--primary-light);
            color: var(--primary);
        }
    </style>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
            $pageTitle = "سجل العمليات";
            $pageIcon = "fa-history";
            include 'includes/header.php';
            ?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);">
                    <div class="welcome-text">
                        <h1>سجل العمليات والرقابة الإدارية 📜</h1>
                        <p>تتبع كافة العمليات والتغييرات الحاصلة على قاعدة البيانات لضمان الشفافية ومراقبة جودة القيود المحاسبية.</p>
                    </div>
                </div>

                <!-- Stats Cards Section -->
                <section class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-history"></i>
                        </div>
                        <div class="stat-details">
                            <span class="stat-value" id="stat-total-logs">0</span>
                            <span class="stat-label">إجمالي العمليات المفلترة</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background-color: rgba(16, 185, 129, 0.1); color: #10b981;">
                            <i class="fa-solid fa-plus-circle"></i>
                        </div>
                        <div class="stat-details">
                            <span class="stat-value" id="stat-insert-logs">0</span>
                            <span class="stat-label">إدخال جديد</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-pen"></i>
                        </div>
                        <div class="stat-details">
                            <span class="stat-value" id="stat-update-logs">0</span>
                            <span class="stat-label">تعديل سجلات</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background-color: rgba(239, 68, 68, 0.1); color: #ef4444;">
                            <i class="fa-solid fa-trash"></i>
                        </div>
                        <div class="stat-details">
                            <span class="stat-value" id="stat-delete-logs">0</span>
                            <span class="stat-label">حذف سجلات</span>
                        </div>
                    </div>
                </section>

                <!-- Data Table Section -->
                <section class="table-container-card">
                    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
                        <div class="header-title-section">
                            <h2>سجل حركات النظام</h2>
                            <p class="subtitle">جدول مفصل لعرض تفاصيل التعديلات على البيانات مع توقيت العملية والموظف المسؤول</p>
                        </div>
                        <div style="display: flex; gap: 10px;">
                            <button id="btn-export-excel" onclick="exportLogsToExcel()" class="btn btn-secondary-outline" style="font-size: 13px; font-weight: 700; gap: 6px; padding: 9px 16px;">
                                <i class="fa-solid fa-file-excel" style="color: #10b981;"></i> تصدير Excel
                            </button>
                            <button id="btn-print-logs" onclick="printLogsReport()" class="btn btn-primary" style="font-size: 13px; font-weight: 700; gap: 6px; padding: 9px 16px;">
                                <i class="fa-solid fa-print"></i> طباعة التقرير
                            </button>
                        </div>
                    </div>

                    <!-- Search & Filter bar -->
                    <div class="filter-bar" style="flex-direction: column; gap: 14px; align-items: stretch; padding: 16px 20px;">
                        <div style="display:flex; gap:12px; align-items:flex-end; flex-wrap: wrap;">
                            <!-- Search -->
                            <div style="position:relative; flex:2; min-width: 220px; display:flex; flex-direction:column; gap:4px;">
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary);"><i class="fa-solid fa-magnifying-glass" style="margin-left:4px;"></i>بحث عام:</label>
                                <div style="position:relative; width:100%;">
                                    <i class="fa-solid fa-magnifying-glass" style="position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none;"></i>
                                    <input
                                        type="text"
                                        id="search-input"
                                        placeholder="ابحث بالمواظف، الزبون، المادة، أو السجل..."
                                        autocomplete="off"
                                        style="width:100%; padding:9px 40px 9px 14px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; outline:none; transition:var(--transition);"
                                        onfocus="this.style.borderColor='var(--primary)';"
                                        onblur="this.style.borderColor='var(--border-color)';"
                                    >
                                </div>
                            </div>

                            <!-- Date From -->
                            <div style="flex:1; min-width: 160px; display:flex; flex-direction:column; gap:4px;">
                                <label for="filter-from-date" style="font-size:11px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; gap:4px;">
                                    <i class="fa-regular fa-calendar" style="color:var(--primary);"></i> من تاريخ:
                                </label>
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <input 
                                        type="text" 
                                        id="filter-from-date" 
                                        placeholder="YYYY-MM-DD"
                                        readonly
                                        onclick="openCustomDatePicker('filter-from-date')"
                                        style="width:100%; padding:8px 10px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:inherit; font-size:13px; font-weight:600; outline:none; cursor:pointer; transition:var(--transition);"
                                    >
                                    <button type="button" onclick="openCustomDatePicker('filter-from-date')" title="اختر التاريخ" style="padding:8px 10px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--primary); border-radius:var(--radius-md); cursor:pointer; font-size:13px; transition:var(--transition);">
                                        <i class="fa-solid fa-calendar-days"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Date To -->
                            <div style="flex:1; min-width: 160px; display:flex; flex-direction:column; gap:4px;">
                                <label for="filter-to-date" style="font-size:11px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; gap:4px;">
                                    <i class="fa-regular fa-calendar" style="color:var(--primary);"></i> إلى تاريخ:
                                </label>
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <input 
                                        type="text" 
                                        id="filter-to-date" 
                                        placeholder="YYYY-MM-DD"
                                        readonly
                                        onclick="openCustomDatePicker('filter-to-date')"
                                        style="width:100%; padding:8px 10px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:inherit; font-size:13px; font-weight:600; outline:none; cursor:pointer; transition:var(--transition);"
                                    >
                                    <button type="button" onclick="openCustomDatePicker('filter-to-date')" title="اختر التاريخ" style="padding:8px 10px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--primary); border-radius:var(--radius-md); cursor:pointer; font-size:13px; transition:var(--transition);">
                                        <i class="fa-solid fa-calendar-days"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Custom Action Filter Dropdown -->
                            <div style="flex:1; min-width: 150px; display:flex; flex-direction:column; gap:4px; position:relative;">
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">نوع العملية:</label>
                                <div id="custom-action-dropdown-btn" onclick="toggleCustomDropdown('action')" style="width:100%; padding:9px 12px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-size:13px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; transition:var(--transition);" onmouseover="this.style.borderColor='var(--primary)';" onmouseout="this.style.borderColor='var(--border-color)';">
                                    <span id="selected-action-label">جميع العمليات</span>
                                    <i class="fa-solid fa-chevron-down" style="font-size:11px; color:var(--text-muted);"></i>
                                </div>
                                <select id="filter-action" style="display:none;">
                                    <option value="">جميع العمليات</option>
                                    <option value="insert">إضافة (Insert)</option>
                                    <option value="update">تعديل (Update)</option>
                                    <option value="delete">حذف (Delete)</option>
                                    <option value="payment">تسديد (Payment)</option>
                                </select>
                                <!-- Floating Menu -->
                                <div id="custom-action-menu" style="display:none; position:absolute; top:100%; right:0; left:0; margin-top:4px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:999; max-height:220px; overflow-y:auto; padding:4px; animation:fadeIn 0.15s ease;">
                                    <div onclick="selectCustomOption('action', '', 'جميع العمليات')" class="custom-dropdown-item"><i class="fa-solid fa-layer-group" style="margin-left:8px; color:var(--text-muted);"></i> جميع العمليات</div>
                                    <div onclick="selectCustomOption('action', 'insert', 'إضافة (Insert)')" class="custom-dropdown-item"><i class="fa-solid fa-plus-circle" style="margin-left:8px; color:var(--success);"></i> إضافة (Insert)</div>
                                    <div onclick="selectCustomOption('action', 'update', 'تعديل (Update)')" class="custom-dropdown-item"><i class="fa-solid fa-pen" style="margin-left:8px; color:var(--warning);"></i> تعديل (Update)</div>
                                    <div onclick="selectCustomOption('action', 'delete', 'حذف (Delete)')" class="custom-dropdown-item"><i class="fa-solid fa-trash" style="margin-left:8px; color:var(--danger);"></i> حذف (Delete)</div>
                                    <div onclick="selectCustomOption('action', 'payment', 'تسديد (Payment)')" class="custom-dropdown-item"><i class="fa-solid fa-credit-card" style="margin-left:8px; color:var(--primary);"></i> تسديد (Payment)</div>
                                </div>
                            </div>

                            <!-- Custom Table Filter Dropdown -->
                            <div style="flex:1; min-width: 160px; display:flex; flex-direction:column; gap:4px; position:relative;">
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">الجدول المستهدف:</label>
                                <div id="custom-table-dropdown-btn" onclick="toggleCustomDropdown('table')" style="width:100%; padding:9px 12px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-size:13px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; transition:var(--transition);" onmouseover="this.style.borderColor='var(--primary)';" onmouseout="this.style.borderColor='var(--border-color)';">
                                    <span id="selected-table-label">جميع الجداول</span>
                                    <i class="fa-solid fa-chevron-down" style="font-size:11px; color:var(--text-muted);"></i>
                                </div>
                                <select id="filter-table" style="display:none;">
                                    <option value="">جميع الجداول</option>
                                    <option value="forms">الاستمارات (forms)</option>
                                    <option value="form_items">المواد بالاستمارة (form_items)</option>
                                    <option value="safe_transactions">الحركات المالية (safe_transactions)</option>
                                    <option value="debtors">الديون والعملاء (debtors)</option>
                                    <option value="materials">المواد (materials)</option>
                                    <option value="safes">الصناديق (safes)</option>
                                    <option value="users">المستخدمين (users)</option>
                                    <option value="system_settings">الإعدادات (settings)</option>
                                </select>
                                <!-- Floating Menu -->
                                <div id="custom-table-menu" style="display:none; position:absolute; top:100%; right:0; left:0; margin-top:4px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:999; max-height:220px; overflow-y:auto; padding:4px; animation:fadeIn 0.15s ease;">
                                    <div onclick="selectCustomOption('table', '', 'جميع الجداول')" class="custom-dropdown-item"><i class="fa-solid fa-table-cells" style="margin-left:8px; color:var(--text-muted);"></i> جميع الجداول</div>
                                    <div onclick="selectCustomOption('table', 'forms', 'الاستمارات (forms)')" class="custom-dropdown-item"><i class="fa-solid fa-file-invoice" style="margin-left:8px; color:var(--primary);"></i> الاستمارات (forms)</div>
                                    <div onclick="selectCustomOption('table', 'form_items', 'المواد بالاستمارة')" class="custom-dropdown-item"><i class="fa-solid fa-box" style="margin-left:8px; color:var(--primary);"></i> المواد بالاستمارة</div>
                                    <div onclick="selectCustomOption('table', 'safe_transactions', 'الحركات المالية')" class="custom-dropdown-item"><i class="fa-solid fa-vault" style="margin-left:8px; color:var(--success);"></i> الحركات المالية</div>
                                    <div onclick="selectCustomOption('table', 'debtors', 'الديون والعملاء')" class="custom-dropdown-item"><i class="fa-solid fa-users" style="margin-left:8px; color:var(--warning);"></i> الديون والعملاء</div>
                                    <div onclick="selectCustomOption('table', 'materials', 'المواد')" class="custom-dropdown-item"><i class="fa-solid fa-boxes-stacked" style="margin-left:8px; color:var(--primary);"></i> المواد</div>
                                    <div onclick="selectCustomOption('table', 'safes', 'الصناديق')" class="custom-dropdown-item"><i class="fa-solid fa-cash-register" style="margin-left:8px; color:var(--success);"></i> الصناديق</div>
                                    <div onclick="selectCustomOption('table', 'users', 'المستخدمين')" class="custom-dropdown-item"><i class="fa-solid fa-user-shield" style="margin-left:8px; color:var(--primary);"></i> المستخدمين</div>
                                    <div onclick="selectCustomOption('table', 'system_settings', 'الإعدادات')" class="custom-dropdown-item"><i class="fa-solid fa-gear" style="margin-left:8px; color:var(--text-muted);"></i> الإعدادات</div>
                                </div>
                            </div>

                            <!-- Search & Action Buttons -->
                            <div style="display:flex; gap:6px; align-items:center;">
                                <button id="search-btn" onclick="doFilterLogs()" style="padding:9px 18px; border-radius:var(--radius-md); border:none; background:var(--gradient-primary); color:#fff; font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 2px 8px rgba(59,130,246,0.2); transition:var(--transition);" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
                                    <i class="fa-solid fa-filter"></i> تصفية
                                </button>
                                <button id="search-clear-btn" onclick="clearFiltersLogs()" title="مسح الفلاتر" style="padding:9px 12px; border-radius:var(--radius-md); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:5px; font-size:13px; transition:var(--transition);" onmouseover="this.style.borderColor='var(--danger)';this.style.color='var(--danger)'" onmouseout="this.style.borderColor='var(--border-color)';this.style.color='var(--text-secondary)'">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Limit Count -->
                        <div class="entries-selector" style="justify-content:flex-start; margin-top:0;">
                            <span>عرض</span>
                            <select id="entries-count">
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            <span>سجل عمليات</span>
                            <span id="search-results-badge" style="display:none; margin-right:12px; font-size:12px; color:var(--primary); font-weight:700; background:var(--primary-light); padding:2px 10px; border-radius:20px;"></span>
                        </div>
                    </div>

                    <!-- Table Element -->
                    <div class="table-responsive">
                        <table class="data-table" id="logs-table">
                            <thead>
                                <tr>
                                    <th style="width: 80px;">التسلسل</th>
                                    <th>الموظف المسؤول</th>
                                    <th>نوع العملية</th>
                                    <th>الجدول</th>
                                    <th style="width: 100px;">معرف السجل</th>
                                    <th>الوصف والتفاصيل</th>
                                    <th>تاريخ العملية</th>
                                    <th style="width: 100px;">الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody id="logs-tbody">
                                <!-- Dynamic rows loaded by JS -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Empty State View -->
                    <div class="empty-state" id="empty-state-view" style="display:none;">
                        <div class="empty-state-icon" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-history"></i>
                        </div>
                        <h3>لا توجد عمليات مطابقة للفلاتر</h3>
                        <p>تأكد من تعديل أو إضافة بيانات في النظام لتظهر العمليات هنا.</p>
                    </div>

                    <!-- Table Footer / Pagination -->
                    <div class="table-footer">
                        <div class="pagination-info" id="pagination-info-text">
                            يعرض 0 إلى 0 من أصل 0 سجل
                        </div>
                        <div class="pagination-controls" id="pagination-controls">
                            <!-- Pagination buttons dynamically rendered -->
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- Modal Form (Show Log Detail Comparisons) -->
    <div class="modal-overlay" id="detail-modal">
        <div class="modal-card" style="max-width: 800px; width: 95%;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-history" style="margin-left: 8px; color: var(--primary);"></i>تفاصيل عملية التدقيق الفنية</h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>
            <div class="modal-body" style="padding: 24px; max-height: 70vh; overflow-y: auto;">
                <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom: 24px; background:var(--bg-input); padding:16px; border-radius:var(--radius-md); border:1px solid var(--border-color);">
                    <div>
                        <span style="font-size:12px; color:var(--text-secondary); display:block; margin-bottom:4px;">الموظف:</span>
                        <strong id="detail-user" style="font-size:14px; color:var(--text-primary);">---</strong>
                    </div>
                    <div>
                        <span style="font-size:12px; color:var(--text-secondary); display:block; margin-bottom:4px;">نوع العملية:</span>
                        <span id="detail-action" style="font-size:13px; font-weight:700;">---</span>
                    </div>
                    <div>
                        <span style="font-size:12px; color:var(--text-secondary); display:block; margin-bottom:4px;">الجدول المستهدف:</span>
                        <strong id="detail-table" style="font-size:14px; color:var(--text-primary);">---</strong>
                    </div>
                    <div>
                        <span style="font-size:12px; color:var(--text-secondary); display:block; margin-bottom:4px;">تاريخ العملية:</span>
                        <strong id="detail-date" style="font-size:14px; color:var(--text-primary);">---</strong>
                    </div>
                </div>

                <!-- Comparison Diff Table container -->
                <div id="comparison-section">
                    <h4 style="font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:12px;"><i class="fa-solid fa-arrow-right-arrow-left" style="margin-left:6px; color:var(--primary);"></i>التعديلات بالتفصيل</h4>
                    <div class="table-responsive" style="border: 1px solid var(--border-color); border-radius:var(--radius-md);">
                        <table class="data-table" style="margin-bottom:0; width:100%; border-collapse:collapse;">
                            <thead>
                                <tr id="comparison-thead-tr">
                                    <th>الحقل المعدل</th>
                                    <th style="background:rgba(239,68,68,0.05); color:var(--danger);">القيمة السابقة (قبل)</th>
                                    <th style="background:rgba(16,185,129,0.05); color:var(--success);">القيمة الجديدة (بعد)</th>
                                </tr>
                            </thead>
                            <tbody id="comparison-tbody">
                                <!-- Comparisons injected -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Full JSON container for general actions -->
                <div id="raw-json-section" style="display:none; margin-top:20px;">
                    <h4 style="font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:12px;"><i class="fa-solid fa-code" style="margin-left:6px; color:var(--primary);"></i>تفاصيل البيانات الخام (JSON)</h4>
                    <pre id="raw-json-view" style="direction:ltr; text-align:left; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:16px; font-family:monospace; font-size:12px; overflow-x:auto; max-height:200px; color:var(--text-primary);"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-modal-footer-btn" style="width: 100%;">إغلاق وتراجع</button>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div class="toast-container" id="toast-container"></div>

    <script src="js/activity_logs.js"></script>
</body>
</html>

