<?php
$page_title = 'مراجعة الفواتير';
require_once 'includes/header.php';

$invoices = getInvoices();
?>

<div class="content-section" id="review-invoices">
    <div class="section-header">
        <h3><i class="fas fa-file-invoice"></i> مراجعة الفواتير</h3>
    </div>

    <!-- شريط البحث -->
    <div class="search-bar">
        <input type="text" id="invoiceSearch" placeholder="🔍 ابحث برقم الفاتورة، الاسم، التاريخ...">
    </div>
    
    <div class="table-container">
        <table class="items-table" id="invoiceTable">
            <thead>
                <tr>
                    <th>رقم الفاتورة</th>
                    <th>التاريخ</th>
                    <th>اسم العميل</th>
                    <th>المبلغ الإجمالي</th>
                    <th>الحالة</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($invoices)): ?>
                    <tr>
                        <td colspan="6" class="no-data">لا توجد فواتير مسجلة</td>
                    </tr>
                <?php else: ?>
                    <?php foreach ($invoices as $invoice): ?>
                        <tr class="fade-in">
                            <td><?= $invoice['invoice_number'] ?></td>
                            <td><?= formatDate($invoice['date']) ?></td>
                            <td><?= $invoice['customer_name'] ?? 'عميل نقدي' ?></td>
                            <td><?= formatCurrency($invoice['total_amount']) ?></td>
                            <td>
                                <?php 
                                $status = $invoice['status'] ?? 'paid';
                                $statusClass = [
                                    'paid' => 'badge-paid',
                                    'unpaid' => 'badge-unpaid',
                                    'overdue' => 'badge-overdue',
                                    'pending' => 'badge-pending'
                                ][$status];
                                ?>
                                <span class="badge <?= $statusClass ?>">
                                    <?= ucfirst($status) ?>
                                </span>
                            </td>
                            <td class="actions">
                                <a href="view_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" class="btn btn-view">
                                    <i class="fas fa-eye"></i> طباعة شهادة الضمان
                                </a>
                                <a href="print_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" target="_blank" class="btn btn-print">
                                  <i class="fas fa-print"></i> طباعة الارشادات
                                </a>
                                <a href="edit_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" class="btn btn-edit">
                                    <i class="fas fa-edit"></i> تعديل
                                </a>
                                <a href="delete_invoice.php?num=<?= urlencode($invoice['invoice_number']) ?>" class="btn btn-delete" onclick="return confirm('هل أنت متأكد من حذف هذه الفاتورة؟')">
                                    <i class="fas fa-trash"></i> حذف
                                </a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<style>
/* الحاوية */
.content-section {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* العنوان */
.section-header h3 {
    margin-bottom: 15px;
        font-weight: 700;
        color: #0d6efd;
}

/* البحث */
.search-bar {
    margin-bottom: 20px;
    text-align: left;
}
.search-bar input {
    width: 100%;
    max-width: 350px;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    transition: 0.3s;
}
.search-bar input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59,130,246,0.3);
}

/* الجدول */
.table-container {
    overflow-x: auto;
}
.items-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
}
.items-table thead {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #fff;
}
.items-table th, .items-table td {
    padding: 12px 14px;
    text-align: center;
}
.items-table tbody tr:hover {
    background: #f3f4f6;
    transition: 0.3s;
}
.no-data {
    text-align: center;
    color: #888;
    padding: 15px;
}

/* Badges */
.badge {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}
.badge-paid { background: #16a34a; }
.badge-unpaid { background: #dc2626; }
.badge-overdue { background: #f59e0b; }
.badge-pending { background: #6b7280; }

/* الأزرار */
.actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}
.btn:hover { opacity: 0.85; transform: translateY(-2px); }

.btn-view { background: #3b82f6; }
.btn-print { background: #10b981; }
.btn-edit { background: #f59e0b; }
.btn-delete { background: #ef4444; }

/* Animation */
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
// فلترة البحث
document.getElementById('invoiceSearch').addEventListener('keyup', function() {
    let filter = this.value.toLowerCase();
    let rows = document.querySelectorAll("#invoiceTable tbody tr");
    rows.forEach(row => {
        let text = row.innerText.toLowerCase();
        row.style.display = text.includes(filter) ? "" : "none";
    });
});
</script>

<?php require_once 'includes/footer.php'; ?>
