{{define "content"}}
<div id="dvAdv" class="{{if .IsAdmin}}d-none{{else}}{{end}}">
  
<!-- Layer 1 -->
  <video id="video1" class="media-layer hidden" muted playsinline></video>
  <img id="image1" class="media-layer hidden"/>

  <!-- Layer 2 (untuk crossfade) -->
  <video id="video2" class="media-layer hidden" muted playsinline></video>
  <img id="image2" class="media-layer hidden"/>

  <div class="overlay"></div>

  <div class="content">
      <h1 id="adTitle"></h1>
      <p id="adDesc"></p>
  </div>
</div>
<div class="app-shell {{if .IsAdmin}}{{else}}d-none{{end}}" id="dvQRDisplay">
    <input type="hidden" value="{{.IsAdmin}}" id="hdfLoginId">
    <header class="app-bar {{if .IsAdmin}}{{else}}d-none{{end}}">
      <div class="d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
          <span class="brand-dot"></span>
          <div>
            <div class="fw-semibold">PayNow Generator</div>
            <div class="hint">Individual • Mobile • Amount required</div>
          </div>
        </div>
        <span class="badge rounded-pill text-bg-light border app-badge">
          <span class="fw-semibold">SGD</span> <span class="text-muted">QR</span>
        </span>
      </div>

      <div class="tabs" role="tablist" aria-label="App navigation">
        <button id="tabGenerate" class="tab-btn active" type="button">Generate</button>
        <button id="tabHistory" class="tab-btn" type="button">History</button>
      </div>
    </header>

    <!-- Generate (Form) -->
    <main id="pageForm" class="page active {{if .IsAdmin}}{{else}}d-none{{end}}">
      <div class="card card-app">
        <div class="card-body">
          <h2 class="h5 mb-1">Generate your QR</h2>
          <div class="hint mb-4">Your mobile is remembered for 365 days on this device.</div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Mobile Number</label>
            <div class="input-group input-group-lg">
              <span class="input-group-text">+65</span>
              <input id="mobile" class="form-control" type="tel" inputmode="numeric" maxlength="8"
                     placeholder="91234567" autocomplete="tel-national">
            </div>
            <div id="mobileErr" class="invalid-feedback d-block" style="display:none;"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Amount</label>
            <div class="input-group input-group-lg">
              <span class="input-group-text">S$</span>
              <input id="amount" class="form-control" type="text" inputmode="decimal"
                     placeholder="12.30" autocomplete="off">
            </div>
            <div id="amountErr" class="invalid-feedback d-block" style="display:none;"></div>
          </div>

          <div class="d-grid gap-2 mt-4">
            <button id="btnGenerate" class="btn btn-maroon btn-lg rounded-pill" type="button">Generate QR</button>
            <button id="btnClear" class="btn btn-outline-secondary btn-lg rounded-pill" type="button">Clear (and forget mobile)</button>
          </div>
        </div>
      </div>
    </main>

    

    <!-- QR Page -->
    <main id="pageQR" class="page justify-content-center align-items-center min-vh-100">
      <div class="card card-app">
        <div class="card-body">
          <div class="text-center mb-2">
            <div class="fw-semibold">Your QR Code</div>
            <div class="hint">Ready to scan</div>
          </div>

          <div class="qr-frame mt-3">
            <div class="qr-stage" id="qrStage">
              <!-- Canvas is injected here by JS to avoid duplicates -->
            </div>

            <div class="qr-amount" id="qrAmountText">S$ 0.00</div>

            <div class="d-grid gap-2 mt-3 {{if .IsAdmin}}{{else}}d-none{{end}}">
              <button id="btnPaid" class="btn btn-maroon btn-lg rounded-pill" type="button">Payment Received</button>

              <div class="d-grid gap-2 d-sm-flex">
                <button id="btnBack" class="btn btn-outline-secondary btn-lg rounded-pill flex-fill" type="button">Back</button>
                <button id="btnDownload" class="btn btn-maroon btn-lg rounded-pill flex-fill" type="button">Download PNG</button>
              </div>
            </div>
          </div>

          <details class="mt-3">
            <summary class="small text-muted">Payload (debug)</summary>
            <pre id="payloadOut" class="small bg-white border rounded-3 p-2 mt-2 mb-0" style="white-space:pre-wrap;"></pre>
          </details>
        </div>
      </div>
    </main>

    <!-- History Page -->
    <main id="pageHistory" class="page">
      <div class="card card-app">
        <div class="card-body">
          <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
            <div>
              <h2 class="h5 mb-1">History</h2>
              <div class="hint">Completed payments (auto deletes anything older than 45 days).</div>
            </div>
            <button id="btnDeleteAll" class="btn btn-outline-danger rounded-pill" type="button">Delete All</button>
          </div>

          <div class="row g-2 align-items-end mb-3">
            <div class="col-12 col-sm-6">
              <label class="form-label fw-semibold mb-1">Filter by mobile</label>
              <select id="filterMobile" class="form-select rounded-pill">
                <option value="">All mobiles</option>
              </select>
            </div>
            <div class="col-12 col-sm-6">
              <label class="form-label fw-semibold mb-1">Filter by month</label>
              <select id="filterMonth" class="form-select rounded-pill">
                <option value="">All months</option>
              </select>
            </div>
          </div>

          <div id="historyEmpty" class="text-center py-5" style="display:none;">
            <div class="fw-semibold mb-1">No completed payments yet</div>
            <div class="hint">Record a payment from the QR page.</div>
          </div>

          <div id="historyList" class="d-grid gap-3"></div>
        </div>
      </div>
    </main>
  </div>

  <!-- Payment captured modal (Undo) -->
  <div class="modal fade" id="paidModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 border-0 shadow">
        <div class="modal-body p-4">
          <div class="d-flex align-items-start justify-content-between gap-3">
            <div>
              <div class="fw-bold fs-5">Payment captured ✅</div>
              <div class="hint mt-1">Saved into history. Returning to Generate…</div>
              <div class="mt-2">
                <span class="fw-semibold">Undo</span>
                <span class="hint">available for</span>
                <span id="undoTimer" class="fw-semibold">5</span>
                <span class="hint">seconds</span>
              </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="d-grid gap-2 d-sm-flex mt-4">
            <button id="btnUndo" class="btn btn-outline-secondary btn-lg rounded-pill flex-fill" type="button">Undo</button>
            <button id="btnOk" class="btn btn-maroon btn-lg rounded-pill flex-fill" type="button">OK</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Payment captured modal (Undo) -->
  <div class="modal fade" id="thankYouModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 border-0 shadow">
        <div class="modal-body p-4">
          <div class="d-flex align-items-start justify-content-between gap-3">
            <div>
              <div class="fw-bold fs-5">Payment Successfully ✅</div>
              <div class="hint mt-1">Thank you for you kindness, wish you luck always</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Libraries -->
  <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>

  <!-- App scripts -->
  <script src="/static/js/cookies.js"></script>
  <script src="/static/js/storage.js?v=1.112"></script>
  <script src="/static/js/paynow_emv.js"></script>
  <script src="/static/js/qr.js"></script>
  <script src="/static/js/app.js?v=1.200231"></script>
  {{end}}