<?php
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>
    <!-- Google Fonts: Cairo for Arabic Typography -->
    <link rel="stylesheet" href="css/cairo.css">
    <!-- Font Awesome 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>
        .calibration-statement-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            box-shadow: var(--shadow-lg);
            margin-bottom: 24px;
        }
        .calibration-section-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-secondary);
            margin: 18px 0 10px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 6px;
        }
        .calibration-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 16px;
            border-radius: var(--radius-md);
            margin-bottom: 8px;
            background: var(--bg-input);
            transition: var(--transition);
        }
        .calibration-row:hover {
            transform: translateX(-4px);
            background: rgba(59, 130, 246, 0.05);
        }
        .calibration-label {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .calibration-label i {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }
        .calibration-value {
            font-size: 17px;
            font-weight: 800;
            color: var(--text-primary);
            font-family: monospace, var(--font-family);
        }
        .calibration-divider {
            border: none;
            border-top: 2px dashed var(--border-color);
            margin: 18px 0;
        }
        .calibration-subtotal-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-radius: var(--radius-md);
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.2);
            color: var(--text-primary);
            margin-bottom: 14px;
        }
        .calibration-subtotal-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 800;
        }
        .calibration-subtotal-value {
            font-size: 20px;
            font-weight: 900;
            color: var(--primary);
            font-family: monospace, var(--font-family);
        }
        .audit-match-banner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 22px;
            border-radius: var(--radius-lg);
            margin-top: 18px;
            font-weight: 800;
            font-size: 15px;
            box-shadow: var(--shadow-md);
        }
        .audit-match-banner.matching {
            background: rgba(16, 185, 129, 0.12);
            border: 1.5px solid #10b981;
            color: #065f46;
        }
        .audit-match-banner.mismatch {
            background: rgba(239, 68, 68, 0.12);
            border: 1.5px solid #ef4444;
            color: #991b1b;
        }
        .shift-badge-container {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.15);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
            $pageTitle = "معايرة ومطابقة الوردية الحالية";
            $pageIcon = "fa-sliders";
            include 'includes/header.php';
            ?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Dashboard Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #3b82f6 100%);">
                    <div class="welcome-text">
                        <h1>كشف معايرة ومطابقة الوردية الحالية ⚖️</h1>
                        <p>بيان معايرة الوردية ومطابقة إجمالي الإيرادات والمستحقات مع مجموع التحصيل النقدي والديون.</p>
                        <div class="shift-badge-container" id="shift-time-badge">
                            <i class="fa-solid fa-clock"></i>
                            <span id="shift-period-text">جاري تحميل بيانات الوردية الحالية...</span>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-secondary-outline" onclick="fetchShiftCalibration()" style="background: rgba(255,255,255,0.2); color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; font-weight:700; display:inline-flex; align-items:center; gap:8px;">
                            <i class="fa-solid fa-rotate"></i> تحديث بيانات الوردية
                        </button>
                    </div>
                </div>

                <!-- 1. Current Shift Calibration Card (كشف حساب ومعايرة الوردية الحالية) -->
                <section class="calibration-statement-card">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                        <div>
                            <h2 style="font-size: 18px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px;">
                                <i class="fa-solid fa-calculator" style="color: var(--primary);"></i>
                                بيان حساب ومعايرة الوردية الحالية
                            </h2>
                            <p style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">كشف مطابقات الوردية الحالية فقط</p>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <button class="btn btn-secondary-outline" onclick="exportExcel()" title="تصدير إلى Excel" style="font-size: 13px; gap: 6px;">
                                <i class="fa-solid fa-file-excel" style="color: #1f7244;"></i> تصدير Excel
                            </button>
                            <button class="btn btn-secondary-outline" onclick="printCalibration()" title="طباعة كشف المعايرة" style="font-size: 13px; gap: 6px;">
                                <i class="fa-solid fa-print"></i> طباعة كشف المعايرة
                            </button>
                        </div>
                    </div>

                    <!-- Section Title 1 -->
                    <div class="calibration-section-title">
                        <i class="fa-solid fa-list-check" style="color: var(--primary);"></i>
                        <span>أولاً: إيرادات ومستحقات الوردية (المكونات الأساسية للمعايرة)</span>
                    </div>

                    <!-- Item 1: Bala Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-boxes-stacked" style="color: #8b5cf6;"></i>
                            <span>بلا (مجموع)</span>
                        </div>
                        <div class="calibration-value" id="val-bala-sum">0.00 د.ع</div>
                    </div>

                    <!-- Item 2: Sales Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-tags" style="color: #10b981;"></i>
                            <span>مبياع (مجموع)</span>
                        </div>
                        <div class="calibration-value" id="val-sales-sum">0.00 د.ع</div>
                    </div>

                    <!-- Item 3: Percentage Commission Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-percent" style="color: #f59e0b;"></i>
                            <span>عمولة مئوية (10% / 20% أو أكثر/أقل - مجموع)</span>
                        </div>
                        <div class="calibration-value" id="val-commission-sum">0.00 د.ع</div>
                    </div>

                    <!-- Item 4: Bags Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-bag-shopping" style="color: #ec4899;"></i>
                            <span>أكياس (مجموع العمولات الثابتة)</span>
                        </div>
                        <div class="calibration-value" id="val-bags-sum">0.00 د.ع</div>
                    </div>

                    <!-- Item 5: Forms Fee Total (Forms count * 1000) -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-file-invoice" style="color: #3b82f6;"></i>
                            <span>عدد الاستمارات مضروب في 1000 (<span id="forms-count-badge">0</span> استمارة × 1000)</span>
                        </div>
                        <div class="calibration-value" id="val-forms-sum">0.00 د.ع</div>
                    </div>

                    <!-- Line Divider 1 (تحتها خط ---------------------) -->
                    <hr class="calibration-divider">

                    <!-- Subtotal 1 (مجموع ما سبق) -->
                    <div class="calibration-subtotal-row">
                        <div class="calibration-subtotal-label">
                            <i class="fa-solid fa-receipt"></i>
                            <span>مجموع ما سبق (إجمالي مستحقات وإيرادات الوردية)</span>
                        </div>
                        <div class="calibration-subtotal-value" id="val-grand-sum">0.00 د.ع</div>
                    </div>

                    <!-- Section Title 2 -->
                    <div class="calibration-section-title" style="margin-top: 24px;">
                        <i class="fa-solid fa-hand-holding-dollar" style="color: #10b981;"></i>
                        <span>ثانياً: التحصيل والمطابقة (النقدي والديون)</span>
                    </div>

                    <!-- Item 6: Cash Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-money-bill-wave" style="color: #10b981;"></i>
                            <span>مجموع النقدي (التحصيل المقبوض للوردية)</span>
                        </div>
                        <div class="calibration-value" id="val-cash-sum" style="color: #10b981;">0.00 د.ع</div>
                    </div>

                    <!-- Item 7: Debts Total -->
                    <div class="calibration-row">
                        <div class="calibration-label">
                            <i class="fa-solid fa-file-invoice-dollar" style="color: #ef4444;"></i>
                            <span>مجموع الديون (المبالغ المتبقية على الاستمارات)</span>
                        </div>
                        <div class="calibration-value" id="val-debts-sum" style="color: #ef4444;">0.00 د.ع</div>
                    </div>

                    <!-- Line Divider 2 (تحتها خط ---------------------) -->
                    <hr class="calibration-divider">

                    <!-- Subtotal 2 (مجموع النقدي والديون) -->
                    <div class="calibration-subtotal-row" style="background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2);">
                        <div class="calibration-subtotal-label">
                            <i class="fa-solid fa-vault"></i>
                            <span>مجموع (النقدي + الديون)</span>
                        </div>
                        <div class="calibration-subtotal-value" id="val-cash-debts-sum" style="color: #10b981;">0.00 د.ع</div>
                    </div>

                    <!-- Audit Matching Verification Badge -->
                    <div id="audit-match-banner" class="audit-match-banner matching">
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <i id="audit-match-icon" class="fa-solid fa-circle-check" style="font-size: 22px;"></i>
                            <span id="audit-match-text">المعايرة مطابقة صحيحة 100% (مجموع النقدي والديون مساوٍ لمجموع مستحقات الوردية)</span>
                        </div>
                        <div id="audit-match-diff" style="font-family: monospace; font-size: 16px;">الفرق: 0.00 د.ع</div>
                    </div>

                </section>

                <!-- 2. Detailed Tabs Section -->
                <section class="table-container-card">
                    <div class="card-header">
                        <div class="header-title-section">
                            <h2>التفاصيل والبنود التجميعية للوردية</h2>
                            <p class="subtitle">استعراض تفاصيل الأصناف المكونة لكل بند في المعايرة</p>
                        </div>
                    </div>

                    <div style="padding: 0 20px 14px 20px; display: flex; gap: 10px; border-bottom: 1px solid var(--border-color); flex-wrap: wrap;">
                        <button class="btn btn-sm btn-primary tab-btn active" data-tab="sales-tab" onclick="switchTab('sales-tab')">
                            <i class="fa-solid fa-tags"></i> تفاصيل المبياع
                        </button>
                        <button class="btn btn-sm btn-secondary-outline tab-btn" data-tab="bala-tab" onclick="switchTab('bala-tab')">
                            <i class="fa-solid fa-boxes-stacked"></i> تفاصيل بلا
                        </button>
                        <button class="btn btn-sm btn-secondary-outline tab-btn" data-tab="comm-tab" onclick="switchTab('comm-tab')">
                            <i class="fa-solid fa-percent"></i> العمولات المئوية
                        </button>
                        <button class="btn btn-sm btn-secondary-outline tab-btn" data-tab="bags-tab" onclick="switchTab('bags-tab')">
                            <i class="fa-solid fa-bag-shopping"></i> العمولات الثابتة (أكياس)
                        </button>
                    </div>

                    <!-- Sales Tab Table -->
                    <div id="sales-tab" class="tab-content" style="display: block;">
                        <div class="table-wrapper">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاستمارة</th>
                                        <th>اسم المادة</th>
                                        <th>العميل</th>
                                        <th>الكمية / العدد</th>
                                        <th>الوزن</th>
                                        <th>السعر</th>
                                        <th>المجموع (مبياع)</th>
                                    </tr>
                                </thead>
                                <tbody id="sales-tbody"></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Bala Tab Table -->
                    <div id="bala-tab" class="tab-content" style="display: none;">
                        <div class="table-wrapper">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاستمارة</th>
                                        <th>اسم المادة</th>
                                        <th>العميل</th>
                                        <th>العدد</th>
                                        <th>السعر</th>
                                        <th>المجموع (بلا)</th>
                                    </tr>
                                </thead>
                                <tbody id="bala-tbody"></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Commission Tab Table -->
                    <div id="comm-tab" class="tab-content" style="display: none;">
                        <div class="table-wrapper">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاستمارة</th>
                                        <th>اسم المادة</th>
                                        <th>العميل</th>
                                        <th>إجمالي البند</th>
                                        <th>قيمة العمولة المئوية (10%)</th>
                                    </tr>
                                </thead>
                                <tbody id="comm-tbody"></tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Bags Tab Table -->
                    <div id="bags-tab" class="tab-content" style="display: none;">
                        <div class="table-wrapper">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>الاستمارة</th>
                                        <th>اسم المادة</th>
                                        <th>العميل</th>
                                        <th>العدد / الوزن</th>
                                        <th>عمولة الأكياس</th>
                                    </tr>
                                </thead>
                                <tbody id="bags-tbody"></tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- Printable Area Template -->
    <div id="print-area" style="display: none;">
        <div style="direction: rtl; font-family: Cairo, sans-serif; padding: 20px;">
            <div style="text-align: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 15px;">
                <h1 style="font-size: 22px; margin-bottom: 5px;">كشف معايرة ومطابقة الوردية الحالية ⚖️</h1>
                <p style="font-size: 14px; color: #555;" id="print-shift-period"></p>
                <p style="font-size: 12px; color: #777;">تاريخ الطباعة: <?php echo date('Y-m-d H:i'); ?></p>
            </div>

            <h3 style="font-size: 15px; margin-bottom: 8px;">أولاً: إيرادات ومستحقات الوردية</h3>
            <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 14px;">
                <tbody>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">بلا (مجموع):</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold;" id="print-bala-sum">0.00 د.ع</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">مبياع (مجموع):</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold;" id="print-sales-sum">0.00 د.ع</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">عمولة مئوية (10% / 20% أو أكثر/أقل - مجموع):</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold;" id="print-comm-sum">0.00 د.ع</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">أكياس (مجموع):</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold;" id="print-bags-sum">0.00 د.ع</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">عدد الاستمارات مضروب في 1000:</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold;" id="print-forms-sum">0.00 د.ع</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding: 6px; border-bottom: 2px dashed #000;">----------------------------------------------------------------------------------</td>
                    </tr>
                    <tr style="background: #f8fafc;">
                        <td style="padding: 10px; font-size: 15px; font-weight: bold;">مجموع ما سبق (إجمالي مستحقات الوردية):</td>
                        <td style="padding: 10px; text-align: left; font-size: 16px; font-weight: bold; color: #1e3a8a;" id="print-grand-sum">0.00 د.ع</td>
                    </tr>
                </tbody>
            </table>

            <h3 style="font-size: 15px; margin: 15px 0 8px 0;">ثانياً: التحصيل والمطابقة</h3>
            <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px; font-size: 14px;">
                <tbody>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">مجموع النقدي:</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold; color: #10b981;" id="print-cash-sum">0.00 د.ع</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #ddd;">
                        <td style="padding: 8px; font-weight: bold;">مجموع الديون:</td>
                        <td style="padding: 8px; text-align: left; font-weight: bold; color: #ef4444;" id="print-debts-sum">0.00 د.ع</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding: 6px; border-bottom: 2px dashed #000;">----------------------------------------------------------------------------------</td>
                    </tr>
                    <tr style="background: #f0fdf4;">
                        <td style="padding: 10px; font-size: 15px; font-weight: bold;">مجموع (النقدي + الديون):</td>
                        <td style="padding: 10px; text-align: left; font-size: 16px; font-weight: bold; color: #166534;" id="print-cash-debts-sum">0.00 د.ع</td>
                    </tr>
                </tbody>
            </table>

            <div id="print-audit-status" style="padding: 12px; border-radius: 6px; text-align: center; font-weight: bold; font-size: 15px; margin-top: 15px; background: #e0f2fe; border: 1px solid #0284c7;">
                حالة المطابقة: جاري التحقق...
            </div>
        </div>
    </div>

    <!-- Toast Notifications Container -->
    <div id="toast-container" style="position: fixed; bottom: 20px; left: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px;"></div>

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

