<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تقرير الفواتير المتأخرة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/procurement" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<?php $a = $aging ?? []; ?>

<!-- Aging Summary -->
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:6px;">1-30 يوم</div>
        <div style="font-size:24px;font-weight:800;color:#D97706;direction:ltr;"><?= money($a['days_1_30'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:6px;">31-60 يوم</div>
        <div style="font-size:24px;font-weight:800;color:#EA580C;direction:ltr;"><?= money($a['days_31_60'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:6px;">61-90 يوم</div>
        <div style="font-size:24px;font-weight:800;color:#DC2626;direction:ltr;"><?= money($a['days_61_90'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;margin-bottom:6px;">أكثر من 90 يوم</div>
        <div style="font-size:24px;font-weight:800;color:#991B1B;direction:ltr;"><?= money($a['over_90'] ?? 0) ?></div>
    </div>
    <div class="card" style="padding:20px;text-align:center;background:linear-gradient(135deg, #DC262610, #DC262620);">
        <div style="font-size:12px;color:#6B7280;margin-bottom:6px;">إجمالي المتأخر</div>
        <div style="font-size:24px;font-weight:800;color:#DC2626;direction:ltr;"><?= money($a['total_overdue'] ?? 0) ?></div>
    </div>
</div>

<!-- Overdue List -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="clock" style="width:18px;height:18px;color:#DC2626;"></i>
        <h3 style="margin:0;color:#DC2626;font-size:15px;">الفواتير المتأخرة</h3>
    </div>
    <?php if (!empty($overdue)): ?>
    <div class="table-responsive">
        <table class="data-table">
            <thead><tr><th>رقم الفاتورة</th><th>المورد</th><th>تاريخ الاستحقاق</th><th>أيام التأخير</th><th>المبلغ الأصلي</th><th>المدفوع</th><th>المتبقي</th></tr></thead>
            <tbody>
                <?php foreach ($overdue as $ap): ?>
                <?php
                $days = (int) ($ap['days_overdue'] ?? 0);
                $urgencyColor = $days > 90 ? '#991B1B' : ($days > 60 ? '#DC2626' : ($days > 30 ? '#EA580C' : '#D97706'));
                ?>
                <tr>
                    <td style="font-weight:600;"><code style="font-size:12px;background:#F3F4F6;padding:2px 8px;border-radius:4px;"><?= e($ap['invoice_number'] ?? '') ?></code></td>
                    <td style="font-weight:600;"><?= e($ap['supplier_name'] ?? '') ?></td>
                    <td style="font-size:13px;"><?= e($ap['due_date'] ?? '') ?></td>
                    <td>
                        <span style="display:inline-block;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:700;background:<?= $urgencyColor ?>15;color:<?= $urgencyColor ?>;">
                            <?= $days ?> يوم
                        </span>
                    </td>
                    <td style="direction:ltr;text-align:left;"><?= money($ap['total_amount'] ?? 0) ?></td>
                    <td style="direction:ltr;text-align:left;color:#059669;"><?= money($ap['paid_amount'] ?? 0) ?></td>
                    <td style="font-weight:700;direction:ltr;text-align:left;color:#DC2626;"><?= money($ap['balance'] ?? 0) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:60px 20px;text-align:center;">
        <div style="margin-bottom:15px;"><i data-lucide="check-circle" style="width:48px;height:48px;color:#059669;"></i></div>
        <h3 style="color:#059669;margin:0 0 8px;">لا توجد فواتير متأخرة</h3>
        <p style="color:#9CA3AF;font-size:14px;margin:0;">جميع الفواتير مسددة في مواعيدها.</p>
    </div>
    <?php endif; ?>
</div>

<script>document.addEventListener('DOMContentLoaded', function() { if (typeof lucide !== 'undefined') lucide.createIcons(); });</script>
<?php $__template->endSection(); ?>
