<?php require ("header.php") ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script> 

<style>

body {
    background: #f4f6f9;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* CARD */
.card {
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* HEADER */
.statement-header {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 20px;
    margin-bottom: 15px;
}

/* TITLE */
.statement-title {
    font-size: 20px;
    font-weight: 600;
}

.statement-meta {
    font-size: 13px;
    color: #555;
}

/* ACCOUNT BOX */
.account-box {
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
}

/* TABLE */
.table {
    font-size: 14px;
}

.table thead th {
    background: #f8f9fa;
    font-size: 12px;
    text-transform: uppercase;
}

.table tbody tr:hover {
    background: #f9fbfd;
}

/* BADGE */
.badge {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 20px;
}

/* BUTTON */
.btn-export {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
}

/* MOBILE */
@media (max-width: 768px) {
    .statement-header {
        text-align: center;
    }

    .table {
        font-size: 12px;
    }
}

</style>

<div class="container-fluid py-4">

<div class="card p-3">


   <br><br><br> <br><br><br>


<!-- HEADER -->
<div class="statement-header d-flex justify-content-between align-items-center flex-wrap">
    
  
    <div>
        <div class="statement-title">Account Statement</div>
        <div class="statement-meta">
            <?php echo $domain_name ?><br>
            <?php echo $addre ?>
        </div>
    </div>

    <div>
        <button onclick="generate()" class="btn btn-dark btn-export">
            Export PDF
        </button>
    </div>
</div>

<!-- ACCOUNT INFO -->
<div class="account-box">
    <div class="row">
        <div class="col-md-6">
            <strong>Account Name:</strong><br>
            <?php echo $firstname ?> <?php echo $lastname ?>
        </div>

        <div class="col-md-6 text-md-end">
            <strong>Account Number:</strong><br>
            <?php echo $acc_no ?>
        </div>
    </div>
</div>

<!-- TABLE -->
<div class="table-responsive">

<table class="table table-striped table-hover" id="dataexample">

<thead>
<tr>
    <th>Amount</th>
    <th class="text-center">Type</th>
    <th class="text-center">Description</th>
    <th class="text-center">Transaction ID</th>
    <th class="text-center">Date/Time</th>
    <th class="text-center">Status</th>
    <th class="text-center">Action</th>
</tr>
</thead>

<tbody>

<?php
$stmt = $pdo->prepare("SELECT * FROM transactions WHERE log_id = :log_id ORDER BY id DESC LIMIT 1000");
$stmt->execute(['log_id' => $id]);
$ordersres = $stmt->fetchAll(PDO::FETCH_ASSOC);

if (empty($ordersres)) {
    echo "<tr><td colspan='7' class='text-center'>No transaction history</td></tr>";
} else {

foreach ($ordersres as $row) {

$amount = $row['cur'] . " " . number_format($row['trans_amount'], 2);

$tranType = ($row['tran_type'] == 1 || $row['tran_type2'] == 1) ? "DEBIT" : "CREDIT";
$tranColor = ($tranType == "DEBIT") ? "red" : "green";

$statusRaw = strtolower(trim($row['status']));

if ($statusRaw === 'successful') {
    $statusBadge = "<span class='badge bg-success'>Successful</span>";
} elseif ($statusRaw === 'pending' || $statusRaw === '0' || $row['status'] == 0) {
    $statusBadge = "<span class='badge bg-warning text-dark'>Pending</span>";
} else {
    $statusBadge = "<span class='badge bg-secondary'>Declined</span>";
}
?>

<tr>
<td style="color: <?= $tranColor ?>"><?= $amount ?></td>

<td class="text-center" style="color: <?= $tranColor ?>">
    <?= $tranType ?>
</td>

<td class="text-center">
<?= htmlspecialchars(strlen($row['note']) > 50 ? substr($row['note'], 0, 50) . '...' : $row['note']) ?>
</td>

<td class="text-center"><?= htmlspecialchars($row['trans_id']) ?></td>

<td class="text-center"><?= htmlspecialchars($row['date']) ?></td>

<td class="text-center"><?= $statusBadge ?></td>

<td class="text-center">
<a href="trx_receipt.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-outline-primary">
    View
</a>
</td>
</tr>

<?php
}
}
?>

</tbody>
</table>

</div>

</div>

</div>

<!-- PDF SCRIPT -->
<script>

function generate() {

    var doc = new jsPDF('p', 'pt', 'letter');

    doc.text("Account Statement", 220, 30);

    doc.autoTable({
        html: '#dataexample',
        startY: 50,
        theme: 'striped',
        styles: { fontSize: 8 }
    });

    doc.save('account_statement.pdf');
}

</script>

<?php require ("footer.php") ?>