<?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 for premium icons -->
    <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
    <!-- Styling -->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/auth.js?v=<?php echo time(); ?>"></script>
    <style>
        /* ===== Forms Cards Grid Layout ===== */
        .forms-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            padding: 12px 0 24px 0;
            width: 100%;
        }
        
        .customer-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 16px;
            overflow: hidden;
            cursor: pointer;
        }
        
        .customer-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary);
        }
        
        .customer-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .customer-avatar-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .customer-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            transition: var(--transition);
        }
        
        .customer-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .form-serial-badge {
            font-size: 11px;
            font-weight: 700;
            background: var(--bg-input);
            color: var(--text-secondary);
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            direction: ltr;
        }
        
        .customer-card-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 14px 0;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        
        .info-label {
            color: var(--text-secondary);
        }
        
        .info-value {
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .customer-card-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .card-action-btn {
            width: 34px;
            height: 34px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-color);
            background-color: var(--bg-input);
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
            font-size: 13px;
        }
        
        .card-action-btn:hover {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .card-action-btn.btn-delete:hover {
            background-color: var(--danger);
            color: white;
            border-color: var(--danger);
        }
        
        .card-action-btn.btn-pricing:hover {
            background-color: #f59e0b;
            color: white;
            border-color: #f59e0b;
        }
        
        /* Status Colors for Cards */
        /* Completed (Green) / status-1 */
        .customer-card.status-completed, .customer-card.status-1 {
            background-color: rgba(16, 185, 129, 0.04);
            border-color: rgba(16, 185, 129, 0.18);
        }
        .customer-card.status-completed:hover, .customer-card.status-1:hover {
            border-color: var(--success);
            box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
        }
        .customer-card.status-completed .customer-avatar, .customer-card.status-1 .customer-avatar {
            background: var(--success-light);
            color: var(--success);
        }
        .customer-card.status-completed .form-serial-badge, .customer-card.status-1 .form-serial-badge {
            background: var(--success-light);
            color: var(--success);
            border-color: rgba(16, 185, 129, 0.25);
        }
        
        /* Partial (Orange) / status-2 */
        .customer-card.status-partial, .customer-card.status-2 {
            background-color: rgba(245, 158, 11, 0.04);
            border-color: rgba(245, 158, 11, 0.18);
        }
        .customer-card.status-partial:hover, .customer-card.status-2:hover {
            border-color: #f59e0b;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
        }
        .customer-card.status-partial .customer-avatar, .customer-card.status-2 .customer-avatar {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
        }
        .customer-card.status-partial .form-serial-badge, .customer-card.status-2 .form-serial-badge {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.25);
        }

        /* Cancelled (Red) */
        .customer-card.status-cancelled {
            background-color: rgba(239, 68, 68, 0.04);
            border-color: rgba(239, 68, 68, 0.18);
        }
        .customer-card.status-cancelled:hover {
            border-color: var(--danger);
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.15);
        }
        .customer-card.status-cancelled .customer-avatar {
            background: var(--danger-light);
            color: var(--danger);
        }
        .customer-card.status-cancelled .form-serial-badge {
            background: var(--danger-light);
            color: var(--danger);
            border-color: rgba(239, 68, 68, 0.25);
        }
        
        /* Normal (Blue) / Unpaid (0) */
        .customer-card.status-normal, .customer-card.status-0 {
            background-color: rgba(59, 130, 246, 0.04);
            border-color: rgba(59, 130, 246, 0.18);
        }
        .customer-card.status-normal:hover, .customer-card.status-0:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15);
        }
        .customer-card.status-normal .customer-avatar, .customer-card.status-0 .customer-avatar {
            background: var(--primary-light);
            color: var(--primary);
        }
        .customer-card.status-normal .form-serial-badge, .customer-card.status-0 .form-serial-badge {
            background: var(--primary-light);
            color: var(--primary);
            border-color: rgba(59, 130, 246, 0.25);
        }

        /* Dark Theme overrides */
        body.dark-theme .customer-avatar {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }
        body.dark-theme .customer-card.status-completed, body.dark-theme .customer-card.status-1 {
            background-color: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.22);
        }
        body.dark-theme .customer-card.status-completed .customer-avatar, body.dark-theme .customer-card.status-1 .customer-avatar {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
        }
        body.dark-theme .customer-card.status-completed .form-serial-badge, body.dark-theme .customer-card.status-1 .form-serial-badge {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
        }
        
        body.dark-theme .customer-card.status-partial, body.dark-theme .customer-card.status-2 {
            background-color: rgba(245, 158, 11, 0.08);
            border-color: rgba(245, 158, 11, 0.22);
        }
        body.dark-theme .customer-card.status-partial .customer-avatar, body.dark-theme .customer-card.status-2 .customer-avatar {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
        }
        body.dark-theme .customer-card.status-partial .form-serial-badge, body.dark-theme .customer-card.status-2 .form-serial-badge {
            background: rgba(245, 158, 11, 0.1);
            color: #fbbf24;
        }

        body.dark-theme .customer-card.status-cancelled {
            background-color: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.22);
        }
        body.dark-theme .customer-card.status-cancelled .customer-avatar {
            background: rgba(239, 68, 68, 0.15);
            color: #f87171;
        }
        body.dark-theme .customer-card.status-cancelled .form-serial-badge {
            background: rgba(239, 68, 68, 0.1);
            color: #f87171;
        }
        body.dark-theme .customer-card.status-normal, body.dark-theme .customer-card.status-0 {
            background-color: rgba(59, 130, 246, 0.08);
            border-color: rgba(59, 130, 246, 0.22);
        }
        body.dark-theme .customer-card.status-normal .customer-avatar, body.dark-theme .customer-card.status-0 .customer-avatar {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }
        body.dark-theme .customer-card.status-normal .form-serial-badge, body.dark-theme .customer-card.status-0 .form-serial-badge {
            background: rgba(59, 130, 246, 0.1);
            color: #60a5fa;
        }

        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
