<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-primary h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="text-muted mb-1"><?= lang('finance.total_outstanding') ?></h6>
                        <h3 class="mb-0"><?= money($totalOutstanding) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-file-invoice-dollar fa-2x text-primary opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-danger h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="text-muted mb-1"><?= lang('finance.total_overdue') ?></h6>
                        <h3 class="mb-0 text-danger"><?= money($totalOverdue) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-exclamation-circle fa-2x text-danger opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-success h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="text-muted mb-1"><?= lang('finance.issued_today') ?></h6>
                        <h3 class="mb-0"><?= number_format($issuedToday) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-plus-circle fa-2x text-success opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-info h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h6 class="text-muted mb-1"><?= lang('finance.collected_today') ?></h6>
                        <h3 class="mb-0"><?= money($collectedToday) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-cash-register fa-2x text-info opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

<div class="card mb-3">
    <div class="card-body py-2" data-filter-table="invoices-table">
        <div class="row g-2 align-items-end">
            <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="draft"><?= lang('finance.draft') ?></option>
                    <option value="issued"><?= lang('finance.issued') ?></option>
                    <option value="partially_paid"><?= lang('finance.partially_paid') ?></option>
                    <option value="paid"><?= lang('finance.paid') ?></option>
                    <option value="overdue"><?= lang('finance.overdue') ?></option>
                    <option value="void"><?= lang('finance.void') ?></option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label form-label-sm"><?= lang('finance.type') ?></label>
                <select name="filter_type" class="form-select form-select-sm filter-control">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="registration">Registration</option>
                    <option value="subscription">Subscription</option>
                    <option value="renewal">Renewal</option>
                    <option value="penalty">Penalty</option>
                    <option value="sport">Sport</option>
                    <option value="facility">Facility</option>
                    <option value="card">Card</option>
                    <option value="other">Other</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 class="col-md-2">
                <div class="form-check mt-4">
                    <input type="checkbox" name="filter_overdue" value="1" class="form-check-input filter-control" id="filter-overdue">
                    <label class="form-check-label" for="filter-overdue"><?= lang('finance.overdue_only') ?></label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="invoices-table" class="table table-striped table-hover w-100"
               data-url="/finance/invoices/datatable"
               data-columns='[
                   {"data":"id","title":"#","width":"40px"},
                   {"data":"invoice_number","title":"<?= lang('finance.invoice_no') ?>"},
                   {"data":"member_name","title":"<?= lang('finance.member') ?>"},
                   {"data":"invoice_type","title":"<?= lang('finance.type') ?>"},
                   {"data":"invoice_date","title":"<?= lang('finance.date') ?>"},
                   {"data":"due_date","title":"<?= lang('finance.due_date') ?>"},
                   {"data":"total_amount","title":"<?= lang('finance.total') ?>"},
                   {"data":"paid_amount","title":"<?= lang('finance.paid') ?>"},
                   {"data":"balance_due","title":"<?= lang('finance.balance') ?>"},
                   {"data":"status","title":"<?= lang('common.status') ?>"},
                   {"data":"actions","title":"<?= lang('common.actions') ?>","orderable":false,"searchable":false}
               ]'>
            <thead>
                <tr>
                    <th>#</th>
                    <th><?= lang('finance.invoice_no') ?></th>
                    <th><?= lang('finance.member') ?></th>
                    <th><?= lang('finance.type') ?></th>
                    <th><?= lang('finance.date') ?></th>
                    <th><?= lang('finance.due_date') ?></th>
                    <th><?= lang('finance.total') ?></th>
                    <th><?= lang('finance.paid') ?></th>
                    <th><?= lang('finance.balance') ?></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() {
    const dt = DataTableHelper.init('invoices-table', {order: [[0, 'desc']]});
    document.querySelectorAll('.filter-control').forEach(function(el) {
        el.addEventListener('change', function() { DataTableHelper.reload('invoices-table'); });
    });
});
</script>
<?php $__view->endPush(); ?>