{% extends "base.html" %}
{% load static %}
{% block title %}Payout Setup — {{ vendor.store_name }}{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
.network-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.network-option input[type="radio"] { display:none; }
.network-option label {
    display:block; padding:12px 14px; border:1px solid var(--border);
    border-radius:var(--radius-sm); cursor:pointer; text-align:center;
    font-size:13px; font-weight:500; transition:all .15s; background:var(--bg);
}
.network-option input:checked + label {
    border-color:var(--accent); background:var(--accent-glow); color:var(--accent-light);
}
.network-option label:hover { border-color:#555; }
.type-tabs { display:flex; gap:8px; margin-bottom:20px; }
.type-tab { padding:9px 20px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--text-secondary); transition:all .15s; }
.type-tab.active { background:var(--accent-glow); border-color:var(--accent); color:var(--accent-light); }
.account-section { display:none; }
.account-section.active { display:block; }
</style>
{% endblock %}
{% block body %}
<div class="dash">
    <nav class="dash-nav">
        <div class="dash-nav-brand"><span class="logo-icon">&#9670;</span><span class="logo-text">ACA Vendor</span></div>
        <div class="dash-nav-links">
            <a href="{% url 'vendors:dashboard' %}" class="nav-link">Dashboard</a>
            <a href="{% url 'vendors:orders' %}" class="nav-link">Orders</a>
            <a href="{% url 'escrow:payout_setup' %}" class="nav-link active">Payout</a>
            <a href="{% url 'vendors:settings' %}" class="nav-link">Settings</a>
        </div>
        <div class="dash-nav-right">
            <span class="nav-user">{{ vendor.store_name }}</span>
            <form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}
                <button type="submit" class="nav-link">Logout</button>
            </form>
        </div>
    </nav>
    <div class="page-scroll" style="height:100vh;">
        <div class="page-layout">
            <div class="page-content">
                <a href="{% url 'vendors:settings' %}" class="back-link">&larr; Back to Settings</a>
                <h1 class="page-title">Payout Account</h1>
                <p class="page-desc">Set up where your secure payment payouts are sent when buyers confirm delivery. All payouts are in <strong>Ghana Cedis (GHS)</strong>.</p>

                {% if saved %}
                <div class="alert alert-success">Payout account saved successfully.</div>
                {% endif %}

                {% if errors %}
                <div class="form-errors">{% for e in errors %}<p>{{ e }}</p>{% endfor %}</div>
                {% endif %}

                {% if payout_acct and not saved %}
                <div class="form-section" style="border-color:rgba(0,184,148,.25);">
                    <div class="section-icon success-icon">&#10003;</div>
                    <div class="section-content">
                        <h2>Current Payout Account</h2>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px;">
                            <div><span style="color:var(--text-muted);font-size:11px;display:block;margin-bottom:2px;">TYPE</span>{{ payout_acct.get_account_type_display }}</div>
                            <div><span style="color:var(--text-muted);font-size:11px;display:block;margin-bottom:2px;">NAME</span>{{ payout_acct.account_name }}</div>
                            <div><span style="color:var(--text-muted);font-size:11px;display:block;margin-bottom:2px;">NUMBER</span>{{ payout_acct.account_number }}</div>
                            <div><span style="color:var(--text-muted);font-size:11px;display:block;margin-bottom:2px;">RECIPIENT CODE</span><code style="font-size:11px;">{{ payout_acct.paystack_recipient_code }}</code></div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <form method="post">
                    {% csrf_token %}
                    <div class="form-section">
                        <div class="section-icon">1</div>
                        <div class="section-content">
                            <h2>Payment Method</h2>
                            <div class="type-tabs">
                                <button type="button" class="type-tab active" onclick="switchType('bank')">Bank Account</button>
                                <button type="button" class="type-tab" onclick="switchType('momo')">Mobile Money</button>
                            </div>

                            <!-- Bank section -->
                            <div class="account-section active" id="section-bank">
                                <input type="hidden" name="account_type" id="account_type" value="nuban">
                                <div class="form-group">
                                    <label for="account_name_bank">Account Holder Name</label>
                                    <input type="text" name="account_name" id="account_name_bank" class="acct-name" placeholder="Full name as on bank account" value="{{ payout_acct.account_name|default:'' }}">
                                </div>
                                <div class="form-row">
                                    <div class="form-group">
                                        <label for="account_number_bank">Account Number</label>
                                        <input type="text" name="account_number" id="account_number_bank" class="acct-number" placeholder="0123456789" value="{{ payout_acct.account_number|default:'' }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="bank_code">Bank</label>
                                        <select id="bank_code" name="bank_code">
                                            <option value="">Select bank...</option>
                                            {% for bank in banks %}
                                            <option value="{{ bank.code }}" {% if payout_acct and payout_acct.bank_code == bank.code %}selected{% endif %}>{{ bank.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Mobile Money section -->
                            <div class="account-section" id="section-momo">
                                <div class="form-group">
                                    <label>Account Name</label>
                                    <input type="text" class="acct-name" name="account_name" placeholder="Name registered to mobile number" value="{{ payout_acct.account_name|default:'' }}">
                                </div>
                                <div class="form-group">
                                    <label>Mobile Number</label>
                                    <input type="text" class="acct-number" name="account_number" placeholder="0244XXXXXX" value="{{ payout_acct.account_number|default:'' }}">
                                </div>
                                <div class="form-group">
                                    <label>Mobile Network</label>
                                    <div class="network-options">
                                        <div class="network-option">
                                            <input type="radio" id="mtn" name="mobile_network" value="MTN" {% if payout_acct and payout_acct.mobile_network == 'MTN' %}checked{% endif %}>
                                            <label for="mtn">MTN MoMo</label>
                                        </div>
                                        <div class="network-option">
                                            <input type="radio" id="vod" name="mobile_network" value="VOD" {% if payout_acct and payout_acct.mobile_network == 'VOD' %}checked{% endif %}>
                                            <label for="vod">Vodafone Cash</label>
                                        </div>
                                        <div class="network-option">
                                            <input type="radio" id="atl" name="mobile_network" value="ATL" {% if payout_acct and payout_acct.mobile_network == 'ATL' %}checked{% endif %}>
                                            <label for="atl">AirtelTigo</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions-bar">
                        <a href="{% url 'vendors:settings' %}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg">Save Payout Account</button>
                    </div>
                </form>
            </div>

            <aside class="page-sidebar">
                <div class="sidebar-card">
                    <h3>How payouts work</h3>
                    <ol class="sidebar-steps">
                        <li>Buyer pays at checkout — funds held securely</li>
                        <li>You deliver and upload proof photo</li>
                        <li>Buyer confirms receipt via SMS</li>
                        <li>GHS transferred to this account automatically</li>
                    </ol>
                </div>
                <div class="sidebar-card sidebar-tip">
                    <h3>Currency</h3>
                    <p class="sidebar-text">All payouts are in <strong>Ghana Cedis (GHS)</strong>. A 2% platform fee is deducted before payout.</p>
                </div>
            </aside>
        </div>
    </div>
</div>

<script>
let currentType = 'bank';

function switchType(type) {
    currentType = type;

    document.querySelectorAll('.type-tab').forEach((t, i) => {
        t.classList.toggle('active', (i === 0 && type === 'bank') || (i === 1 && type === 'momo'));
    });

    document.getElementById('section-bank').classList.toggle('active', type === 'bank');
    document.getElementById('section-momo').classList.toggle('active', type === 'momo');

    document.getElementById('account_type').value = type === 'bank' ? 'nuban' : 'mobile_money';
}

</script>
{% endblock %}