<div class="row g-3 mb-4">
    <div class="col-md-4">
        <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">Entries Today</h6><h3 class="mb-0 text-success"><?= number_format($todayEntries) ?></h3></div><div class="align-self-center"><i class="fas fa-sign-in-alt fa-2x text-success opacity-50"></i></div></div></div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-info h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Exits Today</h6><h3 class="mb-0 text-info"><?= number_format($todayExits) ?></h3></div><div class="align-self-center"><i class="fas fa-sign-out-alt fa-2x text-info opacity-50"></i></div></div></div></div>
    </div>
    <div class="col-md-4">
        <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">Denied Today</h6><h3 class="mb-0 text-danger"><?= number_format($todayDenied) ?></h3></div><div class="align-self-center"><i class="fas fa-hand-paper fa-2x text-danger opacity-50"></i></div></div></div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-2"><input type="date" class="form-control form-control-sm" id="filter-from" value="<?= date('Y-m-d') ?>"></div>
            <div class="col-md-2"><input type="date" class="form-control form-control-sm" id="filter-to" value="<?= date('Y-m-d') ?>"></div>
            <div class="col-md-2"><select id="filter-direction" class="form-select form-select-sm"><option value="">All</option><option value="entry">Entry</option><option value="exit">Exit</option></select></div>
            <div class="col-md-2"><select id="filter-granted" class="form-select form-select-sm"><option value="">All</option><option value="1">Granted</option><option value="0">Denied</option></select></div>
            <div class="col-md-2"><button class="btn btn-sm btn-outline-primary w-100" id="refreshLog"><i class="fas fa-sync me-1"></i>Refresh</button></div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="accessLogTable" class="table table-striped table-hover w-100">
            <thead><tr><th>#</th><th>Time</th><th>Direction</th><th>Member</th><th>Card</th><th>Access Point</th><th>Method</th><th>Result</th></tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    const dt = $('#accessLogTable').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '/api/access/log/datatable', type: 'GET',
            data: function(d){
                d.date_from = $('#filter-from').val(); d.date_to = $('#filter-to').val();
                d.direction = $('#filter-direction').val(); d.granted = $('#filter-granted').val();
            }
        },
        columns: [
            { data: 'id' },
            { data: 'access_time' },
            { data: 'direction', render: function(d){ return d==='entry'?'<span class="badge bg-success"><i class="fas fa-sign-in-alt me-1"></i>Entry</span>':'<span class="badge bg-info"><i class="fas fa-sign-out-alt me-1"></i>Exit</span>'; }},
            { data: 'member_name_en', render: function(d,t,r){ return d ? `${d}<br><small class="text-muted">${r.membership_number||''}</small>` : '<span class="text-muted">Guest/Unknown</span>'; }},
            { data: 'card_number', render: function(d){ return d ? `<code>${d}</code>` : '-'; }},
            { data: 'point_name_en', render: function(d,t,r){ return `${d}<br><small class="badge bg-secondary">${r.point_type}</small>`; }},
            { data: 'access_method', render: function(d){ return `<span class="badge bg-outline-secondary">${d}</span>`; }},
            { data: 'granted', render: function(d,t,r){ return d==1?'<span class="text-success fw-bold"><i class="fas fa-check-circle"></i> Granted</span>':'<span class="text-danger"><i class="fas fa-times-circle"></i> '+(r.denial_reason||'Denied')+'</span>'; }}
        ],
        order: [[1, 'desc']], pageLength: 50
    });

    $('#filter-from, #filter-to, #filter-direction, #filter-granted').on('change', function(){ dt.ajax.reload(); });
    $('#refreshLog').on('click', function(){ dt.ajax.reload(); });
});
</script>
<?php $__view->endPush() ?>