{% extends 'base.html' %}{% load static %}
{% block title %}Become a Merchant — Unity Nation{% endblock %}
{% block extra_css %}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
@media(max-width:560px){.type-grid{grid-template-columns:1fr}}
.type-card{background:var(--panel);border:2px solid var(--border);border-radius:var(--rl);padding:22px;cursor:pointer;transition:all var(--tr);position:relative;overflow:hidden}
.type-card::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;opacity:.08;pointer-events:none}
.type-card.biz::before{background:var(--violet)}
.type-card.corp::before{background:var(--gold)}
.type-card.selected{border-color:var(--violet);background:rgba(123,95,230,.08)}
.type-card.selected.corp{border-color:var(--gold);background:rgba(245,200,66,.06)}
.type-icon{font-size:2rem;margin-bottom:11px}
.type-card h3{font-family:var(--ff);font-size:1rem;font-weight:700;margin-bottom:6px}
.type-price{font-family:var(--ff);font-size:1.2rem;font-weight:700;color:var(--teal);margin-bottom:12px}
.type-card.corp .type-price{color:var(--gold)}
.type-features{list-style:none;display:flex;flex-direction:column;gap:6px}
.type-features li{font-size:.79rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.type-features li i{font-size:.72rem;color:var(--teal);flex-shrink:0}
.selected-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--violet);display:none;align-items:center;justify-content:center;font-size:.65rem;color:#fff}
.type-card.selected .selected-tick{display:flex}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:580px){.form-row{grid-template-columns:1fr}}
.sec-divider{font-family:var(--ff);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.sec-divider i{color:var(--vlt)}
{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:780px;margin:0 auto">
<div class="pg-hd">
  <div class="ey">Marketplace</div>
  <h1>Become a Merchant</h1>
  <p>Join our marketplace and sell your products or services to the Unity Nation community.</p>
</div>

<div class="alert alert-warning" style="margin-bottom:22px">
  <i class="fas fa-exclamation-triangle"></i>
  <span>Registration fee will be deducted from your wallet. Current balance: <strong style="color:var(--white)">${{ user.wallet_balance|floatformat:2 }}</strong></span>
</div>

<!-- Type Selection -->
<div style="font-family:var(--ff);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:13px">Select Merchant Type</div>
<div class="type-grid">
  <div class="type-card biz selected" id="bizCard" onclick="selType('BUSINESS')">
    <div class="selected-tick"><i class="fas fa-check"></i></div>
    <div class="type-icon">🏢</div>
    <h3>Business Merchant</h3>
    <div class="type-price">$20 Registration</div>
    <ul class="type-features">
      <li><i class="fas fa-check-circle"></i>Valid ID Required</li>
      <li><i class="fas fa-check-circle"></i>Business Location Photo</li>
      <li><i class="fas fa-check-circle"></i>$500 Weekly Conversion Limit</li>
      <li><i class="fas fa-check-circle"></i>Min $20 UNB Daily Conversion</li>
    </ul>
  </div>
  <div class="type-card corp" id="corpCard" onclick="selType('CORPORATE')">
    <div class="selected-tick" style="background:var(--gold)"><i class="fas fa-check"></i></div>
    <div class="type-icon">🏛️</div>
    <h3>Corporate Merchant</h3>
    <div class="type-price">$100 Registration</div>
    <ul class="type-features">
      <li><i class="fas fa-check-circle" style="color:var(--gold)"></i>Valid ID Required</li>
      <li><i class="fas fa-check-circle" style="color:var(--gold)"></i>CAC Certificate Required</li>
      <li><i class="fas fa-check-circle" style="color:var(--gold)"></i>Business Location Photo</li>
      <li><i class="fas fa-check-circle" style="color:var(--gold)"></i>$2000 Weekly Conversion Limit</li>
      <li><i class="fas fa-check-circle" style="color:var(--gold)"></i>Min $20 UNB Daily Conversion</li>
    </ul>
  </div>
</div>

<div class="card">
<form method="post" action="{% url 'join_marketplace' %}" enctype="multipart/form-data">{% csrf_token %}
<input type="hidden" name="merchant_type" id="merchant_type" value="BUSINESS">

<div class="sec-divider"><i class="fas fa-building"></i>Business Information</div>
<div class="form-row">
  <div class="form-group"><label class="form-label">Business Name *</label><input type="text" name="business_name" class="form-control" placeholder="Your business name" required value="{{ form.business_name.value|default:'' }}"></div>
  <div class="form-group"><label class="form-label">Country *</label>
    <select name="country" class="form-control" required>
      <option value="">Select country…</option>
      {% for c in "Nigeria,Ghana,Kenya,South Africa,Tanzania,Uganda,Ethiopia,Egypt,United States,United Kingdom,Canada,Australia,India,Pakistan,Bangladesh,Philippines,Indonesia,Malaysia,Singapore,UAE,Saudi Arabia,Brazil,Mexico,Germany,France,Other"|split:"," %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
    </select>
  </div>
</div>
<div class="form-group"><label class="form-label">Business Address *</label><textarea name="business_address" class="form-control" placeholder="Full business address" required>{{ form.business_address.value|default:'' }}</textarea></div>
<div class="form-group"><label class="form-label">Business Description *</label><textarea name="description" class="form-control" placeholder="Describe your business and what you offer…" required>{{ form.description.value|default:'' }}</textarea></div>
<div class="form-row">
  <div class="form-group"><label class="form-label">Business Phone</label><input type="text" name="business_phone" class="form-control" placeholder="+1234567890"></div>
  <div class="form-group"><label class="form-label">What will you sell? *</label>
    <select name="sell_type" class="form-control" required>
      <option value="">Select type…</option>
      <option value="PRODUCTS">Physical Products</option>
      <option value="SERVICES">Services</option>
      <option value="BOTH">Both Products &amp; Services</option>
      <option value="DIGITAL">Digital Products</option>
    </select>
  </div>
</div>

<div class="sec-divider"><i class="fas fa-file-alt"></i>Documents &amp; Verification</div>
<div class="form-row">
  <div class="form-group"><label class="form-label">Valid ID (front) *</label><input type="file" name="id_document" class="form-control" accept="image/*" required></div>
  <div class="form-group"><label class="form-label">Business Location Photo *</label><input type="file" name="business_photo" class="form-control" accept="image/*" required></div>
</div>
<div id="cacField" style="display:none" class="form-group"><label class="form-label">CAC Certificate (Corporate) *</label><input type="file" name="cac_document" class="form-control" accept="image/*,.pdf"></div>

<div class="form-group" style="margin-top:20px">
  <label class="form-check"><input type="checkbox" name="agree_terms" required><label>I agree to the <a href="{% url 'terms' %}" style="color:var(--vlt)" target="_blank">Terms &amp; Conditions</a> and Unity Nation merchant policies</label></label>
</div>

<div style="background:rgba(0,200,168,.06);border:1px solid rgba(0,200,168,.18);border-radius:9px;padding:12px 15px;font-size:.8rem;color:var(--muted);margin-bottom:20px">
  <i class="fas fa-info-circle" style="color:var(--teal);margin-right:6px"></i>Your application will be reviewed by our team. You'll be notified once approved and your merchant dashboard will be activated.
</div>

<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px">
  <a href="{% url 'dashboard' %}" class="btn btn-ghost"><i class="fas fa-times"></i>Cancel</a>
  <button type="submit" class="btn btn-violet btn-lg"><i class="fas fa-store"></i>Submit Application</button>
</div>
</form>
</div>
</div>
<script>
function selType(t){
  document.getElementById('merchant_type').value=t;
  document.getElementById('bizCard').classList.toggle('selected',t==='BUSINESS');
  document.getElementById('corpCard').classList.toggle('selected',t==='CORPORATE');
  document.getElementById('cacField').style.display=t==='CORPORATE'?'block':'none';
}
</script>
{% endblock %}