<?php
session_start();

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once __DIR__ . '/../../config.php';

/**
 * Safe Step Upload Proof Portal
 * - Public can upload proof ONLY if none exists
 * - Staff can overwrite existing proof after login
 * - Staff login is in-page and stored in session
 */

// ---- helper: current staff user (from session) ----
$currentUser = $_SESSION['portal_user'] ?? null;

// Read invoice from query or POST
$invoice = '';
if (isset($_GET['invoice'])) {
    $invoice = trim((string)$_GET['invoice']);
} elseif (isset($_POST['invoice'])) {
    $invoice = trim((string)$_POST['invoice']);
}

// Helper: load payment by invoice
$payment = null;
if ($invoice !== '') {
    $stmt = $pdo->prepare("
        SELECT 
            p.Id           AS PaymentId,
            p.InvoiceNumber,
            p.Amount,
            p.PaymentDate,
            p.ProofFilePath,
            c.FullName     AS ClientName,
            c.ClientId     AS ClientCode,
            a.Name         AS AreaName,
            pl.Code        AS PlotCode
        FROM ClientPayments p
        JOIN ClientContracts cc ON p.ContractId = cc.Id
        JOIN Clients c         ON cc.ClientId = c.Id
        JOIN Plots pl          ON cc.PlotId   = pl.Id
        JOIN Areas a           ON pl.AreaId   = a.Id
        WHERE p.InvoiceNumber = :inv
        LIMIT 1
    ");
    $stmt->execute([':inv' => $invoice]);
    $payment = $stmt->fetch(PDO::FETCH_ASSOC);
}

// Helper: logout
if (isset($_GET['logout']) && $_GET['logout'] === '1') {
    unset($_SESSION['portal_user']);
    header("Location: upload-proof.php" . ($invoice ? "?invoice=" . urlencode($invoice) : ""));
    exit;
}

// ---- handle staff login POST (in-page login form) ----
$loginError = '';
if (
    isset($_POST['login_identifier'], $_POST['login_password'], $_POST['login_invoice'])
) {
    $loginInvoice = trim((string)$_POST['login_invoice']);
    $identifier   = trim((string)$_POST['login_identifier']);
    $password     = (string)$_POST['login_password'];

    try {
        $stmt = $pdo->prepare("SELECT * FROM Users WHERE (Username = ? OR Email = ?) LIMIT 1");
        $stmt->execute([$identifier, $identifier]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);

        if (!$user) {
            $loginError = 'User not found.';
        } else {
            $stored = (string)($user['PasswordHash'] ?? '');
            $valid = false;

            if ($stored !== '' && password_verify($password, $stored)) {
                $valid = true;

                if (password_needs_rehash($stored, PASSWORD_DEFAULT)) {
                    $newHash = password_hash($password, PASSWORD_DEFAULT);
                    $upd = $pdo->prepare("UPDATE Users SET PasswordHash = ? WHERE Id = ?");
                    $upd->execute([$newHash, $user['Id']]);
                }
            } elseif ($password !== '' && $password === $stored) {
                $valid = true;
                $newHash = password_hash($password, PASSWORD_DEFAULT);
                $upd = $pdo->prepare("UPDATE Users SET PasswordHash = ? WHERE Id = ?");
                $upd->execute([$newHash, $user['Id']]);
            }

            if (!$valid) {
                $loginError = 'Incorrect password.';
            } elseif ((int)($user['AllowWebAccess'] ?? 0) !== 1) {
                $loginError = 'Web access denied for this account.';
            } else {
                $_SESSION['portal_user'] = [
                    'FullName' => (string)$user['FullName'],
                    'Role'     => (string)$user['Role'],
                    'Username' => (string)$user['Username'],
                ];
                $currentUser = $_SESSION['portal_user'];

                header("Location: upload-proof.php?invoice=" . urlencode($loginInvoice));
                exit;
            }
        }
    } catch (Exception $e) {
        $loginError = 'Login failed. Please try again.';
    }
}

// ---- brand constants (Safe Step) ----
$brandName   = "Safe Step";
$brandLegal  = "Safe Step Properties Limited";
$brandPhone  = "+234 814 241 1113";
$brandWhats  = "+234 704 646 6653";
$brandAddr   = "Suite 02, Jahi Mall, Valentine Nwabuaeze Crescent, Jahi, FCT Abuja.";
$brandEmail  = "info@safestepproperties.com";

// ---- helpers for output ----
function h($v): string { return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8'); }

// Build current upload page URL for QR
$uploadUrl = "";
$hasProof = false;
$paymentId = 0;

if ($payment) {
    $paymentId = (int)$payment['PaymentId'];
    $uploadUrl = "https://portal.legitempire.com.ng/dashboard/upload-proof.php?invoice=" . urlencode($invoice);
    $hasProof  = !empty($payment['ProofFilePath']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upload Payment Proof | <?php echo h($brandLegal); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdn.tailwindcss.com"></script>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

  <style>
    :root{
      --brand-blue: #125db8;
      --brand-blue-dark: #07356f;
      --brand-blue-soft: #eaf3ff;
      --brand-green: #3baa15;
      --brand-green-dark: #257b0b;
      --ink: #0b1b33;
      --muted: #5d6a7c;
      --line: #dbe4ef;
      --surface: #f6f9fc;
      --surface-strong: #eef5fb;
      --white: #ffffff;
      --footer: #06172d;
      --shadow: 0 18px 50px rgba(7, 53, 111, 0.12);
      --shadow-soft: 0 10px 28px rgba(7, 53, 111, 0.08);
      --radius: 8px;
      --container: 1180px;
    }

    body{
      font-family:'Poppins',sans-serif;
      background:
        radial-gradient(circle at top left, rgba(59,170,21,0.10), transparent 24%),
        radial-gradient(circle at bottom right, rgba(18,93,184,0.08), transparent 28%),
        var(--surface);
      color:var(--ink);
    }

    .glass{
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .brand-gradient{
      background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue) 62%, var(--brand-green));
    }

    .card-modern{
      background: rgba(255,255,255,0.96);
      border:1px solid var(--line);
      box-shadow: 0 14px 40px rgba(18,93,184,0.07);
    }

    .soft-panel{
      background: var(--brand-blue-soft);
      border:1px solid rgba(59,170,21,0.12);
    }

    .field{
      background:#fff;
      border:1px solid #dbe7f0;
      transition: all .25s ease;
    }

    .field:focus{
      outline:none;
      border-color: var(--brand-green);
      box-shadow: 0 0 0 4px rgba(59,170,21,0.12);
    }

    .hero-ring{
      box-shadow: 0 10px 24px rgba(59,170,21,0.18);
    }
  </style>
</head>

<body class="min-h-screen flex flex-col text-slate-900">

<header class="w-full bg-white/75 glass border-b border-slate-100 sticky top-0 z-20">
  <div class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between gap-4">
    <div class="flex items-center gap-4 min-w-0">
      <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl brand-gradient flex items-center justify-center hero-ring shrink-0">
        <img src="logo-safe-step-symbol.png" alt="<?php echo h($brandName); ?>" class="w-10 h-10 sm:w-12 sm:h-12 object-contain">
      </div>

      <div class="min-w-0">
        <h1 class="text-lg sm:text-xl font-black tracking-[0.18em] uppercase text-[var(--ink)] truncate">
          <?php echo h($brandName); ?>
        </h1>
        <p class="text-[10px] sm:text-xs text-slate-500 font-semibold uppercase tracking-[0.22em]">
          Payment Proof Upload Portal
        </p>
      </div>
    </div>

    <div class="text-right">
      <div class="inline-flex items-center gap-2 px-3 py-2 rounded-full border border-[var(--line)] bg-[var(--brand-blue-soft)] text-[10px] font-extrabold uppercase tracking-[0.18em] text-[var(--brand-blue-dark)]">
        <i class="fa-solid fa-shield-halved text-[var(--brand-green)]"></i>
        <span>Secure Upload</span>
      </div>

      <?php if ($currentUser): ?>
        <div class="mt-2 text-[10px] font-semibold text-emerald-700">
          Logged in: <?php echo h($currentUser['FullName']); ?> (<?php echo h($currentUser['Role']); ?>)
        </div>
      <?php else: ?>
        <div class="mt-2 text-[10px] text-slate-400">
          Public mode (no overwrite)
        </div>
      <?php endif; ?>
    </div>
  </div>
</header>

<main class="flex-1">
  <div class="max-w-6xl mx-auto px-4 py-6 sm:py-10 space-y-6">

    <!-- Search / Intro -->
    <section class="card-modern rounded-[2rem] p-5 sm:p-7">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-center">
        <div>
          <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">
            Verify payment record
          </p>
          <h2 class="text-2xl sm:text-3xl font-black text-slate-900 leading-tight">
            Upload proof using your invoice number
          </h2>
          <p class="text-sm text-slate-500 mt-3 max-w-xl leading-relaxed">
            Enter the invoice number exactly as it appears on your receipt to load the payment record,
            confirm the details, and upload your payment proof securely.
          </p>

          <div class="mt-4 flex flex-wrap gap-2 text-[11px]">
            <span class="inline-flex items-center px-3 py-2 rounded-full bg-slate-50 border border-slate-100 text-slate-600 font-semibold">
              JPG
            </span>
            <span class="inline-flex items-center px-3 py-2 rounded-full bg-slate-50 border border-slate-100 text-slate-600 font-semibold">
              PNG
            </span>
            <span class="inline-flex items-center px-3 py-2 rounded-full bg-slate-50 border border-slate-100 text-slate-600 font-semibold">
              PDF
            </span>
            <span class="inline-flex items-center px-3 py-2 rounded-full bg-slate-50 border border-slate-100 text-slate-600 font-semibold">
              Max 5 MB
            </span>
          </div>
        </div>

        <div class="soft-panel rounded-[1.5rem] p-5">
          <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">
            Search payment
          </p>

          <form method="get" action="" class="space-y-4">
            <div>
              <label class="block text-[11px] font-bold text-slate-600 mb-1">
                Invoice Number
              </label>
              <div class="relative">
                <i class="fas fa-receipt absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 text-xs"></i>
                <input
                  type="text"
                  name="invoice"
                  value="<?php echo h($invoice); ?>"
                  class="field w-full pl-10 pr-4 py-3 rounded-2xl text-sm"
                  placeholder="e.g. SSP-2026-000123"
                  required>
              </div>
            </div>

            <button type="submit"
              class="w-full inline-flex items-center justify-center px-5 py-3 rounded-2xl brand-gradient text-white text-[11px] font-black uppercase tracking-[0.18em] hover:opacity-95 transition shadow-sm">
              <i class="fas fa-magnifying-glass mr-2"></i> Load Payment
            </button>
          </form>

          <p class="mt-3 text-[11px] text-slate-500">
            You can also open this page directly with an invoice number in the link.
          </p>
        </div>
      </div>
    </section>

    <?php if ($invoice !== '' && !$payment): ?>
      <section class="card-modern rounded-[2rem] p-5 sm:p-6 border border-red-100">
        <div class="flex gap-3">
          <div class="w-11 h-11 rounded-2xl bg-red-50 flex items-center justify-center text-red-600 text-sm shrink-0">
            <i class="fas fa-circle-exclamation"></i>
          </div>
          <div>
            <h3 class="text-sm font-black text-red-600">Invoice not found</h3>
            <p class="text-sm text-slate-600 mt-1">
              No payment record was found for invoice
              <span class="font-black"><?php echo h($invoice); ?></span>.
              Confirm the invoice number and try again.
            </p>
          </div>
        </div>
      </section>
    <?php endif; ?>

    <?php if ($payment): ?>
      <section class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <div class="xl:col-span-2 space-y-6">

          <!-- Payment Info -->
          <div class="card-modern rounded-[2rem] p-5 sm:p-7">
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 rounded-2xl bg-[var(--brand-blue-soft)] border border-[var(--line)] flex items-center justify-center text-[var(--brand-green)] text-base shrink-0">
                <i class="fas fa-file-invoice-dollar"></i>
              </div>

              <div class="flex-1 min-w-0">
                <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-1">
                  Payment Record
                </p>
                <h2 class="text-xl sm:text-2xl font-black text-slate-900">
                  Invoice <?php echo h($payment['InvoiceNumber']); ?>
                </h2>
                <p class="text-sm text-slate-500 mt-2">
                  Confirm the details below before proceeding with upload.
                </p>

                <div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                  <div class="soft-panel rounded-2xl p-4">
                    <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Client Name</p>
                    <p class="font-bold text-slate-900 mt-1">
                      <?php echo h($payment['ClientName']); ?>
                    </p>
                    <p class="text-[11px] text-slate-400 mt-1">
                      <?php echo h($payment['ClientCode']); ?>
                    </p>
                  </div>

                  <div class="soft-panel rounded-2xl p-4">
                    <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Amount Paid</p>
                    <p class="font-black text-slate-900 mt-1">
                      ₦<?php echo number_format((float)$payment['Amount'], 2); ?>
                    </p>
                  </div>

                  <div class="soft-panel rounded-2xl p-4">
                    <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Area</p>
                    <p class="font-bold text-slate-900 mt-1">
                      <?php echo h($payment['AreaName']); ?>
                    </p>
                  </div>

                  <div class="soft-panel rounded-2xl p-4">
                    <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Plot Code</p>
                    <p class="font-bold text-slate-900 mt-1">
                      <?php echo h($payment['PlotCode']); ?>
                    </p>
                  </div>

                  <div class="soft-panel rounded-2xl p-4 sm:col-span-2">
                    <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Payment Date</p>
                    <p class="font-bold text-slate-900 mt-1">
                      <?php echo h($payment['PaymentDate']); ?>
                    </p>
                  </div>
                </div>

                <?php if ($hasProof): ?>
                  <div class="mt-5 p-4 rounded-2xl bg-emerald-50 border border-emerald-100">
                    <p class="text-[10px] font-extrabold text-emerald-700 uppercase tracking-[0.20em] mb-2">
                      Existing Proof Found
                    </p>

                    <div class="flex flex-wrap items-center gap-3">
                      <a href="/<?php echo h($payment['ProofFilePath']); ?>"
                         target="_blank"
                         class="inline-flex items-center px-4 py-2 rounded-full bg-white text-emerald-800 text-xs font-bold hover:bg-emerald-100 transition border border-emerald-100 shadow-sm">
                        <i class="fas fa-file-lines mr-2"></i>
                        View current proof
                      </a>

                      <?php if ($currentUser): ?>
                        <span class="inline-flex items-center px-3 py-2 rounded-full bg-white text-slate-600 text-[10px] font-extrabold uppercase tracking-[0.18em] border border-slate-100">
                          Staff can replace below
                        </span>
                      <?php else: ?>
                        <span class="inline-flex items-center px-3 py-2 rounded-full bg-white text-amber-700 text-[10px] font-extrabold uppercase tracking-[0.18em] border border-amber-100">
                          Overwrite requires staff login
                        </span>
                      <?php endif; ?>
                    </div>
                  </div>
                <?php endif; ?>

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

          <?php if (!$hasProof): ?>
            <!-- Public Upload -->
            <div class="card-modern rounded-[2rem] p-5 sm:p-7">
              <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-1">
                Upload Payment Proof
              </p>
              <h3 class="text-lg font-black text-slate-900">Attach your proof file</h3>
              <p class="text-sm text-slate-500 mt-2">
                Accepted formats: JPG, PNG, PDF. Maximum file size: 5 MB.
              </p>

              <form action="/api/upload_payment_proof.php" method="post" enctype="multipart/form-data" class="mt-5 space-y-4">
                <input type="hidden" name="payment_id" value="<?php echo (int)$paymentId; ?>">

                <div class="soft-panel rounded-2xl p-4">
                  <label class="block text-[11px] font-bold text-slate-600 mb-2">Choose file</label>
                  <input type="file"
                    name="proof"
                    accept=".jpg,.jpeg,.png,.pdf"
                    required
                    class="block w-full text-xs text-slate-700
                      file:mr-3 file:py-3 file:px-4
                      file:rounded-2xl file:border-0
                      file:text-xs file:font-extrabold file:uppercase file:tracking-[0.14em]
                      file:bg-[var(--brand-blue)] file:text-white
                      hover:file:opacity-95 cursor-pointer">
                </div>

                <button type="submit"
                  class="inline-flex items-center px-6 py-3 rounded-2xl brand-gradient text-white text-[11px] font-black uppercase tracking-[0.18em] hover:opacity-95 transition shadow-sm">
                  <i class="fas fa-cloud-arrow-up mr-2"></i> Upload Proof
                </button>
              </form>
            </div>
          <?php else: ?>
            <!-- Existing proof / replace -->
            <div class="card-modern rounded-[2rem] p-5 sm:p-7 border border-amber-100">
              <div class="flex items-start gap-4">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 border border-amber-100 flex items-center justify-center text-amber-600 text-base shrink-0">
                  <i class="fas fa-lock"></i>
                </div>

                <div class="flex-1">
                  <p class="text-[10px] font-extrabold text-amber-600 uppercase tracking-[0.22em] mb-1">
                    Existing proof protection
                  </p>
                  <h3 class="text-lg font-black text-slate-900">
                    This payment already has proof attached
                  </h3>
                  <p class="text-sm text-slate-600 mt-2">
                    To prevent accidental overwrite, only authorized staff can replace the existing proof file.
                  </p>

                  <?php if ($currentUser): ?>
                    <div class="mt-5 border-t border-slate-100 pt-5">
                      <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">
                        Staff replace proof
                      </p>

                      <form action="/api/upload_payment_proof.php" method="post" enctype="multipart/form-data" class="space-y-4">
                        <input type="hidden" name="payment_id" value="<?php echo (int)$paymentId; ?>">

                        <div class="soft-panel rounded-2xl p-4">
                          <label class="block text-[11px] font-bold text-slate-600 mb-2">New proof file</label>
                          <input type="file"
                            name="proof"
                            accept=".jpg,.jpeg,.png,.pdf"
                            required
                            class="block w-full text-xs text-slate-700
                              file:mr-3 file:py-3 file:px-4
                              file:rounded-2xl file:border-0
                              file:text-xs file:font-extrabold file:uppercase file:tracking-[0.14em]
                              file:bg-slate-900 file:text-white
                              hover:file:bg-black cursor-pointer">
                        </div>

                        <div class="flex flex-wrap items-center gap-3">
                          <button type="submit"
                            class="inline-flex items-center px-6 py-3 rounded-2xl bg-red-600 text-white text-[11px] font-black uppercase tracking-[0.18em] hover:bg-red-700 transition shadow-sm">
                            <i class="fas fa-rotate mr-2"></i> Replace Proof
                          </button>

                          <a href="upload-proof.php?invoice=<?php echo urlencode($invoice); ?>&logout=1"
                            class="inline-flex items-center text-[10px] text-slate-500 hover:text-slate-700 font-bold uppercase tracking-[0.18em]">
                            <i class="fas fa-right-from-bracket mr-2"></i> Logout staff access
                          </a>
                        </div>

                        <p class="text-[10px] text-slate-500">
                          Replacing proof updates the stored file path for this payment.
                        </p>
                      </form>
                    </div>
                  <?php else: ?>
                    <div class="mt-5 border-t border-slate-100 pt-5">
                      <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">
                        Staff login
                      </p>

                      <?php if ($loginError): ?>
                        <div class="mb-3 px-4 py-3 rounded-2xl bg-red-50 border border-red-100 text-[11px] text-red-700 font-semibold">
                          <i class="fas fa-circle-exclamation mr-2"></i>
                          <?php echo h($loginError); ?>
                        </div>
                      <?php endif; ?>

                      <form method="post" action="" class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <div>
                          <label class="block text-[11px] font-bold text-slate-600 mb-1">Username or Email</label>
                          <input type="text" name="login_identifier" required class="field w-full px-3 py-3 rounded-2xl text-xs">
                        </div>

                        <div>
                          <label class="block text-[11px] font-bold text-slate-600 mb-1">Password</label>
                          <input type="password" name="login_password" required class="field w-full px-3 py-3 rounded-2xl text-xs">
                        </div>

                        <div class="flex items-end">
                          <input type="hidden" name="login_invoice" value="<?php echo h($invoice); ?>">
                          <button type="submit"
                            class="w-full inline-flex items-center justify-center px-4 py-3 rounded-2xl bg-slate-900 text-white text-[11px] font-black uppercase tracking-[0.18em] hover:bg-black transition shadow-sm">
                            <i class="fas fa-right-to-bracket mr-2"></i> Login & Replace
                          </button>
                        </div>
                      </form>

                      <p class="text-[10px] text-slate-500 mt-3">
                        Only staff accounts with web access enabled can replace uploaded proof.
                      </p>
                    </div>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          <?php endif; ?>

          <!-- Contact -->
          <div class="card-modern rounded-[2rem] p-5 sm:p-6">
            <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">Company Contact</p>
            <div class="text-sm text-slate-600 leading-relaxed">
              <p class="font-black text-slate-900"><?php echo h($brandLegal); ?></p>
              <p><?php echo h($brandAddr); ?></p>
              <p class="mt-2">Contact: <span class="font-bold"><?php echo h($brandPhone); ?></span></p>
              <p>WhatsApp: <span class="font-bold"><?php echo h($brandWhats); ?></span></p>
              <p>Email: <span class="font-bold"><?php echo h($brandEmail); ?></span></p>
            </div>
          </div>

        </div>

        <div class="space-y-6">

          <!-- QR -->
          <div class="card-modern rounded-[2rem] p-5 sm:p-6 text-center">
            <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.22em] mb-2">
              Mobile Access
            </p>
            <h3 class="text-lg font-black text-slate-900">
              Scan to open on your phone
            </h3>
            <p class="text-sm text-slate-500 mt-2">
              Use your phone camera to open this invoice page instantly and upload the file from mobile.
            </p>

            <div class="mt-5 flex justify-center">
              <div id="qrcode"
                   class="w-44 h-44 sm:w-52 sm:h-52 flex items-center justify-center bg-white rounded-[1.5rem] border border-slate-100 shadow-sm"></div>
            </div>

            <div class="mt-4 soft-panel rounded-2xl p-3 text-left">
              <p class="text-[10px] font-extrabold text-slate-400 uppercase tracking-[0.20em]">Invoice</p>
              <p class="font-black text-slate-900 mt-1"><?php echo h($invoice); ?></p>
            </div>
          </div>

          <!-- Tips -->
          <div class="card-modern rounded-[2rem] p-5 sm:p-6">
            <p class="font-black text-slate-900 mb-3 uppercase tracking-[0.18em] text-[10px]">
              Upload Tips
            </p>
            <ul class="text-[11px] text-slate-600 list-disc list-inside space-y-2">
              <li>Upload proof immediately after making payment.</li>
              <li>Ensure the receipt or transfer slip is clear and readable.</li>
              <li>Only staff can replace proof already attached to a payment.</li>
              <li>If the link is lost, return here and search again using the invoice number.</li>
            </ul>
          </div>

        </div>
      </section>
    <?php endif; ?>

  </div>
</main>

<?php if ($payment): ?>
<script>
  (function () {
    var url = "<?php echo h($uploadUrl); ?>";
    var qrelem = document.getElementById("qrcode");
    if (qrelem && typeof QRCode !== "undefined") {
      qrelem.innerHTML = "";
      new QRCode(qrelem, {
        text: url,
        width: 208,
        height: 208,
        colorDark: "#0b1b33",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    }
  })();
</script>
<?php endif; ?>

</body>
</html>
