<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لوحة التحكم | إضافة المادة</title>
    <!-- Google Fonts: Cairo for beautiful 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"></script>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
$pageTitle = "إضافة المادة";
$pageIcon = "fa-boxes-stacked";
include 'includes/header.php';
?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Dashboard Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #4f46e5 0%, #6366f1 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(79, 70, 229, 0.1); color: #4f46e5;">
                            <i class="fa-solid fa-boxes-stacked"></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-tags"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-qty-type">0</h3>
                            <p>محاسبة بالعدد</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper purple" style="background-color: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                            <i class="fa-solid fa-weight-hanging"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-weight-type">0</h3>
                            <p>محاسبة بالوزن</p>
                        </div>
                    </div>
                </section>

                <!-- Data Table Section -->
                <section class="table-container-card">
                    <div class="card-header">
                        <div class="header-title-section">
                            <h2>قائمة المواد المسجلة</h2>
                            <p class="subtitle">جدول كشف المواد موضحاً الأسعار والنسب والجلاب المسؤول</p>
                        </div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <button class="btn btn-secondary-outline" onclick="exportExcel()" title="تصدير إلى Excel" style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px;">
                                <i class="fa-solid fa-file-excel" style="color: #1f7244; font-size: 15px;"></i> تصدير Excel
                            </button>
                            <button class="btn btn-secondary-outline" onclick="exportPDF()" title="تصدير إلى PDF" style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px;">
                                <i class="fa-solid fa-file-pdf" style="color: #d32f2f; font-size: 15px;"></i> تصدير PDF
                            </button>
                            <button class="btn btn-secondary-outline" onclick="printTable()" title="طباعة الجدول" style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px;">
                                <i class="fa-solid fa-print" style="font-size: 15px;"></i> طباعة الجدول
                            </button>
                            <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>
                    </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; 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, #6366f1 0%, #4f46e5 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(99, 102, 241, 0.2);">
                                <i class="fa-solid fa-clock-rotate-left"></i> مواد الوردية الحالية
                            </button>
                            <button id="btn-view-previous" onclick="setViewMode('previous')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color); box-shadow:none;">
                                <i class="fa-solid fa-calendar-days"></i> مواد الأيام السابقة
                            </button>
                        </div>
                        <!-- Filter Controls Row -->
                        <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                            <div style="position:relative; flex:1; min-width: 200px;">
                                <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') doSearchMaterials()"
                                    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>
                            <select id="filter-accounting-type" onchange="applyFilters()" style="padding: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;">
                                <option value="">كل أنواع المحاسبة</option>
                                <option value="عدد * سعر">عدد * سعر</option>
                                <option value="وزن * سعر">وزن * سعر</option>
                            </select>
                            <select id="filter-jallab" onchange="applyFilters()" style="padding: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;">
                                <option value="">جميع الجلابين</option>
                            </select>
                            <button id="search-btn" onclick="doSearchMaterials()" 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="clearSearchMaterials()" 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>
                        <!-- Entries Row -->
                        <div class="entries-selector" style="justify-content:flex-start;">
                            <span>عرض</span>
                            <select id="entries-count">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</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>

                    <!-- Table element -->
                    <div class="table-responsive">
                        <table class="data-table" id="materials-table">
                            <thead>
                                <tr>
                                    <th>التسلسل</th>
                                    <th>المادة</th>
                                    <th>نوع المحاسبة</th>
                                    <th>نوع العمولة</th>
                                    <th>حق العامل</th>
                                    <th>نوع المحصول (الجلاب)</th>
                                    <th>الاستخدامات</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody id="materials-tbody">
                                <!-- Dynamic Rows will be inserted here by JavaScript -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Empty State View -->
                    <div class="empty-state" id="empty-state-view">
                        <div class="empty-state-icon" style="background-color: rgba(79, 70, 229, 0.1); color: #4f46e5;">
                            <i class="fa-solid fa-boxes-stacked"></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 Material) -->
    <div class="modal-overlay" id="material-modal">
        <div class="modal-card modal-wide-compact" style="max-width: 820px; width: 95%;">
            <div class="modal-header" style="padding: 14px 22px;">
                <h3 id="modal-title">إضافة مادة جديدة</h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>
            <form id="material-form" novalidate>
                <input type="hidden" id="material-id">
                <div class="modal-body" style="padding: 16px 22px;">
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px;">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="material-name">اسم المادة <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-box input-icon"></i>
                                <input type="text" id="material-name" placeholder="أدخل اسم المادة (مثال: تفاح، برتقال)..." required minlength="2" style="padding: 10px 44px 10px 14px; font-size: 13px;">
                            </div>
                            <span class="error-msg" id="name-error">يرجى إدخال اسم المادة (حرفين على الأقل)</span>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="material-accounting-type">نوع المحاسبة <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-calculator input-icon"></i>
                                <select id="material-accounting-type" required style="width: 100%; padding: 10px 44px 10px 14px; 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); font-size: 13px; outline: none;">
                                    <option value="عدد * سعر" selected>عدد * سعر</option>
                                    <option value="وزن * سعر">وزن * سعر</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-primary); font-size: 13px;">نوع العمولة (اختر نوعًا أو أكثر) <span class="required">*</span></label>
                            <div id="commission-checkboxes-container" style="display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-input);">
                                <div id="commission-checkboxes-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
                                    <!-- Will be rendered dynamically via JS -->
                                </div>
                                
                                <!-- Custom Commission Option Builder -->
                                <div id="custom-commission-divider" style="display: flex; gap: 6px; margin-top: 4px; border-top: 1px dashed var(--border-color); padding-top: 8px; align-items: center;">
                                    <input type="text" id="custom-commission-input" placeholder="عمولة مخصصة (مثال: عدد * 500 أو 5%)..." style="flex: 1; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12px; outline: none; height: 30px;">
                                    <button type="button" id="btn-add-custom-commission" class="btn btn-secondary" style="padding: 0 10px; font-size: 11px; border-radius: var(--radius-sm); height: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; white-space: nowrap;">
                                        <i class="fa-solid fa-plus" style="margin-left: 4px;"></i> إضافة عمولة
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label style="display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-primary); font-size: 13px;">حق العامل <span class="required">*</span></label>
                            <div id="worker-share-container" style="display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-input);">
                                <div id="worker-share-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
                                    <!-- Will be rendered dynamically via JS -->
                                </div>
                                
                                <!-- Custom Worker Share Builder -->
                                <div id="custom-worker-share-divider" style="display: flex; gap: 6px; margin-top: 4px; border-top: 1px dashed var(--border-color); padding-top: 8px; align-items: center;">
                                    <input type="text" id="custom-worker-share-input" placeholder="حق عامل مخصص (مثال: العدد * 150)..." style="flex: 1; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12px; outline: none; height: 30px;">
                                    <button type="button" id="btn-add-custom-worker-share" class="btn btn-secondary" style="padding: 0 10px; font-size: 11px; border-radius: var(--radius-sm); height: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; white-space: nowrap;">
                                        <i class="fa-solid fa-plus" style="margin-left: 4px;"></i> إضافة خيار
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="grid-column: span 2; margin-bottom: 0;">
                            <label for="material-jallab">نوع المحصول (الجلاب) <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-user-tag input-icon"></i>
                                <select id="material-jallab" required style="width: 100%; padding: 10px 44px 10px 14px; 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); font-size: 13px; outline: none;">
                                    <!-- Will be loaded dynamically from Jallabin -->
                                </select>
                            </div>
                            <span class="error-msg" id="jallab-error">يرجى اختيار نوع المحصول (الجلاب) المرتبط بالمادة</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 12px 22px;">
                    <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>
    <!-- Jallab Materials View Modal -->
    <div class="modal-overlay" id="jallab-materials-modal">
        <div class="modal-card" style="max-width: 700px;">
            <div class="modal-header">
                <h3 id="jallab-modal-title">مواد الجلاب: ...</h3>
                <button class="modal-close-btn" id="close-jallab-modal-btn">&times;</button>
            </div>
            <div class="modal-body" style="max-height: 450px; overflow-y: auto; padding: 20px;">
                <div class="table-responsive" id="jallab-materials-table-wrapper">
                    <table class="data-table" style="font-size: 13px;">
                        <thead>
                            <tr>
                                <th>التسلسل</th>
                                <th>المادة</th>
                                <th>نوع المحاسبة</th>
                                <th>نوع العمولة</th>
                                <th>حق العامل</th>
                            </tr>
                        </thead>
                        <tbody id="jallab-materials-tbody">
                            <!-- Dynamic rows -->
                        </tbody>
                    </table>
                </div>
                <div id="jallab-materials-empty" style="display: none; text-align: center; padding: 40px 20px;">
                    <div class="empty-state-icon" style="background-color: var(--primary-light); color: var(--primary); width: 60px; height: 60px; font-size: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                        <i class="fa-solid fa-folder-open"></i>
                    </div>
                    <p style="color: var(--text-secondary); font-weight: 600;">لا توجد مواد مسجلة لهذا الجلاب اليوم.</p>
                </div>
            </div>
            <div class="modal-footer" style="justify-content: flex-end;">
                <button type="button" class="btn btn-secondary" id="close-jallab-modal-btn-footer">إغلاق</button>
            </div>
        </div>
    </div>

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

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


