<?php
ob_start();
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?v=<?php echo time(); ?>"></script>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
$pageTitle = "صناديق الأموال";
$pageIcon = "fa-vault";
include 'includes/header.php';
?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Dashboard Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #0d9488 0%, #14b8a6 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(13, 148, 136, 0.1); color: #0d9488;">
                            <i class="fa-solid fa-vault"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-balance">0 د.ع</h3>
                            <p>إجمالي رصيد الصناديق</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper green">
                            <i class="fa-solid fa-circle-dollar-to-slot"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-primary-balance">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-cash-register"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-secondary-balance">0 د.ع</h3>
                            <p>رصيد الصناديق الثانوية</p>
                        </div>
                    </div>
                </section>

                <!-- Two-Column Layout Grid -->
                <div class="safes-split-grid">
                    <!-- Right Side: Safes List Table Card -->
                    <section class="table-container-card safe-list-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">
                                <i class="fa-solid fa-plus-circle"></i>
                                إضافة صندوق
                            </button>
                        </div>

                        <!-- Search bar inside panel -->
                        <div class="panel-search-bar">
                            <div class="panel-search-inner">
                                <div class="panel-search-input-wrap">
                                    <i class="fa-solid fa-magnifying-glass panel-search-icon"></i>
                                    <input
                                        type="text"
                                        id="search-input"
                                        class="panel-search-input"
                                        placeholder="ابحث باسم الصندوق أو نوعه..."
                                        autocomplete="off"
                                        onkeydown="if(event.key==='Enter') doSearchSafes()"
                                    >
                                </div>
                                <button class="panel-search-btn" id="search-btn" onclick="doSearchSafes()">
                                    <i class="fa-solid fa-search"></i> بحث
                                </button>
                                <button class="panel-search-clear" id="search-clear-btn" title="مسح البحث" onclick="clearSearchSafes()">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                        </div>
                        <div class="panel-results-info" id="panel-results-info">
                            تم إيجاد <span id="panel-results-count">0</span> نتيجة
                        </div>

                        <!-- Digital Cards Grid for Safes -->
                        <div class="safes-cards-grid" id="safes-cards-container">
                            <!-- Dynamic Safe Cards will be loaded here -->
                        </div>

                        <!-- Empty State View -->
                        <div class="empty-state" id="empty-state-view">
                            <div class="empty-state-icon">
                                <i class="fa-solid fa-vault"></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>
                    </section>

                    <!-- Left Side: Transaction History Log Card -->
                    <section class="table-container-card transactions-card">
                        <div class="card-header bg-subtle">
                            <div class="header-title-section">
                                <h2 id="transactions-log-title">حركات الصندوق: (اختر صندوقاً لعرض حركاته)</h2>
                                <p class="subtitle">سجل حركات السحب والإيداع المفصلة للصندوق المختار</p>
                            </div>
                            <div class="header-actions" style="display: flex; gap: 8px;">
                                <button class="btn btn-danger" id="reset-safe-btn" disabled style="background-color: var(--danger); border-color: var(--danger); display: flex; align-items: center; gap: 6px;">
                                    <i class="fa-solid fa-rotate-left"></i>
                                    تصفير القاصة
                                </button>
                                <button class="btn btn-primary" id="open-transaction-modal-btn" disabled>
                                    <i class="fa-solid fa-plus-circle"></i>
                                    إضافة حركة مالية
                                </button>
                            </div>
                        </div>

                        <!-- Filter & Export Controls for Safe Transactions -->
                        <div id="safe-tx-filter-bar" style="display:none; padding:10px 16px; background:var(--bg-input); border-bottom:1px solid var(--border-color); flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;">
                            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">من:</label>
                                    <input type="date" id="tx-from-date" onchange="applyTxDateFilter()" style="padding:4px 8px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-primary); border-radius:var(--radius-sm); font-size:12px; outline:none;">
                                </div>
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <label style="font-size:11px; font-weight:700; color:var(--text-secondary);">إلى:</label>
                                    <input type="date" id="tx-to-date" onchange="applyTxDateFilter()" style="padding:4px 8px; border:1px solid var(--border-color); background:var(--bg-card); color:var(--text-primary); border-radius:var(--radius-sm); font-size:12px; outline:none;">
                                </div>
                                <button type="button" onclick="setQuickTxDate('today')" class="btn btn-sm btn-secondary-outline" style="padding:3px 8px; font-size:11px; border-radius:10px;">اليوم</button>
                                <button type="button" onclick="setQuickTxDate('all')" class="btn btn-sm btn-secondary-outline" style="padding:3px 8px; font-size:11px; border-radius:10px;">الكل</button>
                            </div>

                            <div style="display:flex; gap:6px;">
                                <button type="button" onclick="exportSafeTransactionsToExcel()" class="btn btn-secondary-outline" style="font-size:12px; padding:6px 12px; font-weight:700; gap:5px;">
                                    <i class="fa-solid fa-file-excel" style="color:#10b981;"></i> تصدير Excel
                                </button>
                                <button type="button" onclick="printSafeTransactionsReport()" class="btn btn-primary" style="font-size:12px; padding:6px 12px; font-weight:700; gap:5px;">
                                    <i class="fa-solid fa-print"></i> طباعة الكشف
                                </button>
                            </div>
                        </div>

                        <!-- Transactions Banking Activity Feed -->
                        <div class="activities-feed" id="transactions-feed" style="display: none;">
                            <!-- Dynamic Transactions Timeline Feed -->
                        </div>

                        <!-- Empty State for Transactions -->
                        <div class="empty-state" id="empty-state-transactions" style="display: flex;">
                            <div class="empty-state-icon" style="background-color: rgba(99, 102, 241, 0.1); color: #6366f1;">
                                <i class="fa-solid fa-money-bill-transfer"></i>
                            </div>
                            <h3 id="transactions-empty-title">لم يتم اختيار أي صندوق</h3>
                            <p id="transactions-empty-desc">الرجاء النقر على زر "عرض الحركات" بجانب اسم الصندوق لعرض العمليات المالية الخاصة به.</p>
                        </div>
                    </section>
                </div>
            </div>
        </main>
    </div>

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

                    <div class="form-group">
                        <label for="safe-type">نوع الصندوق <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-circle-nodes input-icon"></i>
                            <select id="safe-type" 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="primary" selected>صندوق أساسي</option>
                                <option value="secondary">صندوق ثانوي</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel-safe-modal-btn">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="save-safe-btn">
                        <i class="fa-solid fa-save"></i>
                        <span>حفظ البيانات</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Form: Add Financial Transaction -->
    <div class="modal-overlay" id="transaction-modal">
        <div class="modal-card">
            <div class="modal-header">
                <h3>إضافة حركة مالية جديدة</h3>
                <button class="modal-close-btn" id="close-tx-modal-btn">&times;</button>
            </div>
            <form id="transaction-form" novalidate>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="tx-type">نوع الحركة المالية <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-arrow-right-arrow-left input-icon"></i>
                            <select id="tx-type" 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="deposit" selected>إيداع (تغذية الصندوق)</option>
                                <option value="withdrawal">سحب (مصروفات أو سحب نقدي)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="tx-debt-repayment-group" style="margin-top: 10px;">
                        <label class="checkbox-container" style="display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;">
                            <input type="checkbox" id="tx-is-debt-repayment" style="width: 18px; height: 18px; cursor: pointer;">
                            <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);">سداد دين من قبل زبون؟</span>
                        </label>
                    </div>

                    <div class="form-group" id="tx-debtor-group" style="display: none;">
                        <label for="tx-debtor-id">الزبون المدين <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-user-tag input-icon"></i>
                            <select id="tx-debtor-id" 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="">-- اختر الزبون --</option>
                            </select>
                        </div>
                        <span class="error-msg" id="tx-debtor-error">يرجى اختيار زبون مدين</span>
                    </div>

                    <div class="form-group" id="tx-form-payment-group" style="margin-top: 10px;">
                        <label class="checkbox-container" style="display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;">
                            <input type="checkbox" id="tx-is-form-payment" style="width: 18px; height: 18px; cursor: pointer;">
                            <span style="font-size: 14px; font-weight: 600; color: var(--text-primary);">دفع مبلغ استمارة شراء؟</span>
                        </label>
                    </div>

                    <div class="form-group" id="tx-form-select-group" style="display: none;">
                        <label for="tx-form-id">استمارة الشراء <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-file-invoice-dollar input-icon"></i>
                            <select id="tx-form-id" 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="">-- اختر الاستمارة --</option>
                            </select>
                        </div>
                        <span class="error-msg" id="tx-form-error">يرجى اختيار استمارة شراء</span>
                    </div>

                    <div class="form-group">
                        <label for="tx-description">البيان (الوصف) <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-file-contract input-icon"></i>
                            <input type="text" id="tx-description" placeholder="أدخل تفصيل الحركة المالية..." required minlength="3">
                        </div>
                        <span class="error-msg" id="tx-description-error">يرجى إدخال بيان صحيح (3 أحرف على الأقل)</span>
                    </div>

                    <div class="form-group">
                        <label for="tx-date">تاريخ الحركة <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-calendar-day input-icon"></i>
                            <input type="date" id="tx-date" required>
                        </div>
                        <span class="error-msg" id="tx-date-error">يرجى اختيار تاريخ صالح</span>
                    </div>

                    <div class="form-group">
                        <label for="tx-amount">المبلغ (د.ع) <span class="required">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-money-bill-1-wave input-icon"></i>
                            <input type="text" id="tx-amount" placeholder="0" required>
                        </div>
                        <span class="error-msg" id="tx-amount-error">يرجى إدخال مبلغ صحيح أكبر من الصفر</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel-tx-modal-btn">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="save-tx-btn">
                        <i class="fa-solid fa-paper-plane"></i>
                        <span>تسجيل الحركة الماليّة</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Safe 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-triangle-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: Debt Details -->
    <div class="modal-overlay" id="debt-details-modal">
        <div class="modal-card">
            <div class="modal-header">
                <h3>تفاصيل سداد الدين 🧾</h3>
                <button class="modal-close-btn" id="close-debt-details-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="debt-detail-info-card" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; padding: 20px; border-radius: var(--radius-md); margin-bottom: 20px;">
                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                        <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; font-family: var(--font-family);" id="modal-debtor-avatar">
                            م
                        </div>
                        <div>
                            <h4 id="modal-debtor-name" style="font-size: 18px; margin: 0; color: white;">اسم الزبون</h4>
                            <span id="modal-debtor-phone" style="font-size: 13px; opacity: 0.8; color: white;"><i class="fa-solid fa-phone"></i> ---</span>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px;">
                        <div>
                            <span style="font-size: 12px; opacity: 0.8; display: block; color: white;">إجمالي الديون</span>
                            <strong id="modal-debtor-total-debt" style="font-size: 16px; color: white;">0.00 د.ع</strong>
                        </div>
                        <div>
                            <span style="font-size: 12px; opacity: 0.8; display: block; color: white;">إجمالي المسدد</span>
                            <strong id="modal-debtor-total-repayments" style="font-size: 16px; color: white;">0.00 د.ع</strong>
                        </div>
                    </div>
                </div>

                <div class="debt-balance-highlight" style="background-color: var(--primary-light); border: 1px solid rgba(59, 130, 246, 0.2); padding: 15px; border-radius: var(--radius-md); text-align: center; margin-bottom: 20px;">
                    <span style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 5px;">المتبقي بذمته حالياً</span>
                    <h2 id="modal-debtor-remaining-balance" style="color: var(--primary); font-size: 28px; font-weight: 800; margin: 0;">0.00 د.ع</h2>
                </div>

                <div style="border-top: 1px solid var(--border-color); padding-top: 15px;">
                    <h4 style="font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary);"><i class="fa-solid fa-receipt"></i> تفاصيل هذه الحركة المالية:</h4>
                    <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
                        <tr style="border-bottom: 1px solid var(--border-color);">
                            <td style="padding: 8px 0; color: var(--text-secondary);">المبلغ المسدد:</td>
                            <td style="padding: 8px 0; text-align: left; font-weight: bold; color: var(--success);" id="modal-tx-amount">0.00 د.ع</td>
                        </tr>
                        <tr style="border-bottom: 1px solid var(--border-color);">
                            <td style="padding: 8px 0; color: var(--text-secondary);">تاريخ الحركة:</td>
                            <td style="padding: 8px 0; text-align: left; font-weight: bold; color: var(--text-primary);" id="modal-tx-date">---</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px 0; color: var(--text-secondary);">البيان:</td>
                            <td style="padding: 8px 0; text-align: left; color: var(--text-primary);" id="modal-tx-desc">---</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="close-debt-details-btn" style="width: 100%; justify-content: center;">إغلاق النافذة</button>
            </div>
        </div>
    </div>

    <!-- Modal: Form Payment Details -->
    <div class="modal-overlay" id="form-payment-details-modal">
        <div class="modal-card" style="max-width: 950px; width: 95%; margin: 0 auto;">
            <div class="modal-header">
                <h3>تفاصيل دفعة استمارة الشراء 🧾</h3>
                <button class="modal-close-btn" id="close-form-payment-details-modal-btn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-payment-info-card" style="background: linear-gradient(135deg, #10b981 0%, #059669 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: 15px;">
                        <div>
                            <span style="font-size: 12px; opacity: 0.8; display: block; color: white;">الزبون صاحب الاستمارة</span>
                            <h4 id="modal-form-customer-name" style="font-size: 18px; margin: 0; color: white;">---</h4>
                        </div>
                        <div style="background: rgba(255,255,255,0.2); padding: 5px 12px; border-radius: 20px; font-weight: bold; color: white;" id="modal-form-serial">
                            #---
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 15px;">
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">إجمالي قيمة الاستمارة</span>
                            <strong id="modal-form-total-value" style="font-size: 15px; color: white;">0.00 د.ع</strong>
                        </div>
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">إجمالي المدفوع سابقاً</span>
                            <strong id="modal-form-total-paid" style="font-size: 15px; color: white;">0.00 د.ع</strong>
                        </div>
                        <div>
                            <span style="font-size: 11px; opacity: 0.8; display: block; color: white;">المتبقي غير المدفوع</span>
                            <strong id="modal-form-total-remaining" style="font-size: 15px; color: white;">0.00 د.ع</strong>
                        </div>
                    </div>
                </div>

                <div style="background-color: var(--success-light); border: 1px solid rgba(16, 185, 129, 0.2); padding: 15px; border-radius: var(--radius-md); text-align: center; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <div>
                        <span style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 5px;">دفعة هذه الحركة</span>
                        <h2 id="modal-form-tx-amount" style="color: var(--success); font-size: 24px; font-weight: 800; margin: 0;">0.00 د.ع</h2>
                    </div>
                    <div>
                        <span style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 5px;">الرصيد المتبقي بعد الحركة</span>
                        <h2 id="modal-form-remaining-after" style="color: #ea580c; font-size: 24px; font-weight: 800; margin: 0;">0.00 د.ع</h2>
                    </div>
                </div>

                <!-- Purchase Items Table in the modal -->
                <div>
                    <h4 style="font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary);"><i class="fa-solid fa-list"></i> المواد المدرجة بالاستمارة:</h4>
                    <div style="max-height: 280px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md);">
                        <table style="width: 100%; border-collapse: collapse; font-size: 12px; text-align: right;">
                            <thead>
                                <tr style="background-color: rgba(0,0,0,0.02); border-bottom: 1px solid var(--border-color);">
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: right;">المادة</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">الكمية</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">الوزن</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">السعر</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">حق العامل</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">عمولة المادة</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">عمولة 10%</th>
                                    <th style="padding: 10px 8px; color: var(--text-secondary); text-align: center;">الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody id="modal-form-items-tbody" style="color: var(--text-primary);">
                                <!-- Dynamic items -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="display: flex; gap: 10px;">
                <a href="#" id="modal-form-go-to-invoice-btn" class="btn btn-primary" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; gap: 8px; font-weight: 700; height: 40px; border-radius: var(--radius-md);">
                    <i class="fa-solid fa-up-right-from-square"></i>
                    الانتقال للفاتورة بالتفصيل
                </a>
                <button type="button" class="btn btn-secondary" id="close-form-payment-details-btn" style="flex: 1; justify-content: center; height: 40px; border-radius: var(--radius-md);">إغلاق النافذة</button>
            </div>
        </div>
    </div>

    <!-- Reset Safe Confirmation Modal -->
    <div class="modal-overlay" id="reset-safe-modal">
        <div class="modal-card" style="max-width: 450px;">
            <div class="modal-header">
                <h3><i class="fa-solid fa-rotate-left" style="margin-left: 8px; color: var(--danger);"></i>تصفير القاصة وتسليم النقدية</h3>
                <button class="modal-close-btn" id="close-reset-modal-btn">&times;</button>
            </div>
            <form id="reset-safe-form">
                <div class="modal-body">
                    <p style="margin-bottom: 15px; font-size: 13px; color: var(--text-secondary); line-height: 1.6;">سيتم تصفير رصيد القاصة بالكامل وتسجيل حركة سحب بالقيمة المتبقية. يرجى إدخال اسم الشخص المستلم للأموال:</p>
                    <div class="form-group">
                        <label for="reset-receiver-name">اسم مستلم الأموال <span class="required" style="color: var(--danger);">*</span></label>
                        <div class="input-wrapper">
                            <i class="fa-solid fa-user-check input-icon"></i>
                            <input type="text" id="reset-receiver-name" required placeholder="مثال: أحمد علي (المدير المالي)" class="form-control" 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); font-size: 13.5px; outline: none; transition: var(--transition);">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="display: flex; gap: 10px;">
                    <button type="button" class="btn btn-secondary" id="cancel-reset-modal-btn" style="flex: 1; height: 40px; border-radius: var(--radius-md); justify-content: center;">إلغاء</button>
                    <button type="submit" class="btn btn-danger" style="flex: 1; background-color: var(--danger); border-color: var(--danger); height: 40px; border-radius: var(--radius-md); justify-content: center;">تأكيد التصفير</button>
                </div>
            </form>
        </div>
    </div>

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

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

