<?php
ob_start();
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$user = $_SESSION['user'] ?? null;
if (!$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>
    <style>
        .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;
            align-items: center;
            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-avatar {
            width: 50px; height: 50px;
            border-radius: 50%;
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 800;
            flex-shrink: 0;
            border: 1.5px solid var(--primary-light);
        }

        .gatherer-details {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

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

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

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            width: 90%;
            max-width: 900px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-lg);
            transform: translateY(20px);
            transition: transform 0.3s ease;
            overflow: hidden;
        }

        .modal-overlay.open .modal-card {
            transform: translateY(0);
        }

        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            background: var(--bg-card);
        }

        .modal-close-btn {
            background: transparent;
            border: none;
            font-size: 28px;
            color: var(--text-muted);
            cursor: pointer;
            line-height: 1;
            transition: var(--transition);
        }

        .modal-close-btn:hover {
            color: var(--text-primary);
        }

        /* Filter Toggle inside modal */
        .filter-toggle-container {
            display: flex;
            align-items: center;
            background: var(--bg-input);
            padding: 4px;
            border-radius: 30px;
            border: 1px solid var(--border-color);
        }

        .filter-btn {
            padding: 8px 18px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            border-radius: 20px;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .filter-btn.active {
            background: var(--gradient-primary);
            color: #fff;
            box-shadow: var(--shadow-sm);
        }

        .tables-section-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .table-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: none;
            border: 1px solid var(--border-color);
        }

        .table-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

        .table-card-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .table-card-title i {
            color: var(--primary);
        }

        .settlement-summary-card {
            background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(16,185,129,0.06) 100%);
            border: 1.5px dashed var(--primary-light);
            border-radius: var(--radius-lg);
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-top: 10px;
            box-shadow: var(--shadow-sm);
        }

        .summary-label {
            font-weight: 800;
            color: var(--text-primary);
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .summary-value {
            font-weight: 900;
            font-size: 22px;
            color: var(--success);
        }

        .no-data-placeholder {
            text-align: center;
            padding: 60px 40px;
            background: var(--bg-card);
            border: 1px dashed var(--border-color);
            border-radius: var(--radius-lg);
            color: var(--text-secondary);
        }

        .no-data-placeholder i {
            font-size: 48px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        /* ── Modern Stats Grid for Settlements ── */
        .settlement-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 8px;
        }

        .settlement-stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: var(--transition);
        }

        .settlement-stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .settlement-stat-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .settlement-stat-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

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

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

        .settlement-stat-subvalue {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 1px;
        }

        /* Stat Card Accent Colors */
        .stat-card-count .settlement-stat-icon {
            background: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            border: 1px solid var(--primary-light);
        }

        .stat-card-weight .settlement-stat-icon {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        .stat-card-variety .settlement-stat-icon {
            background: rgba(168, 85, 247, 0.1);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.2);
        }

        .stat-card-total {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
            border: 1.5px solid rgba(16, 185, 129, 0.2);
        }

        .stat-card-total .settlement-stat-icon {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .stat-card-total .settlement-stat-value {
            color: var(--success);
            font-size: 17px;
            font-weight: 900;
        }

        /* ── Customized Table Accent Styling ── */
        #table-count-based thead th {
            background-color: rgba(99, 102, 241, 0.07);
            color: var(--primary);
            border-bottom: 2px solid var(--primary-light);
        }

        #table-weight-based thead th {
            background-color: rgba(245, 158, 11, 0.07);
            color: var(--warning);
            border-bottom: 2px solid rgba(245, 158, 11, 0.2);
        }

        /* Headings Title Badges */
        .title-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 700;
            border-radius: 12px;
            margin-right: 8px;
        }

        .title-badge-indigo {
            background: rgba(99, 102, 241, 0.15);
            color: var(--primary);
        }

        .title-badge-warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--warning);
        }

        /* Table layout and structure */
        .table-elegant {
            width: 100%;
            border-collapse: collapse;
            text-align: right;
            margin-top: 8px;
        }

        .table-elegant th, .table-elegant td {
            padding: 14px 20px;
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
        }

        .table-elegant th {
            font-weight: 700;
            font-size: 13.5px;
            color: var(--text-secondary);
        }

        /* Table alternating rows & hover */
        .table-elegant tbody tr:nth-child(even) {
            background-color: var(--bg-input);
        }

        .table-elegant tbody tr:hover {
            background-color: rgba(99, 102, 241, 0.03) !important;
            transition: background-color 0.2s ease;
        }

        /* ── CSS Print Layout ── */
        @media print {
            @page {
                size: A4 portrait;
                margin: 15mm;
            }
            body {
                background: #fff !important;
                color: #000 !important;
                font-family: 'Cairo', sans-serif !important;
                margin: 0 !important;
                padding: 0 !important;
                direction: rtl;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .app-container, .top-bar, .sidebar, .modal-header, .modal-close-btn, .filter-toggle-container, #print-settlement-btn, .modal-footer, .no-print, .date-filter-section {
                display: none !important;
            }
            .modal-overlay {
                position: relative !important;
                background: transparent !important;
                backdrop-filter: none !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                display: block !important;
                padding: 0 !important;
                z-index: auto !important;
            }
            .modal-card {
                width: 100% !important;
                max-width: 100% !important;
                border: none !important;
                box-shadow: none !important;
                background: transparent !important;
                transform: none !important;
                max-height: none !important;
                overflow: visible !important;
            }
            .modal-body {
                padding: 0 !important;
                overflow: visible !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 20px !important;
            }
            .print-only-header {
                display: flex !important;
            }
            .settlement-stats-grid {
                display: grid !important;
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 12px !important;
                margin-bottom: 10px !important;
            }
            .settlement-stat-card {
                border: 1px solid #ccc !important;
                box-shadow: none !important;
                background: #fff !important;
                padding: 10px !important;
                border-radius: var(--radius-sm) !important;
            }
            .table-card {
                border: 1px solid #ccc !important;
                box-shadow: none !important;
                background: #fff !important;
                padding: 15px !important;
                page-break-inside: avoid !important;
            }
            .table-elegant th {
                background-color: #f5f5f5 !important;
                color: #000 !important;
                border-bottom: 2px solid #333 !important;
                padding: 10px 12px !important;
            }
            .table-elegant td {
                border-bottom: 1px solid #ddd !important;
                padding: 10px 12px !important;
            }
            .settlement-summary-card {
                border: 2px dashed #000 !important;
                background: #f9f9f9 !important;
                padding: 15px 25px !important;
                page-break-inside: avoid !important;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <main class="main-content">
            <?php
            $pageTitle = "التسويات المالية";
            $pageIcon  = "fa-scale-balanced";
            include 'includes/header.php';
            ?>

            <div class="dashboard-body">
                
                <div style="margin-bottom: 20px;">
                    <p style="color:var(--text-secondary); font-size:14px; font-weight:600;">
                        <i class="fa-solid fa-circle-info" style="color:var(--primary); margin-left:6px;"></i>
                        اضغط على بطاقة الجلاب لعرض وتفصيل التسوية المالية الخاصة به.
                    </p>
                </div>

                <!-- ── Search & Period Filter Toolbar ── -->
                <div class="settlements-toolbar" style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px 24px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; box-shadow: var(--shadow-sm);">
                    <!-- Gatherer Search Input -->
                    <div style="flex: 1; min-width: 280px; position: relative;">
                        <span style="position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px;">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </span>
                        <input type="text" id="jallab-search" placeholder="ابحث عن جلاب بالاسم أو الهاتف..." style="width: 100%; padding: 12px 42px 12px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 14px; font-weight: 600; outline: none; transition: var(--transition);">
                    </div>
                    
                    <!-- Quick Info / Status Count -->
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-size: 13px; font-weight: 700; color: var(--text-secondary);">عدد الجلابين:</span>
                        <span id="jallab-count-badge" style="background: rgba(99, 102, 241, 0.1); color: var(--primary); padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800;">0</span>
                    </div>
                </div>

                <!-- ── Gatherers Grid ── -->
                <div class="gatherers-grid" id="gatherers-list-container">
                    <!-- Injected via JS -->
                </div>

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

    <!-- ── Settlement Detail Modal ── -->
    <div class="modal-overlay" id="settlement-modal">
        <div class="modal-card" style="max-width: 1250px; width: 95%;">
            <div class="modal-header">
                <div style="display:flex; align-items:center; gap:12px;">
                    <div style="width:40px; height:40px; border-radius:50%; background:rgba(99,102,241,0.1); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:18px;">
                        <i class="fa-solid fa-user-tie"></i>
                    </div>
                    <div>
                        <h3 id="modal-jallab-name" style="font-size: 16px; font-weight: 800;">تسوية الجلاب: -</h3>
                        <span id="modal-jallab-phone" style="font-size: 12px; color: var(--text-secondary); display: block; direction: ltr; text-align: right; margin-top: 2px;">الهاتف: -</span>
                    </div>
                </div>
                
                <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                    <!-- Export Excel Button -->
                    <button type="button" id="export-settlement-excel-btn" class="btn btn-secondary-outline" style="padding: 8px 14px; font-size: 12px; display: flex; align-items: center; gap: 6px; border-radius: 20px; font-weight: 700; height: 34px;">
                        <i class="fa-solid fa-file-excel" style="color: #1f7244; font-size: 14px;"></i>
                        <span>تصدير Excel</span>
                    </button>

                    <!-- Print Button -->
                    <button type="button" id="print-settlement-btn" class="btn btn-primary" style="padding: 8px 16px; font-size: 12px; display: flex; align-items: center; gap: 8px; border-radius: 20px; font-weight: 700; height: 34px;">
                        <i class="fa-solid fa-print"></i>
                        <span>طباعة التسوية</span>
                    </button>

                    <!-- Shift/All Toggle inside modal -->
                    <div class="filter-toggle-container">
                        <button type="button" id="modal-btn-filter-shift" class="filter-btn active">الوردية الحالية</button>
                        <button type="button" id="modal-btn-filter-all" class="filter-btn">كل الأوقات</button>
                    </div>
                    <button class="modal-close-btn" id="close-settlement-modal-btn">&times;</button>
                </div>
            </div>
            
            <div class="modal-body">
                <!-- Print-only Header -->
                <div class="print-only-header" style="display: none; border-bottom: 2px double #333; padding-bottom: 12px; margin-bottom: 20px; align-items: flex-start; justify-content: space-between; direction: rtl; width: 100%;">
                    <div style="text-align: right;">
                        <h2 style="font-size: 20px; font-weight: 800; color: #000; margin: 0 0 4px 0;">نظام إدارة جلابين الألمنيوم</h2>
                        <p style="font-size: 12px; color: #666; margin: 0;" id="print-jallab-name">تسوية الجلاب: -</p>
                        <p style="font-size: 12px; color: #666; margin: 2px 0 0 0;" id="print-jallab-phone">الهاتف: -</p>
                    </div>
                    <div style="text-align: left;">
                        <h1 style="font-size: 22px; font-weight: 900; color: #000; margin: 0 0 4px 0;">كشف تسوية جلاب</h1>
                        <p style="font-size: 11px; color: #666; margin: 0;" id="print-date-time">التاريخ: -</p>
                        <p style="font-size: 11px; color: #666; margin: 2px 0 0 0;" id="print-filter-type">الفترة: الوردية الحالية</p>
                    </div>
                </div>

                <!-- ── Custom Date Period Filter ── -->
                <div class="date-filter-section" style="background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px;">
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(99,102,241,0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 14px;">
                            <i class="fa-solid fa-calendar-days"></i>
                        </div>
                        <span style="font-size: 13.5px; font-weight: 800; color: var(--text-primary);">عرض تسوية لفترة محددة:</span>
                    </div>
                    
                    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <label style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">من:</label>
                            <input type="date" id="filter-start-date" style="padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 600; outline: none; transition: var(--transition);">
                        </div>
                        
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <label style="font-size: 12px; font-weight: 700; color: var(--text-secondary);">إلى:</label>
                            <input type="date" id="filter-end-date" style="padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 600; outline: none; transition: var(--transition);">
                        </div>
                        
                        <button type="button" id="btn-apply-date-filter" class="btn btn-primary" style="padding: 6px 16px; font-size: 12px; border-radius: 6px; font-weight: 700; height: 32px; min-width: 80px;">
                            تطبيق
                        </button>
                        
                        <button type="button" id="btn-clear-date-filter" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px; border-radius: 6px; font-weight: 700; height: 32px; display: none;">
                            إلغاء التصفية
                        </button>
                    </div>
                </div>
                <!-- ── Stats Cards Grid ── -->
                <div class="settlement-stats-grid">
                    <!-- Stat 1: Count based total -->
                    <div class="settlement-stat-card stat-card-count">
                        <div class="settlement-stat-icon">
                            <i class="fa-solid fa-hashtag"></i>
                        </div>
                        <div class="settlement-stat-info">
                            <span class="settlement-stat-label">مواد بالعدد</span>
                            <span class="settlement-stat-value" id="stat-count-qty">0 قطعة</span>
                            <span class="settlement-stat-subvalue" id="stat-count-amount">0 د.ع</span>
                        </div>
                    </div>
                    
                    <!-- Stat 2: Weight based total -->
                    <div class="settlement-stat-card stat-card-weight">
                        <div class="settlement-stat-icon">
                            <i class="fa-solid fa-weight-hanging"></i>
                        </div>
                        <div class="settlement-stat-info">
                            <span class="settlement-stat-label">مواد بالوزن</span>
                            <span class="settlement-stat-value" id="stat-weight-qty">0 كجم</span>
                            <span class="settlement-stat-subvalue" id="stat-weight-amount">0 د.ع</span>
                        </div>
                    </div>

                    <!-- Stat 3: Material variety -->
                    <div class="settlement-stat-card stat-card-variety">
                        <div class="settlement-stat-icon">
                            <i class="fa-solid fa-cubes"></i>
                        </div>
                        <div class="settlement-stat-info">
                            <span class="settlement-stat-label">تنوع المواد</span>
                            <span class="settlement-stat-value" id="stat-materials-count">0 مادة</span>
                            <span class="settlement-stat-subvalue" id="stat-materials-split">0 عدد | 0 وزن</span>
                        </div>
                    </div>

                    <!-- Stat 4: Total Amount to settle -->
                    <div class="settlement-stat-card stat-card-total">
                        <div class="settlement-stat-icon">
                            <i class="fa-solid fa-wallet"></i>
                        </div>
                        <div class="settlement-stat-info">
                            <span class="settlement-stat-label">إجمالي المستحقات</span>
                            <span class="settlement-stat-value" id="stat-grand-total">0 د.ع</span>
                            <span class="settlement-stat-subvalue">جاهز للتسوية الفورية</span>
                        </div>
                    </div>
                </div>

                <!-- Tables Container -->
                <div class="tables-section-container">
                    
                    <!-- Table 1: Count-based materials -->
                    <div class="table-card">
                        <div class="table-card-header">
                            <div class="table-card-title">
                                <i class="fa-solid fa-hashtag"></i>
                                <span>المواد المحسوبة بالعدد (العدد * السعر)</span>
                                <span class="title-badge title-badge-indigo" id="badge-count-table">0 مواد</span>
                            </div>
                        </div>
                        <div class="table-wrapper">
                            <table class="table-elegant" id="table-count-based">
                                <thead>
                                    <tr>
                                        <th style="width: 60px;">ت</th>
                                        <th>اسم المادة</th>
                                        <th>العدد الكلي</th>
                                        <th>معدل السعر</th>
                                        <th>المبلغ الإجمالي</th>
                                    </tr>
                                </thead>
                                <tbody id="table-count-body">
                                    <!-- Injected via JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Table 2: Weight-based materials -->
                    <div class="table-card">
                        <div class="table-card-header">
                            <div class="table-card-title">
                                <i class="fa-solid fa-weight-hanging"></i>
                                <span>المواد المحسوبة بالوزن (الوزن * السعر)</span>
                                <span class="title-badge title-badge-warning" id="badge-weight-table">0 مواد</span>
                            </div>
                        </div>
                        <div class="table-wrapper">
                            <table class="table-elegant" id="table-weight-based">
                                <thead>
                                    <tr>
                                        <th style="width: 60px;">ت</th>
                                        <th>اسم المادة</th>
                                        <th>العدد الكلي</th>
                                        <th>الوزن الإجمالي</th>
                                        <th>معدل السعر</th>
                                        <th>المبلغ الإجمالي</th>
                                    </tr>
                                </thead>
                                <tbody id="table-weight-body">
                                    <!-- Injected via JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                </div>

                <!-- Grand Total Summary -->
                <div class="settlement-summary-card">
                    <div class="summary-label">
                        <i class="fa-solid fa-scale-balanced" style="color: var(--primary);"></i>
                        <span>إجمالي مستحقات الجلاب للتسوية:</span>
                    </div>
                    <div class="summary-value" id="settlement-grand-total">
                        0 د.ع
                    </div>
                </div>
            </div>
            
            <div class="modal-footer" style="display:flex; justify-content:space-between; align-items:center;">
                <button type="button" id="open-pay-settlement-btn" class="btn btn-success" style="padding: 10px 22px; font-weight: 700; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border:none; display:inline-flex; align-items:center; gap:8px;">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                    <span>صرف وتسديد التسوية (خصم من القاصة)</span>
                </button>
                <button type="button" class="btn btn-secondary" id="close-settlement-modal-btn-footer" style="min-width:100px;">إغلاق</button>
            </div>
        </div>
    </div>

    <!-- ── Payout Settlement Modal ── -->
    <div class="modal-overlay" id="payout-settlement-modal">
        <div class="modal-card" style="max-width: 500px;">
            <div class="modal-header">
                <h3>صرف وتسديد مستحقات التسوية 💳</h3>
                <button class="modal-close-btn" onclick="closePayoutModal()">&times;</button>
            </div>
            <form id="payout-settlement-form">
                <div class="modal-body" style="gap:16px;">
                    <div style="background: rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); border-radius: var(--radius-md); padding:14px; text-align:center;">
                        <span style="font-size:12px; color:var(--text-secondary); display:block;">المبلغ المراد صرفه للجلاب</span>
                        <strong id="payout-modal-amount" style="font-size:22px; color:var(--success); font-weight:900;">0 د.ع</strong>
                    </div>

                    <div class="form-group">
                        <label for="payout-safe-select">اختر القاصة/الصندوق للتسديد منها <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-vault input-icon"></i>
                            <select id="payout-safe-select" style="width:100%; padding:10px 36px 10px 14px; 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; outline:none;" required>
                                <!-- Injected via JS -->
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="payout-notes">ملاحظات الصرف <span style="font-weight:normal; color:var(--text-muted);">(اختياري)</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-comment-dots input-icon"></i>
                            <input type="text" id="payout-notes" placeholder="ملاحظات توثيقية للصرف..." style="width:100%; padding:10px 36px 10px 14px; 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; outline:none;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closePayoutModal()">إلغاء</button>
                    <button type="submit" class="btn btn-success" id="confirm-payout-btn" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border:none;">
                        <i class="fa-solid fa-check-circle"></i>
                        تأكيد الصرف
                    </button>
                </div>
            </form>
        </div>
    </div>

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

