<!-- Stats Cards -->
<div class="row g-3 mb-4">
    <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('subs.active') ?></h6>
                <h3 class="mb-0"><?= number_format($totalActive) ?></h3>
            </div><div class="align-self-center"><i class="fas fa-check-circle fa-2x text-success opacity-50"></i></div></div>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card border-warning h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div>
                <h6 class="text-muted mb-1"><?= lang('subs.pending') ?></h6>
                <h3 class="mb-0"><?= number_format($totalPending) ?></h3>
            </div><div class="align-self-center"><i class="fas fa-clock fa-2x text-warning 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('subs.expiring_30') ?></h6>
                <h3 class="mb-0"><?= number_format($expiringIn30) ?></h3>
            </div><div class="align-self-center"><i class="fas fa-exclamation-triangle fa-2x text-danger opacity-50"></i></div></div>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card border-secondary h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div>
                <h6 class="text-muted mb-1"><?= lang('subs.expired') ?></h6>
                <h3 class="mb-0"><?= number_format($totalExpired) ?></h3>
            </div><div class="align-self-center"><i class="fas fa-times-circle fa-2x text-secondary opacity-50"></i></div></div>
        </div></div>
    </div>
</div>

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

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" id="sub-filters" data-filter-table="subscriptions-table">
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('common.status') ?></label>
                <select name="status" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="pending">Pending</option>
                    <option value="active">Active</option>
                    <option value="expired">Expired</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="frozen">Frozen</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('subs.period') ?></label>
                <select name="period_id" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <?php foreach ($periods as $p): ?>
                    <option value="<?= $p['id'] ?>"><?= e($p['name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('subs.membership_type') ?></label>
                <select name="type_id" class="form-select form-select-sm">
                    <option value=""><?= lang('common.all') ?></option>
                    <?php foreach ($types as $t): ?>
                    <option value="<?= $t['id'] ?>"><?= e($t['name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-sm btn-outline-primary" id="btn-filter-subs"><i class="fas fa-filter me-1"></i><?= lang('common.filter') ?></button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-clear-subs"><i class="fas fa-times me-1"></i><?= lang('common.clear') ?></button>
            </div>
        </form>
    </div>
</div>

<!-- DataTable -->
<div class="card">
    <div class="card-body">
        <table id="subscriptions-table" class="table table-striped table-hover w-100"
               data-url="/api/subscriptions/datatable"
               data-columns='<?= json_encode([
                   ["data" => "id", "title" => "#", "width" => "50px"],
                   ["data" => "membership_number", "title" => "Member #"],
                   ["data" => "member_name", "title" => "Member Name"],
                   ["data" => "type_name", "title" => "Type"],
                   ["data" => "period_name", "title" => "Period"],
                   ["data" => "start_date", "title" => "Start"],
                   ["data" => "end_date", "title" => "End"],
                   ["data" => "net_amount", "title" => "Amount"],
                   ["data" => "paid_amount", "title" => "Paid"],
                   ["data" => "status", "title" => "Status"],
                   ["data" => "actions", "title" => "Actions", "orderable" => false, "searchable" => false]
               ]) ?>'>
            <thead><tr>
                <th>#</th><th>Member #</th><th>Name</th><th>Type</th><th>Period</th>
                <th>Start</th><th>End</th><th>Amount</th><th>Paid</th><th>Status</th><th>Actions</th>
            </tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    const dt = DataTableHelper.init('subscriptions-table');
    $('#btn-filter-subs').on('click', function(){ DataTableHelper.reload('subscriptions-table'); });
    $('#btn-clear-subs').on('click', function(){
        $('#sub-filters select').val('');
        DataTableHelper.reload('subscriptions-table');
    });
});
</script>
<?php $__view->endPush() ?>