<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Client Report - Safe Step Properties Limited</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

  <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;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, 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.07), transparent 26%),
        var(--surface);
      padding: 20px;
      color: #0f172a;
    }

    .page-wrapper {
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
    }

    .watermark {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70vw;
      max-width: 720px;
      opacity: 0.05;
      z-index: 0;
      pointer-events: none;
      filter: grayscale(100%);
    }

    .watermark img {
      width: 100%;
      height: auto;
      display: block;
    }

    .print-controls {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 12px;
      position: relative;
      z-index: 2;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--brand-blue);
      background: linear-gradient(135deg, var(--brand-blue), var(--brand-green));
      color: #ffffff;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      border-radius: 10px;
      cursor: pointer;
      transition: all .15s ease;
      user-select: none;
      box-shadow: 0 10px 18px rgba(18, 93, 184, 0.16);
    }

    .btn.secondary {
      background: #ffffff;
      color: var(--brand-blue);
      border-color: rgba(15, 23, 42, .15);
      box-shadow: none;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(18, 93, 184, 0.18);
    }

    .report-container {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 22px;
      padding: 24px 24px 20px 24px;
      position: relative;
      z-index: 1;
      box-shadow: 0 14px 34px rgba(2, 8, 23, 0.06);
      overflow: hidden;
    }

    .report-container::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at top right, rgba(59, 170, 21, 0.05), transparent 18%),
        radial-gradient(circle at bottom left, rgba(18, 93, 184, 0.04), transparent 18%);
    }

    .report-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      border-bottom: 1px solid rgba(15, 23, 42, .08);
      padding-bottom: 14px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .company-block {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      min-width: 0;
    }

    .company-logo {
      width: 84px;
      height: auto;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .company-text {
      min-width: 0;
    }

    .company-text h1 {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .company-text p {
      font-size: 11px;
      line-height: 1.6;
      color: rgba(15, 23, 42, .72);
    }

    .company-text a {
      color: var(--brand-blue);
      text-decoration: none;
      font-weight: 700;
    }

    .report-meta-top {
      text-align: right;
      font-size: 11px;
      color: rgba(15, 23, 42, .75);
      min-width: 240px;
    }

    .report-meta-top h2 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--brand-blue);
      margin-bottom: 8px;
      font-weight: 900;
    }

    .report-meta-top span {
      display: block;
      line-height: 1.5;
    }

    .report-id {
      font-weight: 900;
      font-size: 13px;
      color: var(--brand-blue);
    }

    .section {
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: rgba(15, 23, 42, .55);
      margin-bottom: 8px;
      font-weight: 900;
    }

    .info-card {
      border: 1px solid rgba(15, 23, 42, .08);
      background: #ffffff;
      border-radius: 16px;
      padding: 12px 12px;
    }

    .kv {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .kv td {
      padding: 4px 0;
      vertical-align: top;
    }

    .kv td.label {
      width: 140px;
      color: rgba(15, 23, 42, .55);
      font-size: 11px;
      letter-spacing: .02em;
      padding-right: 10px;
      white-space: nowrap;
    }

    .kv td.value {
      font-weight: 800;
      color: #0f172a;
      word-break: break-word;
    }

    .client-code {
      color: var(--brand-blue);
      font-weight: 900;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 4px;
    }

    .summary-card {
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 16px;
      padding: 10px 12px;
      background: #ffffff;
    }

    .summary-label {
      font-size: 10px;
      color: rgba(15, 23, 42, .55);
      text-transform: uppercase;
      letter-spacing: 0.16em;
      margin-bottom: 6px;
      font-weight: 900;
    }

    .summary-value {
      font-size: 16px;
      font-weight: 900;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }

    .summary-value.outstanding {
      color: #b42318;
    }

    .summary-value.positive {
      color: var(--brand-green-dark);
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      font-size: 12px;
    }

    .plan-card {
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 16px;
      padding: 10px 12px;
      background: #ffffff;
    }

    .plan-label {
      color: rgba(15, 23, 42, .55);
      margin-bottom: 6px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .16em;
    }

    .plan-value {
      font-weight: 900;
      font-size: 13px;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }

    .table-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: rgba(15, 23, 42, .55);
      margin: 16px 0 8px 0;
      font-weight: 900;
    }

    table.data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
    }

    table.data-table thead th {
      background: #eaf3ff;
      padding: 10px 10px;
      text-align: left;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 10px;
      color: rgba(15, 23, 42, .65);
      border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

    table.data-table tbody td {
      padding: 10px 10px;
      border-bottom: 1px solid rgba(15, 23, 42, .06);
      color: rgba(15, 23, 42, .88);
    }

    table.data-table tbody tr:last-child td {
      border-bottom: none;
    }

    .amount-cell {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      color: #0f172a;
    }

    .plot-code {
      font-weight: 900;
      color: var(--brand-blue);
      white-space: nowrap;
    }

    .status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .12em;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .status-active {
      background: rgba(22, 163, 74, .10);
      color: #166534;
      border-color: rgba(22, 163, 74, .25);
    }

    .status-pending {
      background: rgba(245, 158, 11, .12);
      color: #b54708;
      border-color: rgba(245, 158, 11, .25);
    }

    .report-footer {
      border-top: 1px solid rgba(15, 23, 42, .08);
      padding-top: 10px;
      margin-top: 8px;
      font-size: 10px;
      color: rgba(15, 23, 42, .60);
      line-height: 1.6;
    }

    .signature-block {
      margin-top: 18px;
      font-size: 11px;
    }

    .signature-row {
      display: flex;
      gap: 26px;
    }

    .signature-col {
      flex: 1;
    }

    .signature-line {
      margin-top: 26px;
      border-top: 1px solid rgba(15, 23, 42, .35);
      width: 72%;
    }

    .signature-label {
      margin-top: 6px;
      color: rgba(15, 23, 42, .75);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .10em;
      font-size: 10px;
    }

    @media print {
      body {
        background: #ffffff;
        padding: 0;
      }

      .print-controls {
        display: none;
      }

      .page-wrapper {
        margin: 0;
        max-width: none;
      }

      .report-container {
        border-radius: 0;
        border: none;
        box-shadow: none;
      }

      .table-section-title {
        page-break-after: avoid;
      }

      table.data-table {
        page-break-inside: avoid;
      }

      .watermark {
        position: fixed;
      }
    }

    @media (max-width: 760px) {
      .report-header {
        flex-direction: column;
        align-items: stretch;
      }

      .report-meta-top {
        text-align: left;
        min-width: 0;
      }

      .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .plan-grid {
        grid-template-columns: 1fr;
      }

      .kv td.label {
        width: 120px;
      }

      .company-block {
        flex-direction: column;
      }

      .company-logo {
        width: 72px;
      }
    }
  </style>
</head>

<body>
  <div class="page-wrapper">
    <div class="watermark">
      <img src="logo-safe-step.png" alt="Safe Step Properties Limited Watermark" />
    </div>

    <div class="print-controls">
      <button class="btn secondary" onclick="window.print()">
        <i class="fas fa-print"></i> Print
      </button>
      <button class="btn" onclick="window.print()">
        <i class="fas fa-file-pdf"></i> Download PDF
      </button>
    </div>

    <div class="report-container">
      <div class="report-header">
        <div class="company-block">
          <img src="logo-safe-step.png" alt="Safe Step Properties Limited" class="company-logo" />
          <div class="company-text">
            <h1>Safe Step Properties Limited</h1>
            <p style="font-weight:800; color:var(--ink);">Sales, Investment &amp; Property Management</p>
            <p>Suite 02, Jahi Mall, Valentine Nwabuaeze Crescent, Jahi, FCT Abuja.</p>
            <p>
              Contact: +234 814 241 1113<br />
              WhatsApp: +234 704 646 6653<br />
              Email: <a href="mailto:info@safestepproperties.com">info@safestepproperties.com</a>
            </p>
          </div>
        </div>

        <div class="report-meta-top">
          <h2>Client Account Summary</h2>
          <span class="report-id" id="reportId">REP-00000000</span>
          <span>Generated: <span id="generatedDate">N/A</span></span>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Client Information</div>

        <div class="info-card">
          <table class="kv">
            <tbody>
              <tr>
                <td class="label">Full Name</td>
                <td class="value" id="clientName">Client Name</td>

                <td class="label" style="padding-left: 18px;">Client ID</td>
                <td class="value client-code" id="clientId">CLI-000000</td>
              </tr>
              <tr>
                <td class="label">Phone</td>
                <td class="value" id="clientPhone">N/A</td>

                <td class="label" style="padding-left: 18px;">Email</td>
                <td class="value" id="clientEmail">N/A</td>
              </tr>
              <tr>
                <td class="label">Registration Date</td>
                <td class="value" id="registeredDate">N/A</td>
                <td></td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Financial Summary</div>
        <div class="summary-grid">
          <div class="summary-card">
            <div class="summary-label">Total Plots</div>
            <div class="summary-value" id="totalPlots">0</div>
          </div>

          <div class="summary-card">
            <div class="summary-label">Total Value (₦)</div>
            <div class="summary-value positive" id="totalValue">0.00</div>
          </div>

          <div class="summary-card">
            <div class="summary-label">Amount Paid (₦)</div>
            <div class="summary-value positive" id="amountPaid">0.00</div>
          </div>

          <div class="summary-card">
            <div class="summary-label">Outstanding (₦)</div>
            <div class="summary-value outstanding" id="outstanding">0.00</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">Payment Plan</div>
        <div class="plan-grid">
          <div class="plan-card">
            <div class="plan-label">Plan Type</div>
            <div class="plan-value" id="planType">Full</div>
          </div>

          <div class="plan-card">
            <div class="plan-label">Duration</div>
            <div class="plan-value" id="planDuration">N/A</div>
          </div>

          <div class="plan-card">
            <div class="plan-label">Monthly Payment (₦)</div>
            <div class="plan-value" id="monthlyAmount">0.00</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="table-section-title">Purchased Plots</div>
        <table class="data-table" id="plotsTable">
          <thead>
            <tr>
              <th>Area</th>
              <th>Plot Code</th>
              <th class="amount-cell">Price (₦)</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody id="plotsBody">
            <tr>
              <td colspan="4" style="text-align: center; color: rgba(15,23,42,.55); padding: 12px;">
                No plots found
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="section">
        <div class="table-section-title">Payment History</div>
        <table class="data-table" id="paymentsTable">
          <thead>
            <tr>
              <th>Date</th>
              <th class="amount-cell">Amount (₦)</th>
              <th>Method</th>
              <th>Reference</th>
            </tr>
          </thead>
          <tbody id="paymentsBody">
            <tr>
              <td colspan="4" style="text-align: center; color: rgba(15,23,42,.55); padding: 12px;">
                No payments found
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="report-footer">
        <p>This report is issued by Safe Step Properties Limited for the client named above.</p>
        <p>It is confidential and intended solely for the recipient.</p>
        <p>Address: Suite 02, Jahi Mall, Valentine Nwabuaeze Crescent, Jahi, FCT Abuja. · Phone: +234 814 241 1113 / +234 704 646 6653 · Email: info@safestepproperties.com</p>
      </div>

      <div class="signature-block">
        <div class="signature-row">
          <div class="signature-col">
            <div class="signature-line"></div>
            <div class="signature-label">Authorized Signatory</div>
          </div>
          <div class="signature-col">
            <div class="signature-line"></div>
            <div class="signature-label">Accounts / Admin</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function getQueryParam(name) {
      const params = new URLSearchParams(window.location.search);
      return params.get(name);
    }

    function setText(id, value, fallback) {
      const el = document.getElementById(id);
      if (!el) return;
      el.textContent = value || fallback;
    }

    function fmtMoney(v) {
      const n = Number(v);
      if (!isFinite(n)) return v || "0.00";
      return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    async function loadReport() {
      const clientId = getQueryParam('clientId');
      if (!clientId) {
        console.error('No clientId provided in query string');
        return;
      }

      try {
        const res = await fetch(`../../api/get_client_summary_report.php?clientId=${encodeURIComponent(clientId)}`);
        const data = await res.json();

        if (!res.ok || !data) {
          console.error('Failed to load report data', data);
          return;
        }

        setText('reportId', data.reportId, 'N/A');
        setText('generatedDate', data.generatedDate, 'N/A');
        setText('clientName', data.clientName, 'N/A');
        setText('clientId', data.clientId, 'N/A');
        setText('clientPhone', data.clientPhone, 'N/A');
        setText('clientEmail', data.clientEmail, 'N/A');
        setText('registeredDate', data.registeredDate, 'N/A');

        setText('totalPlots', data.totalPlots, '0');
        setText('totalValue', data.totalValue !== undefined ? fmtMoney(data.totalValue) : null, '0.00');
        setText('amountPaid', data.amountPaid !== undefined ? fmtMoney(data.amountPaid) : null, '0.00');
        setText('outstanding', data.outstanding !== undefined ? fmtMoney(data.outstanding) : null, '0.00');

        setText('planType', data.planType, 'N/A');
        setText('planDuration', data.planDuration, 'N/A');
        setText('monthlyAmount', data.monthlyAmount !== undefined ? fmtMoney(data.monthlyAmount) : null, '0.00');

        const plotsBody = document.getElementById('plotsBody');
        if (plotsBody && data.plots && data.plots.length > 0) {
          plotsBody.innerHTML = '';
          data.plots.forEach(plot => {
            const rawStatus = (plot.status || '').toString().trim();
            const statusLower = rawStatus.toLowerCase();
            const statusClass = statusLower === 'active' ? 'status-active' : 'status-pending';

            const row = document.createElement('tr');
            row.innerHTML = `
              <td>${plot.area || ''}</td>
              <td class="plot-code">${plot.code || ''}</td>
              <td class="amount-cell">${plot.price ? fmtMoney(plot.price) : '0.00'}</td>
              <td><span class="status-badge ${statusClass}">${rawStatus || 'N/A'}</span></td>
            `;
            plotsBody.appendChild(row);
          });
        }

        const paymentsBody = document.getElementById('paymentsBody');
        if (paymentsBody && data.payments && data.payments.length > 0) {
          paymentsBody.innerHTML = '';
          data.payments.forEach(payment => {
            const row = document.createElement('tr');
            row.innerHTML = `
              <td>${payment.date || ''}</td>
              <td class="amount-cell">${payment.amount ? fmtMoney(payment.amount) : '0.00'}</td>
              <td>${payment.method || ''}</td>
              <td>${payment.reference || ''}</td>
            `;
            paymentsBody.appendChild(row);
          });
        }
      } catch (err) {
        console.error('Error loading report:', err);
      }
    }

    window.onload = loadReport;
  </script>
</body>

</html>
