<?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>
    <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>
    <style>
        /* ===== Gatherers Cards ===== */
        .gatherers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
            gap: 20px;
            padding: 12px 0 24px 0;
        }

        .gatherer-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 22px;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 16px;
            cursor: pointer;
            overflow: hidden;
        }

        .gatherer-card::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 4px; height: 100%;
            background: var(--gradient-primary);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        }

        .gatherer-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary);
        }

        .gatherer-header {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .gatherer-avatar {
            width: 50px; height: 50px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 800;
            flex-shrink: 0;
        }

        .gatherer-name {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .gatherer-phone {
            font-size: 12px;
            color: var(--text-secondary);
            direction: ltr;
            display: block;
            margin-top: 2px;
        }

        .gatherer-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .g-stat {
            background: var(--bg-input);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .g-stat-label {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .g-stat-value {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .gatherer-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }

        /* ===== Print Media Styles ===== */
        @media print {
            .sidebar, .header, #export-excel-btn, #print-report-btn, #refresh-btn,
            .btn, #search-input, #search-clear-btn,
            .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;
            }
            .gatherer-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 class="main-content">
            <?php
$pageTitle = "كشف الجلابين";
$pageIcon  = "fa-people-carry-box";
include 'includes/header.php';
?>

            <div class="dashboard-body">

                <!-- Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
                    <div class="welcome-text">
                        <h1 id="welcome-title">كشف الجلابين — الوردية الحالية 🚛</h1>
                        <p id="welcome-desc">عرض الجلابين الذين تم تسجيل مواد لهم في الوردية الحالية مع إجمالي مبيعاتهم.</p>
                    </div>
                </div>

                <!-- Stats Cards -->
                <section class="stats-grid" style="grid-template-columns: repeat(4, 1fr); gap: 16px;">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(99,102,241,0.12); color:#6366f1;">
                            <i class="fa-solid fa-people-carry-box"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-gatherers">0</h3>
                            <p>إجمالي الجلابين</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper" style="background:rgba(59,130,246,0.12); color:#3b82f6;">
                            <i class="fa-solid fa-hashtag"></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" style="background:rgba(245,158,11,0.12); 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" 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-total-revenue">0</h3>
                            <p>إجمالي الإيرادات</p>
                        </div>
                    </div>
                </section>

                <!-- Filter Bar -->
                <section class="table-container-card" style="margin-top: 16px;">
                    <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="exportGatherersToExcel()" 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="printGatherersReport()" 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>

                    <!-- View Mode Tabs -->
                    <div style="display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom: 4px; padding: 14px 20px 0; flex-wrap:wrap;">
                        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                            <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, #6366f1 0%, #4f46e5 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(99, 102, 241, 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>
                    </div>

                    <!-- Search -->
                    <div style="padding: 12px 20px; display:flex; gap:8px; align-items:center;">
                        <div style="position:relative; flex:1; max-width:400px;">
                            <i class="fa-solid fa-magnifying-glass" style="position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none;"></i>
                            <input type="text" id="search-input" placeholder="ابحث باسم الجلاب..."
                                style="width:100%; padding:9px 38px 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>
                        <button id="search-clear-btn" 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; font-size:13px; transition:var(--transition);">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <!-- Cards Grid -->
                    <div style="padding: 0 20px 20px;">
                        <div class="gatherers-grid" id="gatherers-grid"></div>
                        <div class="empty-state" id="empty-state" style="display:none;">
                            <div class="empty-state-icon" style="background:rgba(99,102,241,0.1); color:#6366f1;">
                                <i class="fa-solid fa-people-carry-box"></i>
                            </div>
                            <h3>لا يوجد جلابون في هذه الوردية</h3>
                            <p>لم يتم تسجيل أي مواد لجلابين حتى الآن في هذه الوردية.</p>
                        </div>
                    </div>
                </section>

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

    <!-- Modal: تفاصيل الجلاب -->
    <div class="modal-overlay" id="gatherer-modal">
        <div class="modal-card" style="max-width:960px; width:95%; max-height:92vh;">
            <div class="modal-header">
                <h3>
                    <i class="fa-solid fa-person-carry-box" style="color:var(--primary); margin-left:8px;"></i>
                    تفاصيل مبيعات: <span id="modal-gatherer-name" style="color:var(--primary);">---</span>
                </h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>

            <!-- Modal Stats -->
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px; padding:16px 20px 0;">
                <div class="stat-card" style="padding:14px;">
                    <div class="stat-info">
                        <h3 id="modal-stat-customers" style="font-size:20px;">0</h3>
                        <p style="font-size:12px;">عدد الزبائن</p>
                    </div>
                </div>
                <div class="stat-card" style="padding:14px;">
                    <div class="stat-info">
                        <h3 id="modal-stat-qty" style="font-size:20px;">0</h3>
                        <p style="font-size:12px;">إجمالي العدد</p>
                    </div>
                </div>
                <div class="stat-card" style="padding:14px;">
                    <div class="stat-info">
                        <h3 id="modal-stat-weight" style="font-size:20px;">0</h3>
                        <p style="font-size:12px;">إجمالي الوزن (كجم)</p>
                    </div>
                </div>
                <div class="stat-card" style="padding:14px;">
                    <div class="stat-info">
                        <h3 id="modal-stat-revenue" style="font-size:20px; color:var(--success);">0</h3>
                        <p style="font-size:12px;">إجمالي الإيرادات</p>
                    </div>
                </div>
            </div>

            <!-- Modal Mode Tabs (Grouped vs Detailed) -->
            <div style="display:flex; gap:8px; padding:14px 20px 0; border-bottom:1px solid var(--border-color); padding-bottom:10px;">
                <button id="modal-tab-grouped" onclick="setModalTab('grouped')" class="btn" style="padding:7px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:700; cursor:pointer; background:var(--primary); color:#fff; border:none;">
                    <i class="fa-solid fa-layer-group"></i> عرض مجمع حسب المواد
                </button>
                <button id="modal-tab-detailed" onclick="setModalTab('detailed')" class="btn" style="padding:7px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:700; cursor:pointer; background:var(--bg-input); color:var(--text-secondary); border:1px solid var(--border-color);">
                    <i class="fa-solid fa-list-check"></i> عرض تفصيلي حسب الفواتير والزبائن
                </button>
            </div>

            <div class="modal-body" style="max-height: calc(90vh - 320px); overflow-y:auto; padding:16px 20px;">
                <!-- Modal Search -->
                <div style="position:relative; margin-bottom:14px;">
                    <i class="fa-solid fa-magnifying-glass" style="position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; pointer-events:none;"></i>
                    <input type="text" id="modal-search-input" placeholder="ابحث باسم المادة، اسم الزبون، أو رقم الاستمارة..."
                        style="width:100%; padding:9px 38px 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); box-sizing:border-box;"
                        onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--border-color)'">
                </div>

                <!-- Modal Table -->
                <div class="table-responsive">
                    <table class="data-table" id="modal-table" style="font-size:13px;">
                        <thead id="modal-thead">
                            <tr>
                                <th>اسم المادة</th>
                                <th>إجمالي العدد</th>
                                <th>إجمالي الوزن (كجم)</th>
                                <th>إجمالي السعر</th>
                            </tr>
                        </thead>
                        <tbody id="modal-tbody"></tbody>
                    </table>
                </div>

                <div class="empty-state" id="modal-empty" style="display:none; padding:30px;">
                    <div class="empty-state-icon" style="background:rgba(99,102,241,0.1); color:#6366f1; width:56px; height:56px; font-size:22px;">
                        <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>

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

