{% extends 'base.html' %}
{% block title %}Set Up 2FA – Chiez Stores{% endblock %}
{% block extra_css %}
<style>
.auth-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;background:#f9f7f4;padding:40px 20px;}
.auth-box{width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.1);padding:40px 32px;}
.auth-input{width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-family:var(--sans);font-size:14px;outline:none;transition:all .2s;}
.auth-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.1);}
.auth-btn{width:100%;padding:13px;background:var(--black);color:#fff;border:none;border-radius:8px;font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:10px;}
.auth-btn:hover{background:var(--gold);}
.auth-btn.secondary{background:#fff;color:var(--black);border:1.5px solid #e2e8f0;margin-top:8px;}
.auth-btn.secondary:hover{border-color:var(--gold);color:var(--gold);}
.method-options{display:flex;gap:10px;margin-bottom:16px;}
.method-card{flex:1;border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 10px;cursor:pointer;text-align:center;transition:all .2s;}
.method-card:hover{border-color:var(--gold);}
.method-card.active{border-color:var(--gold);background:#fffbf0;}
.method-card .m-icon{font-size:24px;margin-bottom:6px;}
.method-card .m-name{font-size:12px;font-weight:700;color:#374151;}
.method-card .m-desc{font-size:11px;color:#64748b;margin-top:2px;}
</style>
{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="auth-box">
    <div style="text-align:center;margin-bottom:24px;">
      <div style="width:56px;height:56px;background:#fff7ed;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;">🔐</div>
      <h1 style="font-family:var(--serif);font-size:26px;font-weight:400;margin-bottom:6px;">Secure Your Account</h1>
      <p style="font-size:13px;color:#64748b;">Choose how you'd like to receive your verification codes.</p>
    </div>

    <form method="POST">
      {% csrf_token %}

      <label style="display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#374151;margin-bottom:8px;">Delivery Method</label>
      <div class="method-options">
        <label class="method-card {% if profile.method == 'email' or not profile.method %}active{% endif %}" id="card-email">
          <input type="radio" name="method" value="email" style="display:none;"
                 {% if profile.method == 'email' or not profile.method %}checked{% endif %}>
          <div class="m-icon">✉️</div>
          <div class="m-name">Email</div>
          <div class="m-desc">{{ request.user.email }}</div>
        </label>
        <label class="method-card {% if profile.method == 'whatsapp' %}active{% endif %}" id="card-whatsapp">
          <input type="radio" name="method" value="whatsapp" style="display:none;"
                 {% if profile.method == 'whatsapp' %}checked{% endif %}>
          <div class="m-icon">💬</div>
          <div class="m-name">WhatsApp</div>
          <div class="m-desc">Your phone number</div>
        </label>
      </div>

      <div id="phone-field" style="margin-bottom:16px;display:{% if profile.method == 'whatsapp' %}block{% else %}none{% endif %};">
        <label style="display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#374151;margin-bottom:6px;">WhatsApp Number</label>
        <input type="tel" class="auth-input" name="phone_number"
               placeholder="+2348012345678" value="{{ profile.phone_number }}">
        {% if errors.phone_number %}
          <p style="font-size:12px;color:#dc2626;margin-top:4px;">{{ errors.phone_number }}</p>
        {% endif %}
      </div>

      <button type="submit" class="auth-btn">Send Verification Code</button>
      {% if not profile.is_2fa_enabled %}
        <button type="submit" name="skip" class="auth-btn secondary">Skip for now</button>
      {% else %}
        <button type="submit" name="disable" class="auth-btn secondary">Disable 2FA</button>
      {% endif %}
    </form>

    <div style="text-align:center;margin-top:20px;font-size:13px;color:#64748b;">
      You can always change this in <a href="{% url 'users:setup_2fa' %}" style="color:var(--gold);font-weight:600;">Account Settings</a>
    </div>
  </div>
</div>

<script>
  const cards = document.querySelectorAll('.method-card');
  const phoneField = document.getElementById('phone-field');

  cards.forEach(card => {
    card.addEventListener('click', () => {
      cards.forEach(c => c.classList.remove('active'));
      card.classList.add('active');
      const radio = card.querySelector('input[type=radio]');
      radio.checked = true;
      phoneField.style.display = radio.value === 'whatsapp' ? 'block' : 'none';
    });
  });
</script>
{% endblock %}