<?php
/* Smarty version 4.5.3, created on 2024-12-03 18:50:56
  from '/var/www/html/admin/system/plugin/ui/c2b_overview.tpl' */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '4.5.3',
  'unifunc' => 'content_674f28e0ae1101_33260194',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    'cbb5df6f2ced6b588eaae77a970c4e9c8abf7f06' => 
    array (
      0 => '/var/www/html/admin/system/plugin/ui/c2b_overview.tpl',
      1 => 1733208765,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
    'file:sections/header.tpl' => 1,
    'file:sections/footer.tpl' => 1,
  ),
),false)) {
function content_674f28e0ae1101_33260194 (Smarty_Internal_Template $_smarty_tpl) {
$_smarty_tpl->_subTemplateRender("file:sections/header.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 0, $_smarty_tpl->cache_lifetime, array(), 0, false);
?>

<style>
/* Global Styles */
body {
    background-color: #f4f6f9; /* Lighter background for better contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Cleaner font */
    margin: 0;
    padding: 0;
}

.container {
    margin-top: 20px;
    background-color: #ffffff; /* White background for better contrast */
    border-radius: 12px; /* More modern rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer shadow */
    padding: 20px;
    max-width: 98%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
}

/* Table Styling */
.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: #ffffff;
    border-collapse: collapse;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.table th {
    background-color: #343a40;
    color: #ffffff;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
}

.table td {
    padding: 12px 15px;
    border-top: 1px solid #dee2e6;
    font-size: 14px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.table-hover tbody tr:hover {
    background-color: #e9ecef;
    color: #333;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

/* Pagination Styling */
.pagination .page-item .page-link {
    color: #007bff;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination .page-item .page-link:hover {
    background-color: #e9ecef;
    color: #0056b3;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Responsive Design */
.table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    #payments-table td:nth-child(2), /* Hide Phone Number */
    #payments-table th:nth-child(2) {
        display: none;
    }

    .table-responsive table {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .table-responsive table td, .table-responsive table th {
        font-size: 12px;
    }
}

/* Alert Styles */
.alert {
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert .close {
    font-size: 18px;
    color: inherit;
}
</style>

<?php if ((isset($_smarty_tpl->tpl_vars['message']->value))) {?>
<div class="alert alert-<?php if ($_smarty_tpl->tpl_vars['notify_t']->value == 's') {?>success<?php } else { ?>danger<?php }?>">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
    </button>
    <div><?php echo $_smarty_tpl->tpl_vars['message']->value;?>
</div>
</div>
<?php }?>

<div class="col-md-14">
    <!-- LINE CHART -->
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title"><?php echo Lang::T('Payment History');?>
</h3>
            <div class="box-tools pull-right">
                <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="fa fa-refresh"></i></button>
                <a href="<?php echo $_smarty_tpl->tpl_vars['app_url']->value;?>
/pages/mpesa-webhook.html" class="btn bg-teal btn-sm"><i class="fa fa-file"></i></a>
            </div>
        </div>
        <div class="box-body">
            <div class="container">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="payments-table">
                        <thead>
                            <tr>
                                <th><?php echo Lang::T('Name');?>
</th>
                                <th><?php echo Lang::T('Bill Ref Number');?>
</th>
                                <th><?php echo Lang::T('Amount Paid');?>
</th>
                                <th><?php echo Lang::T('Package Name');?>
</th>
                                <th><?php echo Lang::T('Package Price');?>
</th>
                                <th><?php echo Lang::T('Status');?>
</th>
                                <th><?php echo Lang::T('Transaction Type');?>
</th>
                                <th><?php echo Lang::T('Transaction Time');?>
</th>
                                <th><?php echo Lang::T('Company Balance');?>
</th>
                                <th><?php echo Lang::T('Date');?>
</th>
                                <th><?php echo Lang::T('Phone Number');?>
</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
$_from = $_smarty_tpl->smarty->ext->_foreach->init($_smarty_tpl, $_smarty_tpl->tpl_vars['payments']->value, 'payment');
$_smarty_tpl->tpl_vars['payment']->do_else = true;
if ($_from !== null) foreach ($_from as $_smarty_tpl->tpl_vars['payment']->value) {
$_smarty_tpl->tpl_vars['payment']->do_else = false;
?>
                            <tr>
                                <td><a href="<?php echo $_smarty_tpl->tpl_vars['app_url']->value;?>
/index.php?_route=customers/view/<?php echo $_smarty_tpl->tpl_vars['payment']->value['CustomerID'];?>
"><?php echo $_smarty_tpl->tpl_vars['payment']->value['FirstName'];?>
</a></td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['BillRefNumber'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['TransAmount'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['PackageName'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['PackagePrice'];?>
</td>
                                <td><span class="label <?php if ($_smarty_tpl->tpl_vars['payment']->value['TransactionStatus'] == 'Completed') {?>label-success<?php } elseif ($_smarty_tpl->tpl_vars['payment']->value['TransactionStatus'] == 'Pending') {?>label-warning<?php }?>"><?php echo $_smarty_tpl->tpl_vars['payment']->value['TransactionStatus'];?>
</span></td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['TransactionType'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['TransTime'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['OrgAccountBalance'];?>
</td>
                                <td><?php echo $_smarty_tpl->tpl_vars['payment']->value['CreatedAt'];?>
</td>
                                <td class="phone-number"><?php echo $_smarty_tpl->tpl_vars['payment']->value['MSISDN'];?>
</td>
                            </tr>
                            <?php
}
$_smarty_tpl->smarty->ext->_foreach->restore($_smarty_tpl, 1);?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.box -->
</div>

<?php echo '<script'; ?>
 src="https://code.jquery.com/jquery-3.6.0.min.js"><?php echo '</script'; ?>
>
<?php echo '<script'; ?>
 src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"><?php echo '</script'; ?>
>
<?php echo '<script'; ?>
>
    var $j = jQuery.noConflict();

    $j(document).ready(function () {
        var table = $j('#payments-table').DataTable({
            "pagingType": "full_numbers",
            "order": [[9, 'desc']] // Sort by the 10th column (CreatedAt) in descending order
        });

        // Update the phone number column to show only the first 12 characters after table is initialized
        $j('#payments-table').on('draw.dt', function () {
            $j('.phone-number').each(function() {
                var phoneNumber = $j(this).text();
                if (phoneNumber.length > 12) {
                    $j(this).text(phoneNumber.substring(0, 12));
                }
            });
        });
    });
<?php echo '</script'; ?>
>

<?php $_smarty_tpl->_subTemplateRender("file:sections/footer.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 0, $_smarty_tpl->cache_lifetime, array(), 0, false);
}
}
