billing2/my-account/.hta_slug/print-invoice.php

<?php
require('../.hta_config/conf.php');

$db = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$stmt = $db->prepare("SELECT * FROM invoice WHERE customerId = :customerId AND invoiceId = :invoiceId");
$stmt->bindParam(':customerId', $_GET['customerId']);
$stmt->bindParam(':invoiceId', $_GET['invoiceId']);
$stmt->execute();
$invoiceInfo = $stmt->fetch(PDO::FETCH_ASSOC);

$emiPlans = [];
if ($invoiceInfo['tenure'] > 1) {
    $stmt = $db->prepare("SELECT * FROM emi WHERE customerId = :customerId AND invoiceId = :invoiceId ORDER BY emiDate ASC");
    $stmt->bindParam(':customerId', $_GET['customerId']);
    $stmt->bindParam(':invoiceId', $_GET['invoiceId']);
    $stmt->execute();
    $emiPlans = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

<div class="container my-5">
    <div class="invoice-box" id="invoice-box">
        <div class="d-flex justify-content-between" >
            <img src="/assets/logo_dark.png" alt="" style="width: 150px; height: fit-content;" />
            <div>
                <h3 class="text-center fw-bold" style="color: #374151;">Invoice</h3>
                <p style="margin-top: -10px;"><strong># <?= $invoiceInfo['invoiceId'] ?></strong></p>
            </div>
        </div>
        <div class="d-flex justify-content-between gap-2">
            <div>
                <p style="font-size: 14px;"><strong>Bill To:</strong></p>
                <p style="margin-top: -10px; font-size: 13px;">
                    <span><strong><?= $invoiceInfo['customerName'] ?></strong></span><br>
                    <span style=""><?=  $invoiceInfo['address'] ?></span>
                </p>
                <p style="margin-top: -15px; font-size: 14px;">Invoice Date: <?= date('m/d/Y', strtotime($invoiceInfo['invoiceDate'])) ?></p>
            </div>
            <div>
                <p style="font-size: 14px;"><strong>CLASSBOXES TECHNOLOGY</strong></p>
                <p style="margin-top: -15px; font-size: 13px; text-align: right;">
                    <span>371 Hoes Lane, Suite #200</span><br>
                    <span>Piscataway New Jersey</span><br>
                    <span>US 08854</span>
                </p>
            </div>
        </div>
        <table class="table table-bordered mt-3" style="font-size: 14px;">
            <thead class="text-white" style="background-color: #374151;">
                <tr>
                    <th>Item</th>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Rate</th>
                    <th>Discount(%)</th>
                    <th>Discount</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><?= $invoiceInfo['item'] ?></td>
                    <td><?= $invoiceInfo['description'] ?></td>
                    <td><?= $invoiceInfo['qty'] ?></td>
                    <td><?= $invoiceInfo['rate'] ?></td>
                    <td><?= $invoiceInfo['discount'] ?>%</td>
                    <td>$<?= $invoiceInfo['discountAmount'] ?></td>
                    <td>$<?= number_format($invoiceInfo['totalAmount'], 2) ?></td>
                </tr>
            </tbody>
        </table>

        <!-- EMI Table (if tenure > 1) -->
        <?php if ($invoiceInfo['tenure'] > 1): ?>
        <h6 class="mt-4" style="color: #374151;">EMI Payment Plan</h6>
        <table class="table table-striped" style="font-size: 14px;">
            <thead>
                <tr>
                    <th>EMI No.</th>
                    <th>EMI Date</th>
                    <th>Payment Date</th>
                    <th>EMI Amount</th>
                    <th>Outstanding</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($emiPlans as $emi): if($emi['emiAmount'] !== null) {?>
                <tr>
                    <td><?= $emi['emiNumber'] ?></td>
                    <td><?= date('m/d/Y', strtotime($emi['emiDate'])) ?></td>
                    <td><?= $emi['payStatus'] == 1 ? date('m/d/Y', strtotime($emi['paymentDate'])) : 'Unpaid' ?></td>
                    <td>$<?= number_format($emi['emiAmount'], 2) ?></td>
                    <td>$<?= number_format($emi['outstanding'], 2) ?></td>
                    <td>
                        <?= ($emi['payStatus'] == 1) ? '<span class="badge bg-success">Paid</span>' : '<span class="badge bg-danger">Pending</span>' ?>
                    </td>
                </tr>
                <?php } endforeach; ?>
            </tbody>
        </table>
        <?php endif; ?>
        <?php if(!is_null($emiPlans[0]['adPaymentAmount']) && $emiPlans[0]['adPaymentAmount'] > 0) { ?>
            <h6 class="mt-4" style="color: #374151;">Additional Payment Details:</h6>
            <table class="table table-striped " style="font-size: 14px;">
                <thead class="">
                    <tr>
                        <th>Amount</th>
                        <th>Date</th>
                        <th>Source</th>
                        <th>Transaction&nbsp;ID</th>
                        <th class="text-center">Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                    foreach ($emiPlans as $emiAdditional) { 
                        if (!is_null($emiAdditional['adPaymentAmount']) && $emiAdditional['adPaymentAmount'] > 0) { 
                    ?>
                        <tr>
                            <td><?= number_format($emiAdditional['adPaymentAmount'], 2) ?></td>
                            <td><?= !empty($emiAdditional['adPaymentDate']) ? date('m/d/Y', strtotime($emiAdditional['adPaymentDate'])) : '-' ?></td>
                            <td><?= !empty($emiAdditional['adPaymentSource']) ? $emiAdditional['adPaymentSource'] : '-' ?></td>
                            <td><?= !empty($emiAdditional['adPaymentTran']) ? $emiAdditional['adPaymentTran'] : '-' ?></td>
                            <td><?= !empty($emiAdditional['adPaymentRemarks']) ? $emiAdditional['adPaymentRemarks'] : '-' ?></td>
                        </tr>
                    <?php 
                        }
                    } 
                    ?>
                </tbody>
            </table>
        <?php } ?>
        <p class="text-muted mt-3"><strong>Admin Note:</strong> <?= $invoiceInfo['adminNote'] ?></p>
        <p style="font-size: 12px;"><strong>Invoice Generate Date: </strong><span id="invoiceGenDate"></span></p>
        <div class="d-flex gap-1">
            <button onclick="downloadPDF()" class="btn text-white btn-print w-100" style="background-color: #374151;">Download Invoice</button>
            <button onclick="window.print()" class="btn text-white btn-print w-100" style="background-color: #374151;">Print Invoice</button>
        </div>
    </div>
</div>
<script src="/assets/js/html2pdf.bundle.min.js"></script>
<script>
    document.getElementById('invoiceGenDate').textContent = new Date().toLocaleDateString('en-US');

    function downloadPDF() {
            const invoice = document.getElementById("invoice-box");
            html2pdf(invoice, {
                margin: 10,
                filename: 'invoice.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
            });
        }
</script>
<style>
    body {
        background-color: #f8f9fa;
    }
    .invoice-box {
        max-width: 800px;
        margin: auto;
        padding: 30px;
        /* border: 1px solid #ddd; */
        background: #fff;
        border-radius: 10px;
    }
    .text-blue { color: #007bff; }
    .btn-print { margin-top: 20px; }

    @media print {
        body * {
            visibility: hidden;
        }
        .invoice-box, .invoice-box * {
            visibility: visible;
        }
        .invoice-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .btn-print {
            display: none; /* Hide print button */
        }
    }
</style>