<?php
ob_start();

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true || !isset($_SESSION['user'])) {
    header('Location: login.php');
    exit;
}
?>
<!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>
    <link rel="stylesheet" href="css/cairo.css">
    <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/auth.js?v=<?php echo time(); ?>"></script>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <main class="main-content">
            <?php
$pageTitle = "الرئيسية";
$pageIcon  = "fa-chart-pie";
include 'includes/header.php';
?>

            <div class="dashboard-body">

                <!-- Welcome Banner -->
                <div class="welcome-banner">
                    <div class="welcome-text">
                        <h1>أهلاً بك مجدداً في لوحة التحكم الرئيسية 👋</h1>
                        <p>إحصائيات الوردية الحالية محدّثة تلقائياً من قاعدة البيانات.</p>
                    </div>
                </div>

                <!-- ===== Section Title ===== -->
                <div style="margin: 10px 0 12px 0; display:flex; align-items:center; gap:10px;">
                    <div style="height:2px; flex:1; background:linear-gradient(90deg,var(--primary),transparent);"></div>
                    <span style="font-size:13px; font-weight:800; color:var(--text-secondary); white-space:nowrap; letter-spacing:0.5px;">
                        <i class="fa-solid fa-chart-bar" style="margin-left:6px; color:var(--primary);"></i>إحصائيات الوردية الحالية
                    </span>
                    <div style="height:2px; flex:1; background:linear-gradient(270deg,var(--primary),transparent);"></div>
                </div>

                <!-- ===== Stats Grid — 13 Cards ===== -->
                <section class="stats-grid">

                    <!-- 1. النقدي -->
                    <div class="stat-card" id="card-cash-stats" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(16,185,129,0.12); color:#10b981;">
                            <i class="fa-solid fa-sack-dollar"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-cash">0</h3>
                            <p>النقدي (الخزائن)</p>
                        </div>
                    </div>

                    <!-- 2. الديون الكلية -->
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(239,68,68,0.12); color:#ef4444;">
                            <i class="fa-solid fa-file-invoice-dollar"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-debts">0</h3>
                            <p>الديون الكلية</p>
                        </div>
                    </div>

                    <!-- 2.5 ديون اليوم (الاستمارات) -->
                    <div class="stat-card" id="card-shift-debts" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(220,38,38,0.12); color:#dc2626;">
                            <i class="fa-solid fa-file-invoice"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-shift-debts">0</h3>
                            <p>ديون اليوم (الاستمارات)</p>
                        </div>
                    </div>

                    <!-- 3. استلام الديون السابقة -->
                    <div class="stat-card" id="card-repayments-stats" style="cursor: pointer;" onclick="window.location.href='debts.php'" title="الانتقال إلى صفحة إدارة واستلام الديون">
                        <div class="stat-icon-wrapper" style="background:rgba(245,158,11,0.12); color:#f59e0b;">
                            <i class="fa-solid fa-hand-holding-dollar"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-repayments">0</h3>
                            <p>استلام الديون السابقة</p>
                        </div>
                    </div>

                    <!-- 4. الاستمارات الكلية -->
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(59,130,246,0.12); color:#3b82f6;">
                            <i class="fa-solid fa-file-signature"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-forms-total" style="color:#3b82f6;">0</h3>
                            <p>الاستمارات الكلية</p>
                        </div>
                    </div>

                    <!-- 5. الاستمارات النشطة -->
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(16,185,129,0.12); color:#10b981;">
                            <i class="fa-solid fa-circle-check"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-active-forms" style="color:#10b981;">0</h3>
                            <p>الاستمارات النشطة</p>
                        </div>
                    </div>

                    <!-- 6. الاستمارات غير النشطة -->
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(100,116,139,0.12); color:#64748b;">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-inactive-forms" style="color:#64748b;">0</h3>
                            <p>الاستمارات غير النشطة</p>
                        </div>
                    </div>

                    <!-- 7. حق العامل -->
                    <div class="stat-card" id="card-worker-share" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(99,102,241,0.12); color:#6366f1;">
                            <i class="fa-solid fa-hard-hat"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-worker-shift" style="color:#6366f1;">0</h3>
                            <p>حق العامل</p>
                        </div>
                    </div>

                    <!-- 8. المبياع -->
                    <div class="stat-card" id="card-sales" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(16,185,129,0.12); color:#10b981;">
                            <i class="fa-solid fa-tags"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-sales" style="color:#10b981;">0</h3>
                            <p>المبياع</p>
                        </div>
                    </div>


                    <!-- 10. عمولة 10% -->
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(217,119,6,0.12); color:#d97706;">
                            <i class="fa-solid fa-percent"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-commission-10">0</h3>
                            <p>عمولة 10%</p>
                        </div>
                    </div>



                    <!-- 12. أكياس -->
                    <div class="stat-card" id="card-bags" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(245,158,11,0.12); color:#f59e0b;">
                            <i class="fa-solid fa-bag-shopping"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-bags" style="color:#f59e0b;">0</h3>
                            <p>أكياس</p>
                        </div>
                    </div>

                    <!-- 13. بلا -->
                    <div class="stat-card" id="card-bala" style="cursor: pointer;">
                        <div class="stat-icon-wrapper" style="background:rgba(168,85,247,0.12); color:#a855f7;">
                            <i class="fa-solid fa-layer-group"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-bala" style="color:#a855f7;">0</h3>
                            <p>بلا</p>
                        </div>
                    </div>

                </section>

            </div>
        </main>
    </div>

    <!-- Worker Share Breakdown Modal -->
    <div class="modal-overlay" id="worker-share-modal">
        <div class="modal-card" style="max-width: 500px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-hard-hat" style="margin-left: 8px; color: var(--primary);"></i>تفاصيل مجموعات حق العامل</h3>
                <button class="modal-close-btn" id="close-worker-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div id="worker-share-groups-list" style="display:flex; flex-direction:column; gap:12px; padding:10px 0;">
                    <!-- Groups dynamically injected -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-worker-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- Sales Breakdown Modal -->
    <div class="modal-overlay" id="sales-modal">
        <div class="modal-card" style="max-width: 500px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-tags" style="margin-left: 8px; color: var(--success);"></i>تفاصيل مجموعات المبيعات</h3>
                <button class="modal-close-btn" id="close-sales-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div id="sales-groups-list" style="display:flex; flex-direction:column; gap:12px; padding:10px 0;">
                    <!-- Groups dynamically injected -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-sales-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- Bala Breakdown Modal -->
    <div class="modal-overlay" id="bala-modal">
        <div class="modal-card" style="max-width: 500px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-layer-group" style="margin-left: 8px; color: #a855f7;"></i>تفاصيل مبيعات العدد (بلا)</h3>
                <button class="modal-close-btn" id="close-bala-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div id="bala-groups-list" style="display:flex; flex-direction:column; gap:12px; padding:10px 0;">
                    <!-- Groups dynamically injected -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-bala-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- Bags Breakdown Modal -->
    <div class="modal-overlay" id="bags-modal">
        <div class="modal-card" style="max-width: 500px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-bag-shopping" style="margin-left: 8px; color: #f59e0b;"></i>تفاصيل مجموعات العمولة (أكياس)</h3>
                <button class="modal-close-btn" id="close-bags-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div id="bags-groups-list" style="display:flex; flex-direction:column; gap:12px; padding:10px 0;">
                    <!-- Groups dynamically injected -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-bags-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- Today's Cash Forms Modal -->
    <div class="modal-overlay" id="today-cash-forms-modal">
        <div class="modal-card" style="max-width: 650px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-file-signature" style="margin-left: 8px; color: var(--success);"></i>تفاصيل استمارات اليوم</h3>
                <button class="modal-close-btn" id="close-today-cash-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; text-align: right; font-size: 13px;">
                        <thead>
                            <tr style="border-bottom: 2px solid var(--border-color); color: var(--text-secondary);">
                                <th style="padding: 12px 10px; font-weight: 800;">رقم الاستمارة</th>
                                <th style="padding: 12px 10px; font-weight: 800;">اسم الزبون</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left;">المجموع الكلي</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left; color: var(--success);">المدفوع</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left; color: var(--danger);">المتبقي</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: center;">إجراء</th>
                            </tr>
                        </thead>
                        <tbody id="today-cash-list-table-body">
                            <!-- Injected dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-today-cash-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- Today's Invoices Debts Modal -->
    <div class="modal-overlay" id="today-debts-modal">
        <div class="modal-card" style="max-width: 650px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-file-invoice-dollar" style="margin-left: 8px; color: var(--danger);"></i>تفاصيل ديون الاستمارات اليوم</h3>
                <button class="modal-close-btn" id="close-today-debts-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; text-align: right; font-size: 13px;">
                        <thead>
                            <tr style="border-bottom: 2px solid var(--border-color); color: var(--text-secondary);">
                                <th style="padding: 12px 10px; font-weight: 800;">رقم الاستمارة</th>
                                <th style="padding: 12px 10px; font-weight: 800;">اسم الزبون</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left;">المجموع الكلي</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left;">المدفوع</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: left; color: var(--danger);">المتبقي</th>
                                <th style="padding: 12px 10px; font-weight: 800; text-align: center;">إجراء</th>
                            </tr>
                        </thead>
                        <tbody id="today-debts-list-table-body">
                            <!-- Injected dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-today-debts-modal-btn-footer" style="width: 100%;">إغلاق</button>
            </div>
        </div>
    </div>

    <div class="toast-container" id="toast-container"></div>
    <script src="js/app.js?v=<?php echo time(); ?>"></script>
</body>
</html>

