<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-primary h-100"><div class="card-body">
            <h6 class="text-muted mb-1"><?= lang('common.all') ?></h6>
            <h3 class="mb-0"><?= number_format($stats['total'] ?? 0) ?></h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card border-success h-100"><div class="card-body">
            <h6 class="text-muted mb-1">Active</h6>
            <h3 class="mb-0"><?= number_format($stats['active'] ?? 0) ?></h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card border-danger h-100"><div class="card-body">
            <h6 class="text-muted mb-1">Defaulted</h6>
            <h3 class="mb-0"><?= number_format($stats['defaulted'] ?? 0) ?></h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card border-warning h-100"><div class="card-body">
            <h6 class="text-muted mb-1"><?= lang('adv_finance.remaining') ?></h6>
            <h3 class="mb-0"><?= format_money($stats['total_remaining'] ?? 0) ?></h3>
        </div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2 align-items-end" data-filter-table="installment-table">
            <div class="col-md-3">
                <label class="form-label"><?= lang('common.status') ?></label>
                <select name="status_filter" class="form-select form-select-sm" onchange="DataTableHelper.reload('installment-table')">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="active">Active</option>
                    <option value="completed">Completed</option>
                    <option value="defaulted">Defaulted</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-md-3 ms-auto text-end">
                <?php if (auth_can('installments.create')): ?>
                <a href="/advanced-finance/installments/create" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i><?= lang('adv_finance.create_plan') ?>
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="installment-table" class="table table-striped table-hover w-100"
               data-url="/advanced-finance/installments/datatable"
               data-columns='[
                   {"data":"plan_number","title":"<?= lang('adv_finance.plan_number') ?>"},
                   {"data":"member_name","title":"<?= lang('adv_finance.member') ?>"},
                   {"data":"total_amount","title":"<?= lang('adv_finance.total_amount') ?>"},
                   {"data":"total_paid","title":"<?= lang('adv_finance.total_paid') ?>"},
                   {"data":"total_remaining","title":"<?= lang('adv_finance.remaining') ?>"},
                   {"data":"installments","title":"<?= lang('adv_finance.num_installments') ?>"},
                   {"data":"next_due_date","title":"<?= lang('adv_finance.next_due') ?>"},
                   {"data":"status_badge","title":"<?= lang('common.status') ?>","orderable":false},
                   {"data":"id","title":"<?= lang('common.actions') ?>","orderable":false,"searchable":false}
               ]'>
            <thead><tr>
                <th><?= lang('adv_finance.plan_number') ?></th>
                <th><?= lang('adv_finance.member') ?></th>
                <th><?= lang('adv_finance.total_amount') ?></th>
                <th><?= lang('adv_finance.total_paid') ?></th>
                <th><?= lang('adv_finance.remaining') ?></th>
                <th><?= lang('adv_finance.num_installments') ?></th>
                <th><?= lang('adv_finance.next_due') ?></th>
                <th><?= lang('common.status') ?></th>
                <th><?= lang('common.actions') ?></th>
            </tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('installment-table', {
        columnDefs: [{
            targets: -1,
            render: function(data, type, row) {
                return '<a href="/advanced-finance/installments/' + data + '" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a>';
            }
        }]
    });
});
</script>
<?php $__view->endPush() ?>