<?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 for beautiful Arabic Typography -->
    <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">
    <script src="js/auth.js"></script>
    <style>
        /* ===== Materials Cards Grid Layout ===== */
        .materials-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            padding: 12px 0 24px 0;
            width: 100%;
        }
        
        .material-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 20px;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 14px;
            overflow: hidden;
            cursor: pointer;
        }
        
        .material-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary);
        }
        
        .material-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .material-avatar-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .material-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            transition: var(--transition);
        }
        
        .material-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .material-serial-badge {
            font-size: 11px;
            font-weight: 700;
            background: var(--bg-input);
            color: var(--text-secondary);
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            direction: ltr;
        }
        
        .material-card-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 14px 0;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }
        
        .info-label {
            color: var(--text-secondary);
        }
        
        .info-value {
            font-weight: 700;
            color: var(--text-primary);
        }

        .badge-qty {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
        }
        .badge-weight {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
        }

        /* ===== Print Media Styles ===== */
        @media print {
            .sidebar, .header, #export-excel-btn, #print-report-btn, #refresh-btn,
            .btn, #search-input, #search-clear-btn, .entries-selector, .table-footer,
            .toast-container, .modal-overlay {
                display: none !important;
            }
            .app-container {
                display: block !important;
            }
            .main-content {
                margin: 0 !important;
                padding: 0 !important;
            }
            .dashboard-body {
                padding: 0 !important;
            }
            .welcome-banner {
                background: none !important;
                color: #000 !important;
                padding: 10px 0 !important;
                border-bottom: 2px solid #000;
            }
            .welcome-banner h1, .welcome-banner p {
                color: #000 !important;
            }
            .material-card {
                break-inside: avoid;
                border: 1px solid #ccc !important;
                box-shadow: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
$pageTitle = "كشف المواد";
$pageIcon = "fa-clipboard-list";
include 'includes/header.php';
?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Dashboard Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                    <div class="welcome-text">
                        <h1 id="welcome-title">كشف وحركات المواد المسجلة 📋</h1>
                        <p id="welcome-desc">تتبع تفاصيل مبيعات المواد والكميات والأوزان الإجمالية المباعة، مع إمكانية عرض تفاصيل حركات كل مادة وزبائنها.</p>
                    </div>
                </div>

                <!-- Stats Cards Section -->
                <section class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper blue" style="background-color: rgba(79, 70, 229, 0.1); color: #4f46e5;">
                            <i class="fa-solid fa-boxes-stacked"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-materials">0</h3>
                            <p>إجمالي المواد</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper green">
                            <i class="fa-solid fa-tags"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-qty">0</h3>
                            <p>إجمالي العدد المباع</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper purple" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-weight-hanging"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-weight">0</h3>
                            <p>إجمالي الوزن المباع (كجم)</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper gold" style="background-color: rgba(234, 179, 8, 0.1); color: #eab308;">
                            <i class="fa-solid fa-sack-dollar"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-revenue">0.00</h3>
                            <p>إجمالي الإيرادات</p>
                        </div>
                    </div>
                </section>

                <!-- Data Table Section -->
                    <div class="card-header" style="flex-wrap:wrap; gap:12px;">
                        <div class="header-title-section">
                            <h2>تفاصيل مبيعات المواد</h2>
                            <p class="subtitle" id="card-subtitle">إحصائيات إجمالية للكميات والأوزان والمبالغ لكل مادة مسجلة</p>
                        </div>
                        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                            <button id="export-excel-btn" onclick="exportMaterialsToExcel()" style="padding:8px 16px; 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:6px; font-size:13px; font-weight:700; transition:var(--transition);">
                                <i class="fa-solid fa-file-excel" style="color:#1f7244;"></i> تصدير Excel
                            </button>
                            <button id="print-report-btn" onclick="printMaterialsReport()" style="padding:8px 16px; 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:6px; font-size:13px; font-weight:700; transition:var(--transition);">
                                <i class="fa-solid fa-print"></i> طباعة الكشف
                            </button>
                            <button id="refresh-btn" style="padding:8px 16px; 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:6px; font-size:13px; font-weight:600; transition:var(--transition);">
                                <i class="fa-solid fa-rotate-right"></i> تحديث
                            </button>
                        </div>
                    </div>

                    <!-- Search bar & Filter Control Bar -->
                    <div class="filter-bar" style="flex-direction: column; gap: 10px; align-items: stretch; padding: 14px 20px;">
                        <!-- View Mode Tabs Row -->
                        <div style="display:flex; gap:8px; align-items:center; margin-bottom: 4px;">
                            <button id="btn-view-current" onclick="setViewMode('current')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:linear-gradient(135deg, #10b981 0%, #059669 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(16, 185, 129, 0.2);">
                                <i class="fa-solid fa-clock-rotate-left"></i> كشف مواد الوردية الحالية
                            </button>
                            <button id="btn-view-previous" onclick="setViewMode('previous')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color); box-shadow:none;">
                                <i class="fa-solid fa-calendar-days"></i> كشف مواد الأيام السابقة
                            </button>
                        </div>
                        <!-- Search Row -->
                        <div style="display:flex; gap:8px; align-items:center;">
                            <div style="position:relative; flex:1;">
                                <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:10px 40px 10px 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>
                            <button id="search-btn" style="padding:10px 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-search"></i> بحث
                            </button>
                            <button id="search-clear-btn" title="مسح البحث" style="padding:10px 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>
                        <!-- Entries Row -->
                        <div class="entries-selector" style="justify-content:flex-start;">
                            <span>عرض</span>
                            <select id="entries-count">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</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>

                    <!-- Cards Grid Container -->
                    <div class="materials-cards-grid" id="materials-cards-container">
                        <!-- Dynamic Material Cards will be inserted here by JavaScript -->
                    </div>

                    <!-- Empty State View -->
                    <div class="empty-state" id="empty-state-view">
                        <div class="empty-state-icon" style="background-color: rgba(79, 70, 229, 0.1); color: #4f46e5;">
                            <i class="fa-solid fa-boxes-stacked"></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 (Material Transaction Details) -->
    <div class="modal-overlay" id="details-modal">
        <div class="modal-card" style="max-width: 950px; width: 95%; max-height: 90vh;">
            <div class="modal-header">
                <h3>حركات مادة: <span id="modal-material-name" style="color: var(--primary);">---</span></h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>
            <div class="modal-body" style="max-height: calc(90vh - 140px); overflow-y: auto; padding: 20px;">
                <!-- Statistics inside the Modal -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px;">
                    <div class="stat-card" style="padding: 14px 16px; border: 1.5px solid var(--border-color); background: rgba(var(--bg-card), 0.5);">
                        <div class="stat-info">
                            <h3 id="modal-stat-count" style="font-size: 20px; font-weight: 800; color: var(--primary);">0</h3>
                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">عدد الاستمارات / الحركات</p>
                        </div>
                    </div>
                    <div class="stat-card" style="padding: 14px 16px; border: 1.5px solid var(--border-color); background: rgba(var(--bg-card), 0.5);">
                        <div class="stat-info">
                            <h3 id="modal-stat-qty" style="font-size: 20px; font-weight: 800; color: var(--text-primary);">0</h3>
                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">إجمالي العدد المباع</p>
                        </div>
                    </div>
                    <div class="stat-card" style="padding: 14px 16px; border: 1.5px solid var(--border-color); background: rgba(var(--bg-card), 0.5);">
                        <div class="stat-info">
                            <h3 id="modal-stat-weight" style="font-size: 20px; font-weight: 800; color: #f59e0b;">0</h3>
                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">إجمالي الوزن المباع (كجم)</p>
                        </div>
                    </div>
                    <div class="stat-card" style="padding: 14px 16px; border: 1.5px solid var(--border-color); background: rgba(var(--bg-card), 0.5);">
                        <div class="stat-info">
                            <h3 id="modal-stat-revenue" style="font-size: 20px; font-weight: 800; color: #059669;">0.00</h3>
                            <p style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">إجمالي الإيرادات (نقداً + دين)</p>
                        </div>
                    </div>
                </div>

                <!-- Modal Search Bar -->
                <div style="display:flex; gap:8px; align-items:center; margin-bottom: 16px;">
                    <div style="position:relative; flex:1;">
                        <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="modal-search-input"
                            placeholder="ابحث باسم الزبون، رقم الاستمارة، السعر أو التاريخ..."
                            autocomplete="off"
                            style="width:100%; padding:10px 40px 10px 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>

                <!-- Modal Table -->
                <div class="table-responsive">
                    <table class="data-table" id="modal-details-table" style="font-size: 13px;">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>رقم الاستمارة</th>
                                <th>اسم الزبون</th>
                                <th>العدد</th>
                                <th>الوزن</th>
                                <th>السعر</th>
                                <th>الإجمالي</th>
                                <th>نوع السداد</th>
                                <th>التاريخ والوقت</th>
                            </tr>
                        </thead>
                        <tbody id="modal-details-tbody">
                            <!-- Dynamic transaction rows -->
                        </tbody>
                    </table>
                </div>

                <!-- Empty State for Modal -->
                <div class="empty-state" id="modal-empty-state-view" style="display: none; padding: 30px;">
                    <div class="empty-state-icon" style="background-color: rgba(79, 70, 229, 0.1); color: #4f46e5; width: 60px; height: 60px; font-size: 24px;">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </div>
                    <h3>لا توجد حركات مطابقة للبحث</h3>
                    <p>جرب كتابة معيار بحث آخر لعرض الحركات.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-modal-footer-btn">إغلاق</button>
            </div>
        </div>
    </div>

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

    <!-- Scripts -->
    <script src="js/materials_report.js?v=<?php echo time(); ?>"></script>
</body>
</html>

