<div class="row g-3 mb-4">
    <div class="col-md-4"><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">Active Today</h6><h3 class="mb-0"><?= $stats['today_active'] ?></h3></div><div class="align-self-center"><i class="fas fa-user-friends fa-2x text-primary opacity-50"></i></div></div></div></div></div>
    <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">Used Today</h6><h3 class="mb-0"><?= $stats['today_used'] ?></h3></div><div class="align-self-center"><i class="fas fa-check-circle 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">This Month</h6><h3 class="mb-0"><?= $stats['month_total'] ?></h3></div><div class="align-self-center"><i class="fas fa-calendar-alt fa-2x text-info opacity-50"></i></div></div></div></div></div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-user-friends me-2"></i><?= lang('cards.guest_passes') ?></h4>
    <?php if (auth_can('guests.create')): ?>
    <a href="/guests/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('cards.issue_pass') ?></a>
    <?php endif; ?>
</div>

<div class="card mb-3"><div class="card-body">
    <div class="row g-2">
        <div class="col-md-2"><select id="filter-gstatus" class="form-select form-select-sm"><option value="">All Statuses</option><option value="issued">Issued</option><option value="active">Active</option><option value="used">Used</option><option value="expired">Expired</option><option value="cancelled">Cancelled</option></select></div>
        <div class="col-md-2"><input type="date" id="filter-gfrom" class="form-control form-control-sm" value="<?= date('Y-m-01') ?>"></div>
        <div class="col-md-2"><input type="date" id="filter-gto" class="form-control form-control-sm" value="<?= date('Y-m-d') ?>"></div>
    </div>
</div></div>

<div class="card"><div class="card-body">
    <table id="guestsTable" class="table table-striped table-hover w-100">
        <thead><tr><th>#</th><th>Pass #</th><th>Guest</th><th>Host Member</th><th>Type</th><th>Date</th><th>Check In</th><th>Status</th><th>Actions</th></tr></thead>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    const dt = $('#guestsTable').DataTable({
        processing: true, serverSide: true,
        ajax: {
            url: '/api/guests/datatable', type: 'GET',
            data: function(d){ d.status = $('#filter-gstatus').val(); d.date_from = $('#filter-gfrom').val(); d.date_to = $('#filter-gto').val(); }
        },
        columns: [
            { data: 'id' },
            { data: 'pass_number', render: function(d,t,r){ return `<a href="/guests/show/${r.id}" class="fw-bold">${d}</a>`; }},
            { data: 'guest_name', render: function(d,t,r){ return `${d}${r.guest_phone?'<br><small class="text-muted">'+r.guest_phone+'</small>':''}`; }},
            { data: 'host_name_en', render: function(d,t,r){ return `${d}<br><small class="text-muted">${r.membership_number}</small>`; }},
            { data: 'type_name_en' },
            { data: 'valid_date' },
            { data: 'check_in_time', render: function(d){ return d || '<span class="text-muted">-</span>'; }},
            { data: 'status', render: function(d){ const m = {issued:'warning',active:'success',used:'info',expired:'secondary',cancelled:'dark',revoked:'danger'}; return `<span class="badge bg-${m[d]||'secondary'}">${d}</span>`; }},
            { data: 'id', orderable: false, render: function(d,t,r){
                let btns = `<a href="/guests/show/${d}" class="btn btn-sm btn-outline-primary me-1"><i class="fas fa-eye"></i></a>`;
                if(r.status === 'issued') btns += `<button class="btn btn-sm btn-success me-1 btn-checkin" data-id="${d}"><i class="fas fa-sign-in-alt"></i></button>`;
                if(r.status === 'active') btns += `<button class="btn btn-sm btn-info me-1 btn-checkout" data-id="${d}"><i class="fas fa-sign-out-alt"></i></button>`;
                if(['issued','active'].includes(r.status)) btns += `<button class="btn btn-sm btn-danger btn-cancel-pass" data-id="${d}"><i class="fas fa-times"></i></button>`;
                return btns;
            }}
        ],
        order: [[0, 'desc']], pageLength: 25
    });
    $('#filter-gstatus, #filter-gfrom, #filter-gto').on('change', function(){ dt.ajax.reload(); });

    function postAction(url, msg){
        $.post(url, {_token: $('meta[name="csrf-token"]').attr('content')}, function(res){
            if(res.success){ Swal.fire({icon:'success',title:res.message,timer:1500,showConfirmButton:false}); dt.ajax.reload(); }
            else { Swal.fire({icon:'error',title:'Error',text:res.message}); }
        });
    }
    $(document).on('click', '.btn-checkin', function(){ postAction('/guests/'+$(this).data('id')+'/checkin'); });
    $(document).on('click', '.btn-checkout', function(){ postAction('/guests/'+$(this).data('id')+'/checkout'); });
    $(document).on('click', '.btn-cancel-pass', function(){
        const id = $(this).data('id');
        Swal.fire({title:'Cancel Pass?',icon:'warning',showCancelButton:true,confirmButtonText:'Yes, Cancel'}).then(r=>{
            if(r.isConfirmed) postAction('/guests/'+id+'/cancel');
        });
    });
});
</script>
<?php $__view->endPush() ?>