{% extends 'partials/base.html' %}
{% load humanize %}
{% block content %}

<style>
    #wallet {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
</style>

<div class="page">
    <div class="inner">
      <div class="grid2" style="align-items:start">

        <div>
          <div class="balance">
            <div class="l">Main balance</div>
            <div class="v">${{ bale|floatformat:2|intcomma }}</div>
            <!-- <div class="s">US dollars · refundable to your bank at any time</div> -->
            <div class="row">
              <a href="#fund" class="btn btn-white">Add funds</a>
              <!-- <a href="#withdraw" class="btn btn-outline-white">Withdraw</a> -->
            </div>
          </div>

          <div class="statgrid" style="grid-template-columns:repeat(2,1fr);margin-top:14px">
            <div class="stat"><span class="icotile sm" style="background:rgba(63,191,127,.14)"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></span>
              <div class="v" style="font-family:var(--mono);font-size:18px">${{ t|floatformat:2|intcomma }}</div><div class="l">Money in</div></div>
            <div class="stat"><span class="icotile sm"><svg viewBox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"/></svg></span>
              <div class="v" style="font-family:var(--mono);font-size:18px">${{ spent|floatformat:2|intcomma }}</div><div class="l">Money out</div></div>
          </div>

          <div class="box" id="fund" style="margin-top:14px">
            <h2>Add funds</h2>
            <p class="hint">Credit lands in seconds. Balance never expires.</p>

            <form action="" method="POST">
              {% csrf_token %}
              <div class="amt-in">
                <span class="cur">$</span>
                <input name="amount" inputmode="decimal" value="25" aria-label="Amount to add">
              </div>
              <!-- <div class="quickamt">
                <a href="#fund">+$10</a><a href="#fund">+$25</a><a href="#fund">+$50</a><a href="#fund">+$100</a>
              </div> -->

              <div class="methods">
                <label class="method">
                  <input type="radio" name="method" value="crypto" checked>
                  <span class="mi"><svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/></svg></span>
                  <span><span class="t">Crypto</span><br><span class="d">USDT, Bitcoin, Litecoin</span></span>
                  <span class="dot"></span>
                </label>
                <!-- <label class="method">
                  <input type="radio" name="method" value="bank">
                  <span class="mi"><svg viewBox="0 0 24 24"><path d="M4 10h16M5 10v8M19 10v8M3 20h18M12 3l8 5H4l8-5z"/></svg></span>
                  <span><span class="t">Bank transfer</span><br><span class="d">Send to your dSociopay account</span></span>
                  <span class="dot"></span>
                </label> -->
                <label class="method">
                  <input type="radio" name="method" value="fapshi">
                  <span class="mi"><svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span>
                  <span><span class="t">Fapshi</span><br><span class="d">Momo, Orangemobile</span></span>
                  <span class="dot"></span>
                </label>
              </div>

              <button type="submit" class="btn btn-solid btn-block" style="margin-top:18px;border-radius:14px">Continue</button>
            </form>
          </div>

          {% if not b %}
          <div class="box" id="account">
            <span class="lbl">Funding account</span>
            <h2 style="margin-top:10px">Create a NGN virtual bank account</h2>
            <p class="hint">Add your phone number and dSociopay issues you a dedicated account number. Anything you transfer into it lands in your wallet automatically.</p>

            <form action="/dsocio/" method="POST">
              <div class="phone-in">
                <span class="cc">+234</span>
                <input name="number" required type="tel" inputmode="tel" placeholder="803 000 0000" aria-label="Phone number">
              </div>
              <label class="consent">
                <input required type="checkbox" name="consent">
                I allow dSociopay to create and operate a funding account in my name.
              </label>
              <button type="submit" class="btn btn-solid btn-block" style="margin-top:16px;border-radius:14px">Create account</button>
            </form>

            <p style="display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--dim)">
              <svg style="width: 20px;" viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z"/></svg> Issued by <b style="color:var(--brand)">dSociopay</b> · instant credit, 24/7
            </p>
          </div>
          {% endif %}

          {% if b %}
          <div class="box" id="account">
            <p style="display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--dim)">
              <svg style="width: 20px;" viewBox="0 0 24 24"><path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z"/></svg> Issued by <b style="color:var(--brand)">dSociopay</b> · instant credit, 24/7
            </p>

            <div class="vcard">
              <div class="vtop">
                <div class="vbank">
                  <span class="bi">d</span>
                  <span><span class="bn">dSociopay</span><br><span class="bs">Funding account</span></span>
                </div>
                <span class="status"><i></i>Active</span>
              </div>
              <div class="vnum">{{ b.account_number }}</div>
              <div class="vmeta"><span class="k">Account name</span><span class="v2">{{ b.account_name }}</span></div>
              <div class="vmeta"><span class="k">Bank Name</span><span class="v2">{{ b.bank_name }}</span></div>
              <ol class="vsteps">
                <li>Open your bank app and send any amount to this number.</li>
                <li>dSociopay matches the transfer to your account.</li>
                <li>Your wallet balance moves within seconds — no receipt to upload.</li>
              </ol>
            </div>
          </div>
          {% endif %}
        </div>

        <div class="panel">
          <div class="phead"><h2>Transaction history</h2><span style="font-size:12.5px;color:var(--dim)">{{ trans.count }} entries</span></div>
          <!-- <div class="chips" style="padding:14px 18px 4px">
            <a class="chip on" href="wallet.html">All</a>
            <a class="chip" href="wallet.html?flow=in">Money in</a>
            <a class="chip" href="wallet.html?flow=out">Money out</a>
          </div> -->
          {% for t in trans %}
        <div class="item">
          <span class="thumb green"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></span>
          <div class="body"><div class="t">Wallet top-up · {{ t.method }}</div><div class="m">{{ t.date }} · Credit</div></div>
          <div class="amt in">+${{ t.amount|floatformat:2|intcomma }}</div>
        </div>
        {% endfor %}
        </div>

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

  
{% endblock content %}