<?php $__template->layout('Layout.main'); ?>

<?php $__template->section('title'); ?>تقرير الدائنين<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<!-- Aging Summary -->
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px;">
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">جاري</div>
        <div style="font-size:18px;font-weight:700;color:#059669;"><?= money($aging['current_amount'] ?? '0.00') ?></div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">30 يوم</div>
        <div style="font-size:18px;font-weight:700;color:#F59E0B;"><?= money($aging['days_30'] ?? '0.00') ?></div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">60 يوم</div>
        <div style="font-size:18px;font-weight:700;color:#F97316;"><?= money($aging['days_60'] ?? '0.00') ?></div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">90 يوم</div>
        <div style="font-size:18px;font-weight:700;color:#DC2626;"><?= money($aging['days_90'] ?? '0.00') ?></div>
    </div>
    <div class="card" style="padding:15px;text-align:center;">
        <div style="font-size:12px;color:#6B7280;">+90 يوم</div>
        <div style="font-size:18px;font-weight:700;color:#991B1B;"><?= money($aging['over_90'] ?? '0.00') ?></div>
    </div>
    <div class="card" style="padding:15px;text-align:center;background:#FEF2F2;">
        <div style="font-size:12px;color:#6B7280;">الإجمالي</div>
        <div style="font-size:18px;font-weight:700;color:#DC2626;"><?= money($aging['total'] ?? '0.00') ?></div>
    </div>
</div>

<!-- Search/Filter -->
<div class="card" style="margin-bottom:15px;">
    <div style="padding:15px 20px;">
        <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:end;">
            <div style="flex:2;">
                <label class="form-label" style="font-size:12px;">بحث</label>
                <input type="text" id="ap-search" class="form-input" placeholder="اسم المورد، رقم الفاتورة...">
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">الحالة</label>
                <select id="ap-status" class="form-select">
                    <option value="">الكل</option>
                    <option value="overdue">متأخر فقط</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;">الدائنون المستحقة <span id="ap-count" style="font-size:13px;color:#6B7280;font-weight:400;"></span></h3>
    </div>
    <div class="table-responsive">
        <table class="data-table" style="width:100%;">
            <thead>
                <tr>
                    <th>المورد</th>
                    <th>رقم الفاتورة</th>
                    <th>تاريخ الاستحقاق</th>
                    <th>المبلغ</th>
                    <th>المدفوع</th>
                    <th>الرصيد</th>
                    <th>الحالة</th>
                </tr>
            </thead>
            <tbody id="ap-tbody">
                <?php foreach ($outstanding as $ap): ?>
                    <?php $isOverdue = !empty($ap['due_date']) && strtotime($ap['due_date']) < time(); ?>
                    <tr data-search="<?= e(($ap['supplier_name'] ?? '') . ' ' . ($ap['invoice_number'] ?? '')) ?>" data-overdue="<?= $isOverdue ? '1' : '0' ?>">
                        <td><?= e($ap['supplier_name'] ?? '—') ?></td>
                        <td style="direction:ltr;text-align:right;"><?= e($ap['invoice_number']) ?></td>
                        <td style="<?= $isOverdue ? 'color:#DC2626;font-weight:600;' : '' ?>"><?= e($ap['due_date']) ?></td>
                        <td style="direction:ltr;text-align:right;"><?= money($ap['total_amount']) ?></td>
                        <td style="direction:ltr;text-align:right;"><?= money($ap['paid_amount']) ?></td>
                        <td style="direction:ltr;text-align:right;font-weight:600;"><?= money($ap['balance']) ?></td>
                        <td style="font-size:12px;color:<?= $isOverdue ? '#DC2626' : '#F59E0B' ?>;"><?= $isOverdue ? 'متأخر' : 'مستحق' ?></td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($outstanding)): ?>
                    <tr><td colspan="7" style="text-align:center;color:#6B7280;padding:30px;">لا توجد التزامات مستحقة</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<script>
(function(){
    var s=document.getElementById('ap-search'),st=document.getElementById('ap-status'),c=document.getElementById('ap-count');
    var rows=document.querySelectorAll('#ap-tbody tr[data-search]');
    function f(){var q=(s.value||'').toLowerCase(),sv=st.value,n=0;
        rows.forEach(function(r){var ms=!q||(r.getAttribute('data-search')||'').toLowerCase().indexOf(q)!==-1;
            var mo=sv!=='overdue'||r.getAttribute('data-overdue')==='1';
            if(ms&&mo){r.style.display='';n++;}else{r.style.display='none';}});
        c.textContent=(q||sv)?'('+n+' نتيجة)':'';}
    if(s)s.addEventListener('input',f);if(st)st.addEventListener('change',f);
})();
</script>
<?php $__template->endSection(); ?>
