<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-paper-plane me-2"></i><?= lang('comm.sent_notifications') ?></h4>
</div>
<div class="card"><div class="card-body">
    <table id="sent-table" class="table table-striped table-hover w-100"
           data-url="/communications/api/sent/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"=>"delivery_status","title"=>"Delivery"],
               ["data"=>"sent_at","title"=>"Sent At"],
               ["data"=>"delivered_at","title"=>"Delivered"]
           ]) ?>'>
        <thead><tr><th>#</th><th>Channel</th><th>Recipient</th><th>Subject</th><th>Delivery</th><th>Sent</th><th>Delivered</th></tr></thead>
    </table>
</div></div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    DataTableHelper.init('sent-table', {
        columnDefs: [
            { targets: 3, render: function(d){ return d ? d.substring(0,40)+(d.length>40?'...':'') : '-'; }},
            { targets: 4, render: function(d){
                var map = {sent:'info',delivered:'success',read:'primary',bounced:'danger',failed:'danger'};
                return '<span class="badge bg-'+(map[d]||'secondary')+'">'+d+'</span>';
            }},
            { targets: [5,6], render: function(d){ return d ? new Date(d).toLocaleString() : '-'; }}
        ]
    });
});
</script>
<?php $__view->endPush() ?>