<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-exclamation-triangle text-warning me-2"></i><?= lang('subs.expiring_subscriptions') ?></h4>
    <div class="d-flex gap-2 align-items-center">
        <label class="form-label mb-0 me-2">Days ahead:</label>
        <select id="expiry-days" class="form-select form-select-sm" style="width:120px">
            <option value="7">7 days</option>
            <option value="14">14 days</option>
            <option value="30" selected>30 days</option>
            <option value="60">60 days</option>
            <option value="90">90 days</option>
        </select>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="expiring-table" class="table table-striped table-hover w-100"
               data-url="/api/subscriptions/expiring/datatable"
               data-columns='<?= json_encode([
                   ["data" => "membership_number", "title" => "Member #"],
                   ["data" => "member_name", "title" => "Name"],
                   ["data" => "phone", "title" => "Phone"],
                   ["data" => "type_name", "title" => "Type"],
                   ["data" => "end_date", "title" => "Expires"],
                   ["data" => "days_remaining", "title" => "Remaining"],
                   ["data" => "actions", "title" => "", "orderable" => false, "searchable" => false]
               ]) ?>'>
            <thead><tr><th>Member #</th><th>Name</th><th>Phone</th><th>Type</th><th>Expires</th><th>Remaining</th><th></th></tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    var dt = DataTableHelper.init('expiring-table', {
        ajax: {
            url: '/api/subscriptions/expiring/datatable',
            data: function(d){ d.days = $('#expiry-days').val(); }
        }
    });
    $('#expiry-days').on('change', function(){ DataTableHelper.reload('expiring-table'); });
});
</script>
<?php $__view->endPush() ?>