<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-ticket-alt me-2"></i><?= lang('cards.all_carnets') ?></h4>
    <?php if (auth_can('cards.manage')): ?>
    <a href="/carnets/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('cards.issue_carnet') ?></a>
    <?php endif; ?>
</div>

<div class="card mb-3"><div class="card-body"><div class="row g-2">
    <div class="col-md-3"><select id="filter-cstatus" class="form-select form-select-sm"><option value="">All Statuses</option><option value="active">Active</option><option value="purchased">Purchased</option><option value="exhausted">Exhausted</option><option value="expired">Expired</option><option value="cancelled">Cancelled</option></select></div>
</div></div></div>

<div class="card"><div class="card-body">
    <table id="carnetsTable" class="table table-striped table-hover w-100">
        <thead><tr><th>#</th><th>Carnet #</th><th>Member</th><th>Type</th><th>Used/Total</th><th>Remaining</th><th>Expiry</th><th>Status</th><th>Actions</th></tr></thead>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    const dt = $('#carnetsTable').DataTable({
        processing: true, serverSide: true,
        ajax: { url: '/api/carnets/datatable', type: 'GET', data: function(d){ d.status = $('#filter-cstatus').val(); }},
        columns: [
            { data: 'id' },
            { data: 'carnet_number', render: function(d,t,r){ return `<a href="/carnets/show/${r.id}" class="fw-bold">${d}</a>`; }},
            { data: 'member_name_en', render: function(d,t,r){ return `${d}<br><small class="text-muted">${r.membership_number}</small>`; }},
            { data: 'type_name_en' },
            { data: 'used_entries', render: function(d,t,r){ return `${d} / ${r.total_entries}`; }},
            { data: 'remaining_entries', render: function(d){ return d <= 0 ? '<span class="badge bg-danger">0</span>' : `<span class="badge bg-success">${d}</span>`; }},
            { data: 'expiry_date', render: function(d){ return d||'N/A'; }},
            { data: 'status', render: function(d){ const m = {active:'success',purchased:'info',exhausted:'warning',expired:'secondary',cancelled:'dark',frozen:'info'}; return `<span class="badge bg-${m[d]||'secondary'}">${d}</span>`; }},
            { data: 'id', orderable: false, render: function(d){ return `<a href="/carnets/show/${d}" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a>`; }}
        ],
        order: [[0, 'desc']], pageLength: 25
    });
    $('#filter-cstatus').on('change', function(){ dt.ajax.reload(); });
});
</script>
<?php $__view->endPush() ?>