<?php
$pageName  = "Transaction Info";
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/header.php");

// Input validation
if (!isset($_GET['id']) || empty($_GET['id'])) {
    echo "<div class='max-w-2xl mx-auto mt-10 p-4 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm'>Transaction ID is required.</div>";
    include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
    exit();
}

$trans_id = $_GET['id'];

try {
    $sql = "SELECT * FROM transactions LEFT JOIN users ON transactions.user_id = users.id WHERE transactions.trans_id = :trans_id";
    $stmt = $conn->prepare($sql);
    $stmt->execute(['trans_id' => $trans_id]);
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$result) {
        echo "<div class='max-w-2xl mx-auto mt-10 p-4 bg-amber-50 border border-amber-200 rounded-xl text-amber-700 text-sm'>Transaction not found.</div>";
        include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
        exit();
    }
} catch (PDOException $e) {
    error_log("Database error: " . $e->getMessage());
    echo "<div class='max-w-2xl mx-auto mt-10 p-4 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm'>An error occurred while retrieving transaction information.</div>";
    include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
    exit();
}

$isCredit = $result['transaction_type'] === 'credit';
$transactiontype = $result['trans_type'] ?? '';
$statusRaw = strtolower($result['trans_status'] ?? 'completed');
?>

<style>
    @media print {
        /* Force single page */
        @page { 
            size: A4; 
            margin: 8mm; 
        }

        html, body {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #fff !important;
        }

        /* Hide everything except the receipt */
        body > *:not(.print-target-wrapper) { display: none !important; }
        .no-print { display: none !important; }
        header, nav, aside, footer, .sidebar { display: none !important; }

        /* Reset the print wrapper and layout */
        .print-target-wrapper {
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .print-target-wrapper main {
            margin: 0 !important;
            padding: 0 !important;
            min-height: auto !important;
            margin-left: 0 !important;
        }

        .print-target-wrapper main > div {
            margin: 0 !important;
            padding: 0 !important;
            max-width: 100% !important;
        }

        /* Scale receipt to fit single page */
        .receipt-card {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
            max-height: 100vh;
            overflow: hidden;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        /* Tighten spacing for print */
        .print-compact .receipt-header { padding: 16px 24px !important; }
        .print-compact .receipt-header .amount-display { margin-top: 12px !important; }
        .print-compact .receipt-header .amount-value { font-size: 26px !important; }
        .print-compact .receipt-body { padding: 16px 24px !important; }
        .print-compact .receipt-body > .space-y-6 > * + * { margin-top: 12px !important; }
        .print-compact .section-header { margin-bottom: 8px !important; }
        .print-compact .detail-grid { padding: 12px !important; gap: 10px !important; }
        .print-compact .detail-grid p.text-xs { font-size: 9px !important; margin-bottom: 1px !important; }
        .print-compact .detail-grid p.text-sm,
        .print-compact .detail-grid .flex.items-center p { font-size: 11px !important; }
        .print-compact .detail-grid .flex.items-center i { width: 10px !important; height: 10px !important; }
        .print-compact .section-icon { width: 20px !important; height: 20px !important; }
        .print-compact .section-icon i { width: 10px !important; height: 10px !important; }
        .print-compact .section-title { font-size: 13px !important; }
        .print-compact .receipt-footer { padding-top: 8px !important; margin-top: 8px !important; }
        .print-compact .receipt-footer p { font-size: 9px !important; margin-bottom: 0 !important; }
        .print-compact .receipt-footer .footer-icon { width: 22px !important; height: 22px !important; margin-bottom: 4px !important; }
        .print-compact .receipt-footer .footer-icon i { width: 12px !important; height: 12px !important; }
        .print-compact .desc-text { font-size: 11px !important; margin-bottom: 10px !important; }
        .print-compact .border-t { margin-top: 8px !important; padding-top: 0 !important; }
    }
</style>

<div class="print-target-wrapper">
    <!-- Main Content Area -->
    <main class="pt-10 md:pt-14 pb-24 md:pb-8 min-h-screen lg:ml-80">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

            <!-- Back + Actions -->
            <div class="flex items-center justify-between mb-6 no-print">
                <a href="/user/accounthistory.php" class="inline-flex items-center gap-2 text-sm text-[#7A7A7A] hover:text-[#0D1B23] transition-colors">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    Back to History
                </a>
                <div class="flex items-center gap-3">
                    <button onclick="window.print()" class="px-4 py-2.5 rounded-lg border border-[#E0E5E5] bg-white hover:bg-[#DFE5E5] transition-colors flex items-center gap-2">
                        <i data-lucide="printer" class="w-4 h-4 text-[#7A7A7A]"></i>
                        <span class="text-sm font-medium text-[#4A4A4A] hidden sm:inline">Print</span>
                    </button>
                    <a href="/user/dashboard.php" class="px-4 py-2.5 rounded-lg border border-[#E0E5E5] bg-white hover:bg-[#DFE5E5] transition-colors flex items-center gap-2">
                        <i data-lucide="home" class="w-4 h-4 text-[#7A7A7A]"></i>
                        <span class="text-sm font-medium text-[#4A4A4A] hidden sm:inline">Dashboard</span>
                    </a>
                </div>
            </div>

            <!-- Receipt Card -->
            <div class="bg-white border border-[#E0E5E5] rounded-xl overflow-hidden print-compact receipt-card">

                <!-- Receipt Header -->
                <div class="receipt-header bg-primary-500 px-6 py-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <img class="h-10 w-auto" src="<?= $web_url ?>/admin/assets/images/logo/<?= htmlspecialchars($page['image']) ?>" alt="<?= $web_title ?>">
                        </div>
                        <?php
                        $badgeBg = 'bg-white/20';
                        $badgeIcon = 'check-circle';
                        if ($statusRaw === 'pending' || $statusRaw === 'processing') {
                            $badgeBg = 'bg-amber-400/20';
                            $badgeIcon = 'clock';
                        } elseif ($statusRaw === 'failed' || $statusRaw === 'declined') {
                            $badgeBg = 'bg-red-400/20';
                            $badgeIcon = 'x-circle';
                        }
                        ?>
                        <div class="inline-flex items-center px-3 py-1.5 rounded-full <?= $badgeBg ?>">
                            <i data-lucide="<?= $badgeIcon ?>" class="h-4 w-4 mr-1.5 text-white"></i>
                            <span class="text-sm text-white font-medium"><?= htmlspecialchars($result['trans_status']) ?></span>
                        </div>
                    </div>

                    <div class="amount-display mt-6 text-center">
                        <p class="text-white/70 text-sm mb-1"><?= $isCredit ? 'Amount Received' : 'Amount Sent' ?></p>
                        <p class="amount-value text-3xl md:text-4xl font-semibold text-white">
                            <?= $isCredit ? '+' : '-' ?><?= $currency ?><?= number_format($result['amount'], 2, '.', ',') ?>
                        </p>
                        <p class="text-white/60 text-xs mt-2"><?= date('M d, Y \a\t g:i A', strtotime($result['created_at'])) ?></p>
                    </div>
                </div>

                <!-- Receipt Body -->
                <div class="receipt-body p-6 md:p-8">
                    <div class="space-y-6">

                        <!-- Transaction Details -->
                        <div>
                            <div class="section-header flex items-center gap-2 mb-4">
                                <div class="section-icon w-8 h-8 rounded-lg bg-primary-500/10 flex items-center justify-center">
                                    <i data-lucide="file-text" class="w-4 h-4 text-primary-500"></i>
                                </div>
                                <h2 class="section-title text-base font-semibold text-[#0D1B23]">Transaction Details</h2>
                            </div>
                            <p class="desc-text text-sm text-[#7A7A7A] mb-4">
                                Your account has been <?= htmlspecialchars($result['transaction_type']) ?>ed with <?= $currency ?><?= number_format($result['amount'], 2, '.', ',') ?>.
                            </p>

                            <div class="detail-grid bg-[#F8FAFA] rounded-xl border border-[#E0E5E5] p-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Transaction Date</p>
                                        <div class="flex items-center gap-1.5">
                                            <i data-lucide="calendar" class="w-3.5 h-3.5 text-[#7A7A7A]"></i>
                                            <p class="text-sm font-medium text-[#0D1B23]"><?= date('M d, Y', strtotime($result['created_at'])) ?></p>
                                        </div>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Transaction Amount</p>
                                        <div class="flex items-center gap-1.5">
                                            <i data-lucide="<?= $isCredit ? 'arrow-down-left' : 'arrow-up-right' ?>" class="w-3.5 h-3.5 text-[#7A7A7A]"></i>
                                            <p class="text-sm font-medium text-[#0D1B23]"><?= $currency ?><?= number_format($result['amount'], 2, '.', ',') ?></p>
                                        </div>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Payment Method</p>
                                        <div class="flex items-center gap-1.5">
                                            <i data-lucide="credit-card" class="w-3.5 h-3.5 text-[#7A7A7A]"></i>
                                            <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['trans_type']) ?></p>
                                        </div>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Reference ID</p>
                                        <div class="flex items-center gap-1.5">
                                            <i data-lucide="hash" class="w-3.5 h-3.5 text-[#7A7A7A]"></i>
                                            <p class="text-sm font-medium text-[#0D1B23]">#<?= htmlspecialchars($result['refrence_id']) ?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="border-t border-[#E0E5E5]"></div>

                        <!-- Recipient Details -->
                        <?php if (in_array($transactiontype, ['Domestic transfer', 'Wire transfer', 'Interbank transfer'])) { ?>
                        <div>
                            <div class="section-header flex items-center gap-2 mb-4">
                                <div class="section-icon w-8 h-8 rounded-lg bg-primary-500/10 flex items-center justify-center">
                                    <i data-lucide="user" class="w-4 h-4 text-primary-500"></i>
                                </div>
                                <h2 class="section-title text-base font-semibold text-[#0D1B23]">Recipient Details</h2>
                            </div>

                            <div class="detail-grid bg-[#F8FAFA] rounded-xl border border-[#E0E5E5] p-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Name</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_name']) ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Number</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_number']) ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Bank Name</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['bank_name']) ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Type</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_type']) ?></p>
                                    </div>
                                </div>

                                <?php if (!empty($result['description'])) { ?>
                                <div class="mt-4 pt-4 border-t border-[#E0E5E5]">
                                    <p class="text-xs text-[#7A7A7A] mb-1">Description</p>
                                    <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['description']) ?></p>
                                </div>
                                <?php } ?>
                            </div>
                        </div>
                        <?php } else { ?>
                        <div>
                            <div class="section-header flex items-center gap-2 mb-4">
                                <div class="section-icon w-8 h-8 rounded-lg bg-primary-500/10 flex items-center justify-center">
                                    <i data-lucide="user" class="w-4 h-4 text-primary-500"></i>
                                </div>
                                <h2 class="section-title text-base font-semibold text-[#0D1B23]">Recipient Details</h2>
                            </div>

                            <div class="detail-grid bg-[#F8FAFA] rounded-xl border border-[#E0E5E5] p-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Name</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_name']) ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Number</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_number']) ?></p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-[#7A7A7A] mb-1">Account Type</p>
                                        <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['account_type']) ?></p>
                                    </div>
                                </div>

                                <?php if (!empty($result['description'])) { ?>
                                <div class="mt-4 pt-4 border-t border-[#E0E5E5]">
                                    <p class="text-xs text-[#7A7A7A] mb-1">Description</p>
                                    <p class="text-sm font-medium text-[#0D1B23]"><?= htmlspecialchars($result['description']) ?></p>
                                </div>
                                <?php } ?>
                            </div>
                        </div>
                        <?php } ?>

                        <!-- Divider -->
                        <div class="border-t border-[#E0E5E5]"></div>

                        <!-- Legal Notice -->
                        <div class="receipt-footer text-center pt-2">
                            <div class="flex justify-center mb-2">
                                <div class="footer-icon w-8 h-8 rounded-full bg-[#DFE5E5] flex items-center justify-center">
                             <i data-lucide="shield-check" class="w-4 h-4 text-[#7A7A7A]"></i>
                                </div>
                            </div>
                            <p class="text-xs text-[#7A7A7A] mb-0.5">This receipt serves as confirmation of this transaction.</p>
                            <p class="text-xs text-[#7A7A7A]">For any issues or inquiries, please contact support.</p>
                            <p class="text-[11px] text-[#C8D1D1] mt-2">&copy; <?= date('Y') ?> <?= $web_title ?>. All rights reserved.</p>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </main>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
?>