$pageTitle = "إدارة الاستمارات";
$pageIcon = "fa-file-signature";
include 'includes/header.php';
?>

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

                <!-- Stats Cards Section -->
                <section class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper blue" style="background-color: rgba(245, 158, 11, 0.1); color: #d97706;">
                            <i class="fa-solid fa-file-signature"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total">0</h3>
                            <p>إجمالي الاستمارات</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper green">
                            <i class="fa-solid fa-cubes"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-materials">0</h3>
                            <p>إجمالي المواد</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper purple" style="background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
                            <i class="fa-solid fa-calculator"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-avg-materials">0</h3>
                            <p>معدل المواد / استمارة</p>
                        </div>
                    </div>
                </section>

                <!-- Data Card Section -->
                <section class="table-container-card">
                    <div class="card-header">
                        <div class="header-title-section">
                            <h2>سجل الاستمارات المعتمدة</h2>
                            <p class="subtitle">استمارات الزبائن المسجلة مع إمكانية التصفية الفورية والتحكم</p>
                        </div>
                        <button class="btn btn-primary" id="open-add-modal-btn" style="background: var(--gradient-primary); border: none;">
                            <i class="fa-solid fa-plus-circle"></i>
                            إضافة استمارة جديدة
                        </button>
                    </div>

                    <!-- Search bar & Filter Control Bar -->
                    <div class="filter-bar" style="flex-direction: column; gap: 10px; align-items: stretch; padding: 14px 20px;">
                        <!-- View Mode Tabs Row -->
                        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom: 4px;">
                            <button id="btn-view-current" onclick="setViewMode('current')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(217, 119, 6, 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>
                            <button onclick="printSelectedForms()" 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, #2563eb 0%, #1d4ed8 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(37,99,235,0.2);" title="طباعة الاستمارات المحددة">
                                <i class="fa-solid fa-print"></i> طباعة المحدد (<span id="selected-forms-count">0</span>)
                            </button>
                            <button onclick="sendSelectedFormsToPricing()" 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, #f59e0b 0%, #d97706 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(245,158,11,0.2);" title="إرسال الاستمارات المحددة لصفحة التسعير (pricing.php)">
                                <i class="fa-solid fa-paper-plane"></i> إرسال المحدد للتسعير
                            </button>
                            <button onclick="toggleSelectAllForms()" class="btn" style="padding:8px 12px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; transition:var(--transition); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color);" title="تحديد / إلغاء تحديد الكل">
                                <i class="fa-regular fa-square-check"></i> تحديد الكل
                            </button>
                            <button onclick="printAllForms()" class="btn" style="padding:8px 14px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:5px; transition:var(--transition); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color); box-shadow:none;" title="طباعة كشف شامل بجدول الاستمارات">
                                <i class="fa-solid fa-table-list"></i> طباعة كشف الجدول
                            </button>
                        </div>
                        <!-- Search & Filter Row -->
                        <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
                            <div style="position:relative; flex:1; min-width:240px;">
                                <i class="fa-solid fa-magnifying-glass" style="position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none;"></i>
                                <input
                                    type="text"
                                    id="search-input"
                                    placeholder="ابحث باسم الزبون..."
                                    autocomplete="off"
                                    onkeydown="if(event.key==='Enter') doSearchForms()"
                                    style="width:100%; padding:10px 40px 10px 14px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; outline:none; transition:var(--transition);"
                                    onfocus="this.style.borderColor='var(--primary)'; this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.12)'"
                                    onblur="this.style.borderColor='var(--border-color)'; this.style.boxShadow='none'"
                                >
                            </div>

                            <!-- Forms Status & Type Filter -->
                            <div style="min-width:200px;">
                                <select id="filter-payment-type" onchange="applyFilters()" style="width:100%; padding:10px 14px; font-size:13px; font-weight:700; border-radius:var(--radius-md); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; cursor:pointer; transition:var(--transition);" onfocus="this.style.borderColor='var(--primary)'" onblur="this.style.borderColor='var(--border-color)'" title="تصفية حسب نوع وحالة الاستمارة">
                                    <option value="all">📋 كافة الاستمارات (الكل)</option>
                                    <option value="new">🆕 الاستمارات الجديدة (غير مدفوعة)</option>
                                    <option value="cash">💵 المسددة بالكامل (نقداً)</option>
                                    <option value="debt">🧾 استمارات الديون (متبقي مبالغ)</option>
                                    <option value="cancelled">🚫 الاستمارات الملغاة</option>
                                </select>
                            </div>

                            <button id="search-btn" onclick="doSearchForms()" style="padding:10px 18px; border-radius:var(--radius-md); border:none; background:var(--gradient-primary); color:#fff; font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 2px 8px rgba(59,130,246,0.2); transition:var(--transition);" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
                                <i class="fa-solid fa-search"></i> بحث
                            </button>
                            <button id="search-clear-btn" onclick="clearSearchForms()" title="مسح البحث والتصفية" style="padding:10px 12px; border-radius:var(--radius-md); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:5px; font-size:13px; transition:var(--transition);" onmouseover="this.style.borderColor='var(--danger)';this.style.color='var(--danger)'" onmouseout="this.style.borderColor='var(--border-color)';this.style.color='var(--text-secondary)'">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>

                        <!-- Previous Days Shift Filter Row -->
                        <div id="previous-filters-row" style="display:none; gap:12px; align-items:center; flex-wrap:wrap; background:rgba(59,130,246,0.04); padding:10px 14px; border-radius:var(--radius-md); border:1px solid rgba(59,130,246,0.15); margin-top:2px;">
                            <!-- Shift Filter -->
                            <div style="display:flex; align-items:center; gap:8px; flex:1; min-width:240px;">
                                <label for="filter-shift-select" style="font-size:12px; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; gap:5px; white-space:nowrap;">
                                    <i class="fa-solid fa-clock-rotate-left" style="color:#f59e0b;"></i> الوردية:
                                </label>
                                <select id="filter-shift-select" onchange="onShiftSelectChange()" style="flex:1; padding:7px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; cursor:pointer;">
                                    <option value="">-- كافة الورديات السابقة --</option>
                                </select>
                                <input type="date" id="filter-shift-date" onchange="onShiftDateInputChange()" style="padding:6px 10px; font-size:12px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; cursor:pointer;" title="اختر تاريخ الوردية يدوياً">
                            </div>

                            <!-- Reset Filters Button -->
                            <button type="button" onclick="resetPreviousFilters()" class="btn" style="padding:7px 14px; font-size:12px; font-weight:700; border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color); cursor:pointer; display:flex; align-items:center; gap:5px; transition:var(--transition);" onmouseover="this.style.borderColor='var(--primary)';this.style.color='var(--primary)'" onmouseout="this.style.borderColor='var(--border-color)';this.style.color='var(--text-secondary)'" title="إعادة ضبط الفلاتر">
                                <i class="fa-solid fa-rotate-left"></i> إعادة ضبط
                            </button>
                        </div>

                        <!-- Entries Row -->
                        <div class="entries-selector" style="justify-content:flex-start;">
                            <span>عرض</span>
                            <select id="entries-count">
                                <option value="6" selected>6</option>
                                <option value="12">12</option>
                                <option value="24">24</option>
                                <option value="48">48</option>
                            </select>
                            <span>بطاقات</span>
                            <span id="search-results-badge" style="display:none; margin-right:12px; font-size:12px; color:var(--primary); font-weight:700; background:var(--primary-light); padding:2px 10px; border-radius:20px;"></span>
                        </div>
                    </div>

                    <!-- Cards Display Grid -->
                    <div class="forms-cards-grid" id="forms-cards-container">
                        <!-- Dynamic Cards will be rendered here by JS -->
                    </div>

                    <!-- Empty State View -->
                    <div class="empty-state" id="empty-state-view">
                        <div class="empty-state-icon" style="background-color: rgba(245, 158, 11, 0.1); color: #d97706;">
                            <i class="fa-solid fa-file-signature"></i>
                        </div>
                        <h3>لا يوجد استمارات مسجلة حالياً</h3>
                        <p>ابدأ بإضافة استمارة جديدة لتظهر بطاقتها في هذا القسم.</p>
                        <button class="btn btn-secondary-outline" id="empty-state-add-btn">
                            <i class="fa-solid fa-plus"></i> إضافة أول استمارة
                        </button>
                    </div>

                    <!-- Table Footer / Pagination -->
                    <div class="table-footer">
                        <div class="pagination-info" id="pagination-info-text">
                            يعرض 0 إلى 0 من أصل 0 استمارة
                        </div>
                        <div class="pagination-controls" id="pagination-controls">
                            <!-- Pagination buttons dynamically rendered -->
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- Modal Form (Add / Edit Form) -->
    <div class="modal-overlay" id="form-modal">
        <div class="modal-card">
            <div class="modal-header">
                <h3 id="modal-title">إضافة استمارة جديدة</h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>
            <form id="customer-form" novalidate>
                <input type="hidden" id="form-id">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="customer-name">اسم الزبون <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-user input-icon"></i>
                            <input type="text" id="customer-name" placeholder="أدخل اسم الزبون بالكامل..." required minlength="3">
                        </div>
                        <span class="error-msg" id="name-error">يرجى إدخال اسم زبون صحيح (3 أحرف على الأقل)</span>
                    </div>

                    <!-- عدد المواد يُحسب تلقائياً من المواد المضافة في قائمة الشراء -->
                    <input type="hidden" id="materials-count" value="0">

                    <div class="form-group">
                        <label for="form-status">حالة الاستمارة <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-circle-info input-icon"></i>
                            <select id="form-status" disabled required style="width: 100%; padding: 12px 48px 12px 16px; border: 1px solid var(--border-color); background-color: var(--bg-input); color: var(--text-primary); border-radius: var(--radius-md); font-family: var(--font-family); outline: none; opacity: 0.7; cursor: not-allowed;">
                                <option value="0">جديدة (0) - أزرق</option>
                                <option value="1">مكتملة الدفع (1) - أخضر</option>
                                <option value="2">مدفوعة جزئياً (2) - برتقالي</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel-modal-btn">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="save-btn">
                        <i class="fa-solid fa-save"></i>
                        <span>حفظ الاستمارة</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal-overlay" id="delete-confirm-modal">
        <div class="modal-card modal-confirm">
            <div class="modal-body text-center">
                <div class="confirm-icon">
                    <i class="fa-solid fa-circle-exclamation text-danger"></i>
                </div>
                <h3>تأكيد حذف الاستمارة</h3>
                <p>هل أنت متأكد من رغبتك في حذف استمارة الزبون <strong id="delete-item-name">---</strong>؟</p>
                <p class="text-muted text-sm">هذا الإجراء نهائي ولا يمكن الرجوع عنه بعد إتمامه.</p>
            </div>
            <div class="modal-footer justify-center">
                <button type="button" class="btn btn-secondary" id="cancel-delete-btn">تراجع</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-btn">
                    <i class="fa-solid fa-trash-can"></i>
                    نعم، احذف الاستمارة
                </button>
            </div>
        </div>
    </div>

    <!-- Purchase List Modal -->
    <div class="modal-overlay" id="purchase-list-modal">
        <div class="modal-card" style="max-width: 1500px; width: 99%; margin: 0 auto;">
            <div class="modal-header" style="padding:18px 24px;">
                <div style="display:flex; align-items:center; gap:10px;">
                    <i class="fa-solid fa-file-invoice" style="color:var(--primary); font-size:22px;"></i>
                    <h3 id="purchase-modal-title">قائمة شراء الاستمارة</h3>
                </div>
                <div style="display:flex; align-items:center; gap:10px;">
                    <button type="button" class="btn btn-secondary-outline" onclick="printCurrentForm()" style="padding:6px 14px; font-size:12px; font-weight:700; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; gap:6px;" title="طباعة قائمة شراء هذه الاستمارة">
                        <i class="fa-solid fa-print"></i> طباعة الاستمارة
                    </button>
                    <button class="modal-close-btn" id="close-purchase-modal-btn">&times;</button>
                </div>
            </div>
            <div class="modal-body" style="max-height: 90vh; overflow-y: auto; padding: 24px 32px;">

                <!-- Form Metadata Header -->
                <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; background:var(--bg-input); padding:14px 18px; border-radius:var(--radius-md); border:1px solid var(--border-color); margin-bottom:18px;">
                    <div>
                        <span style="font-size:11px; color:var(--text-secondary); display:block; margin-bottom:2px;">رقم الاستمارة</span>
                        <strong id="purchase-meta-serial" style="font-size:16px; color:var(--primary);">---</strong>
                    </div>
                    <div>
                        <span style="font-size:11px; color:var(--text-secondary); display:block; margin-bottom:2px;">اسم الزبون</span>
                        <strong id="purchase-meta-name" style="font-size:15px;">---</strong>
                    </div>
                    <div>
                        <span style="font-size:11px; color:var(--text-secondary); display:block; margin-bottom:2px;">تاريخ الاستمارة</span>
                        <strong id="purchase-meta-datetime" style="font-size:13px; font-weight:600;"><i class="fa-regular fa-calendar-days" style="margin-left:4px;"></i> ---</strong>
                    </div>
                </div>

                <!-- Add/Edit Purchase Item Form Container -->
                <div id="purchase-item-form-container" style="display:none; background:linear-gradient(135deg, rgba(59,130,246,0.03) 0%, rgba(99,102,241,0.04) 100%); border: 1.5px solid rgba(59,130,246,0.25); border-radius:var(--radius-md); padding:20px; margin-bottom:18px;">
                    <h4 id="item-form-title" style="margin-bottom:16px; font-size:14px; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:6px;">
                        <i class="fa-solid fa-circle-plus"></i> إضافة مادة جديدة لقائمة الشراء
                    </h4>

                    <form id="purchase-item-form" novalidate>
                        <input type="hidden" id="purchase-item-id">
                        <!-- Hidden: stores material meta fetched from DB -->
                        <input type="hidden" id="p-item-accounting-type">
                        <input type="hidden" id="p-item-commission-type">
                        <input type="hidden" id="p-item-worker-share-type">

                        <!-- Row 1: Material select + manual input -->
                        <div style="margin-bottom:14px;">
                            <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                اسم المادة <span style="color:var(--danger);">*</span>
                            </label>
                            <div style="position:relative;">
                                <i class="fa-solid fa-box-open" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none;"></i>
                                <select id="p-item-name-select"
                                    style="width:100%; padding:10px 36px 10px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; cursor:pointer; transition:border-color 0.2s;"
                                    onchange="handleMaterialSelect(this.value)"
                                    onfocus="this.style.borderColor='var(--primary)'"
                                    onblur="this.style.borderColor='var(--border-color)'">
                                    <option value="">-- اختر من مواد الوردية --</option>
                                    <option value="__manual__">✏️ إدخال اسم يدوي...</option>
                                </select>
                                <input type="text" id="p-item-name" placeholder="اكتب اسم المادة يدوياً..."
                                    style="display:none; margin-top:6px; padding:10px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--primary); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; width:100%; box-sizing:border-box;">
                            </div>

                            <!-- Material info chip (shown when a material with known data is selected) -->
                            <div id="p-item-material-info" style="display:none; margin-top:8px; display:none; flex-wrap:wrap; gap:6px;">
                                <span style="font-size:11px; color:var(--text-secondary); align-self:center;">بيانات المادة:</span>
                                <span id="p-item-accounting-chip" style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(99,102,241,0.1); color:#6366f1;"></span>
                                <span id="p-item-commission-chip" style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(245,158,11,0.1); color:#d97706;"></span>
                                <span id="p-item-worker-chip" style="font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(16,185,129,0.1); color:#10b981;"></span>
                            </div>
                        </div>

                        <!-- Row 2: Numeric inputs -->
                        <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap:12px; margin-bottom:14px;">
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                    العدد <span style="color:var(--danger);">*</span>
                                </label>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-hashtag" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:11px;"></i>
                                    <input type="number" id="p-item-quantity" placeholder="0" min="1" required
                                        style="width:100%; padding:10px 30px 10px 10px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; box-sizing:border-box; transition:border-color 0.2s;"
                                        oninput="liveCalcPreview()"
                                        onfocus="this.style.borderColor='var(--primary)'"
                                        onblur="this.style.borderColor='var(--border-color)'">
                                </div>
                            </div>
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">الوزن (كجم)</label>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-weight-hanging" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:11px;"></i>
                                    <input type="number" id="p-item-weight" placeholder="0.00" min="0" step="0.01"
                                        style="width:100%; padding:10px 30px 10px 10px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; box-sizing:border-box; transition:border-color 0.2s;"
                                        oninput="liveCalcPreview()"
                                        onfocus="this.style.borderColor='var(--primary)'"
                                        onblur="this.style.borderColor='var(--border-color)'">
                                </div>
                            </div>
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                    السعر (يُدخله المستخدم) <span style="color:var(--danger);">*</span>
                                </label>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-coins" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:11px;"></i>
                                    <input type="text" id="p-item-price" placeholder="0" required
                                        style="width:100%; padding:10px 30px 10px 10px; font-size:14px; font-weight:700; border-radius:var(--radius-sm); border:2px solid rgba(59,130,246,0.4); background:rgba(59,130,246,0.04); color:var(--primary); font-family:var(--font-family); outline:none; box-sizing:border-box; transition:all 0.2s;"
                                        oninput="liveCalcPreview()"
                                        onfocus="this.style.borderColor='var(--primary)'; this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.15)'"
                                        onblur="this.style.borderColor='rgba(59,130,246,0.4)'; this.style.boxShadow='none'">
                                </div>
                            </div>
                        </div>

                        <!-- Live Calculation Preview Card -->
                        <div id="live-calc-preview" style="display:none; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:12px 16px; margin-bottom:14px;">
                            <div style="font-size:11px; font-weight:700; color:var(--text-secondary); margin-bottom:8px; display:flex; align-items:center; gap:5px;">
                                <i class="fa-solid fa-bolt" style="color:#f59e0b;"></i>
                                معاينة لحظية (تتغير مع كل تعديل)
                            </div>
                            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:8px;">
                                <div style="background:rgba(59,130,246,0.06); border-radius:8px; padding:10px; text-align:center;">
                                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">المجموع الكلي</div>
                                    <div id="preview-subtotal" style="font-size:16px; font-weight:800; color:var(--primary);">0</div>
                                </div>
                                <div style="background:rgba(16,185,129,0.06); border-radius:8px; padding:10px; text-align:center;">
                                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">حق العامل</div>
                                    <div id="preview-worker" style="font-size:16px; font-weight:800; color:#10b981;">0</div>
                                </div>
                                <div style="background:rgba(245,158,11,0.06); border-radius:8px; padding:10px; text-align:center;">
                                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">عمولة المادة</div>
                                    <div id="preview-commission" style="font-size:16px; font-weight:800; color:#d97706;">0</div>
                                </div>
                                <div style="background:rgba(245,158,11,0.06); border-radius:8px; padding:10px; text-align:center;">
                                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">عمولة 10%</div>
                                    <div id="preview-commission-10" style="font-size:16px; font-weight:800; color:#d97706;">0</div>
                                </div>
                            </div>
                        </div>

                        <!-- Save / Cancel Buttons -->
                        <div style="display:flex; gap:8px; justify-content:flex-end;">
                            <button type="button" class="btn btn-secondary-outline" id="cancel-p-item-btn" style="padding:9px 16px; font-size:13px; border-radius:var(--radius-sm);">
                                <i class="fa-solid fa-xmark"></i> إلغاء
                            </button>
                            <button type="submit" class="btn btn-primary" id="save-p-item-btn" style="padding:9px 20px; font-size:13px; border-radius:var(--radius-sm); background:var(--gradient-primary); border:none;">
                                <i class="fa-solid fa-check"></i> حفظ المادة
                            </button>
                        </div>
                        <span class="error-msg" id="p-item-error" style="margin-top:6px; display:none;">يرجى ملء جميع الحقول الإلزامية (الاسم، العدد، والسعر)</span>
                    </form>
                </div>

                <!-- Payment Form Container -->
                <div id="payment-form-container" style="display:none; background:linear-gradient(135deg, rgba(16,185,129,0.03) 0%, rgba(5,150,105,0.04) 100%); border: 1.5px solid rgba(16,185,129,0.25); border-radius:var(--radius-md); padding:20px; margin-bottom:18px;">
                    <h4 style="margin-bottom:16px; font-size:14px; font-weight:700; color:#10b981; display:flex; align-items:center; gap:6px;">
                        <i class="fa-solid fa-cash-register"></i> تحصيل ودفع الاستمارة للخزينة
                    </h4>

                    <form id="payment-form" novalidate>
                        <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:14px;">
                            <!-- Safe selection -->
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                    خزنة الإيداع <span style="color:var(--danger);">*</span>
                                </label>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-vault" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none;"></i>
                                    <select id="pay-safe-id" required
                                        style="width:100%; padding:10px 36px 10px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none; cursor:pointer;">
                                        <!-- Will be populated dynamically with safes -->
                                    </select>
                                </div>
                            </div>
                            
                            <!-- Payment Date -->
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                    تاريخ المعاملة <span style="color:var(--danger);">*</span>
                                </label>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-calendar-day" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none;"></i>
                                    <input type="date" id="pay-date" required
                                        style="width:100%; padding:10px 36px 10px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none;">
                                </div>
                            </div>

                            <!-- Amount to Pay -->
                            <div>
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;">
                                    <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">
                                        المبلغ المدفوع (د.ع) <span style="color:var(--danger);">*</span>
                                    </label>
                                    <div style="display:flex; gap:6px;">
                                        <button type="button" id="btn-pay-full" style="background:rgba(16,185,129,0.12); color:#10b981; border:1px solid rgba(16,185,129,0.3); padding:3px 10px; border-radius:6px; font-size:11px; font-weight:800; cursor:pointer; font-family:var(--font-family); transition:all 0.2s; display:inline-flex; align-items:center; gap:4px;" title="تعبئة المبلغ الكلي المتبقي تلقائياً من قاعدة البيانات">
                                            <i class="fa-solid fa-bolt" style="font-size:10px;"></i> تحصيل كامل
                                        </button>
                                        <button type="button" id="btn-pay-debt" style="background:rgba(245,158,11,0.12); color:#d97706; border:1px solid rgba(245,158,11,0.3); padding:3px 10px; border-radius:6px; font-size:11px; font-weight:800; cursor:pointer; font-family:var(--font-family); transition:all 0.2s; display:inline-flex; align-items:center; gap:4px;" title="تسجيل الاستمارة كدين آجل بالكامل (المبلغ المدفوع 0)">
                                            <i class="fa-solid fa-file-invoice-dollar" style="font-size:10px;"></i> ديون (آجل)
                                        </button>
                                        <button type="button" id="btn-pay-clear" style="background:rgba(239,68,68,0.08); color:#ef4444; border:1px solid rgba(239,68,68,0.2); padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; font-family:var(--font-family); transition:all 0.2s; display:inline-flex; align-items:center; gap:4px;" title="تفريغ حقل المبلغ">
                                            <i class="fa-solid fa-eraser" style="font-size:10px;"></i> مسح
                                        </button>
                                    </div>
                                </div>
                                <div style="position:relative;">
                                    <i class="fa-solid fa-money-bill-wave" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none;"></i>
                                    <input type="text" id="pay-amount" placeholder="أدخل المبلغ المدفوع..." required
                                        style="width:100%; padding:10px 36px 10px 12px; font-size:14px; font-weight:700; border-radius:var(--radius-sm); border:2px solid rgba(16,185,129,0.4); background:rgba(16,185,129,0.04); color:#10b981; font-family:var(--font-family); outline:none; box-sizing:border-box;">
                                </div>
                            </div>
                        </div>

                        <!-- Description -->
                        <div style="margin-bottom:14px;">
                            <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:5px;">
                                البيان / الملاحظات <span style="color:var(--danger);">*</span>
                            </label>
                            <div style="position:relative;">
                                <i class="fa-solid fa-align-right" style="position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none;"></i>
                                <input type="text" id="pay-description" placeholder="اكتب بياناً للحركة المالية..." required
                                    style="width:100%; padding:10px 36px 10px 12px; font-size:13px; border-radius:var(--radius-sm); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); font-family:var(--font-family); outline:none;">
                            </div>
                        </div>

                        <!-- Info/Warning about payment balance -->
                        <div id="payment-remaining-info" style="font-size:12px; margin-bottom:14px; color:var(--text-secondary); padding:8px 12px; background:var(--bg-input); border-radius:var(--radius-sm); border:1px solid var(--border-color); display:flex; justify-content:space-between;">
                            <span>المتبقي غير المدفوع: <strong id="pay-remaining-amount" style="color:var(--danger);">0.00 د.ع</strong></span>
                            <span>إجمالي قيمة الاستمارة: <strong id="pay-grand-total" style="color:var(--primary);">0.00 د.ع</strong></span>
                        </div>

                        <!-- Submit / Cancel Buttons -->
                        <div style="display:flex; gap:8px; justify-content:flex-end;">
                            <button type="button" class="btn btn-secondary-outline" id="cancel-payment-btn" style="padding:9px 16px; font-size:13px; border-radius:var(--radius-sm);">
                                <i class="fa-solid fa-xmark"></i> إلغاء
                            </button>
                            <button type="submit" class="btn btn-success" id="confirm-payment-btn" style="padding:9px 20px; font-size:13px; border-radius:var(--radius-sm); background:linear-gradient(135deg, #10b981 0%, #059669 100%); border:none; color:white; font-weight:700;">
                                <i class="fa-solid fa-check"></i> تأكيد تحصيل الدفعة
                            </button>
                        </div>
                        <span class="error-msg" id="payment-form-error" style="margin-top:6px; display:none;">يرجى ملء جميع الحقول الإلزامية بقيم صحيحة</span>
                    </form>
                </div>

                <!-- Purchase Items Table -->

                <div class="table-responsive" style="border: 1px solid var(--border-color); border-radius:var(--radius-md); max-height: 450px; overflow-y: auto; overflow-x: auto;">
                    <table class="data-table" id="purchase-items-table" style="width:100%; border-collapse:collapse; text-align:right; min-width: 1100px;">
                        <thead>
                            <tr style="background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);">
                                <th style="padding:14px 16px; font-size:14px; width:50px; text-align:center;">#</th>
                                <th style="padding:14px 16px; font-size:14px; min-width:160px;">اسم المادة</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:110px;">العدد</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:110px;">الوزن</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:130px;">السعر</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:130px; color:#10b981;">حق العامل</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:130px; color:#f59e0b;">عمولة المادة</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:130px; color:#f59e0b;">عمولة النسبة %</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:140px; color:var(--primary);">المجموع الكلي</th>
                                <th style="padding:14px 16px; font-size:14px; text-align:center; width:70px;">حذف</th>
                            </tr>
                        </thead>
                        <tbody id="purchase-items-tbody">
                            <!-- Dynamically loaded items will go here -->
                        </tbody>
                    </table>
                    <!-- Empty purchase items placeholder -->
                    <div id="purchase-items-empty" style="display:none; text-align:center; padding:30px; color:var(--text-secondary);">
                        <i class="fa-solid fa-basket-shopping" style="font-size:36px; color:var(--text-muted); margin-bottom:10px; display:block;"></i>
                        لا توجد مواد مضافة لقائمة الشراء هذه بعد.
                    </div>
                </div>

                <!-- Summary Totals Strip -->
                <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:20px;">
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(59,130,246,0.07); border-radius:var(--radius-md); border:1px solid rgba(59,130,246,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-calculator" style="margin-left:8px; color:var(--primary);"></i>
                            المجموع الكلي (+ رسوم)
                        </div>
                        <div id="purchase-grand-total" style="font-size:22px; font-weight:800; color:var(--primary); direction:ltr;">0.00 د.ع</div>
                    </div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(16,185,129,0.07); border-radius:var(--radius-md); border:1px solid rgba(16,185,129,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-hard-hat" style="margin-left:8px; color:#10b981;"></i>
                            مجموع حق العامل
                        </div>
                        <div id="purchase-worker-total" style="font-size:22px; font-weight:800; color:#10b981; direction:ltr;">0.00 د.ع</div>
                    </div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(245,158,11,0.07); border-radius:var(--radius-md); border:1px solid rgba(245,158,11,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-percent" style="margin-left:8px; color:#f59e0b;"></i>
                            مجموع عمولة المادة
                        </div>
                        <div id="purchase-commission-total" style="font-size:22px; font-weight:800; color:#f59e0b; direction:ltr;">0.00 د.ع</div>
                    </div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(245,158,11,0.07); border-radius:var(--radius-md); border:1px solid rgba(245,158,11,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-percent" style="margin-left:8px; color:#f59e0b;"></i>
                            مجموع عمولة النسبة %
                        </div>
                        <div id="purchase-commission-10-total" style="font-size:22px; font-weight:800; color:#f59e0b; direction:ltr;">0.00 د.ع</div>
                    </div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(16,185,129,0.07); border-radius:var(--radius-md); border:1px solid rgba(16,185,129,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-wallet" style="margin-left:8px; color:#10b981;"></i>
                            إجمالي المدفوع
                        </div>
                        <div id="purchase-paid-total" style="font-size:22px; font-weight:800; color:#10b981; direction:ltr;">0.00 د.ع</div>
                    </div>
                    <div style="display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:rgba(239,68,68,0.07); border-radius:var(--radius-md); border:1px solid rgba(239,68,68,0.2);">
                        <div style="font-size:15px; font-weight:600; color:var(--text-secondary);">
                            <i class="fa-solid fa-hand-holding-dollar" style="margin-left:8px; color:#ef4444;"></i>
                            المتبقي غير المدفوع
                        </div>
                        <div id="purchase-remaining-total" style="font-size:22px; font-weight:800; color:#ef4444; direction:ltr;">0.00 د.ع</div>
                    </div>
                </div>
                
                <!-- Surplus Warning Box -->
                <div id="surplus-warning-container" style="display:none; background:rgba(16,185,129,0.08); border:1.5px dashed rgba(16,185,129,0.3); border-radius:var(--radius-md); padding:16px; margin: 18px 0 0 0;">
                    <h5 style="color:#10b981; margin:0 0 8px 0; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;">
                        <i class="fa-solid fa-triangle-exclamation"></i> تنبيه: يوجد زيادة في المبالغ المدفوعة لهذه الاستمارة!
                    </h5>
                    <p style="font-size:12px; margin:0 0 12px 0; color:var(--text-secondary); line-height:1.6;">
                        المبلغ المدفوع سابقاً للاستمارة هو (<span id="surplus-paid-amount" style="font-weight:700;">0.00 د.ع</span>) بينما المجموع الكلي الحالي هو (<span id="surplus-grand-total" style="font-weight:700;">0.00 د.ع</span>). الفارق المالي الزائد هو (<span id="surplus-diff-amount" style="font-weight:700; color:#10b981;">0.00 د.ع</span>).
                    </p>
                    <div style="display:flex; gap:10px;" id="surplus-action-buttons">
                        <button type="button" class="btn" id="btn-refund-cash" style="background:#10b981; border:none; color:white; padding:8px 14px; font-size:12px; font-weight:700; border-radius:var(--radius-sm); cursor:pointer; display:flex; align-items:center; gap:6px;">
                            <i class="fa-solid fa-arrow-rotate-left"></i> إرجاع نقدي من الصندوق
                        </button>
                    </div>

                    <!-- Refund form sub-section (hidden by default) -->
                    <div id="refund-form-sub" style="display:none; margin-top:14px; padding-top:14px; border-top:1px dashed rgba(16,185,129,0.3);">
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:4px;">الصندوق المراد السحب منه</label>
                                <select id="refund-safe-select" style="width:100%; padding:8px 12px; font-size:12px; border-radius:var(--radius-sm); border:1px solid rgba(16,185,129,0.4); background:var(--bg-input); color:var(--text-primary); outline:none; font-family:var(--font-family);"></select>
                            </div>
                            <div>
                                <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:4px;">تاريخ السحب</label>
                                <input type="date" id="refund-date" style="width:100%; padding:7px 12px; font-size:12px; border-radius:var(--radius-sm); border:1px solid rgba(16,185,129,0.4); background:var(--bg-input); color:var(--text-primary); outline:none; font-family:var(--font-family);">
                            </div>
                        </div>
                        <div style="margin-bottom:12px;">
                            <label style="font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:4px;">ملاحظات / الوصف</label>
                            <input type="text" id="refund-desc" style="width:100%; padding:8px 12px; font-size:12px; border-radius:var(--radius-sm); border:1px solid rgba(16,185,129,0.4); background:var(--bg-input); color:var(--text-primary); outline:none; font-family:var(--font-family);">
                        </div>
                        <div style="display:flex; gap:10px;">
                            <button type="button" class="btn btn-success" id="btn-confirm-refund" style="background:#059669; border:none; color:white; padding:8px 14px; font-size:12px; font-weight:700; border-radius:var(--radius-sm); cursor:pointer;">
                                <i class="fa-solid fa-check"></i> تأكيد السحب والإرجاع
                            </button>
                            <button type="button" class="btn btn-secondary" id="btn-cancel-refund" style="padding:8px 14px; font-size:12px; font-weight:700; border-radius:var(--radius-sm); cursor:pointer;">
                                إلغاء
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-top:1px solid var(--border-color);">
                <div style="display:flex; gap:10px;">
                    <button type="button" class="btn btn-primary" id="add-purchase-item-btn" style="background:var(--gradient-primary); border:none;">
                        <i class="fa-solid fa-plus-circle"></i> إضافة مادة لقائمة الشراء
                    </button>
                    <button type="button" class="btn btn-success" id="pay-purchase-btn" style="background:linear-gradient(135deg, #10b981 0%, #059669 100%); border:none; color: white; padding: 10px 20px; font-weight: 700; border-radius: var(--radius-md); font-family: var(--font-family); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition);">
                        <i class="fa-solid fa-cash-register"></i> دفع وتحصيل الاستمارة
                    </button>
                    <button type="button" class="btn" id="refund-purchase-btn" style="background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border:none; color: white; padding: 10px 20px; font-weight: 700; border-radius: var(--radius-md); font-family: var(--font-family); cursor: pointer; display: none; align-items: center; gap: 8px; transition: var(--transition);">
                        <i class="fa-solid fa-arrow-rotate-left"></i> إرجاع المبلغ وتحويلها لديون
                    </button>
                    <button type="button" class="btn btn-warning" id="modal-send-pricing-btn" onclick="sendCurrentFormToPricing()" style="background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border:none; color: white; padding: 10px 18px; font-weight: 700; border-radius: var(--radius-md); font-family: var(--font-family); cursor: pointer; display: flex; align-items: center; gap: 8px; transition: var(--transition);" title="إرسال الاستمارة لصفحة التسعير أو فتح صفحة التسعير">
                        <i class="fa-solid fa-paper-plane"></i> <span id="modal-send-pricing-text">إرسال للتسعير</span>
                    </button>
                    <button type="button" class="btn btn-secondary-outline" id="print-purchase-btn" onclick="printCurrentForm()" style="padding:10px 18px; font-weight:700; border-radius:var(--radius-md); font-family:var(--font-family); cursor:pointer; display:flex; align-items:center; gap:6px;" title="طباعة قائمة شراء هذه الاستمارة">
                        <i class="fa-solid fa-print"></i> طباعة الاستمارة
                    </button>
                </div>
                <button type="button" class="btn btn-secondary" id="close-purchase-modal-btn-footer">إغلاق</button>
            </div>
        </div>
    </div>

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

    <script src="js/forms.js?v=<?php echo time(); ?>"></script>
</body>
</html>

