<?php $__view->push('styles') ?>
<style>
.stats-row .card { transition: transform 0.2s; }
.stats-row .card:hover { transform: translateY(-2px); }
</style>
<?php $__view->endPush() ?>

<div class="row g-3 mb-4 stats-row">
    <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('cards.active_cards') ?></h6>
                        <h3 class="mb-0"><?= number_format($stats['total_active']) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-id-card fa-2x text-primary 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('cards.expiring_30') ?></h6>
                        <h3 class="mb-0"><?= number_format($stats['expiring_30']) ?></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('cards.lost_stolen') ?></h6>
                        <h3 class="mb-0"><?= number_format($stats['lost_stolen']) ?></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('cards.expired') ?></h6>
                        <h3 class="mb-0"><?= number_format($stats['expired']) ?></h3>
                    </div>
                    <div class="align-self-center"><i class="fas fa-ban fa-2x text-secondary opacity-50"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2" data-filter-table="cardsTable">
            <div class="col-md-3">
                <select name="status" class="form-select form-select-sm" id="filter-status">
                    <option value=""><?= lang('common.all') ?> — <?= lang('common.status') ?></option>
                    <option value="active"><?= lang('common.status') ?>: Active</option>
                    <option value="expired">Expired</option>
                    <option value="lost">Lost</option>
                    <option value="stolen">Stolen</option>
                    <option value="damaged">Damaged</option>
                    <option value="suspended">Suspended</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-md-3">
                <select name="card_type_id" class="form-select form-select-sm" id="filter-type"></select>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-id-card me-2"></i><?= lang('cards.all_cards') ?></h5>
    </div>
    <div class="card-body">
        <table id="cardsTable" class="table table-striped table-hover w-100">
            <thead>
                <tr>
                    <th>#</th>
                    <th><?= lang('cards.card_number') ?></th>
                    <th><?= lang('cards.member') ?></th>
                    <th><?= lang('cards.type') ?></th>
                    <th><?= lang('cards.issue_date') ?></th>
                    <th><?= lang('cards.expiry_date') ?></th>
                    <th><?= lang('common.status') ?></th>
                    <th><?= lang('common.actions') ?></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    // Load card types for filter
    $.get('/api/cards/types/list', function(res){
        if(res.success){
            let opts = '<option value="">All Types</option>';
            res.data.forEach(t => { opts += `<option value="${t.id}">${t.name_en} (${t.name_ar})</option>`; });
            $('#filter-type').html(opts);
        }
    });

    const dt = $('#cardsTable').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '/api/cards/datatable', type: 'GET',
            data: function(d){
                d.status = $('#filter-status').val();
                d.card_type_id = $('#filter-type').val();
            }
        },
        columns: [
            { data: 'id' },
            { data: 'card_number', render: function(d,t,r){ return `<a href="/cards/show/${r.id}" class="fw-bold">${d}</a>`; }},
            { data: 'member_name_en', render: function(d,t,r){ return `${r.member_name_en || ''}<br><small class="text-muted">${r.membership_number || ''}</small>`; }},
            { data: 'type_name_en', render: function(d,t,r){ return `${r.type_name_en}<br><small>${r.type_name_ar || ''}</small>`; }},
            { data: 'issue_date' },
            { data: 'expiry_date', render: function(d){ if(!d) return '-'; const diff = Math.ceil((new Date(d)-new Date())/(1000*60*60*24)); return d + (diff <= 30 && diff > 0 ? ` <span class="badge bg-warning">${diff}d</span>` : diff <= 0 ? ' <span class="badge bg-danger">Expired</span>' : ''); }},
            { data: 'status', render: function(d){ const m = {active:'success',expired:'secondary',lost:'danger',stolen:'danger',damaged:'warning',cancelled:'dark',suspended:'info',replaced:'secondary'}; return `<span class="badge bg-${m[d]||'secondary'}">${d}</span>`; }},
            { data: 'id', orderable: false, render: function(d,t,r){ return `<a href="/cards/show/${d}" class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></a>`; }}
        ],
        order: [[0, 'desc']], pageLength: 25, responsive: true
    });

    $('#filter-status, #filter-type').on('change', function(){ dt.ajax.reload(); });
});
</script>
<?php $__view->endPush() ?>