<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><?= lang('finance.payments') ?></h4>
    <?php if (auth_can('payments.create')): ?>
    <a href="/finance/payments/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('finance.record_payment') ?></a>
    <?php endif; ?>
</div>

<div class="card mb-3">
    <div class="card-body py-2" data-filter-table="payments-table">
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('finance.method') ?></label>
                <select name="filter_method" class="form-select form-select-sm filter-control">
                    <option value=""><?= lang('common.all') ?></option>
                    <?php foreach ($methods as $m): ?>
                    <option value="<?= $m['id'] ?>"><?= e($m['name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('common.status') ?></label>
                <select name="filter_status" class="form-select form-select-sm filter-control">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="completed">Completed</option>
                    <option value="pending">Pending</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="reversed">Reversed</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('finance.date_from') ?></label>
                <input type="date" name="filter_from" class="form-control form-control-sm filter-control">
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('finance.date_to') ?></label>
                <input type="date" name="filter_to" class="form-control form-control-sm filter-control">
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="payments-table" class="table table-striped table-hover w-100"
               data-url="/finance/payments/datatable"
               data-columns='[
                   {"data":"id","title":"#","width":"40px"},
                   {"data":"payment_number","title":"<?= lang('finance.payment_no') ?>"},
                   {"data":"member_name","title":"<?= lang('finance.member') ?>"},
                   {"data":"amount","title":"<?= lang('finance.amount') ?>"},
                   {"data":"method_name","title":"<?= lang('finance.method') ?>"},
                   {"data":"payment_date","title":"<?= lang('finance.date') ?>"},
                   {"data":"status","title":"<?= lang('common.status') ?>"},
                   {"data":"actions","title":"<?= lang('common.actions') ?>","orderable":false,"searchable":false}
               ]'>
            <thead><tr><th>#</th><th><?= lang('finance.payment_no') ?></th><th><?= lang('finance.member') ?></th><th><?= lang('finance.amount') ?></th><th><?= lang('finance.method') ?></th><th><?= lang('finance.date') ?></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('payments-table', {order:[[0,'desc']]});
    document.querySelectorAll('.filter-control').forEach(function(el) {
        el.addEventListener('change', function() { DataTableHelper.reload('payments-table'); });
    });
});
</script>
<?php $__view->endPush(); ?>