<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-list-ol me-2"></i><?= lang('comm.notification_queue') ?></h4>
</div>

<div class="row g-3 mb-4">
    <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">Queued</h6><h3 class="mb-0"><?= number_format($stats['queued']) ?></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-info h-100"><div class="card-body">
            <div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Processing</h6><h3 class="mb-0"><?= number_format($stats['processing']) ?></h3></div>
            <div class="align-self-center"><i class="fas fa-spinner fa-2x text-info opacity-50"></i></div></div>
        </div></div>
    </div>
    <div class="col-md-3">
        <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">Sent Today</h6><h3 class="mb-0"><?= number_format($stats['sent']) ?></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-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">Failed</h6><h3 class="mb-0"><?= number_format($stats['failed']) ?></h3></div>
            <div class="align-self-center"><i class="fas fa-exclamation-circle fa-2x text-danger opacity-50"></i></div></div>
        </div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <div class="row g-2 align-items-end" data-filter-table="queue-table">
            <div class="col-md-3">
                <label class="form-label form-label-sm mb-1">Status</label>
                <select name="filter_status" class="form-select form-select-sm" id="filter-status">
                    <option value="">All</option>
                    <option value="queued">Queued</option>
                    <option value="processing">Processing</option>
                    <option value="sent">Sent</option>
                    <option value="failed">Failed</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-auto"><button class="btn btn-sm btn-outline-primary" onclick="DataTableHelper.reload('queue-table')"><i class="fas fa-filter me-1"></i>Filter</button></div>
        </div>
    </div>
</div>

<div class="card"><div class="card-body">
    <table id="queue-table" class="table table-striped table-hover w-100"
           data-url="/communications/api/queue/datatable"
           data-columns='<?= json_encode([
               ["data"=>"id","title"=>"#","width"=>"50px"],
               ["data"=>"channel_name","title"=>"Channel"],
               ["data"=>"recipient_address","title"=>"Recipient"],
               ["data"=>"subject","title"=>"Subject"],
               ["data"=>"status","title"=>"Status"],
               ["data"=>"priority","title"=>"Priority"],
               ["data"=>"created_at","title"=>"Created"],
               ["data"=>"id","title"=>"Actions","orderable"=>false,"searchable"=>false]
           ]) ?>'>
        <thead><tr><th>#</th><th>Channel</th><th>Recipient</th><th>Subject</th><th>Status</th><th>Priority</th><th>Created</th><th>Actions</th></tr></thead>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    DataTableHelper.init('queue-table', {
        columnDefs: [
            { targets: 3, render: function(d){ return d ? d.substring(0,50)+(d.length>50?'...':'') : '-'; }},
            { targets: 4, render: function(d){
                var map = {queued:'warning',processing:'info',sent:'success',failed:'danger',cancelled:'secondary'};
                return '<span class="badge bg-'+(map[d]||'secondary')+'">'+d+'</span>';
            }},
            { targets: 6, render: function(d){ return d ? new Date(d).toLocaleString() : ''; }},
            { targets: 7, render: function(d, t, row){
                var html = '';
                if(row.status==='failed') html += '<button class="btn btn-outline-warning btn-sm me-1" onclick="retryQueue('+d+')"><i class="fas fa-redo"></i></button>';
                if(row.status==='queued'||row.status==='failed') html += '<button class="btn btn-outline-danger btn-sm" onclick="cancelQueue('+d+')"><i class="fas fa-ban"></i></button>';
                return html || '-';
            }}
        ]
    });
});
function retryQueue(id){
    $.post('/communications/queue/'+id+'/retry',{_token:'<?= csrf_token() ?>'},function(r){
        if(r.success){FormHelper.showToast('success',r.message);DataTableHelper.reload('queue-table');}
        else FormHelper.showToast('error',r.message);
    });
}
function cancelQueue(id){
    $.post('/communications/queue/'+id+'/cancel',{_token:'<?= csrf_token() ?>'},function(r){
        if(r.success){FormHelper.showToast('success',r.message);DataTableHelper.reload('queue-table');}
        else FormHelper.showToast('error',r.message);
    });
}
</script>
<?php $__view->endPush() ?>