<?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="ar-search" class="form-input" placeholder="اسم العضو، النوع، الوصف...">
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">النوع</label>
                <select id="ar-type" class="form-select">
                    <option value="">الكل</option>
                    <option value="installment">أقساط</option>
                    <option value="subscription">اشتراك</option>
                    <option value="fine">غرامة</option>
                    <option value="membership_fee">عضوية</option>
                </select>
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">الحالة</label>
                <select id="ar-status" class="form-select">
                    <option value="">الكل</option>
                    <option value="overdue">متأخر فقط</option>
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Outstanding List -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
        <h3 style="margin:0;">المدينين المستحقة <span id="ar-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>
                    <th>الحالة</th>
                </tr>
            </thead>
            <tbody id="ar-tbody">
                <?php foreach ($outstanding as $ar): ?>
                    <?php
                    $typeLabel = match($ar['document_type'] ?? '') {
                        'installment' => 'أقساط',
                        'subscription' => 'اشتراك',
                        'fine' => 'غرامة',
                        'membership_fee' => 'عضوية',
                        default => $ar['document_type'] ?? '—',
                    };
                    $isOverdue = !empty($ar['due_date']) && strtotime($ar['due_date']) < time();
                    ?>
                    <tr data-search="<?= e(($ar['member_name'] ?? '') . ' ' . ($ar['description_ar'] ?? '') . ' ' . $typeLabel) ?>" data-type="<?= e($ar['document_type'] ?? '') ?>" data-overdue="<?= $isOverdue ? '1' : '0' ?>">
                        <td><?= e($ar['member_name'] ?? '—') ?></td>
                        <td style="font-size:12px;"><?= $typeLabel ?></td>
                        <td style="font-size:13px;"><?= e($ar['description_ar']) ?></td>
                        <td style="<?= $isOverdue ? 'color:#DC2626;font-weight:600;' : '' ?>"><?= e($ar['due_date']) ?></td>
                        <td style="direction:ltr;text-align:right;"><?= money($ar['total_amount']) ?></td>
                        <td style="direction:ltr;text-align:right;"><?= money($ar['paid_amount']) ?></td>
                        <td style="direction:ltr;text-align:right;font-weight:600;"><?= money($ar['balance']) ?></td>
                        <td style="font-size:12px;color:<?= $isOverdue ? '#DC2626' : '#F59E0B' ?>;"><?= $isOverdue ? 'متأخر' : 'مستحق' ?></td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($outstanding)): ?>
                    <tr><td colspan="8" style="text-align:center;color:#6B7280;padding:30px;">لا توجد مديونيات مستحقة</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<script>
(function(){
    var s=document.getElementById('ar-search'),t=document.getElementById('ar-type'),st=document.getElementById('ar-status'),c=document.getElementById('ar-count');
    var rows=document.querySelectorAll('#ar-tbody tr[data-search]');
    function f(){var q=(s.value||'').toLowerCase(),tv=t.value,sv=st.value,n=0;
        rows.forEach(function(r){var ms=!q||(r.getAttribute('data-search')||'').toLowerCase().indexOf(q)!==-1;
            var mt=!tv||r.getAttribute('data-type')===tv;
            var mo=sv!=='overdue'||r.getAttribute('data-overdue')==='1';
            if(ms&&mt&&mo){r.style.display='';n++;}else{r.style.display='none';}});
        c.textContent=(q||tv||sv)?'('+n+' نتيجة)':'';}
    if(s)s.addEventListener('input',f);if(t)t.addEventListener('change',f);if(st)st.addEventListener('change',f);
})();
</script>
<?php $__template->endSection(); ?>
