{% extends "customer_portal/old_portal_base.html" %}
{% block title %}Profile · Customer Portal{% endblock %}
{% block n_prof %}active{% endblock %}

{% block content %}
  <h1 class="title">My Profile</h1>
  <p class="sub">Update your contact details. Your balance and credit limit are managed by the business.</p>

  <div class="grid g2">
    <div class="card">
      <div class="pad">
        <strong style="font-size:15.5px">Contact details</strong>
        <form method="post" style="margin-top:18px">
          {% csrf_token %}
          <input type="hidden" name="form" value="profile">
          <div class="field"><label class="lab">Name on file</label>
            <input class="fld" value="{{ cust.name }}" disabled style="background:#f4f6f9;color:var(--muted)">
            <div style="font-size:12px;color:var(--muted);margin-top:6px">The business sets your account name.</div>
          </div>
          <div class="field"><label class="lab">Contact person</label>{{ form.person_name }}</div>
          <div class="field"><label class="lab">Mobile</label>{{ form.mobile }}</div>
          <div class="field"><label class="lab">Address</label>{{ form.address }}</div>
          <div class="field"><label class="lab">CNIC</label>{{ form.cnic }}</div>
          <div class="field"><label class="lab">Login email</label>{{ form.email }}</div>
          <button class="btn primary" type="submit">Save changes</button>
        </form>
      </div>
    </div>

    <div>
      <div class="card" style="margin-bottom:18px">
        <div class="pad">
          <strong style="font-size:15.5px">Account</strong>
          <div style="margin-top:14px;display:grid;gap:10px;font-size:14px">
            <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Username</span><strong>{{ account.username }}</strong></div>
            <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Business</span><strong>{{ biz_label }}</strong></div>
            <div style="display:flex;justify-content:space-between"><span style="color:var(--muted)">Balance</span><strong>{{ cust.balance|floatformat:2 }}</strong></div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="pad">
          <strong style="font-size:15.5px">Change password</strong>
          <form method="post" style="margin-top:16px">
            {% csrf_token %}
            <input type="hidden" name="form" value="password">
            <div class="field"><label class="lab">Current password</label>{{ pw_form.current_password }}</div>
            <div class="field"><label class="lab">New password</label>{{ pw_form.new_password }}</div>
            <div class="field"><label class="lab">Confirm new password</label>{{ pw_form.confirm_password }}</div>
            <button class="btn ghost" type="submit">Update password</button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}