<?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-users";
            include 'includes/header.php';
            ?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Dashboard Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 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(99, 102, 241, 0.1); color: #6366f1;">
                            <i class="fa-solid fa-users"></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" style="background-color: rgba(16, 185, 129, 0.1); color: #10b981;">
                            <i class="fa-solid fa-user-check"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-active">0</h3>
                            <p>حسابات مفعلة</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper red" style="background-color: rgba(239, 68, 68, 0.1); color: #ef4444;">
                            <i class="fa-solid fa-user-slash"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-suspended">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: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border: none;">
                                <i class="fa-solid fa-user-plus"></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;">
                        <!-- Search Row -->
                        <div style="display:flex; gap:8px; align-items:center;">
                            <div style="position:relative; flex:1;">
                                <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"
                                    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(99,102,241,0.12)'"
                                    onblur="this.style.borderColor='var(--border-color)'; this.style.boxShadow='none'"
                                >
                            </div>
                            <button id="search-btn" onclick="doSearch()" 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(99,102,241,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="clearSearch()" 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="customers-table">
                            <thead>
                                <tr>
                                    <th>التسلسل</th>
                                    <th>اسم الزبون</th>
                                    <th>رقم الهاتف</th>
                                    <th>عدد الاستمارات</th>
                                    <th>حالة الحساب</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody id="customers-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">
                            <i class="fa-solid fa-users"></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 Customer) -->
    <div class="modal-overlay" id="customer-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="customer-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>

                    <div class="form-group" style="margin-top:12px;">
                        <label for="customer-phone">رقم الهاتف <span style="font-weight:normal; color:var(--text-muted);">(اختياري)</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-phone input-icon"></i>
                            <input type="text" id="customer-phone" placeholder="أدخل رقم الهاتف..." dir="ltr" style="text-align:right;">
                        </div>
                    </div>

                    <div class="form-group" style="margin-top:12px;">
                        <label for="customer-status">حالة الحساب <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-user-gear input-icon"></i>
                            <select id="customer-status" 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;">
                                <option value="active" selected>مفعل</option>
                                <option value="suspended">معطل</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top:12px;">
                        <label for="customer-notes">ملاحظات إضافية <span style="font-weight:normal; color:var(--text-muted);">(اختياري)</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-sticky-note input-icon"></i>
                            <input type="text" id="customer-notes" placeholder="ملاحظات إضافية عن العميل...">
                        </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" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); border: none;">
                        <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>

    <!-- Modal: Customer Statement & Debt Details -->
    <div class="modal-overlay" id="customer-statement-modal">
        <div class="modal-card" style="max-width: 850px; width: 95%;">
            <div class="modal-header">
                <h3>كشف حساب الزبون والديون المستحقة 🧾</h3>
                <button class="modal-close-btn" onclick="closeCustomerStatementModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: white; padding: 20px; border-radius: var(--radius-md); margin-bottom: 20px;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
                        <h4 id="stmt-customer-name" style="font-size: 20px; margin: 0; color: white;">---</h4>
                        <span id="stmt-customer-phone" style="font-size: 13px; opacity: 0.9; color: white;"><i class="fa-solid fa-phone"></i> ---</span>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 12px;">
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">إجمالي قيمة الاستمارات</span>
                            <strong id="stmt-total-forms-val" style="font-size: 16px; color: white;">0.00 د.ع</strong>
                        </div>
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">إجمالي المدفوعات والتحصيلات</span>
                            <strong id="stmt-total-paid-val" style="font-size: 16px; color: white;">0.00 د.ع</strong>
                        </div>
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">المتبقي بذمته (الدين الحسابي)</span>
                            <strong id="stmt-remaining-debt-val" style="font-size: 16px; color: white;">0.00 د.ع</strong>
                        </div>
                    </div>
                </div>

                <div>
                    <h4 style="font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary);"><i class="fa-solid fa-list-check"></i> سجل الاستمارات والتحصيلات المالية:</h4>
                    <div style="max-height: 260px; overflow-y: auto; border: 1.5px solid var(--border-color); border-radius: var(--radius-md);">
                        <table class="data-table" style="width: 100%; border-collapse: collapse; font-size: 13px;">
                            <thead>
                                <tr style="background: var(--bg-input);">
                                    <th style="padding: 8px 12px; text-align: right;">الرقم</th>
                                    <th style="padding: 8px 12px; text-align: right;">النوع</th>
                                    <th style="padding: 8px 12px; text-align: right;">التاريخ</th>
                                    <th style="padding: 8px 12px; text-align: center;">المبلغ</th>
                                    <th style="padding: 8px 12px; text-align: right;">البيان والتفاصيل</th>
                                </tr>
                            </thead>
                            <tbody id="stmt-table-tbody">
                                <!-- Dynamic Rows -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeCustomerStatementModal()" style="width: 100%; justify-content: center;">إغلاق النافذة</button>
            </div>
        </div>
    </div>

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

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

