<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-clipboard-list me-2"></i><?= lang('cards.card_requests') ?></h4>
    <a href="/card-requests/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('cards.new_request') ?></a>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3"><div class="card border-warning h-100"><div class="card-body"><h6 class="text-muted">Pending</h6><h3><?= $stats['pending'] ?></h3></div></div></div>
    <div class="col-md-3"><div class="card border-success h-100"><div class="card-body"><h6 class="text-muted">Approved</h6><h3><?= $stats['approved'] ?></h3></div></div></div>
    <div class="col-md-3"><div class="card border-info h-100"><div class="card-body"><h6 class="text-muted">In Production</h6><h3><?= $stats['in_production'] ?></h3></div></div></div>
    <div class="col-md-3"><div class="card border-primary h-100"><div class="card-body"><h6 class="text-muted">Ready</h6><h3><?= $stats['ready'] ?></h3></div></div></div>
</div>

<div class="card mb-3"><div class="card-body">
    <form class="row g-3" data-filter-table="requests-table">
        <div class="col-md-3"><select name="filter_status" class="form-select"><option value="">All Statuses</option>
            <option value="pending">Pending</option><option value="approved">Approved</option><option value="in_production">In Production</option>
            <option value="ready">Ready</option><option value="delivered">Delivered</option><option value="rejected">Rejected</option>
        </select></div>
        <div class="col-md-2"><button type="button" class="btn btn-secondary" onclick="DataTableHelper.reload('requests-table')"><?= lang('common.filter') ?></button></div>
    </form>
</div></div>

<div class="card"><div class="card-body">
    <table id="requests-table" class="table table-striped w-100" data-url="/card-requests/datatable"
           data-columns='[
               {"data":"id","title":"#","width":"50px"},
               {"data":"request_number","title":"Request #"},
               {"data":"member_name","title":"Member"},
               {"data":"membership_number","title":"Membership #"},
               {"data":"type_name","title":"Card Type"},
               {"data":"request_type","title":"Type"},
               {"data":"status","title":"Status","render":"renderStatusBadge"},
               {"data":"fee_amount","title":"Fee","render":"renderMoney"},
               {"data":"id","title":"Actions","orderable":false,"searchable":false,"render":"renderReqActions"}
           ]'>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>
function renderMoney(data) { return parseFloat(data||0).toFixed(2); }
function renderReqActions(data, type, row) {
    return '<a href="/card-requests/' + data + '" class="btn btn-sm btn-info"><i class="fas fa-eye"></i></a>';
}
document.addEventListener('DOMContentLoaded', function() { DataTableHelper.init('requests-table'); });
</script>
<?php $__view->endPush() ?>