<?php
session_start();
$page_title = 'Transaction Details';
$active_nav = 'wallet';
include("includes/header.php");
$uid = (int)$_SESSION['user_id'];

$tid = (int)($_GET['id'] ?? 0);
if (!$tid) { header("Location: wallet.php"); exit; }

$stmt = $conn->prepare("SELECT * FROM wallet_transactions WHERE id=? AND user_id=?");
$stmt->bind_param("ii", $tid, $uid);
$stmt->execute();
$t = $stmt->get_result()->fetch_assoc();
if (!$t) { header("Location: wallet.php"); exit; }

$is_cr  = $t['type'] === 'credit';
$title  = $t['description'] ?: ($is_cr ? 'Wallet Funding' : 'Wallet Payment');
$status = $t['status'] ?: 'success';
$ok     = $status === 'success';
$ref    = $t['reference'] ?: ('DBL' . str_pad($t['id'], 10, '0', STR_PAD_LEFT));
$session_id = strtoupper(substr(hash('sha1', $ref . $t['created_at']), 0, 24));
?>

<style>
.app-topbar { display: none; }
.main-content { padding-top: calc(env(safe-area-inset-top) + 6px); }
.td-wrap { max-width: 600px; margin: 0 auto; }

.sub-topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 18px; }
.sub-topbar-left { display: flex; align-items: center; gap: 12px; }
.sub-topbar .sub-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-bg); flex-shrink: 0; }
.sub-topbar .sub-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sub-topbar .icon-btn { color: var(--primary); }

.td-hero { background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 4px 18px rgba(15,23,42,.06); padding: 26px 20px; text-align: center; margin-bottom: 14px; }
.td-hero .h-ic { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.td-hero .h-ic.cr { background: var(--success-bg); color: var(--success); }
.td-hero .h-ic.dr { background: var(--error-bg); color: var(--error); }
.td-hero .h-title { font-size: .9rem; color: var(--text-muted); margin-bottom: 8px; }
.td-hero .h-amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.td-hero .h-amt.cr { color: var(--primary); }
.td-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .85rem; }
.td-status.ok { color: var(--success); }
.td-status.bad { color: var(--error); }

.td-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,23,42,.06); padding: 6px 16px; margin-bottom: 14px; }
.td-card h3 { font-size: 1rem; font-weight: 800; padding: 12px 0 4px; }
.td-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border); }
.td-row:last-child { border-bottom: none; }
.td-row .k { font-size: .82rem; color: var(--text-muted); flex-shrink: 0; }
.td-row .v { font-size: .85rem; font-weight: 600; text-align: right; word-break: break-word; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.copy-btn { border: none; background: var(--primary-bg); color: var(--primary); width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

.td-share { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border: none; border-radius: 16px; background: var(--primary); color: #fff; font-family: var(--font); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 22px rgba(34,90,227,.3); text-decoration: none; margin-top: 4px; }
.td-share:active { background: var(--primary-dark); }
</style>

<div class="td-wrap">

  <div class="sub-topbar">
    <div class="sub-topbar-left">
      <a href="wallet.php" class="sub-back" aria-label="Back" onclick="return goBack(event)">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg>
      </a>
      <span class="sub-title">Transaction Details</span>
    </div>
    <a href="contact_admin.php" class="icon-btn" title="Get help">
      <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
    </a>
  </div>

  <div class="td-hero">
    <div class="h-ic <?php echo $is_cr ? 'cr' : 'dr'; ?>">
      <?php if ($is_cr): ?>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14m0 0l7-7m-7 7l-7-7"/></svg>
      <?php else: ?>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5m0 0l-7 7m7-7l7 7"/></svg>
      <?php endif; ?>
    </div>
    <div class="h-title"><?php echo htmlspecialchars($title); ?></div>
    <div class="h-amt <?php echo $is_cr ? 'cr' : ''; ?>"><?php echo $is_cr ? '+' : '-'; ?>₦<?php echo number_format($t['amount'], 2); ?></div>
    <div class="td-status <?php echo $ok ? 'ok' : 'bad'; ?>">
      <?php if ($ok): ?><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="8 12 11 15 16 9"/></svg><?php endif; ?>
      <?php echo ucfirst($status); ?>
    </div>
  </div>

  <div class="td-card">
    <h3>Transaction Details</h3>
    <div class="td-row"><span class="k"><?php echo $is_cr ? 'Credited to' : 'Paid from'; ?></span><span class="v">Dabil Wallet</span></div>
    <div class="td-row"><span class="k">Type</span><span class="v"><?php echo $is_cr ? 'Wallet Funding' : 'Wallet Payment'; ?></span></div>
    <?php if ($t['description']): ?><div class="td-row"><span class="k">Remark</span><span class="v"><?php echo htmlspecialchars($t['description']); ?></span></div><?php endif; ?>
    <div class="td-row"><span class="k">Transaction No.</span><span class="v"><span id="refVal"><?php echo htmlspecialchars($ref); ?></span><button class="copy-btn" type="button" onclick="copyText('<?php echo htmlspecialchars($ref, ENT_QUOTES); ?>')" aria-label="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button></span></div>
    <div class="td-row"><span class="k">Date</span><span class="v"><?php echo date('M j, Y g:i A', strtotime($t['created_at'])); ?></span></div>
    <div class="td-row"><span class="k">Session ID</span><span class="v"><span><?php echo $session_id; ?></span><button class="copy-btn" type="button" onclick="copyText('<?php echo $session_id; ?>')" aria-label="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg></button></span></div>
  </div>

  <a href="share_receipt.php?id=<?php echo (int)$t['id']; ?>" class="td-share">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
    Share Receipt
  </a>
</div>

<div class="os-toast" id="tdToast" style="position:fixed;bottom:calc(env(safe-area-inset-bottom) + 80px);left:50%;transform:translateX(-50%);background:#0F172A;color:#fff;padding:10px 18px;border-radius:30px;font-size:.8rem;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:700;opacity:0;pointer-events:none;transition:opacity .25s"></div>

<script>
function copyText(s){
  navigator.clipboard.writeText(s).then(()=>tdToast('Copied')).catch(()=>{
    const ta=document.createElement('textarea');ta.value=s;document.body.appendChild(ta);ta.select();try{document.execCommand('copy');tdToast('Copied');}catch(e){tdToast('Copy failed');}document.body.removeChild(ta);
  });
}
function tdToast(m){const t=document.getElementById('tdToast');t.textContent=m;t.style.opacity='1';clearTimeout(window._td);window._td=setTimeout(()=>t.style.opacity='0',1600);}
</script>

<?php include("includes/footer.php"); ?>
